/* =====================================================================
   PortSync 2.2 — INICIO, una sola página
   El timelapse queda fijo detrás de toda la página y sigue corriendo mientras se baja. Encima: el hero (igual que
   antes) y las secciones Precios, Nosotros e Historia, cada una sobre una banda de tinte liviano con un respaldo de
   vidrio esmerilado detrás de cada tramo de contenido; a los costados y entre tramos el video se sigue viendo, y
   entre banda y banda queda una "ventana" donde el timelapse se ve entero.
   Colores, radios y movimiento: portsync-tokens.css. Barra, menú, pie y velo: portsync-sitio.css.
   Lo específico de cada sección va con su id delante (#precios, #nosotros, #historia): antes eran páginas
   separadas y varias clases se repiten con estilos distintos (.stats, .stat, .closing, .kicker…).
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
img,svg{display:block}
a{color:inherit;text-decoration:none}

:root{--wrap:1110px;--gutter:clamp(18px,5.2vw,40px);
  --pluma:clamp(56px,10vh,120px);          /* borde difuminado arriba y abajo de cada banda */
  --ventana:clamp(220px,60vh,640px);       /* espacio libre entre bandas: ahí el timelapse se ve entero, sin tinte */
  --hueco:clamp(112px,20vh,200px);         /* entre tramos de una misma sección: el video se ve bajo el tinte */
  --respaldo-x:clamp(20px,4vw,64px);       /* difuminado del respaldo de cada tramo, a los costados… */
  --respaldo-y:clamp(24px,4.5vh,44px);     /* …y arriba y abajo (por fuera del bloque) */
  scrollbar-color:var(--blanco-30) transparent}
html{background:var(--negro)}
/* desplazamiento suave para las anclas de la barra y del pie. Solo desde que la página terminó de cargar (index.js
   pone .suave): al llegar con #historia (p. ej. desde la vieja historia.html) el salto inicial es inmediato, no un
   vuelo de 7.000 px por encima de todo */
@media (prefers-reduced-motion:no-preference){
  html.suave{scroll-behavior:smooth}
}
body{background:var(--negro);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.55;
  font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;overflow-x:clip}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- timelapse fijo de fondo ----------
   Contenedor fijo con el <video> (no background-attachment: en teléfonos no funciona con video). Alto "lvh":
   cubre también cuando la barra del navegador móvil se esconde, sin saltos. Sin capa oscura encima: el único velo
   es el de lectura del hero (.hero::before), solo detrás de su texto. */
.fondo{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;background:var(--negro);pointer-events:none}
.fondo-video{display:block;width:100%;height:100%;object-fit:cover}
main,.pie{position:relative;z-index:1}

/* =====================================================================
   HERO — especificación "liquid glass" (Tailwind traducido a CSS plano: el sitio no tiene paso de build)
   ===================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
/* velo de lectura (V2.5): el texto iba directo sobre el video y en los cuadros de día no llegaba a AA (párrafo
   2,4-3,9:1 en ~60 % del ciclo). Tokens --velo-hero-* */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--velo-hero-abajo)}
@media(min-width:1024px){.hero::before{background:var(--velo-hero-abajo),var(--velo-hero-lado)}}
.pad{padding-left:24px;padding-right:24px}
.hero-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:48px;
  color:var(--blanco);line-height:normal}
/* el título conserva el corte de texto de Inter del diseño original (sin tamaño óptico de display) */
.hero-title{font-size:36px;line-height:40px;font-weight:var(--peso-regular);letter-spacing:-0.04em;margin:0 0 16px;font-optical-sizing:none}
.hero-title .line{display:block}
.hero-title .tramo,.hero-title .word,.hero-title .ch{display:inline-block}
.hero-title .tramo,.hero-title .word{white-space:nowrap}
/* 500 ms por letra: propio de la coreografía del título; la curva es la del sistema */
.hero-title .ch{opacity:0;transform:translateX(-18px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.hero-title.is-in .ch{opacity:1;transform:translateX(0)}
.hero-sub{font-size:16px;line-height:24px;color:var(--neutro-100);margin:0 0 20px;max-width:36em}
.hero-title,.hero-sub,.hero-tag{text-shadow:var(--sombra-texto)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 32px;border-radius:var(--r-sm);font-size:16px;line-height:24px;font-weight:var(--peso-medio);
  transition:background-color var(--dur-rapida) var(--ease-out),color var(--dur-rapida) var(--ease-out)}
.btn-primary{background:var(--blanco);color:var(--azul-950)}
.btn-primary:hover{background:var(--azul-50)}
.btn-glass{color:var(--blanco)}
.btn-glass:hover{background:var(--blanco);color:var(--azul-950)}
.tag-col{display:flex;align-items:flex-end;justify-content:flex-start;margin-top:24px}
.hero-tag{margin:0;border-radius:var(--r-md);padding:12px 24px;font-size:18px;line-height:28px;font-weight:300}

/* FadeIn: transition-opacity (el retraso lo pone el JS) */
.fade{opacity:0;transition:opacity var(--dur-lenta) var(--ease-out)}
.fade.is-in{opacity:1}

/* créditos obligatorios por licencia de los datos de los modelos 3D */
.credits{position:relative;z-index:2;margin:20px 0 0;font-size:10px;line-height:14px;color:var(--blanco-60)}
.credits a{text-decoration:underline;text-underline-offset:2px}

@media(min-width:768px){
  .pad{padding-left:48px;padding-right:48px}
  .hero-title{font-size:48px;line-height:1}
  .hero-sub{font-size:18px;line-height:28px}
  .hero-tag{font-size:20px;line-height:28px}
  /* en tablet/escritorio los créditos van en el margen inferior: 72 px hasta 1023 px de ancho, donde ocupan hasta 3
     líneas (12 + 3 × 14 = 54 px), y 64 px desde 1024 px, donde caben en 2 */
  .hero-content{padding-bottom:72px}
  /* a la derecha, 72 px: ahí va el botón de pausa (solo ícono hasta 1023 px, secciones.css) */
  .credits{position:absolute;left:48px;right:72px;bottom:12px;margin:0;text-align:center;font-size:10.5px}
}
@media(max-width:767px){
  /* V2.5: los créditos terminan por encima del botón de pausa fijo (44 px a 12 px del borde), sin montarse */
  .hero-content{padding-bottom:68px}
  .hero::before{background:var(--velo-hero-abajo-movil)}
}
@media(min-width:1024px){
  .pad{padding-left:64px;padding-right:64px}
  .hero-content{padding-bottom:64px}
  .hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .hero-title{font-size:60px}
  /* cada línea entera: puede pasar del ancho de su columna, la tarjeta de la derecha va abajo y no choca */
  .hero-title .line{white-space:nowrap}
  .tag-col{justify-content:flex-end;margin-top:0}
  .hero-tag{font-size:24px;line-height:32px}
  /* V2.5: 248 px por lado deja libre el botón de pausa (abajo a la izquierda, hasta 235 px con «Reproducir video de
     fondo»); el crédito ocupa 3 líneas a 1024 px y 2 desde 1440 px, dentro de los 64 px de margen */
  .credits{left:248px;right:248px}
}
@media(min-width:1280px){
  .hero-title{font-size:72px}
}

/* =====================================================================
   BANDAS DE VIDRIO — Precios, Nosotros e Historia
   Dos capas (tokens --vidrio-*, con el cálculo de contraste en portsync-tokens.css):
   · la banda: un tinte liviano, sin desenfoque, con los bordes de arriba y abajo difuminados. A los costados del
     contenido y en los huecos entre tramos el timelapse se sigue viendo nítido mientras se baja;
   · cada tramo (la intro y cada .section): un respaldo de vidrio esmerilado que abraza el bloque con los bordes
     difuminados (::before). Juntos dan el 85 % que necesita el texto; las tarjetas van encima, como antes.
   El respaldo lleva backdrop-filter: ninguno de sus ancestros (tramo, .wrap, banda, main) puede llevar opacidad,
   filtro, máscara ni backdrop-filter, porque cortarían el desenfoque del video. Por eso la banda se difumina con su
   degradado de fondo y no con una máscara, y los tramos no tienen animación de entrada propia.
   ===================================================================== */
.banda{position:relative;
  padding-top:calc(var(--pluma) + clamp(40px,7vh,88px));
  padding-bottom:calc(var(--pluma) + clamp(48px,8vh,96px));
  background:linear-gradient(180deg,transparent 0,var(--vidrio-banda) var(--pluma),var(--vidrio-banda) calc(100% - var(--pluma)),transparent 100%)}
.banda + .banda{margin-top:var(--ventana)}
/* la última banda sigue sin corte en el pie: sin difuminado abajo */
.banda--final{padding-bottom:clamp(64px,10vh,120px);
  background:linear-gradient(180deg,transparent 0,var(--vidrio-banda) var(--pluma),var(--vidrio-banda) 100%)}

/* tramos: entre uno y otro queda un hueco donde se ve el video (--hueco; los márgenes de la intro y de la sección
   siguiente se solapan, así que el hueco es uno solo) */
.banda .intro{margin-bottom:var(--hueco)}
.banda .section{margin-top:var(--hueco)}
.banda .wrap>:is(.intro,.section),.pie .ps-pie{position:relative}
/* el respaldo sale por los costados del bloque: la banda y el pie lo recortan en el borde de la pantalla, para que
   no aparezca desplazamiento horizontal (clip solo en x: no es contenedor de desplazamiento ni corta el desenfoque) */
.banda,.pie{overflow-x:clip}
.banda .wrap>:is(.intro,.section)::before,.pie .ps-pie::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  /* 8 px de parte plena alrededor del bloque: la caja de línea de un título asoma un par de px sobre el bloque */
  inset:calc(-1*var(--respaldo-y) - 8px) calc(-1*var(--respaldo-x) - 8px);
  background:var(--vidrio-respaldo);
  -webkit-backdrop-filter:blur(var(--vidrio-desenfoque)) saturate(1.15);
  backdrop-filter:blur(var(--vidrio-desenfoque)) saturate(1.15);
  /* el bloque queda entero en la parte plena; el difuminado va por fuera */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--negro) var(--respaldo-x),var(--negro) calc(100% - var(--respaldo-x)),transparent 100%),
    linear-gradient(180deg,transparent 0,var(--negro) var(--respaldo-y),var(--negro) calc(100% - var(--respaldo-y)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,var(--negro) var(--respaldo-x),var(--negro) calc(100% - var(--respaldo-x)),transparent 100%),
    linear-gradient(180deg,transparent 0,var(--negro) var(--respaldo-y),var(--negro) calc(100% - var(--respaldo-y)),transparent 100%);
  mask-composite:intersect}
@media (max-width:767px){
  .banda .wrap>:is(.intro,.section)::before,.pie .ps-pie::before{
    -webkit-backdrop-filter:blur(var(--vidrio-desenfoque-sm)) saturate(1.15);backdrop-filter:blur(var(--vidrio-desenfoque-sm)) saturate(1.15)}
}

/* pie común: sigue el tinte de la banda de Historia, con su propio respaldo. El respaldo del pie no baja del final
   de la página (si no, agrandaría el desplazamiento): solo se difumina hacia arriba y a los costados. */
.pie{margin-top:-1px;background:var(--vidrio-banda)}
.pie .ps-pie::before{bottom:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--negro) var(--respaldo-x),var(--negro) calc(100% - var(--respaldo-x)),transparent 100%),
    linear-gradient(180deg,transparent 0,var(--negro) var(--respaldo-y),var(--negro) 100%);
  mask-image:linear-gradient(90deg,transparent 0,var(--negro) var(--respaldo-x),var(--negro) calc(100% - var(--respaldo-x)),transparent 100%),
    linear-gradient(180deg,transparent 0,var(--negro) var(--respaldo-y),var(--negro) 100%)}

/* ---------- base compartida de las tres secciones (antes idéntica en precios / nosotros / historia) ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;height:43px;padding:0 22px;border-radius:var(--r-md);
  font-size:15.7px;font-weight:520;letter-spacing:-.0127em;white-space:nowrap;color:var(--ink);
  background:linear-gradient(180deg,var(--neutro-700) 0%,var(--neutro-850) 100%);
  box-shadow:inset 0 1px 0 var(--blanco-10),0 2px 14px var(--negro-30);
  transition:filter var(--dur-rapida) var(--ease-out),transform var(--dur-rapida) var(--ease-out)}
.cta:hover{filter:brightness(1.16)}
.cta:active{transform:translateY(1px)}
.btn-accent{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:43px;padding:0 22px;border-radius:var(--r-md);
  font-size:15.7px;font-weight:520;letter-spacing:-.0127em;color:var(--on-accent);white-space:nowrap;
  background:linear-gradient(180deg,var(--accent-fill) 0%,var(--accent-fill-2) 100%);
  box-shadow:inset 0 1px 0 var(--blanco-16),0 3px 12px var(--negro-30);   /* V2.3: sombra neutra (antes un halo azul) */
  transition:filter var(--dur-rapida) var(--ease-out),transform var(--dur-rapida) var(--ease-out)}
.btn-accent:hover{filter:brightness(1.1)}
.btn-accent:active{transform:scale(.98)}

/* intro de cada sección (antes el encabezado de cada página: el h1 pasó a h2, y cada nivel bajó uno) */
.intro{max-width:760px;margin-bottom:clamp(56px,9vh,96px)}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.intro h2{font-size:clamp(34px,4.6vw,56px);font-weight:410;line-height:1.08;letter-spacing:.0018em;
  font-variation-settings:"opsz" 32;text-shadow:0 2px 22px var(--negro-30);text-wrap:balance}
.lede{margin-top:18px;font-size:clamp(16px,1.4vw,18.5px);color:var(--ink-2);max-width:62ch;text-wrap:pretty}

.section{margin-top:clamp(56px,9vh,104px);scroll-margin-top:96px}
.section:first-child{margin-top:0}
.section-head{max-width:640px;margin-bottom:28px}
.banda h3{font-size:clamp(24px,2.6vw,32px);font-weight:410;letter-spacing:-.005em;line-height:1.15;font-variation-settings:"opsz" 32;text-wrap:balance}
.section-head p{margin-top:10px;color:var(--ink-3);text-wrap:pretty}
.banda h4{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.card{background:var(--vidrio-tarjeta);border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line),var(--sombra-card);padding:clamp(20px,2.4vw,30px)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  background:linear-gradient(180deg,var(--blanco-08) 0%,var(--blanco-06) 45%,var(--blanco-04) 100%);
  border:1px solid var(--blanco-06)}
.muted{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* =====================================================================
   PRECIOS
   ===================================================================== */
#precios .ico{width:16px;height:16px;flex:none}
#precios .kicker{display:block;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
#precios .fine{font-size:13.5px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}

/* ---- planes ---- */
#precios .plans{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
#precios .plan{position:relative;display:flex;flex-direction:column;gap:22px}
#precios .plan-title{display:flex;flex-direction:column;gap:6px}
#precios .plan-name{display:block;font-size:20px;font-weight:500;letter-spacing:-.012em;line-height:1.25;color:var(--ink);text-wrap:balance}
#precios .plan .chip{position:absolute;top:calc(clamp(20px,2.4vw,30px) - 4px);right:clamp(20px,2.4vw,30px);color:var(--plan-premium)}
/* el borde degradado usa el truco padding-box/border-box: el relleno tiene que ser opaco */
#precios .plan--premium{border:1px solid transparent;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
    linear-gradient(163deg,color-mix(in srgb,var(--plan-premium-borde) 75%,transparent) 0%,color-mix(in srgb,var(--plan-premium-borde) 45%,transparent) 46%,color-mix(in srgb,var(--plan-premium-borde) 22%,transparent) 100%) border-box;
  box-shadow:var(--sombra-card)}
#precios .price{display:flex;flex-direction:column;gap:4px;padding-bottom:22px;border-bottom:1px solid var(--line-soft)}
#precios .price-amount{font-size:clamp(32px,3.2vw,40px);font-weight:410;line-height:1.1;letter-spacing:-.01em;font-variation-settings:"opsz" 32}
#precios .price-unit{font-size:14px;color:var(--ink-3)}
#precios .plan-body{display:flex;flex-direction:column;gap:22px}
#precios .feat-block{display:flex;flex-direction:column;gap:10px}
#precios .feat-title{font-size:14px;font-weight:500;color:var(--ink)}
#precios .feat{list-style:none;display:flex;flex-direction:column;gap:10px}
#precios .feat li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-2)}
#precios .feat .ico{margin-top:2.5px;color:var(--ink-3)}
#precios .feat--no li{color:var(--ink-3)}
#precios .feat--no .ico{color:var(--ink-4)}
#precios .plans-note{margin-top:18px;max-width:70ch}
@media (min-width:640px) and (max-width:899px){
  #precios .plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:auto auto 1fr;
    column-gap:clamp(24px,4vw,40px);row-gap:18px;align-items:start}
  #precios .plan-title{grid-column:1;grid-row:1}
  #precios .price{grid-column:1;grid-row:2;padding-bottom:0;border-bottom:0}
  #precios .plan-body{grid-column:2;grid-row:1/4}
  #precios .plan .chip{position:static;grid-column:1;grid-row:3;justify-self:start}
}
@media (min-width:900px){
  #precios .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- instalación ---- */
#precios .install{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
#precios .ref{display:flex;flex-direction:column;gap:18px}
#precios .ref-amount{margin-top:8px;font-size:clamp(38px,4.2vw,50px);font-weight:410;line-height:1.05;letter-spacing:-.012em;font-variation-settings:"opsz" 32}
#precios .ref-unit{margin-top:8px;font-size:15.5px;color:var(--ink-2)}
#precios .formula{list-style:none;border-top:1px solid var(--line-soft)}
#precios .formula li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
#precios .formula li span:first-child{color:var(--ink-3)}
#precios .formula li span:last-child{color:var(--ink-2)}
#precios .ref .fine{margin-top:auto}
#precios .calc{display:flex;flex-direction:column;gap:22px}
#precios .calc-head p{margin-top:6px}
#precios .field{display:flex;flex-direction:column;gap:8px}
#precios .field label{font-size:14px;font-weight:500;color:var(--ink-2)}
#precios .num-input{width:100%;max-width:220px;height:50px;padding:0 14px;border-radius:var(--r-md);color-scheme:dark;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--blanco-12);caret-color:var(--accent);
  font-size:20px;font-variant-numeric:tabular-nums;transition:box-shadow var(--dur-rapida) var(--ease-out)}
#precios .num-input:hover{box-shadow:inset 0 0 0 1px var(--blanco-20)}
#precios .num-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-md)}
#precios .hint{font-size:13.5px;color:var(--ink-3)}
#precios .presets{display:flex;flex-wrap:wrap;gap:8px}
#precios .preset{height:36px;padding:0 14px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--blanco-08) 0%,var(--blanco-06) 45%,var(--blanco-04) 100%);
  border:1px solid var(--blanco-08);transition:background var(--dur-rapida) var(--ease-out),color var(--dur-rapida) var(--ease-out),border-color var(--dur-rapida) var(--ease-out)}
#precios .preset:hover{color:var(--ink);background:linear-gradient(180deg,var(--blanco-12),var(--blanco-08))}
#precios .preset[aria-pressed="true"]{color:var(--ink);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
#precios .calc-out{border-top:1px solid var(--line-soft)}
#precios .calc-out>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
#precios .calc-out dt{font-size:14.5px;color:var(--ink-3)}
#precios .calc-out dd{font-size:17px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto}
#precios .calc-out .total dt{color:var(--ink);font-weight:500}
#precios .calc-out .total dd{font-size:clamp(22px,2.4vw,28px);font-weight:450;color:var(--ink);letter-spacing:-.01em}
@media (min-width:860px){
  #precios .install{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}

/* ---- comparación ---- */
#precios .table-card{padding:0;overflow:hidden}
#precios .cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
#precios .cmp th,#precios .cmp td{padding:16px clamp(18px,2.4vw,30px);text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
#precios .cmp thead th{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
#precios .cmp tbody th{width:24%;font-weight:500;color:var(--ink)}
#precios .cmp td{color:var(--ink-3)}
#precios .cmp td.is-ps{color:var(--ink-2)}
#precios .cmp tbody tr:last-child>*{border-bottom:0}
#precios .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin-top:18px}
#precios .stat{display:flex;flex-direction:column;gap:10px}
#precios .stat-value{font-size:clamp(30px,3.4vw,42px);font-weight:410;line-height:1.05;letter-spacing:-.012em;font-variation-settings:"opsz" 32}
#precios .stat-desc{font-size:15.5px;color:var(--ink-2);text-wrap:pretty}
#precios .stat .fine{margin-top:auto}
@media (max-width:640px){
  #precios .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  #precios .cmp,#precios .cmp tbody,#precios .cmp tr,#precios .cmp th,#precios .cmp td{display:block;width:auto}
  #precios .cmp tbody tr{padding:18px 20px;border-bottom:1px solid var(--line-soft)}
  #precios .cmp tbody tr:last-child{border-bottom:0}
  #precios .cmp tbody th{width:auto;padding:0 0 10px;border:0}
  #precios .cmp td{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:12px;padding:6px 0;border:0;font-size:14.5px}
  #precios .cmp td::before{content:attr(data-label);font-size:13px;color:var(--ink-3)}
}

/* ---- cierre ---- */
#precios .closing{display:flex;flex-direction:column;gap:24px}
#precios .closing-text{max-width:600px}
#precios .closing-text p{margin-top:10px;color:var(--ink-3);text-wrap:pretty}
#precios .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
#precios .btn-accent .ico{width:15px;height:15px}
#precios .link-2{display:inline-flex;align-items:center;gap:9px;min-height:43px;font-size:15.7px;font-weight:500;color:var(--ink-2);transition:color var(--dur-rapida) var(--ease-out)}
#precios .link-2:hover{color:var(--ink)}
#precios .link-2 .ico{width:18px;height:18px}
@media (min-width:900px){
  #precios .closing{flex-direction:row;align-items:center;justify-content:space-between}
  #precios .actions{flex:none}
}

/* =====================================================================
   NOSOTROS
   ===================================================================== */
#nosotros .kicker{font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}

/* ---- propósito ---- */
#nosotros .purpose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:18px clamp(28px,5vw,72px);align-items:start}
#nosotros .statement{display:grid;gap:14px;max-width:58ch;
  font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.6;color:var(--ink-2)}
#nosotros .statement p{text-wrap:pretty}
#nosotros .statement strong{font-weight:500;color:var(--ink)}

/* ---- equipo ---- */
#nosotros .team{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
#nosotros .member{display:flex;flex-direction:column;gap:6px}
#nosotros .member-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#nosotros .member p,#nosotros .advisor p{color:var(--ink-3);font-size:15px;text-wrap:pretty}
#nosotros .avatar{width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1;color:var(--ink);
  background:linear-gradient(180deg,var(--neutro-800) 0%,var(--neutro-850) 100%);
  box-shadow:inset 0 0 0 1px var(--blanco-12),0 6px 18px var(--negro-30)}
#nosotros .avatar svg{width:26px;height:26px}
#nosotros .avatar--pending{background:var(--blanco-04);box-shadow:none;border:1px dashed var(--blanco-30);color:var(--ink-3)}
#nosotros .pending{color:var(--ink-2);text-decoration:underline dashed var(--blanco-40);
  text-decoration-thickness:1px;text-underline-offset:5px}
#nosotros .advisor{margin-top:16px;display:flex;align-items:center;gap:20px}
#nosotros .advisor-body{display:grid;gap:6px;min-width:0}
#nosotros .advisor-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

/* ---- ODS ---- */
#nosotros .ods{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#nosotros .ods-card{display:flex;align-items:flex-start;gap:20px}
#nosotros .ods-num{flex:none;width:76px;height:76px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
#nosotros .ods-num small{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--ink-3)}
#nosotros .ods-num b{font-size:30px;font-weight:450;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#nosotros .ods-body{display:grid;justify-items:start;gap:8px;min-width:0}
#nosotros .ods-body p{color:var(--ink-3);font-size:15px;text-wrap:pretty}
#nosotros .ods-card--sec{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
#nosotros .ods-card--sec .ods-num{width:60px;height:60px;border-radius:15px;background:transparent}
#nosotros .ods-card--sec .ods-num b{font-size:24px}

/* ---- redes ---- */
#nosotros .social{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 40px;padding:clamp(24px,3.6vw,44px)}
#nosotros .social::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 130% at 100% 0%,var(--accent-soft) 0%,transparent 60%)}
#nosotros .social-id{display:flex;align-items:center;gap:22px;min-width:0;flex:1 1 360px}
#nosotros .ig-tile{flex:none;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;color:var(--ink);
  background:linear-gradient(180deg,var(--neutro-800) 0%,var(--neutro-850) 100%);
  box-shadow:inset 0 0 0 1px var(--blanco-12),0 8px 24px var(--negro-30)}
#nosotros .ig-tile svg{width:32px;height:32px}
#nosotros .social-id p:last-child{margin-top:8px;color:var(--ink-3);text-wrap:pretty}
#nosotros .social-id strong{font-weight:500;color:var(--ink)}
#nosotros .social .btn-accent svg{width:14px;height:14px;flex:none}

/* ---- cierre ---- */
#nosotros .closing{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 48px}
#nosotros .closing-text{max-width:600px}
#nosotros .closing-text p{margin-top:10px;color:var(--ink-3);text-wrap:pretty}
#nosotros .closing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
#nosotros .text-link{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;color:var(--ink-2);transition:color var(--dur-rapida) var(--ease-out)}
#nosotros .text-link:hover{color:var(--ink)}
#nosotros .text-link svg{width:14px;height:14px;flex:none}

@media (max-width:900px){
  #nosotros .purpose{grid-template-columns:1fr}
}
@media (max-width:720px){
  #nosotros .ods{grid-template-columns:1fr}
}
@media (max-width:560px){
  #nosotros .advisor{flex-direction:column;align-items:flex-start;gap:16px}
  #nosotros .social-id{flex-direction:column;align-items:flex-start;gap:18px}
  #nosotros .social .btn-accent{width:100%}
  #nosotros .ods-card{gap:16px}
  #nosotros .ods-num{width:64px;height:64px;border-radius:16px}
  #nosotros .ods-num b{font-size:26px}
}

/* =====================================================================
   HISTORIA
   ===================================================================== */
#historia .prose-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blanco-40);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-rapida) var(--ease-out)}
#historia .prose-link:hover{text-decoration-color:currentColor}

/* ---- el problema: tres cifras ---- */
#historia .stats{display:grid;grid-template-columns:minmax(0,1fr);padding:0}
#historia .stat{display:grid;gap:14px;padding:clamp(22px,2.6vw,32px);min-width:0}
#historia .stat+.stat{border-top:1px solid var(--line-soft)}
#historia .stat-pre{display:block;margin-bottom:6px;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
#historia .stat-value{display:block;font-size:clamp(32px,3.4vw,44px);font-weight:430;line-height:1;letter-spacing:-.02em;
  font-variation-settings:"opsz" 32;white-space:nowrap}
#historia .stat h4{font-size:17px;line-height:1.35;text-wrap:balance}
#historia .stat-txt p{margin-top:6px;font-size:15px;color:var(--ink-3);text-wrap:pretty}
@media (min-width:560px) and (max-width:859px){
  #historia .stat{grid-template-columns:minmax(190px,34%) minmax(0,1fr);column-gap:28px;align-items:start}
}
@media (min-width:860px){
  #historia .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  #historia .stat+.stat{border-top:0;border-left:1px solid var(--line-soft)}
}
#historia .bridge{margin-top:24px;max-width:66ch;color:var(--ink-2);text-wrap:pretty}

/* ---- línea de tiempo ---- */
#historia .tl{list-style:none;max-width:900px;
  --date-w:150px;--rail-w:48px;--node-y:34px;
  --track:var(--blanco-16);--track-next:var(--blanco-30)}
#historia .tl-item{position:relative;display:grid;grid-template-columns:var(--date-w) var(--rail-w) minmax(0,1fr);
  grid-template-areas:"date rail body";padding-bottom:20px}
#historia .tl-item:last-child{padding-bottom:0}
#historia .tl-item::before{content:"";position:absolute;left:calc(var(--date-w) + var(--rail-w)/2 - 1px);top:0;bottom:0;width:2px;background:var(--track)}
#historia .tl-item:first-child::before{top:var(--node-y)}
#historia .tl-item:last-child::before{bottom:auto;height:var(--node-y)}
#historia .tl-date{grid-area:date;padding:calc(var(--node-y) - 11px) 6px 0 0;text-align:right;font-size:14px;line-height:22px;font-weight:500;color:var(--ink)}
#historia .tl-date span{font-weight:450;color:var(--ink-3)}
#historia .tl-node{grid-area:rail;position:relative;z-index:1}
#historia .tl-node::after{content:"";position:absolute;left:50%;top:var(--node-y);width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--ink-2);box-shadow:0 0 0 5px var(--bg)}
#historia .tl-body{grid-area:body;min-width:0}
#historia .tl-card{padding:22px clamp(18px,2.2vw,26px) 24px}
#historia .tl-card h4{line-height:24px}
#historia .tl-card p{margin-top:8px;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
#historia .tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none}
#historia .dot{width:8px;height:8px;border-radius:50%;flex:none}
#historia .dot-ok{background:var(--ok)} #historia .dot-warn{background:var(--warn)} #historia .dot-crit{background:var(--crit)}
#historia .tl-card .rename{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
#historia .rename svg{width:16px;height:16px;color:var(--ink-3)}
#historia .chip-old{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--blanco-40)}
#historia .parts{list-style:none;margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
#historia .parts li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-soft)}
#historia .parts b{font-size:14.5px;font-weight:560;color:var(--ink)}
#historia .parts span{font-size:13.5px;color:var(--ink-3)}

/* hoy: único acento de la línea de tiempo */
#historia .tl-item.is-now{padding-bottom:28px}
#historia .tl-item.is-now::before{bottom:auto;height:var(--node-y)}
#historia .tl-item.is-now::after{content:"";position:absolute;left:calc(var(--date-w) + var(--rail-w)/2 - 1px);top:var(--node-y);bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--track-next) 0 6px,transparent 6px 12px)}
#historia .is-now .tl-date{font-weight:600;letter-spacing:.02em;color:var(--accent-ink)}
#historia .is-now .tl-node::after{width:16px;height:16px;background:var(--accent);box-shadow:0 0 0 5px var(--bg),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}
#historia .now-text{padding-top:calc(var(--node-y) - 11px);font-size:15px;line-height:22px;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
@keyframes now-pulse{from{transform:translate(-50%,-50%) scale(1);opacity:.5}to{transform:translate(-50%,-50%) scale(2.8);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  #historia .is-now .tl-node::before{content:"";position:absolute;left:50%;top:var(--node-y);width:16px;height:16px;border-radius:50%;
    background:var(--accent);animation:now-pulse 2.6s var(--ease-out) infinite}
}

/* próximamente: nodo y tarjeta en estilo pendiente */
#historia .tl-item.is-next::before{background:repeating-linear-gradient(180deg,var(--track-next) 0 6px,transparent 6px 12px)}
#historia .is-next .tl-date{color:var(--ink-3)}
#historia .is-next .tl-node::after{background:var(--bg);box-shadow:0 0 0 5px var(--bg),inset 0 0 0 2px var(--blanco-40)}
#historia .tl-card--pending{padding-top:21px;background:transparent;box-shadow:none;border:1px dashed var(--blanco-20)}
#historia .next-list{list-style:none;margin-top:12px;display:grid;gap:10px}
#historia .next-list li{position:relative;padding-left:22px;color:var(--ink-2);text-wrap:pretty}
#historia .next-list li::before{content:"";position:absolute;left:1px;top:calc(.775em - 4.5px);width:9px;height:9px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--blanco-40)}

@media (max-width:640px){
  #historia .tl{--rail-w:30px;--node-y:11px}
  #historia .tl-item{grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-areas:"rail date" "rail body";padding-bottom:28px}
  #historia .tl-item::before,#historia .tl-item.is-now::after{left:calc(var(--rail-w)/2 - 1px)}
  #historia .tl-date{padding:0 0 10px;text-align:left}
  #historia .now-text{padding-top:0}
  #historia .tl-card{padding:18px 18px 20px}
  #historia .tl-card--pending{padding-top:17px}
}

/* ---- cierre ---- */
#historia .closing{display:grid;gap:22px;align-items:center}
#historia .closing-copy p{margin-top:10px;color:var(--ink-3);max-width:58ch;text-wrap:pretty}
#historia .closing-actions{display:flex;flex-wrap:wrap;gap:12px}
#historia .closing-actions svg{width:16px;height:16px}
#historia .closing-note{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:18px;
  border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-3)}
#historia .closing-note svg{width:18px;height:18px;flex:none;color:var(--ink-2)}
@media (min-width:821px){
  #historia .closing{grid-template-columns:minmax(0,1fr) auto;column-gap:40px}
}

/* =====================================================================
   APARICIÓN AL BAJAR (index.js pone .revela en <html> y .is-in en cada bloque al entrar en pantalla, una vez)
   Sin JS, sin IntersectionObserver o con movimiento reducido todo queda visible: nada parte oculto en el HTML.
   Un solo momento propio, y solo donde el orden dice algo:
   · data-revelar="intro"  la entrada de cada sección: el vidrio se condensa sobre el video (el respaldo del tramo
     pasa de nada a esmerilado) y, al mismo tiempo, el título entra a foco desde el desenfoque; antetítulo y bajada
     aparecen con él. Sin desplazamiento: es foco, no un "sube y aparece".
   · data-revelar="hito"   la línea de tiempo de Historia, hito por hito (fecha y tarjeta; el riel queda fijo).
   Todo lo demás (tarjetas, tablas, listas, cierres) está visible desde el principio.
   ===================================================================== */
.revela [data-revelar="intro"]::before{transition:opacity var(--dur-lenta) var(--ease-out)}
.revela [data-revelar="intro"]:not(.is-in)::before{opacity:0}
.revela [data-revelar="intro"]>*{transition:opacity var(--dur-lenta) var(--ease-out),filter var(--dur-lenta) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
.revela [data-revelar="intro"]:not(.is-in)>*{opacity:0}
.revela [data-revelar="intro"]:not(.is-in)>h2{filter:blur(10px)}
/* el vidrio va primero (sin retraso) y el texto lo sigue: el texto no se asoma sobre el video antes que su respaldo */
.revela [data-revelar="intro"]>:nth-child(1){--i:1.7}
.revela [data-revelar="intro"]>:nth-child(2){--i:2.9}
.revela [data-revelar="intro"]>:nth-child(3){--i:5.1}
.revela [data-revelar="hito"] :is(.tl-date,.tl-body){
  transition:opacity var(--dur-pagina) var(--ease-out),transform var(--dur-pagina) var(--ease-out)}
.revela [data-revelar="hito"]:not(.is-in) :is(.tl-date,.tl-body){opacity:0;transform:translateY(16px)}
@media print{
  .revela [data-revelar]::before,.revela [data-revelar]>*,.revela [data-revelar] :is(.tl-date,.tl-body){opacity:1!important;transform:none!important;filter:none!important}
  .fondo{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-title .ch,.fade,.btn{transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}