/* Preguntas frecuentes del Hotel Palacio Albariza.
 *
 * Depende de `../styles.css`, que se carga ANTES en el HTML y trae los tokens
 * (`--marfil`, `--terracota-honda`, `--ritmo-*`, `--fuente-*`…), la base
 * tipográfica y las piezas compartidas con la landing: `.cabecera`, `.marca`,
 * `.boton`, `.antetitulo`, `.enlace-flecha`, `.salto-contenido` y el bloque de
 * `prefers-reduced-motion`. Aquí no se redefine ni un color ni una fuente: si
 * algo hace falta y no existe como token, se añade en styles.css, no aquí.
 *
 * Las clases propias van todas con prefijo `faq-` para no chocar con
 * `secciones.css`, que esta página NO carga: la landing y las FAQ comparten
 * la base, no la maquetación. */

/* ── Portada de la página ─────────────────────────────────────────────── */

.faq-portada {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--ritmo-medio) var(--canal) var(--ritmo-corto);
}

.faq-portada__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(2.6rem, 1.2rem + 5.5vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin-bottom: 1.6rem;
}

.faq-portada__entrada {
  max-width: 44ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--texto-suave);
}

/* ── Buscador ─────────────────────────────────────────────────────────── */

.buscador {
  display: block;
  margin-top: var(--ritmo-corto);
  max-width: 32rem;
}

.buscador__etiqueta {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--texto-menudo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracota-honda);
}

.buscador__campo {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--arena-honda);
  border-radius: var(--radio);
  transition: border-color var(--duracion-rapida) var(--curva),
              box-shadow var(--duracion-rapida) var(--curva);
}
.buscador__campo::placeholder { color: var(--texto-suave); opacity: 0.7; }
.buscador__campo:hover { border-color: var(--tinta-suave); }
.buscador__campo:focus-visible {
  border-color: var(--terracota-honda);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracota) 22%, transparent);
  outline: none;
}
/* Mientras se cargan las respuestas el campo está deshabilitado a propósito:
   buscar en un índice a medias devuelve resultados falsos. */
.buscador__campo:disabled { opacity: 0.55; cursor: progress; }

/* El aspa de borrar que pinta el navegador en `type="search"` viene en azul
   de sistema. Se rehace con los mismos dos degradados del icono de arriba,
   girados 45°, para no salirse de la paleta ni cargar un SVG. */
.buscador__campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.8rem; height: 0.8rem;
  cursor: pointer;
  transform: rotate(45deg);
  background:
    linear-gradient(var(--terracota-honda), var(--terracota-honda)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--terracota-honda), var(--terracota-honda)) center / 1.5px 100% no-repeat;
}

.buscador__estado {
  margin: 0.7rem 0 0;
  font-size: var(--texto-menudo);
  color: var(--texto-suave);
}

/* ── Grupos y desplegables ────────────────────────────────────────────── */

.faq-cuerpo {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--canal) var(--ritmo-largo);
}

.faq-grupo { padding-top: var(--ritmo-corto); }
.faq-grupo + .faq-grupo { margin-top: var(--ritmo-corto); }

.faq-grupo__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  letter-spacing: -0.01em;
}
.faq-grupo__entrada {
  margin: 0.6rem 0 1.6rem;
  max-width: 48ch;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.faq-pregunta { border-top: 1px solid var(--borde); }
.faq-grupo__lista > .faq-pregunta:last-of-type { border-bottom: 1px solid var(--borde); }

.faq-pregunta > summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-display);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.32;
  transition: color var(--duracion-rapida) var(--curva);
}
.faq-pregunta > summary::-webkit-details-marker { display: none; }
.faq-pregunta > summary:hover { color: var(--terracota-honda); }

/* Cruz que gira a "menos" al abrir: dos degradados, sin pseudo-elementos
   extra ni SVG que cargar. */
.faq-pregunta > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: 0.5rem;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(var(--terracota), var(--terracota)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--terracota), var(--terracota)) center / 1.5px 100% no-repeat;
  transition: transform var(--duracion-normal) var(--curva);
}
/* Abierto = "−". Se oculta la barra HORIZONTAL y se rota la vertical, que cae
   en horizontal: así el único cambio animado es `transform`. (Ocultando la
   vertical y rotando la horizontal, como estaba, abierto se veía un "|".) */
.faq-pregunta[open] > summary::after {
  transform: rotate(90deg);
  background-size: 0 1.5px, 1.5px 100%;
}

.faq-respuesta {
  padding: 0 clamp(0rem, 4vw, 3rem) 1.6rem 0;
  max-width: 62ch;
  color: var(--texto-suave);
}
.faq-respuesta > p { margin: 0 0 0.9em; }
.faq-respuesta > p:last-child { margin-bottom: 0; }
.faq-respuesta strong { color: var(--texto); font-weight: 600; }
.faq-respuesta code {
  font-size: 0.88em;
  padding: 0.1rem 0.35rem;
  background: var(--arena-clara);
  border-radius: var(--radio);
}
.faq-respuesta h3 {
  font-family: var(--fuente-display);
  font-size: 1.2rem;
  margin: 1.4rem 0 0.6rem;
  color: var(--texto);
}
.faq-lista { margin: 0 0 0.9em; }
.faq-lista li { padding: 0.3rem 0 0.3rem 1.1rem; position: relative; }
.faq-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.45rem;
  height: 1px;
  background: var(--terracota);
}

.faq-respuesta__crudo { margin: 0 0 1.4rem; }

.faq-vacio {
  margin: var(--ritmo-corto) 0 0;
  padding: 1.5rem;
  max-width: 52ch;
  border: 1px dashed var(--arena-honda);
  border-radius: var(--radio);
  color: var(--texto-suave);
}

/* Título del grupo al margen, como un ladillo de revista, y solo cuando de
   verdad sobra sitio: por debajo de 68rem la pregunta necesita todo el ancho.
   La cabecera y la lista son cada una UNA celda —de ahí los dos envoltorios en
   el HTML—, así la fila mide lo que mide la lista entera y el `sticky` del
   ladillo tiene recorrido de verdad. Con el <h2> y los <details> sueltos como
   hermanos, el autoemplazamiento los repartía en filas y abría un hueco
   enorme detrás de la primera pregunta. */
@media (min-width: 68rem) {
  .faq-grupo {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 0 clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .faq-grupo__cabecera { position: sticky; top: 7rem; padding-top: 1.15rem; }
  .faq-grupo__entrada { margin-bottom: 0; }
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.faq-pie {
  background: var(--tinta);
  color: rgba(247, 242, 234, 0.66);
  padding: var(--ritmo-corto) var(--canal);
}
.faq-pie__interior { max-width: var(--ancho-max); margin: 0 auto; display: grid; gap: 0.8rem; }
.faq-pie__marca { font-family: var(--fuente-display); font-size: 1.15rem; color: var(--marfil-claro); margin: 0; }
.faq-pie__enlaces { margin: 0; font-size: var(--texto-menudo); letter-spacing: 0.06em; }
.faq-pie__enlaces a { color: rgba(247, 242, 234, 0.8); text-decoration-color: var(--terracota); text-underline-offset: 4px; }
.faq-pie__enlaces a:hover { color: var(--marfil-claro); }
.faq-pie__aviso { margin: 0; font-size: 0.78rem; max-width: 52ch; opacity: 0.75; }