/* =========================================================================================================
   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: C10 (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; }

/* ---------- C10 · Llamada final con halo (A15) ---------- */
.sec-c10 { --c10-fondo: #15120f; --c10-texto: #f5efe7; padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--c-bg); color: var(--c-ink); }
.c10-tarjeta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 4rem); border-radius: calc(var(--radius-lg) * 1.5);
  background: var(--c10-fondo); color: var(--c10-texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); overflow: hidden; }
.c10-tarjeta::after { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 120%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-brand) 55%, transparent), transparent); filter: blur(2rem); pointer-events: none; }
.c10-tarjeta > * { position: relative; z-index: 1; }
.c10-tarjeta h2 { font: 500 clamp(2rem, 4vw, 3.4rem)/1.04 var(--f-display); margin: 0 0 .5rem; max-width: 18ch; }
.c10-tarjeta p { margin: 0; opacity: .8; }
.c10-acciones { display: grid; gap: .75rem; justify-items: center; }
.c10-acciones .btn { font-size: 1.05rem; padding: 1em 1.8em; }
.c10-acciones small { opacity: .75; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .c10-tarjeta { grid-template-columns: 1fr; }
  .c10-acciones { justify-items: start; }
}