/* =========================================================================================================
   Secciones nuevas (16 oct 2026): equipo, opiniones, preguntas, contacto y cierre, y la familia D (datos y cifras).
   Inspiradas en los bloques de Watermelon UI (ui.watermelon.sh, licencia MIT, © Watermelon Contributors) y en
   patrones vistos en HorizonX (solo referencia); código propio, sin React ni Tailwind, compatible con la CSP.
   Cada pieza es una <section class="sec-XX"> independiente con las variables de la marca. Varias usan efectos de
   estilos/movimiento (movimiento.css + movimiento.js): A12 cifras, A15 halo, A21 cinta, A26 preguntas.
   Todo en rem (crece con las pantallas grandes). Uso en LEEME.md; catálogo en estilos/CATALOGO.md.
   ========================================================================================================= */
/* Esta web lleva: F6 (copiado con herramientas/copiar-piezas.mjs el 2026-10-31). */
.s-wrap { width: min(var(--wrap, 73.75rem), 100% - 2 * var(--gutter, 2rem)); margin-inline: auto; }
.s-eyebrow { font: 600 .75rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand); margin: 0 0 1rem; }
.s-titulo { font: 500 clamp(2rem, 4.2vw, 3.6rem)/1.04 var(--f-display); letter-spacing: -.025em; margin: 0 0 .5em; }
.s-sub { color: var(--c-muted); max-width: 52ch; margin: 0; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.s-estrellas { color: #f2b01e; letter-spacing: .1em; }

/* ---------- F6 · Pregunta y respuesta enfrentadas (índice grande y respuesta al lado; en el móvil, debajo) ---------- */
.sec-f6 { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--c-bg); color: var(--c-ink); }
.f6-lista { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(2rem, 6vw, 6rem); }
.f6-item { display: contents; }
.f6-p { grid-column: 1; appearance: none; background: none; border: 0; border-top: 1px solid var(--c-line); color: var(--c-muted); cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font: 400 clamp(1.3rem, 2.4vw, 1.85rem)/1.2 var(--f-display); min-height: 2.75rem; padding: .95rem 0; text-align: left; transition: color .2s; width: 100%; }
.f6-item:last-child .f6-p { border-bottom: 1px solid var(--c-line); }
.f6-p:hover, .f6-p[aria-expanded="true"] { color: var(--c-ink); }
.f6-p i { color: var(--c-brand); flex: none; font-style: normal; opacity: 0; transform: translateX(-.4rem); transition: opacity .2s, transform .2s; }
.f6-p[aria-expanded="true"] i { opacity: 1; transform: none; }
.f6-r { grid-column: 2; grid-row: 1 / span 12; align-self: start; position: sticky; top: 6rem; border-top: 3px solid var(--c-brand); padding-top: 1rem; }
.f6-r p { margin: 0; font-size: 1.125rem; max-width: 34ch; }
.f6-r a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-brand); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .f6-p, .f6-p i { transition: none; } }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .f6-lista { grid-template-columns: minmax(0, 1fr); }
  .f6-r { grid-column: 1; grid-row: auto; position: static; border-top: 0; padding: 0 0 1.25rem; }
  .f6-p i { display: none; }
}