/* Pagina de Jael Valdez — B · PORTADA DE REVISTA (version final). Papel, tinta negra y UN acento: el azul cobalto de
   su saco. Foto en blanco y negro. Profundidad real: "JAEL" gigante DETRAS de su cabeza → Jael recortada → firma azul
   ENFRENTE (con filo de papel) → bloque azul que sobresale. Esquinas rectas en TODO.
   Letras: Archivo (ancho variable 62–125 %) e Instrument Serif (Google Fonts, OFL, copia local). */
@font-face { font-family: 'Archivo'; src: url(/fuentes/archivo.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/fuentes/instrument-serif.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/fuentes/instrument-serif-italica.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --papel: #efede8;
  --papel-2: #f7f6f2;        /* la hoja de la portada, mas blanca */
  --tinta: #121212;
  --gris: #57544e;           /* texto suave: 6.6:1 sobre --papel */
  --azul: #1f3fd6;           /* el cobalto de su saco */
  --linea: rgba(18, 18, 18, .14);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: var(--papel); }
body { margin: 0; overflow-x: clip; background: var(--papel); color: var(--tinta); font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.papel-grano { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pagina { width: min(100vw, 480px); margin: 0 auto; padding-bottom: 40px; will-change: transform; }
.corchete, .linea-fina, .rotulo > span, .indice .num, .r-letra, .r-dato, .of-ceja, .an-ceja, .cifras span, figcaption, .colofon, .guia, .cta-tinta small {
  font-family: 'Archivo'; font-stretch: 75%; font-weight: 500; letter-spacing: .06em; }

/* ═══ Portada ═══ */
.mesa { padding: 10px 10px 0; perspective: 1200px; perspective-origin: 50% 20%; }
.portada { position: relative; container-type: inline-size; aspect-ratio: 370 / 800; overflow: hidden; background: var(--papel-2);
  transform-origin: 50% 60%; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 50px -28px rgba(40, 30, 10, .45), 0 10px 18px -12px rgba(40, 30, 10, .35); }
.reticula { position: absolute; inset: 0 4.3cqw; display: flex; justify-content: space-between; pointer-events: none; }
.reticula i { width: 1px; background: var(--linea); transform-origin: top; }
.reticula i:nth-child(2) { opacity: .6; }
.cruz { position: absolute; width: 4.4cqw; height: 4.4cqw; pointer-events: none; }
.cruz::before, .cruz::after { content: ''; position: absolute; background: var(--tinta); }
.cruz::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%) scaleY(var(--c, 1)); }
.cruz::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%) scaleX(var(--c, 1)); }
.c1 { left: 25%; top: 58cqw; } .c2 { right: 6cqw; top: 104cqw; } .c3 { left: 6cqw; bottom: 34cqw; }

.cabeza { position: absolute; left: 4.3cqw; right: 4.3cqw; top: 3.4cqw; display: flex; justify-content: space-between; align-items: center; font-size: 3.2cqw; }
.corchete { font-size: inherit; text-transform: uppercase; }
.idioma { display: flex; align-items: center; gap: 1cqw; font: 600 3.4cqw/1 'Archivo'; letter-spacing: .08em; }
.idioma button { padding: 2.4cqw 1.6cqw; color: #66625b; --destello: .95; --chispa: var(--azul); }
.idioma button[aria-pressed="true"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--azul); }
.linea-fina { position: absolute; left: 4.3cqw; right: 4.3cqw; top: 12.5cqw; display: flex; justify-content: space-between; gap: 2cqw; padding-top: 1.8cqw; border-top: 1px solid var(--tinta);
  font-size: 3.02cqw; white-space: nowrap; transform-origin: left; }

.nombre-gigante { position: absolute; left: 2.6cqw; right: 2.6cqw; top: 17.5cqw; margin: 0; display: flex; justify-content: space-between; z-index: 1;
  font: 900 31.5cqw/0.78 'Archivo'; font-stretch: 112%; letter-spacing: -.02em; color: var(--tinta); }
.nombre-gigante .letra { display: block; padding-top: 2cqw; text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 2.4cqw 3.6cqw rgba(30, 20, 0, .16); }
.foto-capa { position: absolute; z-index: 2; left: 21cqw; top: 23cqw; width: 100cqw; pointer-events: none; will-change: transform; }
/* la foto termina en recto a la izquierda (es la orilla de la foto original, a la altura del saco): se desvanece
   en el papel abajo a la izquierda en vez de cortarse. Ella no se toca: solo esa orilla del encuadre. */
.foto-capa img { width: 100%; height: auto; filter: contrast(1.08) drop-shadow(0 3cqw 4cqw rgba(20, 14, 0, .22));
  -webkit-mask-image: linear-gradient(to bottom, #000 54%, transparent 70%), linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 4%, #000 15%);
  mask-image: linear-gradient(to bottom, #000 54%, transparent 70%), linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 4%, #000 15%);
  -webkit-mask-composite: source-over; mask-composite: add; }

.columna-izq { position: absolute; z-index: 3; left: 4.3cqw; top: 64cqw; width: 28cqw; display: flex; flex-direction: column; }
.nerd { margin: 0; display: flex; flex-direction: column; font: 300 5.1cqw/1.02 'Archivo'; font-stretch: 125%; letter-spacing: -.01em; }
.nerd span:last-child { font-weight: 800; }
.guia { margin: 3.4cqw 0 0; font-size: 3.05cqw; line-height: 1.32; text-transform: uppercase; color: var(--gris); }
.medalla { order: -1; width: 16cqw; height: 16cqw; margin: 0 0 6cqw; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2cqw 3cqw -1cqw rgba(0, 0, 0, .3); }
.medalla svg { width: 100%; height: 100%; }

/* LA FIRMA: azul de su saco, con un FILO de papel nitido (como autografo con plumon sobre una foto impresa) en vez del
   halo borroso: sobre el saco oscuro se lee por el filo; sobre el papel el filo no se ve y queda igual que antes. */
.firma-caja { position: absolute; z-index: 4; will-change: transform; left: 4cqw; top: 131.5cqw; width: 82cqw; transform: rotate(-6deg); transform-origin: 20% 60%;
  filter: drop-shadow(0 .9cqw 1.1cqw rgba(8, 16, 70, .38)); }
.firma { width: 100%; height: auto; overflow: visible; }
.firma .of-1 { stop-color: #1b39cf; } .firma .of-2 { stop-color: #2546ea; } .firma .of-3 { stop-color: #3d5cff; }
.firma .firma-filo { stroke: #f7f6f2; }
.firma .firma-brillo { fill: #b9c6ff; }
/* la LUZ que recorre la firma (al pasar el mouse o el dedo): cabeza casi blanca; el resplandor azul lo pone el filtro #of-luz */
.firma-caja.con-luz .firma-brillo { fill: #eef2ff; }

.pie-portada { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 30cqw; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 4.3cqw 4.3cqw; background: var(--papel-2); border-top: 1px solid var(--tinta); }
.telefono-grande { display: flex; flex-direction: column; font: 300 6.4cqw/0.98 'Archivo'; font-stretch: 125%; letter-spacing: -.01em; --destello: .95; --chispa: var(--azul); }
.telefono-grande small { font: 500 3cqw/1 'Archivo'; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 1.8cqw; }
.telefono-grande .destello { inset: -2cqw -3cqw; }
.bloque-azul { position: relative; width: 44cqw; height: 44cqw; margin-bottom: -4.3cqw; margin-right: -4.3cqw; align-self: flex-end; background: var(--azul); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 4cqw; transform-origin: 100% 100%;
  box-shadow: 0 -2cqw 5cqw -1.5cqw rgba(16, 30, 120, .45); transition: background .25s; --destello: .42; --chispa: #fff; }
.ba-txt { font: 500 3.2cqw/1.25 'Archivo'; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; max-width: 28cqw; }
.ba-cta { font: 800 6.6cqw/1 'Archivo'; font-stretch: 112%; letter-spacing: -.02em; padding-right: 9cqw; }
.ba-cruz { position: absolute; right: 4cqw; bottom: 4cqw; width: 7cqw; height: 7cqw; }
.ba-cruz::before, .ba-cruz::after { content: ''; position: absolute; background: #fff; }
.ba-cruz::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.ba-cruz::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }

/* ═══ Hojas de adentro ═══ */
.hoja-int { padding: 0 16px; margin-top: 64px; perspective: 1000px; }
.rotulo { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 12px; border-top: 3px solid var(--tinta); padding-top: 10px; margin-bottom: 8px; }
.rotulo > span { font-size: 12px; text-transform: uppercase; }
.rotulo-der { text-align: right; color: var(--gris); }
.rotulo h2 { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; font: 800 52px/0.9 'Archivo'; font-stretch: 112%; letter-spacing: -.035em; }
.entrada { margin: 14px 0 0; font: italic 400 22px/1.18 'Instrument Serif'; color: var(--tinta); }
.indice { list-style: none; margin: 18px 0 0; padding: 0; }
.indice li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; padding: 18px 0 20px; border-top: 1px solid var(--tinta); transform-origin: 50% 0; }
.indice li:last-child { border-bottom: 1px solid var(--tinta); }
.indice .num { font-size: 13px; color: var(--azul); font-weight: 700; }
.indice h3 { display: block; margin: 0; font: 700 29px/1 'Archivo'; font-stretch: 108%; letter-spacing: -.025em; text-transform: uppercase; }
.indice small { display: block; margin-top: 8px; font: italic 400 19px/1.2 'Instrument Serif'; color: var(--gris); }

.anuncio-negro { position: relative; display: block; margin: 34px -16px 0; padding: 22px 16px 26px; background: var(--tinta); color: #fff; overflow: hidden; --destello: .55; --chispa: #fff; }
.an-ceja { font-size: 12px; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.an-titulo { display: block; margin-top: 18px; font: 900 62px/0.86 'Archivo'; font-stretch: 112%; letter-spacing: -.04em; text-transform: uppercase; }
.an-flecha { position: absolute; right: 16px; bottom: 26px; width: 66px; height: 66px; background: var(--azul); display: grid; place-items: center; isolation: isolate; }
.an-flecha svg { width: 30px; height: 30px; color: #fff; }

.cifras { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.cifras a { padding: 16px 0 14px; display: flex; flex-direction: column; gap: 6px; --destello: .9; --chispa: var(--azul); }
.cifras a + a { border-left: 1px solid var(--tinta); padding-left: 16px; }
.cifras b { font: 900 74px/0.85 'Archivo'; font-stretch: 115%; letter-spacing: -.05em; }
.cifras span { font-size: 12.5px; text-transform: uppercase; }
.cifras i { display: block; font-style: normal; color: var(--azul); letter-spacing: .12em; font-size: 13px; margin-bottom: 3px; }
.cita-grande { position: relative; margin: 34px 0 0; padding-top: 30px; }
.comillas { position: absolute; left: -6px; top: -34px; font: 400 170px/1 'Instrument Serif'; color: var(--azul); }
.cita-grande blockquote { margin: 0; font: italic 400 36px/1.06 'Instrument Serif'; letter-spacing: -.01em; }
figcaption { margin-top: 14px; font-size: 12px; text-transform: uppercase; color: var(--gris); }
.dos-citas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--linea); }
.dos-citas figure { margin: 0; }
.dos-citas blockquote { margin: 0; font: 400 17px/1.3 'Instrument Serif'; }
.dos-citas figure + figure { border-left: 1px solid var(--linea); padding-left: 18px; }

/* CTA repetido (WhatsApp con mensaje escrito): barra de tinta con el cuadro azul de la flecha */
.cta-tinta { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; margin-top: 30px; padding: 0 0 0 16px;
  background: var(--tinta); color: #fff; font: 800 22px/1 'Archivo'; font-stretch: 108%; letter-spacing: -.02em; --destello: .5; --chispa: #fff; }
.cta-tinta small { font-size: 12px; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-left: auto; }
.cta-flecha { position: relative; align-self: stretch; width: 64px; display: grid; place-items: center; background: var(--azul); isolation: isolate; }
.cta-flecha svg { width: 26px; height: 26px; color: #fff; }

/* Renglones (directorio y preguntas) */
.directorio, .preguntas { margin-top: 18px; }
.renglon { position: relative; width: 100%; display: grid; grid-template-columns: 26px 1fr auto 22px; align-items: center; gap: 10px; min-height: 66px; padding: 0 2px;
  border-top: 1px solid var(--tinta); text-align: left; overflow: hidden; isolation: isolate; transition: color .25s; --destello: .38; --chispa: #fff; }
.directorio .renglon:last-child, .preguntas .pregunta:last-child { border-bottom: 1px solid var(--tinta); }
.renglon::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.r-letra { font-size: 12.5px; color: var(--azul); font-weight: 700; transition: color .25s; }
.r-que { margin: 0; font: 700 21px/1.05 'Archivo'; font-stretch: 105%; letter-spacing: -.02em; }
.r-dato { font-size: 13px; color: var(--gris); text-transform: lowercase; transition: color .25s; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .renglon:hover { color: #fff; }
  .renglon:hover::before { transform: scaleX(1); background: var(--tinta); }
  .renglon:hover .r-dato, .renglon:hover .r-letra { color: rgba(255, 255, 255, .82); }
  .bloque-azul:hover { background: #1834bd; }
}
/* apretado (lo pone toque.js en el MISMO cuadro del toque): el renglon se llena de azul de golpe, sin transicion */
.renglon.apretado { color: #fff; }
.renglon.apretado::before { transform: scaleX(1); background: var(--azul) !important; transition: none; }
.renglon.apretado .r-dato, .renglon.apretado .r-letra { color: #fff; transition: none; }
.bloque-azul.apretado { background: #1834bd; transition: none; }

.pregunta { border-top: 1px solid var(--tinta); transform-origin: 50% 0; }
.pregunta > summary { list-style: none; border-top: 0; grid-template-columns: 34px 1fr 22px; min-height: 64px; padding: 12px 2px; cursor: pointer; }
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta .r-que { font-size: 19px; line-height: 1.12; }
.mas { position: relative; width: 16px; height: 16px; justify-self: center; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.mas::before, .mas::after { content: ''; position: absolute; background: currentColor; }
.mas::before { left: 50%; top: 0; bottom: 0; width: 1.6px; transform: translateX(-50%); }
.mas::after { top: 50%; left: 0; right: 0; height: 1.6px; transform: translateY(-50%); }
.pregunta[open] .mas { transform: rotate(45deg); }
.respuesta { margin: 0; padding: 2px 4px 20px 46px; font: 400 16px/1.5 'Archivo'; color: #3d3a35; }
.js-mueve .pregunta[open] .respuesta { animation: abre .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

.oficina { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 34px; padding-top: 12px; border-top: 3px solid var(--tinta); }
.of-ceja { grid-column: 1 / -1; margin: 0; font-size: 12px; text-transform: uppercase; }
.of-dir { margin: 0; font: 400 15px/1.4 'Archivo'; color: var(--gris); }
.of-dir b { display: block; color: var(--tinta); font-weight: 700; }
.of-link { position: relative; align-self: end; display: inline-flex; gap: 6px; align-items: center; font: 700 14px/1 'Archivo'; padding: 12px 0; box-shadow: inset 0 -2px 0 var(--azul); --destello: .95; --chispa: var(--azul); }
.of-link svg { width: 15px; height: 15px; }
.redes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font: 600 13px/1 'Archivo'; }
.redes a { position: relative; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--tinta); --destello: .95; --chispa: var(--azul); }
.cierre { position: relative; margin-top: 48px; padding: 30px 0 10px; border-top: 1px solid var(--tinta); }
.cierre .cruz { right: 0; top: 14px; width: 18px; height: 18px; }
.cierre-chico { margin: 0 0 14px; font: 500 12px/1 'Archivo'; font-stretch: 75%; letter-spacing: .14em; }
.cierre-grande { margin: 0; font: 800 54px/0.92 'Archivo'; font-stretch: 112%; letter-spacing: -.04em; }
html[lang="es"] .cierre-grande { font-size: min(54px, 11.8vw); }   /* "Construyamos" es largo */
.cierre-grande em { font: italic 400 62px/0.95 'Instrument Serif'; letter-spacing: -.01em; color: var(--azul); }

.colofon { margin: 40px 16px 0; padding-top: 18px; border-top: 1px solid var(--tinta); font-size: 12.5px; line-height: 1.5; color: var(--gris); text-align: left; }
.colofon p { margin: 3px 0; }
.col-kw { width: 170px; margin-bottom: 10px; }
.col-kw .kw-a { fill: #b50102; } .col-kw .kw-b { fill: #828282; } .col-kw .kw-c { fill: #4d4d4d; }
.eho { display: flex; align-items: center; gap: 7px; }
.eho svg { width: 20px; height: 20px; color: var(--tinta); }
/* Firma SeqLogic (estandar web-seqlogic): "Powered by" + el logo que bota (liga a seqlogic.vercel.app) + sus redes */
.seqlogic-watermark-container { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); color: var(--tinta); }
.seqlogic-watermark-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.lb { position: relative; display: inline-flex; align-items: center; color: inherit; line-height: 0; padding: 6px 2px; --destello: .95; --chispa: #F05A28; }
.lb svg { overflow: visible; }
.seqlogic-redes { display: flex; gap: 4px; margin-left: auto; }
.seqlogic-redes a { position: relative; display: grid; place-items: center; width: 36px; height: 36px; color: var(--gris); --destello: .95; --chispa: var(--azul); }
.seqlogic-redes svg { width: 18px; height: 18px; }

/* QR */
.hoja { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(20, 18, 14, .35); opacity: 0; pointer-events: none; transition: opacity .3s; }
.hoja.abierta { opacity: 1; pointer-events: auto; }
.hoja-panel { width: min(330px, 100%); background: var(--papel-2); padding: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); transform: translateY(24px) rotate(-1.5deg); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.hoja.abierta .hoja-panel { transform: none; }
.hoja-panel .corchete { margin: 0; font-size: 12px; }
.hoja-panel h2 { margin: 6px 0 14px; font: 800 40px/0.9 'Archivo'; font-stretch: 112%; letter-spacing: -.03em; }
.qr-grande { padding: 14px; background: #fff; border: 1px solid var(--tinta); }
.qr-svg { width: 100%; height: auto; }
.qr-url { margin: 10px 0 0; font: 600 13px/1.2 'Archivo'; letter-spacing: .02em; color: var(--tinta); word-break: break-all; }
.hoja-panel p:not(.qr-url):not(.corchete) { font: 400 14px/1.4 'Archivo'; color: var(--gris); }
.cerrar { border-bottom: 1px solid var(--tinta); grid-template-columns: 1fr 22px; }

/* ═══ Game feel (toque.js) ═══ */
[data-toque] { isolation: isolate; touch-action: manipulation; }
.destello { position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0; pointer-events: none; }
.idioma .destello, .of-link .destello, .redes .destello, .cifras .destello, .lb .destello, .seqlogic-redes .destello { inset: -4px -7px; }
.idioma button, .cifras a, .telefono-grande { position: relative; }
.chispas { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; contain: strict; }
.chispas[hidden] { display: none; }
.chispas i { position: absolute; left: -10px; top: -1px; width: 10px; height: 2px; border-radius: 2px; opacity: 0; transform-origin: 100% 50%; will-change: transform, opacity; }
.chispas i.clara { box-shadow: 0 0 0 .6px rgba(31, 63, 214, .85); }   /* chispa blanca con filo azul: se ve sobre azul y sobre papel */
.dedo { position: fixed; z-index: 95; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 34%, rgba(18, 18, 18, .22) 36% 100%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .25); }
/* sin movimiento: solo hundido y destello suave */
html:not(.js-mueve) [data-toque].apretado { scale: .975; }

/* Aviso (toast) */
.aviso { position: fixed; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; max-width: calc(100vw - 32px);
  padding: 11px 16px; font: 600 14px/1.2 'Archivo', system-ui, sans-serif; background: var(--tinta); color: #fff; z-index: 90;
  transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
/* Letrero chico del video de muestra (?letrero=) */
.letrero-video { position: fixed; left: 14px; top: 14px; z-index: 99; padding: 7px 11px 7px 9px; border-radius: 8px;
  font: 600 13px/1 'Archivo', system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: rgba(10, 10, 12, .8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* antes de arrancar el movimiento */
.js-mueve .portada { opacity: 0; }
.js-mueve [data-revela] { opacity: 0; }