/* Ismael Segura · inicio en su registro «Noche» (el de Código Tatuaje) · v1 · 22 oct 2026
   Negro con chispas, oro metálico, su foto real a toda altura, titular pesado alternando blanco y oro por línea,
   una frase en script, frases a pincel, iconos de línea en círculo dorado, firma, botón dorado. */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --negro: #050301; --negro-2: #0d0a06; --blanco: #F5F2EC; --gris: #B9B1A3; --gris-2: #7a7368;
  --oro: #E6B45A; --oro-claro: #F8DF9F; --oro-hondo: #B07A22; --oro-linea: #C9A55A;
  --metal: linear-gradient(180deg, #FBE8B4 0%, #E6B45A 38%, #C8933A 62%, #F2D48A 100%);
  --e: cubic-bezier(.16, 1, .3, 1);
  --cartel: "Anton", Impact, "Arial Narrow", sans-serif;
  --marca: "Cinzel", Georgia, serif;
  --texto: "Inter", system-ui, sans-serif;
  --rotulo: "Oswald", "Arial Narrow", sans-serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--negro); color: var(--blanco); font-family: var(--texto); font-size: 18px; line-height: 1.55; color-scheme: dark; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--oro); }
button { font: inherit; color: inherit; }
::selection { background: var(--oro); color: var(--negro); }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: 0; }

/* ---------- Capas fijas ---------- */
.chispas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.cabecera { position: fixed; z-index: 30; inset: 0 0 auto 0; display: flex; align-items: center; gap: 28px; padding: 16px clamp(18px, 3vw, 44px) 26px; background: linear-gradient(to bottom, rgba(5, 3, 1, .96) 0%, rgba(5, 3, 1, .75) 55%, transparent 100%); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--oro); font-family: var(--marca); font-weight: 700; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.marca img { width: 38px; height: auto; }
.menu { margin-left: auto; display: flex; gap: 26px; font-family: var(--rotulo); font-weight: 400; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.menu a { color: var(--gris); text-decoration: none; transition: color .4s var(--e); }
.menu a:hover { color: var(--oro-claro); }
.numerador { margin: 0 0 0 10px; font-family: var(--rotulo); font-weight: 500; font-size: 18px; letter-spacing: .06em; color: var(--blanco); }
.barra { position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 12px clamp(18px, 3vw, 44px) max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(5, 3, 1, .92), transparent); font-family: var(--rotulo); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.barra p { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-rotulo { color: var(--oro); font-weight: 500; margin-right: 8px; }
.barra-centro { color: var(--blanco); }
.barra-der { text-align: right; }
.barra-der.encendido [data-barra-b] { color: var(--oro-claro); }

/* ---------- Tomas ---------- */
.tomas { position: relative; z-index: 2; height: 100%; }
.toma { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: scale(.985); filter: blur(10px); transition: opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e), visibility 0s linear .9s; }
.toma.activa { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.toma[hidden] { display: none; }
.toma::after { content: ""; display: block; height: 84px; }

/* ---------- Tipografía del cartel ---------- */
.titular { margin: 0 0 .35em; font-family: var(--cartel); font-weight: 400; text-transform: uppercase; line-height: .96; letter-spacing: .005em; font-size: clamp(46px, 7.4vw, 118px); color: var(--blanco); text-wrap: balance; }
.titular span { display: block; }
.titular .oro { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); padding-right: .04em; }
.titular.pequeno { font-size: clamp(34px, 4.6vw, 72px); }
.rotulo { margin: 0 0 20px; font-family: var(--rotulo); font-weight: 400; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--oro); }
.pincel { margin: .2em 0 .6em; font-family: var(--cartel); text-transform: uppercase; font-size: clamp(26px, 3.2vw, 48px); line-height: 1; letter-spacing: .01em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; padding-bottom: .22em; }
.pincel::after { content: ""; position: absolute; left: -2%; right: 6%; bottom: .02em; height: .14em; background: var(--oro); opacity: .85; transform: skewX(-12deg) rotate(-1.2deg); border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; }
.script { margin: .3em 0 .5em; font-family: var(--script); font-size: clamp(34px, 4vw, 56px); line-height: 1.05; color: var(--oro); transform: rotate(-3deg); transform-origin: left; display: inline-block; }
.texto { margin: 0 0 1em; max-width: 56ch; color: var(--blanco); font-weight: 400; }
.texto b { color: var(--oro); font-weight: 600; }
.nota { margin: 16px 0 0; max-width: 54ch; font-size: 14px; color: var(--gris); }
.acciones { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 26px 0 0; }
.boton { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px 15px 28px; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; background: var(--metal); color: #130d03; font-family: var(--rotulo); font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 14px 34px -14px rgba(230, 180, 90, .6), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .5s var(--e), box-shadow .5s var(--e), filter .5s var(--e); }
.boton span { font-size: 22px; line-height: 0; transition: transform .5s var(--e); }
.boton:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 18px 40px -14px rgba(230, 180, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .6); }
.boton:hover span { transform: translateX(3px); }
.boton:active { transform: scale(.98); }
.enlace { background: none; border: 0; padding: 0; color: var(--oro); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: 15px; }
.esquina { position: absolute; z-index: 3; margin: 0; font-family: var(--rotulo); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gris); writing-mode: vertical-rl; }
.esquina-izq { left: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%) rotate(180deg); }
.esquina-der { right: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%); color: var(--oro); }

/* ---------- 1 · Cartel ---------- */
.cartel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.cartel-foto { position: absolute; inset: 0 0 0 44%; z-index: 0; }
.cartel-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; filter: grayscale(1) contrast(1.35) brightness(.72); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 100%), linear-gradient(to bottom, #000 72%, transparent 100%), radial-gradient(ellipse 64% 86% at 44% 42%, #000 30%, transparent 92%); -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 100%), linear-gradient(to bottom, #000 72%, transparent 100%), radial-gradient(ellipse 64% 86% at 44% 42%, #000 30%, transparent 92%); mask-composite: intersect; }
.cartel-texto { position: relative; z-index: 2; padding: clamp(84px, 11vh, 120px) clamp(20px, 5vw, 72px) clamp(96px, 12vh, 120px) clamp(56px, 6vw, 96px); }
.cartel .titular { max-width: 10ch; font-size: clamp(40px, 5.5vw, 88px); }
.documento { position: absolute; z-index: 2; right: clamp(60px, 7vw, 120px); bottom: clamp(86px, 13vh, 130px); margin: 0; width: clamp(120px, 11vw, 168px); transform: rotate(3deg); }
.documento img { width: 100%; border: 3px solid var(--blanco); border-bottom-width: 34px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); filter: contrast(1.05); }
.documento figcaption { position: absolute; left: 4px; right: 4px; bottom: 5px; text-align: center; font-family: var(--rotulo); font-size: 8px; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: #333; }

/* ---------- Preguntas ---------- */
.pregunta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; }
.pregunta-dentro { padding: clamp(84px, 11vh, 120px) clamp(20px, 4vw, 48px) clamp(110px, 16vh, 150px) clamp(56px, 6vw, 96px); max-width: 760px; }
.pregunta-texto { margin: 0 0 22px; font-family: var(--cartel); text-transform: uppercase; font-size: clamp(28px, 3.3vw, 50px); line-height: 1; letter-spacing: .005em; color: var(--blanco); text-wrap: balance; }
.pregunta-texto .oro { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.porque { margin: -8px 0 18px; font-size: 14px; color: var(--gris); max-width: 52ch; }
.porque b { color: var(--oro); font-weight: 600; }
.opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcion { font-size: 16px; width: 100%; text-align: left; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 16px 9px 10px; border: 1px solid rgba(201, 165, 90, .45); border-radius: 8px; background: rgba(255, 255, 255, .025); color: var(--blanco); font-size: 17px; line-height: 1.3; cursor: pointer; transition: border-color .4s var(--e), background .4s var(--e), transform .4s var(--e), opacity .5s var(--e); }
.opcion::before { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--oro-linea); display: grid; place-items: center; transition: background .4s var(--e); }
.opcion:hover { border-color: var(--oro); transform: translateX(3px); }
.opcion[aria-pressed="true"] { border-color: var(--oro-claro); background: rgba(230, 180, 90, .12); }
.opcion[aria-pressed="true"]::before { background: var(--metal); border-color: transparent; }
.pregunta.respondida .opcion:not([aria-pressed="true"]) { opacity: .32; pointer-events: none; }
.pregunta-foto { position: absolute; inset: 0 0 0 52%; z-index: 0; }
.pregunta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; filter: grayscale(1) contrast(1.3) brightness(.45); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%), radial-gradient(ellipse 80% 95% at 45% 40%, #000 40%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 40%), radial-gradient(ellipse 80% 95% at 45% 40%, #000 40%, transparent 100%); mask-composite: intersect; }
.veo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(201, 165, 90, .3); opacity: 0; transform: translateY(12px); transition: opacity .8s var(--e), transform .8s var(--e); }
.pregunta.respondida .veo { opacity: 1; transform: none; }
.veo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.15); border: 1.5px solid var(--oro-linea); }
.veo .quien { display: block; font-family: var(--rotulo); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); margin-bottom: 6px; }
.veo p { margin: 0; font-family: var(--cartel); text-transform: uppercase; font-size: clamp(20px, 2vw, 28px); line-height: 1.05; color: var(--blanco); max-width: 30ch; }
.veo .acciones { margin-top: 16px; }
.volver { margin: 22px 0 0; }

/* ---------- Historia y vídeo ---------- */
.historia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.historia-foto { position: absolute; inset: 0 48% 0 0; z-index: 0; }
.historia-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.3) brightness(.75); -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30%), linear-gradient(to bottom, #000 75%, transparent 100%), radial-gradient(ellipse 85% 95% at 45% 35%, #000 42%, transparent 100%); -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(to left, transparent 0, #000 30%), linear-gradient(to bottom, #000 75%, transparent 100%), radial-gradient(ellipse 85% 95% at 45% 35%, #000 42%, transparent 100%); mask-composite: intersect; }
.historia-texto { grid-column: 2; position: relative; z-index: 2; padding: clamp(92px, 13vh, 140px) clamp(56px, 6vw, 96px) clamp(110px, 16vh, 150px) clamp(20px, 4vw, 48px); }
.historia [data-paso] { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--e), transform .9s var(--e); }
.historia [data-paso].visto { opacity: 1; transform: none; }
.pantalla { display: grid; place-items: center; }
.pantalla-dentro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(92px, 13vh, 140px) clamp(20px, 5vw, 72px) clamp(110px, 16vh, 150px); width: min(100%, 1180px); }
.marco-video { position: relative; width: min(100%, 320px); border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 165, 90, .35); }
.marco-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.sonido { position: absolute; left: 14px; bottom: 14px; border: 0; border-radius: 4px; padding: 9px 14px; background: var(--metal); color: #130d03; font-family: var(--rotulo); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.sonido[aria-pressed="true"] { background: rgba(5, 3, 1, .75); color: var(--oro-claro); box-shadow: 0 0 0 1px var(--oro-linea); }

/* ---------- Espejo ---------- */
.espejo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.espejo-dentro { position: relative; z-index: 2; padding: clamp(92px, 13vh, 140px) clamp(20px, 4vw, 48px) clamp(110px, 16vh, 150px) clamp(56px, 6vw, 96px); }
.espejo .titular { font-size: clamp(54px, 8vw, 128px); }
.espejo-foto { position: absolute; inset: 0 0 0 58%; z-index: 0; }
.espejo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; filter: grayscale(1) contrast(1.3) brightness(.5); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 35%), radial-gradient(ellipse 80% 95% at 45% 40%, #000 40%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 35%), radial-gradient(ellipse 80% 95% at 45% 40%, #000 40%, transparent 100%); mask-composite: intersect; }
.marcado { margin: 0 0 22px; font-size: 15px; color: var(--gris); max-width: 60ch; }
.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; }
.ab article { padding: 20px 22px; border: 1px solid rgba(201, 165, 90, .4); border-radius: 10px; background: rgba(5, 3, 1, .6); backdrop-filter: blur(8px); }
.ab h3 { margin: 0 0 10px; font-family: var(--rotulo); font-weight: 500; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.ab h3 small { display: block; font-family: var(--texto); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--gris); margin-top: 2px; }
.ab p { margin: 0; font-size: 16px; }
.ab-b { border-color: var(--oro) !important; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { position: relative; padding-left: 26px; margin: 0 0 8px; font-size: 16px; }
.lista li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; background: url("../img/estrella.svg") center / contain no-repeat; }
.hoy { margin: 18px 0 0; max-width: 900px; padding: 14px 18px; border-left: 2px solid var(--oro); background: rgba(230, 180, 90, .06); font-size: 16px; }
.hoy b { font-family: var(--rotulo); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); margin-right: 10px; font-size: 12px; }

/* ---------- Camino ---------- */
.camino-dentro { padding: clamp(92px, 13vh, 140px) clamp(20px, 5vw, 72px) clamp(110px, 16vh, 150px); width: min(100%, 1240px); margin: 0 auto; }
.camino-maf { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.escudo { width: min(100%, 380px); margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(230, 180, 90, .18)); }
.iconos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.iconos li { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; }
.iconos .ico { grid-row: 1 / 3; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--oro-linea); background-size: 26px 26px; background-position: center; background-repeat: no-repeat; }
.iconos b { font-family: var(--rotulo); font-weight: 500; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.iconos span { font-size: 15px; color: var(--gris); }
.ico-lupa { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6B45A' stroke-width='1.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5 21 21'/></svg>"); }
.ico-corazon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6B45A' stroke-width='1.4' stroke-linejoin='round'><path d='M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.4-7 10-7 10z'/></svg>"); }
.ico-cadena { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6B45A' stroke-width='1.4' stroke-linecap='round'><path d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.2 1.2'/><path d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.2-1.2'/></svg>"); }
.ico-loto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6B45A' stroke-width='1.4' stroke-linejoin='round'><path d='M12 20c-3-2-4-5-3-9 2 1 3 3 3 5 0-2 1-4 3-5 1 4 0 7-3 9z'/><path d='M12 20c-4 0-7-2-8-5 3-.5 5 .5 6 2M12 20c4 0 7-2 8-5-3-.5-5 .5-6 2'/></svg>"); }
.datos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; font-family: var(--rotulo); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.datos span::before { content: "✦ "; color: var(--oro-hondo); }
.contexto { margin: 16px 0 0; font-size: 15px; color: var(--gris); }
.otros { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: clamp(44px, 7vh, 80px) 0 0; }
.otro { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; min-height: 150px; padding: 18px 22px; border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--blanco); font-size: 15px; transition: transform .5s var(--e); }
.otro:hover { transform: translateY(-2px); }
.otro b { display: block; font-family: var(--marca); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.otro-libro { background: radial-gradient(ellipse at 30% 40%, #fffaf0, #efe4cc 70%); color: #3b2a12; }
.otro-libro b { color: #7a5a22; }
.otro-libro > img { width: 76px; filter: drop-shadow(0 14px 18px rgba(60, 40, 10, .45)); }
.otro-ct { background: #000; box-shadow: 0 0 0 1px rgba(201, 165, 90, .35); }
.otro-ct > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%; opacity: .42; filter: grayscale(1) contrast(1.15); -webkit-mask-image: linear-gradient(to right, #000 0, #000 45%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 45%, transparent 100%); }
.otro-ct > span { position: relative; grid-column: 1 / -1; padding-left: 40%; }
.ct-logo { width: 180px; margin-bottom: 8px; }
.pie { margin: clamp(44px, 7vh, 80px) 0 0; padding-top: 26px; border-top: 1px solid rgba(201, 165, 90, .25); text-align: center; font-size: 13px; color: var(--gris); }
.pie img { width: 170px; margin: 0 auto 12px; }
.pie p { max-width: 72ch; margin: 0 auto 8px; }

/* ---------- Salida ---------- */
.salida { display: grid; place-items: center; }
.salida-dentro { max-width: 720px; padding: clamp(92px, 13vh, 140px) clamp(20px, 5vw, 72px) clamp(110px, 16vh, 150px); }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .menu, .esquina, .marca span { display: none; }
  .numerador { margin-left: auto; }
  .barra { grid-template-columns: 1fr auto; font-size: 10px; }
  .barra-der { display: none; }
  .cartel, .pregunta, .historia, .espejo { grid-template-columns: 1fr; align-items: end; }
  .cartel-foto, .pregunta-foto, .espejo-foto { inset: 0 0 42% 0; }
  .cartel-foto img, .pregunta-foto img, .espejo-foto img { object-position: 50% 0; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .cartel-texto, .pregunta-dentro, .espejo-dentro { padding: 46vh 20px 120px; }
  .cartel .titular { max-width: none; }
  .documento { right: 16px; bottom: auto; top: 86px; width: 96px; }
  .historia-foto { inset: 0 0 50% 0; }
  .historia-foto img { object-position: 50% 10%; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .historia-texto { grid-column: 1; padding: 44vh 20px 120px; }
  .pantalla-dentro, .camino-maf, .otros, .ab, .iconos { grid-template-columns: 1fr; }
  .pantalla-dentro { padding: 90px 20px 120px; justify-items: center; text-align: center; }
  .pantalla-dentro .acciones { justify-content: center; }
  .escudo { width: min(60%, 240px); }
  .otro-ct > span { padding-left: 0; }
  .otro-ct > img { opacity: .22; object-position: 70% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .toma, .veo, .historia [data-paso], .opcion, .boton, .otro { transition: none; }
  .historia [data-paso] { opacity: 1; transform: none; }
  .chispas { display: none; }
}