/* assets/css/beneficios-guias.css
   ─────────────────────────────────────────────────────────────────────────
   Estilos del sistema comercial de guías: el bloque de valor de la portada,
   la página /que-incluyen-las-guias y el incentivo del bloqueo de registro.

   Las tres superficies pintan el MISMO HTML (assets/js/beneficios-guias.js),
   así que los estilos también son uno. Lo que cambia entre ellas —tipografía,
   color de acento, radio de las esquinas— entra por variables: la portada usa
   la paleta editorial y el visor de guía la suya, sin duplicar una sola regla.

   Todo lo que se mueve respeta `prefers-reduced-motion`, al final del archivo.
   ───────────────────────────────────────────────────────────────────────── */

.vg-bloque,
.vg-incentivo,
.vg-seccion {
  --vg-ink: var(--color-brand-ink, #0B2742);
  --vg-papel: var(--color-white, #FFFFFF);
  --vg-papel-2: var(--color-brand-mist, #E8ECEF);
  --vg-linea: var(--color-linea, #DCE3E9);
  --vg-apagado: var(--color-mudo, #4E617A);
  --vg-lima: var(--color-brand-coral, #FF3B2F);
  --vg-acento: var(--color-brand-coral, #FF3B2F);
  --vg-mono: var(--font-brand, system-ui, sans-serif);
  --vg-serif: var(--font-brand, system-ui, sans-serif);
  --vg-radio: 0px;
}

/* ── Rótulo de sección (el «antetítulo») ── */
.vg-rotulo {
  margin: 0 0 16px;
  color: var(--vg-acento);
  font-family: var(--vg-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ── Listas ───────────────────────────────────────────────────────────── */
.vg-lista { margin: 0; padding: 0; list-style: none; }
.vg-lista li { display: flex; }
.vg-lista i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-style: normal;
  font-family: inherit;
}

/* Rejilla de tarjetas: un glifo en círculo y una línea de texto. */
.vg-lista--rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vg-lista--rejilla li {
  min-height: 112px;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--vg-linea);
  border-radius: var(--vg-radio);
  background: var(--vg-papel);
  font-size: 12px;
  line-height: 1.35;
}
.vg-lista--rejilla i {
  width: 37px; height: 37px;
  border: 1px solid var(--vg-acento);
  border-radius: 50%;
  color: var(--vg-acento);
  font-size: 16px;
}

/* Dos columnas apretadas: para el incentivo, donde el espacio manda. */
.vg-lista--compacta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.vg-lista--compacta li { align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; }
.vg-lista--compacta i {
  width: 24px; height: 24px;
  border: 1px solid var(--vg-linea);
  border-radius: 50%;
  color: var(--vg-acento);
  font-size: 12px;
}

/* Una línea por punto, con marca de verificación dibujada por CSS. */
.vg-lista--marcas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 26px; }
.vg-lista--marcas li { align-items: baseline; gap: 11px; font-size: 13px; line-height: 1.45; }
.vg-lista--marcas li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--vg-acento);
  font-family: var(--vg-mono);
  font-size: 11px;
}

/* ── El bloque de la portada ───────────────────────────────────────────── */
.vg-bloque { margin-top: 54px; }

/* Panel oscuro con los ocho beneficios de cabecera. */
.vg-bloque__incluye {
  padding: 38px 40px 40px;
  background: var(--vg-ink);
  color: var(--color-brand-cream, #FAF7F1);
}
.vg-bloque__incluye .vg-rotulo { color: var(--vg-lima); }
.vg-bloque__incluye .vg-lista--rejilla li {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .045);
}
.vg-bloque__incluye .vg-lista--rejilla i {
  border-color: rgba(215, 235, 141, .55);
  color: var(--vg-lima);
}

/* ── Pestañas ──────────────────────────────────────────────────────────── */
.vg-pestanas { margin-top: 16px; border: 1px solid var(--vg-linea); background: var(--vg-papel); }
.vg-tablist {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--vg-linea);
}
.vg-tablist::-webkit-scrollbar { display: none; }
.vg-tab {
  flex: 1 0 auto;
  padding: 17px 22px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--vg-apagado);
  font-family: var(--vg-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.vg-tab:hover { color: var(--vg-ink); background: rgba(23, 27, 26, .035); }
.vg-tab[aria-selected="true"] {
  border-bottom-color: var(--vg-acento);
  color: var(--vg-ink);
  background: rgba(23, 27, 26, .045);
}
.vg-panel { padding: 26px 24px 28px; }
/* `hidden` tiene que ganar al display del panel: sin esto, ocultar una
   pestaña no la oculta y se ven las tres a la vez. */
.vg-panel[hidden] { display: none; }
.vg-panel__titulo {
  margin: 0 0 18px;
  font-family: var(--vg-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.vg-panel .vg-lista--marcas > li {
  opacity: 0;
  animation: vg-entrar .32s ease forwards;
}
.vg-panel .vg-lista--marcas > li:nth-child(1) { animation-delay: .02s; }
.vg-panel .vg-lista--marcas > li:nth-child(2) { animation-delay: .05s; }
.vg-panel .vg-lista--marcas > li:nth-child(3) { animation-delay: .08s; }
.vg-panel .vg-lista--marcas > li:nth-child(4) { animation-delay: .11s; }
.vg-panel .vg-lista--marcas > li:nth-child(5) { animation-delay: .14s; }
.vg-panel .vg-lista--marcas > li:nth-child(6) { animation-delay: .17s; }
.vg-panel .vg-lista--marcas > li:nth-child(7) { animation-delay: .2s; }
@keyframes vg-entrar { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── Ahorro de tiempo ──────────────────────────────────────────────────── */
.vg-ahorro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  background: var(--vg-lima);
  color: var(--vg-ink);
}
.vg-ahorro__col { min-height: 148px; display: flex; flex-direction: column; padding: 25px 27px; }
.vg-ahorro__col + .vg-ahorro__col { border-left: 1px solid rgba(23, 27, 26, .2); }
.vg-ahorro__col span {
  color: rgba(23, 27, 26, .74);
  font-family: var(--vg-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.vg-ahorro__col strong {
  margin-top: auto;
  font-family: var(--vg-serif);
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.vg-ahorro__col small { margin-top: 7px; color: rgba(23, 27, 26, .78); font-size: 11px; line-height: 1.45; }
.vg-ahorro__col--gana { background: var(--vg-ink); color: var(--color-brand-cream, #FAF7F1); }
.vg-ahorro__col--gana span { color: rgba(251, 250, 247, .72); }
.vg-ahorro__col--gana strong { color: var(--vg-lima); }
.vg-ahorro__col--gana small { color: rgba(251, 250, 247, .78); }
.vg-ahorro__apoyo {
  grid-column: 1 / -1;
  margin: 0;
  padding: 17px 27px;
  border-top: 1px solid rgba(23, 27, 26, .2);
  color: rgba(23, 27, 26, .8);
  font-size: 12px;
  line-height: 1.6;
}

/* ── Botones del sistema ───────────────────────────────────────────────── */
.vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--vg-ink);
  border-radius: var(--vg-radio);
  background: var(--vg-ink);
  color: var(--color-brand-cream, #FAF7F1);
  font-family: var(--vg-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.vg-btn:hover { background: var(--vg-acento); border-color: var(--vg-acento); color: #fff; transform: translateY(-2px); }
.vg-btn--fantasma { background: transparent; color: var(--vg-ink); }
.vg-btn--fantasma:hover { background: var(--vg-ink); border-color: var(--vg-ink); color: var(--color-brand-cream, #FAF7F1); }

/* ── El incentivo del bloqueo de registro ──────────────────────────────── */
.vg-incentivo { text-align: left; }
.vg-incentivo__titulo {
  margin: 0 0 10px;
  font-family: var(--vg-serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.vg-incentivo__texto { margin: 0 0 20px; color: var(--vg-apagado); font-size: 14px; line-height: 1.6; }
.vg-incentivo__destacado {
  margin: 20px 0 0;
  padding: 13px 16px;
  border-left: 3px solid var(--vg-acento);
  background: rgba(23, 27, 26, .04);
  font-size: 14px;
  font-weight: 600;
}
.vg-incentivo__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vg-incentivo__ctas .vg-btn { flex: 1 1 210px; }
.vg-incentivo__mas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  color: var(--vg-apagado);
  font-family: var(--vg-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vg-incentivo__mas:hover { color: var(--vg-acento); }
.vg-incentivo--compacto .vg-incentivo__titulo { font-size: 17px; margin-bottom: 12px; }
.vg-incentivo--compacto .vg-rotulo { margin-bottom: 8px; }
.vg-incentivo--compacto .vg-lista--compacta { grid-template-columns: 1fr; gap: 6px; }
.vg-incentivo--compacto .vg-incentivo__destacado { margin-top: 14px; padding: 9px 12px; font-size: 12px; }
.vg-incentivo--compacto .vg-incentivo__mas { margin-top: 12px; }

/* ── Secciones de la página larga ──────────────────────────────────────── */
.vg-seccion { padding: 84px 0; border-top: 1px solid var(--vg-linea); }
.vg-seccion--oscura { border-top: 0; background: var(--vg-ink); color: var(--color-brand-cream, #FAF7F1); }
.vg-seccion--oscura .vg-rotulo { color: var(--vg-lima); }
.vg-seccion--oscura .vg-seccion__cierre { color: rgba(251, 250, 247, .78); }
.vg-seccion--oscura .vg-lista--rejilla li,
.vg-seccion--oscura .vg-lista--compacta li { border-color: rgba(255, 255, 255, .16); }
.vg-seccion--oscura .vg-lista--rejilla li { background: rgba(255, 255, 255, .045); }
.vg-seccion--oscura .vg-lista--rejilla i,
.vg-seccion--oscura .vg-lista--compacta i { border-color: rgba(215, 235, 141, .55); color: var(--vg-lima); }
.vg-seccion--oscura .vg-lista--marcas li::before { color: var(--vg-lima); }
.vg-seccion__cabecera { max-width: 760px; margin-bottom: 38px; }
.vg-seccion__cabecera h2 {
  margin: 0;
  font-family: var(--vg-serif);
  font-size: clamp(33px, 4.2vw, 52px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.04;
}
.vg-seccion__cierre { margin: 30px 0 0; color: var(--vg-apagado); font-size: 15px; line-height: 1.6; }
.vg-seccion--oscura + .vg-seccion { border-top: 0; }

/* ── Accesibilidad: el foco SIEMPRE se ve ──────────────────────────────── */
.vg-tab:focus-visible,
.vg-panel:focus-visible,
.vg-btn:focus-visible,
.vg-incentivo__mas:focus-visible {
  outline: 3px solid var(--vg-acento);
  outline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .vg-lista--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-bloque__incluye { padding: 32px 26px 34px; }
}
@media (max-width: 860px) {
  .vg-ahorro { grid-template-columns: 1fr; }
  .vg-ahorro__col { min-height: 0; }
  .vg-ahorro__col + .vg-ahorro__col { border-left: 0; border-top: 1px solid rgba(23, 27, 26, .2); }
  .vg-ahorro__col--gana + .vg-ahorro__apoyo { border-top-color: rgba(23, 27, 26, .2); }
  .vg-lista--marcas { grid-template-columns: 1fr; }
  .vg-seccion { padding: 62px 0; }
}
@media (max-width: 560px) {
  .vg-lista--compacta { grid-template-columns: 1fr; }
  .vg-tab { flex: 0 0 auto; padding: 15px 16px; }
  .vg-panel { padding: 22px 18px 24px; }
  .vg-incentivo__ctas .vg-btn { flex: 1 1 100%; }
}
@media (max-width: 430px) {
  .vg-lista--rejilla { grid-template-columns: 1fr; }
  /* En una sola columna la tarjeta se tumba: icono a la izquierda y texto
     seguido. `justify-content` vuelve al principio — con el `space-between`
     de la versión en columna, el texto se iba pegado al borde derecho. */
  .vg-lista--rejilla li {
    min-height: 0; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 14px;
  }
}

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vg-panel .vg-lista--marcas > li { opacity: 1; animation: none; }
  .vg-tab, .vg-btn { transition: none; }
  .vg-btn:hover { transform: none; }
}