/* ============================================================
   PÁGINAS DE CONTENIDO — /facial/ (hub del menú) y /quito/,
   /cumbaya/, /samborondon/ (páginas por local).
   Se apoyan en styles.css (tokens, .container, .btn, .pill, .svc-card) y en
   ficha.css (encabezado, migas y pie). Acá va SÓLO lo que ninguna de las dos
   tiene. ⛔ No se carga en el inicio ni en las fichas: se enlaza únicamente
   desde estas cuatro páginas.
   ============================================================ */

/* ---- Entrada de la página ---- */
.pag-intro { padding-block: clamp(1.4rem, 1rem + 2vw, 2.8rem) clamp(1.6rem, 1rem + 2vw, 2.6rem); }
/* El h1 del hub lleva las cuatro cosas que la gente busca ("limpieza facial,
   peeling, dermaplaning y gimnasio facial"): es largo a propósito. En
   VERSALITAS —como .display— ocupaba seis líneas en un teléfono, así que acá
   va en caja normal y con una escala más corta. */
.pag-titulo {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em;
  line-height: 1.1; font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.9rem);
  margin: .2rem 0 1rem; max-width: 22ch;
}
.pag-intro .lead { max-width: 68ch; margin: 0; }
.pag-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }

/* ---- Rejilla del menú en el hub ---- */
.pag-menu { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.pag-menu .cat-group__title { font-size: var(--step-h3); }

/* ---- Preguntas frecuentes ---- */
.faq { max-width: 74ch; }
.faq h3 {
  font-size: 1.06rem; font-weight: 800; color: var(--ink);
  margin: 1.8rem 0 .45rem; line-height: 1.35;
}
.faq h3:first-child { margin-top: 0; }
.faq p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }

/* ---- Banda de cierre ---- */
.pag-cta { text-align: center; max-width: 58ch; }
.pag-cta .lead { margin: 0 auto 1.6rem; }

/* ---- Página de local ---- */
.pag-local { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 900px) { .pag-local { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Dirección, teléfono y horario en texto plano: es lo que copia quien va a
   llegar en taxi y lo que lee un buscador que no ejecuta JavaScript. */
.nap { background: var(--white); border-radius: var(--radius); padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); box-shadow: var(--shadow-soft); }
.nap h2 { font-size: var(--step-h4); margin: 0 0 .8rem; }
.nap dl { margin: 0; display: grid; gap: .7rem; }
.nap dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--olive); }
.nap dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }
.nap dd a { color: var(--ink); font-weight: 700; }
.nap ul { list-style: none; margin: .15rem 0 0; padding: 0; }
.nap ul li { display: flex; justify-content: space-between; gap: 1rem; font-size: .94rem; color: var(--ink-soft); padding: .18rem 0; border-bottom: 1px solid rgba(43,48,24,.07); }
.nap ul li:last-child { border-bottom: 0; }
.nap ul li b { color: var(--ink); font-weight: 700; }
.nap .pag-acciones { margin-top: 1.2rem; }

.pag-texto { color: var(--ink-soft); font-size: 1.02rem; }
.pag-texto h2 { font-size: var(--step-h3); color: var(--ink); margin: 0 0 .8rem; }
.pag-texto p { margin: 0 0 .95rem; line-height: 1.7; }

/* ---- Lista de servicios del local ---- */
.svc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 620px) { .svc-lista { grid-template-columns: 1fr 1fr; } }
.svc-lista a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem;
  background: var(--white); border: 1.5px solid rgba(43,48,24,.09); border-radius: var(--radius-sm);
  padding: .6rem .85rem; text-decoration: none; color: var(--ink);
}
.svc-lista a:hover { border-color: var(--olive); }
.svc-lista strong { font-size: .93rem; font-weight: 800; }
.svc-lista em { font-style: normal; font-size: .82rem; color: var(--ink-soft); flex: 1 1 100%; }
.svc-lista span { font-size: .85rem; font-weight: 700; color: var(--olive); margin-left: auto; white-space: nowrap; }