/* ============================================================
   LinkPacks — styles.css
   Hoja de estilos única del sitio, ordenada por secciones:
   01. Variables y fuentes
   02. Reset y base
   03. Componentes comunes (botones, contenedor, tarjetas)
   04. Encabezado y navegación (landing)
   05. Hero
   06. Introducción (frase + 3 tarjetas)
   07. Beneficios
   08. Cómo funciona
   09. Paquetes
   10. Confianza
   11. Preguntas frecuentes (FAQ)
   12. Banda CTA
   13. Contacto (formulario)
   14. Pie de página
   15. Login
   16. Panel de cliente
   17. Páginas de pago (gracias / pendiente / error)
   18. Páginas legales y 404
   19. Utilidades y accesibilidad
   ============================================================ */

/* ---------- 01. Variables y fuentes ---------- */

/* Plus Jakarta Sans variable autoalojada (un solo woff2 cubre 400–800) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2');
}

:root {
  --navy: #14356B;          /* Azul marino principal */
  --navy-claro: #1E3A8A;    /* Hover de elementos navy */
  --azul: #1565C0;          /* Azul medio */
  --cian: #00ACC1;          /* Cian principal (acciones) */
  --cian-hover: #0097AB;    /* Hover cian */
  --cian-claro: #29B6D8;    /* Cian claro (acentos sobre navy) */
  --gris-fondo: #F5F7FA;    /* Fondo de secciones alternas */
  --texto: #33415C;         /* Texto base */
  --texto-suave: #47546B;   /* Texto secundario */
  --texto-tenue: #5A6B85;   /* Texto terciario */
  --texto-gris: #7A8AA3;    /* Texto atenuado */
  --borde: #E6ECF4;         /* Bordes de tarjetas */
  --borde-input: #D5DEEB;   /* Bordes de campos */
  --verde: #22A85A;         /* Estado activo */
  --sombra-tarjeta: 0 4px 18px rgba(20, 53, 107, 0.06);
}

/* ---------- 02. Reset y base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

/* El atributo hidden debe ocultar cualquier elemento (incluidos SVG) */
[hidden] { display: none !important; }

a { color: var(--cian); }
a:hover { color: var(--cian-hover); }

/* ---------- 03. Componentes comunes ---------- */

.contenedor {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Botones */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--cian {
  background: var(--cian);
  color: #fff;
  border: none;
  font-size: 17px;
  padding: 15px 32px;
}
.btn--cian:hover { background: var(--cian-hover); color: #fff; }

.btn--navy {
  background: var(--navy);
  color: #fff;
  border: none;
  font-size: 15px;
  padding: 11px 22px;
  white-space: nowrap;
}
.btn--navy:hover { background: var(--navy-claro); color: #fff; }

.btn--borde-navy {
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  font-size: 17px;
  padding: 13px 30px;
}
.btn--borde-navy:hover { background: var(--navy); color: #fff; }

/* Secciones genéricas */
.seccion { padding: 88px 0; background: #fff; }
.seccion--gris { background: var(--gris-fondo); }

.titulo-seccion {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin: 0 0 48px;
  text-align: center;
}

/* ---------- 04. Encabezado y navegación ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.encabezado__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.encabezado__logo { display: flex; align-items: center; text-decoration: none; }
.encabezado__logo img { height: 44px; display: block; }

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

.nav-principal a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.nav-principal a:hover { color: var(--cian); }

/* Botón hamburguesa (solo móvil) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy);
}

@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  .nav-principal {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 12px 24px rgba(20, 53, 107, 0.08);
  }
  .nav-principal.abierto { display: flex; }
  .nav-principal a { padding: 14px 24px; width: 100%; }
  .encabezado .btn--navy { display: none; } /* En móvil, el acceso queda en el menú */
  .nav-principal .nav-acceso { display: block; color: var(--cian); font-weight: 700; }
}
@media (min-width: 801px) {
  .nav-principal .nav-acceso { display: none; } /* En escritorio se usa el botón del header */
}

/* ---------- 05. Hero ---------- */

.hero {
  background: linear-gradient(180deg, #fff 0%, var(--gris-fondo) 100%);
  padding: 96px 0 88px;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.hero__texto {
  font-size: 19px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0 0 32px;
  max-width: 34em;
  text-wrap: pretty;
}

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

.hero__figura { display: flex; justify-content: center; }
.hero__figura svg { width: 100%; max-width: 440px; height: auto; }

/* Definición breve bajo el hero (GEO: definición citable por motores generativos) */
.hero__definicion {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texto-tenue);
  margin: 28px 0 0;
  max-width: 44em;
}

/* ---------- 06. Introducción ---------- */

.intro__frase {
  font-size: 21px;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 600;
  max-width: 30em;
  margin: 0 auto 48px;
  text-align: center;
  text-wrap: pretty;
}

.tarjetas-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.tarjeta-intro {
  background: var(--gris-fondo);
  border-radius: 14px;
  padding: 32px 28px;
}

.tarjeta-intro svg { width: 38px; height: 38px; margin-bottom: 16px; }

.tarjeta-intro h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}

.tarjeta-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
}

/* ---------- 07. Beneficios ---------- */

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.beneficio {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.beneficio svg { width: 32px; height: 32px; flex-shrink: 0; }

.beneficio h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}

.beneficio p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0;
}

/* ---------- 08. Cómo funciona ---------- */

.pasos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}

.paso__numero {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.paso__numero--1 { background: var(--navy); }
.paso__numero--2 { background: var(--azul); }
.paso__numero--3 { background: var(--cian-claro); }
.paso__numero--4 { background: var(--cian); }

.paso h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}

.paso p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
}

/* ---------- 09. Paquetes ---------- */

.paquetes-intro {
  font-size: 17px;
  color: var(--texto-suave);
  text-align: center;
  max-width: 38em;
  margin: 0 auto 56px;
  line-height: 1.6;
  text-wrap: pretty;
}

#paquetes .titulo-seccion { margin-bottom: 12px; }

.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
  align-items: stretch;
}

.paquete {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 36px 30px;
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  flex-direction: column;
}

.paquete--destacado {
  border: 2px solid var(--cian);
  box-shadow: 0 12px 36px rgba(0, 172, 193, 0.18);
  position: relative;
}

.paquete__badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cian);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.paquete__nivel {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--azul);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.paquete--destacado .paquete__nivel { color: var(--cian); }

.paquete__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.paquete__monto {
  font-size: 40px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -1px;
}

.paquete__periodo {
  font-size: 15px;
  color: var(--texto-tenue);
  font-weight: 600;
}

.paquete__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0 0 22px;
}

.paquete__lista {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.paquete__lista li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto);
}

.paquete__lista li::before {
  content: '✓';
  color: var(--cian);
  font-weight: 800;
}

/* Botones de contratación */
.btn-paquete {
  display: block;
  text-align: center;
  font-size: 16px;
  padding: 13px 24px;
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  width: 100%;
}
.btn-paquete:hover { background: var(--navy); color: #fff; }

.btn-paquete--cian {
  background: var(--cian);
  color: #fff;
  border: none;
  padding: 15px 24px;
}
.btn-paquete--cian:hover { background: var(--cian-hover); color: #fff; }

/* Estado "redirigiendo" al ir a Mercado Pago */
.btn-paquete[disabled] { opacity: 0.65; cursor: wait; }

.nota-pago {
  text-align: center;
  font-size: 14.5px;
  color: var(--texto-tenue);
  margin: 36px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nota-pago svg { width: 17px; height: 17px; }

@media (max-width: 800px) {
  .paquete--destacado { order: -1; } /* El plan más elegido primero en móvil */
}

/* ---------- 10. Confianza ---------- */

/* Móvil: 1 columna · tablet: 2 · escritorio amplio (≥1100px): 4 en una fila,
   como el prototipo (auto-fit dejaba al 4.º punto huérfano en una 2.ª fila) */
.confianza-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .confianza-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .confianza-grid { grid-template-columns: repeat(4, 1fr); }
}

.confianza__item { padding-top: 22px; }
.confianza__item--cian { border-top: 3px solid var(--cian); }
.confianza__item--cian-claro { border-top: 3px solid var(--cian-claro); }
.confianza__item--azul { border-top: 3px solid var(--azul); }
.confianza__item--navy { border-top: 3px solid var(--navy); }

.confianza__item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}

.confianza__item p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
}

/* ---------- 11. Preguntas frecuentes ---------- */

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

#faq .titulo-seccion { margin-bottom: 40px; }

.faq-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
}

.faq-item__pregunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
}
.faq-item__pregunta:hover { background: #F8FAFC; }

.faq-item__chevron {
  color: var(--cian);
  font-size: 20px;
  font-weight: 400;
  flex-shrink: 0;
}

.faq-item__respuesta {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--texto-suave);
}

.faq-item__respuesta[hidden] { display: none; }

/* ---------- 12. Banda CTA ---------- */

.cta-banda {
  background: var(--navy);
  padding: 64px 0;
}

.cta-banda__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.cta-banda h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 0;
  text-wrap: pretty;
}

.cta-banda .btn--cian { padding: 15px 34px; white-space: nowrap; }
.cta-banda .btn--cian:hover { background: var(--cian-claro); }

/* ---------- 13. Contacto ---------- */

#contacto .titulo-seccion { text-align: left; margin-bottom: 10px; }

.contacto__sub {
  font-size: 17px;
  color: var(--texto-suave);
  margin: 0 0 44px;
}

.contacto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: start;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.campo .opcional { font-weight: 500; color: var(--texto-gris); }

.campo input,
.campo textarea {
  border: 1.5px solid var(--borde-input);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--texto);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo textarea { resize: vertical; }

.campo input:focus,
.campo textarea:focus {
  border-color: var(--cian);
  box-shadow: 0 0 0 3px rgba(0, 172, 193, 0.15);
}

/* Honeypot: oculto para humanos, visible para bots */
.campo-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-msj {
  margin: 0;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
}

.form-msj--ok {
  background: #E8F7F1;
  border: 1px solid #B7E4D0;
  color: #1B7A50;
}

.form-msj--error {
  background: #FDF0F0;
  border: 1px solid #F2C9C9;
  color: #B84040;
}

.formulario .btn--cian {
  align-self: flex-start;
  font-size: 16px;
  padding: 14px 32px;
}
.formulario .btn--cian[disabled] { opacity: 0.65; cursor: wait; }

.contacto-lateral {
  background: var(--gris-fondo);
  border-radius: 16px;
  padding: 36px 32px;
}

.contacto-lateral svg { width: 40px; height: 40px; margin-bottom: 16px; }

.contacto-lateral a.correo {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  display: block;
  margin-bottom: 14px;
}
.contacto-lateral a.correo:hover { color: var(--cian); }

.contacto-lateral p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto-suave);
  margin: 0;
}

/* ---------- 14. Pie de página ---------- */

.pie {
  background: var(--navy);
  color: #B9C7DD;
  padding: 64px 0 0;
}

.pie__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 44px;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pie__marca .pie__icono {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  display: inline-flex;
}

.pie__marca img { width: 34px; height: 34px; display: block; }

.pie__marca span.nombre {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}

.pie__lema {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 26em;
}

.pie h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7E92B5;
  margin: 0 0 16px;
}

.pie__nav { display: flex; flex-direction: column; gap: 10px; }

.pie__nav a {
  color: #DCE5F2;
  text-decoration: none;
  font-size: 14.5px;
}
.pie__nav a:hover { color: var(--cian-claro); }

.pie a.correo {
  color: var(--cian-claro);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 18px;
}
.pie a.correo:hover { color: #fff; }

.pie .btn-acceso {
  display: inline-block;
  border: 1.5px solid var(--cian-claro);
  color: var(--cian-claro);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  padding: 10px 22px;
  border-radius: 10px;
}
.pie .btn-acceso:hover { background: var(--cian-claro); color: var(--navy); }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 52px;
}

.pie__legal-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #7E92B5;
}

.pie__legal-links { display: flex; gap: 20px; }

.pie__legal-links a { color: #B9C7DD; text-decoration: none; }
.pie__legal-links a:hover { color: var(--cian-claro); }

/* ---------- 15. Login ---------- */

body.pagina-login { background: var(--gris-fondo); }

.login-envoltura {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}

.login-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.login-columna {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
}

.login-columna > a.logo { margin-bottom: 28px; }
.login-columna > a.logo img { height: 52px; display: block; }

.login-caja {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(20, 53, 107, 0.10);
  padding: 40px 36px;
  width: 100%;
}

.login-caja h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.4px;
  margin: 0 0 8px;
  text-align: center;
}

.login-caja .login-sub {
  font-size: 15px;
  color: var(--texto-suave);
  margin: 0 0 28px;
  text-align: center;
}

.login-error {
  margin: 0 0 18px;
  background: #FDF0F0;
  border: 1px solid #F2C9C9;
  color: #B84040;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campo-pass { position: relative; }

.campo-pass input {
  padding-right: 48px;
  width: 100%;
}

.btn-ver-pass {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  color: var(--texto-gris);
}
.btn-ver-pass:hover { color: var(--cian); }
.btn-ver-pass svg { width: 20px; height: 20px; }

.login-form .btn--cian {
  font-size: 16px;
  padding: 15px 24px;
  margin-top: 6px;
  width: 100%;
}

.login-ayuda {
  font-size: 13.5px;
  color: var(--texto-tenue);
  text-align: center;
  margin: 24px 0 0;
}

.login-ayuda a {
  color: var(--cian);
  font-weight: 600;
  text-decoration: none;
}

.login-volver {
  margin-top: 24px;
  font-size: 14px;
  color: var(--texto-tenue);
  text-decoration: none;
  font-weight: 600;
}
.login-volver:hover { color: var(--cian); }

/* ---------- 16. Panel de cliente ---------- */

body.pagina-panel { background: var(--gris-fondo); }

.panel-encabezado {
  background: #fff;
  border-bottom: 1px solid var(--borde);
}

.panel-encabezado__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.panel-encabezado img { height: 40px; display: block; }

.panel-encabezado__usuario {
  display: flex;
  align-items: center;
  gap: 18px;
}

.panel-encabezado__usuario span {
  font-size: 15px;
  color: var(--texto-suave);
}

.panel-encabezado__usuario strong { color: var(--navy); }

.btn-salir {
  border: 1.5px solid var(--borde-input);
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 10px;
}
.btn-salir:hover { border-color: var(--navy); color: var(--navy); }

.panel-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: var(--sombra-tarjeta);
  padding: 32px 34px;
}

.tarjeta--destacada {
  box-shadow: 0 6px 24px rgba(20, 53, 107, 0.07);
  padding: 36px 34px;
}

.tarjeta h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin: 0 0 20px;
}

/* Estado del paquete */
.estado__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

/* La columna izquierda cede ancho (los textos largos del estado vencido
   no deben empujar la vigencia a una segunda fila en escritorio) */
.estado__cabecera > div:first-child {
  flex: 1 1 340px;
  min-width: 0;
}

.plan-chip {
  display: inline-block;
  background: #EAF1FB;
  color: var(--azul);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

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

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(34, 168, 90, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(34, 168, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 168, 90, 0); }
}

.estado-activo__punto {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--verde);
  animation: pulso 2s infinite;
}

.estado-activo__texto {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.5px;
}

/* Estado vencido / periodo de gracia: punto ámbar pulsante */
@keyframes pulso-ambar {
  0% { box-shadow: 0 0 0 0 rgba(224, 138, 0, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(224, 138, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 138, 0, 0); }
}

.estado-activo__punto--vencido {
  background: #E08A00;
  animation: pulso-ambar 1.6s infinite;
}

.estado__nota {
  font-size: 15px;
  color: var(--texto-suave);
  margin: 10px 0 0;
}

.estado__vigencia { text-align: right; flex-shrink: 0; }

.estado__vigencia .etiqueta {
  font-size: 14px;
  color: var(--texto-tenue);
  margin: 0 0 4px;
}

.estado__vigencia .fecha {
  font-size: 17px;
  color: var(--navy);
  margin: 0;
}

/* Barra de progreso del ciclo */
.progreso__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.progreso__dias {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}

.progreso__ciclo {
  font-size: 13px;
  color: var(--texto-gris);
}

.progreso__barra {
  height: 10px;
  background: #E9EEF6;
  border-radius: 999px;
  overflow: hidden;
}

.progreso__relleno {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), var(--cian));
  width: 0;
  transition: width 0.6s ease;
}

/* Barra al 100% en color de alerta (estado vencido) */
.progreso__relleno--alerta {
  background: linear-gradient(90deg, #E08A00, #D9534F);
}

/* Aviso ámbar de vencimiento próximo (≤30 días) */
.aviso-ambar {
  margin-top: 22px;
  background: #FDF6E7;
  border: 1px solid #F0DCA8;
  border-radius: 12px;
  padding: 15px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aviso-ambar[hidden] { display: none; }

/* Aviso rojo suave del estado vencido / periodo de gracia */
.aviso-rojo {
  margin-top: 22px;
  background: #FDEDEB;
  border: 1px solid #F2C4BE;
  border-radius: 12px;
  padding: 15px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aviso-rojo[hidden] { display: none; }

.aviso-rojo svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 1px;
}

.aviso-rojo p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #93312A;
}

.aviso-ambar svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 1px;
}

.aviso-ambar p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #8A6512;
}

/* Sitios beneficiados */
.sitios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.sitio {
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.sitio svg { width: 26px; height: 26px; flex-shrink: 0; }

.sitio__datos { min-width: 0; }

.sitio__dominio {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.chip-verde {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E8F7EF;
  color: #1B7A50;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.chip-verde::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
}

/* Badge "Enlaces en riesgo" (estado vencido) */
.chip-ambar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FCF1DC;
  color: #9A6A0B;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.chip-ambar::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E08A00;
}

.sitios-nota {
  font-size: 14px;
  color: var(--texto-tenue);
  margin: 0;
  line-height: 1.6;
}

/* Renovación */
.renovacion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.renv {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}

.renv--destacada {
  border: 2px solid var(--cian);
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 172, 193, 0.14);
}

.renv__badge {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--cian);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 999px;
}

.renv h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}

.renv__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.renv__monto {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
}

.renv__periodo {
  font-size: 14px;
  color: var(--texto-tenue);
  font-weight: 600;
}

.renv__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0 0 22px;
  flex-grow: 1;
}

.btn-renovar {
  display: block;
  text-align: center;
  background: var(--navy);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  padding: 14px 24px;
  border-radius: 10px;
  width: 100%;
  transition: background 0.18s ease;
}
.btn-renovar:hover { background: var(--navy-claro); color: #fff; }

.btn-renovar--cian { background: var(--cian); }
.btn-renovar--cian:hover { background: var(--cian-hover); }

.btn-renovar[disabled] { opacity: 0.65; cursor: wait; }

/* Franja de renovación anticipada (ámbar suave con reloj) */
.franja-renovacion {
  margin-top: 22px;
  background: #FDF6E7;
  border: 1px solid #F0DCA8;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.franja-renovacion svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 1px;
}

.franja-renovacion p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #8A6512;
}

.nota-pago--panel {
  font-size: 13.5px;
  margin-top: 24px;
  gap: 7px;
}

.nota-pago--panel svg { width: 15px; height: 15px; }

/* Detalles del servicio (tarjeta a ancho completo; en escritorio los
   datos se reparten en 2 columnas internas y el historial va debajo) */
.detalles h2 { font-size: 18px; margin-bottom: 18px; }

.detalles dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}

@media (min-width: 900px) {
  .detalles dl {
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }
}

.detalles dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
}

.detalles dt { color: var(--texto-tenue); font-weight: 600; }

.detalles dd {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  text-align: right;
}

.detalles dd.ancho-limitado { max-width: 55%; }

.detalles h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-gris);
  margin: 26px 0 12px;
}

.tabla-pagos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla-pagos th {
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  color: var(--texto-gris);
}

.tabla-pagos th.der, .tabla-pagos td.der { text-align: right; }

.tabla-pagos td {
  padding: 10px 0;
  border-bottom: 1px solid #F0F4F9;
  color: var(--texto);
}

.chip-pagado {
  display: inline-block;
  background: #E8F7EF;
  color: #1B7A50;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Resumen de posicionamiento — DESACTIVADO junto con su bloque HTML en
   panel.php hasta tener métricas reales. Para reactivar, descomentar aquí
   y en panel.php.
.resumen-posicionamiento {
  background: #fff;
  border: 1px dashed #C9D6E8;
  border-radius: 18px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.resumen-posicionamiento h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin: 0;
}

.resumen-posicionamiento p {
  font-size: 13.5px;
  color: var(--texto-gris);
  margin: 0;
  font-family: monospace;
}
*/

/* Banda de ayuda */
.ayuda-banda {
  background: var(--navy);
  border-radius: 18px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.ayuda-banda p {
  margin: 0;
  font-size: 15px;
  color: #DCE5F2;
  line-height: 1.6;
}

.ayuda-banda a {
  color: var(--cian-claro);
  font-weight: 700;
  text-decoration: none;
}

/* ---------- 17. Páginas de pago ---------- */

body.pagina-pago { background: var(--gris-fondo); }

.pago-encabezado {
  background: #fff;
  border-bottom: 1px solid var(--borde);
}

.pago-encabezado__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.pago-encabezado img { height: 40px; display: block; }

.pago-encabezado .btn--navy { font-size: 14px; padding: 10px 20px; }

.pago-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 24px 88px;
  text-align: center;
}

@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

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

.pago-icono {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pago-icono svg { width: 48px; height: 48px; }

.pago-icono--exito {
  background: var(--cian);
  box-shadow: 0 14px 36px rgba(0, 172, 193, 0.35);
}

/* Los íconos de pago son visibles por defecto; la animación de
   entrada solo se aplica si el usuario no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .pago-icono {
    animation: pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  }
  .pago-icono--exito .palomita {
    stroke-dasharray: 40;
    animation: trazo 0.5s ease-out 0.35s both;
  }
}

.pago-icono--pendiente {
  background: #E9A93D;
  box-shadow: 0 14px 36px rgba(233, 169, 61, 0.35);
}

.pago-icono--error {
  background: #D2564F;
  box-shadow: 0 14px 36px rgba(210, 86, 79, 0.30);
}

.pago-main h1 {
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.8px;
  margin: 0 0 16px;
}

.pago-main .pago-texto {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texto-suave);
  margin: 0 0 36px;
  text-wrap: pretty;
}

.resumen-pedido {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(20, 53, 107, 0.07);
  padding: 28px 32px;
  margin-bottom: 36px;
  text-align: left;
}

.resumen-pedido h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-gris);
  margin: 0 0 18px;
}

.resumen-pedido dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.resumen-pedido dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
}

.resumen-pedido dl > div.con-borde {
  border-top: 1px solid #F0F4F9;
  padding-top: 13px;
}

.resumen-pedido dt { color: var(--texto-tenue); font-weight: 600; }
.resumen-pedido dd { margin: 0; color: var(--navy); font-weight: 700; }

.pago-acciones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.pago-acciones .btn--cian { font-size: 16px; padding: 15px 32px; }
.pago-acciones .btn--borde-navy { font-size: 16px; padding: 13px 30px; }

.pago-ayuda {
  font-size: 14px;
  color: var(--texto-tenue);
  margin: 0;
}

.pago-ayuda a {
  color: var(--cian);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- 18. Páginas legales y 404 ---------- */

.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 88px;
}

.legal-main h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}

.legal-actualizacion {
  font-size: 14px;
  color: var(--texto-gris);
  margin: 0 0 36px;
}

.legal-main h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin: 36px 0 12px;
}

.legal-main p, .legal-main li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-suave);
}

.pagina-404 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.pagina-404 h1 {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px;
}

.pagina-404 p {
  font-size: 17px;
  color: var(--texto-suave);
  margin: 0 0 28px;
}

/* ---------- 19. Utilidades y accesibilidad ---------- */

/* Texto solo para lectores de pantalla */
.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;
}

/* Respeta la preferencia de menos animaciones */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .estado-activo__punto { animation: none; }
  .progreso__relleno { transition: none; }
}