/* ============================================================
   faq.css — acordeón accesible de preguntas frecuentes
   ============================================================ */

.faq-lista {
  border-top: 1px solid var(--color-borde);
  margin-bottom: var(--esp-4);
}

.faq-item { border-bottom: 1px solid var(--color-borde); }

.faq-pregunta { margin: 0; }

.faq-boton {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-cuerpo);
  font-size: var(--txt-base);
  font-weight: var(--peso-cuerpo);
  color: var(--color-texto);
}

.faq-boton:hover { color: var(--color-acento-oscuro); }

/* Signo + que se convierte en − al abrir */
.faq-icono {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.faq-icono::before,
.faq-icono::after {
  content: "";
  position: absolute;
  background: var(--color-acento-oscuro);
  transition: transform var(--t-media) var(--ease-suave);
}

.faq-icono::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-icono::after { top: 0; left: 7px; width: 2px; height: 16px; }

.faq-boton[aria-expanded="true"] .faq-icono::after { transform: scaleY(0); }

/* El envoltorio es el elemento de la rejilla y no lleva espaciado:
   cualquier padding suyo impediría que la fila colapse a cero.
   El aire va en el párrafo, que queda recortado por overflow. */
.faq-respuesta-int { padding: 0; }

.faq-respuesta p {
  margin: 0;
  padding-bottom: var(--esp-2);
  line-height: 1.7;
  font-weight: var(--peso-ligero);
  color: var(--color-texto-secundario);
  max-width: 66ch;
}

.seccion--inversa .faq-lista,
.seccion--inversa .faq-item { border-color: var(--velo-borde); }

.seccion--inversa .faq-boton { color: var(--color-texto-inverso); }
.seccion--inversa .faq-respuesta p { color: var(--color-texto-meta); }

/* ══════════════════════════════════════════════════════════
   RESPUESTAS RÁPIDAS
   Para quien no viene a leer: la respuesta primero, en grande, y
   el matiz debajo en letra pequeña.
   ══════════════════════════════════════════════════════════ */

.rapidas {
  list-style: none;
  padding: 0;
  margin: var(--esp-3) 0 0;
  display: grid;
  gap: var(--esp-2);
}

@media (min-width: 620px) { .rapidas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rapidas { grid-template-columns: repeat(3, 1fr); } }

.rapida {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie-alta);
}

.rapida-pregunta {
  font-size: var(--txt-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.rapida-respuesta {
  font-family: var(--font-titular);
  font-size: var(--txt-xl);
  line-height: 1;
  color: var(--color-texto-enfasis);
}

.rapida-matiz {
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.6;
  color: var(--color-texto-secundario);
}

/* ══════════════════════════════════════════════════════════
   LAS DUDAS DE QUIEN VIENE POR PRIMERA VEZ
   Van sobre fondo oscuro porque son el bloque que queremos que
   se lea, no el que se salta.
   ══════════════════════════════════════════════════════════ */

.incomodas {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
}

@media (min-width: 900px) {
  .incomodas { grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); }
}

.incomoda {
  border-top: 1px solid var(--velo-borde);
  padding-top: var(--esp-3);
}

.incomoda h3 {
  font-family: var(--font-titular);
  font-style: italic;
  font-weight: var(--peso-titular);
  font-size: var(--txt-md);
  line-height: 1.3;
  margin: 0 0 var(--esp-2);
  color: var(--color-acento-texto);
}

.incomoda p {
  margin: 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.7;
  color: var(--color-texto-inverso);
}

/* ── Categorías de las dudas ──
   Marisol pidió agrupar las preguntas en cinco bloques (Tu cita, Tu
   tratamiento, Costos y pagos, Seguridad, Ubicaciones) para que se
   encuentren de un vistazo en vez de recorrer una lista larga. */
.faq-grupo {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: var(--txt-lg);
  margin: var(--esp-6) 0 var(--esp-2);
}

.faq-grupo:first-of-type { margin-top: var(--esp-3); }

/* Remate del cierre: las dos condiciones de la clínica, en un tono
   más bajo que el resto para que no compitan con el botón. */
.cierre-nota {
  margin-top: var(--esp-2);
  font-style: italic;
  color: var(--color-texto-suave);
  font-size: var(--txt-sm);
}