/*
 * Web de Plexo, maqueta. Tokens primero: todo color, tamaño y espacio sale de aquí.
 * Tamaños de letra: escala de Tailwind. Espacios: 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80 y 96 px.
 */
/* Concepto: una sola columna de lectura sobre un lienzo fijo; el plexo cambia de escena según la sección.
   Diseño de un solo tema, oscuro por decisión. */
:root {
  color-scheme: dark;

  /* Color */
  --negro: #000000;
  --texto-apagado: #4d4d4d;
  --superficie: #181818;
  --superficie-alta: #1f1f1f;
  --borde: #313131;
  --vidrio: rgb(24 24 24 / 0.58);
  --vidrio-fuerte: rgb(0 0 0 / 0.8);
  --vidrio-borde: rgb(255 255 255 / 0.09);
  --texto: #ffffff;
  --texto-tenue: #9b9b9b;
  /* Paleta de marca (octubre 2026): principal #6D3FD9, profundidad #5B21B6, soporte #A78BFA. */
  --acento: #6d3fd9;
  --acento-hover: #5b21b6;
  --lavanda: #c4b5fd;
  --violeta: #8b5cf6;
  --cian: #4fd8ff;
  --magenta: #f04bd8;
  --error: #ff9db0;

  /* Espacio */
  --e-25: 2px;
  --e-50: 4px;
  --e-75: 8px;
  --e-100: 12px;
  --e-200: 16px;
  --e-300: 24px;
  --e-400: 32px;
  --e-500: 40px;
  --e-600: 48px;
  --e-700: 64px;
  --e-800: 80px;
  --e-900: 96px;

  /* Movimiento */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;
  --dur-revelar: 700ms;
  --dur-corta: 300ms;

  /* Letra */
  --fuente: 'Manrope', system-ui, sans-serif;
  --fuente-logo: 'Montserrat', 'Manrope', system-ui, sans-serif;
  /* Solo para datos: fuentes, fechas, cifras y el rótulo de datos de ejemplo. */
  --fuente-datos: 'Manrope', system-ui, sans-serif;
}

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

[hidden] {
  display: none !important;
}

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

.icono {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html {
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--e-900);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.sin-scroll {
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

img {
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--lavanda);
  outline-offset: 3px;
}

.saltar {
  position: fixed;
  top: var(--e-200);
  left: var(--e-200);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-75) var(--e-100);
  border-radius: 9999px;
  background: var(--texto);
  color: var(--negro);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-corta) var(--curva);
}

.saltar:focus-visible {
  transform: none;
}

/* El fondo: un lienzo fijo detrás de todo. */
#plexo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
  pointer-events: none;
  background: var(--negro);
}

main,
.pie {
  position: relative;
  z-index: 2;
}

/* ---------- Piezas ancladas al plexo (escenas.js las mueve en cada cuadro) ---------- */

.anclas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.anclas-fibras {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tallos line {
  stroke: var(--lavanda);
  stroke-width: 1;
  stroke-opacity: 0.5;
  stroke-dasharray: 3 4;
}

.tallos circle {
  fill: var(--magenta);
}

.fibra-viva {
  fill: none;
  stroke: var(--violeta);
  stroke-width: 1.5;
  stroke-opacity: 0.6;
}

.fibra-viva-pulso {
  fill: none;
  stroke: var(--cian);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 28 972;
}

.fibra-viva-punta {
  fill: var(--cian);
}

.fibra-viva,
.fibra-viva-pulso,
.fibra-viva-punta {
  opacity: 0;
}

.grupo-anclas {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.grupo-anclas > * {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* Problema: fragmentos de información que se alejan con su punta. */
.fragmento {
  display: grid;
  gap: var(--e-25);
  width: 208px;
  padding: var(--e-75) var(--e-100);
  border-radius: 12px;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.fragmento small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--lavanda);
}

.fragmento span {
  font-size: 14px;
  line-height: 20px;
}

.ancla-ejemplo {
  margin: 0;
  padding: var(--e-25) var(--e-75);
  border-radius: 9999px;
  border: 1px solid var(--borde);
  background: var(--negro);
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-tenue);
  white-space: nowrap;
}

@media (max-aspect-ratio: 20/21) {
  .fragmento {
    width: 168px;
  }

  .fragmento span {
    font-size: 12px;
    line-height: 16px;
  }
}

/* Logos de herramientas y de la IA: se pintan con fill. */
.marca-icono {
  width: 20px;
  height: 20px;
  fill: var(--texto);
}

.ia-logo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #d97757;
}

.ia-logo .marca-icono {
  width: 14px;
  height: 14px;
}

.contenedor {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- Capa de datos: lo que es dato se lee en monoespaciada ---------- */

.fuente,
.aviso-rotulo,
.ancla-ejemplo,
.filas small,
.chat-ahorro,
.propuesta small,
.conexion-nombre small,
.chips-fuente span,
.pieza small,
.compromiso small,
.borrador-pie small {
  font-family: var(--fuente-datos);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Marca ---------- */

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-75);
  min-height: 44px;
  text-decoration: none;
  border-radius: 9999px;
}

.marca-nombre {
  font-family: var(--fuente-logo);
  font-weight: 800;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.04em;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-75);
  min-height: 44px;
  padding: var(--e-75) var(--e-100);
  border: 0;
  border-radius: 9999px;
  font: 600 16px/24px var(--fuente);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-corta) var(--curva),
    background-color var(--dur-corta) var(--curva);
}

.boton:active {
  transform: scale(0.98);
}

.boton-primario {
  position: relative;
  background: var(--acento);
  color: var(--texto);
  padding-inline: var(--e-200);
}

/* Al pasar el cursor, un anillo con los colores del plexo recorre el borde una vez. */
@property --giro {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.boton-primario::before {
  content: '';
  position: absolute;
  inset: -3px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--giro), var(--violeta), var(--cian), var(--magenta), var(--lavanda), var(--violeta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .boton-primario:hover::before {
    animation: anillo 1200ms var(--curva) forwards;
  }
}

@keyframes anillo {
  0% {
    opacity: 0;
    --giro: 0deg;
  }
  15%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    --giro: 360deg;
  }
}

.boton-chico {
  min-height: 36px;
  font-size: 14px;
  line-height: 20px;
  background: var(--acento);
  color: var(--texto);
}

@media (hover: hover) {
  .boton-primario:hover,
  .boton-chico:hover {
    background: var(--acento-hover);
  }

  .boton-primario:hover .icono {
    transform: translateX(var(--e-50));
  }
}

.boton .icono {
  font-size: 18px;
  transition: transform var(--dur-corta) var(--curva);
}

/* ---------- Menú: isla de vidrio ---------- */

.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: calc(var(--e-300) + env(safe-area-inset-top, 0px)) var(--e-200) 0;
  pointer-events: none;
}

.isla {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--e-300);
  width: max-content;
  max-width: 100%;
  padding: var(--e-75) var(--e-75) var(--e-75) var(--e-200);
  border-radius: 9999px;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}

/* Avance de lectura: una fibra fina bajo el menú que se llena en cian con el scroll. */
@supports (animation-timeline: scroll()) {
  .isla::after {
    content: '';
    position: absolute;
    left: var(--e-300);
    right: var(--e-300);
    bottom: -1px;
    height: 2px;
    border-radius: 9999px;
    background: var(--cian);
    transform-origin: left;
    transform: scaleX(0);
    animation: avance-lectura linear both;
    animation-timeline: scroll(root);
  }

  @keyframes avance-lectura {
    to {
      transform: scaleX(1);
    }
  }
}

.enlaces {
  display: flex;
  gap: var(--e-50);
}

.enlaces a {
  display: block;
  padding: var(--e-75) var(--e-100);
  border-radius: 9999px;
  color: var(--texto-tenue);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--dur-corta) var(--curva),
    background-color var(--dur-corta) var(--curva);
}

.enlaces a[aria-current='true'] {
  color: var(--texto);
  background: rgb(255 255 255 / 0.08);
}

@media (hover: hover) {
  .enlaces a:hover {
    color: var(--texto);
  }
}

.boton-menu {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
}

.boton-menu span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform var(--dur) var(--curva);
}

.boton-menu span:first-child {
  top: 17px;
}

.boton-menu span:last-child {
  top: 25px;
}

.boton-menu[aria-expanded='true'] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.boton-menu[aria-expanded='true'] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  align-content: center;
  padding: var(--e-900) var(--e-300) var(--e-600);
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: blur(64px);
  backdrop-filter: blur(64px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--curva),
    visibility 0s linear var(--dur);
}

.menu-movil[data-abierto='si'] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--curva);
}

.menu-movil ul {
  display: grid;
  gap: var(--e-100);
}

.menu-movil li {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity var(--dur) var(--curva),
    transform var(--dur) var(--curva);
}

.menu-movil[data-abierto='si'] li {
  opacity: 1;
  transform: none;
}

.menu-movil[data-abierto='si'] li:nth-child(1) { transition-delay: 100ms; }
.menu-movil[data-abierto='si'] li:nth-child(2) { transition-delay: 150ms; }
.menu-movil[data-abierto='si'] li:nth-child(3) { transition-delay: 200ms; }
.menu-movil[data-abierto='si'] li:nth-child(4) { transition-delay: 250ms; }
.menu-movil[data-abierto='si'] li:nth-child(5) { transition-delay: 300ms; }
.menu-movil[data-abierto='si'] li:nth-child(6) { transition-delay: 350ms; }
.menu-movil[data-abierto='si'] li:nth-child(7) { transition-delay: 400ms; }

.menu-movil a:not(.boton) {
  display: block;
  padding: var(--e-75) 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  text-decoration: none;
}

.menu-movil a[aria-current='true'] {
  color: var(--lavanda);
}

.menu-movil .boton {
  margin-top: var(--e-300);
  width: 100%;
}

@media (max-width: 959px) {
  .isla {
    width: 100%;
    max-width: 560px;
    justify-content: space-between;
  }

  .enlaces,
  .isla > .boton-chico {
    display: none;
  }

  .boton-menu {
    display: block;
  }
}

/* ---------- Revelado al entrar en pantalla ---------- */

/* Solo se marca como pendiente lo que está fuera de la primera pantalla al cargar:
   lo que se ve al abrir la página nunca espera una animación. */
.js .revelar {
  transition:
    opacity var(--dur-revelar) var(--curva) var(--retraso, 0ms),
    transform var(--dur-revelar) var(--curva) var(--retraso, 0ms),
    filter var(--dur-revelar) var(--curva) var(--retraso, 0ms);
}

/* Entrada corta y nítida: el texto se puede leer casi en cuanto aparece. */
.js .revelar.pendiente {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .revelar,
  .js .revelar.pendiente {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* El alto de la neurona lo mide plexo.js; con tope, para que el titular nunca quede fuera de la primera pantalla. */
  padding: min(var(--neurona-abajo, 52vh), 58vh) var(--e-200) var(--e-600);
}

.titular-hero {
  max-width: 680px;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffffff, #9b9b9b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub-hero {
  max-width: 680px;
  margin-top: var(--e-200);
  color: var(--texto-tenue);
  text-wrap: balance;
}

.hero .boton-primario {
  margin-top: var(--e-300);
  box-shadow: 0 0 0 1px rgba(177, 144, 247, 0.25), 0 10px 40px -8px rgba(109, 63, 217, 0.65);
}

/* Entrada del inicio: titular, texto y botón suben en cascada mientras el cerebro aparece. */
@media (prefers-reduced-motion: no-preference) {
  .titular-hero,
  .sub-hero,
  .hero .boton-primario {
    animation: subir-hero 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .sub-hero {
    animation-delay: 0.15s;
  }

  .hero .boton-primario {
    animation-delay: 0.3s;
  }
}

@keyframes subir-hero {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}

.fuente {
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin-top: var(--e-50);
}

@media (min-width: 640px) {
  .titular-hero {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .sub-hero {
    font-size: 18px;
    line-height: 28px;
    margin-top: var(--e-300);
  }

  .hero .boton-primario {
    margin-top: var(--e-400);
  }
}

@media (min-width: 1024px) {
  .titular-hero {
    font-size: 72px;
  }
}

/* ---------- Secciones ---------- */

.seccion {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--e-900) var(--e-300);
}

.columna {
  max-width: 520px;
}

/* Secciones de la segunda mitad: alto según su contenido, sin zonas muertas. */
.seccion.seccion-compacta {
  min-height: auto;
  padding-block: 128px;
}

h2 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.texto-grande {
  margin-top: var(--e-300);
  font-size: 18px;
  line-height: 28px;
  color: var(--texto-tenue);
}

.apoyo {
  margin-top: var(--e-300);
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-tenue);
}

@media (min-width: 1024px) {
  h2 {
    font-size: 48px;
    line-height: 1;
  }

  .texto-grande {
    font-size: 20px;
    line-height: 28px;
  }
}

/* En pantallas verticales, la neurona queda arriba y el texto abajo. Cuando el texto pasa sobre la
   neurona, un halo oscuro lo despega de las partículas. */
@media (max-aspect-ratio: 20/21) {
  .seccion-lado {
    align-items: flex-end;
  }

  .seccion-lado .columna,
  .preguntas summary {
    text-shadow:
      0 0 16px var(--negro),
      0 0 4px var(--negro);
  }
}

/* Beneficios: una lista, sin tarjetas. El beneficio activo enciende su zona del plexo. */
.columna-ancha {
  max-width: 560px;
}

.beneficios {
  display: grid;
  margin-top: var(--e-500);
}

.beneficios li {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--e-200);
  padding: var(--e-300) 0;
}

.beneficios li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  right: 0;
  height: 1px;
  background: var(--vidrio-borde);
}

.beneficios .icono {
  margin-top: var(--e-25);
  font-size: 24px;
  color: var(--texto-tenue);
  transition: color var(--dur) var(--curva);
}

.beneficios h3 {
  color: var(--texto-tenue);
  transition: color var(--dur) var(--curva);
}

.beneficios p {
  margin-top: var(--e-50);
  color: var(--texto-tenue);
}

.beneficios li[data-activo] .icono {
  color: var(--cian);
}

.beneficios li[data-activo] h3 {
  color: var(--texto);
}

/* Qué hace: título, lista y ventana de la app. En pantallas anchas la ventana va a la derecha;
   en verticales queda fija arriba mientras la lista pasa por debajo. */
.producto {
  display: grid;
  gap: var(--e-400);
  grid-template-areas: 'titulo' 'ventana' 'lista';
  align-items: start;
}

.producto > h2 {
  grid-area: titulo;
  max-width: 560px;
}

.producto > .ventana {
  grid-area: ventana;
}

.producto > .beneficios {
  grid-area: lista;
  margin-top: 0;
  max-width: 560px;
}

/* En escritorio, la ventana queda fija mientras la lista pasa: cada beneficio tiene su tramo de
   scroll para leerlo junto a su pantalla, sin cambios atropellados. */
@media (min-aspect-ratio: 21/20) and (min-width: 960px) {
  .producto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'titulo ventana' 'lista ventana';
    column-gap: var(--e-800);
    row-gap: var(--e-300);
  }

  .producto > .ventana {
    position: sticky;
    top: calc(50vh - 190px);
    align-self: start;
  }

  .producto > .beneficios li {
    min-height: 26vh;
    align-content: center;
  }
}

.ventana {
  margin: 0;
  border-radius: 24px;
  border: 1px solid var(--vidrio-borde);
  background: rgb(14 12 24 / 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  overflow: hidden;
}

.ventana-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-200);
  padding: var(--e-100) var(--e-200);
  background: rgb(255 255 255 / 0.03);
}

.ventana-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-75);
  font-family: var(--fuente-logo);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
}

.ventana-cuerpo {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 316px;
}

.ventana-menu {
  display: grid;
  align-content: start;
  gap: var(--e-50);
  padding: var(--e-200) var(--e-100);
  background: rgb(255 255 255 / 0.02);
}

.ventana-menu button {
  padding: var(--e-75) var(--e-100);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: 600 12px/16px var(--fuente);
  color: var(--texto-tenue);
  text-align: left;
  cursor: pointer;
  transition:
    color var(--dur-corta) var(--curva),
    background-color var(--dur-corta) var(--curva),
    transform var(--dur-corta) var(--curva);
}

.ventana-menu button:focus-visible {
  outline-offset: 0;
}

.ventana-menu button:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .ventana-menu button:hover {
    color: var(--texto);
    background: rgb(255 255 255 / 0.06);
  }
}

.ventana-menu button[aria-pressed='true'] {
  color: var(--texto);
  background: rgb(124 58 237 / 0.32);
}

.pantallas {
  padding: var(--e-200);
  min-width: 0;
}

.pantalla {
  display: none;
}

.pantalla.activa {
  display: grid;
  gap: var(--e-200);
}

.pantalla-titulo {
  margin: 0;
  display: grid;
  gap: var(--e-25);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.pantalla-titulo small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--texto-tenue);
}

/* Al cambiar de pantalla, sus piezas aterrizan una tras otra, una sola vez. */
.pantalla.activa [style*='--i'] {
  animation: aterriza 700ms var(--curva) both;
  animation-delay: calc(var(--i) * 110ms);
}

@keyframes aterriza {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

.filas {
  display: grid;
  gap: var(--e-100);
}

.filas li,
.chat-sin,
.chat-con,
.propuesta {
  display: grid;
  gap: var(--e-50);
  padding: var(--e-100) var(--e-200);
  border-radius: 8px;
  border: 1px solid var(--vidrio-borde);
  background: rgb(255 255 255 / 0.04);
}

.filas p,
.chat p,
.propuesta p {
  font-size: 14px;
  line-height: 20px;
}

.filas small,
.chat small,
.propuesta small {
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-tenue);
}

.estado-alerta {
  color: var(--magenta);
}

/* Pantalla Conexiones: herramientas leídas y una barra que avanza una vez al mostrarse. */
.conexiones {
  display: grid;
  gap: var(--e-75);
}

.conexiones li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-100);
  padding: var(--e-75) var(--e-100);
  border-radius: 8px;
  border: 1px solid var(--vidrio-borde);
  background: rgb(255 255 255 / 0.04);
}

.conexion-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--marca);
}

.conexion-logo .marca-icono {
  width: 16px;
  height: 16px;
}

.conexion-logo .icono {
  font-size: 18px;
  color: var(--texto);
}

.conexion-nombre {
  display: grid;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.conexion-nombre small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--texto-tenue);
}

.conexion-avance {
  width: 72px;
  height: 6px;
  border-radius: 9999px;
  background: var(--borde);
  overflow: hidden;
}

.conexion-avance span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: var(--cian);
  transform-origin: left;
}

.pantalla.activa .conexion-avance span {
  animation: avance 1200ms var(--curva) 400ms both;
}

@keyframes avance {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pantalla.activa .conexion-avance span {
    animation: none;
  }
}

.chat {
  display: grid;
  gap: var(--e-100);
}

.chat-pregunta {
  justify-self: end;
  padding: var(--e-75) var(--e-100);
  border-radius: 12px;
  background: var(--acento);
  font-weight: 600;
}

/* La respuesta sin contexto se tacha sola al aparecer: la diferencia la pone Plexo. */
.chat-sin p {
  color: var(--texto-tenue);
  background: linear-gradient(var(--texto-tenue), var(--texto-tenue)) left 55% / 0% 1px no-repeat;
}

.pantalla.activa .chat-sin p {
  animation: tachar 600ms var(--curva) 650ms forwards;
}

@keyframes tachar {
  to {
    background-size: 100% 1px;
  }
}

.chat-con {
  border-color: rgb(79 216 255 / 0.4);
}

.chat .chat-ahorro {
  color: var(--lavanda);
}

.chips-fuente {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-50);
}

.chips-fuente span {
  padding: var(--e-25) var(--e-75);
  border-radius: 9999px;
  background: rgb(79 216 255 / 0.12);
  color: var(--cian);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.propuesta {
  justify-items: start;
  gap: var(--e-75);
  padding: var(--e-200);
}

.propuesta .boton-aprobar {
  margin-top: var(--e-50);
}

.boton-aprobar:disabled {
  background: var(--superficie-alta);
  color: var(--cian);
  cursor: default;
}

@media (max-aspect-ratio: 20/21), (max-width: 959px) {
  /* La sombra negra tapa la franja entre el menú y la ventana fija: la lista no se ve pasar por ahí. */
  .producto > .ventana {
    position: sticky;
    top: 92px;
    z-index: 1;
    box-shadow: 0 -12px 0 var(--negro);
  }

  .ventana-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    min-height: 236px;
  }

  /* En pantallas de 320 px las cinco pestañas no caben: la barra se desliza de lado. */
  .ventana-menu {
    display: flex;
    gap: var(--e-50);
    padding: var(--e-75);
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* Cada pestaña parte del ancho de su palabra: «Conexiones» necesita más lugar que «Mejoras». */
  .ventana-menu button {
    flex: 1 1 auto;
    min-height: 44px;
    padding-inline: var(--e-25);
    text-align: center;
  }

  /* Ventana compacta: la lista se lee debajo de ella, no detrás. */
  .pantallas {
    max-height: 268px;
    overflow: hidden;
    padding: var(--e-100) var(--e-200) var(--e-200);
    -webkit-mask-image: linear-gradient(#000 82%, transparent);
    mask-image: linear-gradient(#000 82%, transparent);
  }

  .ventana-barra {
    padding-block: var(--e-75);
  }

  .pantalla-titulo {
    font-size: 16px;
    line-height: 24px;
  }

  /* La pestaña activa ya dice en qué pantalla estás: el título sobra y deja lugar al contenido. */
  .pantalla-titulo {
    display: none;
  }

  .chat {
    gap: var(--e-75);
  }

  .chat-pregunta {
    padding: var(--e-50) var(--e-100);
  }

  /* La respuesta sin contexto cabe en una línea tachada; lo que importa es la de Plexo. */
  .chat-sin p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* La lista pasa por debajo de la ventana fija: necesita fondo para leerse. */
  .producto > .beneficios li {
    background: var(--negro);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pantalla.activa [style*='--i'],
  .pantalla.activa .chat-sin p {
    animation: none;
  }

  .chat-sin p {
    background-size: 100% 1px;
  }
}

/* Frase grande */
.seccion-frase {
  justify-content: center;
  text-align: center;
}

.frase {
  max-width: 680px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Cada palabra se enciende al pasar la línea de lectura (sitio.js). */
.js .frase .palabra {
  color: var(--texto-apagado);
  transition: color var(--dur) var(--curva);
}

.js .frase .palabra.encendida {
  color: var(--texto);
}

@media (prefers-reduced-motion: reduce) {
  .js .frase .palabra {
    color: var(--texto);
    transition: none;
  }
}

@media (min-width: 1024px) {
  .frase {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.03em;
  }
}

/* ---------- Cómo funciona: pasos sobre una fibra y la ventana de la memoria ---------- */

.como {
  display: grid;
  gap: var(--e-400);
  grid-template-areas: 'titulo' 'control' 'fijo' 'pasos';
}

.como > h2 {
  grid-area: titulo;
  max-width: 680px;
}

.como-fijo {
  grid-area: fijo;
}

.pasos {
  grid-area: pasos;
  position: relative;
  display: grid;
  gap: var(--e-400);
}

.pasos li {
  display: grid;
  align-content: start;
  gap: var(--e-75);
}

.pasos h3 {
  position: relative;
  font-size: 20px;
  line-height: 28px;
  transition: color var(--dur) var(--curva);
}

.pasos p {
  color: var(--texto-tenue);
  transition: color var(--dur) var(--curva);
}

.pasos .paso-nota {
  font-size: 12px;
  line-height: 16px;
  color: var(--lavanda);
}

/* Teléfono y pantallas verticales: tres botones eligen el paso, como las pestañas de la ventana.
   Se lee solo el paso elegido; sin JavaScript no hay botones y se leen los tres. */
.pasos-control {
  grid-area: control;
  display: none;
}

.js .pasos-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-50);
  max-width: 480px;
  padding: var(--e-50);
  border-radius: 9999px;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.pasos-control button {
  min-height: 44px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font: 600 14px/20px var(--fuente);
  color: var(--texto-tenue);
  cursor: pointer;
  transition:
    color var(--dur-corta) var(--curva),
    background-color var(--dur-corta) var(--curva),
    transform var(--dur-corta) var(--curva);
}

.pasos-control button:active {
  transform: scale(0.97);
}

.pasos-control button[aria-pressed='true'] {
  color: var(--texto);
  background: rgb(124 58 237 / 0.32);
}

@media (hover: hover) {
  .pasos-control button:hover {
    color: var(--texto);
  }
}

.js .pasos li:not([data-activo]) {
  display: none;
}

/* Cuando el texto pasa sobre la neurona, un halo oscuro lo despega de las partículas. */
@media (max-aspect-ratio: 20/21) {
  .como > h2,
  .pasos {
    text-shadow:
      0 0 16px var(--negro),
      0 0 4px var(--negro);
  }
}

/* 402 px: el escenario a su escala mayor (1,25) más el borde. */
.ventana-como {
  max-width: 402px;
}

/* El escenario mide 320 por 460 y se escala a la ventana (sitio.js fija --esc). */
.escenario-caja {
  position: relative;
  height: calc(460px * var(--esc, 1));
}

.escenario {
  --prog: 0;
  position: absolute;
  top: 0;
  left: calc(50% - 160px);
  width: 320px;
  height: 460px;
  transform: scale(var(--esc, 1));
  transform-origin: top center;
}

/* Estado 1: datos sueltos, cada uno con su giro. Con el scroll derivan apenas, según su profundidad. */
.pieza {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 236px;
  padding: var(--e-75) var(--e-100);
  border-radius: 12px;
  border: 1px solid var(--vidrio-borde);
  background: var(--superficie);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
  transform: translate(var(--x1), var(--y1)) rotate(var(--r1)) translateY(calc(var(--prog) * var(--prof) * -22px));
  transition:
    transform var(--dur) var(--curva) var(--d),
    opacity var(--dur) var(--curva),
    box-shadow var(--dur) var(--curva);
}

.pieza small {
  color: var(--lavanda);
}

.pieza span {
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pieza-1 { --x1: 14px; --y1: 56px; --r1: -3deg; --y2: 88px; --d: 0ms; --prof: 1.2; }
.pieza-2 { --x1: 68px; --y1: 134px; --r1: 2.5deg; --y2: 144px; --d: 50ms; --prof: 0.8; }
.pieza-3 { --x1: 22px; --y1: 212px; --r1: -2deg; --y2: 200px; --d: 100ms; --prof: 1.5; }
.pieza-4 { --x1: 62px; --y1: 290px; --r1: 3deg; --y2: 256px; --d: 150ms; --prof: 1; }
.pieza-5 { --x1: 30px; --y1: 368px; --r1: -2.5deg; --y2: 312px; --d: 200ms; --prof: 1.3; }

/* Estado 2: los datos se alinean en la ficha del cliente, cada uno junto a su nodo de la fibra. */
.ficha-como {
  position: absolute;
  inset: 16px;
  border-radius: 16px;
  border: 1px solid var(--vidrio-borde);
  background: var(--superficie-alta);
  opacity: 0;
  scale: 0.98;
  transition:
    opacity var(--dur) var(--curva),
    scale var(--dur) var(--curva),
    translate var(--dur) var(--curva);
}

.ficha-como header {
  display: grid;
  gap: var(--e-25);
  padding: var(--e-100) var(--e-200);
}

.ficha-como header b {
  font-size: 16px;
  line-height: 24px;
}

.ficha-como header small {
  color: var(--texto-tenue);
}

.ficha-fibra {
  position: absolute;
  top: 99px;
  left: 8px;
  width: 2px;
  height: 0;
  border-radius: 9999px;
  background: var(--violeta);
  transition: height var(--dur) var(--curva) 120ms;
}

.ficha-nodos i {
  position: absolute;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--lavanda);
  box-shadow: 0 0 0 2px var(--superficie-alta);
  scale: 0;
  transition: scale var(--dur-corta) var(--curva);
}

.ficha-nodos i:nth-child(1) { top: 94px; transition-delay: 200ms; }
.ficha-nodos i:nth-child(2) { top: 150px; transition-delay: 270ms; }
.ficha-nodos i:nth-child(3) { top: 206px; transition-delay: 340ms; }
.ficha-nodos i:nth-child(4) { top: 262px; transition-delay: 410ms; }
.ficha-nodos i:nth-child(5) { top: 318px; transition-delay: 480ms; }
.ficha-nodos i:nth-child(6) { top: 382px; transition-delay: 560ms; background: var(--cian); }

/* Lo que Plexo aprendió de los datos: el comportamiento normal del cliente. */
.compromiso {
  position: absolute;
  top: 376px;
  left: 52px;
  width: 236px;
  display: grid;
  padding: var(--e-75) var(--e-100);
  border-radius: 12px;
  border: 1px solid rgb(79 216 255 / 0.35);
  background: rgb(79 216 255 / 0.08);
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity var(--dur) var(--curva),
    translate var(--dur) var(--curva);
}

.compromiso small {
  color: var(--cian);
}

.compromiso span {
  font-size: 14px;
  line-height: 20px;
}

[data-estado='2'] .pieza,
[data-estado='3'] .pieza {
  transform: translate(52px, var(--y2));
  box-shadow: none;
}

[data-estado='2'] .ficha-como,
[data-estado='3'] .ficha-como {
  opacity: 1;
  scale: 1;
}

[data-estado='2'] .ficha-fibra,
[data-estado='3'] .ficha-fibra {
  height: 288px;
}

[data-estado='2'] .ficha-nodos i,
[data-estado='3'] .ficha-nodos i {
  scale: 1;
}

[data-estado='2'] .compromiso,
[data-estado='3'] .compromiso {
  opacity: 1;
  translate: 0 0;
  transition-delay: 420ms;
}

/* Estado 3: la ficha queda atrás y sale la respuesta, con su fuente y el aviso a dirección. */
.borrador {
  position: absolute;
  top: 120px;
  left: 16px;
  right: 16px;
  display: grid;
  gap: var(--e-100);
  padding: var(--e-200);
  border-radius: 16px;
  border: 1px solid var(--vidrio-borde);
  background: var(--superficie);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.6);
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--dur) var(--curva),
    translate var(--dur) var(--curva);
}

.borrador header {
  display: grid;
  gap: var(--e-50);
}

.borrador-tipo {
  display: flex;
  align-items: center;
  gap: var(--e-75);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.borrador header small {
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-tenue);
}

.borrador-respuesta {
  padding: var(--e-75) var(--e-100);
  border-radius: 8px;
  background: var(--superficie-alta);
  font-size: 14px;
  line-height: 20px;
}

.borrador-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-75);
}

.borrador-pie small {
  color: var(--texto-tenue);
}

[data-estado='3'] .ficha-como {
  opacity: 0.35;
  scale: 0.96;
  translate: 0 -8px;
}

[data-estado='3'] .pieza {
  opacity: 0.35;
}

[data-estado='3'] .compromiso {
  opacity: 0.5;
  transition-delay: 0ms;
}

[data-estado='3'] .borrador {
  opacity: 1;
  translate: 0 0;
  transition-delay: 120ms;
}

/* Escritorio: los pasos a la izquierda, la ventana fija a la derecha. Cada paso tiene su tramo de scroll. */
@media (min-aspect-ratio: 21/20) and (min-width: 960px) {
  .como {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'titulo titulo' 'pasos fijo';
    column-gap: var(--e-700);
    row-gap: var(--e-500);
    align-items: start;
  }

  .js .pasos-control {
    display: none;
  }

  .como-fijo {
    position: sticky;
    top: var(--e-900);
  }

  .ventana-como {
    margin-inline: auto;
  }

  /* El aire bajo el último paso mantiene la ventana fija mientras se lee ese paso. */
  .pasos {
    gap: 0;
    padding-left: var(--e-500);
    padding-bottom: 32vh;
  }

  .js .pasos li:not([data-activo]) {
    display: grid;
  }

  .pasos li {
    min-height: 48vh;
    align-content: center;
  }

  .pasos li:first-child {
    align-content: start;
    padding-top: var(--e-300);
  }

  .pasos li:last-child {
    min-height: 32vh;
  }

  .pasos li:not([data-activo]) h3,
  .pasos li:not([data-activo]) p:not(.paso-nota) {
    color: var(--texto-tenue);
  }

  .pasos li[data-activo] p:not(.paso-nota) {
    color: var(--texto);
  }

  /* Una fibra violeta con un nodo por paso: el tramo encendido en cian llega hasta el paso activo.
     sitio.js mide los nodos y fija dónde empieza, cuánto mide y cuánto está encendido. */
  .pasos::before,
  .pasos::after {
    content: '';
    position: absolute;
    top: var(--riel-arriba, 14px);
    left: 9px;
    width: 2px;
    height: var(--riel-alto, 0px);
    border-radius: 9999px;
  }

  .pasos::before {
    background: rgb(139 92 246 / 0.4);
  }

  .pasos::after {
    background: var(--cian);
    box-shadow: 0 0 12px rgb(79 216 255 / 0.5);
    transform-origin: top;
    transform: scaleY(var(--riel-lleno, 0));
    transition: transform var(--dur) var(--curva);
  }

  /* El nodo de cada paso queda sobre la fibra, a la altura de su título. */
  .pasos h3::before,
  .pasos h3::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
  }

  .pasos h3::before {
    top: 4px;
    left: calc(-1 * var(--e-500));
    width: 20px;
    height: 20px;
    border: 2px solid var(--borde);
    background: var(--negro);
    transition:
      border-color var(--dur) var(--curva),
      box-shadow var(--dur) var(--curva);
  }

  .pasos h3::after {
    top: 10px;
    left: calc(-1 * var(--e-500) + 6px);
    width: 8px;
    height: 8px;
    background: var(--cian);
    scale: 0;
    transition: scale var(--dur) var(--curva);
  }

  .pasos li[data-activo] h3::before {
    border-color: var(--cian);
    box-shadow:
      0 0 0 4px rgb(79 216 255 / 0.16),
      0 0 16px rgb(79 216 255 / 0.4);
  }

  .pasos li[data-activo] h3::after {
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pieza,
  .ficha-como,
  .ficha-fibra,
  .ficha-nodos i,
  .compromiso,
  .borrador,
  .pasos h3,
  .pasos p,
  .pasos::after,
  .pasos h3::before,
  .pasos h3::after {
    transition: none;
  }

  .escenario {
    --prog: 0;
  }
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-75);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.estado::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
}

.estado-propuesto {
  color: var(--texto-tenue);
}

.estado-respaldado {
  color: var(--cian);
}

.estado-confirmado {
  color: var(--lavanda);
}

.aviso-rotulo {
  display: inline-block;
  padding: var(--e-25) var(--e-75);
  border-radius: 9999px;
  border: 1px solid var(--borde);
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-tenue);
}

/* Botones de acción dentro de las piezas: área táctil completa aunque usen la letra chica. */
.boton-aprobar {
  min-height: 44px;
  padding-inline: var(--e-200);
}

/* Seguridad: cuatro garantías en fila, separadas por líneas finas como los beneficios. */
.seguridad-cabeza {
  max-width: 680px;
}

.garantias {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--e-600);
  border-radius: 24px;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.garantias li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e-75);
  padding: var(--e-400) var(--e-300);
}

.garantias li + li::before {
  content: '';
  position: absolute;
  top: var(--e-400);
  bottom: var(--e-400);
  left: 0;
  width: 1px;
  background: var(--vidrio-borde);
}

.garantias .icono {
  margin-bottom: var(--e-75);
  font-size: 28px;
  color: var(--cian);
}

.garantias h3 {
  font-size: 20px;
  line-height: 28px;
}

.garantias p {
  color: var(--texto-tenue);
}

@media (max-width: 1023px) {
  .garantias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .garantias li:nth-child(3)::before {
    display: none;
  }

  /* En dos columnas, la segunda fila lleva una línea arriba. */
  .garantias li:nth-child(n + 3)::after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--e-300);
    right: var(--e-300);
    height: 1px;
    background: var(--vidrio-borde);
  }
}

@media (max-width: 639px) {
  .garantias {
    grid-template-columns: minmax(0, 1fr);
  }

  .garantias li {
    padding: var(--e-300);
  }

  .garantias li + li::before {
    display: block;
    top: 0;
    bottom: auto;
    left: var(--e-300);
    right: var(--e-300);
    width: auto;
    height: 1px;
  }

  .garantias li:nth-child(n + 3)::after {
    display: none;
  }
}

/* Preguntas: filas con separador fino, como los beneficios; sin tarjetas. */
.preguntas {
  display: grid;
  max-width: 760px;
  margin-top: var(--e-500);
}

.preguntas-contacto {
  max-width: 400px;
  margin-top: var(--e-300);
  color: var(--texto-tenue);
}

/* El enlace va en su propia línea: con 44 px de alto dentro del párrafo abriría el interlineado. */
.preguntas-contacto a {
  display: flex;
  width: max-content;
  margin-top: var(--e-50);
  align-items: center;
  gap: var(--e-75);
  min-height: 44px;
  color: var(--lavanda);
  font-weight: 600;
  text-decoration: none;
}

.preguntas-contacto .icono {
  font-size: 16px;
  transition: transform var(--dur-corta) var(--curva);
}

@media (hover: hover) {
  .preguntas-contacto a:hover .icono {
    transform: translateX(var(--e-50));
  }
}

/* En escritorio: título y contacto fijos a la izquierda, el acordeón a la derecha. */
@media (min-width: 1024px) {
  .preguntas-dos {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-800);
    align-items: start;
  }

  .preguntas-lado {
    position: sticky;
    top: 128px;
  }

  /* La primera pregunta queda a la altura del título: el centro de su fila (32 px) sube 8 px
     hasta el centro de la primera línea del título (24 px). */
  .preguntas-dos .preguntas {
    margin-top: calc(-1 * var(--e-75));
  }
}

.preguntas details {
  position: relative;
}

.preguntas details + details::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--vidrio-borde);
}

.preguntas summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-200);
  min-height: 64px;
  padding: var(--e-200) 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  transition: color var(--dur-corta) var(--curva);
}

@media (hover: hover) {
  .preguntas summary:hover {
    color: var(--lavanda);
  }
}

.preguntas summary::-webkit-details-marker {
  display: none;
}

.preguntas summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--texto-tenue);
  border-bottom: 2px solid var(--texto-tenue);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-corta) var(--curva);
}

.preguntas details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.preguntas details p {
  max-width: 65ch;
  padding: 0 var(--e-400) var(--e-300) 0;
  color: var(--texto-tenue);
}

/* Llamado final */
/* El logo de partículas se dibuja en el lienzo, encima de este hueco: plexo.js lo mide. */
.seccion-final {
  min-height: auto;
  padding-top: 112px;
  padding-bottom: var(--e-700);
}

.final {
  display: grid;
  gap: var(--e-500);
}

.final-espacio {
  width: 100%;
  height: var(--logo-alto, 240px);
}

@media (min-aspect-ratio: 21/20) {
  .final {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--e-600);
  }

  .final-espacio {
    height: auto;
    min-height: var(--logo-alto, 480px);
  }
}

/* Cierre de la portada: el llamado a un lado y la neurona viva al otro, en un bloque sin fondo
   para que la neurona se vea a través de él. En pantallas verticales la neurona va arriba. */
.cierre {
  display: grid;
  gap: var(--e-400);
  padding: var(--e-400) var(--e-300);
  border-radius: 24px;
  border: 1px solid var(--vidrio-borde);
}

.cierre-contenido {
  display: grid;
  justify-items: start;
  text-shadow:
    0 0 16px var(--negro),
    0 0 4px var(--negro);
}

.cierre-accion {
  margin-top: var(--e-400);
}

.cierre .final-espacio {
  order: -1;
}

@media (min-aspect-ratio: 21/20) {
  .cierre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--e-600);
    padding: var(--e-700);
  }

  .cierre .final-espacio {
    order: 0;
  }
}

/* Página de la lista de espera: una pantalla con la neurona viva junto al formulario. */
.seccion-final.pagina-lista {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--e-900) + var(--e-200));
}

.pagina-lista h1 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .pagina-lista h1 {
    font-size: 48px;
    line-height: 1;
  }
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-75);
  min-height: 44px;
  margin-bottom: var(--e-300);
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color var(--dur-corta) var(--curva);
}

.volver .icono {
  font-size: 16px;
  transition: transform var(--dur-corta) var(--curva);
}

@media (hover: hover) {
  .volver:hover {
    color: var(--texto);
  }

  .volver:hover .icono {
    transform: translateX(calc(-1 * var(--e-50)));
  }
}

.formulario,
.exito {
  display: grid;
  gap: var(--e-200);
  margin-top: var(--e-400);
  padding: var(--e-300);
  border-radius: 24px;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.campo {
  display: grid;
  gap: var(--e-75);
}

.campo label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.campo input:not([type='checkbox']),
.campo select {
  width: 100%;
  min-height: 48px;
  padding: var(--e-100) var(--e-200);
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-alta);
  color: var(--texto);
  font: 400 16px/24px var(--fuente);
}

.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'] {
  border-color: var(--error);
}

.error {
  font-size: 14px;
  line-height: 20px;
  color: var(--error);
}

.formulario .boton-primario {
  margin-top: var(--e-75);
}

@media (min-width: 1024px) {
  .formulario {
    grid-template-columns: 1fr 1fr;
  }

  .formulario .boton-primario,
  .error-envio,
  .nota-privacidad {
    grid-column: 1 / -1;
  }
}

.formulario .boton-primario[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

.nota-privacidad {
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-tenue);
  text-align: center;
}

.nota-privacidad a {
  color: var(--texto);
  text-underline-offset: 3px;
}

.error-envio {
  text-align: center;
}

/* Trampa para robots: fuera de la pantalla, no oculta con display, porque algunos programas
   saltan los campos invisibles. Las personas no la ven ni la alcanzan con el teclado. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.exito {
  grid-template-columns: 24px 1fr;
  align-items: start;
}

.exito .icono {
  font-size: 24px;
  color: var(--cian);
}

/* ---------- Equipo: la foto ocupa la tarjeta y los datos van en un panel encima ---------- */

.fundadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-300);
  margin-top: var(--e-600);
}

.fundador {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--vidrio-borde);
  background: var(--superficie);
  overflow: hidden;
  transition:
    border-color var(--dur-corta) var(--curva),
    transform var(--dur) var(--curva);
}

.fundador-foto {
  aspect-ratio: 3 / 4;
  background: var(--superficie-alta);
}

/* Las fotos se ven en blanco y negro, como un conjunto; con el cursor pasan a color. */
.fundador-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  transition:
    scale var(--dur) var(--curva),
    filter var(--dur) var(--curva);
}

.fundador-datos {
  position: absolute;
  right: var(--e-100);
  bottom: var(--e-100);
  left: var(--e-100);
  display: grid;
  justify-items: start;
  gap: var(--e-75);
  padding: var(--e-100) var(--e-200);
  border-radius: 12px;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.fundador h3 {
  font-size: 18px;
  line-height: 28px;
  color: var(--texto);
}

.fundador-area {
  padding: var(--e-25) var(--e-75);
  border-radius: 9999px;
  border: 1px solid var(--vidrio-borde);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--lavanda);
}

.fundador p {
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-tenue);
}

/* Con cursor, la trayectoria aparece al pasar por la tarjeta o al llegar con el teclado.
   En pantallas táctiles se ve siempre. */
@media (hover: hover) and (pointer: fine) {
  .fundador p {
    max-height: 0;
    margin-top: calc(-1 * var(--e-75));
    overflow: hidden;
    opacity: 0;
    transition:
      max-height var(--dur) var(--curva),
      margin-top var(--dur) var(--curva),
      opacity var(--dur) var(--curva);
  }

  .fundador:hover p,
  .fundador:focus-within p {
    max-height: 168px;
    margin-top: 0;
    opacity: 1;
  }

  .fundador:hover,
  .fundador:focus-within {
    border-color: rgb(196 181 253 / 0.35);
    transform: translateY(calc(-1 * var(--e-50)));
  }

  .fundador:hover .fundador-foto img,
  .fundador:focus-within .fundador-foto img {
    scale: 1.04;
    filter: none;
  }
}

/* Tableta: dos por fila. */
@media (max-width: 1023px) {
  .seccion.seccion-compacta {
    padding-block: var(--e-900);
  }

  .fundadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    margin-inline: auto;
  }
}

/* Teléfono: los cuatro en columna, a todo el ancho. */
@media (max-width: 639px) {
  .fundadores {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-300);
    max-width: 440px;
    margin-inline: auto;
  }
}

/* Teléfono con movimiento: las tarjetas se apilan. Cada una se queda fija bajo el menú, la siguiente sube y
   se apoya encima dejando ver el canto de las anteriores, y con la cuarta la página sigue bajando.
   Todas miden lo mismo y caben en la pantalla, así la siguiente nunca tapa un texto que no se leyó: la foto
   es la que cede alto. El hueco entre tarjetas es la pausa de lectura: cuánto se baja con la tarjeta entera
   a la vista antes de que la siguiente la empiece a cubrir. En pantallas bajas o con movimiento reducido
   quedan en columna. */
@media (max-width: 639px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .fundadores {
    --tope: var(--e-900);
    --asoma: var(--e-75);
    --hueco: 20svh;
    --alto: min(640px, 100svh - var(--tope) - 3 * var(--asoma) - var(--e-200));
    gap: var(--hueco);
  }

  .fundador {
    position: sticky;
    top: calc(var(--tope) + var(--i) * var(--asoma));
    height: var(--alto);
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.5);
  }

  .fundador-foto {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .fundador .fundador-datos {
    flex: none;
  }

  /* Profundidad: mientras la siguiente la tapa, la tarjeta se encoge un poco y se oscurece. El avance sale
     del scroll de la lista (sin JS): la tarjeta i queda fija tras recorrer 100dvh - tope + i × (alto + hueco - asoma).
     Sin soporte (Firefox), se apilan igual, sin este matiz. */
  @supports (animation-timeline: view()) {
    .fundadores {
      --paso: calc(var(--alto) + var(--hueco) - var(--asoma));
      view-timeline: --pila block;
    }

    .fundador:not(:last-child),
    .fundador:not(:last-child)::after {
      animation: linear both;
      animation-timeline: --pila;
      animation-range:
        cover calc(100dvh - var(--tope) + var(--i) * var(--paso) + var(--hueco))
        cover calc(100dvh - var(--tope) + (var(--i) + 1) * var(--paso));
    }

    .fundador:not(:last-child) {
      animation-name: hundir;
      transform-origin: 50% 0;
    }

    .fundador:not(:last-child)::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--negro);
      opacity: 0;
      pointer-events: none;
      animation-name: apagar;
    }
  }
}

@keyframes hundir {
  to {
    transform: scale(0.94);
  }
}

@keyframes apagar {
  to {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fundador,
  .fundador-foto img,
  .fundador p {
    transition: none;
  }
}

/* ---------- Aviso de privacidad: una columna de lectura ---------- */

.seccion.legal {
  display: block;
  min-height: auto;
  padding-top: calc(var(--e-900) + var(--e-200));
}

.legal-contenido {
  max-width: 680px;
}

.legal h1 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.legal-fecha {
  margin-top: var(--e-100);
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-tenue);
}

.legal h2 {
  margin-top: var(--e-500);
  font-size: 20px;
  line-height: 28px;
}

.legal h2 + p,
.legal p + p {
  margin-top: var(--e-100);
}

.legal p:not(.legal-fecha) {
  color: var(--texto-tenue);
}

.legal strong {
  color: var(--texto);
}

@media (min-width: 1024px) {
  .legal h1 {
    font-size: 48px;
    line-height: 1;
  }
}

.pie-legal a[aria-current='page'] {
  color: var(--texto);
}

/* ---------- 404 ---------- */

.perdida {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-300);
  padding: var(--e-600) var(--e-300);
  text-align: center;
}

.perdida-logo {
  width: 160px;
  height: 160px;
}

.perdida h1 {
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.02em;
}

.perdida p {
  max-width: 440px;
  color: var(--texto-tenue);
}

/* ---------- Pie ---------- */

/* Mismo pie en las cuatro páginas. Escritorio: marca y frase a la izquierda, enlaces a la derecha;
   debajo, lo legal; al final, la firma centrada. Teléfono: una columna, enlaces en dos columnas. */
.pie {
  padding: var(--e-600) var(--e-300) var(--e-400);
}

.pie-contenido {
  display: grid;
  gap: var(--e-400);
  padding-top: var(--e-500);
  border-top: 1px solid var(--vidrio-borde);
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-tenue);
}

.pie-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-300) var(--e-500);
}

.pie-marca {
  display: grid;
  justify-items: start;
  gap: var(--e-50);
}

.pie-enlaces ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-300);
  list-style: none;
}

.pie-enlaces a,
.pie-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color var(--dur-corta) var(--curva);
}

@media (hover: hover) {
  .pie-enlaces a:hover,
  .pie-legal a:hover {
    color: var(--texto);
  }
}

.pie-fila-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--e-300);
}

.pie-legal {
  display: flex;
  gap: var(--e-300);
  list-style: none;
}

.pie-firma {
  padding-top: var(--e-300);
  border-top: 1px solid var(--vidrio-borde);
  text-align: center;
}

.pie-corazon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline: var(--e-25);
  vertical-align: -2px;
  fill: var(--violeta);
}

/* El logo del pie, con área táctil completa. */
.pie .marca {
  min-width: 44px;
  min-height: 44px;
  color: var(--texto);
}

/* Teléfono: una columna; los cinco enlaces en dos columnas, cada uno con 44 px de alto. */
@media (max-width: 767px) {
  .pie-principal {
    flex-direction: column;
    gap: var(--e-200);
  }

  .pie-enlaces {
    width: 100%;
  }

  .pie-enlaces ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--e-200);
  }
}

@media (max-width: 639px) {
  .seccion,
  .pie {
    padding-inline: var(--e-200);
  }

  /* En el teléfono, menos aire entre secciones: 128 px arriba y abajo alargaban la página sin aportar. */
  .seccion {
    padding-block: var(--e-700);
  }

  .seccion.seccion-compacta {
    padding-block: var(--e-800);
  }

  .seccion-final {
    padding-top: var(--e-600);
  }

  .pie {
    padding-top: var(--e-500);
  }
}

/* ==========================================================================
   Lista de espera v2: más datos, compromisos, avance, pasos siguientes y la
   confirmación con pulso de la neurona. Solo afecta a lista.html.
   ========================================================================== */

/* La neurona acompaña al formulario largo: en pantalla ancha queda fija mientras se baja. */
@media (min-aspect-ratio: 21/20) {
  .pagina-lista .final {
    align-items: start;
  }

  .pagina-lista .final-espacio {
    position: sticky;
    top: 88px;
    height: calc(100svh - 88px - var(--e-300));
    min-height: var(--logo-alto, 480px);
  }
}

/* En vertical, la neurona arriba ocupa 40 % de la pantalla, menú incluido. */
@media (max-aspect-ratio: 20/21) {
  .seccion-final.pagina-lista {
    padding-top: 88px;
  }

  .pagina-lista .final {
    gap: var(--e-300);
  }

  .pagina-lista .final-espacio {
    height: max(var(--logo-alto, 160px), calc(40svh - 88px));
  }
}

/* El destello de la confirmación sale más allá de la tarjeta: la sección lo recorta en el borde
   de la pantalla, así nunca abre un scroll horizontal. */
.seccion-final.pagina-lista {
  overflow-x: clip;
}

/* Compromisos: una fila con separadores finos, sin cajas. */
.compromisos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--e-400);
  list-style: none;
}

.compromisos li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-75);
  padding-inline: var(--e-200);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.compromisos li:first-child {
  padding-left: 0;
}

.compromisos li + li {
  border-left: 1px solid var(--vidrio-borde);
}

.compromisos .icono {
  margin-top: 1px;
  font-size: 18px;
  color: var(--lavanda);
}

@media (max-width: 639px) {
  .compromisos {
    grid-template-columns: 1fr;
    margin-top: var(--e-300);
  }

  .compromisos li {
    padding: var(--e-100) 0;
  }

  .compromisos li + li {
    border-left: 0;
    border-top: 1px solid var(--vidrio-borde);
  }
}

/* El panel: el mismo vidrio de su formulario, más intenso, con tres grupos. */
.formulario.formulario-v2 {
  position: relative;
  grid-template-columns: 1fr;
  gap: var(--e-300);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  transform-origin: 50% 0;
}

/* Avance: una línea en el borde superior del panel que crece con cada dato obligatorio. */
.progreso {
  position: absolute;
  top: -1px;
  left: var(--e-300);
  right: var(--e-300);
  height: 2px;
  border-radius: 9999px;
  background: var(--vidrio-borde);
  overflow: hidden;
}

.progreso-relleno {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violeta), var(--lavanda), var(--cian));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-corta) var(--curva);
}

.grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-200);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo + .grupo {
  padding-top: var(--e-300);
  border-top: 1px solid var(--vidrio-borde);
}

.grupo-titulo {
  float: left;
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: var(--e-200);
  padding: 0;
  font-family: var(--fuente-datos);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lavanda);
}

@media (min-width: 1024px) {
  .grupo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo-ancho {
    grid-column: 1 / -1;
  }
}

.campo textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--e-100) var(--e-200);
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-alta);
  color: var(--texto);
  font: 400 16px/24px var(--fuente);
  resize: vertical;
}

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

.campo-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-100);
}

.opcional {
  margin-left: var(--e-50);
  font-weight: 400;
  color: var(--texto-tenue);
}

.contador {
  flex: none;
  font-family: var(--fuente-datos);
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-tenue);
}

/* Selección múltiple: un desplegable que cerrado se ve como los select y muestra lo elegido;
   abierto, una lista de casillas reales. */
.campo-chips {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo-chips legend {
  float: left;
  width: 100%;
  margin-bottom: var(--e-75);
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* Sin min-width: 0, el texto elegido ensancha la grilla en vez de recortarse con puntos. */
.desplegable {
  min-width: 0;
}

.desplegable-cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-100);
  min-height: 48px;
  padding: var(--e-100) var(--e-200);
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-alta);
  color: var(--texto);
  font: 400 16px/24px var(--fuente);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-corta) var(--curva);
}

.desplegable-cabeza::-webkit-details-marker {
  display: none;
}

.desplegable-valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.desplegable:not([data-elegidos]) .desplegable-valor {
  color: var(--texto-tenue);
}

.desplegable-flecha {
  font-size: 16px;
  color: var(--texto-tenue);
  transition: transform var(--dur-corta) var(--curva);
}

.desplegable[open] .desplegable-flecha {
  transform: rotate(180deg);
}

.desplegable[open] .desplegable-cabeza {
  border-color: rgb(196 181 253 / 0.6);
}

.desplegable-cabeza:focus-visible {
  outline: 2px solid var(--lavanda);
  outline-offset: 3px;
}

@media (hover: hover) {
  .desplegable:not([open]) .desplegable-cabeza:hover {
    border-color: var(--texto-tenue);
  }
}

.campo-chips[data-invalido] .desplegable-cabeza {
  border-color: var(--error);
}

/* El panel se abre en el flujo y empuja lo de abajo: con dos desplegables seguidos, uno nunca tapa al otro. */
.desplegable-panel {
  display: grid;
  gap: var(--e-25);
  margin-top: var(--e-75);
  padding: var(--e-75);
  border-radius: 16px;
  border: 1px solid var(--borde);
  background: var(--superficie-alta);
}

.opcion {
  display: flex;
  align-items: center;
  gap: var(--e-100);
  min-height: 44px;
  padding: var(--e-75) var(--e-100);
  border-radius: 10px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--texto);
  cursor: pointer;
  user-select: none;
}

.opcion input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.opcion:has(input:checked) {
  background: color-mix(in srgb, var(--acento) 22%, var(--superficie-alta));
}

.opcion:has(input:focus-visible) {
  outline: 2px solid var(--lavanda);
  outline-offset: -2px;
}

@media (hover: hover) {
  .opcion:not(:has(input:checked)):hover {
    background: var(--superficie);
  }
}

.campo-chips .error {
  margin-top: var(--e-75);
}

/* Envío: mientras espera la red, una luz recorre el borde del botón. Solo entonces. */
.formulario .boton-primario[aria-busy='true'] {
  opacity: 0.85;
}

.formulario .boton-primario[aria-busy='true']::before {
  background: conic-gradient(from var(--giro), transparent 0 62%, var(--violeta) 74%, var(--lavanda) 86%, var(--cian) 94%, transparent);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .formulario .boton-primario[aria-busy='true']::before {
    animation: carga 1100ms linear infinite;
  }
}

@keyframes carga {
  to {
    --giro: 360deg;
  }
}

/* El panel se pliega al confirmar. */
.formulario-v2.plegandose {
  opacity: 0;
  transform: scale(0.94) translateY(var(--e-75));
  pointer-events: none;
  transition:
    opacity 520ms var(--curva),
    transform 520ms var(--curva);
}

/* Confirmación: tarjeta de vidrio con el check que se dibuja y un destello que sale una vez. */
.exito.confirmacion {
  position: relative;
  isolation: isolate;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: var(--e-200);
  padding: var(--e-400) var(--e-300);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.confirmacion:focus {
  outline: none;
}

.confirmacion:focus-visible {
  outline: 2px solid var(--lavanda);
  outline-offset: 3px;
}

.confirmacion::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(139 92 246 / 0.55), rgb(124 58 237 / 0.18) 55%, transparent);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.check-dibujado {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--cian);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmacion h2 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.confirmacion > p {
  color: var(--texto-tenue);
  overflow-wrap: anywhere;
}

.resumen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-200);
  width: 100%;
  margin: var(--e-75) 0 0;
  padding-top: var(--e-200);
  border-top: 1px solid var(--vidrio-borde);
}

.resumen-ancho {
  grid-column: 1 / -1;
}

.resumen dt {
  font-family: var(--fuente-datos);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.resumen dd {
  margin: var(--e-50) 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.chips-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-50);
  list-style: none;
}

.chips-resumen li {
  padding: var(--e-25) var(--e-100);
  border-radius: 9999px;
  border: 1px solid rgb(196 181 253 / 0.35);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lavanda);
}

.boton-secundario {
  margin-top: var(--e-75);
  padding-inline: var(--e-200);
  border: 1px solid var(--vidrio-borde);
  background: rgb(255 255 255 / 0.06);
  color: var(--texto);
}

@media (hover: hover) {
  .boton-secundario:hover {
    background: rgb(255 255 255 / 0.12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .confirmacion.entrando {
    animation: tarjeta-entra 360ms var(--curva) both;
  }

  .confirmacion.entrando::before {
    animation: destello 1100ms var(--curva) 120ms backwards;
  }

  .confirmacion.entrando .check-dibujado circle,
  .confirmacion.entrando .check-dibujado polyline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: trazo 600ms var(--curva) 160ms forwards;
  }

  .confirmacion.entrando .check-dibujado polyline {
    animation-delay: 420ms;
    animation-duration: 340ms;
  }
}

@keyframes tarjeta-entra {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(var(--e-75));
  }
}

@keyframes destello {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes trazo {
  to {
    stroke-dashoffset: 0;
  }
}

/* Qué pasa después: tres pasos en línea, unidos por una fibra. */
.despues {
  margin-top: var(--e-500);
}

.despues h2 {
  font-size: 20px;
  line-height: 28px;
}

.pasos-despues {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-300);
  margin-top: var(--e-300);
  list-style: none;
}

.pasos-despues::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--violeta), var(--vidrio-borde));
}

.pasos-despues li {
  position: relative;
  display: grid;
  gap: var(--e-75);
  align-content: start;
}

.paso-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgb(196 181 253 / 0.45);
  background: var(--negro);
  font-family: var(--fuente-datos);
  font-size: 12px;
  line-height: 16px;
  color: var(--lavanda);
}

.pasos-despues h3 {
  margin-top: var(--e-50);
  font-size: 14px;
  line-height: 20px;
}

.pasos-despues p {
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-tenue);
}

@media (max-width: 639px) {
  .pasos-despues {
    grid-template-columns: 1fr;
    gap: var(--e-200);
  }

  .pasos-despues::before {
    top: 14px;
    bottom: 14px;
    left: 14px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--violeta), var(--vidrio-borde));
  }

  .pasos-despues li {
    grid-template-columns: 28px 1fr;
    column-gap: var(--e-200);
  }

  .pasos-despues li > :not(.paso-num) {
    grid-column: 2;
  }

  .pasos-despues h3 {
    margin-top: var(--e-50);
  }

  .formulario .boton-primario {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progreso-relleno,
  .desplegable-cabeza,
  .desplegable-flecha {
    transition: none;
  }
}

/* ==========================================================================
   Teléfono y tableta vertical (menos de 960 px, el mismo corte que ya usaba la
   ventana fija): nada fijado ni superpuesto. Cada escena se lee sola, con su
   ventana quieta debajo del texto. Escritorio no cambia.
   ========================================================================== */

/* Dato recto: los fragmentos del problema y las piezas de cada paso, apilados con 8 px de hueco. */
.dato {
  display: grid;
  gap: var(--e-25);
  padding: var(--e-75) var(--e-100);
  border-radius: 12px;
  border: 1px solid var(--vidrio-borde);
  background: var(--superficie);
}

.dato small {
  font-family: var(--fuente-datos);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--lavanda);
}

.dato span {
  font-size: 14px;
  line-height: 20px;
}

.fragmentos-movil,
.paso-ventana {
  display: none;
}

@media (max-width: 959px) {
  /* Problema: los fragmentos ya no flotan sobre la neurona; van rectos debajo del texto. */
  .anclas [data-grupo='problema'],
  .anclas .tallos {
    display: none;
  }

  .fragmentos-movil {
    display: grid;
    justify-items: start;
    gap: var(--e-100);
    margin-top: var(--e-400);
    text-shadow: none;
  }

  .fragmentos-movil ul {
    display: grid;
    gap: var(--e-75);
    width: 100%;
    list-style: none;
  }

  /* Producto: la ventana queda en su lugar, sin fijarse; la lista se lee entera debajo. */
  .producto > .ventana {
    position: static;
    box-shadow: none;
  }

  .producto > .beneficios li {
    background: transparent;
  }

  .beneficios h3 {
    color: var(--texto);
  }

  .beneficios .icono {
    color: var(--lavanda);
  }

  /* Cómo funciona: sin botones ni ventana fija. Los tres pasos seguidos, cada uno con su ventana. */
  .js .pasos-control,
  .como-fijo {
    display: none;
  }

  .js .pasos li:not([data-activo]) {
    display: grid;
  }

  .pasos {
    gap: var(--e-600);
  }

  .paso-ventana {
    display: block;
    margin-top: var(--e-200);
    text-shadow: none;
  }

  .paso-ventana .ventana-barra {
    padding: var(--e-75) var(--e-200);
  }

  .datos-paso {
    display: grid;
    gap: var(--e-75);
    padding: var(--e-100);
    list-style: none;
  }

  /* Paso 2: la ficha del cliente une los datos con una fibra y suma lo que Plexo aprendió. */
  .ficha-paso {
    display: grid;
    gap: var(--e-75);
    padding: var(--e-100);
  }

  .ficha-paso header {
    display: grid;
    gap: var(--e-25);
    padding: var(--e-75) var(--e-100);
    border-radius: 12px;
    border: 1px solid var(--vidrio-borde);
    background: var(--superficie-alta);
  }

  .ficha-paso header small {
    font-size: 12px;
    line-height: 16px;
    color: var(--texto-tenue);
  }

  .datos-unidos {
    position: relative;
    padding: 0 0 0 var(--e-300);
  }

  .datos-unidos::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 8px;
    width: 2px;
    border-radius: 9999px;
    background: var(--violeta);
    transform-origin: 50% 0;
  }

  .datos-unidos .dato {
    position: relative;
  }

  .datos-unidos .dato::before {
    content: '';
    position: absolute;
    top: calc(50% - 5px);
    left: -20px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--lavanda);
    box-shadow: 0 0 0 2px var(--negro);
  }

  .dato-normal {
    border-color: rgb(79 216 255 / 0.35);
    background: rgb(79 216 255 / 0.08);
  }

  .dato-normal small {
    color: var(--cian);
  }

  /* Paso 3: la respuesta con su fuente y el aviso a dirección. */
  .borrador-paso {
    gap: var(--e-100);
    margin: var(--e-100);
    padding: var(--e-200);
  }

  .borrador-paso header {
    display: grid;
    gap: var(--e-50);
  }

  .borrador-paso header small {
    font-size: 12px;
    line-height: 16px;
    color: var(--texto-tenue);
  }

  /* Detrás de las secciones de texto la neurona baja su intensidad: nunca compite con lo que se lee.
     En el hero y en la lista de espera sigue entera. */
  #plexo {
    transition: opacity var(--dur) var(--curva);
  }

  html[data-seccion]:not([data-seccion='inicio']):not([data-seccion='lista']) #plexo {
    opacity: 0.45;
  }
}

/* Una sola transición al entrar en pantalla: los datos llegan uno tras otro y la fibra se traza.
   No depende del scroll fino; después queda quieta. */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .js .revelar .dato,
  .js .revelar .datos-unidos::before {
    transition:
      opacity 500ms var(--curva) calc(150ms + var(--i, 0) * 70ms),
      translate 500ms var(--curva) calc(150ms + var(--i, 0) * 70ms),
      scale 600ms var(--curva) 200ms;
  }

  .js .revelar.pendiente .dato {
    opacity: 0;
    translate: 0 8px;
    transition: none;
  }

  .js .revelar.pendiente .datos-unidos::before {
    scale: 1 0;
    transition: none;
  }
}

/* Fundadores sin cursor (táctil) o en el teléfono: fotos a color y trayectoria visible desde el inicio. */
@media (hover: none), (max-width: 767px) {
  .fundador-foto img {
    filter: none;
  }

  .fundador p {
    max-height: none;
    margin-top: 0;
    opacity: 1;
  }

  /* Con la trayectoria siempre visible, el panel taparía la cara: va debajo de la foto y solo
     monta su borde superior sobre ella, con el mismo vidrio. */
  .fundador {
    display: flex;
    flex-direction: column;
  }

  .fundador-datos {
    position: relative;
    inset: auto;
    flex: 1;
    align-content: start;
    margin: calc(-1 * var(--e-600)) var(--e-100) var(--e-100);
  }
}

/* Consentimiento de la lista de espera: casilla real, área táctil de 44 px. */
.consentimiento {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: var(--e-100);
  align-items: start;
  margin-bottom: var(--e-200);
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-tenue);
}
.consentimiento input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}
.consentimiento label {
  padding-block: 0;
  min-height: 44px;
  cursor: pointer;
}
.consentimiento label a {
  color: var(--texto);
  text-underline-offset: 3px;
}
.consentimiento .error {
  grid-column: 2;
}
.consentimiento input[aria-invalid="true"] {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* Aviso de privacidad: listas y enlaces dentro del texto legal. */
.legal ul {
  margin-top: var(--e-100);
  padding-left: var(--e-300);
  color: var(--texto-tenue);
  list-style: disc;
}
.legal li + li {
  margin-top: var(--e-75);
}
.legal ul + p {
  margin-top: var(--e-100);
}
.legal p a,
.legal li a {
  color: var(--texto);
  text-underline-offset: 3px;
}

/* ==========================================================================
   Textos finales: etiqueta de cada paso y cierre de las preguntas frecuentes.
   ========================================================================== */

/* Etiqueta del paso: el mismo rótulo en monoespaciada de los grupos del formulario. */
.paso-etiqueta {
  font-family: var(--fuente-datos);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lavanda);
}

/* Cierre de las preguntas: al final del acordeón, separado por la misma línea fina. */
.preguntas-cierre {
  margin-top: var(--e-300);
  padding-top: var(--e-300);
  border-top: 1px solid var(--vidrio-borde);
}

.preguntas-cierre-titulo {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.preguntas-cierre .preguntas-contacto {
  max-width: none;
  margin-top: var(--e-50);
}

/* Problema en tabletas horizontales y pantallas de menos de 1280 px: con el título de tres líneas,
   los fragmentos que flotan junto a la neurona caían encima del texto. Van rectos debajo, como en el teléfono. */
@media (hover: none), (max-width: 1279px) {
  .anclas [data-grupo='problema'],
  .anclas .tallos {
    display: none;
  }

  .fragmentos-movil {
    display: grid;
    justify-items: start;
    gap: var(--e-100);
    max-width: 560px;
    margin-top: var(--e-400);
    text-shadow: none;
  }

  .fragmentos-movil ul {
    display: grid;
    gap: var(--e-75);
    width: 100%;
    list-style: none;
  }
}

/* LinkedIn de cada fundador: arriba a la derecha del panel. El nombre deja su espacio. */
.fundador-linkedin {
  position: absolute;
  top: calc(var(--e-100) + 28px + var(--e-75) + 10px - 22px);
  right: var(--e-100);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--vidrio-borde);
  background: rgb(255 255 255 / 0.06);
  color: var(--texto);
  transition:
    background var(--dur-corta) var(--curva),
    border-color var(--dur-corta) var(--curva);
}
.fundador-linkedin svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.fundador-linkedin:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(196 181 253 / 0.35);
}
.fundador-linkedin:focus-visible {
  outline: 2px solid var(--lavanda);
  outline-offset: 2px;
}
/* El nombre va en una sola línea en todas las tarjetas; si no cabe, baja un punto de tamaño. */
.fundador h3 {
  white-space: nowrap;
  font-size: clamp(15px, 1.35vw, 18px);
}
@media (max-width: 1023px) {
  .fundador h3 {
    font-size: 18px;
  }
}

/* La frase grande: cada parte en su línea, con el reparto equilibrado. */
.frase {
  max-width: 720px;
  margin-inline: auto;
}
@media (min-width: 1400px) {
  .frase {
    max-width: 1240px;
  }
}

/* Cada idea de la frase en su propio bloque, con sus líneas del mismo largo. */
.frase-parte {
  display: block;
  text-wrap: balance;
}
.frase-parte + .frase-parte {
  margin-top: 0.15em;
}
/* Tableta: las dos ideas se parten igual, en líneas del mismo largo. */
@media (min-width: 600px) and (max-width: 1023px) {
  .frase {
    max-width: 440px;
  }
}

/* ---------- Pantalla de carga (solo portada) ----------
   Núcleo, luego los cinco brazos uno tras otro, luego la palabra. Al terminar, todo sube un poco y se
   desvanece. Sin JS o con movimiento reducido no aparece. */
.carga {
  display: none;
}
.js .carga {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--negro);
  transition:
    opacity 520ms var(--curva),
    visibility 0s linear 520ms;
}
.js .carga.fuera {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.carga-marca {
  display: grid;
  justify-items: center;
  gap: var(--e-200);
  transition:
    transform 620ms var(--curva),
    filter 620ms var(--curva);
}
.carga.fuera .carga-marca {
  transform: translateY(-8px) scale(1.04);
  filter: blur(4px);
}
.carga-logo {
  width: 72px;
  height: 72px;
  overflow: visible;
  filter: drop-shadow(0 0 28px rgb(124 58 237 / 0.45));
}
.carga-centro {
  transform-box: fill-box;
  transform-origin: center;
  animation: carga-centro 520ms var(--curva) both;
}
.carga-brazo {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: carga-brazo 560ms var(--curva) both;
  animation-delay: calc(180ms + var(--i) * 70ms);
}
.carga-nombre {
  font-size: 15px;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: var(--texto);
  animation: carga-nombre 600ms var(--curva) 520ms both;
}
@keyframes carga-centro {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes carga-brazo {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes carga-nombre {
  from { opacity: 0; letter-spacing: 0.6em; }
  to { opacity: 1; letter-spacing: 0.32em; }
}
@media (prefers-reduced-motion: reduce) {
  .js .carga {
    display: none;
  }
}

/* =====================================================================================================
   Teléfono: letra legible en los textos chicos, beneficios que se deslizan y la lista siempre a mano.
   ===================================================================================================== */

@media (max-width: 639px) {
  /* Nada de lo que se lee baja de 13 px: los datos, fuentes y rótulos de 12 px suben un punto. */
  .fuente,
  .aviso-rotulo,
  .ancla-ejemplo,
  .filas small,
  .chat-ahorro,
  .propuesta small,
  .conexion-nombre small,
  .chips-fuente span,
  .pieza small,
  .compromiso small,
  .borrador-pie small,
  .pantalla-titulo small,
  .chat small,
  .dato small,
  .paso-etiqueta,
  .ventana-marca,
  .fundador-area {
    font-size: 13px;
    line-height: 18px;
  }

  /* Las cinco pestañas a la vista, en dos filas: nada que deslizar de lado. */
  .ventana-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .ventana-menu button {
    padding-inline: var(--e-50);
    font-size: 14px;
    line-height: 20px;
  }

  /* El texto que se lee de corrido, un punto más grande y con más aire. */
  .texto-grande {
    font-size: 17px;
    line-height: 27px;
  }

  .beneficios p,
  .garantias p,
  .pasos p,
  .preguntas p {
    font-size: 16px;
    line-height: 25px;
  }

  h2 {
    font-size: 32px;
    line-height: 38px;
  }

  .fundador p {
    font-size: 15px;
    line-height: 22px;
  }

  /* Lo que hace Plexo: tarjetas quietas, una debajo de otra, que se leen bajando como el resto. */
  .beneficios {
    gap: var(--e-100);
  }

  .beneficios li {
    grid-template-columns: 40px 1fr;
    gap: var(--e-100);
    padding: var(--e-200);
    border-radius: 16px;
    border: 1px solid var(--vidrio-borde);
    background: rgb(24 18 40 / 0.6);
  }

  .beneficios li + li::before {
    display: none;
  }

  /* El ícono en su cuadro, y todas se leen enteras: en el teléfono no hay una activa. */
  .beneficios .icono {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: var(--e-75);
    border-radius: 10px;
    background: rgb(124 58 237 / 0.22);
    color: var(--lavanda);
    font-size: 20px;
  }

  .beneficios h3 {
    color: var(--texto);
  }
}

/* ---------- Equipo: nombre de pila grande, rol y frase, dentro del panel de vidrio ---------- */

.fundador-datos {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-75);
  container-type: inline-size;
}

.fundador-datos > * {
  grid-column: 1 / -1;
}

/* El nombre de pila nunca alcanza al LinkedIn: su tamaño tiene un tope y además se ajusta a lo que deja
   el botón (44 px y su separación) en el ancho del panel. 4,4 em cubre «Santiago», el más largo (4,15 em). */
.fundador-pila {
  display: block;
  grid-column: 1;
  grid-row: 1;
  font-size: 40px;
  font-size: min(40px, (100cqi - 52px) / 4.4);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--texto);
}

.fundador .fundador-datos h3 {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--texto-tenue);
}

/* LinkedIn al lado del nombre, centrado en sus dos líneas. */
.fundador-linkedin {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.fundador-area {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-75);
  margin-top: var(--e-50);
  padding: var(--e-50) var(--e-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavanda);
}

.fundador-area b {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #a78bfa;
}

.fundador-frase {
  margin: var(--e-50) 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--texto);
}

/* Una línea violeta separa el rol de la frase. */
.fundador-frase::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: var(--e-100);
  border-radius: 9999px;
  background: var(--acento);
}

/* Escritorio con cuatro por fila: tarjetas más altas y el panel compacto, para que se vea la cara. */
@media (min-width: 1024px) {
  .fundador-foto {
    aspect-ratio: 3 / 4.9;
  }

  .fundador-datos {
    padding: var(--e-100);
    gap: var(--e-50);
  }

  .fundador-pila {
    font-size: clamp(26px, 2.2vw, 34px);
    font-size: min(clamp(26px, 2.2vw, 34px), (100cqi - 48px) / 4.4);
  }

  .fundador-area {
    gap: var(--e-50);
    padding: var(--e-25) var(--e-75);
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .fundador-area b {
    font-size: 15px;
    line-height: 20px;
  }

  .fundador-frase {
    font-size: 14px;
    line-height: 20px;
  }

  .fundador-frase::before {
    margin-bottom: var(--e-75);
  }

  .fundador-linkedin {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 639px) {
  .fundador-pila {
    font-size: 48px;
    font-size: min(48px, (100cqi - 52px) / 4.4);
  }
}

/* ---------- Envío de la lista: el botón confirma, salen sinapsis del check y el resto entra en cascada ---------- */

.formulario .boton-primario[data-listo] {
  background: var(--cian);
  color: #04121a;
  transition: background-color 240ms var(--curva), color 240ms var(--curva);
}

.formulario .boton-primario[data-listo] .boton-texto::before {
  content: '✓';
  margin-right: var(--e-75);
  font-weight: 700;
}

.sinapsis {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sinapsis i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lavanda);
  box-shadow: 0 0 10px var(--violeta);
  opacity: 0;
}

.sinapsis i:nth-child(3n) {
  background: var(--cian);
  box-shadow: 0 0 10px var(--cian);
}

@media (prefers-reduced-motion: no-preference) {
  .sinapsis i {
    animation: sinapsis 900ms var(--curva) 520ms both;
  }

  /* Después del check, el texto y el resumen entran uno tras otro. */
  .confirmacion.entrando > h2,
  .confirmacion.entrando > p,
  .confirmacion.entrando .resumen > div,
  .confirmacion.entrando > .boton {
    animation: subir 520ms var(--curva) backwards;
  }

  .confirmacion.entrando > h2 { animation-delay: 560ms; }
  .confirmacion.entrando > p { animation-delay: 660ms; }
  .confirmacion.entrando .resumen > div:nth-child(1) { animation-delay: 760ms; }
  .confirmacion.entrando .resumen > div:nth-child(2) { animation-delay: 820ms; }
  .confirmacion.entrando .resumen > div:nth-child(3) { animation-delay: 880ms; }
  .confirmacion.entrando > .boton { animation-delay: 1040ms; }

  .confirmacion.entrando .chips-resumen li {
    animation: aparecer 380ms var(--curva) backwards;
    animation-delay: calc(940ms + var(--i, 0) * 60ms);
  }
}

@keyframes sinapsis {
  0% {
    opacity: 0;
    transform: rotate(var(--ang)) translateX(0) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--ang)) translateX(var(--lejos)) scale(1);
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(var(--e-100));
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}