/* =============================================================================
   EL ESCAPARATE DE INVITACIONES (15-oct-2026)
   Escenario (portada y silo), galería (/plantillas), carril (blog) y el visor que abre
   la invitación de verdad. Clases propias `esc-`; los colores de la casa se heredan de
   variables.css cuando están (portada) y tienen su valor de respaldo (blog).
   Ver BASE/circuitos/escaparate.md.
   ============================================================================= */

.esc {
    --esc-coral: var(--v2-brand, #E06363);
    --esc-coral-osc: var(--v2-brand-hover, #C85454);
    --esc-tinta: var(--v2-dark, #181818);
    --esc-gris: var(--v2-muted, #555555);
    --esc-borde: var(--v2-border, #EDE7E7);
    --esc-borde-fuerte: #DCD3CC;
    --esc-crema: #FBF9F6;
    --esc-arena: #F2ECE6;
    --esc-letra: var(--v2-font-body, 'Inter Display', 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    /* Proporción del móvil: 390 x 844. */
    --esc-alto-movil: 2.1641;
    font-family: var(--esc-letra);
    color: var(--esc-tinta);
    -webkit-font-smoothing: antialiased;
}
.esc *, .esc *::before, .esc *::after { box-sizing: border-box; }
.esc-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================== */
/* EL MÓVIL              */
/* ===================== */

.esc-movil {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 390 / 844;
    border-radius: 12.5% / 5.8%;
    overflow: hidden;
    /* Solo el marco: el sobre de verdad entra entero encima cuando está (nunca uno inventado). */
    background: var(--esc-arena);
    isolation: isolate;
    box-shadow:
        0 0 0 4px #221e1c,
        0 0 0 5px rgba(255, 255, 255, 0.07),
        0 24px 46px -20px rgba(64, 38, 22, 0.48),
        0 8px 16px -8px rgba(64, 38, 22, 0.20);
    transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s ease;
}

/* El sobre de verdad (apertura/_sobre en modo vista previa, en su shadow root; escaparate.js).
   Aparece entero de una vez, cuando sus letras e imágenes están; al abrirse se aparta solo. */
.esc-movil__sobre {
    position: absolute; inset: 0; z-index: 2;
    display: block;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.esc-movil__sobre.is-listo { opacity: 1; }
.esc-movil__sobre.is-fuera { visibility: hidden; }

/* La invitación en vivo, debajo del sobre (solo una en la página). No recibe el puntero: la
   tarjeta la manda el escaparate (tocarla abre el visor; la rueda y el dedo mueven la página).
   Se enseña en el instante en que el sobre la descubre, sin fundido: lo tapa la luz del sobre. */
.esc-movil__vida {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    border: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
}
.esc-movil__vida.is-viva { opacity: 1; }
/* La principal llega sin sobre: su invitación entra con un fundido. Si alguien llega antes de
   que esté, ve en el teléfono que se está preparando. */
.esc-movil__vida.is-entrando { transition: opacity 0.5s ease; }
.esc-movil__cargando {
    position: absolute; inset: 0; z-index: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 12%;
    font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--esc-gris);
    text-align: center;
}
.esc-movil__cargando .esc-visor__punto {
    display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 8px;
    border-radius: 50%; background: var(--esc-coral);
    animation: esc-latido 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .esc-movil__cargando .esc-visor__punto { animation: none; } }

/* ===================== */
/* EL PIE                */
/* ===================== */

.esc-pie { text-align: center; }
/* El nombre, centrado de verdad bajo el teléfono; la nota va a su derecha sin empujarlo
   (tres columnas: la del nombre en medio y dos iguales a los lados). */
.esc-pie__cabeza {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; column-gap: 8px;
    min-height: 26px;
}
.esc-pie__nombre { grid-column: 2; }
.esc-pie__nota { grid-column: 3; justify-self: start; }
.esc-pie__nombre {
    margin: 0;
    font-family: var(--v2-font-heading, var(--esc-letra));
    font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
    color: var(--esc-tinta);
}
.esc-pie__nombre a { color: inherit; text-decoration: none; }
.esc-pie__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.esc-pie__nota {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 13px; font-weight: 600; color: var(--esc-tinta);
}
.esc-pie__nota svg { width: 14px; height: 14px; fill: #f5b301; }
/* Con la clase delante: las hojas de la portada ponen margen 0 a los <p> y lo dejaban pegado a
   la izquierda, descentrado bajo el nombre. */
.esc .esc-pie .esc-pie__estilo {
    margin: 6px auto 0;
    max-width: 32ch;
    font-size: 14px; line-height: 1.5; color: var(--esc-gris);
    text-align: center;
    text-wrap: balance;
}

.esc-pie__acciones {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 18px;
}
.esc-pie__form { margin: 0; display: contents; }
.esc-pie__detalles {
    display: inline-block; margin-top: 14px;
    font-size: 14px; font-weight: 600; color: var(--esc-coral);
    text-decoration: none;
}
.esc-pie__detalles:hover { color: var(--esc-coral-osc); text-decoration: underline; text-underline-offset: 3px; }
.esc-pie [hidden] { display: none !important; }

.esc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; width: 100%;
    /* 10 px a los lados: «Einladung ansehen» o «Zobacz zaproszenie» caben en una línea (15-oct) */
    padding: 12px 10px;
    border: 0; border-radius: 14px;
    font: 700 15px/1.15 var(--esc-letra);
    text-decoration: none; text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.esc-btn--coral { background: var(--esc-coral); color: #fff; }
.esc-btn--coral:hover, .esc-btn--coral:focus-visible { background: var(--esc-coral-osc); color: #fff; text-decoration: none; }
.esc-btn--suave { background: #fff; color: var(--esc-tinta); box-shadow: inset 0 0 0 1.5px var(--esc-borde-fuerte); }
.esc-btn--suave:hover, .esc-btn--suave:focus-visible { box-shadow: inset 0 0 0 1.5px var(--esc-tinta); color: var(--esc-tinta); }
.esc :focus-visible { outline: 2px solid var(--esc-coral); outline-offset: 3px; }

.esc-flecha {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: #fff; color: var(--esc-tinta);
    box-shadow: 0 2px 10px rgba(40, 25, 15, 0.12), inset 0 0 0 1px var(--esc-borde);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.esc-flecha:hover { box-shadow: 0 4px 16px rgba(40, 25, 15, 0.18), inset 0 0 0 1px var(--esc-borde-fuerte); }
.esc-flecha:active { transform: scale(0.96); }
.esc-flecha svg, .esc-enlace svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.esc-enlace {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--esc-coral);
    text-decoration: none;
}
.esc-enlace:hover { color: var(--esc-coral-osc); }
.esc-enlace svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.esc-enlace:hover svg { transform: translateX(3px); }

/* ===================== */
/* EL ESCENARIO          */
/* ===================== */

/* La geometría la decide el ancho del escenario, no el de la ventana: en la portada, entre
   768 y 1279 px de ventana el contenedor de la casa mide 768 y caben tres tarjetas, no cinco. */
.esc-escenario {
    position: relative;
    margin: 28px auto 0;
    container-type: inline-size;
}
/* En el móvil el contenedor de la casa deja 20 px a cada lado: el escenario llega al borde,
   para que las vecinas asomen desde la orilla de la pantalla. */
@media (max-width: 767px) {
    .v2-container > .esc-escenario,
    .v2-pshow__container > .esc-escenario { margin-left: -20px; margin-right: -20px; }
}
/* /plantillas: debajo del escenario, a la vista, la ficha de cada diseño que la tiene. */
.esc-fichas {
    margin: 22px auto 0; max-width: 40em;
    font-family: var(--v2-font-body, 'Inter', system-ui, sans-serif);
    font-size: 14.5px; line-height: 1.7; color: var(--v2-muted, #555);
    text-align: center;
}
.esc-fichas a { color: var(--v2-brand, #E06363); font-weight: 600; text-decoration: none; white-space: nowrap; }
.esc-fichas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.esc-escenario__escena,
.esc-escenario__mandos {
    /* Móvil: la del centro a algo más de la mitad del ancho, para que se vean las de los lados. */
    --esc-w: min(47cqw, 210px);
    /* El pie: el aire con el teléfono, nombre, estilo (dos líneas), botones y «Ver detalles». */
    --esc-aire-pie: 36px;
    --esc-pie: 186px;
}
@container (min-width: 600px) {
    .esc-escenario__escena, .esc-escenario__mandos { --esc-w: clamp(230px, 34cqw, 280px); }
}
@container (min-width: 1000px) {
    .esc-escenario__escena, .esc-escenario__mandos { --esc-w: clamp(236px, min(23cqw, calc((100vh - 330px) * 0.462)), 300px); }
}

.esc-tarjeta__marco {
    display: block; width: 100%;
    padding: 0; margin: 0;
    border: 0; background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.esc-tarjeta__marco:focus-visible { outline: none; }
.esc-tarjeta__marco:focus-visible .esc-movil { box-shadow: 0 0 0 4px #221e1c, 0 0 0 7px var(--esc-coral), 0 24px 46px -20px rgba(64, 38, 22, 0.48); }

/* Sin JavaScript: una fila que se desplaza con todas las tarjetas a la vista. */
.esc-escenario__escena {
    position: relative;
    height: calc(var(--esc-w) * var(--esc-alto-movil) + var(--esc-aire-pie) + var(--esc-pie) + 14px);
    outline: none;
}
.esc-escenario__pista {
    list-style: none; margin: 0;
    display: flex; gap: 24px;
    height: 100%;
    padding: 10px 20px 0;
    overflow-x: auto;
    scroll-padding-inline: 20px;
    scroll-snap-type: x proximity;
}
.esc-escenario .esc-tarjeta { flex: 0 0 var(--esc-w); scroll-snap-align: start; }
.esc-escenario .esc-tarjeta__pie { margin-top: var(--esc-aire-pie); }

/* Con JavaScript: el escenario en perspectiva. */
.esc-escenario.is-3d .esc-escenario__escena {
    overflow: hidden;
    perspective: 1300px;
    touch-action: pan-y;
    -webkit-user-select: none; user-select: none;
}
/* Una luz suave del color del diseño del centro; cambia con él (el JS pone --esc-tinte). */
@property --esc-tinte { syntax: '<color>'; inherits: true; initial-value: rgba(224, 99, 99, 0.10); }
.esc-escenario.is-3d .esc-escenario__escena::before {
    content: '';
    position: absolute; z-index: 0;
    left: 50%; top: calc(var(--esc-w) * 1.05 + 10px);
    width: calc(var(--esc-w) * 2.9); height: calc(var(--esc-w) * 2.5);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--esc-tinte), rgba(255, 255, 255, 0));
    transition: --esc-tinte 0.7s ease;
    pointer-events: none;
}
.esc-escenario.is-3d .esc-escenario__pista {
    display: block; position: relative;
    padding: 0; overflow: visible;
    transform-style: preserve-3d;
    /* Las laterales van hacia el fondo (translateZ negativo) y la pista, invisible, queda
       delante de ellas: sin esto se llevaba sus clics. */
    pointer-events: none;
}
.esc-escenario.is-3d .esc-tarjeta { pointer-events: auto; }
.esc-escenario.is-3d .esc-tarjeta {
    --x: 0px; --z: 0px; --rot: 0deg; --s: 1; --o: 1;
    position: absolute;
    top: 10px; left: 50%;
    width: var(--esc-w);
    margin-left: calc(var(--esc-w) / -2);
    transform: translateX(var(--x)) translateZ(var(--z)) rotateY(var(--rot)) scale(var(--s));
    transform-origin: 50% 32%;
    opacity: var(--o);
    transition: transform 0.46s cubic-bezier(.22, .8, .24, 1), opacity 0.46s ease, visibility 0s linear 0s;
}
.esc-escenario.is-3d .esc-pista--arrastrando .esc-tarjeta { transition: none; }

.esc-escenario.is-3d .esc-tarjeta[data-pos="0"] { z-index: 5; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="1"],
.esc-escenario.is-3d .esc-tarjeta[data-pos="-1"] { z-index: 4; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="2"],
.esc-escenario.is-3d .esc-tarjeta[data-pos="-2"] { z-index: 3; }
.esc-escenario.is-3d .esc-tarjeta[data-pos^="lejos"] {
    z-index: 1; visibility: hidden; pointer-events: none;
    transition: transform 0.46s cubic-bezier(.22, .8, .24, 1), opacity 0.46s ease, visibility 0s linear 0.46s;
}

/* Móvil, como las maquetas en 3D de ChungDoi (medido en su móvil, 15-oct): la del centro de frente y
   dos a cada lado abiertas en abanico, con la perspectiva en el centro del teléfono. Las vecinas,
   giradas 45°, al 85 % y hacia el fondo; las siguientes, casi de canto. Opacas (una transparente
   deja ver la de detrás) y algo más oscuras cuanto más al fondo: eso da la profundidad. */
.esc-escenario.is-3d .esc-escenario__escena { perspective: 1000px; perspective-origin: 50% calc(var(--esc-w) * 1.08 + 10px); }
.esc-escenario.is-3d .esc-tarjeta { transform-origin: 50% 50%; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="1"]  { --x: calc(var(--esc-w) * 0.6);   --z: -150px; --rot: -45deg; --s: 0.85; --o: 1; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="-1"] { --x: calc(var(--esc-w) * -0.6);  --z: -150px; --rot: 45deg;  --s: 0.85; --o: 1; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="2"]  { --x: calc(var(--esc-w) * 1.12);  --z: -300px; --rot: -70deg; --s: 0.72; --o: 1; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="-2"] { --x: calc(var(--esc-w) * -1.12); --z: -300px; --rot: 70deg;  --s: 0.72; --o: 1; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="lejos-der"] { --x: calc(var(--esc-w) * 1.6);  --z: -420px; --rot: -80deg; --s: 0.6; --o: 0; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="lejos-izq"] { --x: calc(var(--esc-w) * -1.6); --z: -420px; --rot: 80deg;  --s: 0.6; --o: 0; }
.esc-escenario.is-3d .esc-tarjeta .esc-movil { transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s ease, filter 0.46s ease; }
.esc-escenario.is-3d .esc-tarjeta[data-pos="1"] .esc-movil,
.esc-escenario.is-3d .esc-tarjeta[data-pos="-1"] .esc-movil { filter: brightness(0.95); }
.esc-escenario.is-3d .esc-tarjeta[data-pos="2"] .esc-movil,
.esc-escenario.is-3d .esc-tarjeta[data-pos="-2"] .esc-movil { filter: brightness(0.88); }

@container (min-width: 600px) {
    /* Tableta y ordenador: como estaban (el abanico del móvil es solo del móvil). */
    .esc-escenario.is-3d .esc-escenario__escena { perspective: 1300px; perspective-origin: 50% 50%; }
    .esc-escenario.is-3d .esc-tarjeta { transform-origin: 50% 32%; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="lejos-der"] { --x: calc(var(--esc-w) * 2.2);  --z: 0px; --rot: 0deg; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="lejos-izq"] { --x: calc(var(--esc-w) * -2.2); --z: 0px; --rot: 0deg; }
    .esc-escenario.is-3d .esc-tarjeta .esc-movil { filter: none !important; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="1"]  { --x: calc(var(--esc-w) * 0.86);  --z: -80px; --rot: -20deg; --s: 0.88; --o: 1; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="-1"] { --x: calc(var(--esc-w) * -0.86); --z: -80px; --rot: 20deg;  --s: 0.88; --o: 1; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="2"]  { --x: calc(var(--esc-w) * 1.46);  --z: -170px; --rot: -30deg; --s: 0.76; --o: 1; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="-2"] { --x: calc(var(--esc-w) * -1.46); --z: -170px; --rot: 30deg;  --s: 0.76; --o: 1; }
    /* Lo que no cabe se desvanece en los bordes en vez de cortarse en seco. */
    .esc-escenario.is-3d .esc-escenario__escena {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }
}
@container (min-width: 1000px) {
    .esc-escenario.is-3d .esc-tarjeta[data-pos="1"]  { --x: calc(var(--esc-w) * 0.88);  --z: -90px; --rot: -24deg; --s: 0.88; --o: 1; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="-1"] { --x: calc(var(--esc-w) * -0.88); --z: -90px; --rot: 24deg;  --s: 0.88; --o: 1; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="2"]  { --x: calc(var(--esc-w) * 1.56);  --z: -190px; --rot: -34deg; --s: 0.76; --o: 1; }
    .esc-escenario.is-3d .esc-tarjeta[data-pos="-2"] { --x: calc(var(--esc-w) * -1.56); --z: -190px; --rot: 34deg;  --s: 0.76; --o: 1; }
}

/* El pie solo es de la tarjeta del centro; sale cuando ella llega. */
.esc-escenario.is-3d .esc-tarjeta__pie {
    position: absolute;
    top: calc(var(--esc-w) * var(--esc-alto-movil) + var(--esc-aire-pie));
    left: 50%;
    width: min(360px, calc(100vw - 24px));
    margin: 0;
    transform: translateX(-50%);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.esc-escenario.is-3d .esc-tarjeta.is-centro .esc-tarjeta__pie {
    opacity: 1; visibility: visible;
    transition: opacity 0.35s ease 0.18s, visibility 0s linear 0s;
}
/* Una lateral se ve como algo que se puede tocar. */
.esc-escenario.is-3d .esc-tarjeta:not(.is-centro) .esc-tarjeta__marco:hover .esc-movil { transform: translateY(-6px); }
.esc-escenario.is-3d .esc-tarjeta.is-centro .esc-tarjeta__marco:hover .esc-movil { transform: translateY(-4px); }

.esc-escenario__mandos {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-top: 6px;
}
.esc-escenario__contador {
    min-width: 64px; text-align: center;
    font-size: 14px; font-weight: 600; color: var(--esc-gris);
    font-variant-numeric: tabular-nums;
}
.esc-escenario:not(.is-3d) .esc-escenario__mandos { display: none; }
/* LA TIRA: la invitación abierta de cada diseño, debajo de las flechas. En el móvil se desliza de lado
   (con `proximity`, nunca `mandatory`: ver la memoria scroll-snap-mata-el-lcp); en el ordenador caben todas. */
.esc-tira {
    list-style: none; margin: 18px auto 0; padding: 4px 16px 8px;
    display: flex; gap: 12px; justify-content: center;
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
}
.esc-tira::-webkit-scrollbar { display: none; }
.esc-tira li { flex: 0 0 auto; scroll-snap-align: center; }
.esc-tira__item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    width: 88px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 12.5px/1.2 var(--esc-letra); color: var(--esc-gris);
}
.esc-tira__foto {
    display: block; width: 100%; aspect-ratio: 5 / 7; overflow: hidden;
    border-radius: 12px; background: #f3eee7;
    box-shadow: 0 0 0 1px rgba(30, 20, 10, 0.08), 0 6px 14px -8px rgba(30, 20, 10, 0.35);
    opacity: 0.82; transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.esc-tira__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Nada pesa en la carga: una imagen perezosa sin pintar (display: none) no se pide. El guion, que llega
   después del `load`, pone `is-lista`. Sin JavaScript se ven desde el principio. */
.esc-tira:not(.is-lista) .esc-tira__foto img { display: none; }
@media (scripting: none) { .esc-tira .esc-tira__foto img { display: block; } }
.esc-tira__item:hover .esc-tira__foto { opacity: 1; transform: translateY(-3px); }
.esc-tira__item.is-activa { color: var(--esc-tinta); }
.esc-tira__item.is-activa .esc-tira__foto {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--esc-coral), 0 10px 22px -10px rgba(30, 20, 10, 0.45);
}
.esc-tira__nombre { white-space: nowrap; }
@media (max-width: 599px) {
    /* En el móvil, de borde a borde: se desliza y la del centro se ve centrada. */
    .esc-tira { justify-content: flex-start; }
}
@container (min-width: 600px) {
    .esc-tira__item { width: 112px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .esc-tira__foto { transition: none; }
}

/* Sin JavaScript las flechas no harían nada: fuera. */
@media (scripting: none) { .esc-escenario__mandos { display: none; } }
/* Ordenador y tablet: las flechas a los lados, a la altura de las tarjetas, para pasar de
   diseño sin bajar la página (en el móvil se quedan debajo, con el contador). */
@container (min-width: 600px) {
    .esc-escenario.is-3d .esc-escenario__mandos {
        position: absolute; z-index: 8;
        top: 10px; left: 0; right: 0;
        height: calc(var(--esc-w) * var(--esc-alto-movil));
        margin: 0; padding: 0 2%;
        justify-content: space-between;
        pointer-events: none;
    }
    .esc-escenario.is-3d .esc-escenario__mandos .esc-flecha { pointer-events: auto; width: 52px; height: 52px; }
    .esc-escenario.is-3d .esc-escenario__contador { display: none; }
}
/* Con la clase delante: las hojas de la portada ponen margen 0 a los <p>. */
.esc .esc-escenario__todas { margin: 24px 0 0; text-align: center; }

/* ===================== */
/* LA GALERÍA            */
/* ===================== */

.esc-galeria {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 14px;
}
@media (min-width: 720px) {
    .esc-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
}
@media (min-width: 1440px) {
    .esc-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; }
}
.esc-galeria .esc-tarjeta { display: flex; flex-direction: column; }
.esc-galeria .esc-tarjeta__marco { padding: 6px 6px 0; }
.esc-galeria .esc-tarjeta__marco:hover .esc-movil { transform: translateY(-5px); }
.esc-galeria .esc-tarjeta__pie { margin-top: 18px; }
.esc-galeria .esc-pie__acciones { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
    .esc-galeria .esc-pie__acciones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
    .esc-galeria .esc-pie__nombre { font-size: 16px; }
    .esc .esc-galeria .esc-pie__estilo { font-size: 13px; }
    .esc-galeria .esc-btn { font-size: 14px; min-height: 44px; }
}

/* ===================== */
/* EL CARRIL (blog)      */
/* ===================== */

/* El bloque del final de cada post. Va dentro del texto del artículo: con la clase delante para
   que las reglas de la prosa del blog (listas, enlaces, títulos, párrafos) no lo toquen. */
.esc.esc-carril-bloque {
    display: block;
    margin: 44px 0;
    padding: 26px 0 8px;
    border-top: 1px solid var(--esc-borde);
    border-bottom: 1px solid var(--esc-borde);
}
.esc-carril-bloque .esc-carril-bloque__cabeza { text-align: center; margin: 0 auto 6px; max-width: 34em; }
.esc-carril-bloque .esc-carril-bloque__titulo {
    margin: 0;
    font-family: var(--v2-font-heading, var(--esc-letra));
    font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
    color: var(--esc-tinta);
}
.esc-carril-bloque .esc-carril-bloque__sub { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--esc-gris); }
.esc-carril-bloque ol, .esc-carril-bloque li { margin: 0; padding: 0; list-style: none; }
.esc-carril-bloque li::before, .esc-carril-bloque li::marker { content: none; }
.esc-carril-bloque a { text-decoration: none; border: 0; box-shadow: none; }
.esc-carril-bloque p { margin: 0; }
.esc-carril-bloque .esc-btn--coral { color: #fff; }
.esc-carril-bloque .esc-btn--suave { color: var(--esc-tinta); }
.esc-carril-bloque .esc-enlace { color: var(--esc-coral); }

.esc-carril { position: relative; margin: 8px 0 0; }
.esc-carril__pista {
    list-style: none; margin: 0;
    display: flex; gap: 16px;
    padding: 8px 4px 18px;
    overflow-x: auto;
    /* `proximity`, nunca `mandatory`: el ajuste obligatorio desplaza la pista al cargar y se lleva
       el LCP de la página entera (medido en la portada, 20-sep). */
    scroll-padding-inline: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.esc-carril__pista::-webkit-scrollbar { display: none; }
.esc-carril .esc-tarjeta { flex: 0 0 min(62%, 200px); scroll-snap-align: start; }
.esc-carril .esc-tarjeta__marco { padding: 5px 5px 0; }
.esc-carril .esc-tarjeta__marco:hover .esc-movil { transform: translateY(-4px); }
.esc-carril .esc-tarjeta__pie { margin-top: 14px; }
.esc-carril .esc-pie__nombre { font-size: 16px; }
.esc-carril .esc-pie__acciones { grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.esc-carril .esc-btn { min-height: 44px; font-size: 14px; }
.esc-carril__mandos {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 4px;
}
.esc-carril__flechas { display: flex; gap: 10px; }
.esc-carril__flechas .esc-flecha { width: 44px; height: 44px; }

/* ===================== */
/* EL VISOR              */
/* ===================== */

html.esc-sin-scroll { overflow: hidden; }

.esc-visor {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    margin: 0; padding: 0;
    border: 0;
    background: #F4EEE8;
    color: var(--esc-tinta);
    overflow: hidden;
}
.esc-visor::backdrop { background: rgba(28, 22, 18, 0.55); }
.esc-visor[open] { display: flex; }
/* Entra opaco y se desplaza un poco, sin escalar (A23). */
.esc-visor[open] .esc-visor__lienzo { animation: esc-visor-entra 0.32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes esc-visor-entra { from { transform: translateY(14px); } to { transform: none; } }

.esc-visor__lienzo {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
}
.esc-visor__escena {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
}
.esc-visor__movil {
    position: relative;
    width: 100%; height: 100%;
    background: var(--esc-fondo, #f3eee8);
    overflow: hidden;
}
/* En el visor la invitación sí se usa: se toca el sello, se baja con el dedo, se rellena el formulario. */
.esc-visor .esc-movil__vida { pointer-events: auto; }
.esc-visor__movil.esc-movil { border-radius: 0; box-shadow: none; aspect-ratio: auto; transition: none; }
.esc-visor__estado {
    position: absolute; z-index: 3;
    left: 50%; bottom: 7%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: max-content; max-width: 86%;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 20px rgba(40, 25, 15, 0.16);
    font-size: 14px; font-weight: 600; text-align: center;
}
.esc-visor__estado[hidden] { display: none; }
.esc-visor__estado .esc-btn { width: auto; min-height: 42px; padding: 10px 16px; font-size: 14px; }
.esc-visor__estado-botones { display: flex; gap: 8px; }
.esc-visor__punto {
    display: inline-block; width: 8px; height: 8px; margin-right: 8px;
    border-radius: 50%; background: var(--esc-coral);
    animation: esc-latido 1.1s ease-in-out infinite;
}
@keyframes esc-latido { 50% { opacity: 0.25; } }

/* Móvil: la invitación a pantalla completa y una barra abajo. */
.esc-visor__panel { display: none; }
.esc-visor__barra {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 -1px 0 var(--esc-borde), 0 -8px 24px rgba(40, 25, 15, 0.08);
}
.esc-visor__barra .esc-flecha { width: 44px; height: 44px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--esc-borde); }
.esc-visor__barra-nombre {
    flex: 1 1 auto; min-width: 0;
    font-size: 14px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center;
}
.esc-visor__barra .esc-btn { width: auto; flex: 0 0 auto; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.esc-visor__cerrar svg, .esc-visor__barra svg, .esc-visor__nav svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Ordenador: la invitación dentro de un móvil, y a su lado el panel. */
@media (min-width: 900px) {
    .esc-visor__lienzo {
        flex-direction: row; align-items: center; justify-content: center;
        gap: clamp(32px, 5vw, 80px);
        padding: 24px 32px;
    }
    .esc-visor__escena { flex: 0 0 auto; height: 100%; }
    .esc-visor__movil.esc-movil {
        height: min(844px, calc(100vh - 48px));
        height: min(844px, calc(100dvh - 48px));
        width: auto;
        aspect-ratio: 390 / 844;
        border-radius: 46px;
        box-shadow:
            0 0 0 7px #221e1c,
            0 0 0 8px rgba(255, 255, 255, 0.08),
            0 40px 80px -30px rgba(64, 38, 22, 0.55),
            0 12px 30px -12px rgba(64, 38, 22, 0.25);
    }
    .esc-visor__barra { display: none; }
    .esc-visor__panel {
        display: flex; flex-direction: column; gap: 14px;
        width: 340px; flex: 0 0 340px;
    }
    .esc-visor__pista { margin: 0; font-size: 14px; line-height: 1.5; color: var(--esc-gris); }
    .esc-visor__nombre {
        margin: 0;
        font-family: var(--v2-font-heading, var(--esc-letra));
        font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em;
    }
    .esc-visor__estilo { margin: -6px 0 0; font-size: 15px; line-height: 1.5; color: var(--esc-gris); }
    .esc-visor__panel .esc-btn--coral { margin-top: 6px; min-height: 54px; font-size: 16px; }
    .esc-visor__enlaces { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
    .esc-visor__enlaces a { color: var(--esc-gris); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    .esc-visor__enlaces a:hover { color: var(--esc-tinta); }
    .esc-visor__enlaces [hidden] { display: none; }
    .esc-visor__nav {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        margin-top: 10px; padding-top: 18px;
        border-top: 1px solid var(--esc-borde-fuerte);
    }
    .esc-visor__nav button {
        display: flex; align-items: center; gap: 8px;
        min-height: 48px; padding: 8px 12px;
        border: 0; border-radius: 12px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: inset 0 0 0 1px var(--esc-borde-fuerte);
        font: 600 14px/1.2 var(--esc-letra); color: var(--esc-tinta);
        cursor: pointer; text-align: left;
    }
    .esc-visor__nav button:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--esc-tinta); }
    .esc-visor__nav button + button { justify-content: flex-end; text-align: right; }
    .esc-visor__nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .esc-visor__cerrar {
        position: absolute; top: 20px; right: 24px; z-index: 5;
        width: 48px; height: 48px;
    }
}
@media (max-width: 899px) {
    .esc-visor__cerrar-escritorio { display: none; }
}