/* =============================================================================
   css/faqs/styles.css — preguntas frecuentes y buscador (Módulo 7, 29/9/2026)
   -----------------------------------------------------------------------------
   El bloque de la portada y /certificaciones (php/plantillas/bloque_faqs.php) y la
   página /preguntas-frecuentes. Alias `faqs` en cabecera.php.

   La UI del sitio desde el 16/9/2026 (docs/map/16-ui-2026-09-16.md): esquinas rectas,
   IBM Plex Serif en títulos, Mona Sans en el resto, filetes de 1 px, sin sombras, sin
   cajas de color, sin píldoras y sin rayas de color a un lado. Las preguntas, como el
   FAQ de la landing: filas separadas por una línea y un «+» que gira a «×».

   ⚠️ Las tres páginas cargan css/styles.css, que pone `margin: 0; padding: 0` a TODO:
      aquí cada espacio va escrito. Y css/tipografia.css (la última, con !important)
      pone Mona Sans en todo lo que no sea h1–h6: la serif de las preguntas y del
      resultado va con un selector de tres clases para ganarle.
   ========================================================================== */

.faqs,
.faqs-heroe,
.faqs-cierre {
  --fq-texto: #121212;
  --fq-texto-2: #555555;
  --fq-linea: #e5e7eb;
  --fq-teal: #2fb7a4;
  --fq-crema: #f8f8f4;
  --fq-platino: #e6e1e1;
  --fq-velo: rgba(0, 0, 0, 0.7);
  --fq-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faqs {
  padding: 5rem 0;
  color: var(--fq-texto);
  background: #ffffff;
}

.faqs__contenedor {
  box-sizing: border-box;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;               /* 16 px en el teléfono */
}
@media (min-width: 640px) {
  .faqs__contenedor { padding: 0 1.5rem; }
}

/* --- El bloque: cabecera, lista, buscador y «Ver todas» ------------------- */

.faqs__titulo.faqs__titulo {
  font-size: 2rem;
  line-height: 1.15;
  color: var(--fq-texto);
}
.faqs__subtitulo {
  max-width: 28rem;
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fq-texto-2);
}
.faqs__rejilla > .faqs__lista { margin-top: 2.5rem; }
.faqs__rejilla > .faqs-buscador { margin-top: 3rem; }
.faqs__todas { margin-top: 2rem; }

/* En PC, dos columnas: a la izquierda el título, que se queda fijo mientras se recorre
   la sección (Pablo, 7/10/2026); a la derecha la lista, el buscador y «Ver todas», en
   el orden del HTML, que es el del teléfono. El título ocupa las tres filas: `sticky`
   sólo se mueve dentro de su celda, y con una fila no tendría por dónde. Hasta ese día
   el buscador iba a la izquierda, debajo del título: fijo, el título se le montaría. */
@media (min-width: 992px) {
  .faqs { padding: 6rem 0; }
  .faqs__titulo.faqs__titulo { font-size: 2.5rem; }
  .faqs__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "cabecera lista"
      "cabecera buscador"
      "cabecera todas";
    column-gap: 5rem;
    align-items: start;
  }
  .faqs__rejilla > .faqs__cabecera {
    grid-area: cabecera;
    position: sticky;
    top: 6.5rem;                   /* como .faqs-indice: la barra fija mide 80 px */
  }
  .faqs__rejilla > .faqs__lista { grid-area: lista; margin-top: 0; }
  .faqs__rejilla > .faqs-buscador { grid-area: buscador; }
  .faqs__rejilla > .faqs__todas { grid-area: todas; }
}

/* --- Las preguntas (<details>) --------------------------------------------- */

.faqs__lista { border-top: 1px solid var(--fq-linea); }
.faqs__item {
  border-bottom: 1px solid var(--fq-linea);
  scroll-margin-top: 6.5rem;     /* la barra fija mide 80 px */
}
.faqs__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  list-style: none;              /* sin el triángulo del navegador */
  color: var(--fq-texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faqs__pregunta::-webkit-details-marker { display: none; }
.faqs__pregunta::marker { content: ""; }
/* 🔴 Tres clases, no dos: la regla de tipografia.css (`body *:not(.joinchat):not(.joinchat *)`)
   pesa lo mismo que dos y va después, así que con dos ganaba ella (visto en Chrome). */
body .faqs__lista .faqs__item .faqs__pregunta-texto,
body .faqs-buscador .faqs-resultado .faqs-resultado__pregunta,
body .faqs-buscador .faqs-buscador__form .faqs-buscador__label {
  font-family: var(--font-heading, "IBM Plex Serif", Georgia, serif) !important;
}
.faqs__pregunta-texto {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
}
.faqs__signo {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.4rem;
  color: var(--fq-texto);
  transition: transform 0.3s var(--fq-curva), color 0.2s ease;
}
.faqs__item[open] > .faqs__pregunta .faqs__signo { transform: rotate(45deg); }
.faqs__pregunta:hover .faqs__signo { color: var(--fq-teal); }
.faqs__pregunta:focus-visible {
  outline: 2px solid var(--fq-texto);
  outline-offset: 4px;
}
.faqs__respuesta {
  max-width: 46rem;
  padding: 0 2.5rem 1.5rem 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fq-texto-2);
}
@media (min-width: 768px) {
  .faqs__pregunta-texto { font-size: 1.125rem; }
}

/* El vídeo tutorial de una pregunta (WEB_FAQS_VIDEOS, 7/10/2026): el de computadora (16:9) o el de
   celular (9:16), según el ancho. Con preload="none", el que no se ve no se descarga. */
.faqs__video { margin-top: 1rem; }
/* El filete: la portada es casi blanca y sin él se pierde en la página. */
.faqs__video video {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 1px solid var(--fq-linea);
  background: #000;
}
.faqs__video .faqs__video-pc { max-width: 40rem; aspect-ratio: 16 / 9; }
.faqs__video .faqs__video-cel { display: none; max-width: 20rem; aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .faqs__video .faqs__video-pc:not(.faqs__video-solo) { display: none; }
  .faqs__video .faqs__video-cel { display: block; }
}

/* Los enlaces de las respuestas y del buscador: texto oscuro con subrayado teal. El
   teal solo sobre blanco no llega al contraste de un texto (2,4:1). */
.faqs__respuesta a,
.faqs-resultado__texto a,
.faqs-resultado__no a,
.faqs-buscador__nota a {
  color: var(--fq-texto);
  text-decoration: underline;
  text-decoration-color: var(--fq-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.faqs__respuesta a:hover,
.faqs-resultado__texto a:hover,
.faqs-resultado__no a:hover,
.faqs-buscador__nota a:hover { text-decoration-thickness: 2px; }
.faqs__respuesta a:focus-visible,
.faqs-resultado a:focus-visible,
.faqs-buscador__nota a:focus-visible {
  outline: 2px solid var(--fq-texto);
  outline-offset: 2px;
}

/* --- Botones ----------------------------------------------------------------
   Antes de que js/faqs.js los monte con el botón de dos piezas de js/botones.js (y sin
   JavaScript): ya rectos y de su color. Montados, manda css/ui.css (`a.lts-btn.lts-btn`). */
.faqs-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: 0 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  background: var(--fq-teal, #2fb7a4);
  border: 1px solid var(--fq-teal, #2fb7a4);
  border-radius: 0;
  cursor: pointer;
}
.faqs-btn--blanco {
  color: #090909;
  background: #ffffff;
  border-color: var(--fq-platino, #e6e1e1);
}
.faqs-btn:focus-visible { outline: 2px solid var(--fq-teal, #2fb7a4); outline-offset: 3px; }

/* --- El buscador ------------------------------------------------------------ */

.faqs-buscador__label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fq-texto);
}
.faqs-buscador__fila {
  display: flex;
  align-items: stretch;
}
.faqs-buscador__campo {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.125rem;
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 1rem;               /* 16 px: con menos, iOS hace zoom al enfocar */
  color: var(--fq-texto);
  background: var(--fq-crema);
  border: 1px solid var(--fq-platino);
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.faqs-buscador__campo::placeholder { color: #8a8a8a; }
.faqs-buscador__campo:focus { border-color: var(--fq-texto); }
.faqs-buscador__boton { flex: none; }
.faqs-buscador__nota {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fq-texto-2);
}

/* Sugerencias mientras se escribe: una lista con filetes, sin caja flotante. */
.faqs-buscador__sugerencias {
  margin-top: 1rem;
  border: 1px solid var(--fq-linea);
  background: #ffffff;
}
.faqs-buscador__sugerencias-titulo,
.faqs-resultado__categoria,
.faqs-resultado__rel-titulo,
.faqs-indice__titulo {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fq-texto-2);
}
.faqs-buscador__sugerencias-titulo {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--fq-linea);
}
.faqs-buscador__sugerencias-lista,
.faqs-resultado__rel-lista,
.faqs-indice__lista { list-style: none; }
.faqs-buscador__sugerencias-lista li + li { border-top: 1px solid var(--fq-linea); }
.faqs-buscador__sugerencia {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  color: var(--fq-texto);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.faqs-buscador__sugerencia:hover,
.faqs-buscador__sugerencia:focus-visible { background: var(--fq-crema); }
.faqs-buscador__sugerencia:focus-visible { outline: 2px solid var(--fq-texto); outline-offset: -2px; }

/* --- La respuesta ------------------------------------------------------------ */

.faqs-buscador__resultado:not(:empty) { margin-top: 1.75rem; }
.faqs-resultado {
  padding-top: 1.25rem;
  border-top: 1px solid var(--fq-texto);
}
.faqs-resultado__pregunta {
  margin-top: 0.4rem;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fq-texto);
}
.faqs-resultado__pregunta:focus { outline: none; }
.faqs-resultado__pregunta:focus-visible { outline: 2px solid var(--fq-texto); outline-offset: 4px; }
.faqs-resultado--sin .faqs-resultado__pregunta,
.faqs-resultado--aviso .faqs-resultado__texto { margin-top: 0; }
.faqs-resultado__texto {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fq-texto-2);
}
.faqs-resultado__botones { margin-top: 1.25rem; }
.faqs-resultado__rel { margin-top: 1.75rem; }
.faqs-resultado__rel-titulo { margin-bottom: 0.4rem; }
.faqs-resultado__rel-lista { border-top: 1px solid var(--fq-linea); }
.faqs-resultado__rel-lista li { border-bottom: 1px solid var(--fq-linea); }
.faqs-resultado__rel-boton {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 0;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  color: var(--fq-texto);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
/* Se despliegan en su sitio (29/9/2026): el «+» gira a «×» al abrir, sin mover la página. */
.faqs-resultado__rel-flecha {
  flex: none;
  font-size: 1.125rem;
  line-height: 1.3;
  transition: transform 0.3s var(--fq-curva), color 0.2s ease;
}
.faqs-resultado__rel-boton:hover .faqs-resultado__rel-flecha,
.faqs-resultado__rel-boton:focus-visible .faqs-resultado__rel-flecha { color: var(--fq-teal); }
.faqs-resultado__rel-boton[aria-expanded="true"] .faqs-resultado__rel-flecha { transform: rotate(45deg); }
.faqs-resultado__rel-boton[aria-expanded="true"] .faqs-resultado__rel-texto { font-weight: 500; }
.faqs-resultado__rel-boton:focus-visible { outline: 2px solid var(--fq-texto); outline-offset: 2px; }
.faqs-resultado__rel-respuesta {
  padding: 0 2rem 1rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fq-texto-2);
}
.faqs-resultado__rel-respuesta[hidden] { display: none; }
.faqs-resultado__rel-respuesta a { color: var(--fq-texto); text-decoration: underline; text-underline-offset: 2px; }
.faqs-resultado__no {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fq-texto-2);
}

/* =============================================================================
   /preguntas-frecuentes
   ========================================================================== */

/* El héroe: foto bajo el velo negro de la landing, como el resto de páginas. La barra
   va transparente encima (`nav_home`): arriba deja su alto de hueco. */
/* Fondo liso con el verde de la marca, sin foto (Pablo, 29/9/2026: «ese fondo no va»). */
.faqs-heroe {
  padding: calc(80px + 3.5rem) 0 3.5rem;
  color: #ffffff;
  background-color: #00372c;
}
.faqs-heroe__titulo.faqs-heroe__titulo {
  font-size: 2.5rem;
  line-height: 1.1;
  color: #ffffff;
}
.faqs-heroe__titulo span { color: var(--fq-teal); }
.faqs-heroe__texto {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 992px) {
  .faqs-heroe { padding: calc(80px + 5rem) 0 5rem; }
  .faqs-heroe__titulo.faqs-heroe__titulo { font-size: 3.5rem; }
}

/* El buscador arriba, y debajo el índice de temas y las preguntas. */
.faqs--pagina { padding-top: 3.5rem; }
.faqs-pagina__buscador { max-width: 48rem; }
.faqs-pagina__rejilla { margin-top: 3.5rem; }

.faqs-indice__titulo { margin-bottom: 0.5rem; }
.faqs-indice__lista { border-top: 1px solid var(--fq-linea); }
.faqs-indice__lista li { border-bottom: 1px solid var(--fq-linea); }
.faqs-indice__lista a {
  display: block;
  padding: 0.7rem 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fq-texto);
  text-decoration: none;
}
.faqs-indice__lista a:hover {
  text-decoration: underline;
  text-decoration-color: var(--fq-teal);
  text-underline-offset: 3px;
}
.faqs-indice__lista a:focus-visible { outline: 2px solid var(--fq-texto); outline-offset: 2px; }

.faqs-pagina__temas { margin-top: 3rem; }
.faqs-tema { scroll-margin-top: 6.5rem; }
.faqs-tema + .faqs-tema { margin-top: 3.5rem; }
.faqs-tema__titulo.faqs-tema__titulo {
  margin-bottom: 1rem;
  font-size: 1.625rem;
  line-height: 1.2;
  color: var(--fq-texto);
}

@media (min-width: 992px) {
  .faqs--pagina { padding-top: 4.5rem; }
  .faqs-pagina__rejilla {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 5rem;
    align-items: start;
  }
  .faqs-indice { position: sticky; top: 6.5rem; }
  .faqs-pagina__temas { margin-top: 0; }
  .faqs-tema__titulo.faqs-tema__titulo { font-size: 2rem; }
}

.faqs-vacia__texto {
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fq-texto-2);
}

/* El cierre: la foto con velo, como las secciones de contacto del sitio. */
.faqs-cierre {
  --lts-foto: url("/img/aula-de-masoterapia-vista-amplia-camillas-ocupadas-litsea.webp");
  padding: 5rem 0;
  color: #ffffff;
  background-color: #121212;
  background-image: linear-gradient(var(--fq-velo), var(--fq-velo)), var(--lts-foto);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.faqs-cierre__titulo.faqs-cierre__titulo {
  font-size: 2rem;
  line-height: 1.15;
  color: #ffffff;
}
.faqs-cierre__titulo span { color: var(--fq-teal); }
.faqs-cierre__texto {
  max-width: 36rem;
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.faqs-cierre__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .faqs-cierre { padding: 6rem 0; }
  .faqs-cierre__titulo.faqs-cierre__titulo { font-size: 2.75rem; }
}

/* --- Movimiento reducido ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .faqs__signo,
  .faqs-resultado__rel-flecha,
  .faqs-buscador__campo { transition: none; }
}