/* =========================================================================
   VANTIS.IA — hoja de estilo única
   Secciones numeradas; busca "== N." para saltar.

   00. Tokens
   01. Reinicio y base
   02. Superficies del navegador (selección, cursor, barra, foco)
   03. Utilidades de composición
   04. Botones y chapas
   05. Barra de progreso
   05b. Constelación de fondo
   05c. Entrada
   06. Cabecera y navegación
   07. Portada
   08. Marquesina
   09. Servicios (rejilla)
   10. Por qué VANTIS.IA
   11. Antes vs después
   12. Proceso
   13. Portfolio
   14. Testimonios
   15. Nosotros
   16. FAQ
   17. Contacto
   18. Pie
   19. Barra flotante y subir
   20. Chat
   21. Revelados
   22. Páginas de texto legal
   23. Adaptación a pantallas pequeñas
   ========================================================================= */

/* == 00. Tokens ========================================================== */

:root {
  /* Fondos */
  --fondo:          #05070e;
  --fondo-alt:      #080b16;
  --superficie:     #0e1221;
  --superficie-alta:#131829;

  /* Texto */
  --texto:          #f6f7fa;
  --texto-suave:    #98a0b2;
  /* Aclarado respecto al gris del vídeo: aquel se quedaba en 3.9:1 sobre el
     fondo y este llega a 4.6:1, el mínimo legible para texto pequeño */
  --texto-tenue:    #7b8397;
  --nav:            #c0c4d1;

  /* Marca */
  --cian:           #32e2e9;
  --cian-claro:     #6feff5;
  --cian-oscuro:    #12b3bb;
  --azul:           #4b92ee;
  --rojo:           #f2556b;

  /* Trazos */
  --borde:          rgba(255, 255, 255, .07);
  --borde-fuerte:   rgba(255, 255, 255, .13);
  --borde-cian:     rgba(50, 226, 233, .34);

  /* Degradados */
  --grad-marca:     linear-gradient(90deg, var(--cian-claro), var(--azul));
  --grad-cian:      linear-gradient(135deg, var(--cian-claro), var(--cian));

  /* Halos: siempre con desplazamiento y desenfoque, nunca un aro plano */
  --halo-cian:      0 14px 40px -12px rgba(50, 226, 233, .45);
  --halo-carta:     0 24px 60px -28px rgba(0, 0, 0, .9);
  --halo-alto:      0 32px 80px -30px rgba(0, 0, 0, .95);

  /* Tipografía */
  --fuente-titulo:  "Outfit", "Segoe UI", system-ui, sans-serif;
  --fuente-texto:   "Outfit", "Segoe UI", system-ui, sans-serif;

  /* Medidas */
  --ancho:          1240px;
  --margen:         clamp(20px, 5vw, 48px);
  --radio:          18px;
  --radio-g:        26px;
  --cabecera:       92px;

  /* Esquina inferior derecha: separación del borde y tamaño del botón del
     chat. El panel del chat se apoya en estas dos para abrirse justo encima */
  --rail-abajo:     clamp(16px, 3vw, 30px);
  --fab:            54px;

  /* Curvas: salida exponencial, arranque visible */
  --sale:           cubic-bezier(.16, 1, .3, 1);
  --suave:          cubic-bezier(.4, 0, .2, 1);
}

/* == 01. Reinicio y base ================================================= */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* La cabecera fija no debe tapar el destino de los anclajes */
  scroll-padding-top: calc(var(--cabecera) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El resplandor de fondo: dos focos fríos que tiñen toda la página */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(64rem 42rem at 82% -8%,  rgba(50, 226, 233, .10), transparent 62%),
    radial-gradient(52rem 40rem at 8% 42%,   rgba(75, 146, 238, .07), transparent 60%),
    radial-gradient(70rem 46rem at 50% 108%, rgba(50, 226, 233, .06), transparent 64%);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

ul, ol { list-style: none; padding: 0; }

/* == 02. Superficies del navegador ======================================= */

::selection {
  background: rgba(50, 226, 233, .28);
  color: var(--texto);
}

:root { caret-color: var(--cian); }

/* Barra de desplazamiento a juego con la paleta */
* { scrollbar-width: thin; scrollbar-color: rgba(50, 226, 233, .34) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb {
  background: rgba(50, 226, 233, .26);
  border: 3px solid var(--fondo);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(50, 226, 233, .48); }

/* Un único anillo de foco para todo el sitio */
:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Salto al contenido, para quien navega con teclado */
.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--cian);
  color: #04222a;
  font-weight: 700;
  border-radius: 10px;
  transition: top .25s var(--sale);
}
.saltar:focus { top: 18px; }

/* == 03. Utilidades de composición ======================================= */

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

.seccion { padding-block: clamp(80px, 11vw, 148px); position: relative; }

/* Las secciones alternas van translúcidas a propósito: si fuesen opacas
   taparían la constelación del fondo y ésta sólo se vería a ratos */
.seccion--alt { background: rgba(8, 11, 22, .72); }

/* Filo superior tenue que separa las secciones alternas */
.seccion--alt::before,
.seccion--linea::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde-fuerte) 22%, var(--borde-fuerte) 78%, transparent);
}

/* Antetítulo: raya corta + palabra en versalitas cian */
.antetitulo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cian);
}
.antetitulo::before {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.titulo {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  max-width: 17ch;
}
.titulo--ancho { max-width: 22ch; }

/* La parte resaltada del titular lleva el degradado de marca */
.brillo {
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.entradilla {
  color: var(--texto-suave);
  max-width: 46ch;
  font-size: 1.02rem;
}

/* Cabecera de sección: titular a la izquierda, entradilla a la derecha */
.cabecera-seccion {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.cabecera-seccion--sola { grid-template-columns: 1fr; }

.icono { width: 24px; height: 24px; flex: none; }

/* == 04. Botones y chapas ================================================ */

.boton {
  --relleno: 15px 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--relleno);
  border: 1px solid transparent;
  border-radius: 99px;
  font-family: var(--fuente-titulo);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform .4s var(--sale),
    box-shadow .4s var(--sale),
    background-color .3s var(--suave),
    border-color .3s var(--suave),
    color .3s var(--suave);
}

.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); transition-duration: .08s; }

.boton .icono { width: 17px; height: 17px; }

/* La flecha del botón sale disparada en diagonal al pasar el ratón */
.boton__flecha { transition: transform .4s var(--sale); }
.boton:hover .boton__flecha { transform: translate(3px, -3px); }

.boton--principal {
  background: var(--cian);
  color: #042026;
  box-shadow: var(--halo-cian);
}
.boton--principal:hover {
  background: var(--cian-claro);
  box-shadow: 0 18px 52px -12px rgba(50, 226, 233, .6);
}

.boton--fantasma {
  background: rgba(255, 255, 255, .02);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.boton--fantasma:hover {
  background: rgba(50, 226, 233, .08);
  border-color: var(--borde-cian);
  color: var(--cian-claro);
}

.boton--grande { --relleno: 19px 42px; font-size: 1.06rem; }
.boton--bloque { width: 100%; justify-content: center; }

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Chapa: etiqueta pequeña de contorno */
.chapa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid var(--borde-cian);
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--cian-claro);
  background: rgba(50, 226, 233, .05);
}

/* == 05. Barra de progreso =============================================== */

.progreso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-marca);
  box-shadow: 0 0 14px rgba(50, 226, 233, .55);
  pointer-events: none;
}

/* == 05b. Constelación de fondo ========================================== */

/* El lienzo cubre toda la ventana y va detrás de todo. No recibe clics: el
   ratón lo sigue por `mousemove` en la ventana, así que el contenido de
   encima se puede seleccionar y pulsar con normalidad */
.constelacion {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--suave);
}
.constelacion.encendida { opacity: 1; }

/* == 05c. Entrada ======================================================== */

/* No hay telón negro. La marca se forma con las mismas partículas que ya
   viven en el fondo y después se va a la cabecera; todo eso lo dirige el
   lienzo desde JavaScript, así que aquí sólo queda decidir qué espera.

   La clase la pone un guion en línea al principio del <body>, antes de que
   el navegador pinte: si no, se vería la portada un instante y luego se
   escondería. */

/* Dos ganchos distintos a propósito: la cabecera aparece en cuanto la marca
   aterriza, pero el scroll sigue bloqueado hasta que las partículas se
   sueltan. Si se soltase antes, aparecería la barra de desplazamiento y todo
   se desplazaría 15 px justo en el peor momento. */
html.entrada-oculto .cabecera,
html.entrada-oculto .rail { opacity: 0; }

html.entrada,
html.entrada body { overflow: hidden; }

/* El rótulo que aparece bajo la V cuando el trazo termina. Va muy espaciado
   a propósito: es el mismo tratamiento que tenía la marca en el vídeo de
   referencia, y llena el centro de la pantalla sin competir con el trazo.
   La altura se la pasa el JavaScript, para que caiga justo debajo de la V. */
.entrada-nombre {
  position: fixed;
  left: 50%;
  top: var(--entrada-nombre-y, 64%);
  translate: -50% 0;
  z-index: 95;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: .3em;
  /* El interletraje también se aplica tras la última letra: se compensa */
  text-indent: .3em;
  white-space: nowrap;
  color: var(--texto);
  pointer-events: none;
  opacity: 0;
  filter: blur(9px);
  transition: opacity .55s var(--suave), filter .55s var(--suave);
}
.entrada-nombre[hidden] { display: none; }
.entrada-nombre.puesta { opacity: 1; filter: blur(0); }
.entrada-nombre.yendose { opacity: 0; filter: blur(7px); }
.entrada-nombre__ia { color: var(--cian); }

.saltar-entrada {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 4vh, 34px);
  translate: -50% 0;
  z-index: 100;
  padding: 9px 21px;
  background: rgba(5, 7, 14, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  color: var(--texto-tenue);
  font-size: .82rem;
  cursor: pointer;
  opacity: 0;
  animation: asomar-saltar .5s var(--suave) 1s forwards;
  transition: color .3s var(--suave), border-color .3s var(--suave), background-color .3s var(--suave);
}
.saltar-entrada[hidden] { display: none; }
.saltar-entrada:hover {
  color: var(--cian);
  border-color: var(--borde-cian);
  background: rgba(50, 226, 233, .08);
}
@keyframes asomar-saltar { to { opacity: 1; } }

/* == 06. Cabecera y navegación =========================================== */

.cabecera {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 110;
  height: var(--cabecera);
  display: flex;
  align-items: center;
  transition:
    background-color .4s var(--suave),
    border-color .4s var(--suave),
    backdrop-filter .4s var(--suave),
    opacity .9s var(--suave);
  border-bottom: 1px solid transparent;
}

/* Al bajar, la cabecera se posa sobre un cristal oscuro */
.cabecera.posada {
  background: rgba(5, 7, 14, .78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--borde);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
}

/* Logotipo: la malla de nodos del original más el rótulo. El rótulo va tan
   apretado y pesado como en el archivo de marca, no espaciado */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--fuente-titulo);
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: .005em;
}
.logo__marca {
  height: 38px;
  width: auto;
  aspect-ratio: 440 / 372;
  flex: none;
  transition: filter .35s var(--suave), transform .5s var(--sale);
}
.logo__ia { color: var(--cian); }
.logo:hover .logo__marca {
  filter: drop-shadow(0 0 12px rgba(50, 226, 233, .55));
  transform: translateY(-1px) scale(1.04);
}

.nav { display: flex; align-items: center; gap: 34px; }

.nav__enlace {
  position: relative;
  color: var(--nav);
  font-size: 1rem;
  padding-block: 6px;
  transition: color .3s var(--suave);
}
/* Subrayado que crece desde el centro. Va con scaleX y no con width:
   así se anima en la capa de composición y no obliga a recalcular nada */
.nav__enlace::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-marca);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .38s var(--sale);
}
.nav__enlace:hover,
.nav__enlace[aria-current="true"] { color: var(--texto); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="true"]::after { transform: scaleX(1); }

/* Botón hamburguesa: dos barras que se cruzan */
.hamburguesa {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  background: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform .4s var(--sale), opacity .2s var(--suave);
}
.hamburguesa span + span { margin-top: 5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* == 07. Portada ========================================================= */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--cabecera) + 40px);
  padding-bottom: 40px;
  overflow: hidden;
}

.portada__contenido { position: relative; z-index: 1; max-width: 780px; }

.portada__antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 30px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cian);
}
.portada__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 12px 2px rgba(50, 226, 233, .8);
  animation: pulso-punto 2.4s ease-in-out infinite;
}
@keyframes pulso-punto {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

.portada__titulo {
  font-size: clamp(2.9rem, 8.4vw, 6rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-bottom: 34px;
}
.portada__titulo span { display: block; }
.portada__titulo .acento {
  color: var(--cian);
  text-shadow: 0 0 46px rgba(50, 226, 233, .45);
}

.portada__texto {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--texto-suave);
  max-width: 45ch;
  margin-bottom: 42px;
}

.portada__botones { display: flex; flex-wrap: wrap; gap: 16px; }

/* Cifras al pie de la portada */
.cifras {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(56px, 8vw, 96px);
}
.cifra__valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--cian);
  line-height: 1.1;
}
.cifra__texto {
  font-size: .92rem;
  color: var(--texto-tenue);
  margin-top: 4px;
}

/* Flecha de bajada */
.bajar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 34px auto 0;
  color: var(--texto-tenue);
  animation: rebote 2.6s ease-in-out infinite;
  transition: color .3s var(--suave);
}
.bajar:hover { color: var(--cian); }
@keyframes rebote {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}

/* == 08. Marquesina ====================================================== */

.marquesina {
  position: relative;
  padding-block: clamp(28px, 4vw, 44px);
  border-block: 1px solid var(--borde);
  background: rgba(255, 255, 255, .012);
  overflow: hidden;
  /* Se apaga en los extremos para que no choque con el borde de la ventana */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquesina__capa {
  display: flex;
  width: max-content;
  animation: desfile 42s linear infinite;
}
.marquesina:hover .marquesina__capa { animation-play-state: paused; }

.marquesina__grupo {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
}

.marquesina__palabra {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Perfiladas: sin relleno, sólo contorno */
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .26);
}

.marquesina__estrella {
  color: var(--cian);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  flex: none;
}

/* Segunda copia, rellena y recortada a una ventana central:
   la palabra que cruza el centro se enciende sola */
.marquesina__relleno {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 33%, #000 44%, #000 56%, transparent 67%);
  mask-image: linear-gradient(90deg, transparent 33%, #000 44%, #000 56%, transparent 67%);
}
.marquesina__relleno .marquesina__palabra {
  color: var(--texto);
  -webkit-text-stroke: 0;
}

@keyframes desfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* == 09. Servicios (rejilla) ============================================= */

/* Antes era una cinta girando: con ocho tarjetas a 36 px/s había que esperar
   casi un minuto para verlas todas. Ahora caben las ocho en pantalla. */

.servicios { position: relative; overflow: hidden; }

/* Círculo enorme de trazo fino detrás de las tarjetas */
.servicios__aro {
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: min(120vw, 1180px);
  aspect-ratio: 1;
  translate: -50% 0;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 50%;
  pointer-events: none;
}
.servicios__aro::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(50, 226, 233, .06);
  border-radius: 50%;
}

.servicios__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.servicio {
  /* En columna y con las etiquetas empujadas abajo: así todas las tarjetas
     de una fila acaban a la misma altura aunque el texto sea desigual */
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: linear-gradient(160deg, var(--superficie), rgba(14, 18, 33, .55));
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--halo-carta);
  transition:
    transform .5s var(--sale),
    border-color .4s var(--suave),
    box-shadow .5s var(--sale);
}

.servicio:hover,
.servicio:focus-within {
  transform: translateY(-8px);
  border-color: var(--borde-cian);
  box-shadow: var(--halo-alto), 0 0 0 1px rgba(50, 226, 233, .12);
}

.servicio__icono {
  width: 38px;
  height: 38px;
  color: var(--cian);
  margin-bottom: 22px;
}

.servicio__titulo {
  font-size: 1.22rem;
  margin-bottom: 11px;
}

.servicio__texto {
  color: var(--texto-suave);
  font-size: .96rem;
  line-height: 1.6;
  margin-bottom: 22px;
}

.servicio__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.servicio__etiqueta {
  padding: 5px 13px;
  border: 1px solid rgba(50, 226, 233, .26);
  border-radius: 99px;
  font-size: .8rem;
  color: var(--cian-claro);
}

.servicios__pie {
  display: flex;
  justify-content: center;
  margin-top: clamp(38px, 5vw, 58px);
}

/* == 10. Por qué VANTIS.IA =============================================== */

/* Las cuatro razones rodean al nombre y apuntan a él. Es una rejilla de tres
   columnas: las tarjetas en las laterales, la marca ocupando el centro en
   vertical. Los cables que van de cada tarjeta al centro los dibuja el
   JavaScript, porque hay que medir dónde cae cada cosa. */

.motivos {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 21vw, 270px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px) clamp(34px, 5.5vw, 92px);
  align-items: center;
  margin-bottom: clamp(46px, 6vw, 64px);
}

/* Los <li> pasan a ser celdas de la rejilla de arriba. El role="list" del
   HTML devuelve la semántica de lista, que "display: contents" se lleva */
.motivos__lista { display: contents; }

.motivos__cables {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* La corriente va hacia el centro: el guion se desplaza en esa dirección */
.motivos__cable {
  stroke: rgba(50, 226, 233, .5);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  marker-end: url(#punta-cable);
  animation: correr-cable 1.1s linear infinite;
}
@keyframes correr-cable { to { stroke-dashoffset: -12; } }

/* --- El centro --- */

.motivos__centro {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  aspect-ratio: 1;
  padding: clamp(18px, 2.4vw, 30px);
  text-align: center;
}

/* Dos aros concéntricos, del mismo aire que el resto de la web */
.motivos__aro {
  position: absolute;
  inset: 0;
  border: 1px solid var(--borde-cian);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 226, 233, .09), transparent 68%);
  box-shadow: 0 0 60px -18px rgba(50, 226, 233, .55);
}
.motivos__aro::after {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(50, 226, 233, .12);
  border-radius: 50%;
}

.motivos__marca {
  position: relative;
  height: clamp(54px, 7vw, 78px);
  width: auto;
  aspect-ratio: 440 / 372;
  filter: drop-shadow(0 0 22px rgba(50, 226, 233, .35));
}

.motivos__nombre {
  position: relative;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1;
}
.motivos__ia { color: var(--cian); }

/* --- Las tarjetas --- */

.motivo {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2.4vw, 28px) clamp(22px, 2.4vw, 26px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  transition:
    transform .5s var(--sale),
    border-color .4s var(--suave),
    background-color .4s var(--suave);
}
.motivo:hover {
  transform: translateY(-6px);
  border-color: var(--borde-cian);
  background: var(--superficie-alta);
}

/* Cada tarjeta a su esquina */
.motivo:nth-child(1) { grid-area: 1 / 1; }
.motivo:nth-child(2) { grid-area: 1 / 3; }
.motivo:nth-child(3) { grid-area: 2 / 1; }
.motivo:nth-child(4) { grid-area: 2 / 3; }

/* El punto del que sale el cable, en el borde que mira al centro */
.motivo__punto {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 10px 1px rgba(50, 226, 233, .7);
}
.motivo:nth-child(odd) .motivo__punto { right: -5px; }
.motivo:nth-child(even) .motivo__punto { left: -5px; }

.motivo__icono {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  border: 1px solid var(--borde-cian);
  border-radius: 14px;
  background: rgba(50, 226, 233, .06);
  color: var(--cian);
}
.motivo__icono .icono { width: 23px; height: 23px; }

.motivo__titulo { font-size: 1.12rem; margin-bottom: 9px; }
.motivo__texto { color: var(--texto-suave); font-size: .95rem; }

/* --- Banda de cifras --- */

/* == 11. Proceso ========================================================= */

/* Un recorrido en zigzag, no una lista de filas: las fichas se van alternando
   a un lado y a otro de una espina central que se llena de color según bajas.
   En móvil la espina se va a la izquierda y todo cae en una sola columna. */

.ruta { position: relative; padding-block: 8px; }

.ruta__lista {
  display: grid;
  gap: clamp(26px, 3.4vw, 46px);
}

/* La espina apagada */
.ruta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: var(--borde-fuerte);
}

/* Y la parte ya recorrida. Se estira con scaleY y no con height: así se
   anima en la capa de composición y el navegador no recalcula nada */
.ruta__avance {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  translate: -50% 0;
  transform-origin: 50% 0;
  transform: scaleY(var(--avance, 0));
  background: var(--grad-marca);
  box-shadow: 0 0 14px rgba(50, 226, 233, .55);
  pointer-events: none;
}

.paso {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2.6vw, 38px);
}

/* El nodo: círculo con el icono dentro y el número colgando */
.paso__nodo {
  position: relative;
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--texto-tenue);
  transition:
    color .45s var(--suave),
    border-color .45s var(--suave),
    background-color .45s var(--suave),
    box-shadow .5s var(--sale),
    transform .5s var(--sale);
}
.paso__nodo .icono { width: 25px; height: 25px; }

.paso__cuenta {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding-inline: 5px;
  border-radius: 99px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde-fuerte);
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto-tenue);
  transition: color .45s var(--suave), border-color .45s var(--suave), background-color .45s var(--suave);
}

.paso__ficha {
  grid-column: 1;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--halo-carta);
  transition:
    border-color .45s var(--suave),
    background-color .45s var(--suave),
    transform .5s var(--sale),
    box-shadow .5s var(--sale);
}
/* Los pares se van al otro lado de la espina */
.paso:nth-child(even) .paso__ficha { grid-column: 3; }

.paso__titulo {
  font-size: clamp(1.16rem, 1.9vw, 1.42rem);
  margin-bottom: 8px;
  transition: color .45s var(--suave);
}
.paso__texto { color: var(--texto-suave); font-size: .98rem; }

/* Al cruzar la franja central de la pantalla, el paso se enciende */
.paso.activo .paso__nodo {
  color: var(--cian);
  border-color: var(--borde-cian);
  background: rgba(50, 226, 233, .08);
  box-shadow: 0 0 0 5px rgba(50, 226, 233, .06), var(--halo-cian);
  transform: scale(1.06);
}
.paso.activo .paso__cuenta {
  color: var(--cian);
  border-color: var(--borde-cian);
  background: rgba(50, 226, 233, .12);
}
.paso.activo .paso__ficha {
  border-color: var(--borde-cian);
  background: var(--superficie-alta);
  transform: translateY(-4px);
  box-shadow: var(--halo-alto), 0 0 0 1px rgba(50, 226, 233, .1);
}
.paso.activo .paso__titulo { color: var(--cian); }

/* == 12. Portfolio ======================================================= */

.proyectos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  /* Cada tarjeta con su alto natural: si no, la más corta de la fila se
     estira y deja un hueco vacío debajo del texto. */
  align-items: start;
}
/* La segunda columna baja: el escalonado del original */
.proyectos > :nth-child(even) { margin-top: clamp(36px, 6vw, 84px); }

.proyecto {
  position: relative;
  display: block;
  border-radius: var(--radio-g);
  border: 1px solid var(--borde);
  overflow: hidden;
  background: var(--superficie);
  box-shadow: var(--halo-carta);
  transition: transform .55s var(--sale), border-color .45s var(--suave), box-shadow .55s var(--sale);
}
.proyecto:hover {
  transform: translateY(-8px);
  border-color: var(--borde-cian);
  box-shadow: var(--halo-alto), 0 0 0 1px rgba(50, 226, 233, .1);
}

.proyecto__foto {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.proyecto__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--sale), filter .6s var(--suave);
}
.proyecto:hover .proyecto__foto img {
  transform: scale(1.07);
  filter: saturate(1.15);
}
/* Sin velo sobre la foto: el texto ya no va encima, sino debajo. Cualquier
   degradado oscuro en el pie de la imagen se ve como una franja. */

.proyecto__etiqueta {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  padding: 7px 15px;
  border-radius: 99px;
  background: rgba(5, 7, 14, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--borde-cian);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cian-claro);
}

/* Chapa ↗ que asoma al pasar el ratón */
.proyecto__ir {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cian);
  color: #042026;
  opacity: 0;
  transform: translate(-6px, 6px) scale(.85);
  transition: opacity .4s var(--sale), transform .5s var(--sale);
}
.proyecto:hover .proyecto__ir,
.proyecto:focus-visible .proyecto__ir {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.proyecto__ir .icono { width: 18px; height: 18px; }

/* El texto va debajo de la foto, sobre la superficie de la tarjeta. Así la
   imagen se ve entera y no hay que oscurecerla por abajo para que se lea. */
.proyecto__pie {
  position: relative;
  z-index: 2;
  padding: 24px 28px 26px;
  background: var(--superficie);
}
.proyecto__nombre { font-size: 1.42rem; margin-bottom: 4px; }
.proyecto__dato { color: var(--cian); font-size: .95rem; }

/* Pista para las tarjetas que llevan a un vídeo. Va siempre visible, no sólo
   al pasar el ratón: en el móvil no hay ratón que pasar. */
.proyecto__ver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid var(--borde-cian);
  background: rgba(50, 226, 233, .08);
  font-size: .84rem;
  font-weight: 600;
  color: var(--texto);
  transition: background .4s var(--suave), border-color .4s var(--suave), color .4s var(--suave);
}
.proyecto__ver .icono {
  width: 16px;
  height: 16px;
  color: var(--cian);
  transition: color .4s var(--suave);
}
.proyecto:hover .proyecto__ver,
.proyecto:focus-visible .proyecto__ver {
  background: var(--cian);
  border-color: var(--cian);
  color: #042026;
}
.proyecto:hover .proyecto__ver .icono,
.proyecto:focus-visible .proyecto__ver .icono { color: #042026; }

/* == 13. Nosotros ======================================================== */

.nosotros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.nosotros__texto p { color: var(--texto-suave); margin-bottom: 20px; max-width: 52ch; }
.nosotros__texto strong { color: var(--texto); font-weight: 600; }
.nosotros__texto .boton { margin-top: 20px; }

.nosotros__figura {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 440px;
}

.marca-grande {
  width: min(100%, 330px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 46px rgba(50, 226, 233, .3));
}
/* Las aristas se dibujan solas al entrar en pantalla */
.marca-grande .arista {
  stroke-dasharray: var(--largo, 300);
  stroke-dashoffset: var(--largo, 300);
}
.revelado .marca-grande .arista {
  animation: trazar 1.5s var(--sale) forwards;
}
.marca-grande .arista:nth-of-type(2) { animation-delay: .12s; }
.marca-grande .arista:nth-of-type(3) { animation-delay: .24s; }
.marca-grande .arista:nth-of-type(4) { animation-delay: .36s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

.marca-grande .nodo {
  transform-box: fill-box;
  transform-origin: center;
  animation: latir-nodo 3.2s ease-in-out infinite;
}
.marca-grande .nodo:nth-of-type(2) { animation-delay: .4s; }
.marca-grande .nodo:nth-of-type(3) { animation-delay: .8s; }
.marca-grande .nodo:nth-of-type(4) { animation-delay: 1.2s; }
.marca-grande .nodo:nth-of-type(5) { animation-delay: 1.6s; }
.marca-grande .nodo:nth-of-type(6) { animation-delay: 2s; }
@keyframes latir-nodo {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.28); }
}

/* Chapas que flotan alrededor de la V */
.flotante {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: rgba(14, 18, 33, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: var(--halo-carta);
  animation: flotar 6s ease-in-out infinite;
}
.flotante .icono { width: 16px; height: 16px; color: var(--cian); }
.flotante--1 { top: 4%;  left: 2%; }
.flotante--2 { top: 44%; right: -4%; animation-delay: 1.2s; }
.flotante--3 { top: 62%; right: 2%;  animation-delay: 2.4s; }
.flotante--4 { bottom: 12%; left: -2%; animation-delay: 3.6s; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* == 14. FAQ ============================================================= */

.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 14px; }

.duda {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color .4s var(--suave), background-color .4s var(--suave), box-shadow .45s var(--sale);
}
.duda.abierta {
  border-color: var(--borde-cian);
  background: linear-gradient(140deg, rgba(50, 226, 233, .06), var(--superficie));
  box-shadow: 0 22px 60px -34px rgba(50, 226, 233, .55);
}

.duda__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 24px 28px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--fuente-titulo);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.015em;
  cursor: pointer;
  transition: color .35s var(--suave);
}
.duda__boton:hover { color: var(--cian-claro); }
.duda.abierta .duda__boton { color: var(--cian); }

.duda__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--cian);
  transition: transform .45s var(--sale);
}
.duda.abierta .duda__chevron { transform: rotate(180deg); }

/* El panel se abre con grid-template-rows de 0fr a 1fr: la altura la calcula
   el navegador solo, sin medir nada desde JavaScript y sin animar `height` */
.duda__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--sale);
}
.duda.abierta .duda__panel { grid-template-rows: 1fr; }

/* El marco es el hijo del grid y recorta mientras la fila crece. Va vacío de
   relleno a propósito: el padding vive dentro, porque el de un elemento de
   rejilla se sigue pintando aunque su fila mida cero */
.duda__marco { overflow: hidden; min-height: 0; }

.duda__texto {
  padding: 0 28px 26px;
  color: var(--texto-suave);
  max-width: 72ch;
}

/* == 15. Contacto ======================================================== */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(38px, 6vw, 80px);
  align-items: start;
}

.garantias { display: grid; gap: 26px; margin-top: 44px; }
.garantia { display: flex; gap: 18px; align-items: flex-start; }
.garantia__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--borde-cian);
  border-radius: 13px;
  background: rgba(50, 226, 233, .06);
  color: var(--cian);
}
.garantia__icono .icono { width: 21px; height: 21px; }
.garantia__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.04rem; margin-bottom: 2px; }
.garantia__texto { color: var(--texto-suave); font-size: .95rem; }

.formulario {
  padding: clamp(28px, 4vw, 44px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--halo-carta);
}

.formulario__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 22px;
  margin-bottom: 30px;
}
.campo--ancho { grid-column: 1 / -1; }

.campo { position: relative; }

/* Campos sin caja: sólo una línea que se enciende al enfocar */
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde-fuerte);
  border-radius: 0;
  color: var(--texto);
  transition: border-color .35s var(--suave);
}
.campo textarea { resize: vertical; min-height: 118px; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--cian);
}
/* El anillo de foco general no encaja en un campo con sólo borde inferior */
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--cian);
}

.campo select {
  appearance: none;
  -webkit-appearance: none;
  color: var(--texto-tenue);
  cursor: pointer;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332e2e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 17px;
}
.campo select.elegido { color: var(--texto); }
.campo select option { background: var(--superficie); color: var(--texto); }

.campo__error {
  display: block;
  min-height: 18px;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--rojo);
}
.campo.mal input,
.campo.mal select,
.campo.mal textarea { border-bottom-color: var(--rojo); }

/* Casilla de privacidad dibujada a mano */
.acepto {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 18px;
  font-size: .86rem;
  color: var(--texto-tenue);
  line-height: 1.5;
  cursor: pointer;
}
.acepto input { position: absolute; opacity: 0; width: 0; height: 0; }
.acepto__caja {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  transition: background-color .3s var(--suave), border-color .3s var(--suave);
}
.acepto__caja .icono { width: 14px; height: 14px; color: #042026; opacity: 0; transform: scale(.5); transition: opacity .25s var(--suave), transform .35s var(--sale); }
.acepto input:checked + .acepto__caja { background: var(--cian); border-color: var(--cian); }
.acepto input:checked + .acepto__caja .icono { opacity: 1; transform: scale(1); }
.acepto input:focus-visible + .acepto__caja { outline: 2px solid var(--cian); outline-offset: 3px; }
.acepto a { color: var(--cian); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.acepto.mal .acepto__caja { border-color: var(--rojo); }

/* Estado enviando: el botón muestra un aro girando */
.boton.enviando { pointer-events: none; }
.boton__aro {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(4, 32, 38, .3);
  border-top-color: #042026;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
.boton.enviando .boton__aro { display: block; }
.boton.enviando .boton__flecha { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* La trampa de robots: fuera de la pantalla, pero no con display:none ni
   hidden, porque muchos robots saltan lo que está oculto de esa forma */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Avisos de después de enviar */
.aviso {
  display: none;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--borde-cian);
  border-radius: var(--radio);
  background: rgba(50, 226, 233, .07);
}
.aviso.visible { display: flex; }
.aviso .icono { width: 22px; height: 22px; color: var(--cian); flex: none; margin-top: 2px; }
.aviso__titulo { font-family: var(--fuente-titulo); font-weight: 700; margin-bottom: 3px; }

/* El mismo aviso, en rojo, para cuando el envío no sale */
.aviso--fallo {
  border-color: rgba(242, 85, 107, .45);
  background: rgba(242, 85, 107, .07);
}
.aviso--fallo .icono { color: var(--rojo); }
.aviso--fallo a {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aviso--fallo a:hover { color: var(--cian); }
.aviso__texto { color: var(--texto-suave); font-size: .93rem; }

/* == 16. Pie ============================================================= */

.pie {
  border-top: 1px solid var(--borde);
  padding-block: clamp(52px, 7vw, 80px) 32px;
  background: rgba(8, 11, 22, .72);
}

.pie__alto {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) auto;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
  padding-bottom: 40px;
}
.pie__lema { color: var(--texto-suave); font-size: .95rem; margin-top: 18px; max-width: 34ch; }

.pie__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  justify-content: center;
  align-self: center;
}
.pie__nav a { color: var(--texto-suave); transition: color .3s var(--suave); }
.pie__nav a:hover { color: var(--cian); }

.pie__redes { display: flex; gap: 12px; align-self: center; }
.pie__red {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  color: var(--texto-suave);
  transition: color .3s var(--suave), border-color .3s var(--suave), background-color .3s var(--suave), transform .4s var(--sale);
}
.pie__red:hover {
  color: var(--cian);
  border-color: var(--borde-cian);
  background: rgba(50, 226, 233, .08);
  transform: translateY(-3px);
}
.pie__red .icono { width: 19px; height: 19px; }

.pie__bajo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--borde);
  font-size: .86rem;
  color: var(--texto-tenue);
}
.pie__legal { display: flex; flex-wrap: wrap; gap: 24px; }
.pie__legal a { transition: color .3s var(--suave); }
.pie__legal a:hover { color: var(--cian); }

/* == 17. Barra flotante y subir ========================================== */

/* Los cuatro accesos, apilados en la esquina inferior derecha, con el chat
   abajo del todo: es el que más se pulsa y el que queda más a mano */
.rail {
  position: fixed;
  right: clamp(14px, 2.2vw, 28px);
  bottom: var(--rail-abajo);
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: 12px;
  transition: opacity .9s var(--suave);
}

/* Con el chat abierto los tres accesos se recogen: si no, el panel les
   caería encima */
.rail.chat-abierto .rail__boton:not(.rail__chat) {
  opacity: 0;
  transform: translateY(14px) scale(.82);
  pointer-events: none;
}

.rail__boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--borde-cian);
  border-radius: 50%;
  background: rgba(5, 7, 14, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cian);
  transition:
    background-color .3s var(--suave),
    transform .45s var(--sale),
    box-shadow .45s var(--sale),
    opacity .3s var(--suave);
}
.rail__boton:hover {
  background: rgba(50, 226, 233, .14);
  transform: scale(1.09);
  box-shadow: var(--halo-cian);
}
.rail__boton .icono { width: 21px; height: 21px; }

/* Etiqueta que asoma por la izquierda */
.rail__nombre {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  translate: 0 -50%;
  padding: 6px 13px;
  border-radius: 8px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde-fuerte);
  font-size: .8rem;
  color: var(--texto);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .3s var(--suave), transform .4s var(--sale);
}
.rail__boton:hover .rail__nombre,
.rail__boton:focus-visible .rail__nombre { opacity: 1; transform: translateX(0); }

/* Botón del chat: relleno cian y con punto de aviso */
.rail__chat {
  border: 0;
  background: var(--cian);
  color: #042026;
  cursor: pointer;
  box-shadow: var(--halo-cian);
  width: var(--fab);
  height: var(--fab);
  margin-top: 4px;
}
.rail__chat:hover { background: var(--cian-claro); }
.rail__chat .icono { width: 24px; height: 24px; }
.rail__chat .icono-cerrar { display: none; }
.rail__chat[aria-expanded="true"] .icono-abrir { display: none; }
.rail__chat[aria-expanded="true"] .icono-cerrar { display: block; }

.rail__aviso {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--texto);
  border: 2px solid var(--cian);
  animation: latir-aviso 2s ease-in-out infinite;
}
.rail__chat[aria-expanded="true"] .rail__aviso { display: none; }
@keyframes latir-aviso {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.75); opacity: .5; }
}

/* Subir, abajo a la izquierda */
.subir {
  position: fixed;
  left: clamp(12px, 2vw, 26px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--borde-cian);
  border-radius: 50%;
  background: rgba(5, 7, 14, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cian);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .4s var(--suave), transform .5s var(--sale), background-color .3s var(--suave);
}
.subir.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.subir:hover { background: rgba(50, 226, 233, .14); }
.subir .icono { width: 20px; height: 20px; }

/* == 18. Chat ============================================================ */

.chat {
  position: fixed;
  right: clamp(14px, 2.2vw, 28px);
  /* Justo encima del botón del chat, sea cual sea el tamaño de pantalla */
  bottom: calc(var(--rail-abajo) + var(--fab) + 14px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 24px));
  height: min(560px, calc(100svh - 180px));
  background: rgba(9, 12, 22, .96);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--borde-cian);
  border-radius: 22px;
  box-shadow: 0 34px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(50, 226, 233, .08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px) scale(.97);
  transform-origin: 100% 100%;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity .35s var(--suave),
    transform .5s var(--sale),
    visibility 0s linear .5s;
}
.chat.abierto {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--borde);
  background: rgba(255, 255, 255, .02);
}
.chat__marca { height: 30px; width: auto; aspect-ratio: 440 / 372; flex: none; }
.chat__quien { flex: 1; min-width: 0; }
.chat__nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: .98rem; }
.chat__estado {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--cian);
}
.chat__estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 8px 1px rgba(50, 226, 233, .8);
}
.chat__cerrar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background-color .3s var(--suave), color .3s var(--suave);
}
.chat__cerrar:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
.chat__cerrar .icono { width: 18px; height: 18px; }

.chat__hilo {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.burbuja {
  max-width: 84%;
  padding: 13px 17px;
  border-radius: 16px;
  font-size: .94rem;
  line-height: 1.55;
  animation: entrar-burbuja .4s var(--sale) both;
}
.burbuja--bot {
  align-self: flex-start;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 6px;
}
.burbuja--yo {
  align-self: flex-end;
  background: var(--cian);
  color: #042026;
  border-bottom-right-radius: 6px;
}
@keyframes entrar-burbuja {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Puntos de "está escribiendo" */
.escribiendo { display: flex; gap: 5px; align-items: center; padding: 15px 18px; }
.escribiendo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-tenue);
  animation: saltar-punto 1.3s ease-in-out infinite;
}
.escribiendo i:nth-child(2) { animation-delay: .18s; }
.escribiendo i:nth-child(3) { animation-delay: .36s; }
@keyframes saltar-punto {
  0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.chat__atajos { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 4px; }
.chat__atajo {
  padding: 9px 16px;
  border: 1px solid var(--borde-cian);
  border-radius: 99px;
  background: rgba(50, 226, 233, .05);
  color: var(--cian-claro);
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s var(--suave), transform .4s var(--sale);
}
.chat__atajo:hover { background: rgba(50, 226, 233, .14); transform: translateX(3px); }

.chat__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--borde);
}
.chat__entrada {
  flex: 1;
  min-width: 0;
  padding: 12px 17px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  font-size: .93rem;
  transition: border-color .3s var(--suave);
}
.chat__entrada::placeholder { color: var(--texto-tenue); }
.chat__entrada:focus { outline: none; border-color: var(--borde-cian); }
.chat__entrada:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

.chat__enviar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--cian);
  color: #042026;
  cursor: pointer;
  transition: background-color .3s var(--suave), transform .4s var(--sale);
}
.chat__enviar:hover { background: var(--cian-claro); transform: scale(1.07); }
.chat__enviar .icono { width: 18px; height: 18px; }

/* == 19. Revelados ======================================================= */

/* Estado de partida: visible en cuanto no haya JS (ver <noscript> en el HTML) */
.revela {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s var(--sale),
    transform .85s var(--sale);
}
.revela.revelado { opacity: 1; transform: none; }

/* Escalonado dentro de una misma rejilla */
.revela[data-retardo="1"] { transition-delay: .08s; }
.revela[data-retardo="2"] { transition-delay: .16s; }
.revela[data-retardo="3"] { transition-delay: .24s; }
.revela[data-retardo="4"] { transition-delay: .32s; }

/* == 20. Páginas de texto legal ========================================== */

.texto-legal {
  max-width: 74ch;
  margin-inline: auto;
  padding-top: calc(var(--cabecera) + 40px);
}
.texto-legal h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: 14px; }
.texto-legal .fecha { color: var(--texto-tenue); font-size: .9rem; margin-bottom: 48px; }
.texto-legal h2 { font-size: 1.36rem; margin: 44px 0 14px; }
.texto-legal p, .texto-legal li { color: var(--texto-suave); margin-bottom: 14px; }
.texto-legal ul { list-style: disc; padding-left: 22px; }
.texto-legal a { color: var(--cian); text-decoration: underline; text-underline-offset: 3px; }
.texto-legal .pendiente {
  padding: 20px 24px;
  margin-bottom: 34px;
  border: 1px dashed rgba(242, 85, 107, .45);
  border-radius: var(--radio);
  background: rgba(242, 85, 107, .05);
  color: var(--texto);
}


/* Nota informativa, en cian: aclara algo, no avisa de nada pendiente */
.texto-legal .nota {
  padding: 18px 22px;
  margin-bottom: 34px;
  border: 1px solid var(--borde-cian);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: rgba(50, 226, 233, .05);
  color: var(--texto-suave);
}
.texto-legal .nota p:last-child { margin-bottom: 0; }

/* Los pocos datos que sólo puede poner el titular. Antes de publicar,
   buscar "rellenar" en este archivo y en las páginas legales. */
.texto-legal .rellenar {
  padding: 2px 9px;
  border-radius: 7px;
  border: 1px dashed rgba(242, 85, 107, .55);
  background: rgba(242, 85, 107, .09);
  color: var(--texto);
  font-size: .93em;
  font-style: normal;
}

.texto-legal h3 {
  font-size: 1.02rem;
  color: var(--texto);
  margin: 28px 0 10px;
}

/* Tablas de plazos y destinatarios. En móvil se desplazan solas. */
.texto-legal .tabla-envoltorio { overflow-x: auto; margin: 18px 0 28px; }
.texto-legal table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .95rem;
}
.texto-legal th,
.texto-legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-suave);
}
.texto-legal thead th {
  color: var(--texto);
  font-weight: 600;
  border-bottom-color: var(--borde-fuerte);
}
.texto-legal tbody tr:last-child td { border-bottom: 0; }

/* == 21. Adaptación a pantallas pequeñas ================================= */

@media (max-width: 1180px) {
  .servicios__rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  .cabecera-seccion { grid-template-columns: 1fr; align-items: start; }
  .nosotros { grid-template-columns: 1fr; }
  .nosotros__figura { min-height: 380px; order: -1; }
  .contacto { grid-template-columns: 1fr; }
  .pie__alto { grid-template-columns: 1fr; justify-items: start; }
  .pie__nav { justify-content: flex-start; }
}

@media (max-width: 860px) {
  :root { --cabecera: 76px; }

  /* El menú se convierte en un panel a pantalla completa */
  .hamburguesa { display: grid; }

  .nav {
    position: fixed;
    inset: var(--cabecera) 0 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 40px var(--margen);
    background: rgba(5, 7, 14, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .35s var(--suave), transform .45s var(--sale), visibility 0s linear .45s;
  }
  .nav.abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .nav__enlace { font-size: 1.5rem; font-family: var(--fuente-titulo); font-weight: 700; padding-block: 12px; }
  .nav__enlace::after { display: none; }

  .cabecera__cta { display: none; }

  .servicios__rejilla { grid-template-columns: repeat(2, 1fr); }
  /* Apilado: la marca arriba y las cuatro razones debajo. Los cables no
     tendrían sentido en columna, así que se quitan */
  .motivos {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .motivos__cables { display: none; }
  .motivos__centro {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: auto;
    padding: clamp(26px, 7vw, 40px);
    margin-bottom: 10px;
  }
  .motivos__aro { border-radius: var(--radio-g); }
  .motivos__aro::after { inset: -10px; border-radius: calc(var(--radio-g) + 10px); }
  .motivo:nth-child(1),
  .motivo:nth-child(2),
  .motivo:nth-child(3),
  .motivo:nth-child(4) { grid-area: auto; }
  .motivo__punto { display: none; }

  .cifras { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }

  .ruta::before,
  .ruta__avance { left: 26px; }
  .paso { grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
  .paso__nodo { grid-column: 1; width: 52px; height: 52px; }
  .paso__nodo .icono { width: 21px; height: 21px; }
  .paso__ficha,
  .paso:nth-child(even) .paso__ficha { grid-column: 2; }

  .proyectos { grid-template-columns: 1fr; }
  .proyectos > :nth-child(even) { margin-top: 0; }

  .formulario__rejilla { grid-template-columns: 1fr; gap: 22px; }

  /* Siguen apilados en la esquina, sólo que más pequeños */
  :root { --fab: 50px; }
  .rail { gap: 10px; }
  .rail__boton { width: 42px; height: 42px; }
  .rail__boton .icono { width: 18px; height: 18px; }
  .rail__nombre { display: none; }

  /* El botón de subir vive en la esquina contraria, no se estorban */
  .chat { height: min(520px, calc(100svh - 190px)); }

  .flotante { font-size: .82rem; padding: 9px 14px; }
  .flotante--2 { right: -2%; }
  .flotante--4 { left: 0; }

  .pie__bajo { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .cifras  { grid-template-columns: 1fr 1fr; }
  .servicios__rejilla { grid-template-columns: 1fr; }
  .portada__botones .boton { width: 100%; justify-content: center; }
}

/* Quien pide menos movimiento no recibe ninguno */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .revela { opacity: 1; transform: none; }
  .marquesina__capa { animation: none; }

  /* La malla de «Nosotros» se enseña entera, sin dibujarse */
  .marca-grande .arista { stroke-dashoffset: 0; }
  .marca-grande .nodo { opacity: 1; transform: none; }
  .saltar-entrada { display: none; }
}