/* =========================================================================================================
   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: C6 (copiado con herramientas/copiar-piezas.mjs el 2026-10-16). */
.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; }

/* ---------- C6 · Pie con la marca gigante ---------- */
.sec-c6 { background: var(--c-ink); color: var(--c-bg); padding: clamp(3rem, 6vw, 5rem) 0 0; overflow: hidden; }
.c6-arriba { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.c6-arriba h2 { font: 500 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 var(--f-display); margin: 0 0 1.25rem; max-width: 18ch; }
.c6-arriba h3 { font: 600 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 0 0 1rem; }
.c6-arriba ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.c6-arriba a { color: inherit; text-decoration: none; opacity: .88; }
.c6-arriba a:hover { opacity: 1; text-decoration: underline; }
.c6-btn { display: inline-flex; padding: .85em 1.4em; border-radius: 999px; background: var(--c-bg); color: var(--c-ink) !important; font-weight: 600; opacity: 1 !important; }
.c6-marca { margin: 0 0 -.1em; text-align: center; white-space: nowrap; font: 400 min(calc(96vw / (var(--letras, 6) * .55)), 30rem)/.82 var(--f-cond, var(--f-display)); text-transform: uppercase; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--c-bg) 92%, transparent); }
.c6-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: 1.25rem 0; margin-bottom: clamp(1rem, 3vw, 2rem); border-top: 1px solid color-mix(in srgb, var(--c-bg) 18%, transparent); font-size: .82rem; opacity: .7; }
.c6-legal a { color: inherit; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .c6-arriba { grid-template-columns: 1fr 1fr; }
  .c6-arriba > :first-child { grid-column: 1 / -1; }
}