/* guia.css — Estilos de la guía cómo llegar (entorno dev)
   Complementa menu.css (que aporta la base y la cartelera compartida).
   Mobile-first, cero emojis. */

/* ── Miga de pan visible ──────────────────────────────────── */
.miga {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.miga a { color: var(--color-acento); }
.miga span { color: #666; }

/* ── Hero / respuesta rápida / CTAs (mismo patrón de portada) */
.hero { padding: 2rem 0 1rem; }

.hero h1 {
  max-width: 26ch;
  margin: 0 0 1rem;
  font-size: 1.9rem;
}

.respuesta-rapida {
  max-width: 62ch;
  font-size: 1.05rem;
}

.cta-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.boton-principal,
.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}

.boton-principal {
  color: var(--color-acento-contraste);
  background: var(--color-acento);
}

.boton-secundario {
  color: var(--color-acento);
  background: var(--color-fondo);
  border: 2px solid var(--color-acento);
}

/* ── Secciones ────────────────────────────────────────────── */
.seccion { margin-top: 3rem; }

.seccion h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

.seccion > p { max-width: 62ch; }

/* ── Motivos (bloque de conversión, mismo patrón de tarjetas) ─ */
.motivos {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .motivos { grid-template-columns: repeat(2, 1fr); }
}

.motivo {
  padding: 1.25rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.motivo h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.motivo p  { margin: 0; }

/* ── Opciones ─────────────────────────────────────────────── */
.opcion {
  margin-bottom: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.opcion h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.opcion p { margin: 0 0 0.5rem; max-width: 62ch; }
.opcion p:last-child { margin-bottom: 0; }

.opcion-recomendada {
  border-color: var(--et-verde);
  border-width: 2px;
  background: var(--et-fondo-verde);
}

/* ── Tabla comparativa (legible en móvil) ─────────────────── */
.tabla-contenedor { overflow-x: auto; }

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

.tabla th,
.tabla td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla thead th {
  border-bottom: 2px solid var(--color-acento);
}

.tabla tbody th { font-weight: 600; }

/* ── FAQ (mismo patrón de portada) ────────────────────────── */
.faq-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.faq-item summary {
  min-height: 48px;
  padding: 0.5rem 0;
  font-weight: 600;
  cursor: pointer;
}

.faq-item p { margin: 0.5rem 0 0.75rem; max-width: 62ch; }

/* ── CTAs de cierre ───────────────────────────────────────── */
.cta-contextual,
.cta-final {
  padding: 2rem;
  text-align: center;
  background: #f6f6f6;
  border-radius: 8px;
}

.cta-contextual .cta-grupo,
.cta-final .cta-grupo { justify-content: center; }

@media (min-width: 48rem) {
  .hero h1 { font-size: 2.2rem; }
}

/* ── LEGALES: índice de contenido de las páginas legales ──── */
/* Los títulos ya llevan su número ("01 …"): la lista no numera sola.
   Cada enlace mide 48 px de alto, como el resto de zonas táctiles. */
.indice-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.indice-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}