/*
Theme Name: Dobi
Theme URI: https://dobicol.com
Description: Tema a medida para Dobi, gestión empresarial. Sin constructores ni plugins: todo el diseño vive aquí. Colores y tipografía según el manual de marca v1.0.
Author: Tecnobyte360
Version: 1.1
Text Domain: dobi
*/

/* ------------------------------------------------------------------
   Los colores y medidas en un solo sitio: cambiar la marca es cambiar
   estas lineas, no buscarlas por todo el archivo.
------------------------------------------------------------------ */
:root {
  /* Manual de marca: azul sostiene la marca, cian solo para acentos
     (nunca texto pequeño sobre blanco). Reparto ~70 blanco / 25 azul / 5 cian. */
  --azul: #10104F;
  --azul-oscuro: #10104F;
  --cian: #00BCE4;
  --azul-claro: #E6F8FC;
  --fondo: #F4F7FB;
  --texto: #10104F;
  --gris: #566174;
  --borde: #DDE3EC;
  --ancho: 1140px;
  --radio: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

h1, h2, h3, h4 { font-weight: 600; }

body {
  font-family: Montserrat, Arial, sans-serif;
  color: var(--texto);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ------------------------------------------------------------------
   Cabecera
------------------------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--azul);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cabecera .contenedor {
  display: flex; align-items: center; gap: 28px;
  height: 76px;
}
.marca { display: block; line-height: 0; }
.marca img { height: 46px; width: auto; }
.marca:hover { text-decoration: none; }


.menu { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.menu a { color: rgba(255, 255, 255, .78); font-size: 14.5px; font-weight: 600; transition: color .2s; }
.menu a:hover { color: #fff; text-decoration: none; }

/* Línea cian bajo el enlace: crece desde el centro al pasar el mouse
   y se queda en la sección que el visitante está leyendo (assets/menu.js). */
.menu a:not(.boton) { position: relative; padding: 6px 0; }
.menu a:not(.boton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--cian); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.menu a:not(.boton):hover::after, .menu a.actual::after { transform: scaleX(1); }
.menu a.actual { color: #fff; }

.menu a.boton { background: var(--cian); color: var(--azul); height: 42px; transition: background .2s, transform .2s; }
.menu a.boton:hover { background: #fff; color: var(--azul); transform: translateY(-1px); }

.cabecera { transition: box-shadow .3s; }
.cabecera.con-sombra { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
.cabecera .contenedor { transition: height .3s ease; }
.cabecera .marca img { transition: height .3s ease; }
.cabecera.con-sombra .contenedor { height: 64px; }
.cabecera.con-sombra .marca img { height: 38px; }
.progreso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cian); transform: scaleX(0); transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .menu a:not(.boton)::after, .menu a.boton, .cabecera { transition: none; }
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 11px;
  background: var(--azul); color: #fff; font-weight: 700; font-size: 14.5px;
  border: 0; cursor: pointer; transition: background .15s;
}
.boton:hover { background: #26266b; text-decoration: none; color: #fff; }
.boton.secundario { background: #fff; color: var(--azul); border: 1px solid var(--borde); }
.boton.secundario:hover { background: var(--fondo); color: var(--azul); }
.boton.grande { height: 54px; padding: 0 28px; font-size: 15.5px; }
.boton:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; }

/* Botones sobre fondo azul: el cian lleva texto azul, como pide el manual. */
.boton.cian { background: var(--cian); color: var(--azul); }
.boton.cian:hover { background: #fff; color: var(--azul); }
.boton.contorno { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.boton.contorno:hover { border-color: #fff; background: transparent; }
.boton.con-flecha::after {
  content: ""; width: 8px; height: 8px; margin-left: 4px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.boton.con-flecha:hover::after { transform: translateX(3px) rotate(45deg); }

.abrir-menu { display: none; margin-left: auto; background: none; border: 0; font-size: 22px; color: #fff; cursor: pointer; }
.abrir-menu svg { width: 26px; height: 26px; display: block; }

/* ------------------------------------------------------------------
   Portada
------------------------------------------------------------------ */
.portada { position: relative; overflow: hidden; background: var(--azul); color: #fff; padding: 72px 0 88px; }
.portada-rejilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

.portada .lema {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); margin-bottom: 22px;
}
.portada .lema::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cian); }
.portada h1 {
  font-size: 50px; line-height: 1.1; letter-spacing: -.03em; font-weight: 700;
  color: #fff; max-width: 680px;
}
.portada h1 .acento {
  text-decoration: underline; text-decoration-color: var(--cian);
  text-decoration-thickness: 5px; text-underline-offset: 8px; text-decoration-skip-ink: none;
}
.portada .entrada { font-size: 18px; color: rgba(255, 255, 255, .75); max-width: 560px; margin-top: 24px; line-height: 1.65; }
.portada .acciones { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.portada .modulos {
  list-style: none; display: flex; flex-wrap: wrap; margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12); max-width: 560px;
}
.portada .modulos li { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .7); padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .18); }
.portada .modulos li:first-child { padding-left: 0; border-left: 0; }


/* ------------------------------------------------------------------
   Secciones
------------------------------------------------------------------ */
.seccion { padding: 72px 0; }
.seccion.alterna { background: var(--fondo); }
.titulo-seccion { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; color: var(--azul-oscuro); max-width: 720px; }
.subtitulo-seccion { font-size: 17px; color: var(--gris); margin-top: 12px; max-width: 680px; }

.rejilla { display: grid; gap: 20px; margin-top: 38px; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.dos { grid-template-columns: repeat(2, 1fr); }
.rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }

.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 26px 24px;
}
.tarjeta h3 { font-size: 17.5px; color: var(--azul-oscuro); margin-bottom: 8px; letter-spacing: -.01em; }
.tarjeta p { font-size: 14.5px; color: var(--gris); }
.tarjeta .icono {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--azul); color: var(--cian);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
}
.tarjeta .icono svg { width: 21px; height: 21px; stroke-width: 1.8; }

/* ------------------------------------------------------------------
   Servicios: pestañas con una pantalla de muestra por módulo
------------------------------------------------------------------ */
.servicios { padding: 96px 0; }
section[id] { scroll-margin-top: 76px; }
.pestanas {
  display: flex; gap: 4px; margin-top: 36px; padding: 6px; width: fit-content; max-width: 100%;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--gris); font: 600 14.5px Montserrat, Arial, sans-serif;
  transition: background .15s, color .15s;
}
.pestana svg { width: 18px; height: 18px; }
.pestana:hover { color: var(--azul); }
.pestana[aria-selected="true"] { background: var(--azul); color: #fff; }
.pestana[aria-selected="true"] svg { color: var(--cian); }
.pestana:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

.panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; margin-top: 44px; animation: aparecer .3s ease; }
.panel[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.panel-texto h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; color: var(--azul); }
.panel-texto > p { font-size: 17px; color: var(--gris); margin-top: 14px; line-height: 1.65; }
.panel-texto ul { list-style: none; margin-top: 24px; }
.panel-texto li {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 0;
  border-top: 1px solid var(--borde); font-size: 15px; font-weight: 500; color: var(--azul);
}
.panel-texto li:last-child { border-bottom: 1px solid var(--borde); }
.panel-texto li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; stroke-width: 2.4; color: var(--azul); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 700; font-size: 15px; color: var(--azul); }
.enlace-flecha::after {
  content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.enlace-flecha:hover { text-decoration: none; }
.enlace-flecha:hover::after { transform: translateX(3px) rotate(45deg); }

.panel-muestra {
  position: relative; overflow: hidden; border-radius: 22px; background: var(--azul);
  padding: 48px 44px; min-height: 540px; display: flex; align-items: center; justify-content: center;
}
.panel-muestra .aro {
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  border: 56px solid #23237a; right: -120px; bottom: -150px;
}
.panel-muestra::before {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: var(--cian); top: 28px; right: 32px;
}
.pantalla {
  position: relative; width: 100%; max-width: 440px; background: #fff; color: var(--azul);
  border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  font-variant-numeric: tabular-nums;
}
.pantalla-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; }
.pantalla .rotulo { display: block; font-size: 12px; font-weight: 500; color: var(--gris); }
.pantalla-cabeza strong { display: block; font-size: 17px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla td { padding: 10px 0; border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla td + td { text-align: right; padding-left: 12px; white-space: nowrap; font-weight: 500; }
.tabla b { display: block; font-weight: 600; }
.tabla small { display: block; font-size: 11.5px; color: var(--gris); margin-top: 1px; }
.tabla .titulos td { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); padding: 8px 0; }
.pantalla-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--azul); font-size: 13px; }
.pantalla-pie strong { font-size: 17px; }
.pantalla-pie.destacado { background: var(--fondo); border: 0; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.boton-falso { background: var(--azul); color: #fff; font-weight: 600; font-size: 12.5px; padding: 7px 14px; border-radius: 8px; }

.est { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.est svg { width: 15px; height: 15px; }
.est.ok { color: #0b7a4b; }
.est.pend { color: #8a5a00; }
.est.alerta { color: #b4321e; }
.est.neutro { color: var(--gris); }

.barras { display: grid; gap: 14px; padding: 6px 0 4px; border-top: 1px solid var(--borde); padding-top: 16px; }
.barras div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.barras span { color: var(--gris); font-weight: 500; }
.barras b { font-weight: 600; text-align: right; }
.barras i { grid-column: 1 / -1; grid-row: 2; display: block; height: 10px; border-radius: 6px; background: var(--azul); }
.barras i.tenue { background: #c9cfe0; }

.efectos { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.efectos li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; }
.efectos svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------
   DIAN: los documentos y el recorrido de una factura
------------------------------------------------------------------ */
.dian-rejilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.documentos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: 40px; }
.documentos li { border-top: 2px solid var(--azul); padding-top: 16px; }
.documentos span { display: block; font-size: 13px; font-weight: 700; color: var(--gris); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.documentos h3 { font-size: 18px; color: var(--azul); margin-top: 6px; letter-spacing: -.01em; }
.documentos p { font-size: 14.5px; color: var(--gris); margin-top: 6px; }

.recorrido {
  background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 26px 26px 10px;
  box-shadow: 0 24px 50px -32px rgba(16, 16, 79, .35); color: var(--azul);
}
.recorrido .rotulo { display: block; font-size: 12px; font-weight: 500; color: var(--gris); }
.linea-tiempo { list-style: none; margin-top: 8px; border-top: 1px solid var(--borde); padding-top: 18px; }
.linea-tiempo li {
  position: relative; display: grid; grid-template-columns: 78px 1fr; column-gap: 26px;
  padding-bottom: 20px;
}
.linea-tiempo li::before {
  content: ""; position: absolute; left: 96px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cian); box-shadow: 0 0 0 4px #fff;
}
.linea-tiempo li::after {
  content: ""; position: absolute; left: 101px; top: 17px; bottom: -3px; width: 2px; background: var(--borde);
}
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo time { grid-row: span 2; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; padding-top: 1px; }
.linea-tiempo b { font-size: 14.5px; font-weight: 600; padding-left: 12px; }
.linea-tiempo small { font-size: 12.5px; color: var(--gris); padding-left: 12px; }

/* ------------------------------------------------------------------
   Por qué: cada razón con su prueba
------------------------------------------------------------------ */
.razones { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.razones article { padding: 0 32px; border-left: 1px solid var(--borde); display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.razones article:first-child { padding-left: 0; border-left: 0; }
.razones article:last-child { padding-right: 0; }
.razones h3 { font-size: 20px; color: var(--azul); margin-top: 24px; letter-spacing: -.01em; }
.razones article > p { font-size: 15px; color: var(--gris); margin-top: 8px; }

.muestra {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; padding: 18px;
  min-height: 196px; color: var(--azul); font-size: 13px;
}
.muestra .rotulo { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }

.empresas { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.empresas li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--borde); }
.empresas li.activa { border-color: var(--azul); }
.empresas i {
  font-style: normal; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--fondo); color: var(--azul);
}
.empresas li.activa i { background: var(--azul); color: #fff; }
.empresas span { flex: 1; font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.empresas small { display: block; font-weight: 400; font-size: 11px; color: var(--gris); }
.empresas svg { width: 16px; height: 16px; stroke-width: 2.4; }

.anulada { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 12px; }
.anulada b { display: block; font-size: 14px; }
.anulada s { font-size: 12.5px; color: var(--gris); }
.anulada-datos { margin-top: 12px; display: grid; gap: 7px; }
.anulada-datos div { display: flex; justify-content: space-between; gap: 10px; }
.anulada-datos dt { color: var(--gris); }
.anulada-datos dd { font-weight: 600; }

.codigo s { display: block; margin-top: 6px; font-family: Consolas, monospace; font-size: 12.5px; color: var(--gris); }
.explicacion { margin-top: 16px; background: #fff; border-left: 3px solid var(--azul); border-radius: 0 10px 10px 0; padding: 12px 14px; }
.explicacion p { margin-top: 6px; font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------------------
   Planes
------------------------------------------------------------------ */
.planes-cabeza { text-align: center; }
.planes-cabeza .titulo-seccion, .planes-cabeza .subtitulo-seccion { margin-left: auto; margin-right: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.modo-pago {
  display: inline-flex; gap: 4px; margin-top: 28px; padding: 5px;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
}
.modo-pago button {
  border: 0; background: transparent; border-radius: 9px; padding: 10px 20px; cursor: pointer;
  font: 600 14px Montserrat, Arial, sans-serif; color: var(--gris); transition: background .2s, color .2s;
}
.modo-pago button small { font-size: 11.5px; font-weight: 500; margin-left: 4px; }
.modo-pago button[aria-pressed="true"] { background: var(--azul); color: #fff; }
.modo-pago button[aria-pressed="true"] small { color: var(--cian); }
.modo-pago button:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; align-items: start; }
.plan {
  position: relative; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 28px 24px; display: flex; flex-direction: column;
}
.plan.destacado { border: 2px solid var(--azul); box-shadow: 0 24px 50px -28px rgba(16, 16, 79, .45); }
.plan .etiqueta {
  position: absolute; top: -13px; left: 24px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--azul); background: var(--cian); padding: 5px 12px; border-radius: 999px;
}
.plan h3 { font-size: 19px; color: var(--azul); }
.plan .para { font-size: 13.5px; color: var(--gris); margin-top: 6px; min-height: 66px; }
.plan .precio { margin: 18px 0 2px; color: var(--azul); font-variant-numeric: tabular-nums; }
.plan .valor { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.plan .periodo { font-size: 13px; color: var(--gris); margin-left: 3px; }
.plan .anual { font-size: 12.5px; color: var(--gris); min-height: 38px; }
.plan .boton { width: 100%; margin-top: 18px; }
.limites { margin-top: 20px; border-top: 1px solid var(--borde); }
.limites div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 13.5px; }
.limites dt { color: var(--gris); }
.limites dd { font-weight: 700; color: var(--azul); }
.plan .base { font-size: 13px; font-weight: 700; color: var(--azul); margin-top: 18px; }
.plan ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.plan li { font-size: 13.5px; color: var(--texto); display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.plan li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--azul); stroke-width: 2.4; }

.plan-medida {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 28px;
  padding: 24px 28px; background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--cian); border-radius: var(--radio);
}
.plan-medida h3 { font-size: 18px; color: var(--azul); }
.plan-medida p { font-size: 14px; color: var(--gris); margin-top: 4px; }
.plan-medida .boton { flex-shrink: 0; }

.incluido { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--borde); }
.incluido h3 { font-size: 17px; color: var(--azul); }
.incluido ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.incluido li { display: flex; gap: 9px; font-size: 14px; color: var(--texto); }
.incluido li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--azul); stroke-width: 2.4; }

.comparar { margin-top: 36px; }
.comparar summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px; color: var(--azul); padding: 12px 20px;
  border: 1.5px solid var(--azul); border-radius: 11px; background: #fff;
}
.comparar summary::-webkit-details-marker { display: none; }
.comparar summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.comparar[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.comparar summary:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

.tabla-planes-caja { position: relative; margin-top: 24px; overflow-x: auto; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla-planes { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabla-planes thead th {
  background: #fff; padding: 16px 10px; font-size: 13.5px; color: var(--azul);
  text-align: center; border-bottom: 1px solid var(--borde); vertical-align: bottom;
}
.tabla-planes thead small { display: block; font-weight: 500; color: var(--gris); font-size: 12px; margin-top: 3px; }
.tabla-planes .grupo th {
  text-align: left; background: var(--fondo); padding: 10px 16px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--azul);
}
.tabla-planes tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--texto); padding: 11px 16px; }
.tabla-planes td { text-align: center; padding: 11px 10px; color: var(--azul); font-size: 12.5px; }
.tabla-planes tbody tr + tr th, .tabla-planes tbody tr + tr td { border-top: 1px solid var(--borde); }
.tabla-planes .si svg { width: 17px; height: 17px; color: var(--azul); stroke-width: 2.4; vertical-align: middle; }
.tabla-planes .no { color: #b8bfcc; }
/* En celular la tabla se desliza de lado y la columna de funciones queda fija */
.tabla-planes th[scope="row"] { position: sticky; left: 0; background: #fff; min-width: 240px; }
.tabla-planes .grupo span { position: sticky; left: 16px; }

.complementos-titulo { font-size: 18px; color: var(--azul); margin-top: 36px; }
.complementos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 12px; }
.complementos div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.complementos dt { color: var(--texto); }
.complementos dd { color: var(--gris); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.complementos dd b { color: var(--azul); font-size: 14px; }
.letra-menuda { font-size: 12.5px; color: var(--gris); margin-top: 20px; max-width: 820px; line-height: 1.6; }

/* ------------------------------------------------------------------
   Pie
------------------------------------------------------------------ */
.pie { background: var(--azul); color: rgba(255, 255, 255, .72); padding: 64px 0 28px; }
.pie a { color: rgba(255, 255, 255, .72); transition: color .2s; }
.pie a:hover { color: #fff; text-decoration: none; }
.pie-rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.pie-rejilla.sin-contacto { grid-template-columns: 2fr 1fr 1fr; }
.pie .marca img { height: 50px; }
.pie .lema-pie { margin-top: 14px; max-width: 360px; font-size: 14.5px; line-height: 1.6; }
.pie h4 { color: #fff; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.pie ul { list-style: none; display: grid; gap: 10px; font-size: 14px; }
.pie .legal {
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 48px; padding-top: 22px;
  font-size: 12.5px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   Contenido de paginas sueltas
------------------------------------------------------------------ */
.pagina { padding: 56px 0 72px; }
.pagina h1 { font-size: 36px; color: var(--azul-oscuro); letter-spacing: -.02em; margin-bottom: 20px; }
.pagina h2 { font-size: 24px; color: var(--azul-oscuro); margin: 32px 0 12px; }
.pagina p, .pagina li { color: var(--texto); margin-bottom: 12px; }
.pagina ul, .pagina ol { margin-left: 22px; }

/* ------------------------------------------------------------------
   Pantallas pequeñas
------------------------------------------------------------------ */
@media (max-width: 980px) {
  .rejilla.tres, .rejilla.cuatro, .planes { grid-template-columns: repeat(2, 1fr); }
  .planes { gap: 28px 18px; }
  .incluido { grid-template-columns: 1fr; gap: 16px; }
  .incluido ul { grid-template-columns: 1fr 1fr; }
  .pie-rejilla, .pie-rejilla.sin-contacto { grid-template-columns: 1fr 1fr; }
  .portada h1 { font-size: 40px; }
  .portada-rejilla { grid-template-columns: 1fr; gap: 48px; }
  .panel { grid-template-columns: 1fr; gap: 36px; }
  .dian-rejilla { grid-template-columns: 1fr; gap: 44px; }
  .razones { grid-template-columns: 1fr; gap: 44px; }
  .razones article { grid-row: auto; grid-template-rows: auto; }
  .razones article, .razones article:first-child, .razones article:last-child { padding: 0; border-left: 0; }
  .razones article .muestra { max-width: 460px; }
}

@media (max-width: 720px) {
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--azul); border-bottom: 1px solid rgba(255, 255, 255, .1);
    flex-direction: column; gap: 0; padding: 8px 24px 18px; align-items: stretch;
  }
  .menu.abierto { display: flex; }
  .menu a, .menu a:not(.boton) { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .menu a:not(.boton)::after { bottom: -1px; transform-origin: left; }
  .menu a.boton { border-bottom: 0; }
  .menu .boton { margin-top: 12px; }
  .abrir-menu { display: block; }
  .rejilla.tres, .rejilla.dos, .rejilla.cuatro, .planes, .pie .rejilla { grid-template-columns: 1fr; }
  .plan .para { min-height: 0; }
  .modo-pago button { padding: 10px 12px; font-size: 13px; }
  .plan-medida { flex-direction: column; align-items: stretch; padding: 20px; }
  .incluido ul, .complementos { grid-template-columns: 1fr; }
  .pie-rejilla, .pie-rejilla.sin-contacto { grid-template-columns: 1fr; }
  .tabla-planes { min-width: 640px; }
  .tabla-planes th[scope="row"] { min-width: 150px; padding: 10px 12px; font-size: 12.5px; box-shadow: 1px 0 0 var(--borde); }
  .portada { padding: 48px 0 64px; }
  .portada h1 { font-size: 33px; }
  .portada .entrada { font-size: 16.5px; }
  .portada .acciones .boton { width: 100%; }
  .portada .modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .portada .modulos li { padding: 0; border-left: 0; }
  .servicios { padding: 64px 0; }
  .pestanas { width: auto; margin-left: -24px; margin-right: -24px; border-radius: 0; border-left: 0; border-right: 0; }
  .panel-texto h3 { font-size: 24px; }
  .panel-muestra { padding: 36px 14px 20px; min-height: 0; border-radius: 18px; }
  .panel-muestra::before { width: 24px; height: 24px; top: 14px; right: 16px; }
  .pantalla { padding: 18px 14px 14px; }
  .tabla td + td { padding-left: 8px; }
  .documentos { grid-template-columns: 1fr; gap: 22px; }
  .recorrido { padding: 20px 16px 6px; }
  .linea-tiempo li { grid-template-columns: 72px 1fr; column-gap: 18px; }
  .linea-tiempo time { white-space: nowrap; font-size: 11.5px; }
  .linea-tiempo li::before { left: 82px; }
  .linea-tiempo li::after { left: 87px; }
  .tabla.con-estado tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; padding: 10px 0; border-top: 1px solid var(--borde); }
  .tabla.con-estado td { border-top: 0; padding: 0; }
  .tabla.con-estado td:first-child { grid-row: span 2; }
  .seccion { padding: 52px 0; }
  .titulo-seccion { font-size: 25px; }
}

/* ------------------------------------------------------------------
   Portada: globo de Colombia y tarjeta "Así funciona"
------------------------------------------------------------------ */
.portada.con-globo { padding-bottom: 110px; }
.portada.con-globo .portada-rejilla { grid-template-columns: 1fr 1.05fr; gap: 36px; }
.portada.con-globo h1 { font-size: 46px; }
.escena { position: relative; padding: 0 0 56px 130px; }
.globo-panel {
  position: relative; margin: 0; height: 500px; border-radius: 22px; overflow: hidden;
  background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
.globo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.globo.listo { opacity: 1; }
.globo-panel figcaption { position: absolute; inset: 0; pointer-events: none; }
.globo-rotulo { position: absolute; top: 22px; left: 24px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.globo-leyenda {
  position: absolute; right: 18px; bottom: 18px; list-style: none; display: grid; gap: 7px;
  padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .92); border: 1px solid var(--borde);
  font-size: 12.5px; font-weight: 500; color: var(--azul);
}
.globo-leyenda li { display: flex; align-items: center; gap: 9px; }
.globo-leyenda i { width: 9px; height: 9px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 2px #fff; }
.globo-leyenda i.dian { background: var(--cian); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--cian); }

.como-funciona {
  position: absolute; left: 0; bottom: 0; width: 252px;
  background: #fff; color: var(--azul); border-radius: 18px; padding: 18px 18px 16px;
  border: 1px solid var(--borde); box-shadow: 0 30px 60px -20px rgba(16, 16, 79, .45);
}
.docs { display: grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 3px; border-radius: 9px; background: var(--fondo); border: 1px solid var(--borde); }
.docs button {
  border: 0; background: transparent; border-radius: 7px; padding: 6px 4px; cursor: pointer;
  font: 600 11px Montserrat, Arial, sans-serif; color: var(--gris); transition: background .2s, color .2s;
}
.docs button:hover { color: var(--azul); }
.docs button[aria-pressed="true"] { background: var(--azul); color: #fff; }
.docs button:focus-visible { outline: 2px solid var(--cian); outline-offset: 1px; }
.como-funciona .titulo { display: block; font-size: 15px; font-weight: 700; margin-top: 14px; letter-spacing: -.01em; min-height: 20px; }
.pasos { list-style: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); }
.pasos li { position: relative; padding: 0 0 14px 26px; }
.pasos li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #c9cfe0; background: #fff; transition: background .3s, border-color .3s, box-shadow .3s;
}
.pasos li::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--borde); transition: background .3s; }
.pasos li:last-child { padding-bottom: 0; }
.pasos li:last-child::after { display: none; }
.pasos b { display: block; font-size: 13.5px; font-weight: 600; color: var(--gris); transition: color .3s; }
.pasos small { display: block; font-size: 11.5px; color: var(--gris); margin-top: 1px; }
.pasos li.hecho::before { background: var(--azul); border-color: var(--azul); }
.pasos li.hecho::after { background: var(--azul); }
.pasos li.hecho b, .pasos li.activo b { color: var(--azul); }
.pasos li.activo::before { background: var(--cian); border-color: var(--cian); box-shadow: 0 0 0 4px rgba(0, 188, 228, .22); }
.como-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--azul); font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.como-total strong { font-size: 17px; color: var(--azul); }

@media (max-width: 980px) {
  .portada.con-globo .portada-rejilla { grid-template-columns: 1fr; gap: 48px; }
}
/* En pantallas medianas el panel queda angosto: la tarjeta pasa debajo del mapa */
@media (max-width: 1180px) {
  .escena { padding: 0; }
  .globo-panel { height: 420px; }
  .globo-leyenda { top: 46px; left: 24px; right: auto; bottom: auto; display: flex; gap: 16px; }
  .como-funciona { position: relative; width: auto; max-width: 380px; margin: -64px auto 0; }
}
@media (max-width: 720px) {
  .globo-panel { height: 340px; }
  .como-funciona { margin: -56px 14px 0; }
}

/* ------------------------------------------------------------------
   Franja de confianza bajo la portada
------------------------------------------------------------------ */
.franja-confianza { background: #fff; border-bottom: 1px solid var(--borde); }
.franja-confianza ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px;
  padding-top: 22px; padding-bottom: 22px;
}
.franja-confianza li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--azul); }
.franja-confianza svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--azul); }

/* ------------------------------------------------------------------
   Contadores
------------------------------------------------------------------ */
.antetitulo { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; }
.antetitulo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cian); }
.contadores-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lista-fina { list-style: none; margin-top: 26px; }
.lista-fina li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--borde); font-size: 15px; color: var(--gris); }
.lista-fina li:last-child { border-bottom: 1px solid var(--borde); }
.lista-fina b { color: var(--azul); font-weight: 600; }
.lista-fina svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--azul); margin-top: 1px; }
.contador-muestra {
  position: relative; overflow: hidden; border-radius: 22px; background: var(--azul);
  padding: 48px 40px; display: flex; justify-content: center;
}
.contador-muestra::before {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  border: 52px solid #23237a; left: -140px; top: -150px;
}
.contador-muestra::after {
  content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cian); right: 30px; bottom: 28px;
}
.contador-muestra .tabla td + td svg { width: 17px; height: 17px; color: var(--azul); vertical-align: middle; }

/* ------------------------------------------------------------------
   Preguntas frecuentes
------------------------------------------------------------------ */
.preguntas-rejilla { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.acordeon { border-top: 1px solid var(--borde); }
.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--azul);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background:
    linear-gradient(var(--azul), var(--azul)) center / 10px 2px no-repeat,
    linear-gradient(var(--azul), var(--azul)) center / 2px 10px no-repeat,
    var(--fondo);
  transition: transform .25s;
}
.acordeon details[open] summary::after {
  background:
    linear-gradient(var(--azul), var(--azul)) center / 10px 2px no-repeat,
    var(--cian);
}
.acordeon summary:hover { color: #26266b; }
.acordeon summary:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.acordeon details p { padding: 0 44px 22px 0; font-size: 15px; color: var(--gris); line-height: 1.65; }

/* ------------------------------------------------------------------
   Cierre: la llamada final antes del pie
------------------------------------------------------------------ */
.cierre { padding: 88px 0; }
.cierre-caja {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 32px;
  background: var(--cian); color: var(--azul); border-radius: 24px; padding: 56px 56px;
}
.cierre-caja::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, .22); right: -120px; top: -200px;
}
.cierre-caja > * { position: relative; }
.cierre h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.cierre p { color: var(--azul); opacity: .8; font-size: 17px; margin-top: 10px; }
/* Sobre cian: el botón principal va en azul y el secundario con borde azul */
.cierre .boton.cian { background: var(--azul); color: #fff; }
.cierre .boton.cian:hover { background: #26266b; }
.cierre .boton.contorno { color: var(--azul); border-color: var(--azul); }
.cierre .boton.contorno:hover { background: var(--azul); color: #fff; }
.cierre .acciones { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* Pantallas medianas y celular de las secciones de arriba (van al final para ganarles) */
@media (max-width: 980px) {
  .contadores-rejilla, .preguntas-rejilla { grid-template-columns: 1fr; gap: 36px; }
  .cierre-caja { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .franja-confianza ul { justify-content: flex-start; gap: 12px 20px; }
  .contador-muestra { padding: 32px 14px; }
  .acordeon details p { padding-right: 0; }
  .cierre { padding-bottom: 64px; }
  .cierre-caja { padding: 36px 24px; border-radius: 20px; }
  .cierre h2 { font-size: 26px; }
  .cierre .acciones { width: 100%; }
  .cierre .acciones .boton { width: 100%; }
}

/* ------------------------------------------------------------------
   Barra de anuncio (arriba de todo)
------------------------------------------------------------------ */
.anuncio { position: relative; height: 40px; overflow: hidden; background: #0a0a3a; }
.anuncio-pista { list-style: none; height: 100%; }
.anuncio-pista li {
  position: absolute; inset: 0; opacity: 0; transform: translateY(100%);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s;
}
.anuncio-pista li.activo { opacity: 1; transform: none; }
.anuncio-pista li.sale { opacity: 0; transform: translateY(-100%); }
.anuncio-pista a {
  height: 100%; display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 0 16px; color: rgba(255, 255, 255, .85); font-size: 13px; white-space: nowrap;
}
.anuncio-pista a:hover { text-decoration: none; color: #fff; }
.anuncio b { color: #fff; }
.anuncio-texto { overflow: hidden; text-overflow: ellipsis; }
.anuncio-corto { display: none; }
.anuncio-punto { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 0 0 rgba(0, 188, 228, .6); animation: latido 2.2s infinite; }
.anuncio-ir { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cian); }
.anuncio-ir::after { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.anuncio-pista a:hover .anuncio-ir::after { transform: translateX(3px) rotate(45deg); }
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(0, 188, 228, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 188, 228, 0); } }

/* ------------------------------------------------------------------
   Aparecer al bajar (las clases las pone assets/efectos.js)
------------------------------------------------------------------ */
.revelar {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--retraso, 0ms);
}
.revelar.ef-subir { transform: translateY(32px); }
.revelar.ef-subir.desde-arriba { transform: translateY(-32px); }
.revelar.ef-izq { transform: translateX(-48px); }
.revelar.ef-der { transform: translateX(48px); }
.revelar.ef-crecer { transform: scale(.94); }
.revelar.visto { opacity: 1; transform: none; }
/* La línea entre los 3 pasos se dibuja de izquierda a derecha */
.revelar.ef-linea { opacity: 1; transform: none; }
.ef-linea::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.ef-linea.visto::before { transform: scaleX(1); }

/* Tarjetas que se levantan al pasar el mouse */
.plan, .razones .muestra, .ad-con, .pi-lista li { transition: transform .25s ease, box-shadow .25s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(16, 16, 79, .45); }
.plan.destacado:hover { box-shadow: 0 30px 60px -30px rgba(16, 16, 79, .6); }
.razones article:hover .muestra { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(16, 16, 79, .4); }
.revelar.plan.visto:hover { transform: translateY(-4px); }

.titulo-seccion.centrado, .subtitulo-seccion.centrado { text-align: center; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------
   Antes / Con Dobi
------------------------------------------------------------------ */
.ad-tabla { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; align-items: stretch; }
.ad-col { border-radius: 20px; padding: 32px 32px 26px; }
.ad-antes { background: var(--fondo); border: 1px solid var(--borde); }
.ad-con { position: relative; overflow: hidden; background: var(--azul); color: #fff; }
.ad-con::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--cian); right: 26px; top: 28px; }
.ad-rotulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); height: 34px; display: flex; align-items: center; }
.ad-con .ad-rotulo img { height: 34px; width: auto; }
.ad-col ul { list-style: none; margin-top: 14px; }
.ad-col li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; font-size: 15.5px; line-height: 1.45; }
.ad-col li + li { border-top: 1px solid var(--borde); }
.ad-con li + li { border-top-color: rgba(255, 255, 255, .12); }
.ad-antes li { color: var(--gris); }
.ad-con li { color: #fff; font-weight: 500; }
.ad-con li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--cian); stroke-width: 2.6; margin-top: 1px; }
.ad-x { position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid #b8bfcc; margin-top: 1px; }
.ad-x::before, .ad-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.6px; background: #9aa3b5; }
.ad-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.ad-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ------------------------------------------------------------------
   ¿Cuál es su caso?
------------------------------------------------------------------ */
.pq-rejilla { display: grid; grid-template-columns: 340px 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.pq-opciones { display: grid; gap: 8px; }
.pq-opciones button {
  position: relative; text-align: left; padding: 18px 22px 18px 50px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--borde); color: var(--azul);
  font: 600 16px Montserrat, Arial, sans-serif; transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.pq-opciones button::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; border: 2px solid #c9cfe0; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.pq-opciones button:hover { border-color: var(--azul); }
.pq-opciones button[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 18px 36px -24px rgba(16, 16, 79, .6); }
.pq-opciones button[aria-selected="true"]::before { border-color: var(--cian); background: var(--cian); box-shadow: inset 0 0 0 3px var(--azul); }
.pq-opciones button:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

.pq-panel {
  background: #fff; border: 1px solid var(--borde); border-radius: 20px; padding: 34px 36px;
  animation: aparecer .35s ease;
}
.pq-panel[hidden] { display: none; }
.pq-rotulo { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.pq-plan { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--borde); }
.pq-plan h3 { font-size: 30px; letter-spacing: -.02em; color: var(--azul); }
.pq-precio { font-size: 14px; color: var(--gris); }
.pq-precio b { font-size: 26px; color: var(--azul); letter-spacing: -.02em; margin-right: 4px; }
.pq-para { font-size: 16px; color: var(--gris); margin-top: 18px; }
.pq-panel ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 20px 0 28px; }
.pq-panel li { display: flex; gap: 10px; font-size: 14.5px; color: var(--texto); line-height: 1.45; }
.pq-panel li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--azul); stroke-width: 2.4; margin-top: 1px; }

/* ------------------------------------------------------------------
   Empezar en 3 pasos
------------------------------------------------------------------ */
.pi-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; position: relative; }
.pi-lista::before {
  content: ""; position: absolute; top: 27px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--borde) 0 8px, transparent 8px 14px);
}
.pi-lista li { position: relative; text-align: center; padding: 0 12px; }
.pi-numero {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--azul); color: #fff;
  font-size: 22px; font-weight: 700; box-shadow: 0 0 0 8px #fff;
}
.pi-lista li:last-child .pi-numero { background: var(--cian); color: var(--azul); }
.pi-lista h3 { font-size: 19px; color: var(--azul); margin-top: 20px; }
.pi-lista p { font-size: 15px; color: var(--gris); margin-top: 8px; max-width: 320px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------
   Barra fija en celular
------------------------------------------------------------------ */
.barra-movil { display: none; }
@media (max-width: 720px) {
  .barra-movil {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--azul); color: rgba(255, 255, 255, .85);
    font-size: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
    transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  }
  .barra-movil b { color: #fff; }
  .barra-movil.mostrar { transform: none; }
  .barra-movil .boton { height: 42px; }

  .anuncio-pista a { font-size: 12px; gap: 8px; padding: 0 12px; }
  .anuncio-ir { display: none; }
  .anuncio-texto { display: none; }
  .anuncio-corto { display: inline; overflow: hidden; text-overflow: ellipsis; }
  .ad-tabla, .pq-rejilla, .pi-lista { grid-template-columns: 1fr; }
  .ad-col { padding: 24px 20px 18px; }
  .pq-opciones { grid-template-columns: 1fr 1fr; }
  .pq-opciones button { padding: 14px 12px 14px 38px; font-size: 14px; }
  .pq-opciones button::before { left: 13px; }
  .pq-panel { padding: 24px 20px; }
  .pq-panel ul { grid-template-columns: 1fr; }
  .pq-plan h3 { font-size: 24px; }
  .pi-lista { gap: 32px; }
  .pi-lista::before { display: none; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .pq-rejilla { grid-template-columns: 1fr; }
  .pq-opciones { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .anuncio-punto { animation: none; }
  .anuncio-pista li { transition: opacity .3s; transform: none; }
  .anuncio-pista li.sale { transform: none; }
  .plan, .razones .muestra, .barra-movil { transition: none; }
}

/* Sobre fondo gris claro, las muestras y el acordeón van en blanco para no perderse */
.alterna .muestra { background: #fff; }
.alterna .acordeon summary::after {
  background:
    linear-gradient(var(--azul), var(--azul)) center / 10px 2px no-repeat,
    linear-gradient(var(--azul), var(--azul)) center / 2px 10px no-repeat,
    #fff;
}
.alterna .acordeon details[open] summary::after {
  background:
    linear-gradient(var(--azul), var(--azul)) center / 10px 2px no-repeat,
    var(--cian);
}

/* Las tarjetas con efecto de levantarse también deben aparecer suave al bajar */
.plan.revelar, .pi-lista li.revelar { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease; transition-delay: var(--retraso, 0ms), var(--retraso, 0ms), 0ms; }
.plan.revelar.visto:hover { transition-delay: 0ms; }

/* ------------------------------------------------------------------
   Entrada de la portada al cargar la página
------------------------------------------------------------------ */
@keyframes entrar { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes entrar-lado { from { opacity: 0; transform: translateX(40px) scale(.97); } to { opacity: 1; transform: none; } }
.portada-texto > * { animation: entrar .9s cubic-bezier(.2, .7, .2, 1) both; }
.portada-texto > :nth-child(1) { animation-delay: .05s; }
.portada-texto > :nth-child(2) { animation-delay: .15s; }
.portada-texto > :nth-child(3) { animation-delay: .3s; }
.portada-texto > :nth-child(4) { animation-delay: .45s; }
.portada-texto > :nth-child(5) { animation-delay: .6s; }
.escena .globo-panel { animation: entrar-lado 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
.escena .como-funciona { animation: entrar 1s cubic-bezier(.2, .7, .2, 1) .55s both; }
.franja-confianza li { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .portada-texto > *, .escena .globo-panel, .escena .como-funciona { animation: none; }
  .cabecera .contenedor, .cabecera .marca img { transition: none; }
  .ef-linea::before { transform: none; transition: none; }
}

/* Lo que entra de lado no debe ensanchar la página (clip, no hidden, para no romper la cabecera fija) */
html, body { overflow-x: clip; }
@media (max-width: 720px) {
  .revelar.ef-izq { transform: translateX(-24px); }
  .revelar.ef-der { transform: translateX(24px); }
  .revelar.ef-izq.visto, .revelar.ef-der.visto { transform: none; }
}