/* =====================================================================
   ESTILOS DE EPHION
   Índice:
    1. Fuentes
    2. Variables (colores, tipografía, espacios)  ← para cambiar colores
    3. Base
    4. Utilidades y botones
    5. Encabezado y menú
    6. Hero
    7. Secciones (estructura común)
    8. Beneficios
    9. Cómo funciona
   10. Niveles
   11. Para quién
   12. Bloque de confianza
   13. Adquisición
   14. Cotizador
   15. Preguntas frecuentes
   16. Contacto y formulario
   17. Pie de página
   18. Aviso de cookies
   19. Páginas internas (aviso de privacidad y 404)
   20. Animaciones
   ===================================================================== */

/* ---------- 1. FUENTES (autoalojadas, licencia SIL OFL) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. VARIABLES ----------
   Colores tomados del logo y del one-pager (brand/).
   Los marcados "derivado" se calcularon a partir de ellos
   para lograr buen contraste de lectura. */
:root {
  /* Marca */
  --azul-marca: #001C85;     /* "E" del logo, precios y títulos del one-pager */
  --marino: #0A267F;         /* barra superior del one-pager */
  --marino-profundo: #050F3D;/* derivado: fondos oscuros */
  --tinta: #1E1E1E;          /* letras "PHION" del logo */
  --azul-medio: #3D62AC;     /* inicio del degradado de niveles */
  --turquesa: #69C1CD;       /* degradado verde azulado */
  --verde-agua: #77B6B7;
  --verde: #98D398;
  --dorado: #ECD29F;         /* acento dorado/crema */
  --arena: #D8D4A5;
  --cielo: #C7E3F9;          /* fondo azul cielo */
  --cielo-medio: #A6D3F6;
  --menta-claro: #ECFFFB;    /* fondo de la tabla del one-pager */
  --cielo-claro: #F2F8FE;    /* derivado: fondo de secciones alternas */

  /* Texto */
  --texto: var(--tinta);
  --texto-suave: #4A5468;    /* derivado: contraste 7.5:1 sobre blanco */
  --texto-claro: #FFFFFF;
  --texto-claro-suave: #C9D3EE;
  --error: #B42318;
  --exito: #0E7A4F;
  --borde: #D5DEEC;

  /* Degradados */
  --degradado-marca: linear-gradient(120deg, var(--azul-medio) 0%, var(--turquesa) 38%, var(--verde) 70%, var(--dorado) 100%);
  --degradado-texto: linear-gradient(100deg, var(--azul-marca) 0%, #1D5E9C 55%, #217F86 100%); /* derivado, legible sobre blanco */
  --degradado-cielo: radial-gradient(120% 80% at 85% 0%, var(--cielo) 0%, rgba(199, 227, 249, 0) 60%),
                     radial-gradient(90% 70% at 0% 100%, var(--menta-claro) 0%, rgba(236, 255, 251, 0) 60%),
                     #FFFFFF;
  /* Degradados de cada nivel (como las etiquetas "nivel 1, 2, 3" del one-pager) */
  --degradado-nivel-1: linear-gradient(120deg, #69C1CD, #3D62AC);
  --degradado-nivel-2: linear-gradient(120deg, #77B6B7, #98D398);
  --degradado-nivel-3: linear-gradient(120deg, #ECD29F, #61A0BD 55%, #395879);

  /* Tipografía */
  --fuente-titulos: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Inter", "Helvetica Neue", Arial, sans-serif;
  --t-hero: clamp(2.6rem, 0.9rem + 3.6vw, 4.1rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --t-grande: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --t-base: 1rem;
  --t-chica: 0.875rem;

  /* Espacios y formas */
  --ancho-max: 1200px;
  --ancho-max-amplio: 1360px;
  --margen: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  --seccion: clamp(5rem, 3.5rem + 6vw, 9rem);
  --radio: 20px;
  --radio-grande: 28px;
  --sombra: 0 30px 60px -30px rgba(5, 15, 61, 0.35), 0 12px 24px -16px rgba(5, 15, 61, 0.18);
  --sombra-suave: 0 20px 40px -28px rgba(5, 15, 61, 0.3);
  --alto-menu: 72px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-menu) + 8px);
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--azul-marca);
  text-wrap: balance;
}

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

a { color: var(--azul-marca); }

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

::selection { background: var(--cielo); color: var(--azul-marca); }

[hidden] { display: none !important; }

/* ---------- 4. UTILIDADES Y BOTONES ---------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.contenedor--ancho { max-width: calc(var(--ancho-max-amplio) + 2 * var(--margen)); }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.saltar-contenido {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--azul-marca);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.saltar-contenido:focus { top: 1rem; }

/* Etiqueta pequeña sobre los títulos */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--fuente-titulos);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul-medio);
}
.antetitulo svg { width: 14px; height: 20px; flex: none; }
.antetitulo--claro { color: var(--turquesa); }

.texto-degradado {
  color: var(--azul-marca); /* respaldo si el navegador no soporta degradado en texto */
  background: var(--degradado-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Botones */
.boton {
  --boton-fondo: var(--azul-marca);
  --boton-texto: #FFFFFF;
  --boton-borde: var(--boton-fondo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--boton-borde);
  border-radius: 999px;
  background: var(--boton-fondo);
  color: var(--boton-texto);
  font-family: var(--fuente-titulos);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--curva), box-shadow 0.35s var(--curva), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0, 28, 133, 0.55);
}
.boton svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s var(--curva); }
.boton:hover svg { transform: translateX(3px); }
.boton[disabled] { opacity: 0.6; cursor: wait; transform: none; }

.boton--secundario {
  --boton-fondo: transparent;
  --boton-texto: var(--azul-marca);
  --boton-borde: rgba(0, 28, 133, 0.28);
}
.boton--secundario:hover {
  background: #FFFFFF;
  border-color: var(--azul-marca);
  box-shadow: 0 14px 30px -18px rgba(0, 28, 133, 0.45);
}

.boton--claro {
  --boton-fondo: #FFFFFF;
  --boton-texto: var(--azul-marca);
}
.boton--claro:hover { box-shadow: 0 14px 34px -12px rgba(105, 193, 205, 0.6); }

.boton--chico { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* ---------- 5. ENCABEZADO Y MENÚ ---------- */
.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--alto-menu);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.encabezado.con-scroll {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(5, 15, 61, 0.08);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1.5rem;
}

/* Logo: rayo + palabra EPHION */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tinta);
}
.logo__rayo { width: 22px; height: 32px; flex: none; }
.logo__texto {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.32em;
  margin-right: -0.32em; /* compensa el espaciado de la última letra */
  line-height: 1;
}
.logo__texto span { color: var(--azul-marca); }
/* El logo siempre va en sus colores: negro #1E1E1E y azul #001C85, sobre fondo claro */

.menu { display: flex; align-items: center; gap: 0.5rem; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.menu__lista a:not(.boton) {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--texto);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.menu__lista a:not(.boton):hover { background: rgba(0, 28, 133, 0.06); color: var(--azul-marca); }
.menu__lista a[aria-current="true"] { color: var(--azul-marca); background: rgba(0, 28, 133, 0.06); }
.menu__cta-movil { display: none; }

.menu__boton-movil {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--azul-marca);
  cursor: pointer;
}
.menu__boton-movil span,
.menu__boton-movil span::before,
.menu__boton-movil span::after {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--curva), background-color 0.2s;
}
.menu__boton-movil span { position: relative; }
.menu__boton-movil span::before,
.menu__boton-movil span::after { content: ""; position: absolute; left: 0; }
.menu__boton-movil span::before { top: -6px; }
.menu__boton-movil span::after { top: 6px; }
.menu-abierto .menu__boton-movil span { background: transparent; }
.menu-abierto .menu__boton-movil span::before { transform: translateY(6px) rotate(45deg); }
.menu-abierto .menu__boton-movil span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu__boton-movil { display: inline-flex; }
  .menu__lista {
    position: fixed;
    inset: var(--alto-menu) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - var(--alto-menu));
    overflow-y: auto;
    padding: 0.5rem var(--margen) 1.5rem;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(5, 15, 61, 0.08);
    box-shadow: 0 30px 40px -30px rgba(5, 15, 61, 0.3);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--curva), visibility 0s 0.3s;
  }
  .menu-abierto .menu__lista {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s, transform 0.3s var(--curva);
  }
  .menu__lista a:not(.boton) {
    padding: 1rem 0.25rem;
    font-size: 1.1rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(5, 15, 61, 0.06);
  }
  .menu__lista a:not(.boton):hover,
  .menu__lista a[aria-current="true"] { background: transparent; }
  .menu__cta-movil { display: block; padding-top: 1.25rem; }
  .menu__cta-movil .boton { width: 100%; }
}
@media (max-width: 560px) {
  .menu__cta { display: none; }
}

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--alto-menu) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  background: var(--degradado-cielo);
}

/* Rayo decorativo de fondo, con los trazos del logo */
.hero__rayo-fondo {
  position: absolute;
  right: -10%;
  top: 6%;
  width: min(70vw, 760px);
  height: auto;
  opacity: 0.08;
  pointer-events: none;
}

.hero__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "ante" "texto" "visual";
  gap: 1.25rem 0;
}
.hero__ante { grid-area: ante; }
.hero__texto { grid-area: texto; }
.hero__visual { grid-area: visual; margin-top: 1.75rem; }

.hero__titulo {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
}
.hero__titulo span { display: block; }

.hero__subtitulo {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: var(--t-grande);
  line-height: 1.55;
  color: var(--texto-suave);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Cifras clave con contador */
.hero__cifras-bloque {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 28, 133, 0.12);
}
.hero__cifras-nota {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.hero__cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 1rem 0 0;
}
.hero__cifras div { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__cifras dt { font-size: 0.85rem; color: var(--texto-suave); line-height: 1.35; }
.hero__cifras dd {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--azul-marca);
  font-variant-numeric: tabular-nums;
}
.hero__cifras small {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 0.3em;
  color: var(--azul-medio);
}
.hero__cifra-conexiones { grid-column: 1 / -1; }

/* Imagen principal */
.hero__visual { position: relative; }

.hero__foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--cielo);
  aspect-ratio: 4 / 3;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Etiquetas flotantes, siempre dentro de la foto */
.hero__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100% - 2rem);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -14px rgba(5, 15, 61, 0.35);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul-marca);
  white-space: nowrap;
}
.hero__chip i {
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--degradado-marca);
  box-shadow: 0 0 0 4px rgba(105, 193, 205, 0.25);
}
.hero__chip--b { left: 1rem; top: 1rem; }
.hero__chip--a { left: 1rem; bottom: 1rem; }

@media (min-width: 640px) {
  .hero__cifras { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 1.25rem clamp(1.5rem, 1rem + 2vw, 2.75rem); }
  .hero__cifra-conexiones { grid-column: auto; }
  .hero__cifra-conexiones dd small { display: block; margin: 0.2rem 0 0; font-size: 0.45em; }
  .hero__chip--b { left: 1.25rem; top: 1.25rem; }
  .hero__chip--a { left: 1.25rem; bottom: 1.25rem; }
}

@media (min-width: 1000px) {
  .hero__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "ante ante" "texto visual";
    column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
    align-items: start;
  }
  /* La foto empieza a la altura del título */
  .hero__visual { margin-top: 0.4rem; }
}
@media (max-width: 520px) {
  .hero__acciones .boton { flex: 1 1 100%; }
  .hero__chip { font-size: 0.78rem; padding: 0.5rem 0.85rem; }
}

/* ---------- 7. SECCIONES (ESTRUCTURA COMÚN) ---------- */
.seccion { padding-block: var(--seccion); }
.seccion--cielo { background: var(--cielo-claro); }
.seccion--oscura {
  position: relative;
  overflow: hidden;
  color: var(--texto-claro-suave);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(105, 193, 205, 0.22), rgba(105, 193, 205, 0) 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(236, 210, 159, 0.14), rgba(236, 210, 159, 0) 70%),
    var(--marino-profundo);
}
.seccion--oscura h2, .seccion--oscura h3 { color: #FFFFFF; }
.seccion--oscura .seccion__intro { color: var(--texto-claro-suave); }
.seccion--oscura :focus-visible { outline-color: var(--turquesa); }

.seccion__encabezado {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.seccion__titulo {
  margin-top: 1rem;
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.seccion__intro {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: var(--t-grande);
  line-height: 1.55;
  color: var(--texto-suave);
}

/* ---------- 8. BENEFICIOS ---------- */
.beneficios {
  border-bottom: 1px solid rgba(5, 15, 61, 0.07);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.beneficios__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.5rem 2rem;
}
.beneficios__lista li { display: flex; align-items: center; gap: 1rem; }
.beneficios__lista svg {
  width: 52px; height: 52px;
  flex: none;
  padding: 13px;
  border-radius: 16px;
  background: var(--cielo-claro);
  color: var(--azul-marca);
}
.beneficios__lista strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--azul-marca);
}
.beneficios__lista span { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--texto-suave); }

/* ---------- 9. CÓMO FUNCIONA ---------- */
.pasos {
  position: relative;
  display: grid;
  gap: 2.5rem;
  counter-reset: paso;
}
/* Línea de energía que une los pasos */
.pasos::before {
  content: "";
  position: absolute;
  left: 37px; top: 40px; bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, var(--turquesa), var(--verde), var(--dorado));
  opacity: 0.55;
}
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  column-gap: 1.5rem;
  align-items: start;
}
.paso__icono {
  grid-row: 1 / span 3;
  position: relative;
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 24px;
  background: #FFFFFF;
  color: var(--azul-marca);
  box-shadow: var(--sombra-suave), inset 0 0 0 1px rgba(0, 28, 133, 0.08);
}
.paso__icono svg { width: 34px; height: 34px; }
.paso__icono::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--degradado-marca);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
}
.paso__numero {
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--azul-medio);
  padding-top: 0.35rem;
}
.paso h3 { margin-top: 0.35rem; font-size: var(--t-h3); }
.paso p { margin-top: 0.55rem; max-width: 34ch; color: var(--texto-suave); }

@media (min-width: 860px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .pasos::before {
    left: 76px; right: calc(33.333% - 76px + 1rem);
    top: 38px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--turquesa), var(--verde), var(--dorado));
  }
  .paso { grid-template-columns: 1fr; }
  .paso__icono { grid-row: auto; margin-bottom: 1.75rem; }
}

/* ---------- 10. NIVELES ---------- */
.niveles__pestanas {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--borde);
}
.niveles__pestana {
  flex: 1;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.niveles__pestana[aria-selected="true"] { background: var(--azul-marca); color: #FFFFFF; }

.niveles__tarjetas { display: grid; gap: 1.5rem; }

.nivel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-grande);
  background: #FFFFFF;
  box-shadow: var(--sombra-suave), inset 0 0 0 1px rgba(0, 28, 133, 0.06);
  overflow: hidden;
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}
.nivel:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.nivel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  z-index: 1;
  background: var(--degradado-nivel, var(--degradado-marca));
}
.nivel--nivel-1 { --degradado-nivel: var(--degradado-nivel-1); }
.nivel--nivel-2 { --degradado-nivel: var(--degradado-nivel-2); }
.nivel--nivel-3 { --degradado-nivel: var(--degradado-nivel-3); }

.nivel__imagen { aspect-ratio: 4 / 5; background: var(--cielo); }
.nivel__imagen img { width: 100%; height: 100%; object-fit: cover; }

.nivel__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.75rem 2rem; }
.nivel__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nivel__nombre i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--degradado-nivel);
}
.nivel__potencia {
  margin-top: 1rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.8rem, 2.2rem + 2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--azul-marca);
  font-variant-numeric: tabular-nums;
}
.nivel__potencia small { font-size: 0.42em; letter-spacing: 0; margin-left: 0.15em; color: var(--azul-medio); }
.nivel__potencia-etiqueta { margin-top: 0.35rem; font-size: 0.85rem; color: var(--texto-suave); }
.nivel__ideal { margin-top: 1.1rem; color: var(--texto); }

.nivel__specs { margin: 1.5rem 0 0; border-top: 1px solid var(--borde); }
.nivel__specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--borde);
}
.nivel__specs dt { font-size: 0.9rem; color: var(--texto-suave); }
.nivel__specs dd { margin: 0; font-size: 0.92rem; font-weight: 600; text-align: right; color: var(--tinta); }
.nivel__specs dd small { display: block; font-weight: 400; color: var(--texto-suave); }

.nivel__pie {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
}
.nivel__precio { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-marca); }
.nivel__precio small { display: block; font-family: var(--fuente-texto); font-weight: 400; font-size: 0.82rem; color: var(--texto-suave); }
.nivel__pie .boton { width: 100%; }

/* Tablet: imagen a la izquierda y datos a la derecha */
@media (min-width: 600px) and (max-width: 899px) {
  .nivel { flex-direction: row; }
  .nivel__imagen { flex: 0 0 42%; aspect-ratio: auto; }
}
@media (min-width: 900px) {
  .niveles__pestanas { display: none; }
  .niveles__tarjetas { grid-template-columns: repeat(3, 1fr); }
  .niveles__tarjetas > [hidden] { display: flex !important; }
}

/* Lo que incluyen todos los niveles */
.incluye {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--radio-grande);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0, 28, 133, 0.06);
}
.incluye__titulo { font-size: var(--t-h3); }
.incluye__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.1rem 2rem;
  margin-top: 1.75rem;
}
.incluye__lista li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--texto); }
.incluye__lista svg { width: 24px; height: 24px; flex: none; color: var(--azul-medio); margin-top: 1px; }

.colores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
}
.colores__titulo { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-marca); }
.colores__lista { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.colores__lista li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--texto-suave); }
.colores__lista i {
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(5, 15, 61, 0.2);
}

/* ---------- 11. PARA QUIÉN ----------
   Imagen arriba y texto abajo, para que nunca se encimen. */
.casos { display: grid; gap: 1.25rem; }
.caso {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--marino-profundo);
}
.caso img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 50%;
  transition: transform 1.2s var(--curva);
}
.caso:hover img { transform: scale(1.03); }
.caso__contenido { position: relative; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); color: #FFFFFF; }
.caso__grupo {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.caso h3 { margin-top: 0.85rem; font-size: var(--t-h3); color: #FFFFFF; }
.caso p { margin-top: 0.45rem; max-width: 38ch; color: rgba(255, 255, 255, 0.86); }

.casos__nota {
  margin-top: 2rem;
  text-align: center;
  color: var(--texto-suave);
}
.casos__nota strong { color: var(--azul-marca); }

@media (min-width: 760px) {
  .casos { grid-template-columns: repeat(2, 1fr); }
  .caso--grande { grid-column: 1 / -1; }
  .caso--grande img { aspect-ratio: 2 / 1; }
}
@media (min-width: 1000px) {
  .casos { grid-template-columns: 1.35fr 1fr; }
  .caso--grande { grid-column: auto; grid-row: 1 / span 2; }
  /* En la tarjeta grande, la imagen ocupa todo el alto disponible */
  .caso--grande img { flex: 1 1 0; height: 0; min-height: 260px; aspect-ratio: auto; object-position: center 55%; }
}

/* ---------- 12. BLOQUE DE CONFIANZA ---------- */
.confianza { padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--borde); }
.confianza__titulo { font-size: var(--t-h3); text-align: center; }
.confianza__grupo { margin-top: 2rem; }
.confianza__etiqueta { text-align: center; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.confianza__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; margin-top: 1.25rem; }
.confianza__logos img { max-height: 56px; width: auto; filter: grayscale(1); opacity: 0.8; }

/* ---------- 13. ADQUISICIÓN ---------- */
.modelos { display: grid; gap: 1.25rem; }
.modelo {
  padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  border-radius: var(--radio-grande);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.45s var(--curva), background-color 0.3s;
}
.modelo:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.08); }
.modelo--extra { box-shadow: inset 0 0 0 1px rgba(236, 210, 159, 0.4); }
.modelo__icono { width: 40px; height: 40px; color: var(--turquesa); }
.modelo--extra .modelo__icono { color: var(--dorado); }
.modelo h3 { margin-top: 1.5rem; font-size: var(--t-h3); }
.modelo p { margin-top: 0.6rem; }
.modelos__accion { margin-top: 2.5rem; }

@media (min-width: 860px) {
  .modelos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 14. COTIZADOR ---------- */
.cotizador {
  display: grid;
  gap: 2.5rem;
  padding: clamp(1.5rem, 0.5rem + 4vw, 4rem);
  border-radius: calc(var(--radio-grande) + 8px);
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(199, 227, 249, 0.9), rgba(199, 227, 249, 0) 70%),
    radial-gradient(70% 80% at 0% 100%, rgba(236, 255, 251, 1), rgba(236, 255, 251, 0) 70%),
    var(--cielo-claro);
}
.cotizador .seccion__intro { max-width: 36ch; }

.cotizador__form {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radio-grande);
  background: #FFFFFF;
  box-shadow: var(--sombra-suave);
}

.campo-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo-grupo legend,
.campo-grupo__etiqueta {
  display: block;
  margin-bottom: 0.75rem;
  padding: 0;
  font-family: var(--fuente-titulos);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--azul-marca);
}
.campo-grupo__ayuda { margin-top: 0.6rem; font-size: 0.85rem; color: var(--texto-suave); }

/* Botones de opción en forma de píldora */
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; }
.segmentos label { position: relative; }
.segmentos input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.segmentos span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  height: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px var(--borde);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texto);
  text-align: center;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.segmentos label:hover span { box-shadow: inset 0 0 0 1.5px var(--azul-medio); }
.segmentos input:checked + span { background: var(--azul-marca); color: #FFFFFF; box-shadow: none; }
.segmentos input:focus-visible + span { outline: 3px solid var(--azul-medio); outline-offset: 3px; }

/* Selector de cantidad */
.contador {
  display: inline-flex;
  align-items: center;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px var(--borde);
}
.contador__boton {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 0;
  background: transparent;
  color: var(--azul-marca);
  border-radius: 14px;
  cursor: pointer;
}
.contador__boton:hover { background: var(--cielo-claro); }
.contador__boton svg { width: 20px; height: 20px; }
.contador input {
  width: 4.5rem;
  height: 52px;
  border: 0;
  background: transparent;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--azul-marca);
  -moz-appearance: textfield;
  appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cotizador__resumen {
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  background: var(--cielo-claro);
}
.cotizador__seleccion { font-family: var(--fuente-titulos); font-size: 1.1rem; font-weight: 600; color: var(--azul-marca); }
.cotizador__precio { margin-top: 0.35rem; font-family: var(--fuente-titulos); font-size: 1.6rem; font-weight: 700; color: var(--azul-marca); }
.cotizador__precio-nota { margin-top: 0.35rem; font-size: 0.82rem; color: var(--texto-suave); }

.cotizador__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cotizador__acciones .boton { flex: 1 1 220px; white-space: nowrap; }
@media (max-width: 520px) {
  .cotizador { padding: 1.75rem 1rem 1rem; }
  .cotizador__intro { padding-inline: 0.5rem; }
  .cotizador__form { padding: 1.5rem 1.25rem; }
}

@media (min-width: 1000px) {
  .cotizador { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 4rem; }
}

/* ---------- 15. PREGUNTAS FRECUENTES ---------- */
.preguntas { display: grid; gap: 0; }
.acordeon { border-top: 1px solid var(--borde); }
.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon summary {
  position: relative;
  display: block;
  padding: 1.4rem 3rem 1.4rem 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--azul-marca);
  cursor: pointer;
  list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::before,
.acordeon summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--azul-medio);
  transition: transform 0.35s var(--curva);
}
.acordeon summary::after { transform: rotate(90deg); }
.acordeon details[open] summary::after { transform: rotate(0deg); }
.acordeon summary:hover { color: var(--azul-medio); }
.acordeon summary:focus-visible { outline-offset: 4px; }
.acordeon__respuesta { padding: 0 3rem 1.6rem 0; color: var(--texto-suave); max-width: 62ch; }
.acordeon__respuesta p + p { margin-top: 0.75rem; }

@media (min-width: 1000px) {
  .preguntas { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; }
  .preguntas .seccion__encabezado { position: sticky; top: calc(var(--alto-menu) + 2rem); }
}

/* ---------- 16. CONTACTO Y FORMULARIO ---------- */
.contacto { display: grid; gap: 3rem; }
.contacto .seccion__encabezado { margin-bottom: 0; }

.canales { display: grid; gap: 0.75rem; margin-top: 2.25rem; }
.canal {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--borde);
  text-decoration: none;
  color: var(--texto);
  transition: box-shadow 0.25s, transform 0.35s var(--curva), background-color 0.25s;
}
.canal:hover { transform: translateY(-2px); background: var(--cielo-claro); box-shadow: inset 0 0 0 1px var(--cielo-medio); }
.canal > svg {
  width: 44px; height: 44px;
  flex: none;
  padding: 10px;
  border-radius: 14px;
  background: var(--cielo-claro);
  color: var(--azul-marca);
}
.canal small { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.canal strong { display: block; font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-marca); word-break: break-word; }

.formulario {
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  border-radius: var(--radio-grande);
  background: #FFFFFF;
  box-shadow: var(--sombra-suave), inset 0 0 0 1px rgba(0, 28, 133, 0.06);
}
.formulario__rejilla { display: grid; gap: 1.1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.campo label { font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
.campo label span[aria-hidden] { color: var(--azul-medio); }
.campo input,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: #FFFFFF;
  font: inherit;
  color: var(--tinta);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:hover,
.campo textarea:hover { border-color: var(--cielo-medio); }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 4px rgba(61, 98, 172, 0.18);
}
.campo--error input,
.campo--error textarea { border-color: var(--error); }
.campo__error { font-size: 0.84rem; color: var(--error); }

.campo--casilla { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.campo--casilla input {
  width: 22px; height: 22px;
  min-height: 0;
  flex: none;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--azul-marca);
}
.campo--casilla label { font-weight: 400; color: var(--texto-suave); }
.campo--casilla .campo__error { flex-basis: 100%; }
.campo--casilla.campo--error { flex-wrap: wrap; }

/* Trampa anti-spam: fuera de la vista */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}
.formulario__nota { font-size: 0.85rem; color: var(--texto-suave); }
.formulario__estado { margin-top: 1rem; font-weight: 500; }
.formulario__estado:empty { display: none; }
.formulario__estado--exito { padding: 1rem 1.25rem; border-radius: 14px; background: #E8F6EF; color: var(--exito); }
.formulario__estado--error { padding: 1rem 1.25rem; border-radius: 14px; background: #FDECEA; color: var(--error); }
.formulario__estado a { color: inherit; font-weight: 600; }

@media (min-width: 640px) {
  .formulario__rejilla { grid-template-columns: 1fr 1fr; }
  .campo--completo { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .contacto { grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: start; }
}

/* Tarjeta de contacto directo (cuando el formulario está apagado) */
.contacto-directo {
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(199, 227, 249, 0.8), rgba(199, 227, 249, 0) 70%),
    #FFFFFF;
}
.contacto-directo__icono {
  width: 56px; height: 56px;
  padding: 14px;
  border-radius: 18px;
  background: var(--azul-marca);
  color: #FFFFFF;
}
.contacto-directo h3 { margin-top: 1.5rem; font-size: var(--t-h3); }
.contacto-directo p { margin-top: 0.6rem; max-width: 42ch; color: var(--texto-suave); }
.contacto-directo__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- 17. PIE DE PÁGINA ---------- */
.pie {
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  padding-bottom: 2rem;
  background: var(--cielo-claro);
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
}
.pie__rejilla { display: grid; gap: 2.5rem; }
.pie__lema { margin-top: 1.25rem; font-family: var(--fuente-titulos); font-size: 1.1rem; color: var(--azul-marca); }
.pie__titulo {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-medio);
}
.pie__columna ul { display: grid; gap: 0.55rem; margin-top: 1.1rem; }
.pie a { color: var(--texto); text-decoration: none; transition: color 0.2s; }
.pie a:hover { color: var(--azul-marca); text-decoration: underline; text-underline-offset: 3px; }
.pie .logo:hover { text-decoration: none; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  font-size: 0.88rem;
}
@media (min-width: 760px) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- 18. AVISO DE COOKIES (solo si la analítica está activa) ---------- */
.aviso-cookies {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  max-width: 720px;
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: var(--sombra), inset 0 0 0 1px var(--borde);
  font-size: 0.92rem;
}
.aviso-cookies p { flex: 1 1 320px; color: var(--texto-suave); }
.aviso-cookies__botones { display: flex; gap: 0.5rem; }

/* ---------- 19. PÁGINAS INTERNAS ---------- */
.pagina-interna {
  padding-top: calc(var(--alto-menu) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: var(--seccion);
  background: linear-gradient(180deg, var(--cielo-claro), #FFFFFF 420px);
}
.legal { max-width: 760px; }
.legal h1 { font-size: var(--t-h2); margin-top: 1rem; }
.legal h2 { font-size: var(--t-h3); margin-top: 2.75rem; }
.legal p, .legal ul { margin-top: 1rem; color: var(--texto-suave); }
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal li + li { margin-top: 0.4rem; }
.legal .legal__fecha { margin-top: 0.75rem; font-size: 0.9rem; }
.legal .legal__volver { margin-top: 3rem; }

.error-404 {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--alto-menu) + 2rem) var(--margen) 4rem;
  text-align: center;
  background: var(--degradado-cielo);
}
.error-404__numero {
  font-family: var(--fuente-titulos);
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}
.error-404 h1 { margin-top: 1rem; font-size: var(--t-h3); }
.error-404 p { margin-top: 0.75rem; color: var(--texto-suave); }
.error-404__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

/* ---------- 20. ANIMACIONES ----------
   Solo se activan si JavaScript está disponible (clase .js en <html>)
   y si la persona no pidió reducir el movimiento. */
@media (prefers-reduced-motion: no-preference) {
  /* Revelado al hacer scroll */
  .js .revelar {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
    transition-delay: var(--retraso, 0s);
  }
  .js .revelar.visible { opacity: 1; transform: none; }

  .hero__chip { animation: flotar 6s ease-in-out infinite; }
  .hero__chip--a { animation-delay: -3s; }

  /* Cómo funciona: el sol gira, la energía fluye */
  .paso__icono--sol svg { animation: girar 24s linear infinite; }
  .paso__icono--bateria svg { animation: latido 2.4s ease-in-out infinite; }
  .paso__icono--celular svg { animation: latido 2.4s ease-in-out 1.2s infinite; }
  .pasos::after {
    content: "";
    position: absolute;
    left: 33px; top: 40px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--turquesa);
    box-shadow: 0 0 0 6px rgba(105, 193, 205, 0.25), 0 0 18px 4px rgba(105, 193, 205, 0.6);
    animation: energia-vertical 4s var(--curva) infinite;
  }
  @media (min-width: 860px) {
    .pasos::after { left: 76px; top: 34px; animation-name: energia-horizontal; }
  }

  .acordeon details[open] .acordeon__respuesta { animation: aparecer 0.45s var(--curva); }
}

@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* El punto de luz recorre la línea que une los pasos */
@keyframes energia-vertical {
  0% { top: 40px; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { top: calc(100% - 50px); opacity: 0; }
}
@keyframes energia-horizontal {
  0% { left: 76px; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { left: calc(66.6667% - 10px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pasos::after { display: none; }
}