/* =========================================================
   Sinverso — landing
   Todas las medidas salen del mockup (lienzo de 1440 px).
   --u = 1px en pantallas de 1440 o más; por debajo escala en
   proporción para conservar el diseño exacto. En móvil (<760px)
   las secciones se reorganizan en una sola columna.
   ========================================================= */

/* Fuentes recortadas a lo que usa la página (diseno/trabajo/rendimiento/subset3.mjs): español + puntuación, ejes variables completos */
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Urbanist alojada en el sitio (antes Google Fonts, que bloqueaba la primera pintura) */
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/urbanist.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --u: min(1px, calc(100vw / 1440));

  --negro: #161616;
  --gris-card: #353535;
  --blanco: #F2F2F2;
  --azul: #1641C4;
  --naranja: #FD5617;

  /* Títulos: Urbanist mientras llega la licencia web de ITC Avant Garde Gothic Pro (entonces: @font-face propio
     y ponerla primera aquí). Sin fuentes del sistema por nombre: buscarlas en cada carga costaba ~100 ms de CPU. */
  --f-titulo: 'Urbanist', sans-serif;
  --f-texto: 'Inter', sans-serif;
  --w-xl: 100;   /* XLt  */
  --w-bk: 400;   /* Book */
  --w-md: 600;   /* Md   */
  --w-dm: 600;   /* Demi */

  /* Curva de entrada (desaceleración fuerte) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --w-bd: 900;   /* Bold: Urbanist necesita 900 para igualar la cantidad de tinta de AG Bold (medido) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font-family: var(--f-texto); font-size: calc(18 * var(--u)); line-height: 1.25;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Grano de película sobre todo el sitio, como en el mockup */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: italic; font-weight: 700; }
mark { background: none; color: inherit; }

.lienzo { position: relative; width: calc(1440 * var(--u)); margin: 0 auto; }
.deco { position: absolute; pointer-events: none; user-select: none; }

/* Pesos tipográficos (títulos) */
.xl { font-weight: var(--w-xl); }
.bk { font-weight: var(--w-bk); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  background: var(--blanco); color: #000; border-radius: 999px;
  font-family: var(--f-texto); font-weight: 400;
}
.flecha { width: auto; }
.flecha--der { transform: scaleX(-1); }

/* =================== HEADER =================== */
.header { background: var(--negro); height: calc(200 * var(--u)); position: relative; z-index: 20; }
.header__in { height: 100%; display: flex; align-items: center; padding: 0 calc(64 * var(--u)); }
.header__logo img { width: calc(192 * var(--u)); }
.header__nav { display: flex; gap: calc(50 * var(--u)); margin-left: calc(174 * var(--u)); font-size: calc(18 * var(--u)); color: #F1F1F1; }
.boton--header { margin-left: auto; width: calc(185 * var(--u)); height: calc(54 * var(--u)); font-size: calc(20.1 * var(--u)); }
.boton--header .flecha { height: calc(15 * var(--u)); }
.header__hamburguesa { display: none; }

/* =================== BANNER =================== */
.banner { height: calc(691 * var(--u)); background: #1a1a1a; overflow: hidden; }
/* El video (2.45:1) llena el banner recortando los bordes; su contenido va centrado. */
.banner__video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Sin el botón de "play" que iOS/Android ponen encima cuando bloquean la reproducción automática */
.banner__video::-webkit-media-controls,
.banner__video::-webkit-media-controls-start-playback-button,
.banner__video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* ---- Plan B del banner (?banner=b): animación en código, ciclo de 12 s ----
   0–4 s caos de palabras que se juntan · 4–6 s dos puntos (azul/naranja) trazan el rumbo ·
   6–8.5 s aparece el logo de izquierda a derecha · 8.8–12 s el lema "Solo crecimiento con dirección". */
.bb { display: none; }
.banner-b .banner__video { display: none; }
.banner-b .bb { display: block; position: relative; height: 100%; background: var(--negro); overflow: hidden; --ciclo: 12s; }
.bb > *, .bb__p { position: absolute; left: 50%; top: 50%; }

.bb__fondo { width: calc(1500 * var(--u)); max-width: none; opacity: .045; transform: translate(-50%, -50%); animation: bb-fondo var(--ciclo) linear infinite; }
@keyframes bb-fondo {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-53%, -50%) scale(1.06); }
}

.bb__palabras { inset: 0; left: 0; top: 0; }
.bb__p {
  font-family: var(--f-texto); font-weight: 700; font-size: calc(30 * var(--u)); letter-spacing: .02em; white-space: nowrap;
  color: rgba(242, 242, 242, .72); text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 255, 255, .25);
  opacity: 0; animation: bb-palabra var(--ciclo) var(--d) infinite;
}
.bb__p--chica { font-size: calc(20 * var(--u)); color: rgba(242, 242, 242, .5); }
.bb__p--centro { font-size: calc(58 * var(--u)); color: #fff; text-shadow: 0 0 calc(26 * var(--u)) rgba(255, 255, 255, .35); }
@keyframes bb-palabra {
  0% { opacity: 0; filter: blur(8px); transform: translate(-50%, -50%) translate(calc(var(--x) * var(--ex, 1) * var(--u)), calc(var(--y) * var(--u))) scale(.9); animation-timing-function: var(--ease-out); }
  7% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) translate(calc(var(--x) * var(--ex, 1) * var(--u)), calc(var(--y) * var(--u))) scale(1); }
  25% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) translate(calc((var(--x) + var(--dx)) * var(--ex, 1) * var(--u)), calc((var(--y) + var(--dy)) * var(--u))) scale(1); animation-timing-function: var(--ease-in-out); }
  32%, 100% { opacity: 0; filter: blur(4px); transform: translate(-50%, -50%) scale(.15); }
}

.bb__rumbo { left: 0; top: 50%; width: 100%; height: 0; }
.bb__punto, .bb__linea { position: absolute; left: 50%; top: 0; }
.bb__punto { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(-13 * var(--u)) 0 0 calc(-13 * var(--u)); border-radius: calc(6 * var(--u)); opacity: 0; }
.bb__punto--azul { background: var(--azul); box-shadow: 0 0 calc(30 * var(--u)) rgba(22, 65, 196, .7); animation: bb-punto-izq var(--ciclo) infinite; }
.bb__punto--naranja { background: var(--naranja); box-shadow: 0 0 calc(30 * var(--u)) rgba(253, 86, 23, .7); animation: bb-punto-der var(--ciclo) infinite; }
.bb__linea {
  width: calc(600 * var(--u)); height: calc(3 * var(--u)); margin: calc(-1.5 * var(--u)) 0 0 calc(-300 * var(--u));
  background: linear-gradient(90deg, var(--azul), var(--naranja)); transform: scaleX(0); opacity: 0;
  animation: bb-linea var(--ciclo) infinite;
}
@keyframes bb-punto-izq {
  0%, 32% { opacity: 0; transform: scale(0); }
  35.8% { opacity: 1; transform: scale(1); animation-timing-function: var(--ease-in-out); }
  44.2%, 48.3% { opacity: 1; transform: translateX(calc(-300 * var(--u))) scale(1); }
  51.7%, 100% { opacity: 0; transform: translateX(calc(-300 * var(--u))) scale(.4); }
}
@keyframes bb-punto-der {
  0%, 32% { opacity: 0; transform: scale(0); }
  35.8% { opacity: 1; transform: scale(1); animation-timing-function: var(--ease-in-out); }
  44.2%, 48.3% { opacity: 1; transform: translateX(calc(300 * var(--u))) scale(1); }
  51.7%, 100% { opacity: 0; transform: translateX(calc(300 * var(--u))) scale(.4); }
}
@keyframes bb-linea {
  0%, 35.8% { opacity: 0; transform: scaleX(0); animation-timing-function: var(--ease-in-out); }
  36.5% { opacity: 1; }
  44.2%, 48.3% { opacity: 1; transform: scaleX(1); }
  51.7%, 100% { opacity: 0; transform: scaleX(1); }
}

.bb__logo { width: calc(420 * var(--u)); transform: translate(-50%, -50%); opacity: 0; animation: bb-logo var(--ciclo) infinite; }
@keyframes bb-logo {
  0%, 49.2% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(6px); transform: translate(-50%, -50%) scale(.96); animation-timing-function: var(--ease-out); }
  57.5% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); transform: translate(-50%, -50%) scale(1); }
  68.3% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); transform: translate(-50%, -50%) scale(1.02); }
  72.5%, 100% { opacity: 0; clip-path: inset(0 0 0 0); filter: blur(6px); transform: translate(-50%, -50%) scale(1.06); }
}

.bb__lema {
  margin: 0; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
  font-family: var(--f-texto); font-weight: 700; font-size: calc(64 * var(--u)); line-height: 1.15; color: var(--blanco);
}
.bb__lema > span { display: block; overflow: hidden; padding-bottom: calc(10 * var(--u)); }
.bb__lema > span > span { display: block; transform: translateY(140%); opacity: 0; animation: bb-lema var(--ciclo) infinite; }
.bb__lema > span + span > span { animation-delay: .15s; }
.bb__lema em { font-style: normal; position: relative; }
.bb__lema em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(-6 * var(--u)); height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u)); background: var(--naranja); transform: scaleX(0); transform-origin: left;
  animation: bb-subrayado var(--ciclo) infinite;
}
@keyframes bb-lema {
  0%, 72.5% { transform: translateY(140%); opacity: 0; }
  73.3% { transform: translateY(140%); opacity: 1; animation-timing-function: var(--ease-out); }
  79.2%, 94% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes bb-subrayado {
  0%, 80% { transform: scaleX(0); animation-timing-function: var(--ease-out); }
  85.5%, 94% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* Sin movimiento: solo el lema, fijo */
@media (prefers-reduced-motion: reduce) {
  .bb *, .bb *::after { animation: none !important; }
  .bb__palabras, .bb__rumbo, .bb__logo { display: none; }
  .bb__lema > span > span, .bb__lema em::after { transform: none; opacity: 1; }
}

/* =================== MANIFIESTO =================== */
.manifiesto {
  position: relative; overflow: hidden; min-height: calc(681 * var(--u));
  /* Viñeta medida en el mockup: centro #141414, luz en esquina sup. derecha e inf. izquierda (~#363636) */
  background:
    /* base más oscura que #141414 porque el grano del body suma ~8 de brillo */
    radial-gradient(ellipse calc(380 * var(--u)) calc(820 * var(--u)) at 100% 0%, #343434 0%, rgba(52,52,52,0) 100%),
    radial-gradient(ellipse calc(385 * var(--u)) calc(740 * var(--u)) at 0% 100%, #343434 0%, rgba(52,52,52,0) 100%),
    #0c0c0c;
  padding: calc(258 * var(--u)) 0 calc(200 * var(--u));
}
.manifiesto__deco { width: calc(447 * var(--u)); opacity: .9; }
.manifiesto__deco--der { left: calc(50% + 582 * var(--u)); top: calc(56 * var(--u)); }
.manifiesto__deco--izq { right: calc(50% + 579 * var(--u)); top: calc(347 * var(--u)); }
.manifiesto__texto { margin-left: calc(303 * var(--u)); font-family: var(--f-titulo); font-weight: var(--w-dm); }
.manifiesto__texto > span { display: block; }
.m1, .m2 { font-weight: var(--w-bd); font-size: calc(47 * var(--u)); line-height: calc(47 * var(--u)); letter-spacing: .01em; }
.m2 { color: rgba(242,242,242,.6); }
.m3 { font-size: calc(27.6 * var(--u)); line-height: calc(36 * var(--u)); }
.m3 .bk { font-weight: var(--w-bk); }
.m3 mark {
  display: inline-block; background: var(--blanco); color: var(--negro); font-weight: var(--w-bk);
  border-radius: calc(6 * var(--u)); padding: 0 calc(10 * var(--u)); margin-left: calc(-10 * var(--u)); line-height: calc(35 * var(--u));
}

/* =================== EL VERDADERO ENEMIGO =================== */
.enemigo { padding: calc(130 * var(--u)) 0 calc(156 * var(--u)); }
.enemigo__forma { position: absolute; left: calc(160 * var(--u)); top: calc(7 * var(--u)); width: calc(470 * var(--u)); transform: rotate(-55deg); }
/* Fragmentación: el icono en piezas sobre el mismo lienzo de 1100×950. En reposo coincide exacto con el mockup.
   Cada eslabón es un SVG (media luna fija + aro que se mece sobre la curva, animado con SMIL desde main.js);
   los cubos son copias de la imagen recortadas que van y vienen del centro. */
.frag { display: block; width: 100%; }
.frag + .frag { position: absolute; inset: 0; }
.frag--oscuro, .frag--cromo { height: auto; aspect-ratio: 1100 / 950; overflow: visible; }
.frag--cubo1  { clip-path: polygon(0% 0%, 42.73% 0%, 42.73% 27.89%, 26.36% 27.89%, 11.82% 34.74%, 0% 45.26%);
  transform-origin: 32% 13%; --dx: 5%; --dy: 7.5%; --r: 8deg; }
.frag--cubo2  { clip-path: polygon(67.27% 74.21%, 81.82% 70%, 100% 61.05%, 100% 100%, 61.82% 100%, 61.82% 80%);
  transform-origin: 77% 85%; --dx: -5%; --dy: -6.5%; --r: -8deg; }
.enemigo--visible .frag--cubo1, .enemigo--visible .frag--cubo2 { animation: frag-cubo 7s ease-in-out infinite; }
@keyframes frag-cubo {
  0%, 15%   { transform: none; }
  50%, 60%  { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  95%, 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .enemigo--visible .frag { animation: none; }
}
.enemigo__texto { margin-left: calc(668 * var(--u)); width: calc(545 * var(--u)); position: relative; }
.titulo-sub { font-family: var(--f-titulo); font-size: calc(32.8 * var(--u)); line-height: calc(33 * var(--u)); }
.enemigo__grande {
  display: block; font-weight: var(--w-bd); font-size: calc(55.4 * var(--u)); line-height: calc(54 * var(--u));
  width: calc(503 * var(--u)); border-bottom: 2px solid #fff; padding-bottom: calc(2 * var(--u));
}
.enemigo__p { margin-top: calc(10 * var(--u)); font-size: calc(20.6 * var(--u)); line-height: calc(22.9 * var(--u)); letter-spacing: .01em; width: calc(520 * var(--u)); }
.enemigo__caja {
  margin: calc(48 * var(--u)) 0 0 calc(-39 * var(--u)); width: calc(581 * var(--u)); min-height: calc(133 * var(--u));
  background: var(--gris-card); border: 1px solid rgba(255,255,255,.45); border-radius: calc(20 * var(--u));
  padding: calc(18 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u)) calc(38 * var(--u));
  font-size: calc(18.25 * var(--u)); line-height: calc(25.1 * var(--u)); letter-spacing: -.06em;
}

/* =================== ¿DÓNDE SE ESTÁN PERDIENDO? =================== */
.perdidas { position: relative; z-index: 3; padding: 0 calc(31 * var(--u)); }
.perdidas__card {
  max-width: calc(1378 * var(--u)); margin: 0 auto; min-height: calc(458 * var(--u));
  border-radius: calc(50 * var(--u)); color: var(--negro);
  /* textura con el mismo tamaño, espejo y desplazamiento que en el PDF: se ven las ondas grises */
  background: #fefefe url('../assets/img/textura-blanca-espejo.webp') calc(-84 * var(--u)) calc(-321 * var(--u)) / calc(2274 * var(--u)) calc(1084 * var(--u)) no-repeat;
  display: grid; grid-template-columns: calc(745 * var(--u)) 1fr; column-gap: calc(34 * var(--u)); align-items: center;
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(85 * var(--u)) 0 calc(80 * var(--u));
}
.perdidas__titulo { text-align: right; font-family: var(--f-titulo); }
.perdidas__titulo span { display: block; }
.perdidas__titulo .xl { font-size: calc(42.1 * var(--u)); line-height: calc(50 * var(--u)); }
.perdidas__titulo .bd { font-weight: var(--w-bd); font-size: calc(50.4 * var(--u)); line-height: calc(54 * var(--u)); }
.perdidas__lista { position: relative; padding-left: calc(15 * var(--u)); }
.perdidas__puntos { position: absolute; left: 0; top: calc(17 * var(--u)); height: calc(259 * var(--u)); width: auto; }
.perdidas__lista li { font-family: var(--f-titulo); font-weight: var(--w-md); font-size: calc(27.9 * var(--u)); line-height: calc(44.5 * var(--u)); letter-spacing: .045em; }
.perdidas__lista .perdidas__final { font-weight: var(--w-bd); margin-top: calc(26.5 * var(--u)); letter-spacing: .01em; }

/* =================== FOTO PIZARRA =================== */
.pizarra { position: relative; margin-top: calc(-243 * var(--u)); padding-bottom: calc(81 * var(--u)); }
.pizarra__foto { position: relative; height: calc(928 * var(--u)); border-radius: calc(40 * var(--u)); overflow: hidden; border: 1px solid rgba(255,255,255,.35); }
/* la foto arranca detrás de la tarjeta blanca: sus esquinas superiores asoman a los lados */
.pizarra__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: brightness(.82); }
.pizarra__textos { height: 100%; }

/* Flujo hacia el centro: el SVG replica el recorte de la foto (object-fit: cover, --foto-x = object-position x)
   para que cada destello caiga justo sobre su flecha. Flujo continuo: cada flecha lleva destellos de 30 px cada 100 px
   que avanzan sin pausa hacia el centro (100 px cada 0.9 s), con la fase medida desde la punta para que lleguen
   al mismo ritmo en todas; el recuadro central queda encendido y respira. */
.pizarra__foto { container-type: size; --foto-x: .5; }
.pizarra__flujo {
  --ancho: max(100cqw, 100cqh * 1688 / 1501);
  position: absolute; width: var(--ancho); aspect-ratio: 1688 / 1501; pointer-events: none;
  left: calc((100cqw - var(--ancho)) * var(--foto-x)); top: calc((100cqh - var(--ancho) * 1501 / 1688) / 2);
}
.flujo__pulsos path {
  fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 30px 70px;
  stroke-dashoffset: calc((100 - var(--len)) * 1px);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.flujo__centro { fill: none; stroke: #fff; stroke-width: 5; opacity: 0; filter: drop-shadow(0 0 12px rgba(255,255,255,.8)); }
.pizarra--visible .flujo__pulsos path { opacity: 1; animation: flujo-pulso .9s linear infinite; }
.pizarra--visible .flujo__centro { animation: flujo-centro 1.8s ease-in-out infinite alternate; }
@keyframes flujo-pulso {
  from { stroke-dashoffset: calc((100 - var(--len)) * 1px); }
  to   { stroke-dashoffset: calc(var(--len) * -1px); }
}
@keyframes flujo-centro {
  from { opacity: .4; }
  to   { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .pizarra--visible .flujo__pulsos path { animation: none; opacity: 0; }
  .pizarra--visible .flujo__centro { animation: none; opacity: .6; }
}
.pizarra__frase { position: absolute; font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(37.2 * var(--u)); line-height: calc(37.5 * var(--u)); color: #fff; }
.pizarra__frase--der { right: calc(218 * var(--u)); top: calc(349 * var(--u)); text-align: right; }
.pizarra__frase--izq { left: calc(217 * var(--u)); top: calc(672 * var(--u)); }
.pizarra__card {
  position: absolute; left: calc(235 * var(--u)); width: calc(969 * var(--u)); min-height: calc(177 * var(--u)); top: calc(-96 * var(--u)); /* mitad sobre la foto, mitad fuera */
  background: #FEFEFE url('../assets/img/textura-blanca-espejo.webp') calc(-18 * var(--u)) calc(-440 * var(--u)) / calc(1115 * var(--u)) calc(685 * var(--u)) no-repeat; color: var(--negro);
  border-radius: calc(24 * var(--u)); text-align: center;
  padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u));
  font-size: calc(18.25 * var(--u)); line-height: calc(25.1 * var(--u)); letter-spacing: -.04em;
}
.pizarra__remate { margin-top: calc(22 * var(--u)); font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(21.1 * var(--u)); letter-spacing: 0; }
.pastilla { display: inline-block; border: 1px solid var(--negro); border-radius: 999px; padding: calc(1 * var(--u)) calc(7 * var(--u)); }

/* =================== SISTEMAS =================== */
.sistemas { position: relative; overflow: hidden; padding: calc(205 * var(--u)) 0 calc(175 * var(--u)); }
.sistemas__deco { width: calc(390 * var(--u)); opacity: .55; }
.sistemas__deco--izq { right: calc(50% + 608 * var(--u)); top: calc(-60 * var(--u)); }
.sistemas__deco--der { left: calc(50% + 610 * var(--u)); top: calc(395 * var(--u)); transform: rotate(180deg); }
.sistemas__grid { display: grid; grid-template-columns: calc(534 * var(--u)) calc(532 * var(--u)); column-gap: calc(23 * var(--u)); padding-left: calc(184 * var(--u)); align-items: start; }
.sistemas__col { padding-top: calc(32 * var(--u)); }
.titulo-linea {
  font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(32 * var(--u)); line-height: calc(32.2 * var(--u));
  border-bottom: 2px solid #fff; padding-bottom: calc(6 * var(--u)); margin-bottom: calc(14 * var(--u));
}
.titulo-linea--oscuro { border-color: var(--negro); }
.sistemas p { font-size: calc(20.1 * var(--u)); line-height: calc(22.3 * var(--u)); letter-spacing: .01em; }
.sistemas__card {
  background: #fff url('../assets/img/textura-blanca-transpuesta.webp') calc(-210 * var(--u)) calc(-305 * var(--u)) / calc(1075 * var(--u)) calc(611 * var(--u)) no-repeat; color: var(--negro);
  border-radius: calc(24 * var(--u)); min-height: calc(280 * var(--u));
  padding: calc(32 * var(--u)) calc(17 * var(--u)) calc(30 * var(--u)) calc(24 * var(--u));
}

/* =================== MÉTODO (ROMPECABEZAS) =================== */
.metodo {
  position: relative; border-radius: calc(60 * var(--u)); overflow: hidden;
  background:
    radial-gradient(ellipse 45% 40% at 50% 0%, rgba(160,160,160,.75) 0%, rgba(110,110,110,.35) 40%, transparent 75%),
    url('../assets/img/fondo-foco.webp') center top/cover,
    #0f0f0f;
  padding: calc(55 * var(--u)) 0 calc(50 * var(--u));
}
.metodo__cabeza { text-align: center; font-family: var(--f-titulo); }
.metodo__pre { font-weight: var(--w-bk); font-size: calc(42.7 * var(--u)); line-height: calc(55 * var(--u)); }
.metodo__titulo { font-weight: var(--w-bd); font-size: calc(55.1 * var(--u)); line-height: calc(54 * var(--u)); }
.metodo__sub { font-family: var(--f-texto); font-size: calc(19.15 * var(--u)); line-height: calc(21.2 * var(--u)); margin-top: calc(6 * var(--u)); letter-spacing: .01em; }

/* Rompecabezas: caja de 1080 × 957 (x 180, y 4406 del mockup). Piezas, íconos y textos van en
   las coordenadas exactas del PDF; los textos se ubican por su línea base (--b) como en el diseño. */
.puzzle { position: relative; width: calc(1080 * var(--u)); height: calc(957 * var(--u)); margin: calc(18 * var(--u)) auto 0; }
.puzzle__logo { position: absolute; left: calc(420 * var(--u)); top: calc(409 * var(--u)); width: calc(245 * var(--u)); }
.pz-caja { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); max-width: none; }
.pz-txt {
  position: absolute; white-space: nowrap; line-height: 1; letter-spacing: calc(var(--ls, 0) * var(--u));
  left: calc(var(--x) * var(--u)); top: calc((var(--b) - .85 * var(--f)) * var(--u)); font-size: calc(var(--f) * var(--u));
}
.pz-centro { transform: translateX(-50%); }
.pieza__titulo { font-family: var(--f-titulo); font-weight: var(--w-bd); }
.pieza__num { color: rgba(242,242,242,.5); }
/* Cada pieza es una capa del tamaño del rompecabezas: así se mueve entera (forma, ícono y textos) */
.pieza { position: absolute; inset: 0; }

/* ---- Animación de ensamblado: las piezas entran desde su lado y encajan en orden 1 → 5 ----
   Solo se activa con JS (clase .anima en <html>) y una sola vez, al entrar en pantalla. */
.pieza--atraer    { --d: 200ms; --dx: 0;   --dy: -40; }
.pieza--captar    { --d: 340ms; --dx: 40;  --dy: 0; }
.pieza--gestionar { --d: 480ms; --dx: 0;   --dy: 40; }
.pieza--convertir { --d: 620ms; --dx: 0;   --dy: 40; }
.pieza--crecer    { --d: 760ms; --dx: -40; --dy: 0; }
.anima .puzzle__logo { opacity: 0; transform: scale(.96); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.anima .pieza {
  opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u)));
  transition: opacity 700ms var(--ease-out) var(--d), transform 700ms var(--ease-out) var(--d);
}
/* el contenido aparece justo cuando su pieza encaja: ícono, título y lista con 40 ms entre sí */
.anima .pieza__icono, .anima .pieza__titulo, .anima .pieza__lista { opacity: 0; transition: opacity 450ms var(--ease-out); }
.anima .pieza__icono  { transition-delay: calc(var(--d) + 350ms); }
.anima .pieza__titulo { transition-delay: calc(var(--d) + 390ms); }
.anima .pieza__lista  { transition-delay: calc(var(--d) + 430ms); }
.puzzle--visible .puzzle__logo, .puzzle--visible .pieza { opacity: 1; transform: none; }
.puzzle--visible .pieza__icono, .puzzle--visible .pieza__titulo, .puzzle--visible .pieza__lista { opacity: 1; }
/* ---- Opción 2: encendido de neón (se elige con ?anim=neon) ----
   Las siluetas empiezan apagadas; cada pieza se enciende con un parpadeo de tubo de neón en
   orden 1 → 5, luego su texto, y al final se prende el logo del centro. Las piezas no se mueven. */
.anima-neon .pieza--atraer    { --d: 200ms; }
.anima-neon .pieza--captar    { --d: 420ms; }
.anima-neon .pieza--gestionar { --d: 640ms; }
.anima-neon .pieza--convertir { --d: 860ms; }
.anima-neon .pieza--crecer    { --d: 1080ms; }
.anima.anima-neon .pieza { opacity: 1; transform: none; transition: none; }
.anima.anima-neon .pieza__forma, .anima.anima-neon .pieza__icono { opacity: .07; transition: none; }
.anima.anima-neon .puzzle__logo { transition-delay: 1700ms; transition-duration: 600ms; }
.anima-neon .puzzle--visible .pieza__forma { animation: neon-encendido 700ms linear var(--d) both; }
.anima-neon .puzzle--visible .pieza__icono { animation: neon-encendido 700ms linear calc(var(--d) + 120ms) both; }
.anima.anima-neon .pieza__titulo { transition-delay: calc(var(--d) + 520ms); }
.anima.anima-neon .pieza__lista  { transition-delay: calc(var(--d) + 580ms); }
@keyframes neon-encendido {
  0%   { opacity: .07; }
  10%  { opacity: .9; }
  16%  { opacity: .15; }
  28%  { opacity: 1; }
  34%  { opacity: .35; }
  46%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Movimiento reducido: solo fundido, sin desplazamiento */
@media (prefers-reduced-motion: reduce) {
  .anima .puzzle__logo, .anima .pieza { transform: none; }
  .anima .pieza { transition: opacity 400ms ease calc(var(--d) * .5); }
  .anima-neon .puzzle--visible .pieza__forma, .anima-neon .puzzle--visible .pieza__icono, .anima-neon .puzzle--visible .pieza { animation: none; opacity: 1; transition: opacity 400ms ease calc(var(--d) * .5); }
}

/* =================== SERVICIOS =================== */
.servicios { position: relative; padding: calc(133 * var(--u)) 0 calc(139 * var(--u)); }
.servicios__forma { position: absolute; left: calc(50% + 300 * var(--u)); top: calc(-130 * var(--u)); width: calc(480 * var(--u)); z-index: 2; pointer-events: none; }
.servicios__titulo { display: inline-block; margin-left: calc(184 * var(--u)); font-size: calc(36.6 * var(--u)); line-height: calc(40 * var(--u)); padding-bottom: calc(2 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.servicios__sub { margin-left: calc(184 * var(--u)); font-size: calc(23 * var(--u)); line-height: calc(25.5 * var(--u)); letter-spacing: .01em; }
.servicios__grid {
  margin: calc(57 * var(--u)) 0 0 calc(184 * var(--u)); width: calc(1072 * var(--u));
  display: grid; grid-template-columns: repeat(2, calc(511 * var(--u))); column-gap: calc(50 * var(--u)); row-gap: calc(22 * var(--u));
}
.servicio {
  height: calc(191 * var(--u)); border-radius: calc(24 * var(--u));
  background: var(--gris-card) center/100% 100% no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 calc(28 * var(--u)) calc(26 * var(--u));
}
.servicio--blanca  { background-image: url('../assets/img/card-blanca.webp'); }
.servicio--naranja { background-image: url('../assets/img/card-naranja.webp'); }
.servicio--azul    { background-image: url('../assets/img/card-azul.webp'); }
.servicio--centro { grid-column: 1 / -1; justify-self: center; width: calc(511 * var(--u)); }
/* Zoom al pasar el mouse: solo con puntero real (en táctil el hover queda pegado) y sin "reducir movimiento" */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .servicio { position: relative; transition: transform 250ms var(--ease-out); }
  .servicio:hover { transform: scale(1.08); z-index: 1; }
}
.servicio h3 { font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(28.7 * var(--u)); line-height: 1; }
.servicio p { margin-top: calc(9 * var(--u)); max-width: calc(400 * var(--u)); font-size: calc(15.6 * var(--u)); line-height: calc(18.2 * var(--u)); font-weight: 600; }
.servicio p.ancho { max-width: calc(460 * var(--u)); font-size: calc(14.6 * var(--u)); line-height: calc(17 * var(--u)); }

/* =================== BENEFICIOS =================== */
.beneficios {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 85% 25%, rgba(70,70,70,.85) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 85%, rgba(60,60,60,.6) 0%, transparent 70%),
    linear-gradient(100deg, #121212 0%, #1a1a1a 45%, #2c2c2c 100%);
  padding: calc(72 * var(--u)) 0 calc(65 * var(--u));
}
.beneficios__titulo { margin-left: calc(474 * var(--u)); font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(63 * var(--u)); line-height: calc(76 * var(--u)); color: #D9D9D9; }
.beneficios__titulo .bk { color: #CFCFCF; }
.linea-tiempo { position: relative; margin: calc(25 * var(--u)) 0 0 calc(184 * var(--u)); width: calc(1072 * var(--u)); }
.linea-tiempo__deco { position: absolute; inset: 0; pointer-events: none; }
.linea-tiempo__linea { /* línea vertical con resplandor */
  position: absolute; left: calc(535 * var(--u) - 1.5 * var(--u)); width: calc(3 * var(--u));
  top: calc(114 * var(--u)); bottom: calc(114 * var(--u)); background: #D2D1D1; transform-origin: top;
  box-shadow: 0 0 calc(10 * var(--u)) rgba(255,255,255,.7);
}
.linea-tiempo__chispa { /* punto de luz que recorre la línea (solo con la animación) */
  position: absolute; left: calc(535 * var(--u)); top: calc(114 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u));
  border-radius: 50%; background: #fff; opacity: 0; transition: opacity 200ms ease;
  box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,.9), 0 0 calc(28 * var(--u)) calc(8 * var(--u)) rgba(255,255,255,.35);
}
.linea-tiempo__chispa::before { /* estela */
  content: ''; position: absolute; left: 50%; bottom: 50%; width: calc(3 * var(--u)); height: calc(90 * var(--u)); transform: translateX(-50%);
  border-radius: calc(3 * var(--u)); background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.beneficio { position: relative; height: calc(228 * var(--u)); }
.beneficio__nodo {
  position: absolute; top: 50%; left: calc(535 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u));
  transform: translate(-50%, -50%); border-radius: 50%; background: #D2D1D1; box-shadow: 0 0 calc(14 * var(--u)) rgba(255,255,255,.65);
}
.beneficio__nodo::after { /* onda que se expande al recibir la chispa */
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: calc(2 * var(--u)) solid rgba(255,255,255,.85); opacity: 0;
}
/* .beneficio__card ocupa toda la fila (alto entero) y se mueve entera; dentro van el fondo de la tarjeta y el texto */
.beneficio__card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-left: calc(28 * var(--u)); }
.beneficio--der .beneficio__card { padding-left: calc(651 * var(--u)); }
.beneficio__fondo {
  position: absolute; top: 50%; left: 0; width: calc(454 * var(--u)); height: calc(191 * var(--u)); transform: translateY(-50%);
  border-radius: calc(24 * var(--u)); border: 1px solid rgba(210,209,209,.55);
  background: linear-gradient(140deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.12) 100%);
  backdrop-filter: blur(4px);
}
.beneficio--der .beneficio__fondo { left: calc(618 * var(--u)); }
.beneficio__brillo { /* destello que recorre el borde de la tarjeta: anillo de 1px recortado con máscara */
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; overflow: hidden; pointer-events: none; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.beneficio__brillo::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
}
.beneficio h3, .beneficio p { position: relative; z-index: 1; }
.beneficio h3 { font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(26 * var(--u)); line-height: calc(26.2 * var(--u)); color: #E6E6E6; }
.beneficio .subrayado { display: inline-block; border-bottom: 1.5px solid #E6E6E6; padding-bottom: calc(5 * var(--u)); }
.beneficio p { margin-top: calc(9 * var(--u)); font-size: calc(16.3 * var(--u)); line-height: calc(18.1 * var(--u)); color: #E6E6E6; letter-spacing: .02em; }

/* ---- Animación: flujo de energía por la línea (JS marca el avance; solo con .anima) ----
   La chispa baja con el scroll dibujando la línea; al llegar a cada punto, el punto se enciende con
   una onda, su tarjeta entra desde su lado y un destello recorre el borde. Final = mockup. */
.anima .linea-tiempo__linea { transform: scaleY(0); }
.anima .beneficio__nodo { transform: translate(-50%, -50%) scale(.55); opacity: .3; transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.anima .beneficio__card { opacity: 0; transform: translateX(calc(-24 * var(--u))); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.anima .beneficio--der .beneficio__card { transform: translateX(calc(24 * var(--u))); }
.anima .beneficio--activo .beneficio__nodo { transform: translate(-50%, -50%); opacity: 1; }
.anima .beneficio--activo .beneficio__card { opacity: 1; transform: none; }
.anima .beneficio--activo .beneficio__nodo::after { animation: onda-nodo 700ms var(--ease-out) both; }
.anima .beneficio--activo .beneficio__brillo { animation: brillo-visible 1000ms linear 250ms both; }
.anima .beneficio--activo .beneficio__brillo::before { animation: brillo-barrido 1000ms var(--ease-in-out) 250ms both; }
/* ---- Color: cada vez que la chispa pasa por un punto (bajando o subiendo), el punto destella en azul o
   naranja de la marca y la onda y el destello del borde salen de ese color; en reposo el punto queda blanco ---- */
.beneficio:nth-child(even) { --acento: var(--azul); --acento-luz: rgba(22,65,196,.85); }
.beneficio:nth-child(odd)  { --acento: var(--naranja); --acento-luz: rgba(253,86,23,.85); }
.beneficio__nodo::before { /* capa de color sobre el punto (solo se anima su opacidad) */
  content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: var(--acento); box-shadow: 0 0 calc(18 * var(--u)) calc(5 * var(--u)) var(--acento-luz);
}
.anima .beneficio--activo .beneficio__nodo::before { animation: nodo-color 1600ms var(--ease-out) both; }
.anima .beneficio__nodo::after { border-color: var(--acento); box-shadow: 0 0 calc(12 * var(--u)) var(--acento-luz); }
.anima .beneficio--activo .beneficio__nodo::after { animation-duration: 900ms; }
.anima .beneficio__brillo::before { background: linear-gradient(90deg, rgba(255,255,255,0), var(--acento), rgba(255,255,255,0)); }
/* subiendo: el punto sigue encendido mientras destella y luego se apaga (JS quita .beneficio--pulso al terminar) */
.anima .beneficio--pulso .beneficio__nodo { transform: translate(-50%, -50%); opacity: 1; }
.anima .beneficio--pulso .beneficio__nodo::before { animation: nodo-color-sube 1100ms var(--ease-out) both; }
.anima .beneficio--pulso .beneficio__nodo::after { animation: onda-nodo-sube 900ms var(--ease-out) both; }
@keyframes nodo-color { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nodo-color-sube { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes onda-nodo-sube { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
@keyframes onda-nodo { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
@keyframes brillo-visible { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes brillo-barrido { from { transform: translateX(-100%); } to { transform: translateX(170%); } }
@media (prefers-reduced-motion: reduce) {
  .anima .linea-tiempo__linea { transform: none !important; }
  .linea-tiempo__chispa { display: none; }
  .anima .beneficio__nodo { transform: translate(-50%, -50%); }
  .anima .beneficio__card, .anima .beneficio--der .beneficio__card { transform: none; }
  .anima .beneficio--activo .beneficio__nodo::after, .anima .beneficio--activo .beneficio__brillo, .anima .beneficio--activo .beneficio__brillo::before { animation: none; }
  .anima .beneficio--activo .beneficio__nodo::before { animation: none; }
}

/* =================== FAQ =================== */
.faq { padding: calc(275 * var(--u)) 0 calc(135 * var(--u)); }
.faq__forma { position: absolute; left: calc(50 * var(--u)); top: calc(-165 * var(--u)); width: calc(292 * var(--u)); }
.faq__titulo { margin-left: calc(364 * var(--u)); font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(59.4 * var(--u)); line-height: 1; padding-top: calc(10 * var(--u)); }
.faq__lista { margin: calc(60 * var(--u)) 0 0 calc(184 * var(--u)); width: calc(1072 * var(--u)); }
.faq details { border-top: 2px solid #fff; }
.faq summary {
  list-style: none; cursor: pointer; height: calc(80 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-titulo); font-weight: var(--w-bk); font-size: calc(29.6 * var(--u));
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-right: calc(21 * var(--u));
  background: url('../assets/img/flecha-blanca.webp') center/contain no-repeat; transform: rotate(-90deg); transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(90deg); }
.faq__resp { padding: 0 0 calc(32 * var(--u)); }
.faq__cabeza { font-family: var(--f-titulo); font-weight: var(--w-bk); font-size: calc(24.2 * var(--u)); line-height: calc(26.3 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.faq__parrafo { margin-top: calc(26 * var(--u)); padding-left: calc(23 * var(--u)); max-width: calc(905 * var(--u)); font-size: calc(17.6 * var(--u)); line-height: calc(23.5 * var(--u)); letter-spacing: .01em; }
.viñetas { position: relative; padding-left: calc(23 * var(--u)); font-size: calc(17.6 * var(--u)); letter-spacing: .01em; }
.viñetas::before { content: ''; position: absolute; left: calc(13 * var(--u)); top: calc(12 * var(--u)); bottom: calc(12 * var(--u)); width: 1px; background: #fff; }
.viñetas li { position: relative; line-height: calc(29.5 * var(--u)); }
.viñetas li::before {
  content: ''; position: absolute; left: calc(-14 * var(--u)); top: calc(10.5 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border: 1.5px solid #fff; border-radius: 50%; background: var(--negro);
}
.viñetas--enfasis li { font-style: italic; font-weight: 700; }
.viñetas--pares li { line-height: calc(19.5 * var(--u)); margin-bottom: calc(19.5 * var(--u)); }
.viñetas--pares li::before { top: calc(5.5 * var(--u)); }
.viñetas--pares::before { top: calc(8 * var(--u)); bottom: calc(52 * var(--u)); }
.viñetas--pares em { display: block; padding-left: calc(25 * var(--u)); }

/* =================== SIN CUENTOS =================== */
.cierre { position: relative; height: calc(810 * var(--u)); max-width: calc(1440 * var(--u)); margin: 0 auto; border-radius: calc(40 * var(--u)); overflow: hidden; }
.cierre__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1) brightness(.85); }
.cierre__franja {
  position: absolute; left: 0; right: 0; top: calc(298 * var(--u)); height: calc(264 * var(--u));
  background: rgba(18,18,18,.55); display: grid; place-items: center; text-align: center;
  font-family: var(--f-titulo); font-weight: var(--w-bk); font-size: calc(54.2 * var(--u)); line-height: calc(54.6 * var(--u));
}
.cierre__franja strong { font-weight: var(--w-bd); }
.cierre__ultima { font-size: calc(46.7 * var(--u)); }

/* =================== CTA =================== */
.cta { text-align: center; padding: calc(82 * var(--u)) 0 calc(56 * var(--u)); }
.cta__texto { font-style: italic; font-weight: 700; font-size: calc(34.9 * var(--u)); line-height: calc(37.9 * var(--u)); }
.boton--cta { margin-top: calc(26 * var(--u)); width: calc(270 * var(--u)); height: calc(78 * var(--u)); font-size: calc(29.25 * var(--u)); gap: calc(18 * var(--u)); }
.boton--cta .flecha { height: calc(20 * var(--u)); }

/* =================== FOOTER =================== */
.footer {
  position: relative; overflow: hidden; border-radius: calc(60 * var(--u)) calc(60 * var(--u)) 0 0; min-height: calc(694 * var(--u));
  background:
    radial-gradient(ellipse 45% 55% at 78% 22%, rgba(95,95,95,.75) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 28% 105%, rgba(90,90,90,.7) 0%, transparent 70%),
    #2b2b2b;
  border-top: 1px solid rgba(255,255,255,.25);
}
.footer__deco { left: calc(50% + 400 * var(--u)); top: calc(262 * var(--u)); width: calc(450 * var(--u)); opacity: .9; transform: rotate(180deg); }
.footer__in { min-height: calc(694 * var(--u)); }
.footer__logo { position: absolute; left: calc(232 * var(--u)); top: calc(60 * var(--u)); width: calc(293 * var(--u)); opacity: .85; }
.footer__lema { position: absolute; right: calc(233 * var(--u)); top: calc(80 * var(--u)); text-align: right; font-family: var(--f-titulo); font-weight: var(--w-bd); font-size: calc(59.4 * var(--u)); line-height: calc(59.4 * var(--u)); color: #DADADA; }
.footer__nav { position: absolute; left: calc(232 * var(--u)); top: calc(305 * var(--u)); display: flex; flex-direction: column; font-size: calc(20 * var(--u)); line-height: calc(50 * var(--u)); color: #E2E2E2; }
.footer__centro { position: absolute; left: 50%; transform: translateX(-50%); top: calc(305 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); }
.footer__contacto { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; font-size: calc(20 * var(--u)); line-height: calc(50 * var(--u)); color: #fff; }
.footer__contacto a { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.footer__contacto svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; }
.footer__redes { display: flex; gap: calc(26 * var(--u)); align-items: center; }
.footer__redes img { height: calc(48 * var(--u)); width: auto; opacity: .92; }
.footer__derechos { position: absolute; left: 0; right: 0; text-align: center; top: calc(600 * var(--u)); font-size: calc(17 * var(--u)); color: #BDBDBD; }

/* =========================================================
   MÓVIL (menos de 760 px): una columna
   ========================================================= */
@media (max-width: 759px) {
  :root { --u: 1px; }
  body { font-size: 16px; }
  .lienzo { width: 100%; padding: 0 20px; }

  .header { height: 76px; position: sticky; top: 0; }
  section[id] { scroll-margin-top: 76px; }
  .header__in { padding: 0 20px; }
  .header__logo img { width: 104px; }
  .boton--header { display: none; }
  .header__hamburguesa { display: flex; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
  .header__hamburguesa span { width: 24px; height: 2px; background: var(--blanco); transition: transform .25s, opacity .25s; }
  .header__nav {
    position: absolute; top: 76px; left: 0; right: 0; margin: 0; flex-direction: column; gap: 0;
    background: var(--negro); border-top: 1px solid #333; font-size: 18px; display: none;
  }
  .header__nav a { padding: 16px 20px; border-bottom: 1px solid #2a2a2a; }
  .header.abierto .header__nav { display: flex; }
  .header.abierto .header__hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.abierto .header__hamburguesa span:nth-child(2) { opacity: 0; }
  .header.abierto .header__hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .banner { height: 56vw; min-height: 220px; }
  .bb { --u: calc(100vw / 1000); --ex: .72; } /* en celular el plan B se ve más grande y las palabras se acercan al centro */

  .manifiesto { min-height: 0; padding: 90px 0 90px; }
  .manifiesto__deco { width: 200px; opacity: .5; }
  .manifiesto__deco--der { left: auto; right: -140px; top: 18px; }
  .manifiesto__deco--izq { right: auto; left: -140px; top: auto; bottom: 10px; }
  .manifiesto__texto { margin: 0; }
  .m1, .m2 { font-size: 26px; line-height: 28px; }
  .m3 { font-size: 16px; line-height: 23px; margin-top: 4px; }
  .m3 mark { margin-left: 0; padding: 2px 6px; line-height: 21px; }

  .enemigo { padding: 40px 0 70px; }
  .enemigo .lienzo { min-height: 0; }
  .enemigo__forma { position: static; width: 70%; margin: 10px auto 30px; }
  .enemigo__texto { margin: 0; width: auto; }
  .titulo-sub { font-size: 21px; line-height: 23px; }
  .enemigo__grande { font-size: 34px; line-height: 38px; width: 100%; }
  .enemigo__p { width: auto; font-size: 16px; line-height: 21px; margin-top: 12px; }
  .enemigo__caja { margin: 26px 0 0; width: auto; padding: 18px 20px; font-size: 15px; line-height: 21px; border-radius: 18px; letter-spacing: -.02em; }

  .perdidas { padding: 0 12px; }
  .perdidas__card, .pizarra__card, .sistemas__card { background-size: cover; background-position: center; }
  .perdidas__card { grid-template-columns: 1fr; padding: 44px 24px 50px; row-gap: 30px; border-radius: 28px; }
  .perdidas__titulo { text-align: left; }
  .perdidas__titulo .xl { font-size: 24px; line-height: 28px; }
  .perdidas__titulo .bd { font-size: 28px; line-height: 32px; }
  .perdidas__lista li { font-size: 19px; line-height: 34px; }
  .perdidas__lista .perdidas__final { margin-top: 18px; font-size: 18px; }
  .perdidas__puntos { top: 12px; height: 204px; }

  .pizarra { margin-top: -40px; padding-bottom: 0; }
  .pizarra__foto { border-radius: 0 0 28px 28px; border: 0; }
  .pizarra__foto { height: 480px; border-radius: 0 0 28px 28px; }
  .pizarra__foto > img { object-position: 60% 50%; }
  .pizarra__foto { --foto-x: .6; }
  .pizarra__frase { font-size: 24px; line-height: 26px; }
  .pizarra__frase--der { right: 20px; top: 76px; }
  .pizarra__frase--izq { left: 20px; top: auto; bottom: 40px; }
  .pizarra__card { position: relative; left: auto; top: auto; width: auto; margin: -24px 0 0; padding: 22px 18px; font-size: 15px; line-height: 21px; border-radius: 20px; }
  .pizarra__card br { display: none; }
  .pizarra__remate { font-size: 15px; line-height: 26px; }

  .sistemas { padding: 70px 0 70px; }
  .sistemas__deco { display: none; }
  .sistemas__grid { grid-template-columns: 1fr; padding: 0 20px; row-gap: 34px; }
  .sistemas__col { padding: 0; }
  .titulo-linea { font-size: 22px; line-height: 25px; }
  .sistemas p { font-size: 16px; line-height: 21px; }
  .sistemas__card { min-height: 0; padding: 26px 20px; border-radius: 20px; }

  .metodo { border-radius: 28px; padding: 50px 0 40px; }
  .metodo__pre { font-size: 20px; line-height: 26px; }
  .metodo__titulo { font-size: 27px; line-height: 30px; }
  .metodo__sub { font-size: 15px; line-height: 20px; margin-top: 12px; }
  .metodo__sub br { display: none; }
  .puzzle { width: auto; height: auto; margin-top: 34px; display: grid; gap: 14px; }
  /* en móvil las tarjetas suben 24 px una tras otra */
  .pieza--atraer, .pieza--captar, .pieza--gestionar, .pieza--convertir, .pieza--crecer { --dx: 0; --dy: 24; }
  /* neón en móvil: el contorno es el borde de la tarjeta, así que parpadea la tarjeta entera */
  .anima.anima-neon .pieza { opacity: .07; }
  .anima-neon .puzzle--visible .pieza { animation: neon-encendido 700ms linear var(--d) both; }
  .anima.anima-neon .pieza__forma { animation: none; }
  .puzzle__logo { position: static; width: 150px; margin: 0 auto 10px; order: -1; }
  .pieza { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 1.5px solid rgba(255,255,255,.85); border-radius: 22px; box-shadow: 0 0 14px rgba(255,255,255,.25), inset 0 0 10px rgba(255,255,255,.08);
    background: rgba(20,20,20,.55); padding: 22px 16px; }
  .pieza__forma { display: none; }
  .pz-caja, .pz-txt { position: static; transform: none; width: auto; height: auto; letter-spacing: 0; }
  .pieza__icono { height: 60px; margin-bottom: 6px; }
  .pieza__titulo { display: flex; align-items: baseline; gap: 4px; font-size: 28px; line-height: 1; }
  .pieza__titulo .pz-txt { font-size: 28px; }
  .pieza__titulo .pieza__num { font-size: 38px; letter-spacing: -2px; }
  .pieza__lista { margin-top: 8px; }
  .pieza__lista .pz-txt { font-size: 16px; line-height: 22px; }

  .servicios { padding: 70px 0 70px; }
  .servicios__forma { left: auto; right: -60px; top: -40px; width: 200px; }
  .servicios__titulo { margin-left: 0; font-size: 22px; line-height: 26px; max-width: 75%; }
  .servicios__sub { margin-left: 0; font-size: 16px; line-height: 21px; }
  .servicios__sub br { display: none; }
  .servicios__grid { margin: 34px 0 0; width: auto; grid-template-columns: 1fr; row-gap: 14px; }
  .servicio, .servicio--centro { width: auto; height: auto; min-height: 180px; border-radius: 20px; background-size: cover; padding: 70px 20px 22px; }
  .servicio h3 { font-size: 22px; }
  .servicio p, .servicio p.ancho { font-size: 15px; line-height: 19px; max-width: none; }

  .beneficios { padding: 60px 0 50px; }
  .beneficios__titulo { margin-left: 0; font-size: 36px; line-height: 42px; }
  .linea-tiempo { margin: 30px 0 0; width: auto; padding-left: 34px; }
  .linea-tiempo__linea { left: 9px; top: 60px; bottom: 60px; width: 2px; }
  .linea-tiempo__chispa { left: 10px; top: 60px; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .beneficio, .beneficio--der { height: auto; margin-bottom: 18px; }
  .beneficio__card, .beneficio--der .beneficio__card { position: relative; inset: auto; padding: 24px 20px; }
  .beneficio__fondo, .beneficio--der .beneficio__fondo { top: 0; left: 0; width: 100%; height: 100%; transform: none; }
  .beneficio__nodo { left: -25px; width: 20px; height: 20px; }
  .beneficio h3 { font-size: 19px; line-height: 21px; }
  .beneficio p { font-size: 15px; line-height: 19px; }
  .anima .beneficio__card, .anima .beneficio--der .beneficio__card { transform: translateY(16px); }
  .anima .beneficio--activo .beneficio__card { transform: none; }

  .faq { padding: 60px 0 60px; }
  .faq__forma { position: static; width: 130px; margin-bottom: 10px; }
  .faq__titulo { margin-left: 0; font-size: 32px; }
  .faq__lista { margin: 26px 0 0; width: auto; }
  .faq summary { height: auto; min-height: 64px; padding: 14px 0; font-size: 19px; gap: 12px; }
  .faq summary::after { width: 18px; height: 18px; margin-right: 4px; flex: none; }
  .faq__cabeza { font-size: 17px; line-height: 21px; }
  .faq__cabeza br { display: none; }
  .viñetas, .faq__parrafo { font-size: 15px; }
  .viñetas li { line-height: 22px; margin-bottom: 6px; }
  .viñetas li::before { top: 6.5px; }
  .faq__parrafo { line-height: 21px; }
  .viñetas--pares li { line-height: 20px; margin-bottom: 14px; }
  .viñetas--pares em { padding-left: 14px; margin-top: 3px; }

  .cierre { height: 420px; border-radius: 28px; margin: 0 12px; }
  .cierre__foto { object-position: 40% 50%; }
  .cierre__franja { top: 120px; height: 180px; font-size: 28px; line-height: 30px; }
  .cierre__ultima { font-size: 20px; }

  .cta { padding: 56px 20px 56px; }
  .cta__texto { font-size: 20px; line-height: 25px; }
  .cta__texto br { display: none; }
  .boton--cta { width: 210px; height: 60px; font-size: 22px; margin-top: 24px; }
  .boton--cta .flecha { height: 15px; }

  .footer { border-radius: 30px 30px 0 0; min-height: 0; }
  .footer__in { min-height: 0; display: grid; gap: 28px; padding: 46px 28px 40px; }
  .footer__logo, .footer__lema, .footer__nav, .footer__centro, .footer__derechos { position: static; }
  .footer__centro { transform: none; gap: 28px; }
  .footer__contacto { font-size: 16px; line-height: 36px; }
  .footer__contacto svg { width: 20px; height: 20px; }
  .footer__derechos { font-size: 14px; }
  .footer__logo { width: 160px; }
  .footer__lema { text-align: left; font-size: 30px; line-height: 32px; }
  .footer__nav { font-size: 16px; line-height: 36px; }
  .footer__redes img { height: 34px; }
  .footer__deco { left: auto; right: -160px; top: 260px; width: 300px; opacity: .5; }
}

/* Móvil con movimiento reducido: las tarjetas de beneficios solo aparecen, sin desplazarse */
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  .anima .beneficio__card, .anima .beneficio--der .beneficio__card { transform: none; }
}

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.whatsapp-flotante svg { width: 34px; height: 34px; }
@media (max-width: 759px) {
  .whatsapp-flotante { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .whatsapp-flotante svg { width: 30px; height: 30px; }
}