/* =========================================================
   MIRLO SEGURIDAD — styles.css
   Fluid, breakpoint-independent implementation of
   "Proposal 04 — OPTIMIZADA" (desktop-only Figma source)
   ========================================================= */

/* ---------- Fluid helper ----------
   fluid(MIN, MAX) scales linearly between a 375px and a 1440px
   viewport, then clamps outside that range. Used throughout so the
   design holds together at every width without a mobile mockup. */

:root{
  /* ---- palette ---- */
  --bg-void:      #0e0e0f;
  --bg-panel:     #131312;
  --bg-panel-2:   #131211;
  --bg-card:      #1a1a1c;
  --bg-card-alt:  #252528;
  --bg-section-a: #141312;
  --bg-light:     #f2ede0;
  --bg-contact:   #1c1b1a;

  --cream:        #f2ede0;
  --cream-88:     rgba(242,237,224,0.88);
  --cream-75:     rgba(242,237,224,0.75);
  --cream-62:     rgba(242,237,224,0.62);
  --cream-60:     rgba(242,237,224,0.60);
  --cream-55:     rgba(242,237,224,0.55);
  --cream-40:     rgba(242,237,224,0.40);
  --cream-28:     rgba(243,237,225,0.28);
  --cream-05:     rgba(242,237,224,0.05);

  --dark-text:    #141210;
  --dark-text-2:  #4a443a;
  --dark-text-3:  #0e0e0f;

  --gold:         #e0b840;
  --gold-dark:    #967101;
  --gold-25:      rgba(224,184,64,0.25);
  --gold-30:      rgba(224,184,64,0.3);
  --gold-20:      rgba(224,184,64,0.2);
  --gold-12:      rgba(224,184,64,0.12);
  --bronze:       #b5612e;
  --gray-muted:   #736e63;
  --hero-rule:    #38332b;

  --input-bg:     #211e1a;
  --input-border: #a67c2e;

  /* ---- type ---- */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;
  --f-sans:    'IBM Plex Sans', sans-serif;
  --f-button:  'Montserrat', sans-serif;

  /* ---- layout ---- */
  --container-max: 1440px;
  --content-max: 1256px;
  --side-pad: clamp(20px, 3.5vw + 4px, 92px);

  color-scheme: dark;
}

/* ---------- fluid type scale (min → max, 375px → 1440px) ---------- */
:root{
  --t-hero-h1:      clamp(2.3125rem, 1.2625rem + 4.7vw, 4.6875rem);  /* 37 → 75 */
  --t-hero-accent:  clamp(1.2125rem, 1.0125rem + 0.9vw, 1.5rem);    /* 19.4 → 24 */
  --t-h2:           clamp(1.7125rem, 1.1625rem + 2.4vw, 2.8125rem); /* 27.4 → 45 */
  --t-h2-lg:        clamp(1.6625rem, 1.0625rem + 2.6vw, 2.5625rem); /* 26.6 → 41 */
  --t-specialist:   clamp(2.0625rem, 1.2625rem + 3.5vw, 3.3125rem); /* 33 → 53 */
  --t-closing:      clamp(2.0625rem, 1.1625rem + 4vw, 3.4375rem);   /* 33 → 55 */
  --t-footer-stmt:  clamp(1.6625rem, 1.0625rem + 2.6vw, 2.5625rem); /* 26.6 → 41 */
  --t-card-title:   clamp(1.0625rem, 0.9125rem + 0.6vw, 1.3125rem);/* 17 → 21 */
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg-void);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Nota: quitamos "overflow-x: clip" de aquí a propósito — en body/html
     rompe position:sticky en Safari/iOS (bug conocido de WebKit), y era
     justo lo que usa la cortina del Hero. Si algo llega a desbordar de
     lado, se le pone overflow-x:hidden a ese elemento puntual, no aquí. */
}
#hero, #metodo, #nosotros, #servicios, #contacto{
  scroll-margin-top: 96px;
}
img{ display: block; max-width: 100%; height: auto; }
/* <picture> no genera caja: el <img> se comporta igual que antes de envolverlo. */
picture{ display: contents; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
button, input, textarea{ font: inherit; color: inherit; }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

/* ---------- shared type utilities ---------- */
.eyebrow{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: clamp(20px, 2vw + 10px, 38px);
}
.eyebrow-bronze{ color: var(--bronze); }

.section-title{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-h2-lg);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 40ch;
}
.section-lead{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.9125rem + 0.6vw, 1.1875rem);
  color: var(--gold);
  margin-top: clamp(16px, 2vw, 28px);
}
.section-lead-2{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(0.9625rem, 0.8625rem + 0.4vw, 1rem);
  color: var(--cream-60);
  margin-top: 10px;
}
.rule-line{
  height: 1px;
  background: var(--gold-25);
  margin: clamp(32px, 5vw, 64px) 0;
}

/* =========================================================
   ÍCONOS (sprite SVG — ver <symbol> al inicio del <body>)
   Trazo vectorial, nítido a cualquier resolución/zoom (antes eran
   PNG pequeños que se veían pixeleados, sobre todo en retina).
   El color de cada ícono se hereda de `color` en cada contexto:
   dorado en secciones oscuras, bronce en "enfoque" (fondo claro),
   oscuro sobre la franja/los botones dorados.
   ========================================================= */
.hero-item-icon,
.metodo-step-icon,
.expertise-icon,
.capability-icon,
.approach-icon,
.somos-icon,
.risk-icon,
.footer-social svg,
.btn-whatsapp svg,
.whatsapp-float svg{
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-item-icon,
.metodo-step-icon,
.approach-icon,
.somos-icon,
.risk-icon,
.footer-social svg{
  color: var(--gold);
}
.expertise-icon{ color: var(--bronze); }
.capability-icon,
.btn-whatsapp svg,
.whatsapp-float svg{ color: var(--dark-text); }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: var(--dark-text-3);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 16px 26px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn-small{
  padding: 10px 18px;
  border-radius: 2px;
}
.btn-whatsapp{
  font-family: var(--f-button);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 4px;
}
.btn-whatsapp svg{ width: 20px; height: 20px; }
.btn-block{ width: 100%; border-radius: 5px; padding: 14px; font-family: var(--f-button); font-size: 15px; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14,14,15,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(224,184,64,0.08);
}
.nav-wrap{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo{ display: flex; align-items: center; }
.nav-logo-img{ height: 60px; width: auto; max-width: 100%; display: block; }

.nav-links{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.nav-links a{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity .15s ease, color .15s ease;
}
.nav-links a:hover{ opacity: 1; color: var(--gold); }

.nav-right{ display: flex; align-items: center; gap: 20px; }
.nav-index{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gray-muted);
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span{
  display: block;
  height: 1.5px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  background: var(--bg-void);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Sin blend mode (normal): la imagen se ve tal cual, tal y como es,
     con presencia real — screen/multiply la dejaban casi imperceptible
     contra el fondo oscuro del Hero. Opacidad alta para que se note. */
  opacity: 0.9;
}
.hero::after{
  /* Overlay oscuro fijo (no es parte del parallax): profundiza las
     sombras y sube el contraste general del Hero más allá de lo que
     screen por sí solo puede dar — un viñeteado sutil, más oscuro
     hacia los bordes, sin traer de vuelta ninguna imagen de piso. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 38%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.hero-smoke{
  /* Hermano directo de .hero-bg (mismo patrón inset:0), NO hijo de
     .hero-panel: .hero-panel tiene max-width y queda centrado, así
     que el humo se recortaba a los lados en vez de ir de borde a
     borde de la sección. Para que igual quede detrás del texto,
     .hero-panel sube su z-index por encima de este (ver más abajo)
     dentro del stacking context de .hero (isolation:isolate). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El PNG concentra la niebla abajo (base/piernas) y se disuelve
     hacia arriba; con cover en una proporción distinta a la del
     Hero, un object-position centrado recortaba justo esa parte
     densa de abajo. Anclado al fondo para conservarla siempre
     visible sin importar el ancho/alto de la sección. */
  object-position: 50% 100%;
  z-index: 1;
  pointer-events: none;
  /* Sube considerablemente su presencia — sin esto era casi
     imperceptible, igual que le pasaba a .hero-bg antes de subirle
     la opacidad. */
  opacity: 0.95;
}
.hero-panel{
  position: relative;
  /* Por encima de .hero-smoke (z-index:1): el humo debe quedar
     detrás de todo el contenido del panel (texto, foto de Jorge),
     no solo del texto. */
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  /* El padding vertical extra (+clamp(...vh...)) no reordena ni
     reescala nada de adentro — solo alarga el Hero, dando más
     distancia de scroll antes de que la cortina hacia Método
     arranque (ver --hero-h / .hero en la sección STACKED SECTIONS
     más abajo, que ya se adapta sola a este nuevo alto real). */
  padding:
    calc(clamp(28px, 4vw, 78px) + clamp(24px, 8vh, 100px))
    clamp(20px, 4.5vw, 56px)
    calc(clamp(24px, 3vw, 50px) + clamp(24px, 8vh, 100px));
}
.hero-eyebrow{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: clamp(28px, 4vw, 52px);
  grid-area: eyebrow;
}
/* Grid con áreas con nombre: en escritorio es idéntico al diseño de siempre
   (eyebrow arriba; título y resto del texto a la izquierda; Jorge a la derecha
   ocupando las dos filas); en móvil solo cambia el orden (ver @media 960px). */
.hero-stack{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  /* La última fila absorbe el alto sobrante de la foto (que abarca 2 filas),
     para que el texto de "rest" no se separe del título. */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "eyebrow  eyebrow"
    "headline media"
    "rest     media";
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.hero-copy-rest{
  grid-area: rest;
  /* Por encima de .hero-smoke: el humo puede pasar frente al fondo
     y a Jorge, pero el texto principal (título, párrafo, botón)
     siempre debe quedar legible encima de él. */
  position: relative;
  z-index: 3;
}
.hero-headline{
  grid-area: headline;
  position: relative;
  z-index: 3;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-hero-h1);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.hero-accent{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: var(--t-hero-accent);
  color: var(--gold);
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin-bottom: clamp(16px, 2.5vw, 28px);
}
.hero-body{
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--cream);
  max-width: 34ch;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.hero-media{ position: relative; grid-area: media; }
.hero-portrait-shadow{
  /* Ancla a Jorge en la escena en vez de sentirse pegado encima del
     fondo: sombra difusa real, detrás de él (z-index) y ligeramente
     desplazada a la izquierda de su propia posición. SIN transform
     de parallax propio: se queda "anclada" al fondo, que es justo
     el efecto buscado. Recorte y fundido ya vienen hechos en la
     imagen (mismo lienzo que .hero-portrait) — su tamaño lo define
     ella misma, sin aspect-ratio ni object-fit forzados. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-4%);
}
.hero-portrait{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}
.hero-media-caption{ margin-top: clamp(14px, 2vw, 20px); }
.hero-name{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.1625rem, 0.9625rem + 1vw, 1.4375rem);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.hero-role{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-top: 6px;
}

.hero-rule{
  height: 1px;
  background: var(--hero-rule);
  margin: clamp(32px, 5vw, 60px) 0 clamp(24px, 3vw, 40px);
}

.hero-items{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 48px) clamp(28px, 4vw, 48px);
  position: relative;
}
.hero-item{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 140px;
  flex: 1 1 160px;
}
.hero-item-icon{ width: 16px; height: 16px; }
.hero-item-num{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.hero-item-label{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--cream);
}
.hero-scroll{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cream);
  margin-left: auto;
  align-self: center;
  opacity: 0.7;
}

/* =========================================================
   MÉTODO MIRLO
   ========================================================= */
.metodo{ background: var(--bg-panel); padding: clamp(56px, 8vw, 110px) 0; }
.metodo-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, 0.95fr);
  gap: clamp(32px, 5vw, 68px);
  margin-top: clamp(40px, 5vw, 68px);
  align-items: start;
}
.metodo-steps{ display: flex; flex-direction: column; }
.metodo-step{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--gold-25);
}
.metodo-step:first-child{ border-top: 1px solid var(--gold-25); }
.metodo-step-icon{ width: 18px; height: 18px; flex-shrink: 0; }
.metodo-step-num{
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold);
  width: 26px;
  flex-shrink: 0;
}
.metodo-step h3{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 4px;
}
.metodo-step p{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cream-55);
  max-width: 42ch;
}
.metodo-image{
  background: var(--bg-card);
  border: 1px solid var(--gold-25);
  border-radius: 4px;
  aspect-ratio: 628 / 480;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.metodo-image img{ width: 100%; height: 100%; object-fit: cover; }
.pending-label{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  opacity: 0.55;
  text-align: center;
  padding: 0 20px;
}

/* =========================================================
   EXPERTISE (light section)
   ========================================================= */
.expertise{ background: var(--bg-light); padding: clamp(48px, 7vw, 90px) 0; }
.expertise-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(28px, 4vw, 40px);
}
.expertise-item-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.expertise-icon{ width: 26px; height: 26px; }
.expertise-num{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--gold);
}
.expertise-item h3{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.1125rem, 0.9625rem + 0.5vw, 1.4375rem);
  color: var(--dark-text);
  letter-spacing: -0.01em;
}
.expertise-item p{
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--dark-text-2);
  line-height: 1.5;
  max-width: 34ch;
}
.expertise-meta{
  font-family: var(--f-mono) !important;
  font-weight: 500;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  color: var(--bronze) !important;
  margin-top: 14px;
}
.expertise-rule{
  height: 1px;
  background: rgba(181,97,46,0.45);
  margin: clamp(32px, 5vw, 52px) 0 clamp(20px, 3vw, 28px);
}
.expertise-closing{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-h2-lg);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--dark-text);
  text-align: center;
}

/* =========================================================
   CAPABILITY BAND
   ========================================================= */
.capability{ background: var(--bg-void); padding: clamp(36px, 5vw, 62px) 0; }
.capability-inner{
  background: var(--gold);
  border-radius: 3px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(20px, 3vw, 30px);
}
.capability-item{
  position: relative;
  padding-left: clamp(0px, 0vw, 0px);
}
.capability-item:not(:first-child){
  border-left: 1px solid #e8e3d4;
  padding-left: clamp(16px, 2vw, 24px);
}
.capability-icon{ width: 18px; height: 18px; margin-bottom: 10px; }
.capability-num{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dark-text-3);
  display: block;
  margin-bottom: 10px;
}
.capability-item h4{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--dark-text-3);
  margin-bottom: 8px;
}
.capability-item p{
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--dark-text-3);
}

/* =========================================================
   APPROACH CARDS
   ========================================================= */
.approach{ background: var(--bg-void); padding: clamp(30px, 4vw, 50px) 0 clamp(56px, 7vw, 90px); }
.approach-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px);
}
.approach-card{
  display: block;
  background: var(--bg-panel-2);
  border-radius: 4px;
  padding: clamp(18px, 2.5vw, 24px);
  transition: transform .2s ease, background .2s ease;
}
.approach-card:hover{ transform: translateY(-3px); background: #17160f; }
.approach-icon{ width: 20px; height: 20px; margin-bottom: 16px; }
.approach-card h3{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin-bottom: 10px;
}
.approach-card p{
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--gray-muted);
  line-height: 1.5;
  max-width: 40ch;
}
.approach-arrow{
  display: block;
  font-family: var(--f-mono);
  font-size: 19px;
  color: var(--gold);
  margin-top: 22px;
}

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
.somos{ background: var(--bg-section-a); padding: clamp(48px, 7vw, 90px) 0; }
.somos .section-title{ max-width: 48ch; margin-top: 4px; }
.somos-row{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(36px, 5vw, 56px);
}
.somos-item{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 220px;
  padding-left: clamp(0px,0vw,0px);
}
.somos-item:not(:first-child){
  border-left: 1px solid var(--gold-30);
  padding-left: clamp(20px, 3vw, 32px);
}
.somos-icon{ width: 22px; height: 22px; }
.somos-item span{
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

/* =========================================================
   A QUIÉN SERVIMOS + POR QUÉ INVERTIR
   ========================================================= */
.servimos{ background: var(--bg-void); padding: clamp(48px, 7vw, 90px) 0; }
.servimos .section-title{ max-width: 34ch; }
.servimos-lead{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.0125rem, 0.9125rem + 0.4vw, 1.0625rem);
  color: var(--cream-62);
  margin-top: clamp(16px, 2vw, 26px);
  max-width: 46ch;
}
.invertir-title{ max-width: 16ch; }

/* Ticker: franja horizontal con scroll infinito. Se desborda un poco más
   allá del frame/container (técnica left:50%/-50vw) para sugerir que la
   lista sigue de largo fuera de pantalla; el propio track se duplica una
   vez (segundo grupo con aria-hidden) para lograr el loop sin salto. */
.risk-ticker{
  position: relative;
  width: 100vw;
  margin: clamp(32px, 4vw, 48px) calc(50% - 50vw) 0;
  overflow: hidden;
  border-top: 1px solid var(--gold-30);
  border-bottom: 1px solid var(--gold-30);
}
.risk-ticker-track{
  display: flex;
  width: max-content;
  animation: risk-ticker-scroll 32s linear infinite;
}
.risk-ticker:hover .risk-ticker-track,
.risk-ticker:focus-within .risk-ticker-track{
  animation-play-state: paused;
}
.risk-ticker-group{
  display: flex;
  flex-shrink: 0;
}
.risk-item{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: clamp(18px, 2.2vw, 26px) clamp(28px, 3.5vw, 48px);
  border-right: 1px solid var(--gold-20);
}
.risk-icon{ width: 26px; height: 26px; flex-shrink: 0; }
.risk-item h4{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.1625rem, 1.0125rem + 0.5vw, 1.3125rem);
  color: var(--cream-88);
  letter-spacing: -0.005em;
}

@keyframes risk-ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .risk-ticker-track{ animation: none; }
}

.risk-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(28px, 4vw, 40px);
}
.risk-stat{
  border-left: 1px solid var(--gold-25);
  padding-left: clamp(16px, 2vw, 24px);
}
.risk-stat p{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream-75);
  max-width: 42ch;
}
.risk-stat-num{
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--gold);
}

.experiencia-title{ max-width: 22ch; margin-top: clamp(8px, 1vw, 14px); }
.capacidad-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(20px, 3vw, 30px);
  margin-top: clamp(32px, 4vw, 48px);
}
.capacidad-item:not(:first-child){
  border-left: 1px solid var(--gold-25);
  padding-left: clamp(16px, 2vw, 24px);
}
.capacidad-num{
  display: block;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 12px;
}
.capacidad-item h4{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--cream);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.capacidad-item p{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--cream-60);
  line-height: 1.4;
}

/* =========================================================
   SPECIALIST
   ========================================================= */
.specialist{ background: var(--bg-void); padding: clamp(56px, 8vw, 110px) 0; }
.specialist-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, 0.85fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.specialist-title{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-specialist);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.specialist-p1{
  font-family: var(--f-sans);
  font-size: 16px;
  color: var(--cream);
  max-width: 46ch;
  margin-bottom: 18px;
}
.specialist-p2{
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--gray-muted);
  max-width: 46ch;
  margin-bottom: 18px;
}
.specialist-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 46ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.specialist-list li{
  position: relative;
  padding-left: 18px;
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--cream-75);
}
.specialist-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.specialist-meta{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.specialist-media{ position: relative; }
.specialist-portrait{
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 300 / 450;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-panel);
}
.specialist-caption{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-align: center;
  margin-top: 14px;
  opacity: 0.75;
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.servicios{ background: var(--bg-section-a); padding: clamp(56px, 8vw, 100px) 0; }
.servicios-head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.servicios-intro{
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--cream);
  max-width: 30ch;
}
.servicios-grid{
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(40px, 5vw, 60px) 0 clamp(28px, 3.5vw, 36px);
}
.servicio-card{
  background: var(--bg-card);
  border: 1px solid var(--gold-25);
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 20px;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  transition: flex-grow .5s cubic-bezier(.22,.8,.36,1),
              opacity .4s ease, filter .4s ease, transform .4s ease,
              box-shadow .4s ease;
}
.servicio-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.servicio-card.is-active{
  flex-grow: 2.6;
  opacity: 1;
  filter: none;
  transform: scale(1);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  z-index: 2;
}
.servicio-card:not(.is-active){
  opacity: .45;
  filter: blur(1.2px);
  transform: scale(.96);
  z-index: 1;
}
.servicio-card:not(.is-active):hover{ opacity: .7; filter: blur(.5px); }
.servicio-card .servicio-media{
  aspect-ratio: 260 / 204;
  background: var(--bg-card-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.servicio-card .servicio-media img{ width: 100%; height: 100%; object-fit: cover; }
.servicio-card .servicio-num{
  display: block;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--gold);
  margin: 18px 20px 6px;
}
.servicio-card h3{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-card-title);
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0 20px;
}
.servicio-card p{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--cream-60);
  line-height: 1.45;
  margin: 10px 20px 0;
}
.servicio-pending .pending-label{ opacity: 0.8; font-size: 10px; }

.servicios-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.servicios-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream-28);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .3s ease, width .3s ease, border-radius .3s ease;
}
.servicios-dot:hover{ background: var(--cream-60); }
.servicios-dot.is-active{ background: var(--gold); width: 22px; border-radius: 4px; }
.servicios-dot:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.servicios-cta{ display: flex; justify-content: center; }

/* =========================================================
   CLOSING CTA (light)
   ========================================================= */
.closing-cta{ background: var(--bg-light); padding: clamp(56px, 8vw, 100px) 0; }
.closing-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, 0.9fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.closing-title{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-closing);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark-text);
}
.closing-copy{
  font-family: var(--f-sans);
  font-size: 16px;
  color: var(--dark-text-2);
  max-width: 38ch;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.closing-meta{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-top: clamp(16px, 2vw, 24px);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  position: relative;
  background: var(--bg-contact);
  padding: clamp(56px, 8vw, 100px) 0;
  overflow: clip;
}
.contact-watermark{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4.0625rem, 3.0625rem + 10vw, 20.0625rem);
  color: var(--cream-05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.contact-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px, 0.95fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
}
.contact-pill{
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  border: 1px solid var(--gold-30);
  border-radius: 14px;
  padding: 7px 18px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.contact-title{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.0625rem, 1.3625rem + 3vw, 3.3125rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 12ch;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.contact-body{
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--cream);
  max-width: 36ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.contact-form{
  background: rgba(15,16,18,0.45);
  border: 1px solid rgba(160,124,46,0.25);
  border-radius: 8px;
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{
  font-family: var(--f-button);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
}
.field input, .field textarea{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 5px;
  padding: 14px 16px;
  font-family: var(--f-button);
  font-size: 15px;
  color: var(--cream);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--cream-28); }
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: var(--gold);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--bg-void); padding: clamp(48px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); }
.footer-statement{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-footer-stmt);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.footer-statement span{ color: var(--gold); }
.footer-rule{ height: 1px; background: var(--gold-20); margin: clamp(32px, 4vw, 52px) 0 clamp(28px, 4vw, 44px); }
.footer-rule-2{ background: var(--gold-12); margin: clamp(28px, 4vw, 44px) 0 24px; }

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
}
.footer-logo-img{ height: 84px; width: auto; max-width: 100%; display: block; }
.footer-col-title{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-col a{
  display: block;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--cream-75);
  margin-bottom: 12px;
  transition: color .15s ease;
}
.footer-col a:hover{ color: var(--gold); }
.footer-social{ display: flex; gap: 14px; }
.footer-social svg{ width: 22px; height: 22px; }
.footer-copyright{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--cream-40);
}
.footer-confidential{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--cream-40);
  max-width: 640px;
  margin-top: 8px;
  line-height: 1.5;
}
.footer-credit{
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--cream-28);
  margin-top: 8px;
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */
.whatsapp-float{
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 52px;
  height: 52px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 90;
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.06); }
.whatsapp-float svg{ width: 24px; height: 24px; }

/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */
@media (max-width: 960px){
  .hero-stack{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "headline"
      "eyebrow"
      "media"
      "rest";
  }
  .hero-media{ max-width: 380px; margin: 0 auto; }
  /* Antes el hueco entre la foto y el texto lo daba el gap del grid de 2 filas. */
  .hero-copy-rest{ margin-top: clamp(28px, 4vw, 56px); }
  .metodo-grid{ grid-template-columns: 1fr; }
  .metodo-image{ order: -1; }
  .expertise-grid{ grid-template-columns: 1fr 1fr; }
  .capability-inner{ grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .capability-item:nth-child(3){ border-left: none; padding-left: 0; }
  .approach-grid{ grid-template-columns: 1fr; }
  .capacidad-row{ grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .capacidad-item:nth-child(3){ border-left: none; padding-left: 0; }
  .specialist-grid{ grid-template-columns: 1fr; }
  .specialist-media{ order: -1; max-width: 320px; margin: 0 auto; }
  .closing-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

/* Carrusel de servicios: por debajo de este ancho el acordeón de flex-grow
   se vuelve incómodo para dedos, así que cambiamos a scroll-snap horizontal
   (swipe nativo) y la tarjeta activa se distingue solo con escala/blur,
   sin cambiar de ancho, para no romper el cálculo de snap durante el scroll. */
@media (max-width: 780px){
  .servicios-grid{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-left: calc(var(--side-pad, 0px) * -1);
    margin-right: calc(var(--side-pad, 0px) * -1);
    padding-left: var(--side-pad, 0px);
    padding-right: var(--side-pad, 0px);
  }
  .servicios-grid::-webkit-scrollbar{ display: none; }
  .servicio-card{
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
  .servicio-card.is-active{ flex-grow: 0; }
}

@media (max-width: 640px){
  .nav-links{
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--bg-void);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px var(--side-pad) 24px;
    border-bottom: 1px solid var(--gold-20);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-links.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a{ padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(224,184,64,0.08); font-size: 13px; }
  .nav-right .btn-small{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-index{ display: none; }
  .nav-logo-img{ height: 30px; }
  .footer-logo-img{ height: 68px; }

  .hero-eyebrow{ text-align: center; }
  .hero-headline{ text-align: center; }
  .hero-copy-rest{ text-align: center; }
  .hero-accent{ margin-left: auto; margin-right: auto; }
  .hero-body{ margin-left: auto; margin-right: auto; }
  .hero-items{ gap: 20px 28px; }
  .hero-scroll{ display: none; }
  .expertise-grid{ grid-template-columns: 1fr; }
  .risk-item{ padding: clamp(14px, 3vw, 20px) clamp(20px, 5vw, 32px); }
  .risk-stats{ grid-template-columns: 1fr; }
  .risk-stat{ border-left: none !important; padding-left: 0 !important; }
  .capacidad-row{ grid-template-columns: 1fr; }
  .capacidad-item{ border-left: none !important; padding-left: 0 !important; }
  .capability-inner{ grid-template-columns: 1fr; }
  .capability-item{ border-left: none !important; padding-left: 0 !important; }
  .somos-item{ border-left: none !important; padding-left: 0 !important; }
  .footer-grid{ grid-template-columns: 1fr; }
  .contact-watermark{ font-size: clamp(3.0625rem, 0.0625rem + 18vw, 7.0625rem); }
}

/* =========================================================
   TEXTURA DE FONDO — SOLO en negro #0E0E0F (--bg-void)
   Resplandor suave desde una esquina + grano fino.
   El grano es un ruido SVG (feTurbulence), no una imagen PNG en
   mosaico repetido: se dibuja a la resolución real de la pantalla
   (nítido en retina) y no genera el patrón de manchas borrosas que
   daba el PNG con blur.
   ========================================================= */
body,
.hero,
.capability,
.approach,
.servimos,
.specialist,
.site-footer{
  background-image:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.03), transparent 38%),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj4KICA8ZmlsdGVyIGlkPSJnIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjkiIG51bU9jdGF2ZXM9IjIiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibiIvPgogICAgPGZlQ29sb3JNYXRyaXggaW49Im4iIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAxIDAiLz4KICAgIDxmZUNvbXBvbmVudFRyYW5zZmVyPgogICAgICA8ZmVGdW5jQSB0eXBlPSJsaW5lYXIiIHNsb3BlPSIwLjA2IiBpbnRlcmNlcHQ9IjAiLz4KICAgIDwvZmVDb21wb25lbnRUcmFuc2Zlcj4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjZykiLz4KPC9zdmc+");
  background-repeat: no-repeat, repeat;
}

/* =========================================================
   SCROLL REVEAL — animación de entrada al hacer scroll
   Progressive enhancement: si JS no corre, todo se ve normal
   (visible), solo se pierde la animación de entrada.
   ========================================================= */
.reveal,
.reveal-img,
.reveal-line{
  opacity: 0;
}
.reveal{
  transform: translateY(52px);
  transition: opacity 1s cubic-bezier(.16,.84,.44,1),
              transform 1s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--stagger, 0) * 100ms);
}
.reveal-img{
  transform: scale(1.09);
  transition: opacity 1.15s cubic-bezier(.16,.84,.44,1),
              transform 1.3s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--stagger, 0) * 100ms);
}
.reveal-line{
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity .1s linear,
              transform 1.05s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--stagger, 0) * 100ms);
}
.reveal.is-in,
.reveal-img.is-in,
.reveal-line.is-in{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-img,
  .reveal-line{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HERO — "stacked sections": el Hero se queda pegado (sticky)
   y Método sube y lo cubre al seguir el scroll. Misma técnica
   del componente de referencia (secciones sticky consecutivas).

   --hero-h (script.js, vía ResizeObserver) guarda el alto REAL del
   Hero, siempre sincronizado — a diferencia de un cálculo de alto
   por JS hecho una sola vez (eso fue lo que se rompió la primera
   vez: podía desincronizarse del contenido real, sobre todo antes
   de que cargaran las fuentes), un ResizeObserver se re-dispara
   solo cada vez que el tamaño real cambia, así que nunca queda
   desactualizado.

   `top: min(0px, 100dvh - var(--hero-h))` es la clave:
   - Si el Hero cabe en una pantalla (alto <= 100dvh), el resultado
     es min(0, algo positivo) = 0 → se pega arriba de inmediato,
     igual que el diseño original, sin cambios visuales.
   - Si el Hero es más alto que una pantalla, el resultado es
     min(0, algo negativo) = ese negativo → recién se "engancha"
     cuando su borde inferior ya alcanzó el borde inferior del
     viewport. Hasta ese punto se mueve con el scroll normal de la
     página como cualquier sección (nada queda escondido, no hace
     falta una caja con scroll propio dentro del Hero), así que el
     usuario ve todo su contenido antes de que arranque cualquier
     transición. A partir de ahí, Método (que sigue en el flujo
     normal, sin sticky) sube por detrás y lo cubre exactamente
     igual que antes.

   IMPORTANTE: .hero-metodo-stack (en el HTML) envuelve SOLO estas
   dos secciones. position:sticky se "suelta" cuando el scroll
   llega al final de su contenedor — si el Hero fuera hijo directo
   de <body> (que mide TODA la página), nunca se soltaría de verdad
   antes del final del sitio: Método lo taparía visualmente un rato
   por el z-index, pero en cuanto Método terminara de pasar, el
   Hero (que seguiría pegado) reaparecería encima de las secciones
   siguientes. Con el wrapper, el "contenedor" del Hero mide
   exactamente Hero + Método, así que se suelta justo cuando
   Método termina de cubrirlo — y no vuelve a aparecer.
   ========================================================= */
.hero-metodo-stack{
  position: relative;
}
.hero{
  position: sticky;
  top: min(0px, calc(100vh - var(--hero-h, 100vh)));
  top: min(0px, calc(100dvh - var(--hero-h, 100dvh)));
  z-index: 1;
}
.metodo{
  position: relative;
  z-index: 2;
}

/* =========================================================
   VENTANAS LEGALES (Política de privacidad / Términos de uso)
   <dialog> nativo con showModal(): vive en la capa superior del
   navegador, así que queda por encima del nav sticky, la cortina
   del Hero y el botón flotante de WhatsApp. Solo usa tokens,
   tipografías y radios que ya existen en este archivo. Con la
   ventana cerrada no afecta nada de la página.
   ========================================================= */
.legal-dialog{
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  overflow: visible;
}
.legal-dialog::backdrop{
  background: var(--bg-void);
  background: color-mix(in srgb, var(--bg-void) 74%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.legal-panel{
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-height: 80dvh;
  background: var(--bg-card);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--gold-25);
  border-radius: 8px;
  overflow: hidden;
}
.legal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--gold-12);
}
.legal-title{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-h2-lg);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.legal-date{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-top: 10px;
}
.legal-close{
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -6px -8px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--cream-75);
  cursor: pointer;
  transition: color .15s ease;
}
.legal-close:hover{ color: var(--gold); }
.legal-close:focus-visible{ outline: 1px solid var(--gold); outline-offset: 2px; }
.legal-close svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legal-body{
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-75);
}
.legal-body h3{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-card-title);
  letter-spacing: 0.01em;
  color: var(--cream);
  margin-top: clamp(20px, 2.4vw, 28px);
}
.legal-body h3:first-child{ margin-top: 0; }
.legal-body p{ margin-top: 8px; }

/* Entrada fade/scale corta; sin movimiento si el usuario lo prefiere así. */
@keyframes legal-in{ from{ opacity: 0; transform: scale(.98); } to{ opacity: 1; transform: none; } }
@keyframes legal-fade{ from{ opacity: 0; } to{ opacity: 1; } }
.legal-dialog[open]{ animation: legal-in .18s ease-out; }
.legal-dialog[open]::backdrop{ animation: legal-fade .18s ease-out; }
@media (prefers-reduced-motion: reduce){
  .legal-dialog[open],
  .legal-dialog[open]::backdrop{ animation: none; }
}

/* Bloqueo del scroll de fondo mientras hay una ventana abierta. El padding
   compensa el ancho de la barra de scroll que desaparece, para que la página
   de atrás no se mueva de lado. */
html.legal-lock{
  overflow: hidden;
  padding-right: var(--legal-sbw, 0px);
}