/* Páginas de contenido (Servicios, Sobre nosotros, Contacto) y piezas de SEO de la portada */

/* Preguntas frecuentes (portada) */
.faq { position: relative; z-index: 1; padding: 140px var(--m); max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 32px 72px; align-items: start; }
.faq h2 { font-size: var(--s-l); position: sticky; top: 120px; }
.faq__list { display: grid; border-top: 1px solid #23262b; }
.faq details { border-bottom: 1px solid #23262b; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 500 1.125rem/1.35 var(--text); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--cyan); font-size: 1.5rem; line-height: 1; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--cyan-hi); }
.faq details p { padding: 0 0 24px; color: var(--steel); max-width: 62ch; }

/* Estructura de las páginas */
.page-main { position: relative; z-index: 1; min-height: 100svh; max-width: 1240px; margin: 0 auto; padding: 150px var(--m) 120px; display: grid; gap: 120px; }
.page__head { display: grid; gap: 26px; justify-items: start; max-width: 880px; }
.page__head h1 { font-size: var(--s-xl); }
.page__lead { font-size: 1.25rem; line-height: 1.55; color: var(--steel); max-width: 58ch; }
.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.page__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; background: var(--surface); }
.page__band p { color: var(--steel); max-width: 62ch; }
.page__band strong { color: var(--ink); font-weight: 600; }

/* Servicios */
.svc { display: grid; gap: 34px; }
.svc h2 { font-size: var(--s-l); }
.svc__list { list-style: none; display: grid; border-top: 1px solid #23262b; }
.svc__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; padding: 26px 0; border-bottom: 1px solid #23262b; }
.svc__text h3 { margin: 0 0 6px; font: 400 var(--s-m)/1.15 var(--display); color: var(--ink); }
.svc__text h3 small { display: inline-block; margin-left: 10px; font: 500 .8125rem/1 var(--text); letter-spacing: .04em; color: var(--cyan); vertical-align: middle; }
.svc__text p { color: var(--steel); max-width: 60ch; }
.svc__meta { display: grid; justify-items: end; gap: 6px; text-align: right; }
.svc__time { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.svc__price { font: 400 1.875rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc__extras { display: grid; gap: 14px; padding: 26px 30px; background: var(--surface); max-width: 620px; }
.svc__extras h3 { margin: 0; font: 600 var(--s-s)/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.svc__extras ul { list-style: none; display: grid; gap: 8px; }
.svc__extras li { display: flex; justify-content: space-between; gap: 24px; }
.svc__extras strong { font: 400 1.25rem/1 var(--display); }
.svc__extras p { color: var(--muted); font-size: .9375rem; }

/* Pasos (cómo reservar, compromiso) */
.steps { display: grid; gap: 34px; justify-items: start; }
.steps h2 { font-size: var(--s-l); }
.steps__list { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.steps__list li { counter-increment: paso; display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--surface); }
.steps__list li::before { content: counter(paso, decimal-leading-zero); font: 400 2.25rem/1 var(--display); color: var(--cyan); }
.steps__list strong { font: 500 1.125rem/1.3 var(--text); color: var(--ink); }
.steps__list span { color: var(--steel); }
.steps__list--plain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps__list--plain li::before { content: ""; width: 12px; height: 12px; background: var(--cyan); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* Sobre nosotros */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: center; }
.story--flip .story__photo { order: 2; }
.story__photo { aspect-ratio: 4 / 5; overflow: hidden; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__text { display: grid; gap: 20px; justify-items: start; }
.story__text h2 { font-size: var(--s-l); }
.story__text p { color: var(--steel); font-size: 1.125rem; max-width: 52ch; }

/* Contacto */
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: start; }
.contact__photo { aspect-ratio: 3 / 4; overflow: hidden; position: sticky; top: 110px; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact__cards { display: grid; gap: 16px; }
.contact__card { display: grid; gap: 16px; justify-items: start; padding: 30px 32px; background: var(--surface); }
.contact__card h2 { font-size: var(--s-m); letter-spacing: -.01em; }
.contact__card address { font-style: normal; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.contact__note { color: var(--muted); font-size: .9375rem; }
.contact__list { list-style: none; display: grid; gap: 12px; width: 100%; }
.contact__list li { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid #23262b; }
.contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact__list span { color: var(--muted); }
.contact__list a { color: var(--ink); text-decoration: none; font-weight: 500; transition: color .2s ease; }
.contact__list a:hover { color: var(--cyan-hi); }

@media (max-width: 860px) {
  .faq, .story, .contact { grid-template-columns: 1fr; }
  .faq h2, .contact__photo { position: static; }
  .story--flip .story__photo { order: 0; }
  .steps__list, .steps__list--plain { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .page-main { padding: 110px var(--m) 96px; gap: 84px; }
  .faq { padding: 100px var(--m); }
  .page__lead { font-size: 1.0625rem; }
  .svc__item { grid-template-columns: 1fr; }
  .svc__meta { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 16px; }
  .story__photo { aspect-ratio: 4 / 3; }
  .contact__photo { aspect-ratio: 4 / 3; }
  .contact__card { padding: 24px 22px; }
  .page__band { padding: 22px; }
}