/* =========================================================================
   LOS MAITENES SpA — hoja de estilo del sitio
   Mobile-first. Se diseña a 390px y se escala hacia arriba.
   Sin dependencias externas: la tipografía es local (fonts/).
   ========================================================================= */

/* ------------------------------------------------------------------ FUENTE */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Los dos verdes y el azul salen del logo real de la empresa. */
  --lima:        #8CC63F;
  --lima-clara:  #B4E06B;
  --teal:        #12688F;
  --verde-txt:   #2A6B1E;   /* 5.1:1 sobre papel: verde de marca legible */

  --tinta:       #14181A;
  --tinta-2:     #3E4A46;
  --papel:       #F4F3EE;
  --papel-2:     #EAE8E0;
  --linea:       #D8D5CA;

  --carbon:      #101413;   /* fondo de las bandas oscuras */
  --carbon-2:    #191E1C;
  --carbon-3:    #232A27;
  --carbon-txt:  #E7EAE5;
  --carbon-mut:  #9AA5A0;
  --carbon-line: #2E3733;

  --oxido:       #B4623A;   /* acento cálido, tomado del material */
  --wsp:         #25D366;

  --r-card: 4px;            /* esquinas casi rectas: chapa, no software */
  --r-btn:  3px;

  --borde: 1px solid var(--linea);

  --ancho: 1220px;
  --gap-h: 20px;
  --header-h: 64px;

  --t: 200ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --sec-y: clamp(4rem, 10vw, 9rem);

  color-scheme: light;
}

/* ------------------------------------------------------------- RESET/BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;              /* clip y no hidden: hidden rompe el sticky */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 1rem;              /* 16px de piso en móvil */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
/* va después del reset: el reset le puso display:block a canvas e img y sin
   esto el atributo hidden dejaría de ocultarlos */
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--verde-txt); text-underline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0 0 .5rem;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  font-variation-settings: 'wdth' 96, 'wght' 800;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
/* sobre fondo oscuro el azul del foco se pierde: ahí manda la lima */
.oscuro :focus-visible,
.cabecera :focus-visible,
.menu :focus-visible,
.hero :focus-visible,
.pie :focus-visible { outline-color: var(--lima); }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gap-h);
}
@media (min-width: 768px) { :root { --gap-h: 32px; } }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--lima); color: var(--carbon);
  padding: .9rem 1.4rem; font-weight: 700; text-decoration: none;
}
.saltar:focus { left: 0; }

.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* --------------------------------------------------------------- SECCIONES */
.seccion { padding-block: var(--sec-y); position: relative; }
.oscuro {
  background: var(--carbon);
  color: var(--carbon-txt);
  --linea: var(--carbon-line);
  --borde: 1px solid var(--carbon-line);
}
.oscuro h1, .oscuro h2, .oscuro h3 { color: #fff; }
.oscuro a { color: var(--lima-clara); }

.rotulo {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1rem;
  font-size: .72rem; font-variation-settings: 'wdth' 88, 'wght' 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-2);
}
.oscuro .rotulo { color: var(--carbon-mut); }
.rotulo::before {
  content: ''; width: 26px; height: 3px; background: var(--lima); flex: none;
}

.titulo {
  font-size: clamp(1.85rem, 6.4vw, 3rem);
  font-variation-settings: 'wdth' 94, 'wght' 820;
  letter-spacing: -.028em;
  margin-bottom: .65rem;
}
.bajada {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  color: var(--tinta-2);
}
.oscuro .bajada { color: var(--carbon-mut); }
.cabecera-sec { margin-bottom: clamp(2rem, 5vw, 3rem); }

/* --------------------------------------------------------------- BOTONES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.35rem;
  border: 2px solid transparent; border-radius: var(--r-btn);
  font-size: 1rem; font-variation-settings: 'wdth' 98, 'wght' 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 1.1rem; height: 1.1rem; }

.btn-lima   { background: var(--lima); color: #10140F; border-color: var(--lima); }
.btn-linea  { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.oscuro .btn-linea { color: #fff; border-color: rgba(255,255,255,.45); }
.btn-claro  { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-tinta  { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-sm     { min-height: 44px; padding: .55rem 1rem; font-size: .92rem; }

@media (hover: hover) and (pointer: fine) {
  .btn-lima:hover  { background: var(--lima-clara); border-color: var(--lima-clara); }
  .btn-linea:hover { background: var(--tinta); color: #fff; }
  .oscuro .btn-linea:hover { background: #fff; color: var(--carbon); border-color: #fff; }
  .btn-claro:hover { background: #fff; color: var(--carbon); border-color: #fff; }
  .btn-tinta:hover { background: #000; border-color: #000; }
}

/* ---------------------------------------------------------------- HEADER */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: linear-gradient(to bottom, rgba(10,14,13,.72), rgba(10,14,13,0));
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.cabecera.pegada {
  background: rgba(12,16,15,.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -12px rgba(0,0,0,.7);
}
.cabecera > .contenedor {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; padding-block: .55rem; }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca b {
  display: block; color: #fff; font-size: .98rem; line-height: 1.05;
  font-variation-settings: 'wdth' 92, 'wght' 800; letter-spacing: -.01em;
}
.marca span {
  display: block; color: var(--lima); font-size: .6rem; line-height: 1.3;
  letter-spacing: .17em; text-transform: uppercase;
  font-variation-settings: 'wdth' 88, 'wght' 600;
}

.hamburguesa {
  width: 46px; height: 46px; flex: none;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-btn); cursor: pointer; padding: 0;
}
.hamburguesa i {
  position: relative; display: block; width: 19px; height: 2px;
  background: #fff; transition: background-color var(--t) var(--ease);
}
.hamburguesa i::before, .hamburguesa i::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: #fff;
  transition: transform var(--t) var(--ease), top var(--t) var(--ease);
}
.hamburguesa i::before { top: -6px; }
.hamburguesa i::after  { top: 6px; }
.hamburguesa[aria-expanded="true"] i { background: transparent; }
.hamburguesa[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] i::after  { top: 0; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  padding: 5.5rem 1.5rem 2.5rem;
  background: #0B0F0E;
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.menu.abierto { visibility: visible; opacity: 1; transition: opacity var(--t) var(--ease), visibility 0s; }
.menu ul { display: flex; flex-direction: column; }
.menu a:not(.btn) {
  display: block; padding: .85rem .25rem; min-height: 48px;
  color: #fff; text-decoration: none;
  font-size: 1.4rem; font-variation-settings: 'wdth' 94, 'wght' 700;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.menu .btn { width: 100%; }

@media (min-width: 1000px) {
  .hamburguesa { display: none; }
  .menu {
    position: static; flex-direction: row; align-items: center; gap: 1.75rem;
    padding: 0; background: none; overflow: visible;
    visibility: visible; opacity: 1; transition: none;
  }
  .menu ul { flex-direction: row; align-items: center; gap: 1.6rem; }
  .menu a:not(.btn) {
    display: inline-flex; align-items: center;
    padding: .35rem 0; min-height: 44px; border: 0; position: relative;
    font-size: .92rem; font-variation-settings: 'wdth' 96, 'wght' 550;
    color: rgba(255,255,255,.82);
  }
  .menu a:not(.btn)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .55rem; height: 2px;
    background: var(--lima); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t) var(--ease);
  }
  .menu a:not(.btn):hover { color: #fff; }
  .menu a:not(.btn):hover::after { transform: scaleX(1); }
  .menu .btn { width: auto; }
}

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative;
  background: var(--carbon);
  /* sin secuencia: exactamente una pantalla. Con secuencia, el JS agrega
     .hero--scrub y la sección se estira para dar recorrido al scrub. */
  min-height: 100svh;
  min-height: 100dvh;
}

.hero-fijo {
  position: sticky; top: 0;
  height: 100svh; height: 100dvh;
  overflow: hidden;
  display: grid;
  /* filas y columnas explícitas al 100%: si se dejan en auto, la altura
     mínima del contenido estira la celda por encima de la ventana y el
     lienzo termina midiendo más que el hero */
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
.hero-fijo > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }

/* ORDEN DE CAPAS — explícito, no por orden del DOM.
   Todos los hijos comparten la misma celda del grid. Sin z-index se pintan en
   orden de documento, y como el poster va DESPUÉS del lienzo en el HTML,
   quedaba encima tapándolo: la secuencia animaba perfecto detrás de una foto
   fija opaca y en pantalla no se movía nada. El poster tiene que ir DEBAJO,
   como respaldo mientras no haya nada dibujado. */
.hero-fijo > picture { display: block; z-index: 0; }
.hero-lienzo  { z-index: 1; }
.hero-velo    { z-index: 2; }
.hero-cuerpo  { z-index: 3; }
.hero-aviso   { z-index: 4; }

.hero-lienzo, .hero-foto {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
}
.hero-lienzo { opacity: 0; transition: opacity 320ms linear; }
.hero-lienzo.visible { opacity: 1; }
.hero--scrub { height: 550dvh; }
@media (min-width: 1000px) { .hero--scrub { height: 600dvh; } }
.hero--scrub.hero--corto { height: 280dvh; }
@media (min-width: 1000px) { .hero--scrub.hero--corto { height: 300dvh; } }

/* El plano de la garra ya es 84% negro y el titular cae sobre esa zona, así
   que el velo es mínimo: solo asienta el header arriba y da algo de piso al
   texto abajo. Cargarlo más apagaría el brillo del metal, que es lo único
   que ilumina el cuadro. */
.hero-velo {
  background:
    linear-gradient(to bottom, rgba(6,8,8,.72) 0%, rgba(6,8,8,.22) 22%, rgba(6,8,8,0) 40%),
    linear-gradient(to top,    rgba(6,8,8,.62) 0%, rgba(6,8,8,.28) 26%, rgba(6,8,8,0) 55%),
    linear-gradient(to right,  rgba(6,8,8,.55) 0%, rgba(6,8,8,.18) 34%, rgba(6,8,8,0) 58%);
  pointer-events: none;
}
/* Viñeta que cierra apenas mientras la garra baja: da encierro sin tapar. */
.hero-velo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 62% 45%, transparent 45%, rgba(4,6,6,.7) 100%);
  opacity: calc(.25 + var(--hp, 0) * .3);
}

/* PARALAJE
   El texto sube menos que la imagen: esa diferencia de velocidad es lo que se
   lee como profundidad. --hp lo escribe el JS una vez por frame y el
   desplazamiento lo resuelve el compositor. */
.hero-copy {
  transform: translate3d(0, calc(var(--hp, 0) * -68px), 0);
  will-change: transform;
}
.hero-datos {
  transform: translate3d(0, calc(var(--hp, 0) * -30px), 0);
  opacity: calc(1 - var(--hp, 0) * .45);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-datos { transform: none; opacity: 1; will-change: auto; }
}

/* Ocupa toda la celda y empuja el contenido abajo. Así el relleno superior
   funciona como distancia mínima al header flotante en vez de estirar la
   caja hacia arriba, que era lo que la sacaba de la ventana. */
.hero-cuerpo {
  position: relative;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 1rem);
  padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
  overflow: hidden;
}
.hero-copy { max-width: 20rem; }
.hero-etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem; padding: .35rem .7rem;
  background: rgba(140,198,63,.16);
  border: 1px solid rgba(140,198,63,.5);
  border-radius: 2px;
  color: var(--lima-clara);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  font-variation-settings: 'wdth' 90, 'wght' 700;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.15rem, 9vw, 4rem);
  font-variation-settings: 'wdth' 92, 'wght' 830;
  letter-spacing: -.035em;
  margin-bottom: .75rem;
}
.hero-sub {
  margin: 0 0 1.6rem;
  max-width: 30rem;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.02rem, 3.4vw, 1.28rem);
  line-height: 1.45;
}
.hero-botones { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-botones .btn { flex: 1 1 auto; min-width: 10.5rem; }
@media (min-width: 560px) { .hero-botones .btn { flex: 0 0 auto; } }

/* Franja de datos duros al pie del hero */
.hero-datos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
}
.hero-datos div { background: rgba(10,14,13,.72); padding: .8rem .7rem; }
.hero-datos b {
  display: block; color: #fff; line-height: 1.05;
  font-size: clamp(1.05rem, 4.2vw, 1.55rem);
  font-variation-settings: 'wdth' 90, 'wght' 800;
  font-variant-numeric: tabular-nums;
}
.hero-datos span {
  display: block; margin-top: .2rem;
  color: rgba(255,255,255,.7); font-size: .7rem; line-height: 1.25;
  letter-spacing: .07em; text-transform: uppercase;
}
@media (min-width: 700px) {
  .hero-copy { max-width: 34rem; }
  .hero-datos { max-width: 44rem; }
  .hero-datos div { padding: 1rem 1.15rem; }
  .hero-datos span { font-size: .74rem; }
}
@media (min-width: 1100px) { .hero-copy { max-width: 44rem; } }

/* Pantallas bajas (portátiles 16:9, ventana a media altura, móvil apaisado):
   el bloque del hero no cabe y el titular se salía por arriba, chocando con
   el header. Se compacta y el paralaje recorre menos. */
@media (max-height: 720px) {
  .hero-etiqueta { display: none; }
  .hero h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin-bottom: .5rem; }
  .hero-sub { font-size: 1rem; margin-bottom: 1.1rem; }
  .hero-datos { margin-top: 1.1rem; }
  .hero-datos div { padding: .6rem .75rem; }
  .hero-datos b { font-size: 1.15rem; }
  .hero-copy { transform: translate3d(0, calc(var(--hp, 0) * -26px), 0); }
  .hero-datos { transform: translate3d(0, calc(var(--hp, 0) * -12px), 0); }
}

.hero-aviso {
  position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .4rem;
  color: rgba(255,255,255,.6); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase;
  transition: opacity 300ms linear;
  pointer-events: none;
}
.hero-aviso i { display: block; width: 1px; height: 1.6rem; background: linear-gradient(rgba(255,255,255,.7), transparent); }
@media (max-height: 700px), (max-width: 480px) { .hero-aviso { display: none; } }

/* --------------------------------------------------------------- PRECIOS */
.modalidades {
  display: grid; gap: 1px; margin-bottom: clamp(2rem, 5vw, 2.75rem);
  background: var(--linea); border: var(--borde);
}
@media (min-width: 760px) { .modalidades { grid-template-columns: repeat(3, 1fr); } }
.modalidad { background: var(--papel); padding: 1.25rem 1.15rem; }
.modalidad h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; font-variation-settings: 'wdth' 96, 'wght' 750;
  margin-bottom: .3rem;
}
.modalidad h3 .ico { color: var(--verde-txt); }
.modalidad p { margin: 0; font-size: .95rem; color: var(--tinta-2); }
.modalidad.destaca { background: #EDF5E2; }
.modalidad .marca-mejor {
  display: inline-block; margin-top: .6rem; padding: .15rem .5rem;
  background: var(--lima); color: #10140F; border-radius: 2px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-variation-settings: 'wdth' 88, 'wght' 750;
}

/* --- modalidades + su lista de precios, en tres columnas visibles a la vez ---
   Cada columna es UNA sola placa (encabezado + lista fundidos en un mismo
   borde), incluida en un grid con align-items:stretch: las tres quedan con
   el mismo ancho y el mismo alto sin importar cuántas filas tenga cada una;
   la que tiene menos materiales simplemente deja aire abajo en vez de
   encogerse. --- */
.precios-columnas { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: clamp(2rem, 5vw, 2.75rem); }
@media (min-width: 900px) { .precios-columnas { grid-template-columns: repeat(3, 1fr); } }

.precios-columna {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--papel); border: var(--borde); border-top: 4px solid var(--teal);
  border-radius: var(--r-card);
  box-shadow: 0 1px 1px rgba(16,20,19,.04), 0 20px 32px -24px rgba(16,20,19,.28);
}
.precios-columna:first-child { border-top-color: var(--verde-txt); }
.precios-columna:nth-child(2) { border-top-color: var(--teal); }
.precios-columna:has(.modalidad.destaca) {
  background: #EDF5E2; border-top-color: var(--lima);
  box-shadow: 0 1px 1px rgba(16,20,19,.04), 0 28px 44px -22px rgba(42,107,30,.28);
}
@media (min-width: 900px) { .precios-columna:has(.modalidad.destaca) { transform: translateY(-.6rem); } }

.precios-columna .modalidad { background: transparent; padding: 1.4rem 1.25rem 1.3rem; }
.precios-columna .modalidad.destaca { background: transparent; }

.precios-columna .modalidad h3 {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.02rem; margin-bottom: .5rem;
}
.precios-columna .modalidad h3 .ico {
  flex: none; width: 2.15rem; height: 2.15rem; padding: .5rem; box-sizing: border-box;
  border-radius: 50%;
  background: var(--papel-2); border: 1px solid var(--linea); color: var(--verde-txt);
}
.precios-columna .modalidad.destaca h3 .ico { background: rgba(140,198,63,.28); border-color: rgba(140,198,63,.55); }

/* Insignia "mejor precio": chip flotando sobre el borde superior de su
   placa, como una etiqueta colgada — no un párrafo más dentro de la card. */
.precios-columna .modalidad .marca-mejor {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 0; padding: .3rem .65rem;
  background: var(--lima); color: #10140F; border-radius: 999px;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  font-variation-settings: 'wdth' 88, 'wght' 750;
  box-shadow: 0 6px 16px -6px rgba(42,107,30,.45);
  white-space: nowrap;
}
.precios-columna .modalidad .marca-mejor::before { content: '✓'; font-size: .8em; }

.precios-columna .precios-lista {
  margin-top: 0; flex: 1; display: flex; flex-direction: column;
  background: transparent; border: 0; border-top: var(--borde);
}
.precios-columna:has(.modalidad.destaca) .precios-lista { border-top-color: rgba(140,198,63,.4); }

.precio-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.25rem; background: transparent;
  border-bottom: 1px solid var(--linea);
  transition: background-color 200ms var(--ease);
}
.precios-columna:has(.modalidad.destaca) .precio-fila { border-bottom-color: rgba(140,198,63,.28); }
.precio-fila:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .precio-fila:hover { background: rgba(20,24,26,.035); }
  .precios-columna:has(.modalidad.destaca) .precio-fila:hover { background: rgba(42,107,30,.06); }
}
.precio-fila .precio-material { font-size: 1.03rem; font-variation-settings: 'wdth' 96, 'wght' 720; }
.precio-fila .precio-derecha { display: flex; flex-direction: column; align-items: flex-end; }

/* Tabla de precios.
   Escritorio: tabla real, materiales en filas y modalidades en columnas.
   Móvil: cada fila se convierte en una tarjeta apilada por material y la
   modalidad se imprime desde data-mod. Nunca hay scroll horizontal. */
.tabla-precios { width: 100%; border-collapse: collapse; }
.tabla-precios caption { text-align: left; margin-bottom: .9rem; font-size: .92rem; color: var(--tinta-2); }

.tabla-precios thead { display: none; }
.tabla-precios tr { display: block; border: var(--borde); background: #fff; margin-bottom: .8rem; }
.tabla-precios th[scope="row"] {
  display: block; text-align: left;
  padding: .8rem 1rem; background: var(--tinta); color: #fff;
  font-size: 1.02rem; font-variation-settings: 'wdth' 94, 'wght' 750;
  letter-spacing: -.01em;
}
/* Dos columnas: a la izquierda el nombre de la modalidad (sale de data-mod),
   a la derecha el precio y, debajo, la categoría. Así la letra nunca compite
   por el ancho con el número. */
.tabla-precios td {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; column-gap: 1rem;
  padding: .7rem 1rem;
  border-top: 1px dashed var(--linea);
}
.tabla-precios td::before {
  grid-column: 1;
  content: attr(data-mod);
  font-size: .88rem; color: var(--tinta-2);
  font-variation-settings: 'wdth' 96, 'wght' 550;
}
.tabla-precios td > * { grid-column: 2; justify-self: end; }
.tabla-precios td:first-of-type { border-top: 0; }

.valor {
  font-size: 1.32rem; line-height: 1;
  font-variation-settings: 'wdth' 92, 'wght' 820;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  white-space: nowrap;
}
.valor u { text-decoration: none; font-size: .72rem; font-variation-settings: 'wdth' 100, 'wght' 500; color: var(--tinta-2); letter-spacing: 0; }
.cat {
  display: block; margin-top: .18rem; text-align: right;
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--verde-txt); font-variation-settings: 'wdth' 88, 'wght' 700;
}
/* Los dos tonos van medidos sobre blanco: 5,97:1 y 5,34:1. El óxido de marca
   se queda para acentos gráficos, en texto chico no llegaba a 4,5:1. */
.consultar {
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  font-variation-settings: 'wdth' 92, 'wght' 700; color: #9E4E28;
}
.sinvalor { color: #6E6A5E; font-size: 1.1rem; }

@media (min-width: 900px) {
  .tabla-precios { border: var(--borde); background: #fff; }
  .tabla-precios thead { display: table-header-group; }
  .tabla-precios tr { display: table-row; border: 0; margin: 0; background: none; }
  .tabla-precios thead th {
    padding: .85rem 1.1rem; text-align: left; vertical-align: bottom;
    background: var(--tinta); color: #fff;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    font-variation-settings: 'wdth' 88, 'wght' 700;
    border-right: 1px solid rgba(255,255,255,.14);
  }
  .tabla-precios thead th:last-child { border-right: 0; }
  .tabla-precios tbody tr:nth-child(even) { background: #FAFAF7; }
  .tabla-precios tbody tr:hover { background: #F2F6EA; }
  .tabla-precios th[scope="row"] {
    display: table-cell; background: none; color: var(--tinta);
    padding: .85rem 1.1rem; border-top: 1px solid var(--linea);
    font-size: 1rem; width: 30%;
  }
  .tabla-precios td {
    display: table-cell; text-align: right;
    padding: .85rem 1.1rem; border-top: 1px solid var(--linea);
    border-left: 1px solid var(--linea);
  }
  .tabla-precios td::before { content: none; }
  .tabla-precios .cat { text-align: right; }
}

.aviso-precios {
  display: none;
  margin: 0 0 1.25rem; padding: .85rem 1.05rem;
  background: #FBF0E8; border: 1px solid #E4C4AF; border-left: 4px solid #9E4E28;
  color: #6B3418; font-size: .95rem;
}
.aviso-precios.visible { display: block; }

.nota-precios {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem;
}
.nota-precios p { margin: 0; font-size: .9rem; color: var(--tinta-2); max-width: 52ch; }
.nota-precios .sello { display: inline-flex; align-items: center; gap: .45rem; }
.nota-precios .sello .ico { width: 1.05rem; height: 1.05rem; color: var(--verde-txt); }

/* ------------------------------------------------------------- OPERACIÓN */
.filas-op { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.fila-op { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) {
  .fila-op { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .fila-op.invertida .fila-media { order: 2; }
}
.fila-media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--carbon-line);
}
.fila-op h3 { font-size: clamp(1.3rem, 3.6vw, 1.9rem); font-variation-settings: 'wdth' 94, 'wght' 800; }
.fila-op p { margin: 0; color: var(--carbon-mut); }
.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: .8rem; padding: .3rem .7rem .3rem .6rem;
  background: rgba(255,255,255,.05); border-left: 2px solid var(--lima);
  color: #fff;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-variation-settings: 'wdth' 88, 'wght' 700;
}
.tag .ico { width: .95rem; height: .95rem; }

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(2.5rem, 6vw, 3.5rem); background: var(--carbon-line); border: 1px solid var(--carbon-line); }
@media (min-width: 700px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
/* La cifra va en blanco, no en lima: el acento se reserva para los CTA. El
   único color queda en una barra corta sobre el número, que da ritmo a la
   franja sin meter ruido cromático. */
.cifras div { background: var(--carbon); padding: 1.2rem 1.1rem; }
.cifras div::before {
  content: ''; display: block; width: 22px; height: 2px;
  margin-bottom: .85rem; background: var(--lima);
}
.cifras b {
  display: block; color: #fff; line-height: 1;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-variation-settings: 'wdth' 90, 'wght' 820;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.cifras span { display: block; margin-top: .45rem; color: var(--carbon-mut); font-size: .85rem; line-height: 1.35; }

/* --------------------------------------------------------------- PROCESO */
.pasos { display: grid; gap: 1px; background: var(--linea); border: var(--borde); }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { background: #fff; padding: 1.5rem 1.35rem; position: relative; }
.paso .n {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .9rem;
  background: var(--tinta); color: #fff;
  font-size: .9rem; font-variation-settings: 'wdth' 90, 'wght' 800;
  font-variant-numeric: tabular-nums;
}
.paso h3 { font-size: 1.15rem; font-variation-settings: 'wdth' 96, 'wght' 750; }
.paso p { margin: 0; color: var(--tinta-2); font-size: .97rem; }

.datos-op { display: grid; gap: 1px; margin-top: 1px; background: var(--linea); border: var(--borde); border-top: 0; }
@media (min-width: 860px) { .datos-op { grid-template-columns: repeat(3, 1fr); } }
.dato-op { background: var(--papel-2); padding: 1.35rem; display: flex; gap: .9rem; align-items: flex-start; }
.dato-op .ico { color: var(--verde-txt); margin-top: .15rem; }
.dato-op h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: 'wdth' 88, 'wght' 700; color: var(--tinta-2); margin-bottom: .3rem; }
.dato-op p { margin: 0; font-size: 1.02rem; font-variation-settings: 'wdth' 98, 'wght' 600; line-height: 1.45; }

.cierre-proceso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem 1.25rem; margin-top: clamp(2rem, 5vw, 2.75rem); text-align: center;
}
.cierre-proceso p { margin: 0; color: var(--tinta-2); }

/* -------------------------------------------------------------- EMPRESAS */
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--borde); }
.lista-check { display: grid; gap: 1rem; margin: 1.75rem 0; }
.lista-check li { display: flex; gap: .8rem; align-items: flex-start; }
.lista-check .ico { color: var(--verde-txt); margin-top: .2rem; width: 1.15rem; height: 1.15rem; }
.lista-check b { display: block; font-variation-settings: 'wdth' 98, 'wght' 700; }
.lista-check span { color: var(--tinta-2); font-size: .96rem; }
.fila-btn { display: flex; flex-wrap: wrap; gap: .7rem; }

/* -------------------------------------------------------------- CLIENTES */
.cinta { position: relative; overflow: hidden; padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cinta-riel { display: flex; width: max-content; animation: correr 44s linear infinite; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cinta:focus-within .cinta-riel { animation-play-state: paused; }
.cinta-set { display: flex; }
.cinta-set li {
  display: grid; place-items: center;
  width: 11.5rem; height: 6.25rem; margin-right: 1rem; padding: 1rem;
  background: #fff; border: var(--borde);
}
/* el <picture> es solo envoltorio del fallback PNG: se saca de la caja para
   que la imagen siga siendo el ítem centrado de la grilla */
.cinta-set picture { display: contents; }
.cinta-set img { max-height: 3.1rem; width: auto; object-fit: contain; }
@media (pointer: coarse) {
  .cinta { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cinta-riel { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cinta-riel { animation: none; }
  .cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .cinta-set:last-child { display: none; }
}

/* ------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: .6rem; max-width: 52rem; }
.faq details { background: #fff; border: var(--borde); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1rem 1.15rem; min-height: 48px; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-variation-settings: 'wdth' 98, 'wght' 680;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: .6rem; height: .6rem;
  border-right: 2px solid var(--verde-txt); border-bottom: 2px solid var(--verde-txt);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq p { margin: 0 1.15rem 1.15rem; color: var(--tinta-2); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* -------------------------------------------------------------- CONTACTO */
.contacto { display: grid; gap: 2rem; }
@media (min-width: 980px) { .contacto { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; } }
.form { display: grid; gap: 1rem; background: var(--carbon-2); border: 1px solid var(--carbon-line); padding: clamp(1.25rem, 4vw, 2rem); }
.campo { display: grid; gap: .35rem; }
.campo label { font-size: .88rem; font-variation-settings: 'wdth' 96, 'wght' 620; color: var(--carbon-txt); }
.campo label i { font-style: normal; font-weight: 400; color: var(--carbon-mut); }
.campo input, .campo select {
  font: inherit; font-size: 1rem; min-height: 48px; padding: .7rem .85rem;
  color: #fff; background: var(--carbon-3);
  border: 1px solid var(--carbon-line); border-radius: var(--r-btn);
  transition: border-color var(--t) var(--ease);
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--carbon-mut) 50%), linear-gradient(135deg, var(--carbon-mut) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.campo input::placeholder { color: #8E9992; opacity: 1; }  /* 4,9:1 sobre el campo */
.campo input:focus, .campo select:focus { border-color: var(--lima); }
.campo [aria-invalid="true"] { border-color: #F2B8B5; }
.error { display: none; font-size: .85rem; color: #F2B8B5; }
.error.visible { display: block; }
.form-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }
.form-nota { margin: 0; font-size: .86rem; color: var(--carbon-mut); }

.info { display: grid; gap: 1px; background: var(--carbon-line); border: 1px solid var(--carbon-line); }
.info-item { background: var(--carbon-2); padding: 1.25rem; display: flex; gap: .9rem; align-items: flex-start; }
.info-item .ico { color: var(--lima); margin-top: .15rem; }
.info-item h3 { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--carbon-mut); font-variation-settings: 'wdth' 88, 'wght' 700; margin-bottom: .35rem; }
.info-item p, .info-item address { margin: 0; font-style: normal; font-size: 1.02rem; line-height: 1.55; color: var(--carbon-txt); }
/* inline-flex con alto mínimo: el enlace de teléfono y correo queda con área
   táctil de 44px sin dejar de comportarse como texto en línea */
.info-item a { color: var(--lima-clara); display: inline-flex; align-items: center; min-height: 44px; }
.mapa { border: 1px solid var(--carbon-line); border-top: 0; }
.mapa iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ---------------------------------------------------------------- FOOTER */
.pie { background: #0B0E0D; color: var(--carbon-txt); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.pie-alto { display: grid; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--carbon-line); }
@media (min-width: 800px) { .pie-alto { grid-template-columns: 1fr auto; align-items: center; } }
.pie-logo { width: 190px; height: auto; }
.pie-claim { margin: .9rem 0 0; max-width: 40ch; color: var(--carbon-mut); }
.pie-grid { display: grid; gap: 2rem; padding-block: 2rem; }
@media (min-width: 620px) { .pie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pie-grid { grid-template-columns: repeat(4, 1fr); } }
.pie-grid h3 { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--carbon-mut); font-variation-settings: 'wdth' 88, 'wght' 700; margin-bottom: .7rem; }
.pie-grid li { margin-bottom: .15rem; }
.pie-grid a { color: var(--carbon-txt); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pie-grid a:hover { color: var(--lima-clara); text-decoration: underline; }
.pie-grid address { font-style: normal; color: var(--carbon-mut); }
.pie-bajo { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--carbon-line); color: var(--carbon-mut); font-size: .88rem; }
.pie-bajo p { margin: 0; }

/* ============================================================ PREMIUM: profundidad y movimiento con propósito.
   Capas de luz, imán en botones, bordes vivos y revelado con volumen —
   siempre dentro de la paleta de marca, nunca color nuevo. */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* --- textura sutil sobre las bandas oscuras: chapa, no plástico --- */
.oscuro { position: relative; isolation: isolate; --mx: 50%; --my: 30%; }
.oscuro::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* foco que sigue el cursor: realce, no dependencia de la interfaz */
.oscuro::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(140,198,63,.1), transparent 62%);
  opacity: 0; transition: opacity 260ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .oscuro:hover::after { opacity: 1; } }
.oscuro > .contenedor { position: relative; z-index: 1; }

/* --- hero: velo de polvo flotante + retícula técnica bajo la escena --- */
.hero-fijo > .hero-particulas { z-index: 1; position: relative; overflow: hidden; pointer-events: none; opacity: .6; mix-blend-mode: screen; }
.hero-particulas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero-fijo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 78%);
  opacity: .5;
}

/* --- botones: barrido de brillo, resplandor propio de marca, imán en JS --- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.32) 48%, transparent 64%);
  transform: translateX(-140%);
  transition: transform 640ms var(--ease);
}
.btn:hover::before { transform: translateX(140%); }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
                     border-color var(--t) var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease); }
  .btn-lima:hover  { box-shadow: 0 12px 34px -10px rgba(140,198,63,.55); }
  .btn-tinta:hover { box-shadow: 0 12px 30px -12px rgba(18,104,143,.4); }
  .btn-linea:hover, .btn-claro:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(1px) scale(.98) !important; }
@media (prefers-reduced-motion: reduce) { .btn::before { display: none; } }

/* --- tarjetas: elevación con peso real, visible incluso en reposo --- */
.modalidad, .paso, .dato-op, .info-item {
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  box-shadow: 0 1px 1px rgba(16,20,19,.05), 0 18px 34px -24px rgba(16,20,19,.32);
}
@media (hover: hover) and (pointer: fine) {
  .modalidad:hover, .paso:hover { box-shadow: 0 24px 44px -26px rgba(16,20,19,.35); z-index: 1; }
}

/* --- profundidad 3D: las tarjetas se comportan como objetos con volumen,
   inclinándose hacia el cursor. El JS agrega la clase y mueve el ángulo;
   acá solo vive la base (perspectiva, transición de retorno, brillo). --- */
.tilt-3d {
  position: relative;
  transform: perspective(900px) rotateX(0) rotateY(0) translateZ(0);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease);
  will-change: transform;
}
.tilt-3d.tilt-activo { transition: transform 90ms linear, box-shadow 220ms var(--ease); z-index: 2; }
.tilt-3d::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.4), transparent 62%);
  opacity: 0; transition: opacity 320ms var(--ease);
}
.tilt-3d.tilt-activo::after { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .tilt-3d { transform: none; }
}
.modalidad { position: relative; }
.modalidad.destaca {
  border: 1px solid transparent;
  background-image: linear-gradient(#EDF5E2, #EDF5E2),
    conic-gradient(from var(--ang, 0deg), var(--lima), var(--teal), var(--oxido), var(--lima));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: girarBorde 7s linear infinite;
}
@keyframes girarBorde { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .modalidad.destaca { animation: none; } }

/* --- tabla de precios: los valores responden al hover de su fila --- */
.valor { transition: text-shadow 220ms var(--ease); font-size: 1.08rem; font-variation-settings: 'wdth' 98, 'wght' 780; }
@media (hover: hover) and (pointer: fine) {
  .tabla-precios tbody tr:hover .valor { text-shadow: 0 0 18px rgba(140,198,63,.35); }
}

/* --- el número del contador hereda el estilo de <b>, no el de los .span de etiqueta --- */
.hero-datos b span, .cifras b span {
  display: inline; margin-top: 0; color: inherit; font-size: inherit;
  letter-spacing: inherit; text-transform: none; font-variation-settings: inherit;
}

/* --- revelado al hacer scroll: entra con volumen, no solo con opacidad --- */
.js [data-anim] { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); }
.js [data-anim].dentro {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* --- la página sube y tapa el hero: se solapa un viewport completo, así
   que el hero queda fijo detrás mientras el resto del sitio -una sola
   lámina- lo cubre por completo antes de seguir con el scroll normal. El
   solape sale del margen negativo: el cálculo del scrub del hero no se
   toca, porque solo depende de su propio contenedor. --- */
/* --- una vez el scrub termina, la página sube y tapa el hero: el JS deja el
   último viewport de la sección fijo (mismo frame final) mientras la
   cubierta se desliza encima con exactamente un viewport de solape — nunca
   antes de que la animación acabe. --- */
.hero--scrub + .cubierta, .hero--scrub.hero--corto + .cubierta {
  margin-top: -100svh; margin-top: -100dvh;
}
.cubierta {
  position: relative; z-index: 5; overflow: hidden;
  background: var(--papel);
  border-radius: clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px) 0 0;
  box-shadow: 0 -80px 120px -30px rgba(4,6,6,.6), 0 -2px 0 rgba(255,255,255,.05);
}
.cubierta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .modalidad:hover, .paso:hover, .dato-op:hover, .info-item:hover { transform: none; }
  .js [data-anim] { filter: none; }
  .oscuro::before, .oscuro::after, .hero-fijo::before { display: none; }
}

/* ------------------------------------------------------------ WSP FLOTANTE */
/* Aparece recién al salir del hero: ahí abajo choca con la franja de datos,
   y dentro del hero ya está el botón "Cotizar Retiro". Con visibility oculta
   también sale del orden de tabulación mientras no se ve. */
.wsp {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--wsp); color: #05300F; border-radius: 50%;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.5);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease),
              visibility 0s linear var(--t);
}
.wsp svg { width: 28px; height: 28px; }
.js .wsp { opacity: 0; visibility: hidden; transform: scale(.8); }
.js .wsp.visible {
  opacity: 1; visibility: visible; transform: none;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), visibility 0s;
}
@media (hover: hover) and (pointer: fine) { .wsp.visible:hover { transform: scale(1.07); } }

/* ------------------------------------------------- APARICIÓN AL SCROLLEAR */
.js [data-anim] { opacity: 0; transform: translateY(16px); }
.js [data-anim].dentro {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1; transform: none; }
  .js [data-anim].dentro { transition: none; }
  html { scroll-behavior: auto; }
  .btn, .hero-lienzo { transition: none; }
}

/* ------------------------------------------- PISO DE 16px EN MÓVIL
   La mayoría de las visitas llega desde el celular: el texto de cuerpo no
   baja de 1rem en ningún bloque, aunque en escritorio sí se permita menos. */
@media (max-width: 560px) {
  .modalidad p,
  .paso p,
  .nota-precios p,
  .lista-check span,
  .form-nota,
  .campo label,
  .pie-bajo,
  .pie-claim,
  .faq summary { font-size: 1rem; }
  .tabla-precios td::before { font-size: .97rem; }
  .rotulo { font-size: .8rem; }
}