/**
 * MinutaVirtual — hoja de estilo de la versión nueva.
 *
 * No depende de Bootstrap ni de la plantilla Rapid: es autocontenida.
 *
 * Todo el color y la tipografía salen de los tokens de :root. Si mañana
 * cambia la marca, se cambia acá y no en 40 reglas sueltas.
 */

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/
/* Los tokens (:root) viven ahora en assets/css/tokens.css, la fuente única que
   comparten la portada, el acceso y el panel. Se cargan con un <link> antes que
   esta hoja en cada página. Movidos en DHT-52. */

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

/* El atributo `hidden` trae display:none del navegador, con la especificidad
   más baja que existe: cualquier regla nuestra que declare su propio display
   —y lo declaran .btn, .check, .field-row y varias más— se lo gana. Sin esta
   línea, ocultar un elemento desde el JS no surte efecto. DHT-109 */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink-900);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--brand-magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* Marca en texto: mismos colores del logotipo, con la fuente que sí cargamos */
.mvw { font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.mvw .m { color: var(--brand-magenta); }
.mvw .v { color: var(--brand-orange); }
.mvw .w { color: var(--ink-400); }
.mvw .r { font-size: 0.62em; vertical-align: super; color: var(--ink-400); }

/*--------------------------------------------------------------
# Utilidades de sección
--------------------------------------------------------------*/
.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.75rem;
}

.section-head {
  max-width: 60ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.section-head p {
  color: var(--ink-500);
  font-size: var(--step-1);
  margin-bottom: 0;
}

.lead {
  font-size: var(--step-1);
  color: var(--ink-500);
  max-width: 60ch;
}

/*--------------------------------------------------------------
# Botones
--------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--line);
}
.btn--ghost:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Botón de la marcha blanca: ni el magenta del plan destacado ni el fantasma
   del Profesional, para que las tres tarjetas se distingan de un vistazo. */
.btn--oscuro { background: var(--ink-900); color: #fff; }
.btn--oscuro:hover { background: var(--ink-700); color: #fff; }

.btn--quiet {
  background: transparent;
  color: var(--ink-500);
  padding-inline: 0.25rem;
}
.btn--quiet:hover { color: var(--primary); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/*--------------------------------------------------------------
# Franja de aviso
--------------------------------------------------------------*/

/* El degradado va de --primary a --accent-ink y no al naranja de marca:
   sobre #ff7c14 el texto blanco se queda en 2,3:1 y no pasa AA. Sobre estos
   dos extremos da 6,5:1 y 5,2:1. */
.franja {
  background: linear-gradient(90deg, var(--primary), var(--accent-ink));
  color: #fff;
}
.franja .container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
}
.franja p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.4;
}
.franja b { font-weight: 700; }

.franja-nuevo {
  flex: none;
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.franja-abrir {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.7rem;
  transition: background var(--dur-base) var(--ease);
}
.franja-abrir:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.franja-abrir svg { width: 14px; height: 14px; flex: none; }

.franja-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease);
}
.franja-cerrar:hover { color: #fff; }
.franja-cerrar svg { width: 16px; height: 16px; }

/* En un teléfono no cabe la frase entera con el botón al lado: se recorta la
   coletilla y el "Nuevo" deja su lugar al texto, que es lo que informa. */
@media (max-width: 700px) {
  .franja .container { gap: 0.5rem; }
  .franja-nuevo,
  .franja-extra { display: none; }
  .franja-abrir { padding: 0.25rem 0.55rem; }
}

/*--------------------------------------------------------------
# Cabecera
--------------------------------------------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(26, 26, 31, 0.05);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { flex: none; }
/* 50px (no 34): el logo nuevo incluye el tagline "Alimentación colectiva"
   debajo del nombre, que a 34px quedaba ilegible. Cabe en el min-height 72px. */
.brand img { height: 50px; width: auto; }

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="true"] { color: var(--primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
.header-actions .btn { padding: 0.7rem 1.15rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem;
  cursor: pointer;
  color: var(--ink-900);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav,
  .header-actions { display: none; }

  .site-header.is-open .nav,
  .site-header.is-open .header-actions {
    display: flex;
    flex-basis: 100%;
    margin: 0;
    padding-bottom: 1.25rem;
  }
  .site-header.is-open .container { flex-wrap: wrap; }
  .site-header.is-open .nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
  }
  .site-header.is-open .header-actions { flex-wrap: wrap; }
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y);
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(255, 124, 20, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 5% 0%, rgba(214, 7, 155, 0.09), transparent 60%);
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1rem; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-magenta), var(--brand-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-500);
}
.hero-note svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

.hero-media {
  position: relative;
  justify-self: center;
  max-width: 420px;
}
.hero-media img {
  width: 100%;
  border-radius: 24px;
  filter: drop-shadow(0 24px 48px rgba(26, 26, 31, 0.16));
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-actions,
  .hero-note { justify-content: center; }
  .hero-media { max-width: 260px; margin-top: 1rem; }
}

/*--------------------------------------------------------------
# Cifras
--------------------------------------------------------------*/
.stats {
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.stats ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.stats .num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.1;
}
.stats .label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-500);
}
@media (max-width: 700px) {
  .stats ul { grid-template-columns: repeat(2, 1fr); }
}

/*--------------------------------------------------------------
# Avisos
--------------------------------------------------------------*/

/* Carril de avisos de la portada. Usa el carrusel() de nueva.js y sus
   controles, con piezas propias.
   Con un solo aviso el carril se ve como una banda fija: carrusel() no agrega
   flechas ni puntos si hay menos de dos. */
.avisos { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.avisos-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius);
}
.avisos-viewport::-webkit-scrollbar { display: none; }

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

.avisos-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.aviso {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(115deg, var(--primary-soft), var(--accent-soft));
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
/* Cada pieza lleva su clase en vez de estilar `.aviso p`: un selector así le
   gana por especificidad a .eyebrow y a .aviso-foot, y les borra el margen y
   el color que traen puestos. */
.aviso h2 {
  font-size: var(--step-2);
  margin: 0;
}
.aviso-bajada {
  color: var(--ink-500);
  margin: 0.6rem 0 0;
}
.aviso .btn { margin-top: 1.35rem; }
/* --ink-500 y no --ink-400: sobre el fondo del aviso, ink-400 se queda en
   3,1:1 y no pasa AA. ink-500 da 5,4:1 y sigue leyéndose como secundario. */
.aviso-foot {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin: 0.7rem 0 0;
}

/* Tarjeta de marca del aviso. No es una captura del producto: es el logo de
   TablaUSDA, versión 3 sin sello (DHT-282). Va con sus colores reales, sin
   pasarlos a los tonos AA del sitio: las WCAG (1.4.3) eximen del contraste
   mínimo al texto que forma parte de un logo. */
.aviso-marca {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.25rem;
}
/* `img` es display: block en este archivo, así que se centra con margen y no
   con text-align. */
.aviso-marca img {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

@media (max-width: 800px) {
  .aviso {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .aviso .btn { width: 100%; justify-content: center; }
  .aviso-marca { order: -1; }
}

/* Marca de enlace externo: los avisos y el menú salen del sitio. */
.externo svg {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  vertical-align: -0.05em;
}

/*--------------------------------------------------------------
# Acerca de
--------------------------------------------------------------*/
.about .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ink-700);
}
.checklist svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.28em;
  color: var(--primary);
}
.source-note {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand-orange);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
  color: var(--ink-500);
}
@media (max-width: 860px) {
  .about .container { grid-template-columns: 1fr; }
  .about-media { order: 1; }
}

/*--------------------------------------------------------------
# Módulos
--------------------------------------------------------------*/
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
/* Cada módulo es título y lista corta, con las marcas de «Acerca de» pero a la
   medida de una columna de 280 px. DHT-332 */
.card .checklist {
  margin-top: 0.85rem;
  gap: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.6;
}
.card .checklist li { color: var(--ink-500); gap: 0.6rem; }
.card .checklist svg { width: 18px; height: 18px; margin-top: 0.15em; }
/* .checklist svg alcanza también la flecha del enlace externo: se le devuelve
   su tamaño de marca. */
.card .checklist .externo svg {
  width: 0.85em;
  height: 0.85em;
  margin: 0 0 0 0.2em;
  vertical-align: -0.05em;
}

/*--------------------------------------------------------------
# Por qué
--------------------------------------------------------------*/
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.feature { display: block; }
.feature-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 124, 20, 0.12);
  color: var(--accent-ink);
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-icon { margin-bottom: 1.1rem; }
.feature h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.feature p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }

/*--------------------------------------------------------------
# Precios
--------------------------------------------------------------*/
/* La sección es larga —franja de marcha blanca, selector, dos planes, dos
   bandas y las preguntas—, así que separa sus bloques con un ritmo propio en
   vez de dejarlos pegados al borde de la sección. DHT-288 */
.precios .section-head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* La marcha blanca es la primera tarjeta, así que acá arriba basta una línea
   que la nombre. Antes era una franja con el degradado de marca: con tres
   tarjetas y dos bandas abajo, un degradado más era ruido. */
.precios-invita {
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.precios-invita a { font-weight: 600; }

/* Selector mensual/anual */
.precios-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.segmento {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.segmento button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.5rem 1.35rem;
  border-radius: 999px;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-500);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.segmento button:hover { color: var(--primary); }
.segmento button[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
}
.precios-ahorro {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ok);
  background: rgba(15, 122, 77, 0.1);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

/* Las dos tarjetas */
/* Tres columnas fijas y no auto-fit: con auto-fit, un ancho intermedio deja
   dos tarjetas arriba y una sola abajo, que se ve como un error. */
.planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  /* Stretch y no start: las tres tienen distinta cantidad de viñetas, y con
     `margin-top: auto` en el botón, los tres botones quedan a la misma altura. */
  align-items: stretch;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .planes { grid-template-columns: 1fr; max-width: 460px; }

  /* Apilada no hay nada que alinear: los huecos que igualan las tres tarjetas
     en escritorio se colapsan, conservando el borde del neto, que es la línea
     que separa el precio de las viñetas. */
  .plan-iva[aria-hidden="true"],
  .plan-neto[aria-hidden="true"] { font-size: 0; line-height: 0; }
}
/* En tres columnas el renglón del IVA mide dos líneas en las tres tarjetas: en
   las pagadas el texto ocupa dos a ese ancho y en la gratuita va vacío. Sin
   esto la raya de la gratuita quedaba 22 px más arriba que las otras. El 3.4em
   son dos líneas de 1.7 para el navegador que no entiende `lh`. DHT-333 */
@media (min-width: 901px) {
  .plan-iva { min-height: 3.4em; min-height: 2lh; }
}
/* La gratuita se distingue por el fondo: ni borde de color ni sombra, que son
   de la destacada. */
.plan--gratuito { background: var(--surface-alt); }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* La destacada se distingue por el borde y la sombra, no por el tamaño: dos
   alturas distintas descuadran la grilla cuando se envuelven en el teléfono. */
.plan--destacado {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.plan-cinta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.plan h3 { margin-bottom: 0.25rem; }
.plan-para {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-bottom: 1.25rem;
  min-height: 3.2em;
}
/* La promoción de lanzamiento. Va sobre el monto y no como cinta, para no
   pelearse con la de «Incluye Producción» de la tarjeta destacada. */
.plan-promo {
  display: inline-block;
  /* La tarjeta es un flex en columna: sin esto la etiqueta se estira de borde
     a borde en vez de medir lo que dice. */
  align-self: flex-start;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.plan-promo--libre {
  background: rgba(15, 122, 77, 0.1);
  color: var(--ok);
}
.plan-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
}
.plan-precio [data-monto] {
  font-family: var(--font-head);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
}
.plan-precio small {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-500);
}
.plan-iva,
.plan-neto {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin: 0;
}
.plan-neto {
  margin-top: 0.15rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-400);
}
/* «Incluye:», delante de la lista de la marcha blanca. Toma el aire de arriba
   que era de la lista, y la lista queda a la distancia de una viñeta. DHT-333 */
.plan-incluye {
  margin: 1.25rem 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-700);
}
.plan-incluye + .plan-lista { margin-top: 0.6rem; }
/* Las viñetas de cada plan. El color venía de la regla del monto de lista
   tachado, que compartía esta clase y se fue con DHT-319: ahora se declara
   acá, que es donde corresponde. */
.plan-lista {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
  display: grid;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--ink-400);
}
/* La marca va en ::before y no en un <svg> por ítem: son textos, no iconos. */
/* Sangría con ::before absoluto y no con grid: en grid, el texto que sigue a
   un <strong> se vuelve un ítem propio y cae en la columna de la marca, que
   mide 1.4rem — una palabra por línea. */
.plan-lista li {
  position: relative;
  padding-left: 1.5rem;
}
.plan-lista li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  line-height: 1.6;
}
.plan-lista .si::before { content: "✓"; color: var(--ok); }
.plan-lista .no::before { content: "—"; color: var(--ink-400); }
.plan-lista .no { color: var(--ink-400); }
/* El botón queda abajo aunque una tarjeta tenga menos viñetas que la otra. */
.plan .btn { margin-top: auto; }

/* Las dos bandas: universidades y fuera de Chile */
.bandas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.banda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.banda--academica {
  border-style: solid;
  border-color: rgba(214, 7, 155, 0.35);
  background: var(--primary-soft);
}
.banda-titulo {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink-900);
  margin-bottom: 0.5rem;
}
.banda p {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-bottom: 0.75rem;
}
.banda-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
  font-size: var(--step--1);
  color: var(--ink-700);
}
.banda-lista li {
  position: relative;
  padding-left: 1.4rem;
}
.banda-lista li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 700;
}
.banda .btn { flex: none; margin-top: auto; }

/* Preguntas. Abiertas y en dos columnas en pantalla grande; el JavaScript las
   cierra en el teléfono y ahí el ::marker hace de flecha del acordeón. */
.faq {
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.faq .qa {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}
.faq summary {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  margin-bottom: 0.35rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .qa p {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin: 0;
}

@media (max-width: 700px) {
  .plan-para { min-height: 0; }

  /* Una sola columna y el acordeón con su flecha. */
  .faq { columns: 1; }
  .faq .qa {
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
    padding: 0.9rem 0;
  }
  .faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
  }
  .faq summary::after {
    content: "+";
    flex: none;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--primary);
    line-height: 1;
  }
  .faq .qa[open] summary { margin-bottom: 0.5rem; }
  .faq .qa[open] summary::after { content: "−"; }
}

/*--------------------------------------------------------------
# Controles del carrusel
--------------------------------------------------------------*/

/* Los inserta nueva.js. Sirven a cualquier carril de la portada —hoy, la
   banda de avisos—, por eso no llevan el prefijo de ninguno. */
.carrusel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.carrusel-arrow {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.carrusel-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.carrusel-arrow svg { width: 18px; height: 18px; }

.carrusel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.carrusel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink-400);
  opacity: 0.45;
  cursor: pointer;
  transition: width 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.carrusel-dot:hover { opacity: 0.8; }
.carrusel-dot.is-active {
  width: 26px;
  background: var(--primary);
  opacity: 1;
}

/*--------------------------------------------------------------
# Cierre
--------------------------------------------------------------*/
.cta-final {
  background: linear-gradient(120deg, #7c0560, var(--primary) 55%, var(--accent-ink));
  color: #fff;
  text-align: center;
}
.cta-final h2 { color: #fff; }
.cta-final p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--step-1);
  max-width: 55ch;
  margin-inline: auto;
}
.cta-final .btn--primary { background: #fff; color: var(--primary); }
.cta-final .btn--primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--primary-dark); }
.cta-final .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cta-final .btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.cta-final .hero-actions { justify-content: center; }

/*--------------------------------------------------------------
# Pie
--------------------------------------------------------------*/
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-500);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-500);
}
.social a:hover { color: var(--primary); border-color: var(--primary); }
.social svg { width: 17px; height: 17px; }

/*--------------------------------------------------------------
# Diálogos (nativos, sin Bootstrap)
--------------------------------------------------------------*/
dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(26, 26, 31, 0.28);
  color: var(--ink-700);
}
dialog::backdrop {
  background: rgba(26, 26, 31, 0.55);
  backdrop-filter: blur(2px);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 0.75rem;
}
.dialog-head h2 { font-size: var(--step-2); margin: 0; }
.dialog-head p { font-size: var(--step--1); color: var(--ink-500); margin: 0.35rem 0 0; }
.dialog-close {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-400);
  padding: 0.25rem;
  line-height: 0;
}
.dialog-close:hover { color: var(--ink-900); }
.dialog-close svg { width: 22px; height: 22px; }

.dialog-body {
  padding: 0.75rem 1.5rem 1.5rem;
  overflow-y: auto;
  max-height: calc(86vh - 190px);
}
.dialog-foot {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}

/*--------------------------------------------------------------
# Formularios
--------------------------------------------------------------*/
.field { margin-bottom: 1.1rem; }
.field:last-of-type { margin-bottom: 0; }

.field > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.4rem;
}
.field .req { color: var(--error); }
.field .hint { display: block; font-weight: 400; color: var(--ink-400); font-size: 0.8125rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink-900);
  background: var(--surface);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(176, 11, 135, 0.14);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-top: 1.25rem;
}
.check input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28em;
  flex: none;
  accent-color: var(--primary);
}

.msg {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.5;
}
.msg:empty { display: none; }
.msg--ok { background: #e9f7f0; color: var(--ok); border: 1px solid #bfe6d5; }
.msg--error { background: #fdecea; color: var(--error); border: 1px solid #f5c6c2; }

/*--------------------------------------------------------------
# Diálogo de la marcha blanca
--------------------------------------------------------------*/
/* Nombra la oferta antes del título del diálogo. */
.dialog-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}

/* El grupo de campos es un <fieldset>: hay que desarmar su estilo. */
.campos { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Los tres argumentos que sostienen la oferta, sobre los campos. */
.pruebas {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 1.05rem 1.15rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.pruebas li { display: flex; gap: 0.6rem; align-items: flex-start; }
.pruebas svg {
  width: 17px; height: 17px;
  color: var(--ok);
  margin-top: 0.15em;
  flex: none;
}
.pruebas b { color: var(--ink-900); font-weight: 600; }

/* Pantalla de éxito. Recibe el foco solo para que el lector de pantalla la
   anuncie; no es interactiva, así que no lleva anillo. */
.exito { text-align: center; }
.exito:focus { outline: none; }
.exito-icono {
  width: 58px; height: 58px;
  margin: 0.25rem auto 1.1rem;
  border-radius: 50%;
  background: #e9f7f0;
  color: var(--ok);
  display: grid;
  place-items: center;
}
.exito-icono svg { width: 28px; height: 28px; }
.exito h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.exito-bajada { font-size: var(--step--1); color: var(--ink-500); margin: 0; }

.pasos {
  counter-reset: paso;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 1rem;
}
.pasos li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
}
.pasos b { color: var(--ink-900); font-weight: 600; }
.pasos span { color: var(--ink-500); font-size: 0.875rem; display: block; }

.exito-extra {
  margin-top: 1.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-500);
  text-align: left;
}

/* Nota a la izquierda del pie, para que no quede solo con botones. */
.foot-nota {
  margin-right: auto;
  align-self: center;
  font-size: 0.8125rem;
  color: var(--ink-400);
  text-align: left;
}

@media (max-width: 520px) {
  .dialog-foot { flex-wrap: wrap; }
  .foot-nota { width: 100%; margin-bottom: 0.5rem; }
  .dialog-foot .btn { flex: 1; }
}

/*--------------------------------------------------------------
# Volver arriba
--------------------------------------------------------------*/
.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--primary-dark); color: #fff; }
.to-top svg { width: 20px; height: 20px; }

/*--------------------------------------------------------------
# Antiabuso del formulario de marcha blanca. DHT-291
--------------------------------------------------------------*/
/* El campo trampa: fuera de la pantalla y no con display:none, que algunos
   bots reconocen y se saltan. */
.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El recuadro del captcha. Arriba lleva el aire de una casilla (.check):
   desde DHT-331 va justo después de los campos, donde estaba la casilla del
   lanzamiento del libro, y sin ese aire a 390 px quedaba pegado al cargo. */
.captcha {
  margin: 1.25rem 0 1rem;
  min-height: 65px;
}