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

/* ---------- C11 · El cartel de la puerta (abierto o cerrado ahora, con la hora de España; --c11-papel y --c11-tinta) ---------- */
.sec-c11 { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--c-bg); color: var(--c-ink); }
.c11-rejilla { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.c11-cartel { position: relative; background: var(--c11-papel, var(--c-surface)); color: var(--c11-tinta, var(--c-ink)); padding: 1.5rem 1.5rem 1.25rem; margin-top: 3.5rem; border-radius: .25rem; transform: rotate(-1.2deg); }
.c11-cartel::before, .c11-cartel::after { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 4.25rem; background: var(--c-muted); transform-origin: bottom; }
.c11-cartel::before { transform: rotate(38deg); }
.c11-cartel::after { transform: rotate(-38deg); }
.c11-estado { font: 400 clamp(3rem, 8vw, 4.5rem)/1 var(--f-display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.c11-nota { margin: .35rem 0 1rem; font-weight: 600; }
.c11-horas { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; font-variant-numeric: tabular-nums; }
.c11-horas li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .4rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.c11-horas li.hoy { background: var(--c11-tinta, var(--c-ink)); color: var(--c11-papel, var(--c-surface)); font-weight: 600; }
.c11-datos { display: grid; gap: 1.25rem; justify-items: start; }
.c11-datos p { margin: 0; color: var(--c-muted); }
.c11-tel { font: 400 clamp(2rem, 5vw, 3.25rem)/1.1 var(--f-display); text-decoration: none; color: var(--c-brand); padding-block: .3rem; }
.c11-enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.c11-enlaces a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: inherit; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .c11-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 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 */
