:root {
  /* ============================================================
     PALETA — cada color con un oficio, no un montón de azules

     1. Superficies: lo que sostiene
     2. Tinta: lo que se lee
     3. Marca: HOPE como empresa
     4. Divisiones: cada línea de negocio tiene su acento, y el
        acento significa algo (agua, señal, metal). Es lo que hace
        que el sitio se lea como un sistema y no como una web
        pintada de azul.
     5. Señales: estados, nunca decoración
     ============================================================ */

  /* 1 · Superficies */
  --lienzo:    #FAF6F0;
  --lienzo-2:  #F3ECE1;
  --papel:     #FFFDFB;
  --arena:     #E5DACA;
  --arena-2:   #D8C9B4;
  --hondo:     #0B1A38;

  /* 2 · Tinta */
  --tinta:     #171A28;
  --tinta-2:   #414658;
  --tinta-3:   #737688;

  /* 3 · Marca */
  --azul:      #10347A;
  --azul-alto: #24509E;
  --azul-bajo: #0A1F4E;
  --azul-suave:#E7EBF6;
  /* Sin color de acento: la marca es el azul y punto. La jerarquía la
     dan el peso, el tamaño y el espacio. Los nombres se conservan
     porque están usados en veinte sitios; lo que cambia es el valor.
     --turquesa    → sobre fondo claro: el azul de marca
     --sobre-oscuro→ sobre azul o foto oscura, donde el marino no se ve */
  --turquesa:  #10347A;
  --turquesa-tx:#10347A;
  --sobre-oscuro: #A8BEE4;

  /* 4 · Las tres divisiones */
  /* Las divisiones ya no se distinguen por color sino por su número.
     Un sitio corporativo en un solo azul se ve más serio que uno con
     tres acentos peleándose. */
  --serv:      #10347A;
  --serv-luz:  #E7EBF6;
  --soft:      #10347A;
  --soft-luz:  #E7EBF6;
  --equi:      #10347A;
  --equi-luz:  #E7EBF6;

  /* 5 · Señales */
  --rojo:  #B8402F;
  --verde: #1B8D5E;
  --ambar: #C48A22;

  /* Compatibilidad con lo ya escrito */
  --crema:   var(--lienzo);
  --crema-2: var(--lienzo-2);

  --e1: 0 1px 2px rgba(64,48,32,0.05), 0 8px 20px -10px rgba(64,48,32,0.16);
  --e2: 0 2px 6px rgba(64,48,32,0.06), 0 20px 44px -18px rgba(64,48,32,0.24);
  --e3: 0 10px 30px rgba(30,36,74,0.09), 0 54px 110px -34px rgba(16,52,122,0.34);

  --salida:  cubic-bezier(0.16, 1, 0.3, 1);
  --entrada: cubic-bezier(0.32, 0.72, 0, 1);
  --telon-c: cubic-bezier(0.7, 0, 0.2, 1);

  --display: "Archivo", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ancho: 1280px;

  --f-planta:   url("/assets/fotos/planta.webp");
  --f-maquinas: url("/assets/fotos/maquinas.webp");
  --f-camisas:  url("/assets/fotos/camisas.webp");
  --f-dobladas: url("/assets/fotos/dobladas.webp");
  --f-plancha:  url("/assets/fotos/plancha.webp");
  --f-manos:    url("/assets/fotos/manos.webp");
  --f-toallas:  url("/assets/fotos/toallas.webp");
  --f-rollos:   url("/assets/fotos/rollos.webp");
  --f-fundas:   url("/assets/fotos/fundas.webp");
  --f-cama:     url("/assets/fotos/cama.webp");
  --f-traje:    url("/assets/fotos/traje.webp");
  --f-delicada: url("/assets/fotos/delicada.webp");
  --f-mantel:   url("/assets/fotos/mantelera.webp");
  --f-entrega:  url("/assets/fotos/entrega.webp");
  --f-celular:  url("/assets/fotos/celular.webp");
  /* Portada corporativa */
  --f-nave:     url("/assets/fotos/nave.webp");
  --f-trabajo:  url("/assets/fotos/trabajo.webp");
  --f-panel:    url("/assets/fotos/panel.webp");
  --f-tablet:   url("/assets/fotos/tablet.webp");
  --f-textil:   url("/assets/fotos/textil.webp");
  --f-entrada:  url("/assets/fotos/entrada.webp");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
section, .lema { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--turquesa); color: var(--azul-bajo); }
:focus-visible { outline: 2px solid var(--turquesa-tx); outline-offset: 3px; border-radius: 8px; }
.num { font-family: var(--mono); }

.caja { width: min(100% - 48px, var(--ancho)); margin-inline: auto; }

main, footer, .lema { position: relative; z-index: 1; }

/* ---------- Tipografía ---------- */

h1, h2 {
  font-weight: 780;
  font-stretch: 108%;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.plomo {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  color: var(--tinta-2); max-width: 56ch; line-height: 1.6;
}
.plomo-claro { color: rgba(255,255,255,0.84); }
.tinta-azul { color: var(--azul); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--turquesa-tx);
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--turquesa); border-radius: 2px; }
.kicker-claro { color: var(--sobre-oscuro); }

.pildora {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 24px; padding: 7px 16px 7px 13px;
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(120,110,95,0.16), var(--e1);
  font-size: 0.78rem; font-weight: 600;
  color: var(--tinta-2);
}

.punto-vivo {
  width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: var(--turquesa);
  animation: latir 2.4s var(--salida) infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(16,52,122,0.42); }
  70%  { box-shadow: 0 0 0 7px rgba(16,52,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,52,122,0); }
}

/* ---------- Telón ---------- */
.telon {
  position: fixed; inset: 0; z-index: 200;
  background: var(--azul);
  display: grid; place-content: center; gap: 22px; justify-items: center;
  transition: transform 720ms var(--telon-c), visibility 0s 720ms;
}
.telon.abierto { transform: translateY(-100%); visibility: hidden; }
.telon-barra { width: 150px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.2); overflow: hidden; }
.telon-barra i { display: block; height: 100%; width: 100%; background: #FCFCFC; transform-origin: left; animation: cargar 0.9s var(--salida) both; }
@keyframes cargar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 14px 0 auto 0; z-index: 90;
  display: flex; justify-content: center;
  transition: transform 480ms var(--salida);
  padding-inline: 16px;
}
.nav.oculta { transform: translateY(calc(-100% - 20px)); }
.nav-caja {
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 10px 0 20px;
  border-radius: 999px;
  width: min(100%, var(--ancho));
  background: rgba(250,246,240,0.9);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  box-shadow: 0 0 0 1px rgba(120,110,95,0.16), var(--e1);
  transition: box-shadow 350ms var(--salida), background 350ms;
}
.nav.pegada .nav-caja { background: rgba(250,246,240,0.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), 0 0 0 1px rgba(120,110,95,0.2), var(--e2); }
.marca img { display: block; height: 32px; width: auto; transition: transform 320ms var(--salida); }
.marca:hover img { transform: scale(1.04); }
.nav-sitio {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-3); margin-right: auto;
  padding-left: 18px; border-left: 1px solid rgba(120,110,95,0.22);
}
.menu-abrir {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(120,110,95,0.16), var(--e1);
  transition: transform 260ms var(--salida), background 260ms;
}
.menu-abrir:hover { background: var(--crema-2); }
.menu-abrir:active { transform: scale(0.94); }
.menu-abrir i { display: grid; gap: 5px; }
.menu-abrir i span { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: var(--tinta); transition: transform 400ms var(--salida); }

/* ---------- Aguja del ciclo ---------- */
.aguja {
  position: fixed; left: 26px; bottom: 26px; z-index: 88;
  display: flex; align-items: center; gap: 11px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: rgba(255,253,251,0.7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 0 0 1px rgba(120,110,95,0.14), var(--e1);
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--salida), transform 600ms var(--salida);
}
.aguja.puesta { opacity: 1; transform: none; }
.aguja svg { width: 30px; height: 30px; transform: rotate(-90deg); flex: none; }
.aguja circle { fill: none; stroke-width: 3; }
.aguja-pista { stroke: rgba(16,52,122,0.14); }
.aguja-arco {
  stroke: var(--turquesa); stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  transition: stroke-dashoffset 220ms linear;
}
.aguja-tx {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-2); white-space: nowrap;
}

/* ---------- Menú a pantalla completa ---------- */
.velo-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--azul);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 22px 0 36px;
  clip-path: circle(0% at calc(100% - 46px) 44px);
  visibility: hidden;
  transition: clip-path 720ms var(--telon-c), visibility 0s 720ms;
}
.velo-menu.abierto {
  clip-path: circle(150% at calc(100% - 46px) 44px);
  visibility: visible;
  transition: clip-path 820ms var(--salida);
}
.velo-cab { display: flex; align-items: center; }
.velo-cerrar {
  margin-left: auto; position: relative;
  width: 48px; height: 48px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
  transition: transform 340ms var(--salida), background 260ms;
}
.velo-cerrar span {
  position: absolute; left: 50%; top: 50%; width: 17px; height: 1.5px; border-radius: 2px; background: #fff;
}
.velo-cerrar span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.velo-cerrar span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.velo-cerrar:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); }
.velo-lista { list-style: none; margin-block: 0; padding: 0; display: grid; align-content: center; }
.velo-lista a {
  display: flex; align-items: baseline; gap: clamp(14px, 3vw, 30px);
  padding: clamp(6px, 1.2vh, 14px) 0;
  color: #fff;
  font-weight: 780; font-stretch: 108%;
  font-size: clamp(2rem, 6.2vh, 4rem);
  letter-spacing: -0.035em; line-height: 1.05;
  transition: transform 400ms var(--salida), color 260ms;
}
.velo-lista a:hover { transform: translateX(18px); color: var(--sobre-oscuro); }
.velo-lista .v-num { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--sobre-oscuro); letter-spacing: 0.1em; }
.velo-lista .v-flecha { margin-left: auto; opacity: 0; font-size: 0.5em; transform: translateX(-16px); transition: opacity 320ms, transform 400ms var(--salida); }
.velo-lista a:hover .v-flecha { opacity: 1; transform: none; }
.velo-lista li { opacity: 0; transform: translateY(28px); transition: opacity 520ms var(--salida), transform 520ms var(--salida); }
.velo-menu.abierto .velo-lista li { opacity: 1; transform: none; }
.velo-menu.abierto .velo-lista li:nth-child(1) { transition-delay: 170ms; }
.velo-menu.abierto .velo-lista li:nth-child(2) { transition-delay: 225ms; }
.velo-menu.abierto .velo-lista li:nth-child(3) { transition-delay: 280ms; }
.velo-menu.abierto .velo-lista li:nth-child(4) { transition-delay: 335ms; }
.velo-menu.abierto .velo-lista li:nth-child(5) { transition-delay: 390ms; }
.velo-menu.abierto .velo-lista li:nth-child(6) { transition-delay: 445ms; }
.velo-pie { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; color: rgba(255,255,255,0.55); font-size: 0.88rem; }
.velo-soft { margin-left: auto; color: var(--sobre-oscuro); font-weight: 620; transition: transform 300ms var(--salida); display: inline-block; }
.velo-soft:hover { transform: translateX(5px); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 12px 0 28px;
  border: 0; border-radius: 999px;
  font-weight: 640; font-size: 1rem; letter-spacing: -0.01em;
  background: var(--azul); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 28px -12px rgba(16,52,122,0.6);
  transition: transform 260ms var(--salida), background 260ms, box-shadow 260ms;
  will-change: transform;
}
.btn:not(:has(.btn-ico)) { padding-inline: 28px; }
.btn:hover { background: var(--azul-alto); }
.btn:active { transform: scale(0.975); }
.btn-ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  font-style: normal; font-size: 0.92rem; line-height: 1;
  transition: transform 340ms var(--salida), background 260ms;
}
.btn:hover .btn-ico { transform: translate(3px, -1px) scale(1.06); background: rgba(255,255,255,0.24); }
.btn-sm { height: 46px; font-size: 0.9rem; padding: 0 8px 0 20px; }
.btn-sm .btn-ico { width: 30px; height: 30px; font-size: 0.85rem; }
.btn-linea { background: var(--papel); color: var(--tinta); box-shadow: 0 0 0 1px rgba(120,110,95,0.18), var(--e1); }
.btn-linea:hover { background: var(--papel); }
.btn-linea .btn-ico { background: rgba(23,26,40,0.07); }
.btn-blanco { background: #fff; color: var(--azul); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.45); }
.btn-blanco:hover { background: var(--azul-suave); color: var(--azul-bajo); }
.btn-blanco .btn-ico { background: rgba(16,52,122,0.1); }
.btn-linea-clara { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.38); }
.btn-linea-clara:hover { background: rgba(255,255,255,0.1); }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   EL RITMO: capítulos sobre el agua, y paneles de vidrio
   ============================================================ */

.cap { padding: clamp(80px, 10vw, 150px) 0; position: relative; }
/* Sin textura de fondo, el ritmo entre secciones lo marca la superficie:
   crema, arena, crema. Es lo que impide que la página se lea como un
   solo bloque largo. */
.cap-alt { background: var(--lienzo-2); }

/* Panel: bandeja exterior + núcleo de vidrio sobre la escena */
.panel {
  position: relative;
  padding: clamp(26px, 3.4vw, 54px);
  border-radius: clamp(28px, 3vw, 44px);
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(120,110,95,0.14), var(--e2);
}
.panel-tinta {
  background: var(--hondo);
  color: #fff;
  box-shadow: var(--e3);
}
.panel-tinta h2 { color: #fff; }

/* ============================================================
   PORTADA — partida a sangre

   La rejilla de dos columnas dentro de un contenedor centrado es
   el esqueleto de cualquier plantilla. Aquí la portada parte la
   pantalla de lado a lado: el texto respira sobre superficie
   limpia y la imagen llega hasta el borde, sin margen que la
   convierta en «una foto puesta en una caja».
   ============================================================ */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  min-height: 100svh;
  padding: 0;
}
.portada-izq {
  display: flex; align-items: center;
  padding: 140px clamp(40px, 5vw, 80px) 80px max(28px, calc((100vw - var(--ancho)) / 2 + 4px));
}
.portada-texto { max-width: 34rem; }
.portada .plomo { margin-top: 26px; max-width: 42ch; }
.portada .acciones { margin-top: 32px; }
.portada-pie { margin: 22px 0 0; font-size: 0.88rem; color: var(--tinta-3); }

/* El titular entra línea por línea, cada una desde debajo de su propio
   recorte. Sin display:block los saltos escritos a mano se pierden y
   el titular se rompe donde le da la gana. */
.titulo-hero .linea { display: block; overflow: hidden; padding: 0.14em 0 0.16em; margin-block: -0.14em -0.16em; }
.titulo-hero .linea > span { display: block; transform: translateY(110%); }
.telon-fuera .titulo-hero .linea > span { animation: sube 1.05s var(--salida) both; }
.telon-fuera .titulo-hero .linea:nth-child(1) > span { animation-delay: 0.06s; }
.telon-fuera .titulo-hero .linea:nth-child(2) > span { animation-delay: 0.14s; }
.telon-fuera .titulo-hero .linea:nth-child(3) > span { animation-delay: 0.22s; }
.telon-fuera .titulo-hero .linea:nth-child(4) > span { animation-delay: 0.30s; }
@keyframes sube { to { transform: none; } }

.parte { opacity: 0; transform: translateY(26px); }
.telon-fuera .parte { animation: aparecer 0.95s var(--salida) both; }
.telon-fuera .pildora.parte { animation-delay: 0s; }
.telon-fuera .plomo.parte { animation-delay: 0.42s; }
.telon-fuera .acciones.parte { animation-delay: 0.52s; }
.telon-fuera .portada-pie.parte { animation-delay: 0.62s; }
.telon-fuera .portada-der.parte { animation-delay: 0.2s; }
@keyframes aparecer { to { opacity: 1; transform: none; } }

.portada-der {
  position: relative; overflow: hidden;
  background: var(--hondo);
  display: flex; align-items: flex-end;
}
.der-foto { position: absolute; inset: 0; background-position: center; background-size: cover; }
.portada-der::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,23,48,0.06) 8%, rgba(10,23,48,0.55) 46%, rgba(10,23,48,0.93) 100%);
}

/* El índice de divisiones, sobre la imagen */
.indice {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: clamp(26px, 3vw, 44px);
  width: 100%; display: grid; gap: 0;
}
.indice li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}
.indice li:last-child { border-bottom: 1px solid rgba(255,255,255,0.22); }
.ix-num {
  grid-row: span 2;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--sobre-oscuro);
}
.indice b { font-size: 1.18rem; font-weight: 720; letter-spacing: -0.025em; }
.indice i { font-style: normal; font-size: 0.86rem; color: rgba(255,255,255,0.66); grid-column: 2; }

/* ============================================================
   DUOTONO
   La fotografía disponible es de banco gratuito y viene de
   sesiones distintas: colores, luces y épocas que no casan. Un
   duotono en los colores de la marca —sombras en azul, luces en
   arena— la vuelve un conjunto dirigido en vez de un montón de
   fotos sueltas. Es lo que hace una agencia cuando no puede
   encargar la fotografía.
   ============================================================ */
/* Ojo: .duo NO fija posición. Antes ponía `position: relative` y, al
   ir después en la hoja, le quitaba el `absolute` a la foto del héroe
   y la dejaba en 0x0. El elemento que la use ya tiene que estar
   posicionado; sus pseudoelementos se cuelgan de ahí. */
/* Sobre video oscuro el duotono se embarraba: se le sube el brillo
   y se le baja el contraste para que la textura se vea. */
.duo { filter: grayscale(1) contrast(0.98) brightness(1.18); }
.duo::before, .duo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.duo::before { background: #0A1F4E; mix-blend-mode: lighten; }
.duo::after  { background: #E8DCC8; mix-blend-mode: multiply; }

/* Cascada de objetos flotando */
.cascada { position: relative; height: clamp(440px, 46vw, 580px); }
.fl { position: absolute; margin: 0; will-change: transform; animation: derivar 13s ease-in-out infinite; }
.telon-fuera .fl { animation: entrar-fl 1.1s var(--salida) both, derivar 13s ease-in-out infinite 1.1s; }
@keyframes entrar-fl { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes derivar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.fl-foto {
  border-radius: 24px; overflow: hidden;
  background: var(--crema-2) center/cover no-repeat;
  box-shadow: 0 0 0 1px rgba(64,48,32,0.06), var(--e3);
}
.fl-1 { width: 42%; aspect-ratio: 3/4; left: 0;   top: 4%;    rotate: -4deg;  background-image: var(--f-camisas);  animation-delay: -1s; }
.fl-2 { width: 45%; aspect-ratio: 4/5; right: 0;  top: 0;     rotate: 3.5deg; background-image: var(--f-dobladas); animation-delay: -5s; }
.fl-3 { width: 30%; aspect-ratio: 1;   left: 8%;  bottom: 0;  rotate: 5deg;   background-image: var(--f-plancha);  animation-delay: -8s; }

.fl-ficha {
  display: grid; gap: 7px; padding: 6px;
  border-radius: 22px;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 0 1px rgba(64,48,32,0.07), var(--e2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fl-ficha > * { position: relative; z-index: 1; }
.fl-ficha::before {
  content: ""; position: absolute; inset: 6px; border-radius: 16px;
  background: var(--papel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(64,48,32,0.04);
}
.fl-ficha .f-cab, .fl-ficha .f-ref, .fl-ficha .f-chip { margin-inline: 14px; }
.fl-ficha .f-cab { margin-top: 14px; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tinta-3); }
.fl-ficha .f-ref { font-size: 1.24rem; font-weight: 760; letter-spacing: -0.03em; }
.fl-ficha .f-chip { width: max-content; margin-bottom: 14px; padding: 5px 12px; border-radius: 99px; background: var(--azul-suave); color: var(--azul); font-size: 0.74rem; font-weight: 660; }
.fl-ficha .f-msg { margin: 0 14px 14px; font-size: 0.86rem; line-height: 1.45; color: var(--tinta-2); }
.fl-estado { width: 60%; right: -2%; top: 52%; rotate: -2.5deg; animation-delay: -3s; }
.fl-wa     { width: 52%; left: 24%; bottom: 4%;  rotate: 3deg;   animation-delay: -9.5s; }
.fl-wa::before { background: #E9F8F0; }
.fl-wa .f-msg { color: #13402F; }

.indicador {
  position: relative; z-index: 2;
  margin: 40px auto 0; width: max-content;
  display: flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
}
.indicador span { width: 21px; height: 32px; border-radius: 12px; border: 1.5px solid var(--arena-2); position: relative; }
.indicador span::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px;
  border-radius: 3px; background: var(--turquesa-tx);
  transform: translateX(-50%);
  animation: gotea 1.9s var(--salida) infinite;
}
@keyframes gotea { 0% { opacity: 0; top: 5px; } 30% { opacity: 1; } 100% { opacity: 0; top: 17px; } }

/* ---------- Cinta cinética ---------- */
.lema { padding: 30px 0 10px; overflow: hidden; white-space: nowrap; }
.lema-pista { display: inline-flex; will-change: transform; }
.lema span {
  font-weight: 780; font-stretch: 108%;
  font-size: clamp(3rem, 7.6vw, 6.4rem);
  letter-spacing: -0.025em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(16,52,122,0.28);
  padding-right: 0.35em;
}
.lema i { font-style: normal; color: var(--turquesa); -webkit-text-stroke: 0; }

/* ---------- Capítulos ---------- */
.cap-cab {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.cap-num {
  font-weight: 780; font-stretch: 108%;
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  line-height: 0.8; letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(16,52,122,0.26);
  user-select: none;
}
.cap-num.claro { -webkit-text-stroke-color: rgba(255,255,255,0.3); }
.cap-num-solo { display: block; font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 16px; }
.cap-cab h2 { max-width: 20ch; }

.parte-scroll .palabra {
  display: inline-block;
  opacity: 0; transform: translateY(0.5em); filter: blur(7px);
  transition: opacity 760ms var(--salida), transform 760ms var(--salida), filter 760ms var(--salida);
  transition-delay: calc(var(--i) * 42ms);
}
.parte-scroll.visto .palabra { opacity: 1; transform: none; filter: blur(0); }

.rev { opacity: 0; transform: translateY(28px); }
.rev.visto { opacity: 1; transform: none; transition: opacity 900ms var(--salida), transform 900ms var(--salida); }
.rev.visto[data-r="1"] { transition-delay: 100ms; }
.rev.visto[data-r="2"] { transition-delay: 200ms; }
.rev.visto[data-r="3"] { transition-delay: 300ms; }

/* ---------- 01 · Servicios ---------- */
.servicios { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.serv {
  position: relative; overflow: hidden;
  border-radius: 26px;
  background: var(--crema-2) center/cover no-repeat;
  min-height: 300px;
  display: flex; align-items: flex-end;
  box-shadow: 0 0 0 1px rgba(64,48,32,0.06), var(--e1);
  transition: transform 620ms var(--salida), box-shadow 620ms var(--salida);
  isolation: isolate;
}
.serv-foto {
  position: absolute; inset: 0; z-index: 0;
  background: var(--crema-2) center/cover no-repeat;
  transition: transform 900ms var(--salida);
}
.serv::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,16,32,0) 26%, rgba(12,16,32,0.5) 58%, rgba(8,11,24,0.9) 100%);
}
.serv-cuerpo { position: relative; z-index: 2; padding: 24px 24px 22px; color: #fff; display: grid; gap: 6px; }
.serv-cuerpo h3 { margin: 0; font-size: 1.32rem; font-weight: 740; letter-spacing: -0.025em; }
.serv-cuerpo p { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.88); max-width: 34ch; line-height: 1.5; }
.serv-tag {
  position: absolute; z-index: 2; top: 18px; left: 18px;
  padding: 6px 13px; border-radius: 99px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul);
}
/* 7 tarjetas en 6 columnas: 4+2 | 3+3 | 2+2+2. Sin filas cojas. */
.serv-g { grid-column: span 4; min-height: 400px; }
.serv-m { grid-column: span 3; }
.serv-p { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .serv:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(64,48,32,0.08), var(--e3); }
  .serv:hover .serv-foto { transform: scale(1.07); }
}

/* ============================================================
   02 · EL CICLO — el tambor, anclado al scroll
   ============================================================ */
.ciclo { position: relative; height: 560vh; }
.ciclo-fija {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.ciclo-caja {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.ciclo-titulo { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.ciclo-desc { margin: 18px 0 0; min-height: 5.6em; }
/* El texto de cada etapa entra y sale; no salta de golpe */
.ciclo-titulo, .ciclo-desc, .ciclo-chip {
  transition: opacity 340ms var(--salida), transform 340ms var(--salida), filter 340ms var(--salida);
}
.ciclo-fija.cambiando .ciclo-titulo,
.ciclo-fija.cambiando .ciclo-desc,
.ciclo-fija.cambiando .ciclo-chip { opacity: 0; transform: translateY(-12px); filter: blur(5px); }
.ciclo-meta { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.ciclo-chip {
  padding: 7px 15px; border-radius: 99px;
  background: rgba(16,52,122,0.09);
  box-shadow: inset 0 0 0 1px rgba(16,52,122,0.16);
  font-size: 0.8rem; font-weight: 680; color: var(--azul);
}
.ciclo-cuenta { font-family: var(--mono); font-size: 0.86rem; color: var(--tinta-3); }
.ciclo-cuenta b { font-size: 1.5rem; font-weight: 700; color: var(--tinta); }
.ciclo-cuenta i { font-style: normal; }
.ciclo-ayuda {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}

/* El tambor */
.tambor {
  position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto;
}
/* la puerta de vidrio, con la foto de la etapa dentro */
.tambor-vidrio {
  position: absolute; inset: 14%;
  border-radius: 50%; overflow: hidden;
  background: var(--crema-2);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,0.5),
    inset 0 18px 40px rgba(255,255,255,0.35),
    inset 0 -18px 44px rgba(16,52,122,0.22),
    0 30px 70px -26px rgba(16,52,122,0.5);
}
.tambor-foto {
  position: absolute; inset: 0;
  background: var(--crema-2) center/cover no-repeat;
  transition: opacity 380ms var(--salida), transform 1400ms var(--salida);
}
.tambor-foto.saliendo { opacity: 0; transform: scale(1.06); }
/* el aro con las seis etapas, que gira con el scroll */
.tambor-aro { position: absolute; inset: 0; will-change: transform; }
.aro-etapa {
  position: absolute; left: 50%; top: 50%;
  width: max-content;
  transform-origin: 0 0;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-3);
  display: flex; align-items: center; gap: 8px;
  transition: color 340ms var(--salida);
}
.aro-etapa::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: rgba(16,52,122,0.22);
  transition: background 340ms var(--salida), box-shadow 340ms var(--salida), transform 340ms var(--salida);
}
.aro-etapa.hecha::before { background: var(--azul); }
.aro-etapa.activa { color: var(--azul); font-weight: 700; }
.aro-etapa.activa::before { background: var(--turquesa); box-shadow: 0 0 0 5px rgba(16,52,122,0.2); transform: scale(1.3); }
/* arco de avance */
.tambor-avance { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tambor-avance circle { fill: none; stroke-width: 2.5; }
.ta-pista { stroke: rgba(16,52,122,0.12); }
.ta-arco {
  stroke: var(--turquesa); stroke-linecap: round;
  stroke-dasharray: 590.6; stroke-dashoffset: 590.6;
  transition: stroke-dashoffset 200ms linear;
}

/* En teléfono el aro no cabe: las etapas van en lista debajo */
.ciclo-lista { display: none; list-style: none; margin: 22px 0 0; padding: 0; gap: 2px; }
.ciclo-lista li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 4px; font-size: 0.94rem; color: var(--tinta-3);
  border-top: 1px solid rgba(120,110,95,0.18);
}
.ciclo-lista li::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: rgba(16,52,122,0.22);
}
.ciclo-lista li.activa { color: var(--azul); font-weight: 700; }
.ciclo-lista li.activa::before { background: var(--turquesa); box-shadow: 0 0 0 4px rgba(16,52,122,0.18); }
.ciclo-lista li.hecha::before { background: var(--azul); }

/* ---------- 03 · En vivo ---------- */
.envivo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(30px, 4vw, 60px); align-items: center; }
.lista-viva { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 2px; }
.lista-viva li {
  padding: 16px 6px; font-size: 1rem; color: var(--tinta-2);
  border-top: 1px solid rgba(120,110,95,0.2);
  transition: padding-left 340ms var(--salida), background 340ms;
}
.lista-viva li:hover { padding-left: 15px; background: linear-gradient(90deg, rgba(231,235,246,0.8), transparent); }
.lista-viva b { color: var(--tinta); display: block; font-weight: 700; margin-bottom: 2px; }

.demo-marco {
  padding: 10px;
  border-radius: 34px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 1px rgba(64,48,32,0.08), var(--e3);
}
.demo-pantalla {
  border-radius: 26px;
  background: var(--papel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(64,48,32,0.06);
  padding: 20px;
  display: grid; gap: 16px;
}
.demo-cab { display: flex; align-items: center; gap: 11px; }
.demo-cab img { border-radius: 9px; }
.demo-quien b { display: block; font-size: 1rem; font-weight: 740; letter-spacing: -0.02em; line-height: 1.2; }
.demo-quien small { color: var(--tinta-3); font-size: 0.78rem; }
.demo-vivo {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px; background: var(--azul-suave);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquesa-tx);
}
.demo-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.demo-paso {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 14px;
  transition: background 480ms var(--salida);
}
.demo-paso .p-marca {
  width: 22px; height: 22px; flex: none; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--crema-2);
  box-shadow: inset 0 0 0 1.5px var(--arena);
  font-size: 0.66rem; color: var(--tinta-3);
  transition: background 480ms var(--salida), box-shadow 480ms var(--salida), color 480ms;
}
.demo-paso .p-nom { font-size: 0.94rem; font-weight: 600; color: var(--tinta-3); transition: color 480ms; }
.demo-paso .p-hora { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-3); opacity: 0; transition: opacity 480ms; }
.demo-paso.hecho .p-marca { background: var(--azul); box-shadow: none; color: #fff; }
.demo-paso.hecho .p-nom { color: var(--tinta); }
.demo-paso.hecho .p-hora { opacity: 1; }
.demo-paso.activo { background: var(--azul-suave); }
.demo-paso.activo .p-marca { background: var(--turquesa); box-shadow: 0 0 0 4px rgba(16,52,122,0.18); color: var(--azul-bajo); }
.demo-paso.activo .p-nom { color: var(--azul); font-weight: 720; }
.demo-paso.activo .p-hora { opacity: 1; color: var(--turquesa-tx); }

.demo-wa {
  border-radius: 18px 18px 18px 6px;
  background: #E4F6EC;
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(27,141,94,0.14);
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity 620ms var(--salida), transform 620ms var(--salida);
}
.demo-wa.puesto { opacity: 1; transform: none; }
.demo-wa p { margin: 0 0 5px; font-size: 0.94rem; line-height: 1.45; color: #123B2B; }
.demo-wa span { font-family: var(--mono); font-size: 0.66rem; color: #3E7B62; }

/* ---------- Bloques navy ---------- */
.navy {
  isolation: isolate;
  background: var(--azul);
  color: #fff;
  overflow: hidden;
  border-radius: clamp(28px, 3vw, 44px);
  width: min(100% - 44px, 1560px);
  margin-inline: auto;
}
.navy-foto {
  position: absolute; inset: 0; z-index: 0;
  background: var(--f-maquinas) center/cover no-repeat;
  opacity: 0.42; filter: saturate(0.72) contrast(1.04);
}
.cierre-foto { background-image: var(--f-fundas); }
.navy::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(16,52,122,0.94) 16%, rgba(16,52,122,0.54) 62%, rgba(16,52,122,0.26) 100%);
}
.navy .caja { position: relative; z-index: 2; }
.navy h2 { color: #fff; }
/* 7 puntos + 1 tarjeta de contacto = 8 celdas: dos filas llenas de 4 */
.puntos-red { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.punto {
  padding: 20px; border-radius: 20px;
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  display: grid; gap: 5px;
  transition: background 340ms, transform 340ms var(--salida);
}
.punto:hover { background: rgba(255,255,255,0.15); transform: translateY(-4px); }
.punto b { font-size: 1.04rem; font-weight: 720; letter-spacing: -0.02em; }
.punto small { color: rgba(255,255,255,0.72); font-size: 0.8rem; }
.punto .p-dir { color: rgba(255,255,255,0.8); font-size: 0.86rem; }
.punto-cta { background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42); align-content: center; gap: 7px; }
.punto-cta:hover { background: rgba(255,255,255,0.24); }
.punto-cta b { color: #FCFCFC; }
.punto-cta span { font-size: 0.86rem; color: rgba(255,255,255,0.82); }

/* ---------- Comparativa ---------- */
.comparativa { border-radius: 24px; background: var(--papel); box-shadow: 0 0 0 1px rgba(120,110,95,0.14), var(--e1); overflow: hidden; }
.comp-cab, .comp-fila {
  display: grid; grid-template-columns: minmax(130px, 0.62fr) 1.1fr 1.1fr;
  gap: 24px; padding: 18px 28px;
}
.comp-cab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; border-bottom: 1px solid rgba(120,110,95,0.18); padding-block: 15px; }
.comp-cab .c2 { color: var(--tinta-3); } .comp-cab .c3 { color: var(--turquesa-tx); }
.comp-fila { border-bottom: 1px solid rgba(120,110,95,0.1); font-size: 0.94rem; transition: background 260ms; }
.comp-fila:last-child { border-bottom: 0; }
.comp-fila:hover { background: var(--azul-suave); }
.comp-tema { font-weight: 740; letter-spacing: -0.02em; font-size: 1rem; }
.comp-viejo { color: var(--tinta-3); }
.comp-viejo::before { content: "✕ "; color: var(--rojo); }
.comp-nuevo { color: var(--tinta-2); }
.comp-nuevo::before { content: "✓ "; color: var(--verde); font-weight: 800; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 2px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(120,110,95,0.14); }
.pregunta { background: var(--papel); }
.pregunta summary {
  list-style: none; cursor: pointer;
  padding: 22px 26px;
  font-weight: 700; font-size: 1.04rem; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 18px;
  transition: background 260ms;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { background: var(--crema-2); }
.pregunta summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 1.4rem; color: var(--turquesa-tx); transition: transform 340ms var(--salida); }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta-cuerpo { padding: 0 26px 24px; color: var(--tinta-2); max-width: 72ch; }

/* ---------- El sistema ---------- */
.software-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
.software-texto .acciones { margin-top: 30px; }
.software-marco {
  border-radius: 24px; overflow: hidden;
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), var(--e3);
}
.soft-barra { display: flex; gap: 6px; padding: 13px 16px; border-bottom: 1px solid var(--crema-2); }
.soft-barra span { width: 9px; height: 9px; border-radius: 99px; background: var(--arena-2); }
.soft-cuerpo { padding: 16px; display: grid; gap: 8px; }
.soft-fila { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 13px; background: var(--crema); font-size: 0.88rem; color: var(--tinta); }
.soft-fila b { flex: 1; font-weight: 640; }
.soft-fila .num { font-size: 0.82rem; color: var(--tinta-2); }
.sem { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.sem.verde { background: var(--verde); box-shadow: 0 0 0 3px rgba(27,141,94,0.14); }
.sem.ambar { background: #C48A22; box-shadow: 0 0 0 3px rgba(196,138,34,0.14); }
.sem.rojo  { background: var(--rojo); box-shadow: 0 0 0 3px rgba(184,64,47,0.14); }

/* ---------- Cierre y pie ---------- */
.cierre-sec { text-align: center; }
.cierre-nota { margin: 26px 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
footer { padding: 46px 0 56px; }
.pie { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: var(--tinta-3); font-size: 0.9rem; }
.pie-nav { display: flex; gap: 18px; margin-left: auto; font-weight: 600; color: var(--tinta-2); }
.pie-nav a:hover { color: var(--azul); }
.pie-fin { flex-basis: 100%; font-size: 0.8rem; }

/* ============================================================
   ADAPTACIÓN
   ============================================================ */

@media (max-width: 1120px) {
  .portada-caja { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .cascada { height: 430px; }
  .envivo-grid, .software-grid, .ciclo-caja { grid-template-columns: minmax(0, 1fr); }
  .ciclo-caja { gap: 26px; }
  .tambor { width: min(72%, 360px); }
  .servicios { grid-template-columns: repeat(4, 1fr); }
  .serv-g { grid-column: span 4; }
  .serv-m, .serv-p { grid-column: span 2; }
  .puntos-red { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .caja { width: min(100% - 32px, var(--ancho)); }
  .aguja { display: none; }

  /* .cap viene después en este bloque y tiene la misma especificidad:
     sin el doble selector le pisaba el respiro que necesita la barra. */
  .cap.portada { min-height: auto; padding: 118px 0 40px; }
  h1 { font-size: clamp(2.35rem, 10.4vw, 3rem); }
  h2 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .cap { padding: 60px 0; }
  .panel { padding: 20px 16px; border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(120,110,95,0.13), var(--e2); }
  .nav { inset: 10px 0 auto 0; padding-inline: 12px; }
  .nav-caja { height: 56px; padding: 0 8px 0 14px; gap: 10px; }
  .nav-sitio, .nav-cta { display: none; }
  .marca { margin-right: auto; }

  /* La cascada se vuelve tira deslizable: apilar en profundidad no
     cabe en 375 px, y el rAF por scroll se congela con la inercia de iOS */
  .cascada {
    height: auto; display: flex; gap: 14px;
    overflow-x: auto; width: 100%;
    margin-inline: -16px; padding: 10px 16px 24px;
    scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cascada::-webkit-scrollbar { display: none; }
  .fl {
    position: relative; inset: auto;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    flex: none; rotate: none !important;
    scroll-snap-align: start;
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  .fl-foto { width: 216px; aspect-ratio: 3/4; }
  .fl-ficha { width: 232px; align-content: center; }

  .lema { padding: 22px 0 4px; }
  .lema-pista { animation: lema-corre 24s linear infinite; }
  @keyframes lema-corre { to { transform: translateX(-50%); } }

  .cap-cab { grid-template-columns: 1fr; gap: 8px; margin-bottom: 26px; }
  .cap-num { font-size: 2.8rem; }
  .parte-scroll .palabra { filter: none; transform: translateY(0.38em); transition-duration: 560ms; transition-delay: calc(var(--i) * 28ms); }

  .servicios { grid-template-columns: 1fr; gap: 14px; }
  .serv, .serv-g, .serv-m, .serv-p { grid-column: span 1; min-height: 260px; }

  /* El ciclo: sin anclaje ni aro. El tambor arriba, las etapas en lista */
  .ciclo { height: auto; padding: 60px 0; }
  .ciclo-fija { position: static; height: auto; overflow: visible; }
  .ciclo-caja { gap: 24px; }
  .tambor { width: min(72%, 280px); order: -1; }
  .tambor-aro { display: none; }
  .ciclo-desc { min-height: 0; }
  .ciclo-ayuda { display: none; }
  .ciclo-lista { display: grid; }
  .ciclo-titulo, .ciclo-desc, .ciclo-chip { transition: none; }
  .ciclo-fija.cambiando .ciclo-titulo,
  .ciclo-fija.cambiando .ciclo-desc,
  .ciclo-fija.cambiando .ciclo-chip { opacity: 1; transform: none; filter: none; }

  .navy { border-radius: 24px; width: min(100% - 24px, 1560px); }
  .demo-marco { padding: 7px; border-radius: 26px; }
  .demo-pantalla { padding: 16px; border-radius: 20px; }
  .puntos-red { grid-template-columns: 1fr 1fr; }
  .comp-cab { display: none; }
  .comp-fila { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .acciones .btn { width: 100%; }
  .pie-nav { margin-left: 0; gap: 6px; flex-wrap: wrap; }
  .pie-nav a { padding: 11px 14px; border-radius: 999px; background: var(--papel); box-shadow: 0 0 0 1px rgba(120,110,95,0.16); }
  .grano { display: none; }

  .velo-menu { clip-path: circle(0% at calc(100% - 44px) 38px); }
  .velo-menu.abierto { clip-path: circle(160% at calc(100% - 44px) 38px); }
  .velo-lista a { font-size: clamp(1.7rem, 5.2vh, 2.5rem); }
  .velo-pie { gap: 14px; }
  .velo-soft { margin-left: 0; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .parte, .titulo-hero .linea > span, .fl { opacity: 1 !important; transform: none !important; }
  .rev, .parte-scroll .palabra { opacity: 1 !important; transform: none !important; filter: none !important; }
  .telon { display: none; }
  .ciclo { height: auto; }
  .ciclo-fija { position: static; height: auto; }
  .ciclo-lista { display: grid; }
  .tambor-aro { display: none; }
  .ciclo-fija.cambiando .ciclo-titulo,
  .ciclo-fija.cambiando .ciclo-desc,
  .ciclo-fija.cambiando .ciclo-chip { opacity: 1 !important; transform: none !important; filter: none !important; }
  .demo-wa { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HOPE empresa: navegación entre líneas y sus tarjetas
   ============================================================ */

.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 560; color: var(--tinta-2);
  transition: background 240ms var(--salida), color 240ms;
}
.nav-links a:hover { background: rgba(23,26,40,0.06); color: var(--tinta); }
.nav-links a[aria-current] { background: var(--azul-suave); color: var(--azul); font-weight: 660; }

/* La prueba: la operación propia */
.prueba { display: grid; gap: 14px; }
.prueba-foto {
  border-radius: 24px; min-height: 230px;
  background: var(--f-planta) center/cover no-repeat;
  box-shadow: 0 0 0 1px rgba(64,48,32,0.07), var(--e2);
}
.prueba-cifras { display: grid; gap: 2px; }
.prueba-cifra {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid rgba(120,110,95,0.2);
}
.prueba-cifra b {
  font-size: 2.1rem; font-weight: 780; font-stretch: 108%;
  letter-spacing: -0.04em; color: var(--azul); min-width: 2.2ch;
}
.prueba-cifra span { font-size: 0.94rem; font-weight: 620; display: grid; }
.prueba-cifra em { font-style: normal; font-weight: 440; color: var(--tinta-3); font-size: 0.86rem; }

@media (max-width: 1120px) {
  .lineas { grid-template-columns: 1fr; }
  .negocio { grid-template-rows: 220px auto; }
  .nav-links { display: none; }
}
@media (max-width: 680px) {
  .negocio { grid-template-rows: 170px auto; border-radius: 24px; }
  .negocio-cuerpo { padding: 20px 18px 22px; }
  .negocio h3 { font-size: 1.4rem; }
  .prueba-foto { min-height: 180px; }
}

/* ---------- Pasos numerados sobre navy ---------- */
.pasos-red { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.paso-num {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--sobre-oscuro);
}
.pasos-red .punto small { line-height: 1.5; }

/* ---------- Marca blanca: la misma pantalla, varias lavanderías ---------- */
.marcablanca {
  padding: 20px;
  border-radius: 26px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 1px rgba(64,48,32,0.08), var(--e2);
}
.mb-titulo {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 12px;
}
.mb-lista { display: grid; gap: 8px; }
.mb-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; border-radius: 16px;
  background: var(--papel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(64,48,32,0.06);
}
.mb-logo {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 760; letter-spacing: -0.02em;
}
.mb-nombre { flex: 1; font-weight: 680; letter-spacing: -0.02em; }
.mb-firma {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-3); opacity: 0.8;
}

@media (max-width: 1120px) { .pasos-red { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .pasos-red { grid-template-columns: 1fr; } }

/* ============================================================
   PORTADA CORPORATIVA
   ============================================================ */

/* ---------- Torre de divisiones en la portada ---------- */
.torre { height: clamp(400px, 42vw, 520px); }
.tarjeta-div {
  display: flex; align-items: center; gap: 14px;
  width: 74%; padding: 10px 18px 10px 10px;
  border-radius: 20px;
  background: rgba(255,253,251,0.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(120,110,95,0.12), var(--e2);
  border-left: 3px solid var(--acento);
}
.td-foto {
  width: 58px; height: 58px; flex: none; border-radius: 13px;
  background: var(--acento-luz) center/cover no-repeat;
}
.td-txt { display: grid; gap: 1px; }
.td-txt b { font-size: 1.02rem; font-weight: 740; letter-spacing: -0.025em; }
.td-txt i {
  font-style: normal; font-size: 0.78rem; color: var(--tinta-3);
}
.td-1 { left: 0;   top: 4%;  rotate: -2.5deg; animation-delay: -1s; }
.td-2 { right: 0;  top: 36%; rotate: 1.5deg;  animation-delay: -5s; }
.td-3 { left: 6%;  bottom: 3%; rotate: -1deg; animation-delay: -8.5s; }

/* ---------- Cifras de escala ---------- */
.cifras-sec { padding: clamp(50px, 6vw, 84px) 0; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cifra { display: grid; gap: 10px; padding: 24px 4px 0; border-top: 1.5px solid var(--arena); }
.cifra-n {
  font-weight: 780; font-stretch: 108%;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 0.86; letter-spacing: -0.05em;
  color: var(--azul);
}
.cifra-t { font-size: 0.96rem; font-weight: 640; display: grid; gap: 2px; }
.cifra-t em { font-style: normal; color: var(--tinta-3); font-weight: 440; font-size: 0.86rem; }

/* ---------- La cadena ---------- */
.cadena {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  position: relative;
}
/* El hilo que las une: se dibuja detrás de los puntos */
.cadena::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px;
  background: var(--azul);
  opacity: 0.28; border-radius: 2px;
}
.eslabon { display: grid; gap: 8px; position: relative; padding-top: 26px; }
.eslabon-punto {
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--acento);
  box-shadow: 0 0 0 5px var(--lienzo), 0 0 0 6px color-mix(in srgb, var(--acento) 28%, transparent);
}
.eslabon b { font-size: 1.12rem; font-weight: 740; letter-spacing: -0.025em; }
.eslabon span { font-size: 0.92rem; color: var(--tinta-2); line-height: 1.55; }

/* ---------- La prueba, a ancho completo ---------- */
.nave {
  position: relative; isolation: isolate;
  border-radius: clamp(28px, 3vw, 44px);
  width: min(100% - 44px, 1560px); margin-inline: auto;
  overflow: hidden;
  color: #fff;
  padding: clamp(80px, 10vw, 150px) 0;
  background: var(--hondo);
}
.nave-foto {
  position: absolute; inset: 0; z-index: 0;
  background: var(--f-nave) center/cover no-repeat, var(--f-maquinas) center/cover no-repeat;
  opacity: 0.5; filter: saturate(0.7) contrast(1.05);
}
.nave::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,26,56,0.94) 12%, rgba(11,26,56,0.62) 58%, rgba(11,26,56,0.3) 100%);
}
.nave-caja { position: relative; z-index: 2; display: grid; gap: clamp(34px, 5vw, 70px); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
.nave h2 { color: #fff; }
.nave-cifras { display: grid; gap: 2px; }
.nave-cifra {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 4px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.nave-cifra b {
  font-size: 2.4rem; font-weight: 780; font-stretch: 108%;
  letter-spacing: -0.04em; color: #FCFCFC; min-width: 4ch;
}
.nave-cifra span { font-size: 0.98rem; color: rgba(255,255,255,0.82); }

/* ---------- Mosaico de la operación ---------- */
.mosaico {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px;
}
.mos { border-radius: 20px; background: var(--lienzo-2) center/cover no-repeat; box-shadow: 0 0 0 1px rgba(64,48,32,0.06), var(--e1); }
.mos-a { background-image: var(--f-trabajo); aspect-ratio: 1; }
.mos-b { background-image: var(--f-panel);   aspect-ratio: 1; margin-top: 22px; }
.mos-c { background-image: var(--f-textil);  aspect-ratio: 1; margin-top: -8px; }
.mos-d { background-image: var(--f-planta);  aspect-ratio: 1; margin-top: 14px; }

/* ---------- Tres puertas de contacto ---------- */
.cierre-caja { max-width: 900px; margin-inline: auto; }
.puertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.puerta {
  display: grid; gap: 6px; align-content: start;
  padding: 24px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border-top: 3px solid var(--acento);
  transition: background 320ms, transform 320ms var(--salida);
}
.puerta:hover { background: rgba(255,255,255,0.17); transform: translateY(-4px); }
.puerta b { font-size: 1.06rem; font-weight: 720; letter-spacing: -0.025em; }
.puerta span { font-size: 0.9rem; color: rgba(255,255,255,0.72); }
.puerta i {
  font-style: normal; margin-top: 10px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sobre-oscuro);
}

@media (max-width: 1120px) {
  .cifras { grid-template-columns: 1fr 1fr; }
  .division { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .division:nth-child(even) .division-visual { order: 0; }
  .division-apoyo { width: 34%; right: 2%; bottom: -10%; }
  .division:nth-child(even) .division-apoyo { left: auto; right: 2%; }
  .cadena { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cadena::before { display: none; }
  .nave-caja { grid-template-columns: minmax(0, 1fr); }
  .puertas { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .torre { height: auto; }
  .tarjeta-div { width: 268px; }
  .cifras { gap: 16px; }
  .cifras-sec { padding: 40px 0; }
  .divisiones { gap: 54px; }
  .division-foto { border-radius: 22px; }
  .division-apoyo { width: 38%; border-radius: 16px; box-shadow: 0 0 0 4px var(--lienzo), var(--e1); }
  .division-sello { left: 14px; top: 14px; width: 38px; height: 38px; font-size: 0.72rem; }
  .cadena { grid-template-columns: 1fr; gap: 22px; }
  .nave { border-radius: 24px; width: min(100% - 24px, 1560px); padding: 60px 0; }
  .nave-cifra b { font-size: 1.9rem; }
  .mosaico { gap: 8px; }
  .mos-b, .mos-c, .mos-d { margin-top: 0; }
}

/* ---------- Portada partida: en pantallas estrechas se apila ---------- */
@media (max-width: 1120px) {
  .portada { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .portada-izq { padding: 128px 24px 56px; }
  .portada-texto { max-width: none; }
  .portada-der { min-height: 460px; }
}
@media (max-width: 680px) {
  .portada-izq { padding: 108px 16px 44px; }
  .portada-der { min-height: 380px; }
  .indice { padding: 18px 16px; }
  .indice b { font-size: 1.06rem; }
}

/* ============================================================
   VIDEO DE FONDO
   El póster va como fondo del contenedor, así que mientras el
   video carga —o si nunca carga— nunca hay un hueco negro.
   ============================================================ */
[data-video] { background-position: center; background-size: cover; background-repeat: no-repeat; }
[data-video] > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Entra cuando ya tiene imagen: sin esto se ve el salto del póster al video */
  opacity: 0; transition: opacity 700ms var(--salida);
}
[data-video] > video:not([data-esperando]) { opacity: 1; }

/* ============================================================
   LA SECUENCIA DE DIVISIONES
   La sección se ancla y el scroll avanza la historia en vez de
   bajar la página. Tres bloques de texto apilados son una lista;
   esto es una presentación.
   ============================================================ */
.secuencia { position: relative; height: 320vh; }
.secuencia-fija {
  position: sticky; top: 0; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* La barra flota fija arriba: sin este aire, el contenido anclado
     le queda debajo y no se lee. */
  padding-top: 88px;
  overflow: hidden;
  /* el acento de la división vigente tiñe toda la sección */
  transition: background 700ms var(--salida);
}
.secuencia-caja {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px); align-items: center;
}

/* El medio: las tres capas apiladas, se funden entre sí */
.sec-media {
  position: relative; border-radius: 30px; overflow: hidden;
  aspect-ratio: 4/5; max-height: 74vh;
  background: var(--hondo);
  box-shadow: 0 0 0 1px rgba(64,48,32,0.08), var(--e3);
}
.sec-capa {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 900ms var(--salida), transform 1600ms var(--salida);
}
.sec-capa.puesta { opacity: 1; transform: scale(1); }

.sec-encabezado { padding-bottom: 0; }


/* El cuerpo cambia de contenido, no de sitio */
.sec-cuerpo { min-height: 22rem; transition: opacity 320ms var(--salida), transform 320ms var(--salida), filter 320ms var(--salida); }
.sec-cuerpo.cambiando { opacity: 0; transform: translateY(-14px); filter: blur(5px); }

.sec-tag {
  display: inline-flex; margin: 0 0 12px; padding: 6px 14px;
  border-radius: 999px;
  background: var(--acento-luz); color: var(--acento);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  transition: background 500ms var(--salida), color 500ms var(--salida);
}
.sec-cuerpo h3 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 780; font-stretch: 108%; letter-spacing: -0.035em; line-height: 1.02; }
.sec-para { margin: 8px 0 0; font-size: 1rem; font-weight: 640; color: var(--acento); transition: color 500ms var(--salida); }
.sec-d { margin: 16px 0 0; color: var(--tinta-2); font-size: 1.01rem; line-height: 1.6; max-width: 46ch; }
.sec-puntos { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 2px; }
.sec-puntos li { display: grid; gap: 1px; padding: 12px 4px; border-top: 1px solid rgba(120,110,95,0.2); }
.sec-puntos b { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.015em; }
.sec-puntos span { font-size: 0.88rem; color: var(--tinta-3); }
.sec-btn { background: var(--acento); transition: background 500ms var(--salida), transform 260ms var(--salida); }
.sec-btn:hover { background: var(--acento); filter: brightness(1.12); }

/* El riel: dice cuántas van y cuántas faltan */
.sec-riel { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 22px; }
.sec-riel li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-3);
  transition: color 420ms var(--salida);
}
.sec-riel li i {
  width: 26px; height: 3px; border-radius: 99px; display: block;
  background: rgba(120,110,95,0.28);
  transition: background 420ms var(--salida), width 500ms var(--salida);
}
.sec-riel li.hecho i { background: var(--tinta-3); }
.sec-riel li.activo { color: var(--acento); font-weight: 700; }
.sec-riel li.activo i { background: var(--acento); width: 46px; }

.sec-ayuda {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}

/* ============================================================
   TITULARES CON MÁSCARA
   Aparecer con opacidad es lo que hace todo el mundo. Aquí cada
   palabra sube desde detrás de un borde invisible: se lee como
   impresión, no como una transparencia.
   ============================================================ */
.parte-scroll .palabra {
  display: inline-block;
  clip-path: inset(0 0 108% 0);
  transform: translateY(0.32em);
  opacity: 1; filter: none;
  transition: clip-path 820ms var(--salida), transform 820ms var(--salida);
  transition-delay: calc(var(--i) * 46ms);
}
.parte-scroll.visto .palabra { clip-path: inset(-18% 0 -18% 0); transform: none; }

@media (max-width: 1120px) {
  .secuencia { height: auto; }
  .secuencia-fija { position: static; min-height: 0; padding: 60px 0; }
  .secuencia-caja { grid-template-columns: minmax(0, 1fr); }
  .sec-media { aspect-ratio: 16/10; max-height: none; }
  .sec-cuerpo { min-height: 0; }
}
@media (max-width: 680px) {
  .sec-media { border-radius: 22px; aspect-ratio: 4/3; }
  .sec-cab { grid-template-columns: 1fr; gap: 8px; }
  .sec-riel { flex-wrap: wrap; gap: 12px 18px; }
  .parte-scroll .palabra { transition-duration: 600ms; transition-delay: calc(var(--i) * 30ms); }
}

/* La secuencia desarmada en teléfono: tres bloques, uno tras otro */
.secuencia-lista { height: auto; }
.div-movil { display: grid; gap: 10px; padding: 34px 0 6px; }
.div-movil + .div-movil { border-top: 1px solid rgba(120,110,95,0.2); margin-top: 20px; }
.div-movil-media {
  border-radius: 20px; aspect-ratio: 4/3; margin-bottom: 8px;
  background: var(--acento-luz) center/cover no-repeat;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(64,48,32,0.07), var(--e1);
}
.div-movil h3 { margin: 0; font-size: 1.5rem; font-weight: 780; letter-spacing: -0.03em; }
.div-movil .sec-btn { margin-top: 12px; width: 100%; }

/* Quién manda según el ancho: arriba la secuencia anclada, abajo la
   lista. Las dos existen siempre en el DOM; esto solo decide cuál se
   ve, así que un cambio de tamaño nunca deja la sección vacía. */
.div-movil { display: none; }
@media (max-width: 1120px) {
  .sec-media, .sec-cuerpo, .sec-riel, .sec-ayuda { display: none; }
  .div-movil { display: grid; }
  .secuencia-caja { display: block; }
}

/* La cadena sobre agua en movimiento, muy atenuada: el fondo no puede
   competir con un texto que hay que leer. */
.cadena-sec { position: relative; isolation: isolate; overflow: hidden; }
.cadena-fondo {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.16;
}
.cadena-sec > .caja { position: relative; z-index: 1; }