/* ============================================================
   EPN STORE · Manual Mayorista
   Componentes
   Depende de: styles.css (tokens)
   ============================================================ */

/* ---------- BOTONES ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 50px;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-full);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transicion), background-color var(--transicion),
              color var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.boton:active { transform: translateY(1px); }
.boton svg { flex: none; width: 18px; height: 18px; }

/* Bronce-600 y no 500: con 500 el blanco encima no llega al contraste mínimo. */
.boton--primario {
  background: var(--bronce-600);
  color: var(--blanco);
  box-shadow: var(--sh-md);
}
.boton--primario:hover { background: var(--bronce-700); color: var(--blanco); box-shadow: var(--sh-lg); }

/* Sobre fondo oscuro, `.fondo-oscuro a` le ganaba por especificidad y dejaba
   el texto dorado sobre bronce. Los botones mandan sobre el color de enlace. */
.fondo-oscuro .boton--primario,
.fondo-oscuro .boton--primario:hover,
.fondo-oscuro .boton--verde,
.fondo-oscuro .boton--verde:hover { color: var(--blanco); }

.boton--verde {
  background: var(--verde-700);
  color: var(--blanco);
  box-shadow: var(--sh-md);
}
.boton--verde:hover { background: var(--verde-800); color: var(--blanco); box-shadow: var(--sh-lg); }

.boton--linea {
  background: transparent;
  color: var(--verde-900);
  border: 1.5px solid var(--gris-300);
}
.boton--linea:hover { border-color: var(--verde-700); color: var(--verde-700); background: var(--verde-050); }

.fondo-oscuro .boton--linea {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .28);
}
.fondo-oscuro .boton--linea:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .6);
  color: var(--blanco);
}

/* 44px es el mínimo táctil: no bajar de acá aunque el botón sea "chico". */
.boton--sm { min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-small); }
.boton--full { width: 100%; }

/* ---------- HEADER ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 241, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gris-200);
}
.cabecera__interior {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}
.cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;          /* mínimo táctil */
  text-decoration: none;
  flex: none;
}
/* El logo es un sello circular: cuadrado y con algo más de cuerpo que un
   isotipo plano, para que el aro y las letras se lean a este tamaño. */
.cabecera__marca img, .cabecera__marca svg { height: 44px; width: 44px; flex: none; }
.cabecera__nombre {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.cabecera__nombre b {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--verde-900);
}
.cabecera__nombre span {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronce-600);
}

.nav { display: flex; align-items: center; gap: var(--e-1); }
.nav a {
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gris-700);
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion);
}
.nav a:hover { background: var(--gris-200); color: var(--verde-900); }
.nav a[aria-current="true"] { background: var(--verde-050); color: var(--verde-700); }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e-3); }

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: var(--r-md);
  color: var(--verde-900);
}
.menu-btn:hover { background: var(--gris-200); }

@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .cabecera__acciones .boton--linea { display: none; }
}

/* Menú desplegable móvil */
.menu-movil {
  display: none;
  border-bottom: 1px solid var(--gris-200);
  background: var(--papel);
  padding: var(--e-3) 0 var(--e-5);
}
.menu-movil.abierto { display: block; }
.menu-movil a {
  display: block;
  padding: var(--e-3) var(--e-2);
  border-radius: var(--r-md);
  font-weight: 600;
  color: var(--verde-900);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-200);
}
.menu-movil a:last-of-type { border-bottom: 0; }

/* Barra de progreso de lectura */
.progreso {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--bronce-500);
  transition: width 90ms linear;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--e-8), 11vw, var(--e-10));
}
.hero__contenido { position: relative; z-index: 2; }
.hero__titulo {
  max-width: 15ch;              /* medida corta: fuerza el quiebre editorial en 3 líneas */
  font-size: var(--t-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--blanco);
}
.hero__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--dorado-300);
}
.hero__bajada { max-width: 52ch; }

/* Ornamento de fondo: anillos concéntricos, eco del sello circular de la marca */
.hero__ornamento {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(28rem, 52vw, 46rem);
  aspect-ratio: 1;
  color: var(--bronce-500);
  opacity: .3;
  pointer-events: none;
  user-select: none;
}
.hero__ornamento svg { width: 100%; height: 100%; }
@media (max-width: 820px) { .hero__ornamento { opacity: .16; right: -30%; } }

/* Franja de datos rápidos */
.datos-rapidos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.datos-rapidos > div {
  background: var(--verde-900);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.datos-rapidos dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado-300);
}
.datos-rapidos dd {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blanco);
}
.datos-rapidos small { font-size: var(--t-small); font-weight: 500; color: rgba(232,244,238,.66); }
@media (max-width: 700px) { .datos-rapidos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- TARJETAS ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.tarjeta--interactiva:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: var(--bronce-200);
}
.tarjeta__icono {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--verde-050);
  color: var(--verde-700);
  margin-bottom: var(--e-4);
}
.tarjeta__icono svg { width: 22px; height: 22px; }
.tarjeta__icono--bronce { background: #F7EDE2; color: var(--bronce-600); }

.fondo-oscuro .tarjeta {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  color: rgba(232, 244, 238, .82);
}

/* ---------- PASOS (recorrido guiado) ---------- */
.pasos { counter-reset: paso; }

.paso {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--e-5);
  position: relative;
  padding-bottom: var(--e-7);
}
.paso:last-child { padding-bottom: 0; }

/* Línea que conecta los pasos */
.paso::before {
  content: "";
  position: absolute;
  left: 57px;
  top: 96px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--bronce-200), var(--gris-200));
}
.paso:last-child::before { display: none; }

.paso__numero {
  position: relative;
  z-index: 1;
  width: 116px; height: 116px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--bronce-200);
  font-family: var(--serif);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--bronce-500);
  flex: none;
}
.paso__cuerpo { padding-top: var(--e-3); min-width: 0; }
.paso__etiqueta {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronce-500);
  margin-bottom: var(--e-2);
}

@media (max-width: 720px) {
  .paso { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-4); }
  .paso::before { left: 31px; top: 56px; }
  .paso__numero { width: 64px; height: 64px; font-size: 2rem; border-width: 1.5px; }
  .paso__cuerpo { padding-top: var(--e-1); }
}

/* ---------- AVISOS (sin el cliché del borde lateral) ---------- */
.aviso {
  border-radius: var(--r-md);
  padding: var(--e-4) var(--e-5);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
  font-size: 0.97rem;
  line-height: 1.6;
}
.aviso__marca {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  flex: none;
}
.aviso__marca svg { width: 18px; height: 18px; }
.aviso__titulo {
  display: block;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--e-1);
}

.aviso--ojo { background: var(--alerta-bg); color: #7C2D12; }
.aviso--ojo .aviso__marca { background: var(--alerta); color: var(--blanco); }
.aviso--ojo .aviso__titulo { color: var(--alerta); }
.aviso--ojo strong { color: #7C2D12; }

.aviso--dato { background: var(--verde-050); color: #14432C; }
.aviso--dato .aviso__marca { background: var(--verde-700); color: var(--blanco); }
.aviso--dato .aviso__titulo { color: var(--verde-700); }
.aviso--dato strong { color: #14432C; }

.aviso--tip { background: var(--crema); color: #5A4413; }
.aviso--tip .aviso__marca { background: var(--dorado-500); color: var(--blanco); }
.aviso--tip .aviso__titulo { color: var(--bronce-700); }
.aviso--tip strong { color: #5A4413; }

/* ---------- LISTAS ---------- */
.lista-check { display: flex; flex-direction: column; gap: var(--e-3); }
.lista-check li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
}
.lista-check li::before {
  content: "";
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--verde-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309583B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  flex: none;
}
.fondo-oscuro .lista-check li::before { background-color: rgba(79, 181, 133, .18); }

.lista-cruz li::before {
  background: var(--alerta-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.lista-num { counter-reset: n; display: flex; flex-direction: column; gap: var(--e-3); }
.lista-num li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
  counter-increment: n;
}
.lista-num li::before {
  content: counter(n);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--verde-900);
  color: var(--blanco);
  font-size: 0.78rem;
  font-weight: 800;
  flex: none;
}

/* ---------- CHIPS / ETIQUETAS ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-full);
  background: var(--verde-050);
  color: var(--verde-700);
  font-size: var(--t-small);
  font-weight: 700;
  white-space: nowrap;
}
.chip--bronce { background: #F7EDE2; color: var(--bronce-700); }
/* Gris-700 y no 500: sobre el fondo del chip, el 500 no llega al mínimo. */
.chip--gris { background: var(--gris-200); color: var(--gris-700); }

/* ---------- TABLA ---------- */
.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  background: var(--blanco);
}
.tabla { min-width: 520px; font-size: 0.95rem; }
.tabla th, .tabla td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top; }
.tabla thead th {
  background: var(--verde-900);
  color: var(--blanco);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tabla tbody tr + tr { border-top: 1px solid var(--gris-200); }
.tabla tbody tr:hover { background: var(--papel); }
.tabla td strong { color: var(--verde-900); }

/* ---------- BUSCADOR + PREGUNTAS FRECUENTES ---------- */
.buscador { position: relative; max-width: 560px; }
.buscador input {
  width: 100%;
  min-height: 54px;
  padding: var(--e-3) var(--e-5) var(--e-3) 52px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--r-full);
  background: var(--blanco);
  font-size: 1rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador input::placeholder { color: var(--gris-400); }
.buscador input:focus {
  outline: none;
  border-color: var(--bronce-500);
  box-shadow: 0 0 0 4px rgba(166, 114, 70, .14);
}
.buscador__lupa {
  position: absolute;
  left: 19px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--gris-400);
  pointer-events: none;
}

.faq { display: flex; flex-direction: column; gap: var(--e-3); }
.faq details {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.faq details[open] { border-color: var(--bronce-200); box-shadow: var(--sh-sm); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--e-4) var(--e-5);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  font-weight: 700;
  color: var(--verde-900);
  transition: background-color var(--transicion);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--papel); }
.faq summary::after {
  content: "";
  width: 22px; height: 22px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A67246' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transicion);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__respuesta { padding: 0 var(--e-5) var(--e-5); color: var(--gris-700); }
.faq details[hidden] { display: none; }

.sin-resultados {
  display: none;
  padding: var(--e-6);
  text-align: center;
  color: var(--gris-500);
  border: 1px dashed var(--gris-300);
  border-radius: var(--r-md);
}

/* ---------- CHECKLIST CON MEMORIA ---------- */
.checklist { display: flex; flex-direction: column; gap: var(--e-2); }
.checklist label {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3);
  min-height: 48px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--transicion);
}
.checklist label:hover { background: var(--papel-alt); }
.checklist input { position: absolute; opacity: 0; width: 0; height: 0; }
.checklist .caja {
  width: 26px; height: 26px;
  border: 2px solid var(--gris-300);
  border-radius: 7px;
  background: var(--blanco);
  display: grid; place-items: center;
  flex: none;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.checklist .caja svg { width: 16px; height: 16px; color: var(--blanco); opacity: 0; transition: opacity var(--transicion); }
.checklist input:checked + .caja { background: var(--verde-700); border-color: var(--verde-700); }
.checklist input:checked + .caja svg { opacity: 1; }
.checklist input:focus-visible + .caja { outline: 3px solid var(--bronce-500); outline-offset: 2px; }
.checklist input:checked ~ .texto { color: var(--gris-400); text-decoration: line-through; }
.checklist .texto { transition: color var(--transicion); }

.barra-progreso {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--gris-200);
  overflow: hidden;
}
.barra-progreso > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: var(--verde-600);
  transition: width 320ms cubic-bezier(.22, .61, .36, 1);
}

/* ---------- BANDA DE CIERRE ---------- */
.banda {
  border-radius: var(--r-lg);
  padding: clamp(var(--e-6), 5vw, var(--e-8));
  background: var(--verde-900);
  color: var(--verde-050);
}

/* Variante clara: para un bloque que destaca sin competir con el cierre. */
.banda--clara {
  background: var(--crema);
  color: var(--gris-700);
  border: 1px solid var(--bronce-200);
}
.banda--clara h2, .banda--clara h3 { color: var(--verde-900); }
.banda--clara .serif-it { color: var(--bronce-600); }
.banda--clara strong { color: var(--verde-900); }

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-flotante {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 90;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: var(--blanco);
  box-shadow: 0 6px 20px rgba(0, 46, 26, .28);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 46, 26, .34); color: var(--blanco); }
.wa-flotante svg { width: 30px; height: 30px; }

/* ---------- PIE ---------- */
.pie {
  background: var(--verde-950);
  color: rgba(232, 244, 238, .68);
  padding-block: var(--e-8) var(--e-6);
  font-size: 0.92rem;
}
.pie a { color: rgba(232, 244, 238, .84); text-decoration: none; }
.pie a:hover { color: var(--dorado-300); text-decoration: underline; }
/* Los enlaces de contacto son listas, no texto corrido: se tocan con el dedo. */
.pie .pila a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pie h4 {
  color: var(--blanco);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}
.pie__legal {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-small);
  color: rgba(232, 244, 238, .5);
}

/* ---------- ENTRADA SUAVE AL SCROLL ----------
   Mejora progresiva: el contenido se ve SIEMPRE por defecto.
   Solo se oculta si el JS pudo arrancar y agregó .js-anim al <html>,
   así un fallo de JS nunca deja el manual en blanco. */
.js-anim .aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1),
              transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.js-anim .aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .aparece { opacity: 1; transform: none; }
}

/* ---------- GRUPOS DE MARCAS ---------- */
.grupos-marcas { display: flex; flex-direction: column; gap: var(--e-5); }

.grupo-marca {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sh-sm);
}
.grupo-marca[hidden] { display: none; }

/* Cada grupo define su acento; los hijos lo heredan.
   Los acentos son deliberadamente oscuros: el mismo color pinta el numeral
   sobre fondo claro y el chip seleccionado con texto blanco encima, así que
   tiene que dar contraste suficiente en los dos sentidos. */
.grupo-marca--rapido { --acento: #09583B; --acento-suave: #E8F4EE; --acento-tinta: #14432C; }
.grupo-marca--medio  { --acento: #9C5D10; --acento-suave: #FDF3E3; --acento-tinta: #6B4413; }
.grupo-marca--lento  { --acento: #C2410C; --acento-suave: #FDF0E8; --acento-tinta: #7C2D12; }
/* Sin tiempo definido: gris deliberado, fuera del semáforo. */
.grupo-marca--consultar {
  --acento: #55524A; --acento-suave: var(--gris-200); --acento-tinta: #3D3B35;
  border-style: dashed;
  background: var(--papel);
}
.grupo-marca__dias--signo b { font-size: 2.8rem; }

/* Caso aparte: esquema de corte propio, por eso se distingue del semáforo. */
.grupo-marca--especial {
  --acento: #6F4526; --acento-suave: #F4EAE0; --acento-tinta: #5A3720;
  border-color: var(--bronce-200);
  background: var(--papel);
}

.grupo-marca__cabecera h3 .chip {
  vertical-align: middle;
  margin-left: var(--e-2);
}
.grupo-marca__nota {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--gris-200);
  font-size: var(--t-small);
  color: var(--gris-500);
}

.grupo-marca__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--gris-200);
}
.grupo-marca__dias {
  flex: none;
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-tinta);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.grupo-marca__dias b {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--acento);
}
.grupo-marca__cabecera h3 { color: var(--verde-900); }
.grupo-marca__cabecera p { font-size: var(--t-small); color: var(--gris-500); margin-top: 2px; }

@media (max-width: 520px) {
  .grupo-marca__dias { width: 62px; height: 62px; }
  .grupo-marca__dias b { font-size: 1.9rem; }
}

/* Chips de marca: son checkbox reales, así funcionan sin JS. */
.marcas { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.marca { display: inline-flex; cursor: pointer; }
.marca[hidden] { display: none; }
.marca input { position: absolute; opacity: 0; width: 0; height: 0; }
.marca span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-full);
  border: 1.5px solid var(--gris-300);
  background: var(--blanco);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gris-700);
  transition: background-color var(--transicion), border-color var(--transicion),
              color var(--transicion), transform var(--transicion);
}
.marca:hover span { border-color: var(--acento); color: var(--acento-tinta); }
.marca input:checked + span {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--blanco);
}
.marca input:focus-visible + span { outline: 3px solid var(--bronce-500); outline-offset: 2px; }
.marca input:active + span { transform: scale(.97); }

/* Coincidencia del buscador */
.marca--coincide span { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

/* ---------- CALCULADORA ---------- */
.calculadora {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-6);
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  padding: clamp(var(--e-5), 4vw, var(--e-7));
  box-shadow: var(--sh-md);
}
@media (max-width: 860px) {
  .calculadora { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
}

.calculadora__controles { display: flex; flex-direction: column; gap: var(--e-5); }

.campo { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.campo label, .campo__etiqueta {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronce-600);
}
.campo input[type="datetime-local"] {
  width: 100%;
  min-height: 50px;
  padding: var(--e-2) var(--e-4);
  border: 1.5px solid var(--gris-300);
  border-radius: var(--r-md);
  background: var(--blanco);
  font-size: 1rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input[type="datetime-local"]:focus {
  outline: none;
  border-color: var(--bronce-500);
  box-shadow: 0 0 0 4px rgba(166, 114, 70, .14);
}

.enlace-boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* mínimo táctil */
  padding: var(--e-1) 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--bronce-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.enlace-boton:hover { color: var(--verde-700); }

.seleccion-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  width: 100%;
  min-height: 60px;
  padding: var(--e-3);
  border: 1.5px dashed var(--gris-300);
  border-radius: var(--r-md);
  background: var(--papel);
}
.seleccion-marcas__vacio { font-size: var(--t-small); color: var(--gris-400); margin: 0; }

/* Toda la etiqueta es el botón de quitar: así el objetivo táctil es el
   chip completo y no una cruz de 26px. */
.marca-elegida {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-3) var(--e-2) var(--e-4);
  border-radius: var(--r-full);
  background: var(--verde-900);
  color: var(--blanco);
  font-size: var(--t-small);
  font-weight: 600;
  text-align: left;
  transition: background-color var(--transicion), transform var(--transicion);
}
.marca-elegida:hover { background: var(--verde-800); }
.marca-elegida:active { transform: scale(.97); }
.marca-elegida b { font-weight: 800; color: var(--dorado-300); }
.marca-elegida__cruz {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .85);
  flex: none;
}
.marca-elegida:hover .marca-elegida__cruz { background: rgba(255, 255, 255, .26); color: var(--blanco); }
.marca-elegida__cruz svg { width: 11px; height: 11px; }

/* Resultado */
.calculadora__resultado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--r-md);
  background: var(--verde-900);
  color: var(--verde-050);
}
.resultado__vacio { color: rgba(232, 244, 238, .6); font-size: var(--t-small); margin: 0; }

.resultado__linea { display: flex; flex-direction: column; gap: var(--e-1); }
.resultado__rotulo {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado-300);
}
.resultado__fecha {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--blanco);
}
/* Solo la inicial: "capitalize" escribiría "Lunes 7 De Septiembre". */
.resultado__fecha::first-letter { text-transform: uppercase; }
.resultado__detalle { font-size: var(--t-small); color: rgba(232, 244, 238, .7); }

.resultado__flecha {
  width: 22px; height: 22px;
  color: var(--bronce-400);
}

.resultado__aparte {
  margin-top: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(232, 244, 238, .82);
}
.resultado__aparte strong { color: var(--blanco); }
.resultado__aparte ul { margin-top: var(--e-2); display: flex; flex-direction: column; gap: var(--e-1); }
.resultado__aparte li { display: flex; gap: var(--e-2); }
.resultado__aparte li b { color: var(--dorado-300); font-weight: 700; white-space: nowrap; }
.resultado__aparte p + ul, .resultado__aparte ul + p { margin-top: var(--e-3); }

/* Aviso fuerte dentro del resultado (por ahora, mezclar Star) */
.resultado__aparte--alerta {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid rgba(240, 200, 138, .45);
  border-radius: var(--r-md);
  background: rgba(220, 143, 56, .16);
  color: var(--blanco);
}
.resultado__aparte--alerta strong { color: var(--dorado-300); }

/* ---------- PIEZAS DE CONTENIDO ---------- */

/* Tarjeta que es un enlace entero */
.tarjeta--enlace { text-decoration: none; color: inherit; display: block; }
.tarjeta__ir {
  margin-top: var(--e-3);
  font-weight: 700;
  color: var(--bronce-600);
}
.tarjeta--enlace:hover .tarjeta__ir { color: var(--verde-700); }

/* Texto secundario dentro de una tarjeta */
.tarjeta__nota {
  margin-top: var(--e-2);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--gris-500);
}
.tarjeta__nota strong { color: var(--verde-900); }

/* Opción que se sale del cuadro general: se distingue sin parecer deshabilitada */
.tarjeta--aparte {
  background: var(--papel-alt);
  border-style: dashed;
  border-color: var(--gris-300);
  box-shadow: none;
}
.tarjeta--aparte .chip { margin-top: var(--e-3); }
.tarjeta--aparte .lista-num { font-size: 0.93rem; line-height: 1.55; }

.precio-fijo {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--bronce-600);
  white-space: nowrap;
}

/* Tarjeta destacada (Star Nutrition) */
.tarjeta--destacada {
  border: 2px solid var(--bronce-200);
  padding: clamp(var(--e-5), 4vw, var(--e-7));
  box-shadow: var(--sh-md);
}

/* ---------- CREDENCIALES ----------
   Número grande en serif, igual que los numerales de paso y los días por
   grupo: el mismo recurso tipográfico para todo lo que es una cifra. */
.credenciales {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-5);
}
@media (max-width: 900px) { .credenciales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .credenciales { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); } }

.credencial {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 2px solid var(--bronce-200);
}
.credencial__valor {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 0.9;
  color: var(--bronce-500);
}
.credencial__texto {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--gris-700);
  text-wrap: pretty;
}

/* Dato suelto: rótulo arriba, valor grande abajo */
.dato-suelto {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4);
  border-radius: var(--r-md);
  background: var(--papel-alt);
}
.dato-suelto__rotulo {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronce-600);
}
.dato-suelto__valor {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--verde-900);
}

/* Hora del corte, en serif */
.hora-corte { font-size: 2rem; color: var(--dorado-300); }

/* Horarios de atención */
.horarios {
  font-size: 0.95rem;
  color: rgba(232, 244, 238, .82);
}
.horarios strong { color: var(--blanco); }

.checklist__cuenta { font-size: var(--t-small); color: var(--gris-500); }
.checklist__cuenta b { color: var(--verde-700); font-weight: 800; }

/* Párrafos dentro de un aviso: más juntos que en el cuerpo del texto */
.aviso p { margin: 0; }
.aviso p + p { margin-top: var(--e-3); }

/* ---------- COMPONENTES CLAROS SOBRE FONDO OSCURO ----------
   Un componente pensado para superficie clara lleva colores oscuros
   fijos. Si después se usa sobre verde, el texto desaparece. Estas
   reglas son la red de contención: cada vez que se sume un componente
   con color propio, agregarlo acá.
   `b` iba aparte de `strong`: styles.css los pinta juntos en verde-900
   pero la regla de fondo oscuro solo cubría `strong`. */
.fondo-oscuro strong,
.fondo-oscuro b { color: var(--blanco); }

.fondo-oscuro .tarjeta__nota { color: rgba(232, 244, 238, .84); }
.fondo-oscuro .tarjeta__nota strong { color: var(--blanco); }
.fondo-oscuro .tarjeta__ir { color: var(--dorado-300); }
.fondo-oscuro .checklist__cuenta { color: rgba(232, 244, 238, .84); }
.fondo-oscuro .checklist__cuenta b { color: var(--dorado-300); }
.fondo-oscuro .dato-suelto { background: rgba(255, 255, 255, .07); }
.fondo-oscuro .dato-suelto__rotulo { color: var(--dorado-300); }
.fondo-oscuro .dato-suelto__valor { color: var(--blanco); }
.fondo-oscuro .grupo-marca__nota { color: rgba(232, 244, 238, .8); }
.fondo-oscuro .lista-num li::before { background: var(--dorado-500); color: var(--verde-950); }
.fondo-oscuro .precio-fijo { color: var(--dorado-300); }
.fondo-oscuro .sin-resultados { color: rgba(232, 244, 238, .8); border-color: rgba(255, 255, 255, .2); }

/* Dentro de un aviso el fondo vuelve a ser claro, así que los colores
   propios del aviso tienen que ganarle a las reglas de arriba. */
.fondo-oscuro .aviso strong,
.fondo-oscuro .aviso b { color: inherit; }
.fondo-oscuro .aviso--ojo strong { color: #7C2D12; }
.fondo-oscuro .aviso--dato strong { color: #14432C; }
.fondo-oscuro .aviso--tip strong { color: #5A4413; }

/* ---------- CORRECCIONES DE LEGIBILIDAD ---------- */

/* Un chip gris claro sobre tarjeta oscura quedaba apagado e ilegible. */
.fondo-oscuro .chip--gris {
  background: rgba(255, 255, 255, .14);
  color: var(--blanco);
}

/* Grises demasiado claros para texto chico sobre papel. */
.seleccion-marcas__vacio { color: var(--gris-500); }

/* Un poco más de presencia para el texto secundario sobre verde. */
.datos-rapidos small { color: rgba(232, 244, 238, .76); }
.resultado__detalle { color: rgba(232, 244, 238, .8); }
.fondo-oscuro .tarjeta { color: rgba(232, 244, 238, .9); }
.fondo-oscuro .lead { color: rgba(232, 244, 238, .85); }
.pie { color: rgba(232, 244, 238, .78); }

/* ---------- PASOS EN PANTALLAS CHICAS ----------
   Debajo de 560px la columna del numeral se come el ancho útil y las
   tarjetas internas quedan apretadas. El numeral pasa arriba. */
@media (max-width: 560px) {
  .paso {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-3);
    padding-bottom: var(--e-6);
  }
  .paso::before { display: none; }
  .paso__numero {
    width: 54px; height: 54px;
    font-size: 1.7rem;
  }
  .paso__cuerpo { padding-top: 0; }

  /* Un poco más de densidad: en 360px cada 8px de padding se nota. */
  .tarjeta { padding: var(--e-4); }
  .aviso { padding: var(--e-4); }
  .grupo-marca { padding: var(--e-4); }
}

/* ---------- IMPRESIÓN ---------- */
@media print {
  .cabecera, .wa-flotante, .menu-movil, .buscador, .pie { display: none !important; }
  .aparece { opacity: 1 !important; transform: none !important; }
  .faq details { break-inside: avoid; }
  .faq details > .faq__respuesta { display: block !important; }
  body { background: #fff; }
  .fondo-oscuro, .banda { background: #fff !important; color: #000 !important; }
  .fondo-oscuro h1, .fondo-oscuro h2, .fondo-oscuro h3, .banda h2 { color: #000 !important; }
}