/* ============ DANNYSFILMS — universo fotográfico ============ */
:root {
  --fondo: #050507; --plata: #E4E6EC; --humo: rgba(228, 230, 236, .62); --tenue: rgba(228, 230, 236, .45);
  --ambar: #E9B872; --ambar2: #B8843F; --cine: #7CC8E4; --linea: rgba(255, 255, 255, .13);
  --f-wide: 'Syncopate', 'Michroma', 'Orbitron', 'Helvetica Neue', Arial, sans-serif;
  --f-tit: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --f-ser: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --vw: 176px;
  --seg-top: env(safe-area-inset-top, 0px); --seg-bot: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--plata); font-family: var(--f-tit); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; }

#cielo { position: fixed; inset: 0; z-index: 0; display: block; }
/* grano de película + viñeta */
#grano { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen; }
#grano::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%); mix-blend-mode: normal; }
#universo { position: fixed; inset: 0; z-index: 1; perspective: 1100px; overflow: hidden; user-select: none; -webkit-user-select: none; }

/* ---------- Ventanas flotantes ---------- */
.ventana { position: absolute; left: 0; top: 0; width: var(--vw); padding: 0; border: 0; background: none; text-align: center;
  will-change: transform, opacity; transform-origin: center; touch-action: none; }
.ventana.lejos { filter: saturate(.6) brightness(.7); }
.ventana .marco { display: block; position: relative; border-radius: 6px; overflow: hidden; background: #111217;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 22px 50px rgba(0, 0, 0, .65), 0 0 40px rgba(124, 200, 228, .10);
  transition: box-shadow .3s, border-color .3s, transform .3s; }
.ventana .marco::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, transparent 32%, transparent 70%, rgba(233, 184, 114, .08) 100%); }
.ventana .marco img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .6s; }
.ventana .marco .vacia { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-wide); font-size: 9px; letter-spacing: .3em; color: var(--tenue); text-transform: uppercase; }
.ventana:hover .marco, .ventana:focus-visible .marco { border-color: rgba(233, 184, 114, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(233, 184, 114, .28); }
.ventana:hover .marco img { transform: scale(1.06); }
.ventana:focus-visible { outline: none; }
.ventana.pulsada .marco { transform: scale(1.06); box-shadow: 0 0 70px rgba(233, 184, 114, .5); }

/* ventana de una foto: retrato, con el nombre chico abajo */
.ventana.foto .marco { aspect-ratio: 4 / 5; }
.ventana .nombre { display: block; margin-top: 9px; font-family: var(--f-wide); font-weight: 400; font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--humo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

/* Ventana panorámica: la foto ancha del iPhone, flotando como una tira de cine */
.ventana.pano { width: calc(var(--vw) * 2.45); }
.ventana.pano .marco { aspect-ratio: 3 / 1; border-radius: 3px; }
.ventana.pano .marco img { object-position: center; }
.ventana.pano .nombre { letter-spacing: .38em; }
.ventana.pano .panoint { position: absolute; top: 8px; left: 8px; z-index: 2; font-family: var(--f-wide); font-size: 7.5px; letter-spacing: .22em; padding: 4px 7px; border-radius: 2px; background: rgba(5, 5, 7, .72); border: 1px solid rgba(255, 255, 255, .18); color: var(--humo); }
@media (max-width: 700px) { .ventana.pano { width: calc(var(--vw) * 2.1); } }

/* Galería Expo: ventana grande, etiqueta arriba y título abajo */
.ventana.expo { width: calc(var(--vw) * 2.15); }
.ventana.expo .etiqueta { display: block; margin-bottom: 9px; font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .4em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 14px rgba(233, 184, 114, .5); }
.ventana.expo .etiqueta::before, .ventana.expo .etiqueta::after { content: ''; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 10px; opacity: .7; }
.ventana.expo .marco { aspect-ratio: 16 / 10; border-radius: 8px; border-color: rgba(255, 255, 255, .28); }
.ventana.expo .marco .contador { position: absolute; top: 9px; right: 9px; z-index: 2; font-family: var(--f-wide); font-size: 8px; letter-spacing: .18em; padding: 5px 8px; border-radius: 3px; background: rgba(5, 5, 7, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(4px); }
.ventana.expo .marco .tira { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; padding: 2px; background: rgba(5, 5, 7, .55); }
.ventana.expo .marco .tira i { flex: 1; aspect-ratio: 1; background-size: cover; background-position: center; opacity: .9; }
.ventana.expo .titulo { display: block; margin-top: 10px; font-family: var(--f-tit); font-weight: 300; font-size: 15.5px; letter-spacing: .06em; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
@media (max-width: 700px) { .ventana.expo { width: calc(var(--vw) * 1.7); } .ventana.expo .titulo { font-size: 13.5px; } }

/* ---------- HUD ---------- */
.hud-top { position: fixed; z-index: 20; left: 0; right: 0; top: 0; padding: calc(12px + var(--seg-top)) 16px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: 11px; border: 0; background: none; padding: 6px 4px; text-align: left; }
.marca-ojo { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(228, 230, 236, .8); position: relative; flex: none;
  background: radial-gradient(circle at 50% 50%, #FFF1D6 0, var(--ambar) 22%, rgba(233, 184, 114, 0) 42%), conic-gradient(from 20deg, #2a2c33, #8a8e99, #2a2c33, #8a8e99, #2a2c33); box-shadow: 0 0 18px rgba(233, 184, 114, .35); }
.marca-txt { display: flex; flex-direction: column; gap: 2px; }
.marca-txt b { font-family: var(--f-wide); font-weight: 700; font-size: 12.5px; letter-spacing: .28em; color: #fff; }
.marca-txt small { font-family: var(--f-tit); font-weight: 300; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.hud-edit { display: flex; align-items: center; gap: 8px; background: rgba(5, 5, 7, .6); border: 1px solid rgba(233, 184, 114, .5); border-radius: 99px; padding: 8px 13px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ambar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud-edit i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); animation: late 1.6s infinite; }
@keyframes late { 50% { opacity: .35; } }
.hud-bottom { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 0 12px calc(14px + var(--seg-bot)); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.pista { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); text-align: center; transition: opacity .6s; }
.hud-botones { display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.hud-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(8, 9, 13, .68); font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--plata); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hud-btn span { font-size: 15px; }
.hud-btn.principal { background: linear-gradient(135deg, #F6D9A6, var(--ambar) 50%, var(--ambar2)); color: #1a1204; border-color: transparent; box-shadow: 0 0 24px rgba(233, 184, 114, .4); font-weight: 500; }
body.abierto .hud-bottom, body.abierto .hud-top { opacity: 0; pointer-events: none; }
body.abierto .hud-bottom *, body.abierto .hud-top * { pointer-events: none; }

/* ---------- Intro ---------- */
#intro { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at center, rgba(20, 22, 30, .78), rgba(3, 3, 4, .97) 72%); transition: opacity 1s, transform 1s; }
#intro.fuera { opacity: 0; transform: scale(1.18); pointer-events: none; }
.intro-ojo { width: 120px; height: 120px; border-radius: 50%; position: relative; margin-bottom: 28px; border: 2px solid rgba(228, 230, 236, .5);
  background: radial-gradient(circle, #FFF3DA 0, #F0C27A 14%, rgba(233, 184, 114, .2) 30%, transparent 44%); box-shadow: 0 0 60px rgba(233, 184, 114, .3), inset 0 0 30px rgba(0, 0, 0, .8); animation: respira 3.4s ease-in-out infinite; }
.intro-ojo i { position: absolute; left: 50%; top: 50%; width: 46px; height: 92px; margin: -46px 0 0 -23px; border-radius: 40% 40% 50% 50%; background: linear-gradient(180deg, #D4D7DF, #55596A); transform-origin: 50% 50%; opacity: .85; clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
.intro-ojo i:nth-child(1) { transform: rotate(0deg) translateY(-30px); } .intro-ojo i:nth-child(2) { transform: rotate(60deg) translateY(-30px); } .intro-ojo i:nth-child(3) { transform: rotate(120deg) translateY(-30px); }
.intro-ojo i:nth-child(4) { transform: rotate(180deg) translateY(-30px); } .intro-ojo i:nth-child(5) { transform: rotate(240deg) translateY(-30px); } .intro-ojo i:nth-child(6) { transform: rotate(300deg) translateY(-30px); }
@keyframes respira { 50% { box-shadow: 0 0 90px rgba(124, 200, 228, .35), inset 0 0 30px rgba(0, 0, 0, .8); } }
#intro h1 { font-family: var(--f-wide); font-weight: 700; font-size: clamp(26px, 7vw, 54px); line-height: 1; margin: 0 0 14px; letter-spacing: .3em; padding-left: .3em; color: #fff; text-shadow: 0 0 30px rgba(255, 255, 255, .25); }
#intro h1 span { font-weight: 400; color: var(--ambar); }
#intro p { font-family: var(--f-ser); font-style: italic; font-size: 20px; color: var(--humo); margin: 0 0 30px; letter-spacing: .04em; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 26px; border-radius: 99px; border: 0; font-weight: 500; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(135deg, #F6D9A6, var(--ambar) 50%, var(--ambar2)); color: #1d1405; box-shadow: 0 6px 24px rgba(233, 184, 114, .3); }
.btn:disabled { opacity: .5; }
.btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 15px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--plata); backdrop-filter: blur(8px); }
.btn-sec:disabled { opacity: .4; }
.btn-sec.peligro { border-color: rgba(255, 110, 110, .4); color: #FF9C9C; }
.cerrar { position: absolute; top: calc(12px + var(--seg-top)); right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 9, 13, .6); font-size: 17px; color: #fff; backdrop-filter: blur(8px); }

/* ---------- Visor de una foto ---------- */
#visor { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(56px + var(--seg-top)) 16px calc(20px + var(--seg-bot)); background: rgba(3, 3, 5, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); touch-action: auto; }
/* ---------- El cuadro: marco negro + passepartout blanco ----------
   Se usa igual en el visor, en la lupa y en la pared de la galería.
   --marco = grosor del marco negro · --mat = ancho del passepartout */
.cuadro-marco {
  display: inline-block; position: relative; background: linear-gradient(150deg, #17181c, #0a0a0c 55%, #101115);
  padding: var(--marco, 13px); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 2px 0 rgba(255, 255, 255, .05) inset,
              0 32px 70px rgba(0, 0, 0, .75), 0 6px 18px rgba(0, 0, 0, .5);
}
.cuadro-mat {
  display: block; position: relative; background: #F4F2EC; padding: var(--mat, 34px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35) inset;
}
/* el corte del passepartout: la línea fina que deja el cartón alrededor de la foto */
.cuadro-mat img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); }

#visor { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(56px + var(--seg-top)) 16px calc(20px + var(--seg-bot)); background: rgba(3, 3, 5, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); touch-action: auto; }
.visor-fig { margin: 0; max-width: min(92vw, 780px); text-align: center; animation: aparece .5s cubic-bezier(.2, .9, .25, 1.05); }
.visor-fig .cuadro-marco { --marco: 14px; --mat: clamp(20px, 4.4vmin, 46px); max-width: 100%; }
.visor-fig .cuadro-mat img { width: auto; max-width: 100%; max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); object-fit: contain; }
.visor-fig figcaption { margin-top: 22px; font-family: var(--f-wide); font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--humo); }
/* la panorámica abierta: el cuadro se estira a lo ancho de la pantalla */
.visor-fig.pano { max-width: min(96vw, 1500px); }
.visor-fig.pano .cuadro-marco { --marco: 12px; --mat: clamp(14px, 2.6vmin, 30px); display: block; }
.visor-fig.pano .cuadro-mat img { max-height: calc(100vh - 280px); max-height: calc(100dvh - 280px); }
.visor-edit { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
@keyframes aparece { from { opacity: 0; transform: translateY(30px) scale(.94); } }

/* ---------- Galería Expo (panorama) ---------- */
#expo { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #050507; touch-action: auto; animation: aparece .45s cubic-bezier(.2, .9, .25, 1.05); }
#expo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(233, 184, 114, .10), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(124, 200, 228, .08), transparent 50%); }
.expo-head { position: relative; flex: none; padding: calc(18px + var(--seg-top)) 70px 14px 22px; }
.expo-head small { display: block; font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--ambar); }
.expo-head h2 { margin: 6px 0 0; font-family: var(--f-tit); font-weight: 200; font-size: clamp(22px, 5vw, 38px); letter-spacing: .04em; line-height: 1.1; color: #fff; }
.expo-n { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.expo-edit { flex: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 22px 12px; }
.expo-progreso { font-size: 12px; letter-spacing: .1em; color: var(--ambar); }
/* La pared de la galería: cuadros enmarcados colgados, de tamaños distintos.
   El JS mide cada foto y le da su lugar (span de filas y de columnas). */
.expo-panorama {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 10px 14px calc(40px + var(--seg-bot));
  display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  grid-auto-rows: 6px; grid-auto-flow: row dense; align-items: start; column-gap: 14px;
  /* la pared de la sala: gris carbón con luz cenital, para que el marco negro se defina */
  background: radial-gradient(120% 70% at 50% -10%, #1d1f26 0%, #131419 42%, #0a0b0e 100%);
}
@media (min-width: 700px) { .expo-panorama { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); padding: 14px 26px 46px; column-gap: 22px; } }
@media (min-width: 1200px) { .expo-panorama { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); column-gap: 26px; } }
.expo-panorama .cuadro {
  display: block; width: 100%; padding: 0; border: 0; background: none; position: relative;
  --marco: 8px; --mat: 12px;
  animation: aparece .55s both; transition: transform .35s;
}
@media (min-width: 700px) { .expo-panorama .cuadro { --marco: 10px; --mat: 17px; } }
.expo-panorama .cuadro:hover { transform: translateY(-4px); }
/* En la pared todos los marcos miden igual (como en una galería de verdad):
   el passepartout absorbe la diferencia y la foto queda centrada. Las fotos
   anchas se cuelgan en un marco de doble ancho. */
/* en el teléfono el marco es casi cuadrado: con uno vertical, una foto apaisada
   deja demasiado passepartout arriba y abajo y la foto se ve chiquita */
.expo-panorama .cuadro .cuadro-marco { display: block; width: 100%; aspect-ratio: 1 / 1; }
@media (min-width: 700px) { .expo-panorama .cuadro .cuadro-marco { aspect-ratio: 4 / 5; } }
.expo-panorama .cuadro[data-ancho="2"] .cuadro-marco { aspect-ratio: 8 / 5; }
.expo-panorama .cuadro[data-ancho="3"] .cuadro-marco { aspect-ratio: 37 / 15; }
.expo-panorama .cuadro .cuadro-mat { height: 100%; display: flex; align-items: center; justify-content: center; }
.expo-panorama .cuadro .cuadro-mat img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.expo-panorama .cuadro:hover .cuadro-marco { box-shadow: 0 0 0 1px rgba(233, 184, 114, .55), 0 40px 80px rgba(0, 0, 0, .8), 0 6px 18px rgba(0, 0, 0, .5); }
.expo-panorama .cuadro .num { display: block; margin-top: 7px; font-family: var(--f-wide); font-size: 7px; letter-spacing: .26em; color: rgba(228, 230, 236, .3); text-align: center; }
.expo-panorama .cuadro:hover .num { color: var(--humo); }
.expo-panorama .cuadro.portada .num::after { content: ' · PORTADA'; color: var(--ambar); }
.expo-vacia { grid-column: 1 / -1; text-align: center; padding: 60px 20px; font-family: var(--f-ser); font-style: italic; font-size: 20px; color: var(--tenue); }

/* ---------- Lupa (foto grande dentro de la galería) ---------- */
#lupa { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: calc(60px + var(--seg-top)) 64px calc(60px + var(--seg-bot)); background: rgba(2, 2, 3, .97); touch-action: pan-y; }
#lupa .cuadro-marco { --marco: 13px; --mat: clamp(16px, 3.6vmin, 40px); max-width: min(92vw, 1100px); animation: aparece .35s; }
#lupa .cuadro-mat img { width: auto; max-width: 100%; max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); object-fit: contain; }
@media (max-width: 700px) { #lupa { padding: calc(50px + var(--seg-top)) 14px calc(70px + var(--seg-bot)); } #lupa .cuadro-marco { --marco: 9px; --mat: 14px; } }
.lupa-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 9, 13, .72); backdrop-filter: blur(6px); font-size: 30px; line-height: 1; color: #fff; }
.lupa-nav.prev { left: 12px; } .lupa-nav.next { right: 12px; }
.lupa-pie { position: absolute; left: 0; right: 0; bottom: calc(16px + var(--seg-bot)); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: var(--f-wide); font-size: 9px; letter-spacing: .3em; color: var(--humo); }
.lupa-edit { display: inline-flex; gap: 8px; }
@media (max-width: 700px) { .lupa-nav { width: 44px; height: 44px; font-size: 26px; opacity: .8; } }

/* ---------- Hojas (lista, acceso, formulario) ---------- */
#explorar, #acceso, #forma { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: calc(10px + var(--seg-top)) 0 0; background: rgba(3, 3, 5, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: auto; }
@media (min-width: 700px) { #explorar, #acceso, #forma { align-items: center; padding: 20px; } }
.hoja { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; overflow: hidden;
  background: linear-gradient(180deg, #15161c, #0a0b0f); border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; box-shadow: 0 -20px 80px rgba(0, 0, 0, .7); animation: sube .4s cubic-bezier(.2, .9, .25, 1.05); }
@media (min-width: 700px) { .hoja { border-radius: 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); } }
.hoja.chica { width: min(440px, 100%); }
@keyframes sube { from { opacity: 0; transform: translateY(60px); } }
.hoja-head { position: relative; padding: 20px 64px 14px 22px; border-bottom: 1px solid var(--linea); flex: none; }
.hoja-head small { font-family: var(--f-wide); font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--ambar); }
.hoja-head h2 { margin: 5px 0 0; font-family: var(--f-tit); font-weight: 300; font-size: 22px; letter-spacing: .04em; }
.hoja-head .cerrar { top: 14px; right: 14px; width: 40px; height: 40px; }
.hoja-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px calc(26px + var(--seg-bot)); overscroll-behavior: contain; }
.hoja-sub { margin: 0 0 14px; color: var(--humo); font-size: 14.5px; font-weight: 300; }
.hoja form { display: flex; flex-direction: column; gap: 10px; }
.hoja input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); font-size: 16px; font-weight: 300; letter-spacing: .04em; outline: none; }
.hoja input:focus { border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(233, 184, 114, .15); }
.hoja label { display: flex; flex-direction: column; gap: 6px; }
.hoja label span { font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); }
.hoja .btn { margin-top: 6px; }
.recado { margin: 12px 0 0; min-height: 1.2em; font-size: 13.5px; color: #FF9C9C; }
.recado.bien { color: #9FE1CB; }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tipo { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); text-align: left; }
.tipo b { font-weight: 500; font-size: 14px; letter-spacing: .04em; } .tipo small { font-size: 11.5px; color: var(--tenue); font-weight: 300; }
.tipo.activo { border-color: var(--ambar); background: rgba(233, 184, 114, .1); box-shadow: 0 0 0 1px var(--ambar) inset; }
.tipo.ancho { grid-column: 1 / -1; }

/* lista de explorar */
.lista { display: flex; flex-direction: column; gap: 6px; }
.lista button { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .03); text-align: left; }
.lista button:hover { border-color: rgba(255, 255, 255, .15); }
.lista .mini { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; background: #15161c; }
.lista .lt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista .lt small { font-family: var(--f-wide); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--ambar); }
.lista .lt b { font-weight: 300; font-size: 15px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .ln { font-size: 11px; letter-spacing: .15em; color: var(--tenue); text-transform: uppercase; }
.lista .orden { display: flex; gap: 4px; }
.lista .orden button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); font-size: 13px; }
.lista .orden button:disabled { opacity: .3; }

#toast { position: fixed; z-index: 90; left: 50%; bottom: calc(96px + var(--seg-bot)); transform: translate(-50%, 20px); background: rgba(14, 15, 20, .96); border: 1px solid rgba(233, 184, 114, .45); color: #fff; padding: 12px 20px; border-radius: 99px; font-size: 13px; letter-spacing: .06em; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: calc(100% - 30px); text-align: center; }
#toast.ver { opacity: 1; transform: translate(-50%, 0); }
.trabajando { opacity: .55; pointer-events: none; }