/* ============================================================
   Dark Matter Aeronautical Services — hoja de estilos única
   ============================================================ */

:root {
  --blanco: #ffffff;
  --negro: #000000;
  --verde: #1f9d6b;
  --rojo: #c8423c;
  --rojo-oscuro: #962c27;
  --mp-azul: #009ee3;
  --blanco-a03: rgba(255, 255, 255, 0.035);
  --blanco-a04: rgba(255, 255, 255, 0.04);
  --blanco-a05: rgba(255, 255, 255, 0.05);
  --blanco-a08: rgba(255, 255, 255, 0.08);
  --blanco-a09: rgba(255, 255, 255, 0.09);
  --blanco-a10: rgba(255, 255, 255, 0.10);
  --blanco-a12: rgba(255, 255, 255, 0.12);
  --blanco-a18: rgba(255, 255, 255, 0.18);
  --blanco-a22: rgba(255, 255, 255, 0.22);
  --blanco-a25: rgba(255, 255, 255, 0.25);
  --blanco-a28: rgba(255, 255, 255, 0.28);
  --blanco-a45: rgba(255, 255, 255, 0.45);
  --blanco-a55: rgba(255, 255, 255, 0.55);
  --blanco-a96: rgba(255, 255, 255, 0.96);
  --negro-a35: rgba(0, 0, 0, 0.35);
  --negro-a38: rgba(0, 0, 0, 0.38);
  --radio: 14px;
  --radio-chico: 9px;
  --ancho: 1160px;
  --fuente-texto: "Inter", "Segoe UI", Arial, sans-serif;
  --fuente-titulo: "Rajdhani", "Segoe UI", Arial, sans-serif;
  --header-alto: 72px;
}

/* Tema por defecto: cielo (azul noche + ámbar) */
:root,
:root[data-tema="cielo"] {
  --azul-noche: #0b1d33;
  --azul-noche-2: #0f2744;
  --azul-noche-3: #16345a;
  --azul-claro: #e8eef7;
  --ambar: #f5a623;
  --ambar-oscuro: #d98c0c;
  --acento-hover: #d98c0c;
  --gris: #5b6b80;
  --gris-claro: #f4f7fb;
  --borde: #dbe3ee;
  --texto-medio: #31445d;
  --texto-medio-2: #44566e;
  --texto-claro-1: #b9c8dc;
  --texto-claro-2: #c3d1e2;
  --texto-claro-3: #d7e1ee;
  --texto-claro-4: #dbe6f3;
  --texto-header-tenue: #9fb2c9;
  --texto-footer: #a8bad0;
  --texto-footer-tenue: #7e93ac;
  --texto-acento-claro: #ffd48f;
  --texto-aviso: #6b4a10;
  --texto-aviso-contenido: #24405f;
  --icono-aviso: #2d6cab;
  --superficie-2: #fbfcfe;
  --superficie-aviso: #fff8e9;
  --borde-aviso: #f0d49a;
  --superficie-aviso-contenido: #eef5ff;
  --borde-aviso-contenido: #c9d9ee;
  --superficie-aviso-codigo: #fff7e6;
  --borde-aviso-codigo: #f0d9a6;
  --texto-aviso-codigo: #6e5320;
  --fondo-nav-sub-activo: #fff6e4;
  --borde-hover: #c2d0e2;
  --borde-hover-2: #b8c8dc;
  --borde-resumen: #d4e0ee;
  --deshabilitado-fondo: #c9d2de;
  --deshabilitado-texto: #5b6b80;
  --fondo-ok: #e7f6ef;
  --fondo-footer: #071426;
  --header-fondo: rgba(11, 29, 51, 0.97);
  --hero-inicio: #081729;
  --hero-fin: #123356;
  --cta-fin: #14375d;
  --resplandor: rgba(245, 166, 35, 0.16);
  --hero-glow-azul: rgba(35, 89, 156, 0.42);
  --foco: rgba(22, 52, 90, 0.13);
  --sombra-suave: rgba(11, 29, 51, 0.08);
  --sombra: 0 10px 30px rgba(11, 29, 51, 0.10);
  --sombra-fuerte: 0 18px 45px rgba(11, 29, 51, 0.20);
  --sombra-acento: 0 8px 20px rgba(245, 166, 35, 0.28);
  --nubes-opacidad: 0.27;
  --nubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.010' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.92 0 0 0 0 1 0 0 0 2.4 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --linea-grid: rgba(255, 255, 255, 0.035);
  --linea-grid-fuerte: rgba(255, 255, 255, 0.05);
  --mascara-grid: rgba(0, 0, 0, 0.35);
  --orbita: rgba(245, 166, 35, 0.28);
  --orbita-suave: rgba(245, 166, 35, 0.14);
  --acento-a10: rgba(245, 166, 35, 0.10);
  --acento-a12: rgba(245, 166, 35, 0.12);
  --acento-a14: rgba(245, 166, 35, 0.14);
  --acento-a16: rgba(245, 166, 35, 0.16);
  --acento-a18: rgba(245, 166, 35, 0.18);
  --acento-a28: rgba(245, 166, 35, 0.28);
  --acento-a45: rgba(245, 166, 35, 0.45);
}

/* Tema átomo (púrpura sobre negro) */
:root[data-tema="atomo"] {
  --azul-noche: #0a0a0f;
  --azul-noche-2: #15141c;
  --azul-noche-3: #1d1b26;
  --azul-claro: #f2eef5;
  --ambar: #e22cf0;
  --ambar-oscuro: #9b2fae;
  --acento-hover: #c056d6;
  --gris: #5a5a5a;
  --gris-claro: #f3f1f6;
  --borde: #d9d9d9;
  --texto-medio: #121018;
  --texto-medio-2: #4a4a4a;
  --texto-claro-1: #d9d9d9;
  --texto-claro-2: #d9d9d9;
  --texto-claro-3: #e6e6e6;
  --texto-claro-4: #e6e6e6;
  --texto-header-tenue: #b9b9b9;
  --texto-footer: #b9b9b9;
  --texto-footer-tenue: #8a8a8a;
  --texto-acento-claro: #ff9ff7;
  --texto-aviso: #5b165f;
  --texto-aviso-contenido: #2a1630;
  --icono-aviso: #c056d6;
  --superficie-2: #faf9fc;
  --superficie-aviso: #f7eaf9;
  --borde-aviso: #c056d6;
  --superficie-aviso-contenido: #f2eaf7;
  --borde-aviso-contenido: #c056d6;
  --superficie-aviso-codigo: #f7eaf9;
  --borde-aviso-codigo: #c056d6;
  --texto-aviso-codigo: #5b165f;
  --fondo-nav-sub-activo: #f7eaf9;
  --borde-hover: #c056d6;
  --borde-hover-2: #c056d6;
  --borde-resumen: #c056d6;
  --deshabilitado-fondo: #3a3742;
  --deshabilitado-texto: #b9b9b9;
  --fondo-ok: #e7f6ef;
  --fondo-footer: #050508;
  --header-fondo: rgba(10, 10, 15, 0.97);
  --hero-inicio: #050508;
  --hero-fin: #180a20;
  --cta-fin: #1a0d22;
  --resplandor: rgba(226, 44, 240, 0.18);
  --hero-glow-azul: rgba(155, 47, 174, 0.32);
  --foco: rgba(192, 86, 214, 0.25);
  --sombra-suave: rgba(10, 10, 15, 0.08);
  --sombra: 0 10px 30px rgba(10, 10, 15, 0.10);
  --sombra-fuerte: 0 18px 45px rgba(10, 10, 15, 0.20);
  --sombra-acento: 0 8px 20px rgba(226, 44, 240, 0.28);
  --linea-grid: rgba(255, 255, 255, 0.035);
  --linea-grid-fuerte: rgba(255, 255, 255, 0.05);
  --mascara-grid: rgba(0, 0, 0, 0.35);
  --orbita: rgba(192, 86, 214, 0.30);
  --orbita-suave: rgba(155, 47, 174, 0.18);
  --acento-a10: rgba(226, 44, 240, 0.10);
  --acento-a12: rgba(226, 44, 240, 0.12);
  --acento-a14: rgba(226, 44, 240, 0.14);
  --acento-a16: rgba(226, 44, 240, 0.16);
  --acento-a18: rgba(226, 44, 240, 0.18);
  --acento-a28: rgba(226, 44, 240, 0.28);
  --acento-a45: rgba(226, 44, 240, 0.45);
}

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

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

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--azul-noche);
  background: var(--fondo-claro, var(--blanco));
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
}

h3 {
  font-size: 1.35rem;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--azul-noche-3);
}

img,
svg {
  max-width: 100%;
}

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

.seccion {
  padding: 78px 0;
}

.seccion--gris {
  background: var(--gris-claro);
}

.seccion--azul {
  background: var(--azul-noche);
  color: var(--blanco);
}

.seccion--azul h2,
.seccion--azul h3 {
  color: var(--blanco);
}

.encabezado-seccion {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.encabezado-seccion p {
  color: var(--gris);
  font-size: 1.06rem;
  margin: 0;
}

.seccion--azul .encabezado-seccion p {
  color: var(--texto-claro-1);
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
  margin-bottom: 12px;
}

.antetitulo::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ambar);
}

.seccion--azul .antetitulo {
  color: var(--ambar);
}

.salto-lectura {
  position: absolute;
  left: -9999px;
}

.salto-lectura:focus {
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--ambar);
  color: var(--azul-noche);
  padding: 8px 14px;
  border-radius: 6px;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--fuente-titulo);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 13px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}

.boton:hover {
  transform: translateY(-2px);
}

.boton:active {
  transform: translateY(0);
}

.boton--ambar {
  background: var(--ambar);
  color: var(--azul-noche);
  box-shadow: 0 8px 20px var(--acento-a28);
}

.boton--ambar:hover {
  background: var(--acento-hover);
}

.boton--azul {
  background: var(--azul-noche);
  color: var(--blanco);
}

.boton--azul:hover {
  background: var(--azul-noche-3);
}

.boton--borde {
  border-color: var(--blanco-a55);
  color: var(--blanco);
  background: transparent;
}

.boton--borde:hover {
  background: var(--blanco-a12);
  border-color: var(--blanco);
}

.boton--borde-azul {
  border-color: var(--azul-noche);
  color: var(--azul-noche);
  background: transparent;
}

.boton--borde-azul:hover {
  background: var(--azul-noche);
  color: var(--blanco);
}

.boton--chico {
  padding: 9px 16px;
  font-size: 0.92rem;
}

.boton--bloque {
  width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
  background: var(--deshabilitado-fondo);
  border-color: var(--deshabilitado-fondo);
  color: var(--gris);
  box-shadow: none;
  opacity: 1;
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-alto);
  background: var(--header-fondo);
  border-bottom: 1px solid var(--blanco-a08);
  transition: box-shadow 0.2s ease;
}

.header.con-sombra {
  box-shadow: 0 6px 24px var(--negro-a35);
}

.header__fila {
  height: var(--header-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--blanco);
  flex-shrink: 0;
}

.logo__img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}

.footer__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 9px;
  flex-shrink: 0;
}

.logo__marca {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.logo__nombre {
  display: block;
  white-space: nowrap;
}

.logo__acento {
  color: var(--ambar);
}

.logo__sub {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-header-tenue);
  margin-top: 4px;
}

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

.nav a {
  position: relative;
  color: var(--texto-claro-3);
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 1.02rem;
  padding: 10px 13px;
  border-radius: 7px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav a:hover {
  color: var(--blanco);
  background: var(--blanco-a08);
}

.nav a.activo {
  color: var(--ambar);
}

.carrito-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--blanco);
  border: 1px solid var(--blanco-a25);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.carrito-boton:hover {
  border-color: var(--ambar);
  background: var(--acento-a12);
}

.carrito-boton__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ambar);
  color: var(--azul-noche);
  font-size: 0.8rem;
  font-weight: 700;
}

.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--blanco-a28);
  border-radius: 9px;
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.menu-boton svg {
  width: 24px;
  height: 24px;
}

.menu-boton .icono-cerrar {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-abrir {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-cerrar {
  display: block;
}

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

.idioma {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--blanco-a25);
  border-radius: 999px;
  flex-shrink: 0;
}

.idioma__btn {
  border: 0;
  background: transparent;
  color: var(--texto-header-tenue);
  font-family: var(--fuente-titulo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 7px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.idioma__btn:hover {
  color: var(--blanco);
}

.idioma__btn.activo {
  background: var(--acento-a18);
  color: var(--texto-acento-claro);
}

.idioma__sep {
  color: var(--blanco-a28);
  font-size: 0.68rem;
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-alto) + 72px) 0 88px;
  background:
    radial-gradient(1000px 520px at 78% 18%, var(--acento-a16), transparent 60%),
    radial-gradient(800px 480px at 8% 92%, var(--hero-glow-azul), transparent 62%),
    linear-gradient(160deg, var(--hero-inicio) 0%, var(--azul-noche) 48%, var(--hero-fin) 100%);
  color: var(--blanco);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linea-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea-grid) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, transparent, var(--negro) 30%, var(--negro-a35));
  pointer-events: none;
}

/* Nubes lejanas (solo tema cielo): capa de ruido SVG fija, sin imagenes externas. */
.hero::before,
.encabezado-pagina::before,
.cta-final::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: var(--nubes, none);
  background-size: cover;
  background-position: center top;
  opacity: var(--nubes-opacidad, 0);
  mask-image: linear-gradient(to bottom, var(--negro) 35%, transparent 100%);
  pointer-events: none;
}

.encabezado-pagina,
.cta-final {
  position: relative;
  overflow: hidden;
}

.encabezado-pagina > .contenedor,
.cta-final > * {
  position: relative;
  z-index: 1;
}

:root[data-tema="atomo"] .hero {
  background:
    radial-gradient(ellipse 620px 260px at 76% 46%, transparent 67%, var(--orbita) 68%, transparent 69%),
    radial-gradient(ellipse 900px 390px at 76% 46%, transparent 67%, var(--orbita-suave) 68%, transparent 69%),
    radial-gradient(1000px 520px at 78% 18%, var(--acento-a16), transparent 60%),
    radial-gradient(800px 480px at 8% 92%, var(--hero-glow-azul), transparent 62%),
    linear-gradient(160deg, var(--hero-inicio) 0%, var(--azul-noche) 48%, var(--hero-fin) 100%);
}

.hero .contenedor {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  gap: 48px;
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--acento-a45);
  background: var(--acento-a10);
  color: var(--texto-acento-claro);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.83rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero h1 {
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  color: var(--ambar);
}

.hero__texto {
  font-size: 1.14rem;
  color: var(--texto-claro-2);
  max-width: 34em;
  margin-bottom: 30px;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--texto-footer);
  font-size: 0.92rem;
}

.hero__datos li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero__datos svg {
  color: var(--ambar);
  flex-shrink: 0;
}

.hero__arte {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hero__foto {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--blanco-a22);
  box-shadow: 0 26px 50px var(--negro-a38);
  animation: flotar 7s ease-in-out infinite;
}

@keyframes flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* ---------- Franja de confianza ---------- */

.confianza {
  background: var(--azul-noche-2);
  border-top: 1px solid var(--blanco-a08);
  color: var(--blanco);
  padding: 22px 0;
}

.confianza__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.confianza__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 1rem;
  color: var(--texto-claro-4);
}

.confianza__lista svg {
  color: var(--ambar);
  flex-shrink: 0;
}

/* ---------- Tarjetas ---------- */

.grilla {
  display: grid;
  gap: 22px;
}

.grilla--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grilla--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 5 tarjetas: la segunda fila (2) queda centrada */
@media (min-width: 861px) {
  .grilla--valores {
    grid-template-columns: repeat(6, 1fr);
  }
  .grilla--valores > * {
    grid-column: span 2;
  }
  .grilla--valores > :nth-child(4) {
    grid-column: 2 / span 2;
  }
  .grilla--valores > :nth-child(5) {
    grid-column: 4 / span 2;
  }
}

.tarjeta {
  position: relative;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--borde-hover);
}

.tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--azul-claro);
  color: var(--azul-noche);
  margin-bottom: 16px;
}

.tarjeta__icono svg {
  width: 27px;
  height: 27px;
}

.tarjeta h3 {
  margin-bottom: 8px;
}

.tarjeta p {
  color: var(--gris);
  margin: 0;
  font-size: 0.97rem;
}

.tarjeta--foto {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tarjeta__foto {
  display: block;
  width: 100%;
  height: 154px;
  object-fit: cover;
}

.tarjeta--foto .tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 24px 24px;
}

/* ---------- Planes ---------- */

.planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 26px;
}

.plan--destacado {
  background: var(--azul-noche);
  color: var(--blanco);
  border-color: var(--azul-noche);
  box-shadow: var(--sombra-fuerte);
  transform: translateY(-8px);
}

.plan__cinta {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ambar);
  color: var(--azul-noche);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.plan__bajada {
  font-size: 0.92rem;
  color: var(--gris);
  min-height: 2.8em;
  margin-bottom: 14px;
}

.plan--destacado .plan__bajada {
  color: var(--texto-claro-1);
}

.plan__precio {
  font-family: var(--fuente-titulo);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.plan__precio small {
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--gris);
  display: block;
  margin-top: 7px;
}

.plan--destacado .plan__precio small {
  color: var(--texto-claro-1);
}

.plan__lista {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  font-size: 0.94rem;
  flex-grow: 1;
}

.plan__lista li {
  position: relative;
  padding: 6px 0 6px 26px;
  color: var(--texto-medio);
}

.plan--destacado .plan__lista li {
  color: var(--texto-claro-3);
}

.plan__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}

.plan--destacado .plan__lista li::before {
  border-color: var(--ambar);
}

/* Microvideo en las tarjetas de demo */
.demo-card .demo-card__arte--video { height: auto; aspect-ratio: 16 / 9; }
.demo-card__arte--video svg { display: none; }
.demo-card__arte--video::after { display: none; }
.demo-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
@media (max-width: 720px) { .demo-card .demo-card__arte--video { height: auto; } }
/* ---------- Clases / demos ---------- */

.demo-card {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.demo-card__arte {
  position: relative;
  height: 132px;
  background: linear-gradient(140deg, var(--azul-noche) 0%, var(--azul-noche-3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ambar);
}

.demo-card__arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--blanco-a05) 1px, transparent 1px),
    linear-gradient(90deg, var(--blanco-a05) 1px, transparent 1px);
  background-size: 26px 26px;
}

.demo-card__arte svg {
  width: 74px;
  height: 74px;
  position: relative;
  z-index: 1;
}

.demo-card__cuerpo {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.demo-card__cuerpo h3 {
  margin-bottom: 6px;
  font-size: 1.18rem;
}

.demo-card__cuerpo p {
  color: var(--gris);
  font-size: 0.92rem;
  flex-grow: 1;
  margin-bottom: 14px;
}

.demo-card__link {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ambar-oscuro);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.demo-card__link:hover {
  color: var(--azul-noche);
}

/* ---------- Pasos ---------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: paso;
}

.paso {
  position: relative;
  background: var(--blanco-a05);
  border: 1px solid var(--blanco-a12);
  border-radius: var(--radio);
  padding: 30px 26px;
}

.paso__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--azul-noche);
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.paso h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.paso p {
  color: var(--texto-claro-1);
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 820px;
  margin: 0 auto;
}

.faq details {
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 20px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul-noche);
  font-size: 1.15rem;
  line-height: 25px;
  text-align: center;
  font-family: var(--fuente-texto);
}

.faq details[open] summary::after {
  content: "−";
  background: var(--ambar);
}

.faq details[open] summary {
  color: var(--azul-noche-3);
}

.faq__respuesta {
  padding: 0 20px 20px;
  color: var(--gris);
  font-size: 0.97rem;
}

.faq__respuesta p {
  margin: 0;
}

/* ---------- CTA final ---------- */

.cta-final {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 340px at 20% 20%, var(--acento-a18), transparent 60%),
    linear-gradient(145deg, var(--azul-noche) 0%, var(--cta-fin) 100%);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 54px 40px;
  text-align: center;
}

.cta-final h2 {
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}

.cta-final p {
  color: var(--texto-claro-2);
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

.cta-final .hero__acciones {
  justify-content: center;
  margin-bottom: 0;
}

/* ---------- Catálogo ---------- */

.encabezado-pagina {
  padding: calc(var(--header-alto) + 56px) 0 46px;
  background:
    radial-gradient(700px 300px at 85% 10%, var(--acento-a14), transparent 65%),
    linear-gradient(150deg, var(--hero-inicio) 0%, var(--azul-noche) 60%, var(--hero-fin) 100%);
  color: var(--blanco);
}

.encabezado-pagina h1 {
  margin-bottom: 12px;
}

.encabezado-pagina p {
  color: var(--texto-claro-2);
  max-width: 46em;
  margin: 0;
  font-size: 1.06rem;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
}

.filtro {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--fondo-claro, var(--blanco));
  color: var(--texto-medio);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filtro:hover {
  border-color: var(--azul-noche-3);
}

.filtro.activo {
  background: var(--azul-noche);
  border-color: var(--azul-noche);
  color: var(--blanco);
}

.filtro__cuenta {
  opacity: 0.65;
  font-size: 0.82rem;
  margin-left: 4px;
}

.productos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.producto {
  display: flex;
  flex-direction: column;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--borde-hover);
}

.producto__foto {
  aspect-ratio: 4 / 3;
  background: var(--azul-noche);
  border-bottom: 1px solid var(--borde);
}

.producto__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 24px 24px;
}

.producto__cabecera {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.producto__icono {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 11px;
  background: var(--azul-claro);
  color: var(--azul-noche-3);
}

.producto__icono svg {
  width: 26px;
  height: 26px;
}

.producto__categoria {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
  margin-bottom: 3px;
}

.producto h3 {
  margin: 0;
  font-size: 1.3rem;
}

.producto__desc {
  color: var(--gris);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.producto__temas {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.producto__temas li {
  font-size: 0.76rem;
  background: var(--gris-claro);
  border: 1px solid var(--borde);
  color: var(--texto-medio-2);
  border-radius: 999px;
  padding: 3px 9px;
}

.producto__precios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
  margin: auto 0 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--borde);
}

.precio {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.precio--secundario {
  font-size: 1.1rem;
  color: var(--gris);
  font-weight: 600;
}

.precio__etiqueta {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 4px;
}

.producto__acciones {
  display: grid;
  gap: 8px;
}

.producto__acciones .boton {
  font-size: 0.93rem;
  padding: 10px 14px;
}

.producto__nota {
  font-size: 0.78rem;
  color: var(--gris);
  margin: 8px 0 0;
}

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--superficie-aviso);
  border: 1px solid var(--borde-aviso);
  border-radius: var(--radio-chico);
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--texto-aviso);
  margin-top: 22px;
}

.aviso svg {
  flex-shrink: 0;
  color: var(--ambar-oscuro);
}

.aviso p {
  margin: 0;
}

.aviso + .aviso {
  margin-top: 12px;
}

.aviso--contenido {
  background: var(--superficie-aviso-contenido);
  border-color: var(--borde-aviso-contenido);
  color: var(--texto-aviso-contenido);
}

.aviso--contenido svg {
  color: var(--icono-aviso);
}

.aviso--checkout {
  margin: 0 0 22px;
}

.vacio {
  text-align: center;
  padding: 50px 20px;
  color: var(--gris);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-claro, var(--blanco));
}

/* ---------- Clases ---------- */

.foto-ancha {
  margin: 0 0 42px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  background: var(--azul-noche);
}

.foto-ancha img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

.clases-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 46px;
}

.clases-panel {
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: var(--sombra);
}

.clases-panel__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.clases-panel__precio .precio {
  font-size: 2.5rem;
}

.clases-panel__lista {
  list-style: none;
  margin: 16px 0 22px;
  padding: 0;
}

.clases-panel__lista li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 0.95rem;
  color: var(--texto-medio);
}

.clases-panel__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}

.clases-panel__nota {
  font-size: 0.82rem;
  color: var(--gris);
  margin: 10px 0 0;
  text-align: center;
}

.clases-demos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---------- Formularios ---------- */

.pagina-formulario {
  padding: calc(var(--header-alto) + 48px) 0 78px;
  background: var(--gris-claro);
  min-height: 100vh;
}

.form-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  align-items: start;
}

.panel {
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px;
}

.panel + .panel {
  margin-top: 22px;
}

.panel h2 {
  font-size: 1.55rem;
  margin-bottom: 18px;
}

.panel h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.campo {
  margin-bottom: 18px;
}

.campo label,
.grupo-label {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.campo .opcional {
  font-weight: 400;
  color: var(--gris);
  font-size: 0.8rem;
  margin-left: 4px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: 0.97rem;
  color: var(--azul-noche);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo select { width: 100%; padding: .7rem .8rem; border: 1px solid var(--borde, #c9d1dc); border-radius: 8px; font: inherit; background: var(--fondo-claro, #fff); color: inherit; }
.campo select[aria-invalid="true"] { border-color: #c0392b; }
.campo--check .check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.campo--check input[type="checkbox"] { width: auto; margin-top: .2rem; flex: none; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-noche-3);
  box-shadow: 0 0 0 3px var(--foco);
}

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

.campo__ayuda {
  font-size: 0.8rem;
  color: var(--gris);
  margin: 5px 0 0;
}

.campo__error {
  display: none;
  font-size: 0.82rem;
  color: var(--rojo);
  margin: 5px 0 0;
}

.campo.con-error .campo__error {
  display: block;
}

.campos-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.opciones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.campo label.opcion,
.campo label.checklinea {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 11px 13px;
  font-size: 0.93rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.opcion:hover {
  border-color: var(--borde-hover-2);
}

.opcion:has(input:checked) {
  border-color: var(--azul-noche-3);
  background: var(--azul-claro);
}

.opcion input {
  width: 17px;
  height: 17px;
  margin: 4px 0 0;
  accent-color: var(--azul-noche-3);
  flex-shrink: 0;
}

.opcion__texto {
  display: block;
  line-height: 1.4;
}

.opcion__texto small {
  display: block;
  color: var(--gris);
  font-size: 0.78rem;
}

.checklinea {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
  cursor: pointer;
}

.checklinea input {
  margin: 4px 0 0;
  accent-color: var(--azul-noche-3);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ---------- Programa: resumen ---------- */

.resumen-programa {
  display: none;
}

.resumen-programa.visible {
  display: block;
}

.resumen-programa__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 12px 0 16px;
}

.resumen-programa__tabla td {
  padding: 7px 0;
  border-bottom: 1px dotted var(--borde);
  vertical-align: top;
}

.resumen-programa__tabla td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.resumen-programa__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--azul-claro);
  border-radius: var(--radio-chico);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.resumen-programa__total span {
  font-family: var(--fuente-titulo);
  font-weight: 600;
}

.resumen-programa__total strong {
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  color: var(--azul-noche);
}

.nota-descuento {
  font-size: 0.82rem;
  color: var(--gris);
  margin: 0 0 16px;
}

/* ---------- Carrito / checkout ---------- */

.carrito-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carrito-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--borde);
}

.carrito-item:first-child {
  padding-top: 0;
}

.carrito-item__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  background: var(--azul-claro);
  color: var(--azul-noche-3);
}

.carrito-item__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.2;
}

.carrito-item__meta {
  font-size: 0.8rem;
  color: var(--gris);
  margin-top: 2px;
}

.carrito-item__controles {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
}

.cantidad button {
  width: 30px;
  height: 30px;
  border: 0;
  background: var(--fondo-claro, var(--blanco));
  color: var(--azul-noche);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--fuente-texto);
}

.cantidad button:hover {
  background: var(--azul-claro);
}

.cantidad span {
  min-width: 26px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.carrito-item__precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: right;
  white-space: nowrap;
}

.carrito-item__quitar {
  display: block;
  margin-top: 4px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--rojo);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--fuente-texto);
}

.carrito-item__quitar:hover {
  color: var(--rojo-oscuro);
}

.totales {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--azul-noche);
}

.totales__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  padding: 4px 0;
  color: var(--gris);
}

.totales__fila--total {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--azul-noche);
  padding-top: 10px;
}

.totales__fila--total strong {
  font-size: 1.9rem;
}

.totales__nota {
  font-size: 0.78rem;
  color: var(--gris);
  margin: 6px 0 0;
}

.checkout-vacio {
  text-align: center;
  padding: 44px 22px;
}

.checkout-vacio svg {
  color: var(--borde-hover);
  margin-bottom: 14px;
}

.pago-caja {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radio-chico);
  background: var(--gris-claro);
  border: 1px solid var(--borde);
}

.pago-caja p {
  font-size: 0.82rem;
  color: var(--gris);
  margin: 10px 0 0;
  text-align: center;
}

.pago-caja .boton {
  width: 100%;
}

.pago-caja__mp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--gris);
  margin-bottom: 10px;
}

.pago-caja__mp strong {
  color: var(--mp-azul);
}

.badge-pago {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--verde);
  background: var(--fondo-ok);
  border-radius: 999px;
  padding: 3px 10px;
}

.resumen-checkout {
  position: sticky;
  top: calc(var(--header-alto) + 18px);
}

.linea-detalle {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 0.9rem;
  border-bottom: 1px dotted var(--borde);
}

.linea-detalle span:last-child {
  white-space: nowrap;
  font-weight: 600;
}

/* ---------- Gracias ---------- */

.pagina-gracias {
  padding: calc(var(--header-alto) + 60px) 0 80px;
  background:
    radial-gradient(800px 380px at 50% 0%, var(--acento-a14), transparent 65%),
    var(--gris-claro);
  min-height: 100vh;
}

.gracias-caja {
  max-width: 720px;
  margin: 0 auto;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 44px 38px;
  text-align: center;
}

.gracias-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--fondo-ok);
  color: var(--verde);
  margin-bottom: 18px;
}

.gracias-icono svg {
  width: 38px;
  height: 38px;
}

.gracias-caja h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.gracias-caja > p {
  color: var(--gris);
}

.gracias-pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0;
  text-align: left;
}

.gracias-paso {
  background: var(--gris-claro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 14px;
  font-size: 0.85rem;
}

.gracias-paso strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.gracias-paso span {
  color: var(--gris);
}

.gracias-contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--fondo-footer);
  color: var(--texto-footer);
  padding: 54px 0 26px;
  font-size: 0.9rem;
}

.footer__grilla {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}

.footer h4 {
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.footer p {
  margin: 0 0 8px;
}

.footer a {
  color: var(--texto-claro-2);
  text-decoration: none;
}

.footer a:hover {
  color: var(--ambar);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__links li {
  margin-bottom: 8px;
}

.footer__contacto {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__contacto li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.footer__contacto svg {
  color: var(--ambar);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer__pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.footer__pago {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--blanco-a18);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.76rem;
  color: var(--texto-claro-4);
  background: var(--blanco-a04);
}

.footer__legal {
  border-top: 1px solid var(--blanco-a10);
  padding-top: 20px;
  font-size: 0.78rem;
  color: var(--texto-footer-tenue);
  line-height: 1.6;
}

.footer__legal p {
  margin: 0 0 6px;
}

.footer__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blanco);
  margin-bottom: 14px;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--azul-noche);
  color: var(--blanco);
  border-left: 4px solid var(--ambar);
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 0.92rem;
  box-shadow: var(--sombra-fuerte);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(100vw - 32px);
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast svg {
  color: var(--ambar);
  flex-shrink: 0;
}

/* ---------- Utilidades ---------- */

.centrado {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-22 {
  margin-top: 22px;
}

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

[hidden] {
  display: none !important;
}

/* ---------- Navegación con submenú ---------- */

.nav__grupo {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__sub-boton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--texto-claro-3);
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 1.02rem;
  padding: 10px 13px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav__sub-boton svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}

.nav__sub-boton:hover,
.nav__sub-boton.abierto {
  color: var(--blanco);
  background: var(--blanco-a08);
}

.nav__sub-boton.activo {
  color: var(--ambar);
}

.nav__sub-boton.abierto svg {
  transform: rotate(180deg);
}

.nav__sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: none;
  min-width: 238px;
  padding: 8px;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub,
.nav__sub.abierto {
  display: block;
}

.nav .nav__sub a {
  display: block;
  color: var(--texto-medio);
  font-size: 0.97rem;
  padding: 10px 12px;
  border-radius: 7px;
  white-space: normal;
}

.nav .nav__sub a:hover {
  color: var(--azul-noche);
  background: var(--azul-claro);
}

.nav .nav__sub a.activo {
  color: var(--ambar-oscuro);
  background: var(--fondo-nav-sub-activo);
}

/* ---------- Accesos de portada ---------- */

.accesos {
  padding-top: 72px;
}

.accesos__grilla {
  align-items: stretch;
}

.acceso {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--azul-noche);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.acceso:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra);
  border-color: var(--borde-hover);
}

.acceso__foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--azul-noche);
}

.acceso__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.acceso:hover .acceso__foto img {
  transform: scale(1.04);
}

.acceso__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 25px 27px;
}

.acceso__cuerpo h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.acceso__cuerpo p {
  margin: 0 0 20px;
  color: var(--gris);
  font-size: 0.95rem;
}

.acceso__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--ambar-oscuro);
  font-family: var(--fuente-titulo);
  font-weight: 700;
}

.acceso__link::after {
  content: "→";
  transition: transform 0.18s ease;
}

.acceso:hover .acceso__link::after {
  transform: translateX(4px);
}

/* ---------- Clases particulares en portada ---------- */

.ofrecemos-extra {
  display: grid;
  grid-template-columns: 250px 1fr auto;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
  overflow: hidden;
  background: var(--azul-noche);
  color: var(--blanco);
  border-radius: var(--radio);
  padding-right: 28px;
}

.ofrecemos-extra__foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.ofrecemos-extra__cuerpo {
  padding: 24px 0;
}

.ofrecemos-extra .antetitulo {
  color: var(--ambar);
}

.ofrecemos-extra h3 {
  color: var(--blanco);
  margin: 2px 0 8px;
  font-size: 1.5rem;
}

.ofrecemos-extra p {
  margin: 0;
  color: var(--texto-claro-2);
  font-size: 0.95rem;
}

/* ---------- Contenido de páginas nuevas ---------- */

.grilla--2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-layout > .panel + .panel {
  margin-top: 0;
}

.panel--resumen {
  background: var(--azul-claro);
  border-color: var(--borde-resumen);
}

.aviso-codigo {
  margin: 16px 0 0;
  padding: 13px 15px;
  background: var(--superficie-aviso-codigo);
  border: 1px solid var(--borde-aviso-codigo);
  border-radius: var(--radio-chico);
  font-size: 0.87rem;
  color: var(--texto-aviso-codigo);
}

.nota-legal {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--ambar);
  background: var(--fondo-claro, var(--blanco));
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--gris);
}

.lista-check {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.lista-check li {
  position: relative;
  padding-left: 30px;
  color: var(--texto-medio);
  font-size: 0.96rem;
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}

.acciones-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.planes--institucionales .plan__bajada {
  min-height: 5.2em;
}

.plan--particular {
  border-top: 4px solid var(--ambar);
}

.plan--particular .plan__precio small {
  max-width: 230px;
}

.plan--destacado .boton--borde-azul {
  color: var(--blanco);
  border-color: var(--blanco-a45);
}

#cotizacion {
  scroll-margin-top: calc(var(--header-alto) + 28px);
}

/* ---------- Consultoría ---------- */

.anclas-consulta {
  position: sticky;
  top: calc(var(--header-alto) + 8px);
  z-index: 20;
  display: flex;
  gap: 6px;
  margin: 24px 0 0;
  padding: 8px;
  overflow-x: auto;
  background: var(--blanco-a96);
  border: 1px solid var(--borde);
  border-radius: 999px;
  box-shadow: 0 8px 20px var(--sombra-suave);
}

.anclas-consulta a {
  flex-shrink: 0;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--texto-medio);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
}

.anclas-consulta a:hover {
  background: var(--azul-claro);
  color: var(--azul-noche);
}

.ancla-seccion {
  scroll-margin-top: calc(var(--header-alto) + 82px);
}

.encabezado-seccion--fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  max-width: none;
  text-align: left;
}

.encabezado-seccion--fila > div {
  max-width: 720px;
}

.encabezado-seccion--fila .boton {
  flex-shrink: 0;
}

.alcance-servicios {
  margin-top: 10px;
  font-size: 0.98rem;
}

.tarjeta--servicio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tarjeta--servicio .boton {
  margin-top: auto;
}

.buscador {
  position: relative;
  max-width: 520px;
  margin-bottom: 18px;
}

.buscador svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--gris);
  pointer-events: none;
}

.buscador input {
  width: 100%;
  padding: 12px 15px 12px 43px;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-family: var(--fuente-texto);
  font-size: 0.96rem;
  color: var(--azul-noche);
}

.buscador input:focus {
  outline: none;
  border-color: var(--azul-noche-3);
  box-shadow: 0 0 0 3px var(--foco);
}

.clasificado,
.profesional {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fondo-claro, var(--blanco));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.clasificado:hover,
.profesional:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--borde-hover);
}

.clasificado__foto,
.profesional__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--azul-noche);
}

.clasificado__foto img,
.profesional__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insignia-ejemplo {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  background: var(--ambar);
  color: var(--azul-noche);
  border-radius: 5px;
  font-family: var(--fuente-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.clasificado__cuerpo,
.profesional__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 21px 23px 23px;
}

.clasificado__categoria {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--ambar-oscuro);
  font-family: var(--fuente-titulo);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.clasificado h3,
.profesional h3 {
  margin: 0 0 8px;
  font-size: 1.22rem;
}

.clasificado__desc {
  margin: 0 0 14px;
  color: var(--gris);
  font-size: 0.92rem;
}

.clasificado__datos,
.profesional__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  color: var(--gris);
  font-size: 0.81rem;
}

.clasificado__datos li,
.profesional__datos li {
  position: relative;
  padding-left: 12px;
}

.clasificado__datos li::before,
.profesional__datos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ambar);
  transform: translateY(-50%);
}

.clasificado__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--borde);
}

.clasificado__precio {
  font-family: var(--fuente-titulo);
  font-size: 1.18rem;
  color: var(--azul-noche);
}

.enlace-flecha {
  color: var(--ambar-oscuro);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
}

.enlace-flecha::after {
  content: " →";
}

.profesional__licencias {
  margin: 0 0 12px;
  color: var(--gris);
  font-size: 0.9rem;
}

.profesional__cuerpo .boton {
  margin-top: auto;
}

.listado-clasificados .vacio,
.listado-profesionales .vacio {
  grid-column: 1 / -1;
}

.panel--form-desplegable {
  margin-top: 26px;
  scroll-margin-top: calc(var(--header-alto) + 82px);
}

.panel__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.panel__cabecera h3 {
  margin: 0;
}

.boton-cerrar {
  border: 0;
  background: transparent;
  color: var(--gris);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 3px;
}

.boton-cerrar:hover {
  color: var(--azul-noche);
}

/* ---------- Responsive ---------- */

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

  .productos,
  .clases-demos,
  .planes {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan--destacado {
    transform: none;
  }

  .hero .contenedor {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero__arte {
    order: -1;
  }

  .hero__foto {
    max-width: 540px;
  }

  .form-layout {
    grid-template-columns: 1fr;
  }

  .resumen-checkout {
    position: static;
  }

  .clases-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .header__fila {
    gap: 10px;
  }

  .logo {
    gap: 8px;
  }

  .logo__img {
    width: 38px;
    height: 38px;
  }

  .logo__marca {
    font-size: 1.06rem;
  }

  .idioma__btn {
    padding: 7px 6px;
    font-size: 0.74rem;
  }

  .logo__sub {
    font-size: 0.55rem;
    letter-spacing: 0.14em;
  }

  .header__acciones {
    gap: 8px;
    flex-shrink: 0;
  }

  .carrito-boton {
    padding: 7px 10px;
    gap: 6px;
  }

  .menu-boton {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .nav {
    position: fixed;
    top: var(--header-alto);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--azul-noche);
    padding: 14px 18px 22px;
    border-bottom: 1px solid var(--blanco-a10);
    box-shadow: 0 22px 30px var(--negro-a35);
    max-height: calc(100vh - var(--header-alto));
    overflow-y: auto;
  }

  .nav.abierto {
    display: flex;
  }

  .nav a {
    padding: 13px 12px;
    font-size: 1.08rem;
    border-radius: 8px;
  }

  .nav__grupo {
    display: block;
    position: static;
  }

  .nav__sub-boton {
    width: 100%;
    justify-content: space-between;
    padding: 13px 12px;
    font-size: 1.08rem;
    border-radius: 8px;
  }

  .nav .nav__grupo .nav__sub {
    position: static;
    display: none;
    min-width: 0;
    margin: 2px 0 4px;
    padding: 3px 0 3px 10px;
    background: var(--blanco-a05);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
  }

  .nav .nav__grupo .nav__sub.abierto {
    display: block;
  }

  .nav .nav__sub a {
    color: var(--texto-claro-3);
    font-size: 1rem;
    padding: 11px 12px;
  }

  .nav .nav__sub a:hover {
    color: var(--blanco);
    background: var(--blanco-a09);
  }

  .nav .nav__sub a.activo {
    color: var(--ambar);
    background: var(--acento-a12);
  }

  .accesos__grilla,
  .grilla--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ofrecemos-extra {
    grid-template-columns: 190px 1fr;
    gap: 22px;
    padding: 0 22px 22px 0;
  }

  .ofrecemos-extra .boton {
    grid-column: 2;
    justify-self: start;
  }

  .encabezado-seccion--fila {
    flex-direction: column;
    align-items: flex-start;
  }

  .confianza__lista {
    grid-template-columns: repeat(2, 1fr);
  }

  .grilla--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pasos {
    grid-template-columns: 1fr;
  }

  .footer__grilla {
    grid-template-columns: 1fr 1fr;
  }

  .grilla--4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .logo__nombre,
  .logo__sub {
    display: none;
  }
}

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

  .foto-ancha img {
    aspect-ratio: 16 / 9;
  }

  .hero {
    padding: calc(var(--header-alto) + 44px) 0 60px;
  }

  .hero__texto {
    font-size: 1.02rem;
  }

  .hero__acciones .boton {
    width: 100%;
  }

  .grilla--4,
  .grilla--3,
  .grilla--2,
  .productos,
  .clases-demos,
  .planes,
  .opciones-grid,
  .campos-fila,
  .gracias-pasos {
    grid-template-columns: 1fr;
  }

  .accesos__grilla {
    grid-template-columns: 1fr;
  }

  .ofrecemos-extra {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .ofrecemos-extra__foto {
    height: 210px;
    min-height: 0;
  }

  .ofrecemos-extra__cuerpo {
    padding: 22px 20px 18px;
  }

  .ofrecemos-extra .boton {
    grid-column: auto;
    gap: 0;
    width: calc(100% - 40px);
    margin: 0 20px 22px;
  }

  .acciones-form .boton {
    width: 100%;
  }

  .anclas-consulta {
    top: calc(var(--header-alto) + 4px);
    border-radius: 12px;
  }

  .clasificado__pie {
    flex-wrap: wrap;
  }

  .encabezado-seccion--fila .boton {
    width: 100%;
  }

  .confianza__lista {
    grid-template-columns: 1fr;
  }

  .cta-final {
    padding: 40px 22px;
  }

  .cta-final .boton {
    width: 100%;
  }

  .panel {
    padding: 22px 18px;
  }

  .footer__grilla {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .gracias-caja {
    padding: 32px 20px;
  }

  .gracias-contacto .boton {
    width: 100%;
  }

  .footer {
    padding-top: 40px;
  }

  .carrito-item {
    grid-template-columns: 44px 1fr;
    align-items: start;
  }

  .carrito-item__icono {
    width: 44px;
    height: 44px;
  }

  .carrito-item__controles {
    grid-column: 2;
    justify-content: space-between;
    margin-top: 8px;
  }

  .carrito-item__precio {
    text-align: left;
  }

  .carrito-item__quitar {
    margin-top: 0;
  }

  .demo-card__arte {
    height: 110px;
  }
}

@media (max-width: 480px) {
  .carrito-boton span:not(.carrito-boton__num) {
    display: none;
  }
}

@media (max-width: 380px) {
  .contenedor {
    padding: 0 16px;
  }

  .logo__img {
    width: 32px;
    height: 32px;
  }

  .logo__marca {
    font-size: 1rem;
  }

  .idioma__btn {
    padding: 6px 5px;
    font-size: 0.7rem;
  }

  .carrito-boton {
    padding: 7px 9px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .plan__precio,
  .clases-panel__precio .precio {
    font-size: 2rem;
  }

  .totales__fila--total strong {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ---------- Tema Dark Matter (turquesa + azul marino, púrpura solo en detalles) ---------- */
:root[data-tema="dm"] {
  --azul-noche: #091838;
  --azul-noche-2: #0d2250;
  --azul-noche-3: #0f2c5c;
  --azul-claro: #e8eff9;
  --ambar: #3fc5db;
  --ambar-oscuro: #1796ae;
  --acento-hover: #1796ae;
  --gris: #5b6b80;
  --gris-claro: #f4f7fb;
  --borde: #dbe3ee;
  --texto-medio: #31445d;
  --texto-medio-2: #44566e;
  --texto-claro-1: #b9c8dc;
  --texto-claro-2: #c3d1e2;
  --texto-claro-3: #d7e1ee;
  --texto-claro-4: #dbe6f3;
  --texto-header-tenue: #9fb2c9;
  --texto-footer: #a8bad0;
  --texto-footer-tenue: #7e93ac;
  --texto-acento-claro: #8fd9e6;
  --texto-aviso: #0b5565;
  --texto-aviso-contenido: #24405f;
  --icono-aviso: #1796ae;
  --superficie-2: #fbfcfe;
  --superficie-aviso: #e9f8fb;
  --borde-aviso: #9fdce8;
  --superficie-aviso-contenido: #eef5ff;
  --borde-aviso-contenido: #c9d9ee;
  --superficie-aviso-codigo: #e9f8fb;
  --borde-aviso-codigo: #9fdce8;
  --texto-aviso-codigo: #0b5565;
  --fondo-nav-sub-activo: #e6f7fa;
  --borde-hover: #c2d0e2;
  --borde-hover-2: #b8c8dc;
  --borde-resumen: #d4e0ee;
  --deshabilitado-fondo: #c9d2de;
  --deshabilitado-texto: #5b6b80;
  --fondo-ok: #e7f6ef;
  --fondo-footer: #050d20;
  --header-fondo: rgba(9, 24, 56, 0.97);
  --hero-inicio: #060f26;
  --hero-fin: #0f2c5c;
  --cta-fin: #123a72;
  --resplandor: rgba(63, 197, 219, 0.16);
  --hero-glow-azul: rgba(35, 89, 156, 0.42);
  --foco: rgba(22, 52, 90, 0.13);
  --sombra-suave: rgba(11, 29, 51, 0.08);
  --sombra: 0 10px 30px rgba(11, 29, 51, 0.10);
  --sombra-fuerte: 0 18px 45px rgba(11, 29, 51, 0.20);
  --sombra-acento: 0 8px 20px rgba(63, 197, 219, 0.28);
  --nubes-opacidad: 0.30;
  --nubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.010' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.92 0 0 0 0 1 0 0 0 2.4 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --linea-grid: rgba(255, 255, 255, 0.035);
  --linea-grid-fuerte: rgba(255, 255, 255, 0.05);
  --mascara-grid: rgba(0, 0, 0, 0.35);
  --orbita: rgba(189, 124, 233, 0.30);
  --orbita-suave: rgba(189, 124, 233, 0.15);
  --acento-a10: rgba(63, 197, 219, 0.10);
  --acento-a12: rgba(63, 197, 219, 0.12);
  --acento-a14: rgba(63, 197, 219, 0.14);
  --acento-a16: rgba(63, 197, 219, 0.16);
  --acento-a18: rgba(63, 197, 219, 0.18);
  --acento-a28: rgba(63, 197, 219, 0.28);
  --acento-a45: rgba(63, 197, 219, 0.45);
}

:root[data-tema="dm"] .hero {
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.55) 0%, rgba(6, 15, 38, 0.15) 45%, rgba(9, 24, 56, 0.6) 100%),
    url("../img/fondos/fondo-2-orbitas.png") center / cover no-repeat,
    var(--azul-noche);
}

:root[data-tema="dm"] .encabezado-pagina {
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.5), rgba(9, 24, 56, 0.35)),
    url("../img/fondos/fondo-4-carta.png") center / cover no-repeat,
    var(--azul-noche);
}

:root[data-tema="dm"] .cta-final {
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.45), rgba(9, 24, 56, 0.35)),
    url("../img/fondos/fondo-1-rutas.png") center / cover no-repeat,
    var(--azul-noche);
}

:root[data-tema="dm"] .hero::after {
  opacity: 0.35;
}

/* Avion de papel: protagonista visual en encabezados y cierre de cada pagina */
:root[data-tema="dm"] .encabezado-pagina::after,
:root[data-tema="dm"] .cta-final::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: 10%;
  width: clamp(190px, 26vw, 340px);
  aspect-ratio: 380 / 230;
  background: url("../img/avion-papel.svg") center / contain no-repeat;
  filter: drop-shadow(0 10px 22px rgba(63, 197, 219, 0.25));
  pointer-events: none;
  z-index: 0;
}

:root[data-tema="dm"] .cta-final::after {
  right: 3%;
  bottom: 6%;
  width: clamp(130px, 17vw, 220px);
  opacity: 0.85;
}

/* Portada: carrusel de 5 clases 3D (solo CSS, 8 s por imagen) */
.hero__carrusel {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  border: 1px solid var(--blanco-a22);
  box-shadow: 0 26px 50px var(--negro-a38);
  overflow: hidden;
  background: var(--azul-noche);
  animation: flotar 7s ease-in-out infinite;
}

.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: hero-slide 40s infinite;
}

.hero__slide:nth-child(1) { animation-delay: 0s; opacity: 1; }
.hero__slide:nth-child(2) { animation-delay: 8s; }
.hero__slide:nth-child(3) { animation-delay: 16s; }
.hero__slide:nth-child(4) { animation-delay: 24s; }
.hero__slide:nth-child(5) { animation-delay: 32s; }

.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__slide figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(6, 15, 38, 0.72);
  border-left: 3px solid var(--purpura, #bd7ce9);
  color: var(--blanco);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

@keyframes hero-slide {
  0% { opacity: 0; }
  3% { opacity: 1; }
  20% { opacity: 1; }
  23% { opacity: 0; }
  100% { opacity: 0; }
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--azul-noche);
}

@media (prefers-reduced-motion: reduce) {
  .hero__carrusel { animation: none; }
  .hero__slide { animation: none; }
  .hero__slide:nth-child(n+2) { display: none; }
}

/* Retrato del fundador: la tarjeta de nosotros muestra la foto completa, no una tira */
.tarjeta__foto--fundador {
  height: auto;
  aspect-ratio: 4 / 3;
  object-position: center 30%;
}

/* El texto del encabezado no pasa por debajo del avion */
@media (min-width: 761px) {
  :root[data-tema="dm"] .encabezado-pagina h1,
  :root[data-tema="dm"] .encabezado-pagina p {
    max-width: calc(100% - clamp(190px, 27vw, 340px));
  }
}

@media (max-width: 760px) {
  :root[data-tema="dm"] .encabezado-pagina::after {
    width: 150px;
    right: -14px;
    bottom: 6px;
    opacity: 0.5;
  }

  :root[data-tema="dm"] .cta-final::after {
    width: 110px;
    right: -10px;
    bottom: -6px;
    opacity: 0.4;
  }
}

/* Logo horizontal completo (lleva el nombre dentro de la imagen) */
.logo__img--horizontal {
  width: auto;
  height: 56px;
  border-radius: 0;
}

.footer__logo--horizontal {
  width: auto;
  height: 44px;
  border-radius: 0;
}

@media (max-width: 480px) {
  .logo__img--horizontal {
    height: 30px;
  }
}

/* Marca madre en el pie */
.footer__madre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 0 8px;
  color: var(--texto-footer);
}

.footer__madre img {
  width: 64px;
  height: 64px;
}

.footer__madre p {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.footer__madre strong {
  color: var(--blanco);
  font-weight: 600;
}

/* Tema Dark Matter: superficies mas blancas */
:root[data-tema="dm"] {
  --gris-claro: #f8fbfe;
  --azul-claro: #eff6fb;
  --superficie-2: #ffffff;
  --borde: #e3ebf3;
}

/* ---------- Tema Dark Matter: purpura en detalles + mas blanco ---------- */
:root[data-tema="dm"] {
  --purpura: #bd7ce9;
  --purpura-medio: #a06fd9;
  --purpura-oscuro: #7f4abd;
  --purpura-a25: rgba(189, 124, 233, 0.25);
  --purpura-a50: rgba(189, 124, 233, 0.5);
  --gris-claro: #fbfdff;
  --azul-claro: #f4f9fd;
  --borde: #e7eef6;
}

:root[data-tema="dm"] ::selection {
  background: var(--purpura-a50);
  color: var(--blanco);
}

:root[data-tema="dm"] :focus-visible {
  outline: 2px solid var(--purpura);
  outline-offset: 2px;
}

:root[data-tema="dm"] .header {
  border-bottom: 1px solid var(--purpura-a25);
}

:root[data-tema="dm"] .hero__etiqueta {
  border-color: var(--purpura-a50);
}

:root[data-tema="dm"] .antetitulo::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--purpura), transparent);
}

:root[data-tema="dm"] .tarjeta:hover {
  border-color: var(--purpura-a50);
  box-shadow: 0 14px 34px rgba(127, 74, 189, 0.14);
}

:root[data-tema="dm"] .boton--borde:hover {
  border-color: var(--purpura);
}

:root[data-tema="dm"] .footer__madre {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--purpura-a50), transparent) 1;
  margin-top: 12px;
}

/* Mas blanco: las secciones oscuras terminan en una franja blanca suave */
:root[data-tema="dm"] .seccion--gris {
  background: linear-gradient(180deg, #ffffff 0%, var(--gris-claro) 100%);
}
/* ---------- Demo interactiva (ventana) ---------- */
.demo-visor {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 8, 16, 0.92);
  display: flex;
  padding: 3.25rem 1rem 1rem;
}
.muestra { width: min(100%, 560px); margin: auto; color: #fff; text-align: center; -webkit-user-select: none; user-select: none; }
.muestra__titulo { margin: 0 0 .6rem; font-weight: 700; } .muestra__titulo span { color: var(--ambar, #e8a33d); }
.muestra__hoja { position: relative; background: #fbfaf6; color: #1b1b1b; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); text-align: left; overflow: hidden; }
.muestra__pag { padding: 1.6rem 1.8rem; min-height: 520px; font: 15px/1.55 Georgia, "Times New Roman", serif; }
.muestra__pag h1 { font-size: 2rem; margin: .4rem 0; } .muestra__pag h2 { font-size: 1.45rem; margin: .2rem 0 .8rem; } .muestra__pag h3 { font-size: 1.05rem; margin: 1rem 0 .3rem; font-family: system-ui, sans-serif; }
.muestra__pag .mp__sello, .muestra__pag .mp__parte { font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .12em; color: #2a6fb0; }
.muestra__pag .mp__sub { color: #444; font-style: italic; }
.muestra__pag .mp__caja, .muestra__pag .mp__resumen { background: #eef4fb; border-left: 4px solid #2a6fb0; padding: .6rem .8rem; margin: .8rem 0; font-size: .93rem; }
.muestra__pag .mp__resumen { background: #fff7e6; border-color: #e8a33d; }
.muestra__pag .mp__tiempos { display: grid; gap: .4rem; margin: .6rem 0; } .muestra__pag .mp__tiempos div { border: 1px solid #d9d9d2; border-radius: 6px; padding: .4rem .6rem; font-size: .9rem; } .muestra__pag .mp__tiempos b { display: block; font-family: system-ui, sans-serif; color: #2a6fb0; }
.muestra__pag .mp__fuente, .muestra__pag .mp__nota { font-size: .78rem; color: #666; }
.muestra__marca { position: absolute; inset: -40% -40%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; font: 800 1.35rem/1.2 system-ui, sans-serif; letter-spacing: .12em; color: rgba(20,40,80,.13); transform: rotate(-28deg); text-align: center; white-space: nowrap; pointer-events: none; user-select: none; overflow: hidden; }
.muestra__sello { position: relative; z-index: 1; margin: 0; padding: .45rem 1rem; border-top: 1px solid #e3ddd0; font: 600 .68rem/1.3 system-ui, sans-serif; letter-spacing: .06em; color: #8a7f6a; text-align: center; background: #f4f1e8; }
.muestra__nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; font-size: .85rem; }
.muestra__fin { margin-top: .8rem; background: rgba(255,255,255,.08); border-radius: 8px; padding: .8rem; } .muestra__fin[hidden] { display: none; }
.clases-destacados { margin-bottom: 2.5rem; }
.clases-destacados__titulo { font-size: 1.4rem; margin: 0 0 1rem; }
.clases-demos--destacados { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.demo-card--destacada { border: 2px solid var(--ambar, #e8a33d); box-shadow: 0 10px 34px rgba(0,0,0,.25); }
.demo-card--destacada h3 { font-size: 1.25rem; }
.demo-card__insignia { display: inline-block; background: var(--ambar, #e8a33d); color: #1a1205; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; margin-bottom: .4rem; }
.demo-card__rotulo { position: absolute; left: .6rem; bottom: .6rem; z-index: 2; background: rgba(5,8,16,.78); color: #fff; font-size: .78rem; padding: .25rem .6rem; border-radius: 6px; pointer-events: none; }
.demo-visor { flex-wrap: wrap; gap: 1rem; align-content: center; justify-content: center; overflow-y: auto; }
.demo-visor__video { position: relative; flex: 1 1 560px; max-width: 960px; margin: 0; aspect-ratio: 16 / 9; background: #000; overflow: hidden; align-self: flex-start; }
.demo-visor__panel { flex: 0 0 300px; max-width: 100%; max-height: calc(100vh - 5rem); overflow-y: auto; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: .8rem; color: #fff; pointer-events: none; -webkit-user-select: none; user-select: none; }
.demo-visor__panel h4 { margin: 0 0 .6rem; font-size: .85rem; opacity: .9; }
.pn-g { margin-bottom: .8rem; }
.pn-g h5 { margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8fd0ff; }
.pn-c { margin-bottom: .55rem; opacity: .8; }
.pn-e { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .25rem; }
.pn-r { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); }
.pn-r i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #6cc4ff; }
.pn-r u { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--fondo-claro, #fff); border: 2px solid #6cc4ff; }
.pn-b { display: flex; flex-wrap: wrap; gap: .3rem; }
.pn-b button { cursor: not-allowed; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: .25rem .55rem; font-size: .75rem; }
.pn-b button.on { background: #6cc4ff; color: #04121f; border-color: #6cc4ff; }
@media (max-width: 900px) { .demo-visor__panel { flex: 1 1 100%; max-height: none; } }
.demo-visor__video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.demo-visor__marca { position: absolute; inset: -30%; display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; align-content: space-around; transform: rotate(-24deg); pointer-events: none; opacity: .22; color: #fff; font: 700 1.1rem/1 system-ui, sans-serif; letter-spacing: .12em; text-shadow: 0 0 2px #000; }
.demo-visor__fin { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; background: rgba(0,0,0,.82); color: #fff; text-align: center; padding: 1rem; }
.demo-visor__fin[hidden] { display: none; }
.demo-visor__herr { width: min(100%, 1100px); margin: .8rem auto 0; color: #fff; }
.demo-visor__herr h4 { margin: 0 0 .5rem; font-size: .9rem; opacity: .85; }
.demo-visor__herr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.demo-visor__herr button { pointer-events: none; cursor: not-allowed; opacity: .55; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; }
.demo-visor__marco {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #0b1220;
}
.demo-visor__cerrar {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.demo-visor__cerrar:hover,
.demo-visor__cerrar:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}
body.demo-abierta {
  overflow: hidden;
}
/* === Herramientas gratis === */
.nav__gratis { display: inline-flex; align-items: center; gap: .4rem; }
.insignia-gratis { display: inline-block; font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; padding: .3rem .5rem; border-radius: 999px; background: #1f9d6b; color: #fff; vertical-align: middle; box-shadow: 0 0 0 3px rgba(31, 157, 107, .18); }
.franja-herramientas { background: var(--azul-claro); border-block: 1px solid var(--borde); padding: 22px 0; }
.franja-herramientas__fila { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.franja-herramientas__texto { flex: 1 1 260px; }
.franja-herramientas__texto h2 { font-size: 1.25rem; margin: .4rem 0 .2rem; }
.franja-herramientas__texto p { margin: 0; color: var(--texto-medio); font-size: .95rem; }
.franja-herramientas__lista { display: flex; gap: 8px; list-style: none; margin: 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.franja-herramientas__lista::-webkit-scrollbar { display: none; }
.franja-herramientas__lista a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 86px; text-decoration: none; color: var(--texto-medio); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.franja-herramientas__lista img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 3px 10px rgba(9, 24, 56, .28); transition: transform .15s ease; }
.franja-herramientas__lista a:hover img, .franja-herramientas__lista a:focus-visible img { transform: translateY(-3px); }
.herramientas-grilla .demo-card__video { object-fit: cover; object-position: top center; }
.herramientas-grilla .demo-card__cuerpo .boton { margin-top: auto; align-self: flex-start; }
.herramientas-aviso { margin-top: 18px; color: var(--gris); font-size: .9rem; }
@media (max-width: 720px) { .franja-herramientas__boton { width: 100%; text-align: center; } }
@media (min-width: 861px) and (max-width: 1180px) {
  .nav__gratis > span[data-i18n="global.navHerramientas"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__gratis .insignia-gratis { font-size: 11px; padding: .4rem .6rem; }
  .logo__img--horizontal { height: 40px; } .header__fila { gap: 10px; } .nav { gap: 0; } .nav a, .nav__sub-boton { font-size: .9rem; padding-left: 8px; padding-right: 8px; } .carrito-boton > span[data-i18n="global.carrito"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* el boton 'Probar clases interactivas' baja directo a los demos, sin quedar debajo del encabezado fijo */
#demos { scroll-margin-top: calc(var(--header-alto) + 16px); }

/* === Pago con PayPal === */
.pago-paypal { margin-bottom: 14px; }
.pago-paypal__titulo { font-weight: 600; margin: 0 0 4px; }
.pago-paypal__total { margin: 0 0 10px; color: var(--texto-medio); }
.pago-paypal__nota { font-size: .92rem; color: var(--gris); }
#paypal-botones { min-height: 48px; }
.pago-paypal__separador { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--gris); font-size: .85rem; }
.pago-paypal__separador::before, .pago-paypal__separador::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }

/* === Reportes de herramientas === */
.reporte { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.reporte .campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--texto-medio); }
.reporte select, .reporte textarea, .reporte input { font: 400 1rem Inter, system-ui, sans-serif; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo-claro, var(--blanco)); color: var(--azul-noche); }
.reporte textarea { resize: vertical; min-height: 110px; }
.reporte select:focus, .reporte textarea:focus, .reporte input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.reporte__acciones { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.reporte__wa { color: #1f9d6b; font-weight: 600; text-decoration: none; }
.reporte__wa:hover { text-decoration: underline; }
.reporte-aviso { margin: 0; min-height: 1.2em; font-weight: 600; }
.reporte-aviso--ok { color: #1f9d6b; }
.reporte-aviso--error { color: var(--rojo); }
#reportar { scroll-margin-top: calc(var(--header-alto) + 16px); }

/* === Modo gris === */
/* Lo elige cada visitante con el boton del encabezado. Solo cambian los fondos claros y los bordes. */
:root[data-modo="gris"] {
  --fondo-claro: #d5dae1;
  --gris-claro: #c8ced7;
  --azul-claro: #c6cfdb;
  --superficie-2: #cfd5dd;
  --borde: #aab4c1;
  --borde-hover: #96a2b2;
  --fondo-nav-sub-activo: #c3ccd8;
}
:root[data-modo="gris"] .seccion--gris { background: var(--gris-claro); }
.modo-boton { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--blanco-a25, rgba(255,255,255,.25)); background: transparent; color: var(--texto-claro-3, #d7e1ee); cursor: pointer; padding: 0; }
.modo-boton:hover, .modo-boton:focus-visible { border-color: var(--ambar); color: var(--ambar); }
.modo-boton svg { width: 17px; height: 17px; }
:root[data-modo="gris"] .modo-boton { background: rgba(255,255,255,.12); }

/* === A coordinar === */
.coordinar-bloque { margin: 34px 0 10px; }
.coordinar-bloque h2 { margin: 6px 0 16px; }
.coordinar { display: flex; flex-direction: column; gap: 8px; }
.coordinar h3 { margin: 0; }
.coordinar p { margin: 0 0 6px; color: var(--texto-medio); }
.coordinar .boton { align-self: flex-start; }
.coordinar__insignia { align-self: flex-start; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--icono-aviso, #1796ae); background: var(--superficie-aviso, #e9f8fb); border: 1px solid var(--borde-aviso, #9fdce8); border-radius: 999px; padding: .35rem .6rem; }

/* === Logo mas grande donde entra (pedido de Leo, 2026-11-04: +20 % "si cabe") === */
/* Medido: a 1440 px o mas entra el +20 % (67 px); a 1366 px, 63 px; mas chico, queda como estaba. */
@media (min-width: 1366px) { .logo__img--horizontal { height: 63px; } }
@media (min-width: 1440px) { .logo__img--horizontal { height: 67px; } }
/* Celular: no entra todo en una fila; el logo queda en 28 px y el boton de modo gris pasa al menu */
@media (max-width: 640px) { .header__acciones .modo-boton { display: none; } }
@media (max-width: 480px) { .logo__img--horizontal { height: 28px; } }
.nav__modo { display: none; }
@media (max-width: 860px) {
  .nav__modo { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: var(--texto-claro-3, #d7e1ee); font: 500 1.08rem var(--fuente-titulo, inherit); padding: 13px 12px; border-radius: 8px; cursor: pointer; }
  .nav__modo::before { content: "◐"; }
  .nav__modo[aria-pressed="true"] { color: var(--ambar); }
}

/* === Celular: GRATIS visible y fotos más bajas (2026-11-07) === */
.gratis-movil { display: none; }
@media (max-width: 860px) {
  .gratis-movil { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; padding: .5rem .65rem; border-radius: 999px; background: #1f9d6b; color: #fff; box-shadow: 0 0 0 3px rgba(31, 157, 107, .18); white-space: nowrap; }
  .gratis-movil svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) { .gratis-movil .gratis-movil__txt-largo { display: none; } }
@media (max-width: 640px) {
  .acceso__foto { aspect-ratio: 16 / 9; }
  .foto-ancha img { aspect-ratio: 2 / 1; }
  .ofrecemos-extra__foto { height: 150px; }
  .producto__foto { aspect-ratio: 16 / 9; }
  .tarjeta__foto { height: 130px; }
  .herramientas-grilla .demo-card__video { max-height: 190px; }
}
.idioma--menu { display: none; }
@media (max-width: 560px) {
  .header__acciones > .idioma { display: none; }
  .nav .idioma--menu { display: inline-flex; align-self: flex-start; margin: 14px 0 4px; }
}

/* === Portada: dos puertas (Formación / Flight Support) y página Flight Support (2026-11-07) === */
.puertas__grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.puerta { display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--azul-noche); box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease; }
.puerta:hover, .puerta:focus-visible { transform: translateY(-4px); border-color: var(--turquesa, #3fc5db); }
.puerta img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
.puerta__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.puerta__titulo { font: 700 1.6rem/1.1 Rajdhani, Inter, sans-serif; letter-spacing: .02em; }
.puerta__texto { color: var(--texto-medio); }
.puerta .boton { align-self: flex-start; margin-top: 6px; }
@media (max-width: 720px) { .puertas__grilla { grid-template-columns: 1fr; } .puerta img { aspect-ratio: 2 / 1; } }

.fs-hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fs-datos { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.fs-datos li { padding: .45rem .8rem; border: 1px solid var(--borde); border-radius: 999px; font-weight: 600; font-size: .9rem; background: rgba(63, 197, 219, .08); }
.fs-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 18px; }
.fs-video { margin: 0; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: #000; box-shadow: var(--sombra); }
.fs-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--azul-noche); }
.fs-video figcaption { padding: 10px 14px; font-size: .9rem; color: var(--texto-medio); background: var(--azul-noche); }
.grilla--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .grilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grilla--4, .fs-videos { grid-template-columns: 1fr; } }
.fs-dos { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
@media (max-width: 860px) { .fs-dos { grid-template-columns: 1fr; } }
.fs-lista { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; gap: 10px; }
.fs-lista li { position: relative; padding-left: 28px; }
.fs-lista li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 12px; height: 7px; border-left: 2px solid #3fc5db; border-bottom: 2px solid #3fc5db; transform: rotate(-45deg); }
.fs-captura { margin: 0; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.fs-captura img { display: block; width: 100%; height: auto; }
.fs-nota { color: var(--gris); font-size: .9rem; margin-top: 12px; }
.fs-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: paso; }
.fs-pasos li { padding: 20px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--azul-noche); }
.fs-pasos h3 { margin: 0 0 6px; font-size: 1.1rem; color: #3fc5db; }
.fs-pasos p { margin: 0; color: var(--texto-medio); }
@media (max-width: 900px) { .fs-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fs-pasos { grid-template-columns: 1fr; } }
.fs-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
@media (max-width: 860px) { .fs-planes { grid-template-columns: 1fr; } }
.fs-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--azul-noche); }
.fs-plan--destacado { border-color: #3fc5db; box-shadow: 0 0 0 1px #3fc5db, var(--sombra); }
.fs-plan__cinta { position: absolute; top: -12px; left: 22px; background: #3fc5db; color: #0b1220; font: 700 11px/1 Inter, sans-serif; letter-spacing: .06em; padding: .4rem .6rem; border-radius: 999px; text-transform: uppercase; }
.fs-plan h3 { margin: 0; }
.fs-plan__precio { margin: 0; font: 700 2.2rem/1 Rajdhani, Inter, sans-serif; }
.fs-plan__mes, .fs-plan__incluye { margin: 0; color: var(--texto-medio); font-size: .92rem; }
.fs-plan .boton { margin-top: auto; }
.fs-tabla-scroll { overflow-x: auto; }
.fs-tabla { width: 100%; border-collapse: collapse; min-width: 520px; }
.fs-tabla th, .fs-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); text-align: left; }
.fs-tabla thead th { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-medio); }
.fs-tabla td { font-weight: 600; }
.fs-cta { text-align: center; }
.fs-cta .fs-hero__botones { justify-content: center; }
.idioma .idioma__btn + .idioma__btn { border-left: 1px solid var(--borde); }

/* Selector de idioma desplegable en el encabezado (4 idiomas, 2026-11-07) */
.header__acciones > .idioma { position: relative; }
.header__acciones > .idioma .idioma__btn:not(.activo) { display: none; }
.header__acciones > .idioma .idioma__btn.activo::after { content: ""; display: inline-block; margin-left: 5px; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.header__acciones > .idioma:hover, .header__acciones > .idioma:focus-within { z-index: 60; }
.header__acciones > .idioma:hover .idioma__btn:not(.activo),
.header__acciones > .idioma:focus-within .idioma__btn:not(.activo) { display: block; position: absolute; left: 0; right: 0; background: var(--azul-noche, #0d1730); border: 1px solid var(--borde); border-radius: 8px; }
.header__acciones > .idioma .idioma__btn:not(.activo):nth-of-type(2) { top: calc(100% + 4px); }
.header__acciones > .idioma .idioma__btn:not(.activo):nth-of-type(3) { top: calc(200% + 8px); }
.header__acciones > .idioma .idioma__btn:not(.activo):nth-of-type(4) { top: calc(300% + 12px); }
/* Con "Flight Support" en el menú, el encabezado se compacta también en pantallas grandes (2026-11-07) */
@media (min-width: 1181px) and (max-width: 1600px) {
  .nav__gratis > span[data-i18n="global.navHerramientas"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .carrito-boton > span[data-i18n="global.carrito"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header__fila { gap: 14px; } .nav { gap: 2px; } .nav a, .nav__sub-boton { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .logo__img--horizontal { height: 32px; width: auto; }
  .nav a, .nav__sub-boton { font-size: .82rem; padding-left: 5px; padding-right: 5px; }
  .header__acciones { gap: 6px; }
  .header__acciones .modo-boton { display: none; }
}
/* Tarjetas de Flight Support y puertas con el fondo claro de las tarjetas del sitio */
.puerta, .fs-pasos li, .fs-plan, .fs-video figcaption { background: var(--fondo-claro, var(--blanco)); }
.fs-video { background: var(--fondo-claro, var(--blanco)); }
.fs-pasos h3 { color: var(--turquesa-oscuro, #1d8fa3); }
.fs-plan--destacado { border-color: #1d8fa3; box-shadow: 0 0 0 1px #1d8fa3, var(--sombra); }
.fs-datos li { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }
.puerta img { height: 260px; aspect-ratio: auto; }
@media (max-width: 720px) { .puerta img { height: 170px; } }
/* === Videos de presentación y puerta animada (2026-11-12) === */
.video-seccion { display: block; width: 100%; height: auto; max-width: 960px; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); aspect-ratio: 16 / 9; background: #0b1220; object-fit: cover; }
.fs-planes-layout { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 18px; align-items: start; margin-top: 10px; }
.fs-planes-layout .fs-planes { margin-top: 0; }
@media (max-width: 1100px) { .fs-planes-layout { grid-template-columns: 1fr; } }
.puerta__video { width: 100%; height: 260px; aspect-ratio: auto; object-fit: cover; display: block; background: #0b1220; }
@media (max-width: 720px) { .puerta__video { height: 170px; } }
/* Íconos de las herramientas gratis más visibles (pedido de Leo, 2026-11-07) */
.franja-herramientas__lista { gap: 12px; }
.franja-herramientas__lista a { width: 98px; font-size: 12.5px; }
.franja-herramientas__lista img { width: 64px; height: 64px; border-radius: 16px; }
@media (max-width: 640px) { .franja-herramientas__lista img { width: 56px; height: 56px; } .franja-herramientas__lista a { width: 84px; } }
#planes { margin-top: 56px; }
.fs-foto img { aspect-ratio: 21 / 8; object-position: center 70%; }
@media (max-width: 640px) { .fs-foto img { aspect-ratio: 16 / 9; } }
.fs-cta-fondo { position: relative; color: #fff; background: linear-gradient(rgba(7, 18, 38, .62), rgba(7, 18, 38, .78)), url(../img/fs-nubes.jpg) center 35% / cover no-repeat; }
.fs-cta-fondo h2, .fs-cta-fondo p { color: #fff; }
/* Volver: a la portada desde páginas internas y desde las demos */
.volver-inicio { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; text-decoration: none; font: 600 14px/1 Inter, system-ui, sans-serif; background: rgba(255,255,255,.06); }
.volver-inicio:hover, .volver-inicio:focus-visible { border-color: #3fc5db; color: #3fc5db; }
.demo-visor__volver { position: absolute; top: 14px; left: 14px; z-index: 5; border: 1px solid rgba(255,255,255,.4); background: rgba(8,16,32,.75); color: #fff; border-radius: 999px; padding: .55rem 1rem; font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.demo-visor__volver:hover, .demo-visor__volver:focus-visible { border-color: #3fc5db; color: #3fc5db; }
#elegir { scroll-margin-top: calc(var(--header-alto) + 8px); }

/* === Modo claro (botón de color): paleta clara de las herramientas gratis (2026-11-08) ===
   Por defecto el sitio está en "gris" (encabezado y portada azul oscuro, secciones grises).
   El botón cambia lo azul oscuro a la paleta clara de las apps: fondo #c3cad3, paneles #d6dce3,
   texto #132033, acento #0e8ea5. El blanco original ya no es opción. */
:root[data-modo="claro"] {
  --fondo-claro: #d6dce3; --gris-claro: #c3cad3; --azul-claro: #cdd4dc; --superficie-2: #dfe4ea;
  --borde: #a3aebb; --borde-hover: #8e9aab; --fondo-nav-sub-activo: #c3cad3;
  --header-fondo: rgba(214, 220, 227, .97); --fondo-footer: #c3cad3; --texto-footer: #132033; --texto-footer-tenue: #55657a;
  --texto-claro-1: #33445a; --texto-claro-2: #2a3a50; --texto-claro-3: #132033; --texto-claro-4: #132033; --texto-header-tenue: #55657a;
  --blanco-a08: rgba(19, 32, 51, .12); --blanco-a12: rgba(19, 32, 51, .14); --blanco-a25: rgba(19, 32, 51, .3);
}
:root[data-modo="claro"] body { background: #c3cad3; }
:root[data-modo="claro"] .seccion--gris { background: #c3cad3; }
:root[data-modo="claro"] .header { border-bottom-color: #a3aebb; }
:root[data-modo="claro"] .nav a, :root[data-modo="claro"] .nav__sub-boton, :root[data-modo="claro"] .nav__modo { color: #132033; }
:root[data-modo="claro"] .nav a.activo, :root[data-modo="claro"] .nav a:hover { color: #0e8ea5; }
:root[data-modo="claro"] .nav__sub { background: #d6dce3; border-color: #a3aebb; }
:root[data-modo="claro"] .modo-boton, :root[data-modo="claro"] .carrito-boton, :root[data-modo="claro"] .menu-boton, :root[data-modo="claro"] .idioma { color: #132033; border-color: #8e9aab; }
:root[data-modo="claro"] .idioma__btn { color: #132033; }
:root[data-modo="claro"] .idioma__btn.activo { background: #0e8ea5; color: #fff; }
:root[data-modo="claro"] .hero,
:root[data-modo="claro"] .encabezado-pagina,
:root[data-modo="claro"] .seccion--azul,
:root[data-modo="claro"] .confianza { background: linear-gradient(180deg, #c3cad3 0%, #d6dce3 100%); color: #132033; }
:root[data-modo="claro"] .hero :is(h1, h2, h3, p, li, span:not(.boton)),
:root[data-modo="claro"] .encabezado-pagina :is(h1, h2, h3, p, li),
:root[data-modo="claro"] .seccion--azul :is(h1, h2, h3, p, li, strong),
:root[data-modo="claro"] .confianza :is(h2, h3, p, li, strong, span) { color: #132033; }
:root[data-modo="claro"] .antetitulo { color: #0e8ea5; }
:root[data-modo="claro"] .hero .boton--borde-azul, :root[data-modo="claro"] .encabezado-pagina .boton--borde-azul { color: #132033; border-color: #132033; }
:root[data-modo="claro"] .footer { background: #c3cad3; color: #132033; border-top: 1px solid #a3aebb; }
:root[data-modo="claro"] .footer :is(h4, p, a, li, span, strong) { color: #132033; }
:root[data-modo="claro"] .footer__pago { border-color: #8e9aab; }
:root[data-modo="claro"] .volver-inicio { color: #132033; border-color: #8e9aab; background: rgba(255, 255, 255, .35); }
:root[data-modo="claro"] .fs-datos li { color: #132033; border-color: #8e9aab; background: rgba(255, 255, 255, .35); }
:root[data-modo="claro"] .puerta, :root[data-modo="claro"] .tarjeta, :root[data-modo="claro"] .fs-plan, :root[data-modo="claro"] .fs-pasos li { background: #d6dce3; }
@media (max-width: 860px) { :root[data-modo="claro"] .nav { background: #d6dce3; } }
:root[data-modo="claro"] :is(.hero, .encabezado-pagina, .seccion--azul, .confianza) .boton--borde { color: #132033; border-color: #132033; }
:root[data-modo="claro"] :is(.hero, .encabezado-pagina, .seccion--azul, .confianza) .boton--borde:hover { color: #0e8ea5; border-color: #0e8ea5; }

/* === Demos en celular (2026-11-08, pedido de Leo): animación entera arriba y fija, mandos debajo === */
@media (max-width: 900px) {
  .demo-visor { align-content: flex-start; justify-content: flex-start; background: #05080f; padding: 3.6rem .6rem 1rem; gap: .6rem; }
  .demo-visor__video { flex: 0 0 100%; max-width: 100%; position: sticky; top: 0; z-index: 3; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
  .demo-visor__panel { flex: 0 0 100%; padding: .6rem; font-size: .9rem; }
  .demo-visor__herr { margin-top: .2rem; }
  .demo-visor__volver, .demo-visor__cerrar { position: fixed; z-index: 6; }
  .demo-visor__volver { top: 10px; left: 10px; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .demo-visor { padding-top: .6rem; }
  .demo-visor__video { flex-basis: auto; width: auto; height: calc(100vh - 1.2rem); max-width: 100%; position: relative; top: 0; }
}

/* === Modo claro: textura sutil de rutas y aviones (2026-11-08, pedido de Leo) === */
:root[data-modo="claro"] body,
:root[data-modo="claro"] :is(.hero, .encabezado-pagina, .seccion--azul, .confianza, .seccion--gris) {
  background-image: url("../img/textura-rutas.svg"), linear-gradient(180deg, #c3cad3 0%, #d6dce3 100%);
  background-size: 640px 640px, auto;
  background-attachment: scroll;
}
/* "Herramientas gratis" en dos renglones para que entre en el encabezado del celular */
@media (max-width: 860px) {
  .gratis-movil { white-space: normal; line-height: 1.05; font-size: 10.5px; letter-spacing: .02em; padding: .35rem .6rem; max-width: 92px; border-radius: 12px; text-align: left; }
  .gratis-movil svg { flex: 0 0 14px; }
}
@media (max-width: 420px) {
  .header__acciones { gap: .3rem; }
  .gratis-movil { font-size: 10px; max-width: 98px; padding: .3rem .5rem; gap: .3rem; }
  .carrito-boton { padding-inline: .45rem; }
  .logo__img--horizontal { height: 23px; width: auto; }
}
@media (max-width: 360px) { .logo__img--horizontal { height: 19px; } }
@media (max-width: 900px) and (orientation: portrait) {
  .demo-visor__video { top: 3.2rem; box-shadow: 0 -3.6rem 0 #05080f, 0 8px 20px rgba(0,0,0,.6); }
}
/* "Apps gratis": entra en un solo renglón */
@media (max-width: 860px) { .gratis-movil { white-space: nowrap; max-width: none; font-size: 11px; border-radius: 999px; } }

/* === Parte legal (2026-11-08): páginas, pie y formulario de arrepentimiento/baja === */
.legal__cuerpo { max-width: 800px; }
.legal__texto h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: .4rem 0 .3rem; }
.legal__texto h2 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; scroll-margin-top: calc(var(--header-alto, 72px) + 12px); }
.legal__texto p, .legal__texto li { line-height: 1.65; }
.legal__texto ul { padding-left: 1.2rem; display: grid; gap: .35rem; }
.legal__version { color: var(--texto-claro-1, #64748b); font-size: .9rem; margin: 0 0 1rem; }
.legal__leyenda { border-left: 3px solid #0e8ea5; padding: .5rem .8rem; background: rgba(14, 142, 165, .08); font-size: .92rem; }
.legal__trad { font-size: .88rem; font-style: italic; opacity: .85; margin-top: -.4rem; }
.legal-form { margin-top: 2rem; padding: 1.3rem; border: 1px solid var(--borde, #cbd5e1); border-radius: 14px; background: var(--fondo-claro, #fff); display: grid; gap: .9rem; }
.legal-form h2 { margin: 0; font-size: 1.2rem; }
.legal-form__tipo { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.legal-form__tipo label { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.legal-form .campo input, .legal-form .campo textarea { width: 100%; }
.legal-form__estado { margin: 0; font-weight: 600; }
.legal-form__estado a { word-break: break-all; }
.footer__legales { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 .5rem; }
.footer__legales a, .footer__consumidor a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__arrepentimiento { font-weight: 700; }
.footer__consumidor { margin: 0 0 1rem; font-size: .9rem; }

/* Manuales en redacción: "Próximamente" (2026-11-13) */
.producto--proximamente .producto__foto { position: relative; }
.producto--proximamente .producto__foto img { filter: grayscale(.35) brightness(.85); }
.producto__insignia-prox { position: absolute; top: 12px; left: 12px; background: #bd7ce9; color: #fff; font: 700 .78rem/1 Rajdhani, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .7rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }