/* ==========================================================================
   RFS Loto — Landing
   Hoja de estilos principal
   Orden: 1) Tokens  2) Base  3) Utilidades  4) Componentes  5) Secciones
          6) Responsive  7) Accesibilidad y movimiento
   ========================================================================== */

/* ==========================================================================
   1) TOKENS
   ========================================================================== */

:root {
  /* --- Color de marca ---------------------------------------------------- */
  /* Paleta "SaaS (General)" de la base de datos de la skill:
     azul de confianza + acento naranja. El naranja ya viene corregido de
     #F97316 a #EA580C para cumplir el mínimo de 3:1 de WCAG. */
  --color-principal: #2563EB;
  --color-principal-oscuro: #1E40AF;
  --color-secundario: #3B82F6;
  --color-acento: #EA580C;

  /* Mismo naranja, oscurecido para superficies que llevan texto blanco encima.
     Con el #EA580C el blanco solo daba 3.56:1; este da 5.18:1. El acento
     original se conserva para texto grande e iconos, donde basta con 3:1. */
  --color-acento-fondo: #C2410C;

  /* Verde para iconos y elementos gráficos (3.3:1 sobre blanco, cumple el
     mínimo de 3:1 que piden los elementos no textuales). */
  --color-exito: #16A34A;

  /* Verde para TEXTO sobre fondos verdes claros. El anterior daba 3.15:1,
     por debajo del 4.5:1 exigido; este da 4.79:1. */
  --color-exito-texto: #15803D;

  /* --- Texto y superficies ----------------------------------------------- */
  --color-texto: #111827;
  --color-texto-secundario: #64748B;
  --color-fondo: #FFFFFF;
  --color-fondo-suave: #F8FAFC;
  --color-borde: #E2E8F0;

  /* --- Superficies oscuras (secciones de contraste) ----------------------- */
  --color-oscuro: #0F172A;
  --color-oscuro-suave: #1E293B;
  --color-texto-invertido: #FFFFFF;
  --color-texto-invertido-suave: #93C5FD;

  /* --- Derivados del color principal (evita repetir rgba a mano) ---------- */
  --principal-rgb: 37, 99, 235;
  --principal-08: rgba(var(--principal-rgb), 0.08);
  --principal-12: rgba(var(--principal-rgb), 0.12);
  --principal-20: rgba(var(--principal-rgb), 0.20);

  /* --- Degradados (solo portada, botones y CTA) --------------------------- */
  /* El degradado va de azul a azul MÁS oscuro, no más claro: el texto blanco
     encima debe cumplir 4.5:1 en todo el recorrido. Con #3B82F6 al final el
     borde del botón caía a 3.68:1. Ahora el mínimo es 5.17:1. */
  --degradado-principal: linear-gradient(135deg, var(--color-principal) 0%, #1D4ED8 100%);
  --degradado-portada: radial-gradient(1200px 600px at 15% -10%, rgba(59, 130, 246, 0.12), transparent 60%),
                       radial-gradient(900px 500px at 90% 0%, rgba(37, 99, 235, 0.09), transparent 55%);
  --degradado-oscuro: linear-gradient(160deg, var(--color-oscuro) 0%, var(--color-oscuro-suave) 100%);

  /* --- Tipografía --------------------------------------------------------- */
  --fuente-titulos: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida: el valor mínimo es el objetivo móvil, el máximo el de escritorio */
  --texto-portada: clamp(2.375rem, 4.2vw + 1.1rem, 4.75rem);   /* 38px → 76px */
  --texto-seccion: clamp(2.125rem, 2.4vw + 1.1rem, 3.125rem);  /* 34px → 50px */
  --texto-subtitulo: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);   /* 20px → 24px */
  --texto-normal: 1.0625rem;                                    /* 17px */
  --texto-pequeno: 0.875rem;                                    /* 14px */

  /* --- Espaciado ---------------------------------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --padding-seccion: clamp(4rem, 7vw, 7rem);

  /* --- Formas --------------------------------------------------------------*/
  --radio-tarjeta: 22px;
  --radio-tarjeta-grande: 28px;
  --radio-pequeno: 14px;
  --radio-capsula: 999px;

  /* --- Sombras (suaves, nunca negro puro) --------------------------------- */
  --sombra-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --sombra-md: 0 12px 30px rgba(15, 23, 42, 0.07);
  --sombra-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
  --sombra-destacada: 0 28px 64px rgba(var(--principal-rgb), 0.18);

  /* --- Movimiento --------------------------------------------------------- */
  --transicion-rapida: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-lenta: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout -------------------------------------------------------------- */
  --altura-encabezado: 76px;
  --ancho-maximo: 1200px;
}

/* ==========================================================================
   2) BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Compensa el encabezado fijo al saltar con anclas */
  scroll-padding-top: calc(var(--altura-encabezado) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-normal);
  line-height: 1.65;
  color: var(--color-texto);
  background-color: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-texto);
  margin-top: 0;
}

p { margin-top: 0; }

a {
  color: var(--color-principal);
  text-decoration: none;
  transition: color var(--transicion-rapida);
}

a:hover { color: var(--color-principal-oscuro); }

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

ul { margin-top: 0; }

strong { font-weight: 700; }

/* Foco visible y consistente en toda la página (requisito de accesibilidad) */
:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Enlace de salto para lectores de pantalla y navegación por teclado */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--color-principal);
  color: #fff;
  border-radius: 0 0 var(--radio-pequeno) 0;
  font-weight: 600;
}
.salto-contenido:focus {
  left: 0;
  color: #fff;
}

/* ==========================================================================
   3) UTILIDADES
   ========================================================================== */

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

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

.seccion--suave { background-color: var(--color-fondo-suave); }

.seccion--oscura {
  background: var(--degradado-oscuro);
  color: var(--color-texto-invertido);
  position: relative;
  overflow: hidden;
}

.seccion--oscura h2,
.seccion--oscura h3 { color: var(--color-texto-invertido); }

.seccion--oscura p { color: rgba(255, 255, 255, 0.72); }

/* Encabezado de sección reutilizable */
.encabezado-seccion {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.encabezado-seccion h2 {
  font-size: var(--texto-seccion);
  margin-bottom: var(--space-sm);
}

.encabezado-seccion p {
  font-size: var(--texto-subtitulo);
  color: var(--color-texto-secundario);
  margin-bottom: 0;
}

.seccion--oscura .encabezado-seccion p { color: rgba(255, 255, 255, 0.7); }

/* Etiqueta / píldora superior */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radio-capsula);
  background: var(--principal-08);
  border: 1px solid var(--principal-20);
  color: var(--color-principal);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-md);
}

.etiqueta i { font-size: 1rem; }

.seccion--oscura .etiqueta {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-texto-invertido-suave);
}

.texto-degradado {
  background: var(--degradado-principal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.texto-secundario { color: var(--color-texto-secundario); }

.texto-acento { color: var(--color-acento); }

.texto-exito { color: var(--color-exito); }

/* Solo para lectores de pantalla */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4) COMPONENTES
   ========================================================================== */

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 48px mínimo de alto: requisito táctil */
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radio-capsula);
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transicion-rapida),
              box-shadow var(--transicion-rapida),
              background-color var(--transicion-rapida),
              border-color var(--transicion-rapida),
              color var(--transicion-rapida);
}

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

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

.boton--principal {
  background: var(--degradado-principal);
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--principal-rgb), 0.28);
}
.boton--principal:hover {
  color: #fff;
  box-shadow: 0 16px 34px rgba(var(--principal-rgb), 0.36);
}

.boton--secundario {
  background: var(--color-fondo);
  color: var(--color-texto);
  border-color: var(--color-borde);
  box-shadow: var(--sombra-sm);
}
.boton--secundario:hover {
  color: var(--color-principal);
  border-color: var(--principal-20);
  box-shadow: var(--sombra-md);
}

.boton--contorno {
  background: transparent;
  color: var(--color-principal);
  border-color: var(--principal-20);
}
.boton--contorno:hover {
  background: var(--principal-08);
  color: var(--color-principal-oscuro);
}

.boton--claro {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.boton--claro:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

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

.boton--compacto {
  /* 48px es el mínimo táctil; por debajo el botón se vuelve difícil de acertar */
  min-height: 48px;
  padding: 12px 22px;
  font-size: 0.9375rem;
}

/* --- Tarjeta base --------------------------------------------------------- */

.tarjeta {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-sm);
  padding: var(--space-md);
  height: 100%;
  transition: transform var(--transicion),
              box-shadow var(--transicion),
              border-color var(--transicion);
}

/* --- Botón flotante de WhatsApp ------------------------------------------- */

.whatsapp-flotante {
  position: fixed;
  right: 18px;
  /* Se eleva sobre la barra de navegación de los móviles */
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 20px 0 16px;
  border-radius: var(--radio-capsula);
  /* Verde de WhatsApp oscurecido a propósito: el #25D366 de marca solo da
     1.98:1 contra el texto y el icono blancos, muy por debajo del mínimo.
     Este tono da 5.3:1 y conserva la lectura de "botón de WhatsApp". */
  background: #0B7C3D;
  color: #fff;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 12px 30px rgba(11, 124, 61, 0.34);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida),
              background-color var(--transicion-rapida);
}

.whatsapp-flotante:hover {
  background: #0A6B34;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(11, 124, 61, 0.44);
}

.whatsapp-flotante i { font-size: 1.6rem; }

/* ==========================================================================
   5) SECCIONES
   ========================================================================== */

/* --- 5.1 Encabezado ------------------------------------------------------- */

.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  height: var(--altura-encabezado);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

/* La clase la añade main.js al hacer scroll */
.encabezado.esta-desplazado {
  border-bottom-color: var(--color-borde);
  box-shadow: var(--sombra-sm);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--altura-encabezado);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-texto);
  flex-shrink: 0;
}
.marca:hover { color: var(--color-texto); }

.marca__logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--degradado-principal);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(var(--principal-rgb), 0.28);
}

/* Logotipo subido desde el panel */
.marca__imagen {
  display: block;
  height: 42px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Sobre fondo oscuro no se sabe de qué color es el logotipo del cliente,
   así que se le da una base clara para que siempre se distinga. */
.pie .marca__imagen,
.panel__lateral .marca__imagen,
.seccion--oscura .marca__imagen {
  background: #fff;
  padding: 5px 9px;
  border-radius: 10px;
}

.marca__nombre {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.marca__descriptor {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}

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

.navegacion a {
  padding: 10px 14px;
  border-radius: var(--radio-pequeno);
  color: var(--color-texto-secundario);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.navegacion a:hover {
  color: var(--color-principal);
  background: var(--principal-08);
}

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

.boton-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: 1.4rem;
  cursor: pointer;
}

/* Menú lateral en móvil (offcanvas de Bootstrap) */
.menu-movil { width: min(320px, 86vw); }

/* Bootstrap entrega el botón de cerrar a 33px; lo llevamos al mínimo táctil.
   Sus márgenes negativos compensaban un relleno que aquí ya no existe, así que
   se sustituyen por el `auto` que lo manda a la esquina. */
.menu-movil .btn-close {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0 0 0 auto;
  background-size: 15px;
  opacity: 0.7;
}

.menu-movil .btn-close:hover { opacity: 1; }

.menu-movil .offcanvas-body { display: flex; flex-direction: column; gap: 4px; }

.menu-movil a.menu-movil__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: var(--radio-pequeno);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.0625rem;
}

.menu-movil a.menu-movil__enlace:hover { background: var(--color-fondo-suave); }

.menu-movil__pie { margin-top: auto; padding-top: var(--space-md); display: grid; gap: 10px; }

/* --- 5.2 Portada ---------------------------------------------------------- */

.portada {
  position: relative;
  padding-top: calc(var(--altura-encabezado) + var(--space-xl));
  padding-bottom: var(--padding-seccion);
  background-image: var(--degradado-portada);
  overflow: hidden;
}

.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.portada h1 {
  font-size: var(--texto-portada);
  margin-bottom: var(--space-md);
}

.portada__descripcion {
  font-size: var(--texto-subtitulo);
  color: var(--color-texto-secundario);
  max-width: 34em;
  margin-bottom: var(--space-lg);
}

.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: var(--space-lg);
}

.portada__indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-borde);
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.portada__indicadores li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

.portada__indicadores i {
  color: var(--color-exito);
  font-size: 1.15rem;
}

/* --- 5.3 Maqueta del panel (representación en HTML/CSS, sin datos reales) -- */

.maqueta { position: relative; padding-bottom: 24px; }

.maqueta__ventana {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta-grande);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}

.maqueta__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-fondo-suave);
  border-bottom: 1px solid var(--color-borde);
}

.maqueta__punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #E2E8F0;
}
.maqueta__punto:nth-child(1) { background: #FCA5A5; }
.maqueta__punto:nth-child(2) { background: #FCD34D; }
.maqueta__punto:nth-child(3) { background: #86EFAC; }

.maqueta__url {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: var(--radio-capsula);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  font-size: 11px;
  color: var(--color-texto-secundario);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.maqueta__cuerpo { padding: 18px; }

.maqueta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.maqueta__titulo strong {
  font-family: var(--fuente-titulos);
  font-size: 0.9375rem;
}

.maqueta__insignia {
  padding: 3px 10px;
  border-radius: var(--radio-capsula);
  background: var(--principal-08);
  color: var(--color-principal);
  font-size: 11px;
  font-weight: 700;
}

.maqueta__indicadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.indicador-mini {
  padding: 12px;
  border-radius: var(--radio-pequeno);
  border: 1px solid var(--color-borde);
  background: var(--color-fondo-suave);
}

.indicador-mini__etiqueta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-texto-secundario);
  margin-bottom: 4px;
}

.indicador-mini__valor {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.indicador-mini--vendidos .indicador-mini__valor { color: var(--color-exito); }
.indicador-mini--apartados .indicador-mini__valor { color: var(--color-acento); }
.indicador-mini--disponibles .indicador-mini__valor { color: var(--color-principal); }

.indicador-mini--vendidos i { color: var(--color-exito); }
.indicador-mini--apartados i { color: var(--color-acento); }
.indicador-mini--disponibles i { color: var(--color-principal); }

/* Barra de avance de la boletera */
.maqueta__avance { margin-bottom: 16px; }

.maqueta__avance-etiquetas {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-texto-secundario);
  margin-bottom: 6px;
}

.barra-avance {
  height: 8px;
  border-radius: var(--radio-capsula);
  background: var(--color-borde);
  overflow: hidden;
  display: flex;
}

.barra-avance__parte--vendido { background: var(--color-exito); }
.barra-avance__parte--apartado { background: var(--color-acento); }

/* Lista de clientes con estado de pago */
.maqueta__lista { display: grid; gap: 8px; }

.fila-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
}

.fila-cliente__inicial {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--principal-08);
  color: var(--color-principal);
  font-size: 12px;
  font-weight: 700;
}

.fila-cliente__datos { min-width: 0; flex: 1; }

.fila-cliente__nombre {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fila-cliente__boletos {
  display: block;
  font-size: 11px;
  color: var(--color-texto-secundario);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.estado {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radio-capsula);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.estado--pagado { background: #DCFCE7; color: #15803D; }
.estado--apartado { background: #FEF3C7; color: #B45309; }
.estado--parcial { background: #DBEAFE; color: #1D4ED8; }

/* Vista móvil superpuesta */
.maqueta__movil {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 152px;
  border-radius: 24px;
  border: 6px solid #1F2937;
  background: var(--color-fondo);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.maqueta__movil-encabezado {
  padding: 10px 12px;
  background: var(--degradado-principal);
  color: #fff;
}

.maqueta__movil-encabezado span {
  display: block;
  font-size: 9px;
  opacity: 0.85;
}

.maqueta__movil-encabezado strong {
  font-family: var(--fuente-titulos);
  font-size: 12px;
}

.maqueta__movil-cuerpo { padding: 10px; }

/* Cuadrícula de números de la boletera */
.rejilla-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rejilla-numeros span {
  padding: 4px 0;
  border-radius: 5px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 700;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  background: var(--color-fondo-suave);
  color: var(--color-texto-secundario);
  border: 1px solid var(--color-borde);
}

.rejilla-numeros span.esta-vendido {
  background: #DCFCE7;
  color: #15803D;
  border-color: #BBF7D0;
}

.rejilla-numeros span.esta-apartado {
  background: #FEF3C7;
  color: #B45309;
  border-color: #FDE68A;
}

/* Notificación de pago confirmado */
.notificacion-pago {
  position: absolute;
  left: -10px;
  top: 22%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-md);
  max-width: 230px;
}

.notificacion-pago__icono {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #DCFCE7;
  color: var(--color-exito);
  font-size: 1.05rem;
}

.notificacion-pago strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 12.5px;
  line-height: 1.3;
}

.notificacion-pago small {
  font-size: 11px;
  color: var(--color-texto-secundario);
}

/* --- 5.4 Franja de indicadores -------------------------------------------- */

.franja-indicadores { padding-block: var(--space-lg); background: var(--color-fondo); }

.franja-indicadores__tarjeta {
  display: grid;
  /* auto-fit en vez de un número fijo: el número de planes es variable */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta-grande);
  box-shadow: var(--sombra-md);
  overflow: hidden;
}

.indicador {
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  border-right: 1px solid var(--color-borde);
  min-width: 0;
}

.indicador:last-child { border-right: 0; }

.indicador__valor {
  font-family: var(--fuente-titulos);
  /* Reserva: se usa en navegadores sin unidades de contenedor */
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 6px;
  /* Un número como 1,000,000 no debe partirse en dos renglones */
  white-space: nowrap;
  background: var(--degradado-principal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* El tamaño se calcula contra el ancho de SU celda, no del viewport: así
   «1,000,000» cabe entero aunque haya muchos indicadores en la franja.
   Antes se salía de la celda y quedaba cortado como «1,000,00». */
@supports (container-type: inline-size) {
  .indicador { container-type: inline-size; }

  .indicador__valor { font-size: min(2.5rem, 17cqi); }
}

.indicador__texto {
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario);
  margin: 0;
  line-height: 1.45;
}

/* --- 5.5 Problemas y solución --------------------------------------------- */

.rejilla-problemas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: var(--space-xl);
}

.problema {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

.problema i {
  color: #DC2626;
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.solucion {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radio-tarjeta-grande);
  background: var(--degradado-principal);
  color: #fff;
  box-shadow: var(--sombra-destacada);
}

.solucion h3 {
  color: #fff;
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.125rem);
  margin: 0;
  max-width: 22em;
}

.solucion i { font-size: 2.25rem; opacity: 0.9; }

/* --- 5.6 Funciones -------------------------------------------------------- */

.rejilla-funciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.funcion { padding: var(--space-md) var(--space-md) calc(var(--space-md) + 4px); }

.funcion:hover {
  transform: translateY(-4px);
  border-color: var(--principal-20);
  box-shadow: var(--sombra-lg);
}

.funcion__icono {
  width: 52px;
  height: 52px;
  border-radius: var(--radio-pequeno);
  display: grid;
  place-items: center;
  background: var(--principal-08);
  color: var(--color-principal);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  transition: background-color var(--transicion), color var(--transicion);
}

.funcion:hover .funcion__icono {
  background: var(--degradado-principal);
  color: #fff;
}

.funcion h3 {
  font-size: 1.1875rem;
  margin-bottom: 8px;
}

.funcion p {
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
  margin: 0;
}

/* --- 5.7 Proceso de contratación ------------------------------------------ */

.rejilla-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.paso {
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radio-tarjeta);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--transicion), background-color var(--transicion);
}

.paso:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.10);
}

.paso__numero {
  font-family: var(--fuente-titulos);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-acento);
  margin-bottom: 12px;
}

.paso h3 {
  font-size: 1.1875rem;
  margin-bottom: 8px;
}

.paso p { font-size: 0.9375rem; margin: 0; }

.pasos__nota {
  text-align: center;
  font-size: var(--texto-pequeno);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* --- 5.7b Asistente de contratación --------------------------------------- */

.asistente .modal-content {
  border: 0;
  border-radius: var(--radio-tarjeta-grande);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.24);
}

.asistente__encabezado {
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 0;
}

.asistente .modal-title {
  font-size: 1.3125rem;
  margin-bottom: 2px;
}

.asistente__indicador {
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--color-texto-secundario);
  margin: 0;
}

/* El botón de cerrar de Bootstrap llega a 33px; se sube al mínimo táctil.
   El `auto` de la izquierda es lo único que lo manda a la esquina: desde la
   5.3 el .modal-header ya no lleva justify-content, así que anular el margen
   entero lo dejaba pegado al título. */
.asistente .btn-close {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0 0 0 auto;
  background-size: 15px;
  opacity: 0.7;
  flex-shrink: 0;
}

.asistente .btn-close:hover { opacity: 1; }

/* Barra de avance entre pasos */
.asistente__barra {
  height: 4px;
  background: var(--color-borde);
  overflow: hidden;
}

.asistente__barra span {
  display: block;
  height: 100%;
  background: var(--degradado-principal);
  transition: width var(--transicion);
}

.asistente__cuerpo { padding: var(--space-md); }

.asistente__pregunta {
  display: block;
  float: none;
  width: auto;
  font-family: var(--fuente-titulos);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-texto);
  margin-bottom: var(--space-sm);
  padding: 0;
}

.asistente fieldset { border: 0; padding: 0; margin: 0; }

.asistente__opciones { display: grid; gap: 10px; }

/* Tarjeta seleccionable de plan o periodo */
.opcion {
  position: relative;
  display: block;
  cursor: pointer;
}

/* El radio real queda invisible pero sigue siendo el que recibe el foco */
.opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opcion__cuerpo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px var(--space-sm);
  /* Muy por encima del mínimo táctil de 48px */
  min-height: 64px;
  padding: 14px 16px;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.opcion:hover .opcion__cuerpo { border-color: var(--principal-20); }

.opcion input:checked + .opcion__cuerpo {
  border-color: var(--color-principal);
  background: var(--principal-08);
}

/* El foco del teclado tiene que verse aunque el radio esté oculto */
.opcion input:focus-visible + .opcion__cuerpo {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}

.opcion__titulo {
  grid-column: 1;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1rem;
}

.opcion__detalle {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario);
}

.opcion__precio {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-principal);
  text-align: right;
  white-space: nowrap;
}

/* --- Buscador de dominio -------------------------------------------------- */

.asistente__ayuda-paso {
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Complementos del asistente
   -------------------------------------------------------------------------- */

.complementos {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-sm);
}

/* Mismo patrón que .opcion: la casilla real se oculta y se dibuja una propia,
   para poder teñir toda la tarjeta al marcarla sin depender de :has(). */
.complemento {
  position: relative;
  display: block;
  cursor: pointer;
}

.complemento input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.complemento__caja {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 14px 16px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.complemento:hover .complemento__caja { border-color: var(--principal-20); }

.complemento input:checked + .complemento__caja {
  border-color: var(--color-principal);
  background: var(--principal-08);
}

.complemento input:focus-visible + .complemento__caja {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}

/* La palomita: vacía hasta que se marca */
.complemento__marca {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  border: 2px solid var(--color-borde);
  border-radius: 6px;
  background: var(--color-fondo);
  color: transparent;
  font-size: 13px;
  transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.complemento input:checked + .complemento__caja .complemento__marca {
  border-color: var(--color-principal);
  background: var(--color-principal);
  color: #fff;
}

/* Los obligatorios no se pueden desmarcar: se enseñan como un hecho */
.complemento--fijo { cursor: default; }

.complemento--fijo .complemento__caja { background: var(--color-fondo-suave); }

.complemento--fijo .complemento__marca {
  border-color: var(--color-exito-texto);
  background: var(--color-exito-texto);
  color: #fff;
}

.complemento__cuerpo {
  flex: 1;
  min-width: 0;
}

.complemento__nombre {
  display: block;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.9375rem;
}

.complemento__insignia {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radio-capsula);
  background: var(--principal-08);
  color: var(--color-principal-oscuro);
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

.complemento__detalle {
  display: block;
  margin-top: 3px;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario);
}

/* Sobre el fondo azul de una tarjeta marcada, el gris de siempre se queda en
   4.28:1. Se oscurece solo ahí para no bajar de 4.5:1. */
.complemento input:checked + .complemento__caja .complemento__detalle,
.opcion input:checked + .opcion__cuerpo .opcion__detalle {
  color: #475569;
}

.complemento__precio {
  flex-shrink: 0;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.complemento__precio.es-gratis { color: var(--color-exito-texto); }

.complementos__total {
  padding: 12px 16px;
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo-suave);
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
  margin: 0;
}

.complementos__total strong {
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  color: var(--color-texto);
}

/* Explicación de qué es un dominio, con ejemplo. Va antes del buscador porque
   es la duda más común: mucha gente escribe aquí su correo. */
.explica-dominio {
  padding: var(--space-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo-suave);
  margin-bottom: var(--space-sm);
}

.explica-dominio__texto {
  font-size: 0.9375rem;
  margin-bottom: 12px;
}

/* Se ve como una barra de direcciones para que el ejemplo se reconozca solo */
.explica-dominio__ejemplo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-capsula);
  background: var(--color-fondo);
  font-family: var(--fuente-titulos);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-texto-secundario);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.explica-dominio__ejemplo > i {
  flex-shrink: 0;
  color: var(--color-texto-secundario);
}

.explica-dominio__parte {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--principal-08);
  color: var(--color-principal-oscuro);
}

.explica-dominio__pie {
  font-size: 12.5px;
  color: var(--color-texto-secundario);
  margin-bottom: 0;
}

/* Etiqueta de campo suelta, para cuando el control no cabe dentro de .campo */
.etiqueta-campo {
  display: block;
  font-size: var(--texto-pequeno);
  font-weight: 700;
  margin-bottom: 6px;
}

.buscador-dominio {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

.buscador-dominio__campo {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.buscador-dominio__campo:focus-within {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px var(--principal-20);
}

.buscador-dominio__campo input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 4px 12px 14px;
  border: 0;
  background: transparent;
  /* 16px evita el zoom automático de iOS al enfocar */
  font-size: 16px;
  font-family: var(--fuente-texto);
  color: var(--color-texto);
}

.buscador-dominio__campo input:focus { outline: none; }

/* La extensión es fija: se muestra pegada al campo, no se escribe */
.buscador-dominio__tld {
  padding-right: 14px;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-texto-secundario);
  white-space: nowrap;
}

.buscador-dominio .boton { flex-shrink: 0; }

.buscador-dominio__estado {
  display: block;
  min-height: 1.4em;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}

.buscador-dominio__estado.es-cargando { color: var(--color-texto-secundario); }
.buscador-dominio__estado.es-exito    { color: var(--color-exito-texto); }
.buscador-dominio__estado.es-ocupado  { color: #B24308; }
.buscador-dominio__estado.es-error    { color: #B91C1C; }

/* Sugerencias cuando el nombre está ocupado */
.sugerencias { margin-bottom: var(--space-sm); }

.sugerencias__titulo {
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--color-texto-secundario);
  margin-bottom: 8px;
}

.sugerencias__lista { display: flex; flex-wrap: wrap; gap: 8px; }

.sugerencia {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--principal-20);
  border-radius: var(--radio-capsula);
  background: var(--principal-08);
  color: var(--color-principal);
  font-family: var(--fuente-titulos);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

.sugerencia:hover {
  background: var(--color-principal);
  color: #fff;
}

/* Dominio ya elegido */
.dominio-elegido {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #BBF7D0;
  border-radius: var(--radio-pequeno);
  background: #F0FDF4;
  margin-bottom: var(--space-sm);
}

.dominio-elegido[hidden] { display: none; }

.dominio-elegido > i {
  font-size: 1.35rem;
  color: var(--color-exito-texto);
  flex-shrink: 0;
}

.dominio-elegido strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  color: var(--color-texto);
}

.dominio-elegido small {
  font-size: var(--texto-pequeno);
  color: var(--color-exito-texto);
  font-weight: 600;
}

.dominio-elegido span { flex: 1; min-width: 0; }

.dominio-elegido__quitar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radio-pequeno);
  background: transparent;
  color: var(--color-texto-secundario);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

.dominio-elegido__quitar:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-texto);
}

/* El dominio que la persona ya tiene: aparece al marcar la casilla */
.dominio-propio {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* "Ya tengo dominio" */
.casilla-omitir {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo-suave);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.casilla-omitir input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-principal);
}

@media (max-width: 479.98px) {
  .buscador-dominio { flex-direction: column; }
  .buscador-dominio .boton { width: 100%; }
}

/* Resumen del último paso */
.resumen {
  margin: 0 0 var(--space-md);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  overflow: hidden;
}

.resumen__fila {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr;
  gap: var(--space-sm);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-borde);
}

.resumen__fila:last-child { border-bottom: 0; }

.resumen__fila dt {
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--color-texto-secundario);
}

.resumen__fila dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: right;
}

.resumen__fila--total {
  background: var(--principal-08);
  align-items: center;
}

.resumen__fila--total dd { font-size: 1.25rem; }

.resumen__extra {
  display: block;
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--color-texto-secundario);
}

.resumen__antes {
  display: block;
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--color-texto-secundario);
  text-decoration: line-through;
  text-decoration-color: rgba(100, 116, 139, 0.75);
}

.resumen__ahorro {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-exito-texto);
}

.asistente__nota {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  font-size: 12.5px;
  color: var(--color-texto-secundario);
  margin: 0;
}

.asistente__nota i { color: var(--color-principal); font-size: 1rem; flex-shrink: 0; }

.asistente__pie {
  gap: 10px;
  padding: var(--space-md);
  border-top: 1px solid var(--color-borde);
}

/* El botón que avanza siempre queda a la derecha */
.asistente__pie [data-asistente-siguiente],
.asistente__pie .asistente__enviar { margin-left: auto; }

.asistente__enviar[hidden],
.asistente__pie [hidden] { display: none !important; }

@media (max-width: 575.98px) {
  .asistente__pie { flex-direction: column-reverse; }
  .asistente__pie .boton { width: 100%; margin-left: 0; }

  .opcion__cuerpo { grid-template-columns: 1fr; }
  .opcion__precio { grid-column: 1; grid-row: auto; text-align: left; }
}

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

/* Selector de periodo */
.selector-periodo {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radio-capsula);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-sm);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.selector-periodo::-webkit-scrollbar { display: none; }

.selector-periodo__opcion {
  /* 48px de zona táctil */
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radio-capsula);
  background: transparent;
  color: var(--color-texto-secundario);
  font-family: var(--fuente-titulos);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

.selector-periodo__opcion:hover { color: var(--color-principal); }

.selector-periodo__opcion[aria-selected="true"] {
  background: var(--degradado-principal);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--principal-rgb), 0.26);
}

.rejilla-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  max-width: 940px;
  margin-inline: auto;
  align-items: start;
}

/* Con tres o más planes se suelta el ancho para que quepan en una fila */
.rejilla-planes--muchos { max-width: none; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radio-tarjeta-grande);
}

.plan--destacado {
  border: 2px solid var(--color-principal);
  box-shadow: var(--sombra-destacada);
}

/* Contenedor de las insignias que van montadas sobre el borde superior */
.plan__insignias {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: calc(100% - 24px);
}

.plan__insignia {
  padding: 6px 18px;
  border-radius: var(--radio-capsula);
  background: var(--degradado-principal);
  color: #fff;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(var(--principal-rgb), 0.3);
}

.plan__nombre {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.plan__descripcion {
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
  min-height: 3em;
  margin-bottom: var(--space-md);
}

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

.plan__importe {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 3vw + 1rem, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  /* La transición suave la controla la clase .esta-cambiando desde main.js */
  transition: opacity var(--transicion), transform var(--transicion);
}

.plan__moneda {
  font-family: var(--fuente-titulos);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-texto-secundario);
}

.plan__periodicidad {
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
  margin-bottom: 10px;
}

/* --- Oferta --------------------------------------------------------------- */

/* Precio de lista tachado, encima del precio rebajado */
.plan__antes {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 26px;
  margin-bottom: 2px;
}

.plan__antes[hidden] { display: none; }

.plan__antes-importe {
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-texto-secundario);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  /* El tachado en gris medio sobre blanco cumple 4.76:1 */
  text-decoration-color: rgba(100, 116, 139, 0.75);
}

.plan__descuento {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radio-capsula);
  /* Naranja de acento oscurecido: 4.6:1 sobre su fondo claro */
  background: #FFF1E7;
  border: 1px solid #FBD5BB;
  color: #B24308;
  font-family: var(--fuente-titulos);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Insignia naranja de oferta. Convive con la insignia normal del plan:
   ambas van dentro de .plan__insignias, que las centra sobre el borde. */
.plan__insignia--oferta {
  background: var(--color-acento-fondo);
  box-shadow: 0 8px 20px rgba(194, 65, 12, 0.3);
}

.plan__insignia--oferta[hidden] { display: none; }

/* Estado momentáneo al cambiar de periodo (cambio suave, sin brincos) */
.esta-cambiando {
  opacity: 0;
  transform: translateY(-6px);
}

.plan__ahorro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: var(--radio-capsula);
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: var(--color-exito-texto);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.plan__ahorro[hidden] { display: none; }

/* Lo que distingue a este plan: sale de las filas del cuadro comparativo que
   no valen lo mismo en todos los planes. Etiqueta a la izquierda, valor a la
   derecha, para que dos tarjetas lado a lado se comparen renglón con renglón. */
.plan__datos {
  margin: var(--space-md) 0 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo-suave);
  overflow: hidden;
}

.plan__dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-borde);
}

.plan__dato:last-child { border-bottom: 0; }

.plan__dato dt {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--color-texto-secundario);
}

.plan__dato dt i {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--color-principal);
}

.plan__dato dd {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 0.9375rem;
  text-align: right;
}

.plan__dato--si dt i    { color: var(--color-exito-texto); }
.plan__dato-valor--si   { color: var(--color-exito-texto); }

/* Lo que este plan no trae se dice, no se calla: es la razón de subir de plan.
   No se aclara más el gris porque #64748B ya es el más claro que aguanta
   4.5:1 sobre este fondo; la diferencia la marca el icono y el peso. */
.plan__dato--no dt i  { color: var(--color-texto-secundario); }
.plan__dato-valor--no { color: var(--color-texto-secundario); font-weight: 600; }

.plan__titulo-lista {
  margin: var(--space-md) 0 var(--space-sm);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-pequeno);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}

.plan__caracteristicas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
  flex: 1;
}

.plan__caracteristicas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
}

.plan__caracteristicas i {
  color: var(--color-exito);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.planes__nota {
  text-align: center;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

/* --- 5.9 Tabla comparativa ------------------------------------------------ */

.envoltura-tabla {
  /* Único desplazamiento horizontal permitido en la página */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* `overflow-x: auto` por sí solo NO impedía que el ancho de la tabla
     (min-width: 560px) se sumara al ancho del documento: en móvil aparecía
     scroll horizontal en toda la página y el botón flotante de WhatsApp,
     posicionado contra el borde derecho, se salía de la pantalla.
     `contain: paint` obliga al navegador a recortar de verdad en esta caja.
     La tabla sigue desplazándose dentro de su propio marco. */
  contain: paint;
  max-width: 100%;

  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
  box-shadow: var(--sombra-sm);
}

.tabla-comparativa {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  margin: 0;
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
  font-size: 0.9375rem;
}

.tabla-comparativa thead th {
  background: var(--color-fondo-suave);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.tabla-comparativa thead th:not(:first-child) { text-align: center; }

.tabla-comparativa tbody td:not(:first-child) { text-align: center; }

.tabla-comparativa tbody tr:last-child th,
.tabla-comparativa tbody tr:last-child td { border-bottom: 0; }

.tabla-comparativa tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.6); }

.tabla-comparativa tbody th {
  font-weight: 600;
  color: var(--color-texto);
}

/* Columna del plan de alto volumen resaltada */
.tabla-comparativa .columna-destacada { background: var(--principal-08); }

.tabla-comparativa thead .columna-destacada { background: var(--principal-12); color: var(--color-principal); }

.marca-si {
  color: var(--color-exito);
  font-size: 1.25rem;
}

.marca-no {
  color: #94A3B8;
  font-size: 1.25rem;
}

.valor-tabla {
  font-family: var(--fuente-titulos);
  font-weight: 800;
}

.aviso-desplazamiento {
  display: none;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario);
}

/* --- 5.10 Preguntas frecuentes -------------------------------------------- */

.preguntas { max-width: 860px; margin-inline: auto; }

.preguntas .accordion-item {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno) !important;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--color-fondo);
}

.preguntas .accordion-button {
  min-height: 60px;
  padding: 18px 20px;
  font-family: var(--fuente-titulos);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-texto);
  background: var(--color-fondo);
  box-shadow: none;
}

.preguntas .accordion-button:not(.collapsed) {
  background: var(--principal-08);
  color: var(--color-principal);
}

.preguntas .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.preguntas .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 1.1rem;
}

.preguntas .accordion-body {
  padding: 4px 20px 20px;
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
}

.preguntas .accordion-body p:last-child { margin-bottom: 0; }

/* --- 5.11 Cierre y formulario --------------------------------------------- */

.cierre { text-align: center; }

.cierre h2 {
  font-size: var(--texto-seccion);
  margin-bottom: var(--space-sm);
}

.cierre p {
  font-size: var(--texto-subtitulo);
  max-width: 40em;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.cierre__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.formulario {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-lg);
  border-radius: var(--radio-tarjeta-grande);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-lg);
}

.campo { margin-bottom: var(--space-sm); }

.campo label {
  display: block;
  font-size: var(--texto-pequeno);
  font-weight: 700;
  margin-bottom: 6px;
}

.campo .obligatorio { color: #DC2626; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  background: var(--color-fondo);
  /* 16px evita el zoom automático de iOS al enfocar */
  font-size: 16px;
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.campo textarea { min-height: 120px; resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px var(--principal-20);
}

.campo__ayuda {
  display: block;
  font-size: 12.5px;
  color: var(--color-texto-secundario);
  margin-top: 5px;
}

/* El error se muestra junto al campo, no agrupado arriba */
.campo__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #DC2626;
  margin-top: 5px;
}

.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: #DC2626; }

.campo.tiene-error .campo__error { display: flex; }

/* Trampa antispam: invisible para personas, accesible para bots */
.campo-trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.formulario__aviso {
  font-size: 12.5px;
  color: var(--color-texto-secundario);
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

.formulario__respuesta {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radio-pequeno);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.formulario__respuesta.esta-visible { display: flex; }

.formulario__respuesta--exito {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #15803D;
}

.formulario__respuesta--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
}

/* --- 5.12 Pie de página --------------------------------------------------- */

.pie {
  background: var(--color-oscuro);
  color: rgba(255, 255, 255, 0.62);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-md);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pie .marca { color: #fff; }
.pie .marca:hover { color: #fff; }
.pie .marca__descriptor { color: var(--color-texto-invertido-suave); }

.pie__descripcion {
  font-size: 0.9375rem;
  margin-top: var(--space-sm);
  margin-bottom: 0;
  max-width: 34ch;
}

.pie h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }

.pie a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9375rem;
}

.pie a:hover { color: #fff; }

.pie__contacto li { display: flex; align-items: center; gap: 9px; font-size: 0.9375rem; }

.pie__contacto i { color: var(--color-texto-invertido-suave); }

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--texto-pequeno);
}

.pie__legales { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* --- 5.13 Página 404 ------------------------------------------------------ */

.pagina-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background-image: var(--degradado-portada);
}

.pagina-error__codigo {
  font-family: var(--fuente-titulos);
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--degradado-principal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-sm);
}

/* --- 5.14 Páginas legales ------------------------------------------------- */

.documento {
  max-width: 800px;
  margin-inline: auto;
  padding-top: calc(var(--altura-encabezado) + var(--space-xl));
  padding-bottom: var(--space-2xl);
}

.documento h1 { font-size: clamp(2.125rem, 3vw + 1rem, 3rem); margin-bottom: var(--space-sm); }

.documento h2 {
  font-size: 1.5rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.documento p,
.documento li { color: var(--color-texto-secundario); }

.documento ul { padding-left: 1.25rem; display: grid; gap: 8px; margin-bottom: var(--space-sm); }

.documento__fecha {
  display: inline-block;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario);
  padding: 6px 14px;
  border-radius: var(--radio-capsula);
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   6) RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
  .maqueta__movil { width: 132px; }
  .notificacion-pago { left: -4px; }
}

@media (max-width: 991.98px) {
  :root { --altura-encabezado: 70px; }

  .navegacion { display: none; }
  .boton-menu { display: inline-flex; }
  .encabezado__acciones .boton { display: none; }

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

  .maqueta { max-width: 560px; margin-inline: auto; }
  .maqueta__movil { width: 124px; right: 0; }
  .notificacion-pago { top: 16%; left: 0; }

  .franja-indicadores__tarjeta { grid-template-columns: repeat(2, 1fr); }
  .indicador:nth-child(2n) { border-right: 0; }
  .indicador:nth-child(-n+2) { border-bottom: 1px solid var(--color-borde); }

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

@media (max-width: 767.98px) {
  /* Todas las tarjetas pasan a una sola columna */
  .rejilla-funciones,
  .rejilla-problemas,
  .rejilla-pasos,
  .rejilla-planes { grid-template-columns: 1fr; }

  .portada { padding-top: calc(var(--altura-encabezado) + var(--space-lg)); }

  .portada__botones .boton { width: 100%; }

  .portada__indicadores { gap: 10px 20px; }

  /* El teléfono superpuesto estorba en pantallas pequeñas */
  .maqueta__movil { display: none; }
  .notificacion-pago { position: static; max-width: none; margin-top: 14px; }

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

  .solucion { flex-direction: column; gap: var(--space-sm); }

  .aviso-desplazamiento { display: flex; }

  .cierre__botones .boton { width: 100%; }

  .formulario { padding: var(--space-md); }

  .pie__inferior { flex-direction: column; align-items: flex-start; }

  /* El flotante se reduce a un círculo para no tapar contenido */
  .whatsapp-flotante {
    height: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .whatsapp-flotante span { display: none; }
  .whatsapp-flotante i { font-size: 1.85rem; }
}

@media (max-width: 575.98px) {
  .franja-indicadores__tarjeta { grid-template-columns: 1fr; }
  .indicador { border-right: 0; border-bottom: 1px solid var(--color-borde); }
  .indicador:last-child { border-bottom: 0; }

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

  .selector-periodo { width: 100%; justify-content: flex-start; }
  .selector-periodo__opcion { flex: 1 0 auto; padding-inline: 16px; }
}

/* ==========================================================================
   7) ACCESIBILIDAD Y MOVIMIENTO
   ========================================================================== */

/* Aparición suave al hacer scroll.
   El contenido SOLO se oculta si main.js confirmó que va a revelarlo, marcando
   <html> con .con-revelado. Así, si el JavaScript falla, no se carga o el
   navegador no soporta IntersectionObserver, la página se ve completa: nunca
   se queda una sección en blanco. */
.con-revelado .es-revelable {
  opacity: 0;
  transform: translateY(16px);
}

.con-revelado .se-revelo {
  opacity: 1;
  transform: none;
  transition: opacity var(--transicion-lenta), transform var(--transicion-lenta);
}

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

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

  .con-revelado .es-revelable { opacity: 1; transform: none; }
  .boton:hover,
  .funcion:hover,
  .paso:hover { transform: none; }
}

/* Impresión: sin fondos oscuros ni elementos flotantes */
@media print {
  .encabezado,
  .whatsapp-flotante,
  .boton { display: none !important; }

  .seccion--oscura { background: #fff !important; color: #000 !important; }
  .seccion--oscura h2,
  .seccion--oscura h3,
  .seccion--oscura p { color: #000 !important; }
}