/* hero-overrides.css — additional rules layered on top */

/* ---------- HERO FORM (right card of hero) ---------- */
.hero .figure.hero-figure-form {
  aspect-ratio: auto;
  padding: 36px 36px 32px;
  background: rgba(244, 239, 229, 0.96);
  border: 1px solid rgba(244, 239, 229, 0.6);
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--fg-1);
  align-self: stretch;
}

.hero-form .hf-logo {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-hair);
}
.hero-form .hf-eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bu-ocre);
  margin-bottom: 12px;
}
.hero-form .hf-title {
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-1);
  margin: 0 0 24px;
}
.hero-form .hf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.hero-form .hf-field label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.hero-form .hf-field input,
.hero-form .hf-field textarea {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-1);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-rule);
  padding: 8px 0;
  outline: none; resize: none;
  transition: border-color 140ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hero-form .hf-field input::placeholder,
.hero-form .hf-field textarea::placeholder { color: var(--bu-piedra); font-style: italic; }
.hero-form .hf-field input:focus,
.hero-form .hf-field textarea:focus {
  border-bottom-color: var(--bu-ocre);
  box-shadow: 0 1px 0 0 var(--bu-ocre);
}
.hero-form .hf-submit {
  width: 100%; margin-top: 18px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  background: #B5853A; color: #FFFFFF;
  padding: 14px 22px; border: 0; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  letter-spacing: 0.02em;
  transition: background 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.hero-form .hf-submit:hover { background: #9c7030; transform: translateY(-1px); }
.hero-form .hf-submit .arr { font-family: var(--font-display); font-size: 16px; line-height: 1; }
.hero-form .hf-link {
  display: block; width: 100%; margin-top: 14px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
  text-align: center; padding: 4px;
  text-decoration: underline; text-decoration-color: var(--line-rule); text-underline-offset: 3px;
  transition: color 140ms var(--ease-out);
}
.hero-form .hf-link:hover { color: var(--bu-ocre); }

.hero-form .hf-success { text-align: center; padding: 16px 0 8px; }
.hero-form .hf-check {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--bu-ocre); color: #FFFFFF;
  display:flex; align-items:center; justify-content:center;
  font-size: 28px; margin: 0 auto 20px;
}
.hero-form .hf-success-title {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  color: var(--fg-1); margin-bottom: 10px;
}
.hero-form .hf-success p {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-3);
  line-height: 1.5; margin: 0;
}

/* ---------- ABOUT full-bleed ---------- */
.about { padding: 120px 0; position: relative; }
.about.about-full .about-grid {
  display: block;
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  min-height: auto;
  padding: 0 var(--site-gutter);
}
.about.about-full .col-text {
  display: block;
  padding: 0;
  background: transparent;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.about.about-full .col-text-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.about.about-full .col-text-inner .rule-accent { margin: 0 auto 28px; }
.about.about-full .col-text-inner .eyebrow { text-align: center; }
.about.about-full .col-text-inner .bu-h2 {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.about.about-full .about-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.about.about-full .about-body .typewriter {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.55;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  min-height: 1.55em;
  font-variation-settings: "opsz" 24;
}
.about.about-full .about-body .typewriter em {
  font-style: italic;
  color: var(--bu-ocre);
  font-weight: 400;
}
.about.about-full .about-body .typewriter .tw-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--bu-ocre);
  margin-left: 4px;
  animation: tw-blink 720ms steps(1) infinite;
  opacity: 1;
}
.about.about-full .about-body .typewriter.done .tw-caret { display: none; }
@keyframes tw-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.about.about-full .col-text .footnote {
  display:flex; align-items:center; justify-content: center; gap: 24px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--line-hair);
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
  max-width: 520px; margin-left: auto; margin-right: auto;
}
.about.about-full .col-text .footnote { display:flex; align-items:center; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-hair); font-family: var(--font-sans); font-size: 13px; color: var(--fg-3); }

@media (max-width: 880px) {
  .about.about-full .about-body { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- AREA CARDS with image ---------- */
.area-card {
  background: var(--bu-marfil); border: 1px solid var(--line-hair); border-radius: 4px;
  padding: 0; display:flex; flex-direction: column; min-height: 380px;
  overflow: hidden;
  position: relative; cursor: pointer;
  transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.area-card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.area-card .area-thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bu-tinta);
}
.area-card .area-thumb-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.6) contrast(1.04);
  transition: transform 700ms var(--ease-out), filter 220ms var(--ease-out);
}
.area-card:hover .area-thumb-img { transform: scale(1.06); filter: grayscale(0.3) contrast(1.06); }
.area-card .area-thumb::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,23,38,0.1) 0%, rgba(14,23,38,0.55) 100%);
}
.area-card .num {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(244,239,229,0.85);
  background: rgba(14,23,38,0.4); padding: 4px 8px; border-radius: 2px;
  backdrop-filter: blur(4px);
}
.area-card .area-thumb .icon {
  position: absolute; bottom: 16px; left: 16px; z-index: 1;
  width: 44px; height: 44px;
  background: var(--bu-papel);
  display:flex; align-items:center; justify-content:center;
  border-radius: 4px;
}
.area-card .area-thumb .icon i { font-size: 24px; color: var(--bu-tinta); }
.area-card .area-body {
  padding: 24px 24px 24px; display:flex; flex-direction: column; gap: 12px; flex: 1;
}
.area-card .area-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--fg-1); margin: 0; letter-spacing: -0.005em; }
.area-card .area-body p { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--fg-3); margin: 0; flex: 1; }
.area-card .area-body .more { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--bu-tinta); display:inline-flex; align-items:center; gap: 6px; margin-top: 4px; }
.area-card .area-body .more .arr { font-family: var(--font-display); font-size: 16px; }
.area-card::after { display: none; }

/* ---------- ENHANCED REVEAL ANIMATIONS ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

.hero.reveal { transform: none; opacity: 0; transition: opacity 1000ms var(--ease-out); }
.hero.reveal.in { opacity: 1; }
.hero h1 { animation: heroSlideUp 900ms var(--ease-out) both; animation-delay: 200ms; }
.hero .lede { animation: heroSlideUp 900ms var(--ease-out) both; animation-delay: 350ms; }
.hero .cta-row { animation: heroSlideUp 900ms var(--ease-out) both; animation-delay: 500ms; }
.hero .hero-kpis { animation: heroSlideUp 900ms var(--ease-out) both; animation-delay: 650ms; }
.hero .figure { animation: heroSlideIn 1100ms var(--ease-out) both; animation-delay: 400ms; }

@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Staggered card reveal — when a section reveals, its cards slide in */
.reveal .area-card,
.reveal .ed-card,
.reveal .partner-teaser,
.reveal .val,
.reveal .insight-row {
  opacity: 0; transform: translateY(28px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.in .area-card,
.reveal.in .ed-card,
.reveal.in .partner-teaser,
.reveal.in .val,
.reveal.in .insight-row {
  opacity: 1; transform: translateY(0);
}
.reveal.in .area-card:nth-child(1) { transition-delay: 80ms; }
.reveal.in .area-card:nth-child(2) { transition-delay: 160ms; }
.reveal.in .area-card:nth-child(3) { transition-delay: 240ms; }
.reveal.in .area-card:nth-child(4) { transition-delay: 320ms; }
.reveal.in .area-card:nth-child(5) { transition-delay: 400ms; }
.reveal.in .area-card:nth-child(6) { transition-delay: 480ms; }
.reveal.in .val:nth-child(1) { transition-delay: 120ms; }
.reveal.in .val:nth-child(2) { transition-delay: 220ms; }
.reveal.in .val:nth-child(3) { transition-delay: 320ms; }
.reveal.in .val:nth-child(4) { transition-delay: 420ms; }
.reveal.in .partner-teaser:nth-child(1) { transition-delay: 160ms; }
.reveal.in .partner-teaser:nth-child(2) { transition-delay: 320ms; }
.reveal.in .insight-row:nth-child(1) { transition-delay: 100ms; }
.reveal.in .insight-row:nth-child(2) { transition-delay: 200ms; }
.reveal.in .insight-row:nth-child(3) { transition-delay: 300ms; }
.reveal.in .insight-row:nth-child(4) { transition-delay: 400ms; }
.reveal.in .insight-row:nth-child(5) { transition-delay: 500ms; }
.reveal.in .insight-row:nth-child(6) { transition-delay: 600ms; }

/* Section heads slide in from different directions */
.about.reveal .col-text-inner { transition-delay: 150ms; }
.about.reveal { transform: none; }
.about.reveal .col-text-inner {
  opacity: 0; transform: translateX(-30px);
  transition: opacity 700ms var(--ease-out) 150ms, transform 700ms var(--ease-out) 150ms;
}
.about.reveal.in .col-text-inner { opacity: 1; transform: translateX(0); }
.about.reveal .image { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease-out) 200ms, transform 900ms var(--ease-out) 200ms; }
.about.reveal.in .image { opacity: 1; transform: scale(1); }

/* Idea Fuerza dramatic fade */
.idea-fuerza.reveal blockquote { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-out) 200ms, transform 800ms var(--ease-out) 200ms; }
.idea-fuerza.reveal.in blockquote { opacity: 1; transform: translateY(0); }