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

/* ---------- E7 · Equipo con foco de color (.e7-rejilla con <a class="e7-tarjeta">; en blanco y negro, el color sigue al ratón) ---------- */
.sec-e7 { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--c-bg); color: var(--c-ink); }
.e7-rejilla { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 1rem; }
.e7-tarjeta { position: relative; display: grid; gap: .25rem; padding: .6rem .6rem 1rem; border-radius: var(--radius-lg, 1rem); background: var(--c-surface); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--c-line); transition: transform .35s cubic-bezier(.2, .7, .1, 1), box-shadow .35s; }
.e7-tarjeta img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius-lg, 1rem) - .3rem); margin-bottom: .5rem; }
.e7-tarjeta b { font: 600 1.15rem/1.2 var(--f-display, inherit); }
.e7-tarjeta span { font-size: .9rem; color: var(--c-muted); }
.e7-tarjeta:hover, .e7-tarjeta:focus-visible { transform: translateY(-.25rem); box-shadow: inset 0 0 0 2px var(--c-brand); }
.e7-velo { position: absolute; inset: -.5rem; z-index: 2; pointer-events: none; border-radius: var(--radius-lg, 1rem);
  -webkit-backdrop-filter: grayscale(1) brightness(.94); backdrop-filter: grayscale(1) brightness(.94);
  -webkit-mask-image: radial-gradient(circle var(--e7-foco, 15rem) at var(--x, 50%) var(--y, -60%), transparent 0 35%, #000 100%); mask-image: radial-gradient(circle var(--e7-foco, 15rem) at var(--x, 50%) var(--y, -60%), transparent 0 35%, #000 100%); }

/* ---------- V2 · Mosaico de trabajos (.v2-mosaico con <figure>; columnas que se rellenan y entran escalonadas) ---------- */
.sec-v2 { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--c-bg); color: var(--c-ink); }
.v2-mosaico { columns: var(--v2-columnas, 3) 14rem; column-gap: 1rem; }
.v2-mosaico > figure { position: relative; margin: 0 0 1rem; break-inside: avoid; overflow: hidden; border-radius: var(--radius-lg, 1rem); }
.v2-mosaico img { display: block; width: 100%; height: auto; transition: transform .7s ease; }
.v2-mosaico figcaption { position: absolute; left: .6rem; bottom: .6rem; padding: .3rem .7rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--c-bg) 88%, transparent); color: var(--c-ink);
  font-size: .85rem; font-weight: 600; opacity: 0; transform: translateY(.3rem); transition: opacity .3s, transform .4s; }
.v2-mosaico > figure:hover img { transform: scale(1.03); }
.v2-mosaico > figure:hover figcaption, .v2-mosaico > figure:focus-within figcaption { opacity: 1; transform: none; }
.js .v2-mosaico > figure { opacity: 0; transform: translateY(1rem); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .v2-mosaico > figure.v2-visto { opacity: 1; transform: none; }

/* ---------- Móvil ---------- */
@media (hover: none) {
  .e7-velo { display: none; }
  .v2-mosaico figcaption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .e7-tarjeta, .v2-mosaico img { transition: none !important; }
  .js .v2-mosaico > figure { opacity: 1; transform: none; transition: none; }
}

/* ===== Pantallas grandes (14 oct 2026; herramientas/pantallas-grandes.mjs) =====
   Hasta 1440 px de ancho la web es idéntica. Por encima, la letra raíz crece en proporción (letra, espacios y
   medidas van en rem) hasta el 150 % a 2840 px, y el contenido ocupa al menos el 70 % de la pantalla: en una
   pantalla 2K o 4K se ve como en un portátil, solo que más grande, en vez de quedar apretado en el centro. */
html:not(:has([data-login])) { font-size: clamp(100%, calc(100% + (100vw - 1440px) * .005714), 150%); } /* el panel (admin.html) no crece */