/* portada.css — Estilos de la portada (entorno dev)
   Complementa menu.css. Mobile-first, cero emojis, espacio reservado anti-CLS. */

/* ── Hero tipográfico (hero visual gráfico: pendiente) ────── */
.hero {
  padding: 2rem 0 1rem;
}

.hero h1 {
  max-width: 22ch;
  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;
}

/* ── Tarjetas de horario/punto/regreso ────────────────────── */
.tarjetas {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

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

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

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

/* ── Pasos de reserva ─────────────────────────────────────── */
.pasos {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

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

.pasos li {
  counter-increment: paso;
  padding: 1.25rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.pasos li::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--color-acento-contraste);
  background: var(--color-acento);
  border-radius: 50%;
}

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

/* ── FAQ ──────────────────────────────────────────────────── */
.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; }

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

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

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