/* --- Landings --- */

@font-face{
  font-family: 'Buffalo';
  src:
   url("/static/fonts/buffalo/Buffalo_Regular.dac2b62e0eb7.woff") format('woff');
  font-weight: 400;              
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Gotham-Bold';
  src:
   url("/static/fonts/gotham/Gotham-Bold.c43129eb9489.woff") format('woff');
  font-weight: 400;              
  font-style: normal;
  font-display: swap;
}

:root{
  --brand-navy:#0b4a75;
  --rule:#c6d6e6;
  --alt-bg:#F2F7FB; 
          /* fondo de la sección 2 y del separador */
}

/* Sección base */
.section{ padding: 72px 16px; }

/* HERO */
.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 16px 64px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  min-height: clamp(380px, 100vh, 1000px);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  
}
.hero > .container{ position:relative; max-width: 1200px; }

/* Título caligráfico + línea */
.hero-script{
  font-family: "Buffalo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw + .25rem, 4rem);
  line-height: 1.05;
  color: var(--brand-navy);
  margin: 0 auto 18px;
}

.hero-rule{
  display:block; width: clamp(220px, 55%, 760px); height:3px;
  background: var(--rule); border-radius: 2px;
  margin: 0 auto 28px;
}

.hero-lead{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw + .7rem, 1.5rem);
  line-height: 1.6; letter-spacing:.02em;
  color: var(--brand-navy);
  margin: 0 auto; max-width: 1200px;
}


.hero-media{
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  opacity: 0;                  /* estado inicial */
  transform: scale(1.02);      /* leve zoom inicial */
  will-change: transform, opacity;
}

/* Cuando entra, hace fade + arranca el Ken Burns */
.hero-media.is-inview{
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.2,.65,.2,1);
  animation: hero-kenburns 2s ease-out forwards; /* zoom lento */
}

/* Efecto Ken Burns */
@keyframes hero-kenburns{
  0%   { transform: scale(1.02); }
  100% { transform: scale(1.04); }  /* ajusta a gusto (1.08–1.16) */
}


/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .hero-media{ opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Sección alternativa */
.section-alt{
  background: var(--alt-bg);
  position: relative;
}

/* Separador en onda (genérico) */
.sep-wave{
  position: relative;
  height: 80px;
  line-height: 0;
  overflow: hidden;
}
.sep-wave svg{
  display: block;
  width: 100%;
  height: 100%;
}
.sep-wave path{
  fill: var(--wave-fill, #fff);
  transition: fill .2s ease;
}

/* Utilidades para definir el color de “relleno” de la ola */
.wave-to-alt { --wave-fill: var(--alt-bg); }   /* ola que pasa a sección ALT */
.wave-to-page{ --wave-fill: var(--page-bg); } /* ola que vuelve al fondo general */

/* Ola inferior: misma figura, girada */
.sep-wave--bottom{
  transform: translateY(-1px) rotate(180deg);
}

/* Quita cualquier línea entre fondos */
.section-alt + .sep-wave{ margin-top: -1px; }

/* ===== Reveal base ===== */
:root{
  --reveal-distance: 24px;
  --reveal-dur: .7s;
  --reveal-ease: cubic-bezier(.2,.65,.2,1);
}

.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-dur) var(--reveal-ease),
              transform var(--reveal-dur) var(--reveal-ease),
              filter var(--reveal-dur) var(--reveal-ease);
  filter: blur(0);
  will-change: opacity, transform, filter;
  transition-delay: var(--d, 0ms); /* la define el JS para el stagger */
}

/* Variantes direccionales */
.reveal.reveal-left  { transform: translateX(calc(-1 * var(--reveal-distance))); }
.reveal.reveal-right { transform: translateX(var(--reveal-distance)); }
.reveal.reveal-zoom  { transform: scale(.98); }

/* Estado visible */
.reveal.is-inview{ opacity: 1; transform: none; filter: none; }

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Overlay legible en el hero */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(11,74,117,.05), rgba(11,74,117,.25));
}
.hero-claim{ position: relative; z-index: 1; }

/* Botón marca */
.btn-brand{
  display:inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--brand-navy);
  color:#fff; text-decoration:none; font-weight:600;
  box-shadow: 0 8px 20px rgba(11,74,117,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-brand:hover{ background-color: #005fbe; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,74,117,.3); }
.btn-brand--light{ background:#fff; color: var(--brand-navy); }

/* Grid util */
.container{ max-width: 1200px; margin-inline:auto; }

/* Pilares */
.pillars-grid{
  display:grid; gap: 20px; margin-top: 28px;
  grid-template-columns: repeat(4, 1fr);
}
.pillar-card{
  background:#fff; border-radius: 18px; padding: 24px 22px;
  box-shadow: 0 10px 30px rgba(11,74,117,.08);
  border: 1px solid #e6eef7;
}
.pillar-card h3{
  font-family: "Gotham-Bold", system-ui; font-size: 1.15rem; color: var(--brand-navy); margin-bottom: 8px;
}
.pillar-card p{ margin:0; line-height:1.55; }

/* KPIs */
.kpis{
  display:grid; grid-template-columns: repeat(4,1fr); gap:20px;
}
.kpi-item{
  background:#fff; border-radius: 18px; padding: 22px;
  box-shadow: 0 10px 28px rgba(11,74,117,.07);
  border: 1px solid #e6eef7;
}
.kpi-number{
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800; color: var(--brand-navy); line-height: 1;
}
.kpi-number::after{ content:"%"; font-weight:700; margin-left:2px; }
.kpi-item:nth-child(2) .kpi-number::after{ content:""; } /* ej: unidades absolutas */
.kpi-label{ margin-top: 6px; opacity:.8; }

/* Proceso */
.process-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 28px;
  counter-reset: steps;
  position: relative;
}
.process-grid::before{
  content:""; position:absolute; left:10px; right:10px; top:34px; height:2px; background:#dfeaf5;
}
.process-step{
  background:#fff; border-radius:16px; padding: 20px 18px; text-align:center;
  box-shadow: 0 10px 28px rgba(11,74,117,.07); border:1px solid #e6eef7;
}
.step-badge{
  display:inline-grid; place-items:center;
  width: 34px; height:34px; border-radius:50%;
  background: var(--brand-navy); color:#fff; font-weight:700; margin-top:-18px; margin-bottom:8px;
  box-shadow: 0 6px 18px rgba(11,74,117,.25);
}

/* Casos */
.case-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top:26px; }
.case-card{ background:#fff; border-radius:18px; overflow:hidden; border:1px solid #e6eef7; box-shadow: 0 10px 28px rgba(11,74,117,.07);}
.case-head img{ width:100%; height:180px; object-fit:cover; display:block; }
.case-body{ padding:18px; }
.case-body h4{ color:var(--brand-navy); margin-bottom:8px; font-size:1.05rem; }
.case-body ul{ padding-left:18px; margin:0; }

/* Testimonios (scroll-snap) */
.testimonials-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom: 8px;
}
.testimonial-card{
  scroll-snap-align:center; background:#fff; border:1px solid #e6eef7; border-radius:16px; padding:20px;
  box-shadow: 0 10px 28px rgba(11,74,117,.07);
}
.testimonial-card blockquote{ font-style: italic; margin:0 0 8px; color:#163f5c; }
.testimonial-card figcaption{ font-size:.95rem; opacity:.8; }

/* FAQ */
.faq-grid{ display:grid; grid-template-columns: 1fr; gap:12px; margin-bottom:28px; }
.faq-item{
  background:#fff; border-radius:14px; border:1px solid #e6eef7; padding:14px 16px;
}
.faq-item summary{ cursor:pointer; font-weight:700; color:var(--brand-navy); }
.faq-item[open] summary{ margin-bottom:8px; }

/* CTA final */
.cta-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 22px; border-radius:20px;
  background: radial-gradient(1200px 400px at 30% -200px, #dbeaf7 0%, #F2F7FB 60%, #e9f2fb 100%);
  border:1px solid #e2edf8; box-shadow: 0 12px 32px rgba(11,74,117,.08);
}
.cta-banner .cta-copy h3{ color:var(--brand-navy); margin:0 0 4px; }
.cta-banner .cta-copy p{ margin:0; }

/* Responsivo */
@media (max-width: 992px){
  .pillars-grid{ grid-template-columns: repeat(2,1fr); }
  .kpis{ grid-template-columns: repeat(2,1fr); }
  .process-grid{ grid-template-columns: repeat(2,1fr); }
  .case-grid{ grid-template-columns: repeat(2,1fr); }
  .cta-banner{ flex-direction:column; text-align:center; }
}
@media (max-width: 560px){
  .pillars-grid, .kpis, .process-grid, .case-grid{ grid-template-columns: 1fr; }
}

@media (min-width: 992px) and (max-width: 1399.98px){
  .section{ padding-block: 3rem; }
  .hero-claim{ margin-top: .5rem; }

.hero-lead{
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.125rem);
  line-height: 1.65;
  max-width: 75ch;               /* no más de ~75 caracteres por línea */
  margin-inline: auto;
}

/* Botón del hero (sin tocar tu .btn-brand global) */
.hero-claim .btn-brand{
  padding: clamp(.55rem, .45rem + .4vw, .75rem) clamp(1rem, .8rem + .6vw, 1.25rem);
  font-size: clamp(.95rem, .9rem + .2vw, 1rem);
  border-radius: .75rem;
}
}

/* En móviles, bordes y ritmo un poco más compactos */
@media (max-width: 575.98px){
  .hero-claim .btn-brand{ border-radius: .65rem; }
}