/* JON MARRICK · la web.
   La misma familia que el juego: azul petróleo casi negro, como un archivo de
   noche; paneles con filete de oro envejecido, como las carpetas de un
   expediente; y el turquesa de la brújula, en pocas gotas, para lo que tiene
   que llamar la atención. Titulares en Cinzel (los del logo), texto en
   Alegreya Sans (se lee bien en el móvil y tiene algo de libro de viajes) y
   las citas en Crimson Pro, que es la voz de los diarios y los diálogos. */
@font-face { font-family: 'Cinzel'; src: url(fuentes/cinzel-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url(fuentes/cinzel-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fuentes/alegreya-500.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fuentes/alegreya-800.woff2) format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url(fuentes/crimson-500.woff2) format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url(fuentes/crimson-500i.woff2) format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }

:root {
  --noche: #0b1820; --noche2: #10232d; --hondo: #071118; --panel: #10232d; --panel2: #153040; --borde: rgba(201, 161, 90, .32);
  --oro: #d9a94a; --oro-claro: #e3c27a; --oro-viejo: #c9a15a; --oro-osc: #8a6a32; --bronce: #3a2a14;
  --turq: #3fb7b4; --turq-claro: #7fd6d2;
  --crema: #f3ead4; --texto: #e6e0d2; --suave: #a9b8bb; --rojo: #d0596b;
  --serif: 'Cinzel', 'Trajan Pro', Georgia, serif; --sans: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cita: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --radio: 10px; --sombra: 0 18px 44px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--texto); font: 500 17.5px/1.6 var(--sans); overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }   /* height auto: con width y height en la etiqueta la imagen encoge sin deformarse */
a { color: var(--oro-claro); text-decoration: none; }
a:hover { color: var(--crema); }
:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 900; line-height: 1.14; color: var(--crema); margin: 0 0 .5em; letter-spacing: .02em; }
h1 { font-size: clamp(30px, 5vw, 54px); }
h2 { font-size: clamp(25px, 3.8vw, 40px); }
h3 { font-size: clamp(18px, 2.1vw, 21px); font-weight: 700; }
p { margin: 0 0 1em; }
.env { width: min(1180px, 100% - 32px); margin: 0 auto; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dorado { background: linear-gradient(180deg, #f8e7b4 0%, #e3c27a 38%, #c9a15a 62%, #8a6a32 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)); }
.antetitulo { font: 800 13px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--turq-claro); margin: 0 0 14px; }
.papel { display: inline-block; font: 800 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--turq-claro); margin-bottom: 6px; }

/* ── Botones: latón pulido, sin caramelo ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 28px; border-radius: 6px; border: 1px solid #f1d9a0; cursor: pointer;
  font: 700 16px/1 var(--serif); letter-spacing: .06em; color: #1c1206; background: linear-gradient(180deg, #f0d48f 0%, #d9a94a 52%, #b48535 100%);
  box-shadow: 0 3px 0 #6b4f22, 0 10px 26px rgba(217, 169, 74, .22), inset 0 1px 0 rgba(255, 248, 225, .7);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .45); transition: transform .1s ease, filter .15s ease; }
.btn:hover { color: #1c1206; filter: brightness(1.07); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6b4f22, inset 0 1px 0 rgba(255, 248, 225, .6); }
.btn.g { color: var(--oro-claro); background: linear-gradient(180deg, #17323f, #10232d); border-color: rgba(201, 161, 90, .55); box-shadow: 0 3px 0 #050c10, inset 0 1px 0 rgba(255, 255, 255, .06); text-shadow: none; }
.btn.g:hover { color: var(--crema); }
.btn.rojo { color: #ffe3e7; background: linear-gradient(180deg, #c4566a, #8f2c3f); border-color: #e48a99; box-shadow: 0 3px 0 #4d1320; text-shadow: none; }
.btn.grande { min-height: 60px; font-size: 18px; padding: 0 36px; }
.btn.ancho { width: 100%; }
.btn[disabled] { filter: grayscale(.8) brightness(.7); pointer-events: none; }

/* ── Cabecera ── */
.avisodemo { background: #4a3510; color: var(--oro-claro); text-align: center; font-size: 14px; padding: 6px; }
.avisodemo a { text-decoration: underline; }
.top { position: sticky; top: 0; z-index: 30; background: rgba(11, 24, 32, .88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201, 161, 90, .22); }
.top .env { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.marca img { width: 156px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--texto); font-weight: 800; padding: 8px 13px; border-radius: 6px; letter-spacing: .02em; }
.nav a:hover, .nav a.on { color: var(--oro-claro); background: rgba(201, 161, 90, .09); }
.nav .btn-nav { min-height: 42px; padding: 0 20px; margin-left: 8px; font-size: 15px; color: #1c1206; background: linear-gradient(180deg, #f0d48f 0%, #d9a94a 52%, #b48535 100%); }
.nav .btn-nav:hover { color: #1c1206; background: linear-gradient(180deg, #f0d48f 0%, #d9a94a 52%, #b48535 100%); }
/* Selector de idioma: discreto, a la derecha del todo. Un globo y el código; al tocar, la lista. */
.idiomas { position: relative; margin-left: 4px; }
.idiomas summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 6px; color: var(--suave); font-size: 12.5px; letter-spacing: .06em; opacity: .85; transition: opacity .15s, color .15s; }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary:hover, .idiomas[open] summary { opacity: 1; color: var(--oro-claro); }
.idiomas summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.idiomas summary b { font-weight: 800; }
.idiomas-lista { position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; padding: 6px; border-radius: 8px; background: rgba(9, 20, 27, .98); border: 1px solid rgba(201, 161, 90, .3); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); display: grid; gap: 1px; z-index: 40; }
.idiomas-lista a { padding: 8px 12px; border-radius: 5px; font-size: 15px; color: var(--texto); }
.idiomas-lista a:hover { background: rgba(201, 161, 90, .09); color: var(--oro-claro); }
.idiomas-lista a.on { color: var(--oro-claro); }
.idiomas-lista a.on::after { content: ' ✓'; font-size: 12px; }
.hamburguesa { display: none; margin-left: 4px; width: 46px; height: 46px; border-radius: 6px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(201, 161, 90, .25); }
.hamburguesa span { width: 22px; height: 2px; border-radius: 2px; background: var(--oro-claro); transition: transform .2s, opacity .2s; }
@media (max-width: 880px) {
  .marca img { width: 128px; }
  .hamburguesa { display: flex; order: 3; }
  .idiomas { margin-left: auto; order: 2; }
  .nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 20px; background: rgba(9, 20, 27, .98); border-bottom: 1px solid rgba(201, 161, 90, .25); transform: translateY(-120%); transition: transform .25s ease; }
  .nav a { padding: 12px 14px; font-size: 18px; }
  .nav .btn-nav { margin: 8px 0 0; min-height: 52px; font-size: 17px; }
  .abremenu:checked ~ .nav { transform: none; }
  .abremenu:checked + .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .abremenu:checked + .hamburguesa span:nth-child(2) { opacity: 0; }
  .abremenu:checked + .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── El trailer de portada ── */
.cine { position: relative; background: #000; overflow: hidden; }
.cine-pantalla { position: relative; height: min(56.25vw, calc(100svh - 68px)); min-height: 420px; overflow: hidden;
  /* Lo que se ve si todavía no hay ni póster ni trailer: noche sobre el Atlántico. */
  background: radial-gradient(70% 90% at 50% 38%, rgba(63, 183, 180, .16), transparent 70%), linear-gradient(180deg, #0d2230, #071118); }
.cine-poster, .cine-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-poster { animation: acercar 26s ease-in-out infinite alternate; }
.cine-v { opacity: 0; transition: opacity .8s ease; }
.cine-v.on { opacity: 1; }
.cine-sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 24, 32, .45) 0%, transparent 24%, transparent 52%, rgba(11, 24, 32, .9) 100%); }
.cine.sin-video .cine-sombra { background: radial-gradient(60% 55% at 50% 45%, rgba(7, 17, 24, .55), transparent 75%), linear-gradient(180deg, rgba(11, 24, 32, .5) 0%, rgba(11, 24, 32, .2) 40%, rgba(11, 24, 32, .92) 100%); }
.cine-rotulo { position: absolute; left: 0; right: 0; bottom: 21%; margin: 0 auto; width: min(92%, 1000px); text-align: center; pointer-events: none; min-height: 1.2em; }
.cine-rotulo span { display: inline-block; font: 700 clamp(22px, 3.4vw, 46px)/1.16 var(--serif); color: var(--crema); letter-spacing: .03em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 26px rgba(0, 0, 0, .85), 0 0 46px rgba(63, 183, 180, .22); }
.cine-rotulo.entra span { animation: rotulo-entra .8s cubic-bezier(.2, .9, .3, 1) both; }
.cine-rotulo.sale span { animation: rotulo-sale .4s ease-in both; }
.cine-sonido { position: absolute; z-index: 3; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(201, 161, 90, .6); background: rgba(11, 24, 32, .72); color: var(--crema); font: 800 15px var(--sans); backdrop-filter: blur(6px); }
.cine-sonido.llama { animation: llama 2.4s ease-in-out infinite; }
.cine-sonido .ico { width: 18px; height: 14px; display: inline-block; background: linear-gradient(var(--oro), var(--oro)) 0 100%/3px 40% no-repeat, linear-gradient(var(--oro), var(--oro)) 5px 100%/3px 100% no-repeat, linear-gradient(var(--oro), var(--oro)) 10px 100%/3px 60% no-repeat, linear-gradient(var(--oro), var(--oro)) 15px 100%/3px 80% no-repeat; opacity: .5; }
.cine-sonido[aria-pressed="true"] .ico { opacity: 1; animation: barras 1s steps(4) infinite; }
.cine-pie { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 4; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 0 16px; }
.cine-barra { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--oro); width: 0; z-index: 4; box-shadow: 0 0 8px var(--oro); }
.cine-logo { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.94); width: min(70vw, 640px); height: auto; opacity: 0; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)); }
.cine-logo.on { animation: logo-entra 1.6s .2s ease-out both; }
@media (max-width: 700px) {
  .cine-pantalla { height: min(118vw, 74svh); min-height: 0; }
  .cine-rotulo { bottom: 24%; }
  .cine-rotulo span { font-size: clamp(20px, 6.2vw, 30px); }
  .cine-logo { width: 84vw; top: 38%; }
  .cine-pie .btn { min-height: 52px; font-size: 16px; padding: 0 22px; }
  .cine-sonido { top: 12px; right: 12px; font-size: 13px; padding: 8px 12px; }
}

/* ── Bloques de portada ── */
.franja { position: relative; text-align: center; padding: 72px 0 44px; background: radial-gradient(55% 120% at 50% 0%, rgba(63, 183, 180, .1), transparent 70%); }
.franja h1 { font-size: clamp(30px, 5vw, 60px); max-width: 980px; margin-left: auto; margin-right: auto; }
.franja p.sub { max-width: 780px; margin: 0 auto; font: italic 500 clamp(19px, 2.1vw, 23px)/1.55 var(--cita); color: #cfd6d2; }
.bloque { padding: 76px 0; position: relative; }
.bloque.oscuro { background: linear-gradient(180deg, var(--noche2), var(--noche)); border-top: 1px solid rgba(201, 161, 90, .1); }
.bloque .intro { max-width: 720px; color: var(--suave); font-size: 19px; }
.centro { text-align: center; } .centro .intro { margin-left: auto; margin-right: auto; }
.rejilla3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.rejilla4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 960px) { .rejilla4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .rejilla3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .rejilla4 { grid-template-columns: 1fr; } }
/* Las cartas son carpetas de expediente: filete de oro por fuera y otro, más fino, por dentro. */
.carta { position: relative; background: linear-gradient(180deg, #132b37, var(--panel)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 24px 26px; overflow: hidden; box-shadow: var(--sombra); }
.carta::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201, 161, 90, .14); border-radius: 6px; pointer-events: none; }
.carta p { color: var(--suave); margin: 0; }
.paso-num { position: absolute; top: 14px; right: 18px; font: 900 40px/1 var(--serif); color: rgba(201, 161, 90, .2); }
.paso-ilus { height: 160px; display: flex; align-items: center; justify-content: center; margin: -4px 0 16px; position: relative; }
.paso-ilus::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(63, 183, 180, .18), transparent 70%); }
.paso-ilus img { position: relative; max-height: 150px; max-width: 190px; width: auto; height: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); }
.saber { text-align: left; }
.saber svg { width: 46px; height: 46px; fill: none; stroke: var(--oro-claro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.saber h3 { font-size: 18.5px; }

/* El reparto de la portada: una fila que se desliza. */
.reparto { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; padding: 30px 4px 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--oro-osc) transparent; }
.ficha { scroll-snap-align: start; position: relative; border-radius: var(--radio); padding: 14px 14px 18px; background: linear-gradient(180deg, #132b37, #0d1d26); border: 1px solid var(--borde); }
.ficha h3 { margin: 0 0 6px; font-size: 18px; }
.ficha p { margin: 0; font-size: 15px; color: var(--suave); line-height: 1.45; }
.ficha .papel { margin-top: 12px; }
.ficha-retrato { position: relative; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; border: 1px solid rgba(201, 161, 90, .4);
  background: radial-gradient(circle at 50% 35%, rgba(63, 183, 180, .22), transparent 62%), linear-gradient(180deg, #17323f, #0b1820); }
.ficha-retrato img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform .35s; }
.ficha:hover .ficha-retrato img, .expediente:hover .ficha-retrato img { transform: scale(1.03); }
/* Sin retrato todavía: el emblema de fondo y la inicial, como el sello de una carpeta. */
.ficha-retrato.vacio { display: grid; place-items: center; }
.ficha-retrato.vacio::before { content: ''; position: absolute; inset: 14%; background: url(img/emblema.webp) center/contain no-repeat; opacity: .14; filter: grayscale(.4); }
.ficha-retrato.vacio span { position: relative; font: 900 64px/1 var(--serif); color: var(--oro-claro); opacity: .85; text-shadow: 0 3px 14px rgba(0, 0, 0, .6); }

.navega { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .navega { grid-template-columns: 1fr; } .navega .movil-caja { order: -1; } }
/* Viñetas: un rombo de oro con el centro turquesa, como la aguja de la brújula. */
.lista-ok { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; text-align: left; }
.lista-ok li { position: relative; padding-left: 34px; font-size: 18px; }
.lista-ok li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 13px; height: 13px; transform: rotate(45deg); border: 1.5px solid var(--oro); background: radial-gradient(circle, var(--turq) 0 2.5px, transparent 3px); }
.movil-caja { position: relative; display: flex; justify-content: center; }
.movil { width: min(300px, 70vw); aspect-ratio: 390/844; border-radius: 36px; border: 10px solid #15110b; outline: 2px solid var(--oro-viejo); box-shadow: 0 30px 60px rgba(0, 0, 0, .65), 0 0 70px rgba(63, 183, 180, .14); overflow: hidden; background: #071118; position: relative; z-index: 1; }
.movil video, .movil img { width: 100%; height: 100%; object-fit: cover; }
.movil-caja .acomp { position: absolute; z-index: 2; width: 140px; height: auto; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55)); }
.movil-caja .acomp.i { left: 2%; bottom: 8%; } .movil-caja .acomp.d { right: 0; bottom: 16%; width: 160px; }
@media (max-width: 500px) { .movil-caja .acomp { width: 92px; } .movil-caja .acomp.d { width: 104px; } }
.faq { max-width: 820px; margin: 30px auto 0; display: grid; gap: 12px; }
.faq details { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font-weight: 800; font-size: 18px; position: relative; color: var(--crema); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 12px; font: 700 26px var(--serif); color: var(--oro); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--suave); padding-bottom: 18px; margin: 0; }
/* Cierre de la portada: una tarjeta con el texto a un lado y la radio al otro. */
.final { padding: 70px 0 96px; background: linear-gradient(var(--noche), #08151c); }
.final-caja { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px; padding: 48px 56px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(70% 110% at 80% 55%, rgba(63, 183, 180, .18), transparent 62%), linear-gradient(160deg, #153040, #0b1820);
  border: 1px solid rgba(201, 161, 90, .4); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04); }
.final-caja::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 161, 90, .15); border-radius: 8px; pointer-events: none; }
.final-txt h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 12px; }
.final-txt p { color: #cfd6d2; font: italic 500 21px/1.5 var(--cita); margin: 0 0 26px; max-width: 460px; }
.final-arte img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(217, 169, 74, .18)); animation: flotar 6s ease-in-out infinite; }
@media (max-width: 760px) {
  .final { padding: 46px 0 64px; }
  .final-caja { grid-template-columns: 1fr; text-align: center; padding: 34px 22px 36px; gap: 18px; }
  .final-arte { order: -1; }
  .final-arte img { max-height: 190px; }
  .final-txt p { margin: 0 auto 22px; font-size: 19px; }
}

/* ── Tarjetas de artículos ── */
.arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 900px) { .arts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .arts { grid-template-columns: 1fr; } }
.art-tarjeta { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); transition: transform .2s, border-color .2s; }
.art-tarjeta:hover { transform: translateY(-4px); border-color: rgba(227, 194, 122, .6); color: var(--texto); }
.art-foto { aspect-ratio: 16/9; overflow: hidden; background: #000; }
.art-foto img { width: 100%; height: 100%; object-fit: cover; }
.art-txt { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.art-txt em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-claro); }
.art-txt h2, .art-txt h3 { font-size: 19px; margin: 0; color: var(--crema); }
.art-res { color: var(--suave); font-size: 15px; line-height: 1.45; }
.art-meta { margin-top: auto; font-size: 13px; color: var(--suave); opacity: .8; }

/* ── Páginas interiores ── */
.cabeza { position: relative; padding: 66px 0 38px; text-align: center; background: radial-gradient(55% 120% at 50% 0%, rgba(63, 183, 180, .1), transparent 70%); }
/* Con fondo: el archivo de los Marrick, muy apagado, para que la cabecera tenga lugar y no solo color. */
.cabeza.con-fondo { background: linear-gradient(180deg, rgba(11, 24, 32, .72), rgba(11, 24, 32, .94) 70%, var(--noche)), url(img/archivo.webp) center 40%/cover no-repeat; border-bottom: 1px solid rgba(201, 161, 90, .14); }
.cabeza p { max-width: 720px; margin: 0 auto; color: #cfd6d2; font: italic 500 21px/1.5 var(--cita); }
.cabeza .deco { position: absolute; bottom: 4px; width: auto; height: auto; max-width: 150px; max-height: 150px; opacity: .95; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); }
.cabeza .deco.i { left: max(10px, calc(50% - 570px)); } .cabeza .deco.d { right: max(10px, calc(50% - 570px)); }
@media (max-width: 860px) { .cabeza .deco { display: none; } }
.sec-tit { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-size: clamp(22px, 3vw, 30px); }
.sec-tit::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 161, 90, .55), transparent); }
.expedientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; margin: 20px 0 46px; }
.expediente { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: var(--radio); background: linear-gradient(180deg, #132b37, #0d1d26); border: 1px solid var(--borde); scroll-margin-top: 90px; }
.expediente h3 { margin: 0 0 8px; font-size: 21px; }
.expediente p { margin: 0; color: var(--suave); font-size: 16px; line-height: 1.5; }
@media (max-width: 520px) {
  .expedientes { grid-template-columns: 1fr; }
  .expediente { grid-template-columns: 110px 1fr; gap: 14px; padding: 12px; }
  .expediente h3 { font-size: 18px; }
  .expediente p { font-size: 15px; }
  .ficha-retrato.vacio span { font-size: 48px; }
}

/* Cajas de formulario (entrar, código, perfil...) */
.caja { position: relative; width: min(520px, 100% - 32px); margin: 50px auto 70px; background: linear-gradient(180deg, #132b37, var(--panel)); border: 1px solid rgba(201, 161, 90, .42); border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; }
.caja::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201, 161, 90, .13); border-radius: 8px; pointer-events: none; }
.caja-cab { position: relative; padding: 30px 28px 10px; text-align: center; }
.caja-cab img.mascota { width: auto; height: 116px; margin: -4px auto 10px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
.caja-cab h1 { font-size: clamp(25px, 4vw, 32px); }
.caja-cab p { color: var(--suave); }
.caja-cuerpo { position: relative; padding: 10px 28px 30px; }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-weight: 800; margin-bottom: 6px; }
.campo input[type=email], .campo input[type=text], .campo input[type=password], .campo textarea, .campo select { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(201, 161, 90, .35); background: #08141a; color: var(--crema); font: 500 18px var(--sans); }
.campo input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(217, 169, 74, .16); }
.campo.codigo input { text-align: center; letter-spacing: .5em; font-size: 28px; font-weight: 800; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--suave); margin: 4px 0 16px; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--turq); }
.mini { font-size: 14.5px; color: var(--suave); margin-top: 14px; }
.peligro { color: #ef9aa7; }
.aviso { position: relative; padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; background: rgba(217, 169, 74, .09); border: 1px solid rgba(217, 169, 74, .38); }
.aviso.bien { background: rgba(63, 183, 180, .1); border-color: rgba(63, 183, 180, .45); }
.aviso.mal { background: rgba(208, 89, 107, .12); border-color: rgba(208, 89, 107, .5); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 18px; }
.cifras.dos { grid-template-columns: 1fr 1fr; }
.cifras div { background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 161, 90, .14); border-radius: 8px; padding: 12px 6px; text-align: center; }
.cifras b { display: block; font: 900 26px var(--serif); color: var(--oro-claro); }
.cifras span { font-size: 13px; color: var(--suave); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla td, .tabla th { padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); text-align: left; }

/* Tienda: un solo producto, contado entero y sin letra pequeña */
.producto { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; margin: 30px 0 18px; padding: 34px 40px; border-radius: 12px;
  background: radial-gradient(60% 90% at 22% 50%, rgba(63, 183, 180, .16), transparent 65%), linear-gradient(160deg, #153040, #0d1d26);
  border: 1px solid rgba(201, 161, 90, .5); box-shadow: 0 0 0 4px rgba(201, 161, 90, .06), var(--sombra); }
.producto::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 161, 90, .16); border-radius: 8px; pointer-events: none; }
.producto-arte { position: relative; height: 320px; }
.producto-arte img { position: absolute; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
.producto-arte .p-mapa { width: 64%; left: 2%; top: 6%; transform: rotate(-7deg); }
.producto-arte .p-diario { width: 50%; right: 6%; top: 18%; transform: rotate(5deg); }
.producto-arte .p-brujula { width: 30%; left: 30%; bottom: 0; }
.producto-txt { position: relative; }
.producto-txt h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 10px; }
.producto-desc { font: italic 500 20px/1.5 var(--cita); color: #cfd6d2; }
.producto .lista-ok { margin: 16px 0 22px; }
.producto .lista-ok li { font-size: 16.5px; }
.producto .precio { display: flex; align-items: baseline; gap: 12px; font: 900 40px/1 var(--serif); color: var(--oro-claro); margin: 0 0 16px; }
.producto .precio small { font: 800 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.producto.tuyo { border-color: rgba(63, 183, 180, .55); }
@media (max-width: 820px) {
  .producto { grid-template-columns: 1fr; padding: 26px 20px 28px; gap: 10px; }
  .producto-arte { height: 220px; max-width: 360px; width: 100%; margin: 0 auto; }
}
.claro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 760px) { .claro { grid-template-columns: 1fr; } }
.claro div { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 16px 18px; display: grid; gap: 4px; }
.claro b { font-family: var(--serif); font-weight: 700; color: var(--oro-claro); font-size: 16px; letter-spacing: .03em; }
.claro span { color: var(--suave); font-size: 15.5px; }

/* Artículo */
.articulo { width: min(780px, 100% - 32px); margin: 40px auto 60px; }
.articulo-cab { text-align: center; margin-bottom: 26px; }
.articulo-cab em { font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-claro); font-size: 13px; }
.articulo-cab h1 { margin-top: 10px; }
.articulo-cab .meta { color: var(--suave); font-size: 14px; }
.articulo-portada { border-radius: var(--radio); overflow: hidden; margin: 0 0 30px; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.articulo-cuerpo { font-size: 18.5px; line-height: 1.7; }
.articulo-cuerpo h2 { font-size: clamp(23px, 3vw, 29px); margin-top: 1.6em; color: var(--oro-claro); }
.articulo-cuerpo h3 { margin-top: 1.4em; }
.articulo-cuerpo .lead { font: italic 500 22px/1.55 var(--cita); color: var(--crema); }
.articulo-cuerpo blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--oro); font: italic 500 21px/1.55 var(--cita); color: var(--crema); }
.articulo-cuerpo ul, .articulo-cuerpo ol { padding-left: 1.3em; }
.articulo-cuerpo li { margin-bottom: .4em; }
.articulo-cuerpo .caja-dato { background: var(--panel); border-left: 3px solid var(--oro); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 1.2em 0; }
.articulo-cuerpo .art-resumen { background: linear-gradient(#132b37, var(--panel)); border: 1px solid var(--borde); border-radius: 10px; padding: 16px 22px; margin: 1.4em 0; }
.articulo-cuerpo .art-resumen > p:first-child { font-weight: 800; color: var(--oro-claro); margin-bottom: .3em; }
.articulo-cuerpo figure { margin: 1.6em 0; }
.articulo-cuerpo figure img { border-radius: 8px; margin: 0 auto; }
.articulo-cuerpo figcaption { text-align: center; font-size: 14px; color: var(--suave); margin-top: 8px; }
.articulo-cta { position: relative; margin: 40px 0 0; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(63, 183, 180, .16), var(--panel) 70%); border: 1px solid rgba(201, 161, 90, .45); border-radius: var(--radio); padding: 30px 20px; }
.articulo-cta img { width: auto; height: 110px; margin: -6px auto 10px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
.legal h2 { margin-top: 1.6em; font-size: 23px; color: var(--oro-claro); }
.nota { color: var(--suave); font-size: 14.5px; }

/* Pie */
.pie { border-top: 1px solid rgba(201, 161, 90, .2); padding: 48px 0 40px; text-align: center; background: var(--hondo); }
.pie-marca img { margin: 0 auto 10px; width: 72px; height: 72px; }
.pie-lema { font: italic 500 19px var(--cita); color: var(--oro-claro); }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 18px; }
.pie-enlaces a { color: var(--suave); font-weight: 500; }
.pie-enlaces a:hover { color: var(--oro-claro); }
.pie-marbo { display: inline-block; font-weight: 800; padding: 8px 18px; border: 1px solid var(--borde); border-radius: 99px; margin-bottom: 14px; }
.pie-firma { color: var(--suave); font-size: 13px; opacity: .8; margin: 0; }

/* 404 */
.e404 { text-align: center; padding: 70px 16px 90px; }
.e404 img { width: auto; height: 220px; margin: 0 auto 18px; animation: flotar 5s ease-in-out infinite; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)); }

/* Aparición suave al hacer scroll: solo si el navegador sabe hacerlo (si no, se ve todo tal cual). */
@supports (animation-timeline: view()) {
  .sube { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes logo-entra { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(6px) drop-shadow(0 12px 30px rgba(0, 0, 0, .7)); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)); } }
@keyframes rotulo-entra { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rotulo-sale { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes barras { 0% { background-size: 3px 40%, 3px 100%, 3px 60%, 3px 80%; } 25% { background-size: 3px 90%, 3px 50%, 3px 100%, 3px 40%; } 50% { background-size: 3px 60%, 3px 80%, 3px 40%, 3px 100%; } 75% { background-size: 3px 100%, 3px 40%, 3px 70%, 3px 60%; } }
@keyframes llama { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 169, 74, .45); } 50% { box-shadow: 0 0 0 10px rgba(217, 169, 74, 0); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .sube { animation: none !important; } .cine-logo.on { opacity: 1; transform: translate(-50%, -50%); } }
.articulo-cuerpo table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 1.2em 0; display: block; overflow-x: auto; }
.articulo-cuerpo th { text-align: left; color: var(--oro-claro); font-weight: 800; border-bottom: 1px solid rgba(201, 161, 90, .45); padding: 8px 10px; white-space: nowrap; }
.articulo-cuerpo td { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 8px 10px; vertical-align: top; }
.articulo-cuerpo tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
/* Campos sueltos dentro de las cajas (panel, instalador) */
.caja-cuerpo form > label { display: block; font-weight: 800; margin: 4px 0 6px; }
.caja-cuerpo form > input[type=text], .caja-cuerpo form > input[type=password], .caja-cuerpo form > input[type=email], .caja-cuerpo .conojo input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(201, 161, 90, .35); background: #08141a; color: var(--crema); font: 500 17px var(--sans); }