/* === 1-base.css === */
/* ==========================================================================
   vefur - desarrollos web a medida
   Hoja de estilos unica del sitio.

   Orden: variables > base > encabezado > banner animado > desarrollos >
          formulario > contacto > prefooter > footer > cookies > legales >
          responsive
   ========================================================================== */

/* --------------------------------------------------------------- variables */
:root {
  /* paleta oficial de la marca (Logo/files/LEEME.md) */
  --negro:        #060A12;   /* fondo principal */
  --cian:         #22E8FF;   /* marca sobre negro */
  --cian-hondo:   #0E7C90;   /* marca sobre blanco */
  --hielo:        #EAF6F8;   /* texto sobre negro */

  /* derivados, todos hijos de los cuatro de arriba */
  --carbon:       #0A1020;   /* segunda capa de fondo, para alternar secciones */
  --carbon-alto:  #0E1526;   /* tarjetas */
  --borde:        #1B2740;
  --borde-vivo:   rgba(34, 232, 255, .34);
  --tenue:        #8FA3B8;   /* texto secundario */
  --apagado:      #5C6C83;   /* placeholders */

  --rojo:         #FF5A6E;
  --rojo-fondo:   rgba(255, 90, 110, .10);
  --verde:        #34D399;

  /* el logo lee estas tres: cambiandolas anda igual sobre claro que sobre
     oscuro, porque las variables si atraviesan el <use> */
  --marca-fondo:  var(--negro);
  --marca-hielo:  var(--hielo);
  --marca-cian:   var(--cian);

  --alto-encabezado: 72px;
  --ancho-max:       1240px;

  --radio-pastilla: 999px;
  --radio-caja:     16px;

  --tipo-titulo: "Poppins", "Segoe UI", system-ui, sans-serif;
  --tipo-texto:  "Inter", "Segoe UI", system-ui, sans-serif;

  --brillo-cian: 0 0 0 1px rgba(34, 232, 255, .30), 0 10px 34px rgba(34, 232, 255, .22);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-encabezado) + 12px); }

body {
  margin: 0;
  font-family: var(--tipo-texto);
  font-size: 16px;
  line-height: 1.62;
  color: var(--hielo);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--tipo-titulo);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 600;
  color: #FFFFFF;
}

a { color: var(--cian); }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 26px;
}

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
  border-radius: 6px;
}

.marca-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* las tres piezas del logo, pintadas con variables para que el <use> las herede */
.nv-funda  { stroke: var(--marca-fondo); stroke-width: 11.5; }
.nv-hilo   { stroke: url(#nv-hilo); stroke-width: 6.2; }
.nv-letra--hielo { fill: var(--marca-hielo); }
.nv-letra--cian  { fill: var(--marca-cian); }

/* campo trampa del antispam: fuera de pantalla, nunca display:none, que los
   bots lo detectan */
.trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; top: 10px; left: -999px; z-index: 200;
  background: var(--cian); color: var(--negro);
  padding: 10px 20px; border-radius: var(--radio-pastilla);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { left: 10px; }

/* ------------------------------------------------------------- encabezado */
/* Dos capas superpuestas y las dos fijas:

   .encabezado-vivo  es el banner. Arranca ocupando la pantalla entera y a
                     medida que se baja se encoge hasta quedar de la altura
                     del encabezado, translucido y con desenfoque detras.
   .encabezado       es el logo y las dos pastillas. Nunca se mueve ni cambia
                     de tamano: esta siempre arriba a la izquierda.

   El progreso de la transformacion es --p, de 0 a 1, y lo escribe sitio.js
   en el <html> a partir del scroll. */

.encabezado-vivo {
  --alto-marco: calc(100vh - (100vh - var(--alto-encabezado)) * var(--p, 0));
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--alto-marco);
  overflow: hidden;
  background: rgba(6, 10, 18, calc(.82 * var(--p, 0)));
  -webkit-backdrop-filter: blur(calc(20px * var(--p, 0))) saturate(1.25);
          backdrop-filter: blur(calc(20px * var(--p, 0))) saturate(1.25);
  border-bottom: 1px solid rgba(34, 232, 255, calc(.20 * var(--p, 0)));
}

/* La escena sigue midiendo una pantalla entera; lo que hace el marco es
   recortarla. Se la sube para que lo que quede a la vista sea la franja del
   medio, que es donde pasa todo. */
.encabezado-vivo__interior {
  position: absolute; left: 0; right: 0; top: 0;
  height: 100vh;
  transform: translateY(calc((var(--alto-marco) - 100vh) / 2))
             scale(calc(1 - .10 * var(--p, 0)));
  transform-origin: 50% 50%;
  opacity: calc(1 - .93 * var(--p, 0));
}

.encabezado {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--alto-encabezado);
  pointer-events: none;          /* solo los hijos reciben clics */
}
.encabezado__barra {
  height: var(--alto-encabezado);
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 26px;
  display: flex; align-items: center; gap: 10px;
}
.encabezado__logo, .encabezado__acciones { pointer-events: auto; }

.encabezado__logo {
  display: block; margin-right: auto;
  filter: drop-shadow(0 2px 14px rgba(6, 10, 18, .85));
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.encabezado__logo svg { width: 120px; height: 40px; }
.encabezado__logo:hover { transform: scale(1.04); }

.encabezado__acciones { display: flex; align-items: center; gap: 10px; }

/* las dos pastillas de la derecha */
.pastilla-nav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radio-pastilla);
  border: 1px solid rgba(234, 246, 248, .30);
  background: rgba(6, 10, 18, .42);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--hielo); text-decoration: none;
  font-family: var(--tipo-titulo); font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background .22s ease, border-color .22s ease,
              color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.pastilla-nav:hover {
  background: rgba(234, 246, 248, .12);
  border-color: rgba(234, 246, 248, .58);
  transform: translateY(-1px);
}
.pastilla-nav--llena {
  background: var(--cian); border-color: var(--cian); color: var(--negro);
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(34, 232, 255, .30);
}
.pastilla-nav--llena:hover {
  background: #63F0FF; border-color: #63F0FF; color: var(--negro);
  box-shadow: 0 10px 30px rgba(34, 232, 255, .45);
}

/* En las paginas sin banner (las legales) el encabezado no tiene detras la
   escena que le da fondo: se lo pone opaco para que el logo se lea. */
html[data-banner="no"] .encabezado {
  background: rgba(6, 10, 18, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--borde);
}

/* === 2-banner.css === */

/* ======================================================================
   BANNER ANIMADO
   ======================================================================

   Es una sola linea de tiempo de 20 segundos. Todas las animaciones duran
   lo mismo, arrancan juntas y van en linear: por eso los porcentajes de una
   hablan de los porcentajes de las otras y no hay que sincronizar nada a
   mano.

     0 -  6%   el logo completo, sobre su baldosa negra
     6 - 10%   el monograma se deshace en polvo y queda el nucleo solo
    10 - 21%   el nucleo crece, se centra y da dos vueltas frenando
    21 - 28%   la notebook se da vuelta y se abre; el nucleo gira y entra
    28 - 31%   estalla contra la pantalla blanca
    31 - 41%   catalogo de productos, scrolleando
    41 - 43%   pasada hacia la derecha
    43 - 53%   formulario, scrolleando
    53 - 55%   pasada hacia la derecha
    55 - 68%   KPI y la flecha de facturacion, que sube y crece
    68 - 77%   el nucleo se reconstruye y se viene encima a toda velocidad
    77 - 83%   gira y vibra cinco veces
    83 - 86%   se corre a la izquierda y vuelve al tamano de la baldosa
    86 - 89%   el monograma se rearma con el mismo efecto
    89 -100%   descanso: el logo completo otra vez, listo para repetir

   El cuadro 100% es identico al 0%: por eso el corte no se ve.
   ====================================================================== */

.escena {
  position: absolute; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 46%, #0E1B33 0%, #070C18 52%, var(--negro) 100%);
}

/* trama tecnologica de fondo, muy tenue */
.escena__trama {
  position: absolute; inset: -12%;
  background-image:
    linear-gradient(rgba(34, 232, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 232, 255, .06) 1px, transparent 1px);
  background-size: 62px 62px, 62px 62px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
  animation: trama 20s linear infinite;
  pointer-events: none;
}
@keyframes trama {
  0%   { transform: translate3d(0, 0, 0); opacity: .9; }
  50%  { transform: translate3d(-31px, -31px, 0); opacity: .45; }
  100% { transform: translate3d(-62px, -62px, 0); opacity: .9; }
}

/* la aureola que late detras del nucleo */
.escena__aureola {
  position: absolute; left: 50%; top: 50%;
  width: 76vmin; height: 76vmin; margin: -38vmin 0 0 -38vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 232, 255, .20) 0%, rgba(34, 232, 255, .055) 42%, transparent 68%);
  animation: aureola 20s linear infinite;
  pointer-events: none;
}
@keyframes aureola {
  0%, 6%  { opacity: .5; transform: scale(.55); }
  14%     { opacity: .95; transform: scale(1); }
  21%     { opacity: 1; transform: scale(1.08); }
  30%     { opacity: .3; transform: scale(.4); }
  31%     { opacity: 1; transform: scale(1.5); }
  35%     { opacity: 0; transform: scale(2); }
  68%     { opacity: 0; transform: scale(.3); }
  73%     { opacity: .8; transform: scale(.9); }
  80%     { opacity: 1; transform: scale(1.15); }
  89%     { opacity: .5; transform: scale(.55); }
  100%    { opacity: .5; transform: scale(.55); }
}

/* ------------------------------------------------------------ la sala 3D */
/* ------------------------------- la sala en 3D -------------------------- */
/* El lienzo tapa toda la escena y se dibuja debajo del logo del CSS (la
   baldosa y el monograma), que siguen siendo HTML. Arranca escondido: lo
   enciende sitio.js recien cuando la escena de WebGL levanto sin errores. */
.escena__lienzo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
}
.escena[data-logo="3d"] .escena__lienzo { display: block; }

/* Con la sala de verdad andando sobran las piezas dibujadas: el decorado, el
   emblema plano, su polvo y su onda los hace ahora el 3D. Lo unico que sigue
   en HTML es la baldosa y el monograma, que son texto y tienen que verse
   nitidos a cualquier tamano. */
/* Son dos decisiones separadas y por eso van en dos atributos:

     data-sala   de donde sale el escritorio: "video" (el render de Blender)
                 o "3d" (la escena WebGL). Sin atributo, el decorado CSS.
     data-logo   si el emblema lo dibuja el lienzo. Puede haber video sin
                 lienzo -si la placa no da- y ahi el logo lo sigue haciendo
                 el CSS, que para eso esta.
*/
.escena[data-sala="3d"] .escena__camara { display: none; }

.escena[data-logo="3d"] .mv-nucleo,
.escena[data-logo="3d"] .polvo--nucleo,
.escena[data-logo="3d"] .escena__onda { display: none; }

/* El orden de las capas cambia cuando manda el lienzo. El emblema vive
   adentro, asi que el lienzo tiene que quedar POR ENCIMA de la baldosa (si
   no, la baldosa, que es opaca, le pasa por delante) y por debajo del
   monograma, que sigue siendo texto. Sala y baldosa nunca se ven al mismo
   tiempo, asi que subir el lienzo no tapa nada. */
.escena[data-logo="3d"] .escena__video { z-index: 0; }
.escena[data-logo="3d"] .mv-baldosa   { z-index: 1; }
.escena[data-logo="3d"] .escena__lienzo { z-index: 2; }
.escena[data-logo="3d"] .escena__grano,
.escena[data-logo="3d"] .escena__penumbra { z-index: 3; }
.escena[data-logo="3d"] .mv-palabra,
.escena[data-logo="3d"] .polvo--palabra { z-index: 4; }

.escena__camara {
  position: absolute; inset: 0;
  perspective: 2600px;
  perspective-origin: 50% 38%;
  transform-origin: 50% 50%;
  /* Cuanto se acerca la camara. En pantalla angosta la notebook mide casi
     todo el ancho, asi que el acercamiento es menor y no se le cortan los
     bordes; en pantalla ancha sobra lugar y se puede ir mas cerca. */
  --zoom: 1.25;
  animation: sala-camara 20s linear infinite;
}
@media (min-aspect-ratio: 5/4) { .escena__camara { --zoom: 1.62; } }

@keyframes sala-camara {
  0%, 9%  { opacity: 0; transform: scale(1.06); }
  12%     { opacity: 1; transform: scale(1.02); }
  21%     { opacity: 1; transform: scale(1); }
  28%     { opacity: 1; transform: scale(calc(var(--zoom) * .78)); }
  31%     { opacity: 1; transform: scale(var(--zoom)); }
  55%     { opacity: 1; transform: scale(calc(var(--zoom) * 1.05)); }
  68%     { opacity: 1; transform: scale(calc(var(--zoom) * 1.1)); }
  73%     { opacity: .5; transform: scale(calc(var(--zoom) * 1.55)); }
  77%     { opacity: 0; transform: scale(calc(var(--zoom) * 2)); }
  100%    { opacity: 0; transform: scale(calc(var(--zoom) * 2)); }
}

.sala {
  position: absolute; inset: 0; transform-style: preserve-3d;
  /* La notebook define el tamano de la sala: la bisagra, la altura de la base
     y donde arranca la mesa salen de estos dos numeros. En celular vertical
     todo crece, porque si no la notebook queda diminuta y la mesa se come la
     pantalla. */
  --note-ancho: 62vmin;
  --note-alto:  39vmin;
  /* Cuanto se corre hacia atras el borde lejano de la mesa. Sin esto la
     notebook queda apoyada justo en el horizonte y, vista de canto, parece
     una lamina. Con mesa detras se lee como lo que es. La notebook se
     adelanta lo que corresponde (tan 58 = 1.6) para no quedar flotando. */
  --mesa-atras: 26vmin;
}
@media (max-aspect-ratio: 3/4) {
  /* En vertical la notebook ya viene grande por el adelanto sobre la
     mesa: solo hace falta un poco mas de mesa por detras. */
  .sala { --mesa-atras: 30vmin; }
}

/* La pared va fuera de .sala a proposito. Adentro comparte el espacio 3D
   con la notebook y, como la tapa abierta se inclina un poco hacia atras,
   la pared le pasaba por delante y se la comia. Afuera se dibuja primero y
   queda siempre al fondo. */
.sala__pared {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0A1223 0%, #101A2E 52%, #17223A 100%);
}

/* el escritorio de madera */
.escritorio {
  position: absolute; left: 50%; top: 50%;
  width: 200vmin; height: 130vmin; margin: 0 0 0 -100vmin;
  transform-origin: 50% 0;
  transform: translateY(calc(var(--note-alto) / 2 - var(--mesa-atras))) rotateX(58deg) translateZ(-.6vmin);
  /* Madera de verdad: cuatro capas de veta con periodos que no son multiplos
     entre si, asi el ojo no encuentra la repeticion; encima la junta de los
     tablones y un brillo especular ancho. Es lo que separa "madera" de
     "rayitas marrones". */
  background:
    linear-gradient(101deg, transparent 18%, rgba(255, 226, 180, .055) 41%, transparent 63%),
    repeating-linear-gradient(90.9deg, rgba(0, 0, 0, .11) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(89.6deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(90.4deg, rgba(255, 245, 225, .028) 0 1px, transparent 1px 43px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .32) 0 2px, rgba(255, 240, 215, .04) 2px 3px, transparent 3px 137px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .18) 0 2px, transparent 2px 211px),
    linear-gradient(180deg, #45301F 0%, #533A28 16%, #40301F 46%, #20180F 80%, #0A0806 100%);
  box-shadow: inset 0 3vmin 7vmin rgba(0, 0, 0, .5);
}
/* el charco de luz alrededor de la notebook: la mesa deja de estar
   iluminada de forma pareja, que es lo que la delata como dibujo */
.escritorio__luz {
  position: absolute; left: 50%; top: 0;
  width: 150vmin; height: 90vmin; margin-left: -75vmin;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 18%,
    rgba(255, 226, 186, .10) 0%, rgba(255, 226, 186, .035) 38%, transparent 72%);
}
/* la sombra que la notebook apoya sobre la madera */
/* Dos sombras: una dura y corta donde la notebook toca la mesa, y otra
   larga y difusa. Con una sola parece un sticker pegado. */
.escritorio::after {
  content: "";
  position: absolute; left: 50%; top: 3vmin;
  width: 96vmin; height: 40vmin; margin-left: -48vmin;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .3) 42%, transparent 74%);
}
.escritorio::before {
  content: "";
  position: absolute; left: 50%; top: 8vmin;
  width: 62vmin; height: 12vmin; margin-left: -31vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), transparent 78%);
}

/* Grano de pelicula. Es la capa que mas hace por sacarle el aire de dibujo:
   rompe los degrades planos y le da textura a la madera y al aluminio. */
.escena__grano {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  /* Sin mix-blend-mode a propósito: mezclar una capa grande adentro de un
     elemento con backdrop-filter le cuesta caro al compositor, sobre todo en
     Safari de celular. Con opacidad sola el grano se ve casi igual. */
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* penumbra de los bordes: cierra la escena y despega el logo del decorado */
.escena__penumbra {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 44%, transparent 42%, rgba(6, 10, 18, .55) 100%),
    linear-gradient(180deg, rgba(6, 10, 18, .5) 0%, transparent 16%, transparent 68%, rgba(6, 10, 18, .78) 100%);
}

/* ------------------------------------------------------------- notebook */
.note {
  position: absolute; left: 50%; top: 50%;
  width: var(--note-ancho); height: var(--note-alto);
  margin: calc(var(--note-alto) / -2) 0 0 calc(var(--note-ancho) / -2);
  transform-style: preserve-3d;
  animation: note-giro 20s linear infinite;
}
/* La notebook cerrada esta apoyada sobre una mesa inclinada: para darla
   vuelta hay que girarla sobre la normal de la mesa, no sobre el eje
   vertical de la pantalla. Girar en Y la levantaba de canto y la dejaba
   como una lamina. La normal de la mesa es el eje Z llevado por rotateX(58),
   asi que el giro es rotateX(58) rotateZ(x) rotateX(-58). */
@keyframes note-giro {
  0%, 15%   { transform: translateZ(calc(var(--mesa-atras) * 1.6)) rotateX(58deg) rotateZ(172deg) rotateX(-58deg); }
  21%, 100% { transform: translateZ(calc(var(--mesa-atras) * 1.6)) rotateX(58deg) rotateZ(0deg) rotateX(-58deg); }
}

/* la base sale de la bisagra hacia abajo y se acuesta sobre la madera */
.note__base {
  position: absolute; left: 0; top: 100%;
  width: 100%; height: calc(var(--note-alto) * 1.03);
  transform-origin: 50% 0;
  transform: rotateX(58deg);
  border-radius: 0 0 2.4vmin 2.4vmin;
  /* Aluminio cepillado: el rayado fino, el canto biselado que agarra la luz
     arriba y el borde oscuro de abajo. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0 .5%, transparent .5%),
    linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1.2%, transparent 1.2%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
    linear-gradient(178deg, #C9CFD6 0%, #B2BAC2 16%, #9DA5AE 50%, #8A929B 76%, #6C747D 100%);
  box-shadow: 0 1.4vmin 3vmin rgba(0, 0, 0, .5),
              inset 0 0 3vmin rgba(0, 0, 0, .12);
}
/* la luz de la pantalla cayendo sobre el teclado */
.note__base::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(214, 240, 255, .3) 0%, transparent 46%);
  pointer-events: none;
}
.note__teclado {
  position: absolute; left: 8%; right: 8%; top: 12%; height: 44%;
  border-radius: 1vmin;
  background:
    repeating-linear-gradient(90deg, #3A414A 0 3.6%, #6E767F 3.6% 4.4%),
    repeating-linear-gradient(180deg, #3A414A 0 15%, #6E767F 15% 18%);
  opacity: .88;
}
.note__trackpad {
  position: absolute; left: 34%; width: 32%; top: 62%; height: 26%;
  border-radius: .8vmin;
  background: linear-gradient(180deg, #C4CAD0, #A9B1B8);
  box-shadow: inset 0 0 0 .18vmin rgba(0, 0, 0, .22);
}

/* la tapa: bisagra abajo. Cerrada -108deg, abierta 8deg. */
.note__tapa {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  animation: note-tapa 20s linear infinite;
}
@keyframes note-tapa {
  0%, 23%   { transform: rotateX(-122deg) translateZ(-1.2vmin); }
  30%, 100% { transform: rotateX(8deg) translateZ(0); }
}

.note__espalda, .note__frente {
  position: absolute; inset: 0;
  border-radius: 2.4vmin 2.4vmin .5vmin .5vmin;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.note__espalda {
  transform: rotateY(180deg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .16) 0%, transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(152deg, #BCC4CB 0%, #A2AAB2 34%, #8E969E 62%, #767E86 100%);
  box-shadow: inset 0 0 0 .18vmin rgba(255, 255, 255, .3),
              inset 0 -1vmin 2vmin rgba(0, 0, 0, .18);
}
.note__frente {
  padding: 1.5vmin 1.4vmin 2.6vmin;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0 .45%, transparent .45%),
    linear-gradient(160deg, #2E353D 0%, #232930 46%, #171B21 100%);
  box-shadow: inset 0 0 0 .18vmin rgba(255, 255, 255, .14),
              0 .6vmin 2.4vmin rgba(0, 0, 0, .55);
}

.note__pantalla {
  position: relative;
  width: 100%; height: 100%;
  border-radius: .6vmin;
  overflow: hidden;
  background: #FFFFFF;
}
/* el reflejo del vidrio: una franja de luz cruzada y un oscurecido en los
   bordes. Sin esto la pantalla parece un recorte de papel blanco. */
.note__vidrio {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(107deg,
      rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .17) 38%,
      rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(130% 96% at 50% 0%, rgba(255, 255, 255, .14), transparent 56%);
  box-shadow: inset 0 0 3vmin rgba(10, 18, 32, .3);
}

/* el fogonazo del impacto */
.note__flash {
  position: absolute; inset: 0; z-index: 6;
  background: #FFFFFF;
  animation: note-flash 20s linear infinite;
  pointer-events: none;
}
@keyframes note-flash {
  0%, 29.8% { opacity: 0; }
  30.6%     { opacity: 1; }
  33.5%     { opacity: 0; }
  100%      { opacity: 0; }
}

/* ============================ lo que se ve en la pantalla ============= */
.web {
  position: absolute; inset: 0;
  display: flex;
  width: 300%;
  animation: web-carrusel 20s linear infinite, web-visible 20s linear infinite;
}
@keyframes web-carrusel {
  0%, 41%   { transform: translateX(0); }
  43%, 53%  { transform: translateX(-33.3333%); }
  55%, 100% { transform: translateX(-66.6666%); }
}
@keyframes web-visible {
  0%, 30.8% { opacity: 0; }
  32.4%, 76% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

.web__pag {
  position: relative;
  width: 33.3333%; height: 100%;
  overflow: hidden;
  background: #FFFFFF;
  font-size: 1vmin;              /* todo adentro mide en em: escala solo */
}
.web__rollo { position: absolute; inset: 0 0 auto 0; }

/* barra de navegacion de la web ficticia */
.web__barra {
  display: flex; align-items: center; gap: .5em;
  padding: .55em .9em;
  background: #0E1526;
}
.web__punto { width: .45em; height: .45em; border-radius: 50%; background: #FF5F57; }
.web__punto:nth-child(2) { background: #FEBC2E; }
.web__punto:nth-child(3) { background: #28C840; }
.web__url {
  flex: 1; height: .8em; margin-left: .5em; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}
.web__menu { display: flex; gap: .45em; }
.web__menu i { display: block; width: 1.5em; height: .4em; border-radius: 999px; background: rgba(34, 232, 255, .5); }

/* --- pagina 1: catalogo --- */
.cat__hero {
  height: 7em;
  background: linear-gradient(115deg, #0E1526 0%, #103A4A 55%, #22E8FF 190%);
  display: flex; flex-direction: column; justify-content: center; gap: .5em;
  padding: 0 1.4em;
}
.cat__hero b { display: block; width: 11em; height: 1.1em; border-radius: .2em; background: rgba(255, 255, 255, .9); }
.cat__hero i { display: block; width: 7em; height: .55em; border-radius: .2em; background: rgba(34, 232, 255, .75); }
.cat__hero u { display: block; width: 4.4em; height: 1.5em; border-radius: 999px; background: #22E8FF; margin-top: .3em; }

.cat__filtros { display: flex; gap: .5em; padding: 1em 1.4em .6em; }
.cat__filtros i { display: block; width: 3.2em; height: 1.1em; border-radius: 999px; background: #E7EEF3; }
.cat__filtros i:first-child { background: #0E7C90; width: 2.4em; }

.cat__grilla {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .9em; padding: .4em 1.4em 1.4em;
}
.cat__ficha { display: grid; gap: .38em; }
.cat__foto {
  height: 5.4em; border-radius: .45em;
  background: linear-gradient(145deg, #DDE7EE, #B9C9D6);
  position: relative; overflow: hidden;
}
.cat__foto::after {
  content: ""; position: absolute; left: 22%; top: 24%; right: 22%; bottom: 24%;
  border-radius: .3em;
  background: linear-gradient(135deg, rgba(14, 124, 144, .55), rgba(34, 232, 255, .35));
}
.cat__ficha b { display: block; height: .5em; width: 82%; border-radius: .2em; background: #C9D6DF; }
.cat__ficha i { display: block; height: .5em; width: 44%; border-radius: .2em; background: #0E7C90; }
.cat__ficha:nth-child(3n+2) .cat__foto { background: linear-gradient(145deg, #E6DDD3, #CDBBA8); }
.cat__ficha:nth-child(3n) .cat__foto  { background: linear-gradient(145deg, #D9E3DC, #AFC6BB); }

/* --- pagina 2: formulario --- */
.for__cuerpo {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4em;
  padding: 1.6em 1.4em 2em;
  background: linear-gradient(180deg, #F3F7FA, #FFFFFF 60%);
}
.for__discurso { display: grid; gap: .5em; align-content: start; }
.for__discurso u { display: block; width: 5em; height: 1.1em; border-radius: 999px; background: #D6EDF3; }
.for__discurso b { display: block; height: 1.05em; border-radius: .2em; background: #10394A; }
.for__discurso b:nth-of-type(2) { width: 76%; }
.for__discurso i { display: block; height: .48em; border-radius: .2em; background: #C7D5DE; }
.for__discurso i:last-of-type { width: 62%; }

.for__tarjeta {
  display: grid; gap: .62em;
  padding: 1em; border-radius: .7em;
  background: #FFFFFF;
  box-shadow: 0 .6em 1.6em rgba(16, 57, 74, .16);
}
.for__pastilla {
  height: 1.9em; border-radius: 999px;
  background: #FFFFFF; border: .13em solid #DCE6EC;
  position: relative;
}
.for__pastilla::after {
  content: ""; position: absolute; left: .8em; top: .55em;
  width: 45%; height: .45em; border-radius: .2em; background: #C9D6DF;
}
.for__fila { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.for__area {
  height: 4.2em; border-radius: .5em;
  background: #FFFFFF; border: .13em solid #DCE6EC;
}
.for__boton { height: 1.9em; border-radius: 999px; background: #22E8FF; }
.for__legal { height: .45em; width: 70%; border-radius: .2em; background: #D5E0E7; }

/* --- pagina 3: KPI --- */
.kpi__cuerpo { padding: 1.3em 1.4em; background: linear-gradient(180deg, #F5F9FB, #FFFFFF); }
.kpi__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.kpi__tarjeta {
  padding: .7em; border-radius: .5em; background: #FFFFFF;
  box-shadow: 0 .3em .9em rgba(16, 57, 74, .12);
  display: grid; gap: .35em;
}
.kpi__tarjeta i { display: block; width: 60%; height: .4em; border-radius: .2em; background: #C9D6DF; }
.kpi__tarjeta b { display: block; width: 80%; height: 1em; border-radius: .2em; background: #10394A; }
.kpi__tarjeta u { display: block; width: 38%; height: .38em; border-radius: .2em; background: #17A67C; }

.kpi__panel {
  margin-top: .8em; padding: .8em;
  border-radius: .5em; background: #FFFFFF;
  box-shadow: 0 .3em .9em rgba(16, 57, 74, .12);
  overflow: hidden;   /* la flecha crece adentro del panel, no se le escapa */
}
.kpi__grafico {
  display: block; width: 100%; height: 9.5em;
  overflow: visible;
  transform-origin: 6% 92%;
  animation: kpi-crece 20s linear infinite;
}
@keyframes kpi-crece {
  0%, 55.6% { opacity: 0; transform: scale(.62); }
  57%       { opacity: 1; transform: scale(.72); }
  67%       { opacity: 1; transform: scale(1.2); }
  70%, 100% { opacity: 1; transform: scale(1.32); }
}
.kpi__filas { display: grid; gap: .5em; margin-top: .8em; }
.kpi__fila {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: .6em; align-items: center;
  padding: .5em .7em; border-radius: .4em; background: #FFFFFF;
  box-shadow: 0 .2em .6em rgba(16, 57, 74, .08);
}
.kpi__fila i { display: block; height: .42em; border-radius: .2em; background: #C9D6DF; }
.kpi__fila i:nth-child(2) { background: #A8BCC8; }
.kpi__fila i:last-child { background: #17A67C; width: 70%; }

.kpi__linea {
  fill: none; stroke: #17A67C; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200;
  animation: kpi-linea 20s linear infinite;
}
@keyframes kpi-linea {
  0%, 56%  { stroke-dashoffset: 200; }
  67%      { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}
.kpi__punta { fill: #17A67C; transform-box: fill-box; transform-origin: 50% 50%; animation: kpi-punta 20s linear infinite; }
@keyframes kpi-punta {
  0%, 66.2% { opacity: 0; transform: scale(.3); }
  67.4%     { opacity: 1; transform: scale(1.35); }
  68.4%, 100% { opacity: 1; transform: scale(1); }
}
.kpi__barra { fill: #DCEAF1; }
.kpi__eje { stroke: #E2EAEF; stroke-width: 2; }

/* ------------------------------------------------ la sala, en video -------
   Si en config.js hay un archivo de video, sitio.js lo enchufa y marca la
   escena con data-sala="video". Ahi el decorado dibujado se apaga y manda el
   video; el logo, el polvo y la onda siguen siendo CSS por encima.

   Si no hay video, o si el navegador no lo puede reproducir, no pasa nada:
   queda el decorado dibujado, que funciona solo. */
.escena__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}
.escena[data-sala="video"] .escena__video { display: block; }

/* El video trae TODO: la sala, el emblema, el estallido y el logo del
   principio y el final. Asi que cuando manda el video no queda nada del
   decorado dibujado ni del lienzo, o se verian dos logos encimados. */
.escena[data-sala="video"] .escena__camara,
.escena[data-sala="video"] .marca-viva,
.escena[data-sala="video"] .polvo,
.escena[data-sala="video"] .escena__onda,
.escena[data-sala="video"] .escena__lienzo { display: none; }

/* aparece una sola vez, al cargar; despues el bucle es del propio video */
.escena__video { opacity: 0; transition: opacity .6s ease; }
.escena[data-sala="video"] .escena__video { opacity: 1; }

/* con el video la penumbra y el grano molestan menos, pero siguen sirviendo
   para pegar el logo al decorado */
.escena[data-sala="video"] .escena__grano { opacity: .08; }

@media (prefers-reduced-motion: reduce) {
  .escena__video { display: none !important; transition: none; }
}

/* === 3-logo-vivo.css === */

/* ==================== el logo, que es el que actua en la escena ========= */

/* Cada movimiento vive en su propia capa: asi la posicion, el giro y la
   vibracion se combinan sin pisarse. */
.marca-viva {
  position: absolute; inset: 0; pointer-events: none;
  /* Todo el logo (baldosa, nucleo, monograma y polvo) se mide contra --esc.
     En el celular la pantalla es angosta y alta: si no se agranda, el logo
     queda perdido en el medio. Un solo numero y no hay que repetir ni un
     fotograma de la coreografia. */
  --esc: 1;
}
@media (max-aspect-ratio: 3/4) { .marca-viva, .polvo { --esc: 1.5; } }

/* la baldosa negra del logo principal */
.mv-baldosa {
  position: absolute; left: 50%; top: 50%;
  width: calc(40vmin * var(--esc)); height: calc(15vmin * var(--esc));
  margin: calc(-7.5vmin * var(--esc)) 0 0 calc(-20vmin * var(--esc));
  border-radius: calc(2.6vmin * var(--esc));
  background: rgba(6, 10, 18, .82);
  box-shadow: inset 0 0 0 .18vmin rgba(34, 232, 255, .22),
              0 2vmin 6vmin rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: baldosa-vida 20s linear infinite;
}
@keyframes baldosa-vida {
  0%, 6%    { opacity: 1; transform: scale(1); }
  10%, 85%  { opacity: 0; transform: scale(1.5); }
  89%, 100% { opacity: 1; transform: scale(1); }
}

/* --- el nucleo --- */
.mv-nucleo {
  position: absolute; left: 50%; top: 50%;
  width: calc(30vmin * var(--esc)); height: calc(30vmin * var(--esc));
  margin: calc(-15vmin * var(--esc)) 0 0 calc(-15vmin * var(--esc));
  animation: nucleo-camino 20s linear infinite;
  will-change: transform;
}
.mv-nucleo__giro  { width: 100%; height: 100%; animation: nucleo-giro 20s linear infinite; }
.mv-nucleo__vibra { width: 100%; height: 100%; animation: nucleo-vibra 20s linear infinite; }
.mv-nucleo svg    { width: 100%; height: 100%; filter: drop-shadow(0 0 2.4vmin rgba(34, 232, 255, .45)); }

/* La baldosa mide 40vmin: el nucleo va a la izquierda y el monograma a la
   derecha. Esas dos posiciones son las del cuadro 0% y las del 100%. */
@keyframes nucleo-camino {
  0%, 6%  { opacity: 1; transform: translate(calc(-11.4vmin * var(--esc)), 0) scale(.5); }
  10%     { transform: translate(calc(-8.4vmin * var(--esc)), 0) scale(.56); }
  14%     { transform: translate(0, 0) scale(.84); animation-timing-function: cubic-bezier(.3, .8, .4, 1); }
  21%     { transform: translate(0, 0) scale(1.04); }
  25%     { transform: translate(0, 0) scale(.6); }
  28.6%   { opacity: 1; transform: translate(0, 0) scale(.13); }
  30.5%   { opacity: 1; transform: translate(0, 0) scale(.035); }
  31.4%   { opacity: 0; transform: translate(0, 0) scale(.02); }
  68%     { opacity: 0; transform: translate(0, 0) scale(.02); }
  69.6%   { opacity: 1; transform: translate(0, 0) scale(.06); }
  73%     { opacity: 1; transform: translate(0, 0) scale(.32); }
  77%     { opacity: 1; transform: translate(0, 0) scale(1.18); }
  83%     { transform: translate(0, 0) scale(1.02); }
  86%     { transform: translate(calc(-11.4vmin * var(--esc)), 0) scale(.5); }
  100%    { opacity: 1; transform: translate(calc(-11.4vmin * var(--esc)), 0) scale(.5); }
}

/* Nueve vueltas enteras en todo el ciclo: 3240 es multiplo de 360, asi que
   al volver al cuadro 0 el nucleo esta exactamente igual que al empezar. */
@keyframes nucleo-giro {
  0%, 10%   { transform: rotate(0deg); }
  /* mientras crece y se centra da dos vueltas, frenando de a poco. Aca no
     vibra: el zigzag quedaba sucio contra el crecimiento. */
  13%       { transform: rotate(400deg); }
  16%       { transform: rotate(632deg); }
  19%       { transform: rotate(720deg); }
  21%       { transform: rotate(720deg); }
  28.6%     { transform: rotate(1620deg); }
  31.4%     { transform: rotate(1800deg); }
  68%       { transform: rotate(1800deg); }
  73%       { transform: rotate(1980deg); }
  77%       { transform: rotate(2160deg); }
  79%       { transform: rotate(2880deg); }
  80.6%     { transform: rotate(3420deg); }
  81.8%     { transform: rotate(3780deg); }
  82.7%     { transform: rotate(3960deg); }
  83%, 100% { transform: rotate(3960deg); }
}

/* Una sola tanda de vibracion, la del final. Al principio el nucleo solo
   gira: el zigzag de la entrada ensuciaba el crecimiento. */
@keyframes nucleo-vibra {
  0%, 77%   { transform: translate(0, 0); }
  78%       { transform: translate(1.2vmin, 0); }
  79.1%     { transform: translate(-1.05vmin, 0); }
  80.2%     { transform: translate(.85vmin, 0); }
  81.2%     { transform: translate(-.66vmin, 0); }
  82.1%     { transform: translate(.44vmin, 0); }
  82.6%     { transform: translate(-.24vmin, 0); }
  83%, 100% { transform: translate(0, 0); }
}

/* --- el monograma "vefur" --- */
.mv-palabra {
  position: absolute; left: 50%; top: 50%;
  width: calc(40vmin * var(--esc)); height: calc(16.34vmin * var(--esc));
  margin: calc(-8.17vmin * var(--esc)) 0 0 calc(-20vmin * var(--esc));
  transform: translate(calc(7vmin * var(--esc)), 0) scale(.6);
}
.mv-palabra__vela {
  width: 100%; height: 100%;
  animation: palabra-vela 20s linear infinite;
}
.mv-palabra svg { width: 100%; height: 100%; }

@keyframes palabra-vela {
  0%, 6%   { opacity: 1; filter: blur(0); transform: scale(1) translateX(0); }
  7.4%     { opacity: .9; filter: blur(.6px); transform: scale(1.05) translateX(.7vmin); }
  9.6%     { opacity: 0; filter: blur(7px); transform: scale(1.18) translateX(2.6vmin); }
  10%, 86% { opacity: 0; filter: blur(7px); transform: scale(1.18) translateX(2.6vmin); }
  87.4%    { opacity: .85; filter: blur(2px); transform: scale(1.06) translateX(.8vmin); }
  88.8%    { opacity: 1; filter: blur(0); transform: scale(1) translateX(0); }
  100%     { opacity: 1; filter: blur(0); transform: scale(1) translateX(0); }
}

/* ------------------------------- el polvo nanotecnologico -------------- */
/* Dos nubes de particulas. Cada una explota y despues se vuelve a juntar,
   que es lo que hace que el logo parezca armarse solo. Las posiciones las
   escribe el HTML en --ox/--oy (de donde sale) y --dx/--dy (hacia donde
   vuela); asi cada particula tiene su recorrido y no hace falta JavaScript. */
.polvo { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.polvo span {
  position: absolute; left: 0; top: 0;
  width: var(--tam, .5vmin); height: var(--tam, .5vmin);
  margin: calc(var(--tam, .5vmin) / -2) 0 0 calc(var(--tam, .5vmin) / -2);
  border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 .8vmin rgba(34, 232, 255, .95);
  opacity: 0;
  will-change: transform, opacity;
}

.polvo--nucleo { left: 50%; }
.polvo--nucleo span { animation: polvo-nucleo 20s linear infinite; }
@keyframes polvo-nucleo {
  0%, 30.2% { opacity: 0; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.25); }
  30.9%     { opacity: 1; transform: translate(calc((var(--ox) + var(--dx) * .22) * var(--esc)), calc((var(--oy) + var(--dy) * .22) * var(--esc))) scale(1); }
  34.6%     { opacity: 0; transform: translate(calc((var(--ox) + var(--dx)) * var(--esc)), calc((var(--oy) + var(--dy)) * var(--esc))) scale(.35); }
  68.2%     { opacity: 0; transform: translate(calc((var(--ox) + var(--dx)) * var(--esc)), calc((var(--oy) + var(--dy)) * var(--esc))) scale(.35); }
  69.2%     { opacity: 1; transform: translate(calc((var(--ox) + var(--dx) * .82) * var(--esc)), calc((var(--oy) + var(--dy) * .82) * var(--esc))) scale(1); }
  71.8%     { opacity: 1; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.9); }
  72.6%     { opacity: 0; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.25); }
  100%      { opacity: 0; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.25); }
}

/* la del monograma va corrida a su lugar dentro de la baldosa */
.polvo--palabra { transform: translate(calc(7vmin * var(--esc)), 0); }
.polvo--palabra span { animation: polvo-palabra 20s linear infinite; }
@keyframes polvo-palabra {
  0%, 6.4%  { opacity: 0; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.3); }
  7.6%      { opacity: 1; transform: translate(calc((var(--ox) + var(--dx) * .3) * var(--esc)), calc((var(--oy) + var(--dy) * .3) * var(--esc))) scale(1); }
  10.6%     { opacity: 0; transform: translate(calc((var(--ox) + var(--dx)) * var(--esc)), calc((var(--oy) + var(--dy)) * var(--esc))) scale(.3); }
  85.6%     { opacity: 0; transform: translate(calc((var(--ox) + var(--dx)) * var(--esc)), calc((var(--oy) + var(--dy)) * var(--esc))) scale(.3); }
  86.8%     { opacity: 1; transform: translate(calc((var(--ox) + var(--dx) * .78) * var(--esc)), calc((var(--oy) + var(--dy) * .78) * var(--esc))) scale(1); }
  88.6%     { opacity: 1; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.9); }
  89.2%     { opacity: 0; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.3); }
  100%      { opacity: 0; transform: translate(calc(var(--ox) * var(--esc)), calc(var(--oy) * var(--esc))) scale(.3); }
}

/* la onda de choque contra la pantalla */
.escena__onda {
  position: absolute; left: 50%; top: 50%;
  width: 20vmin; height: 20vmin; margin: -10vmin 0 0 -10vmin;
  border-radius: 50%;
  border: .35vmin solid rgba(34, 232, 255, .85);
  animation: onda 20s linear infinite;
  pointer-events: none;
}
@keyframes onda {
  0%, 30.4% { opacity: 0; transform: scale(.1); }
  30.8%     { opacity: 1; transform: scale(.3); }
  34%       { opacity: 0; transform: scale(3.4); }
  68.4%     { opacity: 0; transform: scale(3.4); }
  68.8%     { opacity: .9; transform: scale(2.6); }
  71.6%     { opacity: 0; transform: scale(.25); }
  100%      { opacity: 0; transform: scale(.1); }
}

/* ------------------------------------------------- la senal de scrolleo */
.escena__baja {
  position: absolute; left: 50%; bottom: 26px; z-index: 5;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  color: rgba(234, 246, 248, .62);
  font-family: var(--tipo-titulo); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: calc(1 - var(--p, 0) * 2.4);
  pointer-events: none;
}
.escena__baja i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--cian));
  animation: baja 1.9s ease-in-out infinite;
}
@keyframes baja {
  0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* Quien pidio menos movimiento ve el logo quieto y la sala apagada: la
   pagina se entiende igual y no se le mueve nada en la cara. */
@media (prefers-reduced-motion: reduce) {
  .escena__trama, .escena__aureola, .escena__camara, .note, .note__tapa,
  .web, .kpi__grafico, .kpi__linea, .kpi__punta, .note__flash,
  .mv-baldosa, .mv-nucleo, .mv-nucleo__giro, .mv-nucleo__vibra,
  .mv-palabra__vela, .polvo span, .escena__onda, .escena__baja i {
    animation: none !important;
  }
  .escena__camara, .escena__onda, .polvo span, .note__flash { opacity: 0; }
  .mv-nucleo { transform: translate(calc(-11.4vmin * var(--esc)), 0) scale(.5); }
  html { scroll-behavior: auto; }
}

/* === 4-secciones.css === */

/* ======================================================================
   EL SITIO, DE ACA PARA ABAJO
   ====================================================================== */

/* El banner es fijo y ocupa una pantalla: este hueco es el lugar que le
   corresponde en el flujo, para que la primera seccion arranque despues. */
.hueco-banner { height: 100vh; }

.seccion { padding: 92px 0; position: relative; }
.seccion--carbon { background: var(--carbon); }

/* una linea de luz arriba de cada seccion oscura */
.seccion--carbon::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde-vivo), transparent);
}

.sello {
  display: inline-block; margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio-pastilla);
  background: rgba(34, 232, 255, .07);
  color: var(--cian);
  font-family: var(--tipo-titulo); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}

.titulo-seccion {
  font-size: clamp(30px, 4.4vw, 54px);
  letter-spacing: -.015em;
  margin-bottom: 14px;
}
.bajada {
  max-width: 62ch; margin: 0 0 4px;
  font-size: 17px; color: var(--tenue);
}

/* aparicion al hacer scroll, escalonada con --retraso desde el HTML */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1) var(--retraso, 0s),
              transform .7s cubic-bezier(.2, .7, .3, 1) var(--retraso, 0s);
}
[data-revelar="izquierda"] { transform: translateX(-36px); }
[data-revelar="derecha"]   { transform: translateX(36px); }
[data-revelar][data-visible="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------ desarrollos a medida */
.desarrollos__cabecera { text-align: center; margin-bottom: 54px; }
.desarrollos__cabecera .bajada { margin-inline: auto; }

/* Las dos columnas del ejemplo: a la izquierda el diseno, a la derecha el
   desarrollo. La linea del medio solo existe en escritorio. */
.columnas {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: 0 48px; align-items: start;
  /* Cuatro filas -el titulo y las tres tarjetas- que comparten las dos
     columnas. Cada columna las hereda con `subgrid`, y por eso las seis
     tarjetas terminan midiendo lo mismo aunque los textos sean distintos.
     Sin esto cada columna se mide sola y quedan escalonadas. */
  grid-template-rows: auto repeat(3, auto);
}
.columnas > [data-revelar] {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  gap: 14px;
}
.columnas__linea { grid-row: 1 / -1; }
.columnas__linea {
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(34, 232, 255, .5) 20%, rgba(34, 232, 255, .5) 80%, transparent);
}
.columnas__titulo {
  font-family: var(--tipo-titulo); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cian);
  margin: 0 0 22px;
}

.servicio {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  padding: 20px 20px 20px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: linear-gradient(180deg, rgba(14, 21, 38, .9), rgba(10, 16, 32, .9));
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* el aire entre tarjetas lo pone el `gap` de la columna, no el margen: con
   subgrid, un margen desalinearia las filas */
.servicio:hover {
  border-color: var(--borde-vivo);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.servicio__icono {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(34, 232, 255, .09);
  border: 1px solid var(--borde-vivo);
  color: var(--cian);
}
.servicio__icono svg { width: 22px; height: 22px; }
.servicio h3 { font-size: 17.5px; margin: 2px 0 5px; }
.servicio p { margin: 0; font-size: 14.5px; color: var(--tenue); }

/* --- el llamado a la accion --- */
.llamado { margin-top: 56px; text-align: center; }
.boton-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 40px;
  border: 0; border-radius: var(--radio-pastilla);
  background: linear-gradient(120deg, #63F0FF, var(--cian) 55%, #12C7E0);
  color: var(--negro);
  font-family: var(--tipo-titulo); font-size: 17px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(34, 232, 255, .34);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.boton-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(34, 232, 255, .5);
  filter: brightness(1.06);
}
.boton-cta:active { transform: translateY(0); }
.boton-cta svg { width: 19px; height: 19px; }

.llamado__gratis {
  display: block; margin-top: 14px;
  font-family: var(--tipo-titulo); font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cian);
}
.llamado__nota { margin: 6px 0 0; font-size: 13.5px; color: var(--tenue); }

/* --------------------------------------------------------- formulario */
.bloque-form__grilla {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: 56px; align-items: start;
}

.discurso { padding-top: 8px; }
.discurso h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -.015em; }
.discurso p { font-size: 17px; color: var(--tenue); max-width: 46ch; }
.discurso p + p { margin-top: 14px; }
.discurso__remate {
  margin-top: 28px; padding-left: 18px;
  border-left: 3px solid var(--cian);
  font-weight: 500; color: var(--hielo);
}
.discurso__cuenta {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--borde);
}
.discurso__cuenta div { min-width: 110px; }
.discurso__cuenta b {
  display: block;
  font-family: var(--tipo-titulo); font-size: 25px; font-weight: 600; color: var(--cian);
}
.discurso__cuenta span { font-size: 13.5px; color: var(--tenue); }

.tarjeta-form {
  padding: 34px 34px 36px;
  border: 1px solid var(--borde);
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(34, 232, 255, .08), transparent 58%),
    var(--carbon-alto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.tarjeta-form h3 { font-size: 20px; margin-bottom: 4px; }
.tarjeta-form__nota { margin: 0 0 24px; font-size: 14px; color: var(--tenue); }

.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__campo { margin-bottom: 20px; }

/* --- pastillas con etiqueta flotante, igual que en Dizar --- */
.pastilla { position: relative; }
.pastilla input {
  width: 100%; height: 64px;
  padding: 28px 20px 8px;      /* el aire de arriba es para la etiqueta */
  background: rgba(6, 10, 18, .72);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-pastilla);
  font-family: var(--tipo-texto); font-size: 15px; color: var(--hielo);
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pastilla label {
  position: absolute; left: 21px; top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 42px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--apagado); font-size: 15px;
  pointer-events: none;
  transition: top .16s ease, font-size .16s ease, color .16s ease, transform .16s ease;
}
.pastilla input:focus + label,
.pastilla input:not(:placeholder-shown) + label {
  top: 9px; transform: translateY(0);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--cian);
}
.pastilla input:focus {
  border-color: var(--cian);
  background: rgba(6, 10, 18, .95);
  box-shadow: 0 0 0 4px rgba(34, 232, 255, .13);
}

/* --- la consulta, con su contador --- */
.consulta { position: relative; }
.consulta textarea {
  width: 100%; min-height: 158px; resize: vertical;
  padding: 32px 20px 14px;
  background: rgba(6, 10, 18, .72);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-caja);
  font-family: var(--tipo-texto); font-size: 15px; line-height: 1.55;
  color: var(--hielo); outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.consulta textarea:focus {
  border-color: var(--cian);
  box-shadow: 0 0 0 4px rgba(34, 232, 255, .13);
}
.consulta label {
  position: absolute; left: 21px; top: 20px;
  color: var(--apagado); font-size: 15px; pointer-events: none;
  transition: top .16s ease, font-size .16s ease, color .16s ease;
}
.consulta textarea:focus + label,
.consulta textarea:not(:placeholder-shown) + label {
  top: 9px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--cian);
}
.contador {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-left: 4px;
  font-size: 12.5px; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.contador__usados { font-weight: 600; color: var(--cian); }
.contador__barra { width: 1px; height: 13px; background: var(--borde); flex: none; }
.contador[data-lleno="true"], .contador[data-lleno="true"] .contador__usados {
  color: var(--rojo); font-weight: 600;
}

/* --- estado de error --- */
.form__campo[data-error="true"] .pastilla input,
.form__campo[data-error="true"] .consulta textarea {
  border-color: var(--rojo);
  background: var(--rojo-fondo);
}
.form__campo[data-error="true"] .pastilla label,
.form__campo[data-error="true"] .consulta label { color: var(--rojo); }

.form__aviso {
  display: none;
  margin: 8px 0 0 20px;
  font-size: 12.5px; font-weight: 500; color: var(--rojo);
}
.form__campo[data-error="true"] .form__aviso { display: block; }

/* --- conformidad legal --- */
.conforme {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 0;
  font-size: 13.5px; line-height: 1.55; color: var(--tenue);
}
.conforme input {
  appearance: none; margin: 2px 0 0; flex: none;
  width: 21px; height: 21px;
  background: rgba(6, 10, 18, .7);
  border: 2px solid var(--apagado); border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.conforme input:checked {
  background: var(--cian) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060A12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--cian);
}
.conforme label { cursor: pointer; }
.conforme a { color: var(--cian); text-decoration: underline; text-underline-offset: 3px; }
.form__campo[data-error="true"] .conforme input { border-color: var(--rojo); background-color: var(--rojo-fondo); }

/* --- resumen de lo que falta --- */
.form__alerta {
  display: none;
  align-items: flex-start; gap: 12px;
  margin-bottom: 22px; padding: 15px 18px;
  background: var(--rojo-fondo);
  border: 1.5px solid rgba(255, 90, 110, .4);
  border-left-width: 5px;
  border-radius: 12px;
  color: #FFC9D1; font-size: 14px;
}
.form__alerta[data-visible="true"] { display: flex; }
.form__alerta svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--rojo); }
.form__alerta strong { display: block; margin-bottom: 3px; color: #FFE3E7; font-family: var(--tipo-titulo); }
.form__alerta ul { margin: 4px 0 0; padding-left: 18px; }

.form__exito { display: none; text-align: center; padding: 30px 10px; }
.form__exito[data-visible="true"] { display: block; }
.form__exito svg { width: 56px; height: 56px; color: var(--verde); margin: 0 auto 14px; }
.form__exito p { color: var(--tenue); }

.boton-enviar {
  width: 100%; margin-top: 24px; padding: 18px 24px;
  border: 0; border-radius: var(--radio-pastilla);
  background: linear-gradient(120deg, #63F0FF, var(--cian) 55%, #12C7E0);
  color: var(--negro);
  font-family: var(--tipo-titulo); font-size: 16.5px; font-weight: 600;
  box-shadow: 0 8px 26px rgba(34, 232, 255, .3);
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.boton-enviar:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(34, 232, 255, .45); filter: brightness(1.05); }
.boton-enviar:active { transform: translateY(0); }
.boton-enviar[disabled] { opacity: .55; cursor: progress; transform: none; }

.form__obligatorios { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--tenue); }
.obligatorio { color: var(--cian); font-weight: 700; }

/* la información del artículo 6 de la Ley 25.326, al pie del formulario */
.form__ley {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 12px; line-height: 1.55;
  color: var(--apagado);
}
.form__ley a { color: var(--tenue); text-decoration: underline; text-underline-offset: 2px; }
.form__ley a:hover { color: var(--cian); }

/* === 5-contacto-pie.css === */

/* ------------------------------------------------------------- contacto */
.contacto__grilla {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 56px; align-items: center;
}
.contacto h2 { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.015em; }
.contacto p { color: var(--tenue); max-width: 46ch; }

.conectados { list-style: none; margin: 0; padding: 0; }
.conectados li + li { margin-top: 10px; }

/* El enlace se agranda apenas y se le carga una barra celeste de izquierda
   a derecha, igual que en Weit Sports. */
.enlace-carga {
  position: relative;
  display: inline-flex; align-items: center; gap: 15px;
  padding: 13px 18px 15px; margin-left: -18px;
  border-radius: 14px;
  color: var(--hielo); text-decoration: none;
  transition: color .24s ease, transform .24s ease, background .24s ease;
  transform-origin: left center;
}
.enlace-carga::after {
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: 8px;
  height: 2px; background: var(--cian);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.enlace-carga:hover,
.enlace-carga:focus-visible {
  background: rgba(34, 232, 255, .06);
  transform: scale(1.035);
}
.enlace-carga:hover::after,
.enlace-carga:focus-visible::after { transform: scaleX(1); }

.enlace-carga__icono {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(34, 232, 255, .08);
  border: 1px solid var(--borde-vivo);
  color: var(--cian);
  transition: transform .24s ease, background .24s ease;
}
.enlace-carga__icono svg { width: 23px; height: 23px; }
.enlace-carga:hover .enlace-carga__icono {
  transform: scale(1.12);
  background: rgba(34, 232, 255, .16);
}
.enlace-carga b {
  display: block;
  font-family: var(--tipo-titulo); font-size: 17px; font-weight: 500;
}
.enlace-carga small { display: block; font-size: 12.5px; color: var(--tenue); }

/* el dibujo de la derecha: los mismos hilos del logo, en grande */
.contacto__globos { display: grid; place-items: center; }
.contacto__globos svg { width: 100%; max-width: 420px; opacity: .9; }

/* ---------------------------------------------- WhatsApp siempre a mano */
/* ------------------------------------------- WhatsApp fijo, con su QR */
/* Dos caminos para lo mismo, uno arriba del otro: el redondo verde abre el
   chat (Web en la computadora, la app en el telefono) y el chiquito de
   arriba despliega el QR hacia la izquierda, que es el camino de quien no
   quiere loguearse en WhatsApp Web. */
.wa-fijo {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: grid; justify-items: center; gap: 9px;
}

.whatsapp-fijo {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #FFFFFF; border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .35);
  transition: transform .22s ease, box-shadow .22s ease;
}
.whatsapp-fijo svg { width: 28px; height: 28px; fill: #25D366; }
.whatsapp-fijo:hover { transform: scale(1.09); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }

.wa-fijo__llave {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--borde-vivo); border-radius: 50%;
  background: rgba(6, 10, 18, .9); color: var(--cian);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}
.wa-fijo__llave svg { width: 16px; height: 16px; }
.wa-fijo__llave:hover { transform: scale(1.1); background: rgba(34, 232, 255, .12); }
.wa-fijo__llave[aria-expanded="true"] { background: var(--cian); color: #06131A; }

/* el panel sale hacia la izquierda, pegado al borde de abajo */
.wa-fijo__panel {
  position: absolute; right: calc(100% + 14px); bottom: 0;
  width: 232px;
  display: grid; justify-items: center; gap: 10px;
  padding: 14px 14px 16px;
  background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
  animation: wa-abre .26s cubic-bezier(.2, .9, .3, 1) both;
}
.wa-fijo__panel[hidden] { display: none; }
@keyframes wa-abre {
  from { opacity: 0; transform: translateX(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.wa-fijo__panel p {
  margin: 0; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: #3C4C58;
}
.wa-fijo__lupa {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; line-height: 0;
}
.wa-fijo__lupa img { display: block; width: 170px; height: 170px; border-radius: 8px; }
.wa-fijo__web {
  font-size: 12.5px; font-weight: 600; color: #0E7C90;
  text-decoration: underline; text-underline-offset: 3px;
}
.wa-fijo__web:hover { color: #0A5D6D; }
.wa-fijo__cerrar {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(12, 21, 38, .07); color: #46586A;
  cursor: pointer;
}
.wa-fijo__cerrar svg { width: 13px; height: 13px; }
.wa-fijo__cerrar:hover { background: rgba(12, 21, 38, .14); }

/* En pantalla angosta no entra al costado: se abre para arriba y ocupa
   todo el ancho que puede sin salirse. */
@media (max-width: 620px) {
  .wa-fijo__panel {
    right: 0; bottom: calc(100% + 12px);
    width: min(232px, calc(100vw - 48px));
  }
  @keyframes wa-abre {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to   { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------- el QR en grande (lupa) */
.qr-lupa {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(4, 8, 14, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: lupa-entra .2s ease both;
}
.qr-lupa[hidden] { display: none; }
@keyframes lupa-entra { from { opacity: 0; } to { opacity: 1; } }

.qr-lupa__caja {
  display: grid; justify-items: center; gap: 14px;
  padding: 22px;
  background: #FFFFFF; border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: lupa-caja .26s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes lupa-caja {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
/* El lado del QR sale de lo que sobre en pantalla: en el celular ocupa casi
   todo el ancho y en el monitor se queda en 340, que ya se escanea de lejos. */
.qr-lupa__caja img {
  display: block;
  width: min(340px, calc(100vw - 104px), calc(100vh - 200px));
  height: auto;
}
.qr-lupa__caja p {
  margin: 0; font-size: 13.5px; font-weight: 600; color: #23323E;
}
.qr-lupa__cerrar {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 9px 26px;
  background: #0E7C90; color: #FFFFFF;
  font: 600 13px/1 var(--tipo-titulo), system-ui, sans-serif;
  letter-spacing: .04em;
}
.qr-lupa__cerrar:hover { background: #0A5D6D; }

/* el codigo de la seccion Contacto, que tambien abre la lupa */
.qr-tarjeta__lupa {
  position: relative; flex: none;          /* si no, el flex se lo come */
  padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0;
  border-radius: 12px;
}
.qr-tarjeta__lupa img { display: block; border-radius: 10px; }
.qr-tarjeta__mas {
  position: absolute; right: -8px; bottom: -8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cian); color: #06131A;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  transition: transform .2s ease;
}
.qr-tarjeta__mas svg { width: 15px; height: 15px; }
.qr-tarjeta__lupa:hover .qr-tarjeta__mas { transform: scale(1.12); }
.qr-tarjeta__pista { display: block; margin-top: 4px; color: var(--cian); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .wa-fijo__panel, .qr-lupa, .qr-lupa__caja { animation: none; }
}

/* ------------------------------------------------------------ prefooter */
.prefooter {
  padding: 62px 0 44px;
  background: #0C1526;
  border-top: 1px solid var(--borde);
}
.prefooter__grilla {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr;
  gap: 48px;
}
.prefooter__logo svg { width: 190px; height: auto; }
.prefooter__lema {
  margin: 20px 0 0; max-width: 36ch;
  font-size: 14.5px; color: var(--tenue);
}
.prefooter h2 {
  margin: 0 0 16px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cian);
}
.prefooter ul { list-style: none; margin: 0; padding: 0; }
.prefooter li + li { margin-top: 2px; }

/* el mismo efecto de barra, en version chica */
.enlace-pre {
  position: relative;
  display: inline-block;
  padding: 7px 4px;
  color: var(--tenue);
  font-size: 15px; text-decoration: none;
  transition: color .22s ease, transform .22s ease;
  transform-origin: left center;
}
.enlace-pre::after {
  content: "";
  position: absolute; left: 4px; right: 4px; bottom: 3px;
  height: 2px; background: var(--cian);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
/* El :hover solo donde hay un puntero de verdad.

   En un celular no hay hover, pero el navegador lo aplica igual al tocar y lo
   deja PEGADO hasta que toques otra cosa: se volvia al prefooter y la barra
   seguia cargada. */
@media (hover: hover) and (pointer: fine) {
  .enlace-pre:hover { color: var(--hielo); transform: scale(1.045); }
  .enlace-pre:hover::after { transform: scaleX(1); }
}
.enlace-pre:focus-visible { color: var(--hielo); transform: scale(1.045); }
.enlace-pre:focus-visible::after { transform: scaleX(1); }

/* Y en pantalla tactil la barra se carga y se descarga sola en tres segundos,
   asi el toque tiene respuesta pero no queda nada prendido. */
@media (hover: none) {
  .enlace-pre:hover::after {
    transform: scaleX(0);
    animation: carga-y-descarga 3s ease forwards;
  }
}
@keyframes carga-y-descarga {
  0%   { transform: scaleX(0); }
  22%  { transform: scaleX(1); }
  68%  { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* --------------- la franja que separa el prefooter del footer ---------- */
/* Una linea gruesa con los tres globos de contacto encima, centrados:
   ---------o--o--o--------- */
.franja {
  position: relative;
  background: #0C1526;
  padding: 4px 0 0;
}
.franja__linea {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px;
  background: linear-gradient(90deg, transparent, rgba(34, 232, 255, .38) 14%, rgba(34, 232, 255, .38) 86%, transparent);
}
.franja__globos {
  position: relative;
  display: flex; justify-content: center; gap: 18px;
  padding: 22px 0;
}
.globo {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0C1526;
  border: 1px solid var(--borde-vivo);
  color: var(--cian);
  transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.globo svg { width: 22px; height: 22px; }
.globo:hover {
  transform: scale(1.16) translateY(-2px);
  background: rgba(34, 232, 255, .12);
  border-color: var(--cian);
  box-shadow: 0 8px 24px rgba(34, 232, 255, .28);
}

/* --------------------------------------------------------------- footer */
.footer {
  padding: 22px 0 26px;
  background: var(--negro);
  border-top: 1px solid var(--borde);
  text-align: center;
}
.footer p { margin: 0; font-size: 13.5px; color: var(--tenue); }
.footer strong { color: var(--hielo); font-weight: 600; letter-spacing: .04em; }

/* -------------------------------------------------------------- cookies */
.aviso-cookies {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 120;
  max-width: 1180px; margin-inline: auto;
  padding: 24px 28px;
  background: var(--carbon-alto);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  display: none;
  gap: 26px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.aviso-cookies[data-visible="true"] { display: flex; animation: subir .35s ease both; }
@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aviso-cookies__texto { flex: 1 1 400px; }
.aviso-cookies h2 { font-size: 18px; margin-bottom: 6px; }
.aviso-cookies p { margin: 0; font-size: 14px; color: var(--tenue); }
.aviso-cookies__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.boton {
  display: inline-block;
  padding: 13px 24px;
  border: 1.5px solid var(--borde-vivo);
  border-radius: var(--radio-pastilla);
  background: transparent; color: var(--cian);
  font-family: var(--tipo-titulo); font-size: 14.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .16s ease, border-color .2s ease;
}
.boton:hover { background: rgba(34, 232, 255, .1); transform: translateY(-2px); }
.boton--lleno { background: var(--cian); border-color: var(--cian); color: var(--negro); font-weight: 600; }
.boton--lleno:hover { background: #63F0FF; border-color: #63F0FF; color: var(--negro); }
.boton--tenue { border-color: var(--borde); color: var(--tenue); }
.boton--tenue:hover { border-color: var(--apagado); background: rgba(255, 255, 255, .05); color: var(--hielo); }

.panel-cookies {
  position: fixed; inset: 0; z-index: 130;
  display: none; place-items: center;
  padding: 24px;
  background: rgba(2, 5, 11, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.panel-cookies[data-visible="true"] { display: grid; }
.panel-cookies__caja {
  width: 100%; max-width: 640px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--carbon-alto);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  overflow: hidden;
  animation: subir .3s ease both;
}
.panel-cookies__cabecera {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--borde);
}
.panel-cookies__cabecera h2 { margin: 0; font-size: 21px; }
.panel-cookies__cerrar {
  margin-left: auto; flex: none;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--tenue);
}
.panel-cookies__cerrar:hover { background: rgba(255, 255, 255, .07); color: var(--hielo); }
.panel-cookies__cuerpo { padding: 8px 28px 18px; overflow-y: auto; }
.panel-cookies__pie {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  padding: 18px 28px 24px;
  border-top: 1px solid var(--borde);
  background: rgba(6, 10, 18, .5);
}

.grupo-cookie { padding: 20px 0; border-bottom: 1px solid var(--borde); }
.grupo-cookie:last-child { border-bottom: 0; }
.grupo-cookie__fila { display: flex; align-items: center; gap: 16px; }
.grupo-cookie h3 { margin: 0; font-size: 16px; }
.grupo-cookie p { margin: 8px 0 0; font-size: 14px; color: var(--tenue); }
.grupo-cookie__fijo {
  margin-left: auto; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--cian);
  background: rgba(34, 232, 255, .1);
  padding: 5px 13px; border-radius: var(--radio-pastilla);
}

.palanca { margin-left: auto; flex: none; position: relative; }
.palanca input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.palanca__pista {
  display: block; width: 50px; height: 28px;
  background: #2A3550; border-radius: var(--radio-pastilla);
  transition: background .22s ease;
}
.palanca__pista::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; background: #FFFFFF;
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.palanca input:checked ~ .palanca__pista { background: var(--cian); }
.palanca input:checked ~ .palanca__pista::after { transform: translateX(22px); }
.palanca input:focus-visible ~ .palanca__pista { outline: 2px solid var(--cian); outline-offset: 3px; }

/* -------------------------------------------------------------- legales */
.encabezado-pagina {
  padding: 132px 0 40px;      /* el banner no esta: hay que despejar el header */
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(34, 232, 255, .1), transparent 62%),
    var(--carbon);
  border-bottom: 1px solid var(--borde);
}
.encabezado-pagina h1 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 10px; }
.encabezado-pagina p { margin: 0; color: var(--tenue); max-width: 60ch; }

.legal { padding: 48px 0 80px; max-width: 880px; }
.legal h2 { margin-top: 42px; font-size: 22px; color: var(--cian); }
.legal h3 { margin-top: 26px; font-size: 17px; }
.legal p, .legal li { font-size: 15.5px; color: var(--tenue); }
.legal strong { color: var(--hielo); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal__fecha {
  display: inline-block; margin-bottom: 8px;
  padding: 6px 15px;
  background: rgba(34, 232, 255, .09);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio-pastilla);
  font-size: 13px; font-weight: 600; color: var(--cian);
}
.legal__envoltorio { overflow-x: auto; }
.legal__tabla { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.legal__tabla th, .legal__tabla td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--borde);
  vertical-align: top; color: var(--tenue);
}
.legal__tabla th {
  background: rgba(34, 232, 255, .06);
  font-family: var(--tipo-titulo); color: var(--hielo); font-weight: 600;
}
.legal code {
  font-size: 13.5px; color: var(--cian);
  background: rgba(34, 232, 255, .08);
  padding: 2px 6px; border-radius: 5px;
}
.legal__volver { margin-top: 40px; }

/* ---------------------------------------------- WhatsApp: luz y código QR */

/* La "llamada de luz": una franja clara que barre el ícono cada tantos
   segundos. Llama la atención sin moverse ni parpadear. */
/* La llamada de luz: un destello que cruza el icono cada tanto. Va en los
   tres canales, pero desfasados, para que se lean como una secuencia y no
   como tres luces prendiendo a la vez. */
.enlace-carga .enlace-carga__icono { position: relative; overflow: hidden; }
.enlace-carga .enlace-carga__icono::after {
  content: "";
  position: absolute; inset: -30%;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  transform: translateX(-160%);
  animation: barrido 4.6s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: var(--turno, 0s);
  pointer-events: none;
}
@keyframes barrido {
  0%, 62%  { transform: translateX(-160%); }
  78%, 100% { transform: translateX(160%); }
}
.conectados li:nth-child(2) .enlace-carga__icono::after { --turno: .5s; }
.conectados li:nth-child(3) .enlace-carga__icono::after { --turno: 1s; }

/* al pasar por encima, el destello se apura */
.enlace-carga:hover .enlace-carga__icono::after,
.enlace-carga:focus-visible .enlace-carga__icono::after {
  animation-duration: 1.6s; animation-delay: 0s;
}

.qr-boton {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 2px 0 0 62px; padding: 8px 15px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  color: var(--tenue);
  font-family: var(--tipo-titulo); font-size: 13px; font-weight: 500;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.qr-boton svg { width: 16px; height: 16px; }
.qr-boton:hover { border-color: var(--borde-vivo); color: var(--cian); background: rgba(34, 232, 255, .06); }
.qr-boton[aria-expanded="true"] { border-color: var(--cian); color: var(--cian); }

.qr-tarjeta {
  display: flex; align-items: center; gap: 18px;
  margin: 12px 0 6px 62px; padding: 16px;
  max-width: 420px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: rgba(6, 10, 18, .6);
  animation: qr-entra .28s ease both;
}
.qr-tarjeta[hidden] { display: none; }
.qr-tarjeta img {
  width: 132px; height: 132px; flex: none;
  border-radius: 8px;
  background: #FFFFFF;
}
.qr-tarjeta p { margin: 0; font-size: 13.5px; color: var(--tenue); }
@keyframes qr-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .enlace-carga .enlace-carga__icono::after { animation: none; opacity: 0; }
  .qr-tarjeta { animation: none; }
}

@media (max-width: 520px) {
  .qr-boton, .qr-tarjeta { margin-left: 0; }
  .qr-tarjeta { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* La fórmula para ejercer los derechos de la Ley 25.326. Va destacada y en
   las tres páginas legales: es lo primero que busca quien entra a reclamar,
   y no tiene que estar escondida adentro de un párrafo. */
.legal__canal {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 22px 0 !important;
  padding: 18px 20px;
  border: 1px solid var(--borde-vivo);
  border-left-width: 4px;
  border-radius: var(--radio-caja);
  background: rgba(34, 232, 255, .06);
  color: var(--hielo) !important;
  font-size: 15.5px; line-height: 1.6;
}
.legal__canal svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--cian); }
.legal__canal a { color: var(--cian); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* === 6-responsive.css === */

/* ======================================================================
   PANTALLAS CHICAS
   ====================================================================== */

/* entre 1080 y 861 el encabezado aprieta: la pastilla larga se acorta */
.pastilla-nav__corto { display: none; }

@media (max-width: 1020px) {
  .bloque-form__grilla { grid-template-columns: 1fr; gap: 40px; }
  .contacto__grilla { grid-template-columns: 1fr; gap: 40px; }
  .contacto__globos { order: -1; }
  .contacto__globos svg { max-width: 320px; }
  .prefooter__grilla { grid-template-columns: 1fr 1fr; gap: 36px; }
  .prefooter__logo { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .seccion { padding: 72px 0; }

  /* las dos columnas de servicios pasan a una sola y la linea sobra */
  .columnas { grid-template-columns: 1fr; gap: 34px; grid-template-rows: none; }
  /* en una sola columna no hay nada que alinear con la de al lado */
  .columnas > [data-revelar] { grid-row: auto; grid-template-rows: none; }
  .columnas__linea { display: none; }
  .columnas__titulo { margin-top: 6px; }
}

@media (max-width: 760px) {
  :root { --alto-encabezado: 64px; }

  .contenedor { padding-inline: 18px; }
  .encabezado__barra { padding-inline: 16px; gap: 8px; }
  .encabezado__logo svg { width: 96px; height: 32px; }

  .pastilla-nav { padding: 9px 15px; font-size: 13px; }
  .pastilla-nav__largo { display: none; }
  .pastilla-nav__corto { display: inline; }

  .form__fila { grid-template-columns: 1fr; gap: 0; }
  .tarjeta-form { padding: 26px 20px 28px; border-radius: 20px; }

  .discurso__cuenta { gap: 20px; }

  .aviso-cookies { left: 12px; right: 12px; bottom: 12px; padding: 20px; }
  .aviso-cookies__acciones .boton { flex: 1 1 auto; text-align: center; }

  .franja__globos { gap: 14px; }
  .globo { width: 46px; height: 46px; }

  .encabezado-pagina { padding: 108px 0 32px; }
  .legal { padding: 36px 0 64px; }
}

@media (max-width: 520px) {
  .encabezado__logo svg { width: 84px; height: 28px; }
  .pastilla-nav { padding: 8px 13px; font-size: 12.5px; }
  .encabezado__acciones { gap: 7px; }

  .titulo-seccion { font-size: clamp(26px, 8vw, 34px); }
  .boton-cta { width: 100%; justify-content: center; padding: 17px 24px; font-size: 16px; }

  .enlace-carga { padding: 11px 14px 13px; margin-left: -14px; gap: 12px; }
  .enlace-carga::after { left: 14px; right: 14px; }
  .enlace-carga__icono { width: 40px; height: 40px; }
  .enlace-carga b { font-size: 15.5px; }

  .prefooter__grilla { grid-template-columns: 1fr; gap: 30px; }
  .whatsapp-fijo { right: 14px; bottom: 14px; }
}

/* En apaisado muy bajo (celular acostado) el banner de 100vh no deja ver
   nada mas: se le pone un piso para que la primera seccion se asome. */
@media (max-height: 460px) and (orientation: landscape) {
  .hueco-banner { height: 420px; }
  .encabezado-vivo { --alto-marco: calc(420px - (420px - var(--alto-encabezado)) * var(--p, 0)); }
  .encabezado-vivo__interior { height: 420px; transform: translateY(calc((var(--alto-marco) - 420px) / 2)) scale(calc(1 - .1 * var(--p, 0))); }
}