/* ============ KNOX — el baby shower en un universo de fotos ============
   Paleta tomada de las bolsitas y la mesa: verde salvia, cuadro vichy,
   moño olivo, margaritas, blanco y un toque dorado. Todo claro y ligero. */
:root {
  --fondo: #F6F4EC; --tinta: #2E332A; --humo: rgba(46, 51, 42, .66); --tenue: rgba(46, 51, 42, .48);
  --salvia: #8E9A7A; --salvia2: #6F7B5C; --olivo: #5C6647; --vichy: #DCE0D2; --crema: #FBF9F3;
  --oro: #C9A25A; --oro2: #A8823E; --pato: #E9963F; --linea: rgba(46, 51, 42, .12);
  --f-script: 'Pinyon Script', 'Snell Roundhand', 'Brush Script MT', cursive;
  --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: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--tinta); 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; }
/* el cuadro vichy de las bolsitas, apenas insinuado sobre el cielo, y una viñeta suave */
#vichy { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(142, 154, 122, .06) 50%, transparent 50%), linear-gradient(90deg, rgba(142, 154, 122, .06) 50%, transparent 50%);
  background-size: 28px 28px; }
#vichy::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 130, 100, .18) 100%); }
#universo { position: fixed; inset: 0; z-index: 1; perspective: 1100px; overflow: hidden; user-select: none; -webkit-user-select: none; }

/* ---------- Ventanas flotantes: cada una es un cuadro blanco, minimalista ----------
   Marco blanco fino con una línea salvia y passepartout blanco: la foto
   nunca cubre todo el cuadro, queda con su aire alrededor. */
.ventana { position: absolute; left: 0; top: 0; width: var(--vw); padding: 0; border: 0; background: none; text-align: center;
  --vmarco: 5px; --vmat: 11px;
  will-change: transform, opacity; transform-origin: center; touch-action: none; }
@media (max-width: 700px) { .ventana { --vmarco: 4px; --vmat: 9px; } }
.ventana.lejos { filter: saturate(.8) brightness(.94); }
.ventana .marco { display: block; position: relative; border-radius: 3px; padding: var(--vmarco);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(142, 154, 122, .55), 0 18px 40px rgba(70, 80, 55, .22), 0 4px 10px rgba(70, 80, 55, .12);
  transition: box-shadow .3s, transform .3s; }
.ventana .mat { display: block; position: relative; height: 100%; padding: var(--vmat); background: #FFFFFF; overflow: hidden; }
.ventana .mat img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform .6s;
  box-shadow: 0 0 0 1px rgba(46, 51, 42, .08); }
.ventana .mat .vacia { position: absolute; inset: var(--vmat); display: grid; place-items: center; font-family: var(--f-tit); font-size: 8px; letter-spacing: .28em; color: var(--tenue); text-transform: uppercase; background: #F1F0E8; }
.ventana:hover .marco, .ventana:focus-visible .marco { box-shadow: 0 0 0 1.5px var(--salvia2), 0 24px 50px rgba(70, 80, 55, .28), 0 0 40px rgba(201, 162, 90, .25); }
.ventana:hover .mat img { transform: scale(1.05); }
.ventana:focus-visible { outline: none; }
.ventana.pulsada .marco { transform: scale(1.05); box-shadow: 0 0 0 1.5px var(--oro), 0 0 50px rgba(201, 162, 90, .45); }

/* 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-ser); font-style: italic; font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--olivo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

/* Ventana panorámica: la foto ancha del iPhone */
.ventana.pano { width: calc(var(--vw) * 2.45); }
.ventana.pano .marco { aspect-ratio: 3 / 1; }
.ventana.pano { --vmat: 8px; }
.ventana.pano .panoint { display: block; margin-bottom: 7px; font-family: var(--f-tit); font-size: 7.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--tenue); }
@media (max-width: 700px) { .ventana.pano { width: calc(var(--vw) * 2.1); } }

/* Tríptico: tres fotos juntas en un mismo cuadro, separadas por el passepartout */
.ventana.trio { width: calc(var(--vw) * 2.3); --vmat: 9px; }
.ventana.trio .marco { aspect-ratio: 2.7 / 1; }
.mat.trio3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: var(--vmat, 9px); }
.mat.trio3 .slot { display: block; position: relative; overflow: hidden; background: #F1F0E8; box-shadow: 0 0 0 1px rgba(46, 51, 42, .08); }
.mat.trio3 .slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat.trio3 .slot.hueco { background: repeating-linear-gradient(45deg, #F3F2EA 0 6px, #ECEBE2 6px 12px); }
.mat.trio3 .slot i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--f-ser); font-size: 26px; color: rgba(46, 51, 42, .25); }
@media (max-width: 700px) { .ventana.trio { width: calc(var(--vw) * 2.15); } }

/* 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-tit); font-size: 8.5px; letter-spacing: .4em; text-transform: uppercase; color: var(--oro2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 { --vmarco: 6px; --vmat: 13px; }
.ventana.expo .marco { aspect-ratio: 16 / 10; }
.ventana.expo .contador { position: absolute; right: 0; bottom: 0; z-index: 2; font-family: var(--f-tit); font-size: 7px; letter-spacing: .2em; text-transform: uppercase; padding: 3px 5px 0 0; color: var(--tenue); }
.ventana.expo .titulo { display: block; margin-top: 10px; font-family: var(--f-script); font-weight: 400; font-size: 24px; letter-spacing: .01em; color: var(--olivo); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
@media (max-width: 700px) { .ventana.expo { width: calc(var(--vw) * 1.7); } .ventana.expo .titulo { font-size: 20px; } }

/* ---------- 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: 10px; border: 0; background: none; padding: 6px 4px; text-align: left; }
.marca-pato { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 4px rgba(70, 80, 55, .25)); }
.marca-txt { display: flex; flex-direction: column; gap: 0; }
.marca-txt b { font-family: var(--f-script); font-weight: 400; font-size: 30px; line-height: 1; color: var(--olivo); }
.marca-txt small { font-family: var(--f-tit); font-weight: 400; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); margin-top: 2px; }
.hud-der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hud-edit { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .7); border: 1px solid var(--oro); border-radius: 99px; padding: 8px 13px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud-idioma { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; border: 1px solid rgba(46, 51, 42, .18); background: rgba(255, 255, 255, .65); font-family: var(--f-tit); font-size: 10px; letter-spacing: .16em; color: var(--tenue); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud-idioma i { width: 3px; height: 3px; border-radius: 50%; background: rgba(46, 51, 42, .3); }
.hud-idioma b, .hud-idioma span { font-weight: 400; transition: color .25s; }
html[lang="es"] .hud-idioma b, html[lang="en"] .hud-idioma span { color: var(--tinta); font-weight: 500; }
.hud-edit i { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 10px var(--oro); 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(46, 51, 42, .16); background: rgba(255, 255, 255, .72); font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(70, 80, 55, .12); }
.hud-btn span { font-size: 15px; }
.hud-btn.principal { background: linear-gradient(135deg, #A9B596, var(--salvia) 50%, var(--salvia2)); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(111, 123, 92, .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; }

/* ---------- La entrada: la etiqueta de la bolsita ---------- */
#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(251, 249, 243, .55), rgba(220, 224, 210, .96) 75%),
              linear-gradient(rgba(142, 154, 122, .12) 50%, transparent 50%), linear-gradient(90deg, rgba(142, 154, 122, .12) 50%, transparent 50%);
  background-size: auto, 28px 28px, 28px 28px; transition: opacity 1s, transform 1s; }
#intro.fuera { opacity: 0; transform: scale(1.14); pointer-events: none; }
.intro-tarjeta { position: relative; margin-bottom: 34px; padding: clamp(34px, 6vmin, 56px) clamp(30px, 7vmin, 70px) clamp(26px, 5vmin, 44px); background: #FFFFFF; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(142, 154, 122, .5), 0 0 0 7px #fff, 0 0 0 8px rgba(142, 154, 122, .35), 0 30px 60px rgba(70, 80, 55, .22);
  animation: cuelga 1.1s cubic-bezier(.2, .9, .25, 1.05); }
/* la orilla festoneada, como la de la etiqueta */
.intro-tarjeta::before { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(142, 154, 122, .55); border-radius: 4px; pointer-events: none; }
@keyframes cuelga { from { opacity: 0; transform: translateY(-26px) scale(.94); } }
/* el moño: dos lazos y el nudo, en verde olivo */
.intro-mono { position: absolute; top: -22px; left: 50%; width: 58px; height: 30px; transform: translateX(-50%); }
.intro-mono::before, .intro-mono::after { content: ''; position: absolute; top: 4px; width: 26px; height: 20px; border-radius: 60% 60% 60% 60% / 70% 70% 50% 50%; background: linear-gradient(135deg, #A9B596, #7D8663); box-shadow: 0 2px 4px rgba(70, 80, 55, .25); }
.intro-mono::before { left: 0; transform: rotate(-12deg); } .intro-mono::after { right: 0; transform: rotate(12deg); }
.intro-mono i { position: absolute; left: 50%; top: 9px; width: 12px; height: 12px; transform: translateX(-50%); border-radius: 50%; background: #6F7B5C; }
.intro-pato { width: clamp(64px, 12vmin, 96px); height: clamp(64px, 12vmin, 96px); display: block; margin: 0 auto 6px; }
#intro h1 { font-family: var(--f-script); font-weight: 400; font-size: clamp(54px, 12vw, 96px); line-height: .95; margin: 0; color: #2E332A; }
#intro p { font-family: var(--f-tit); font-weight: 500; font-size: clamp(13px, 2.4vmin, 17px); letter-spacing: .18em; text-transform: lowercase; color: var(--olivo); margin: 8px 0 0; }
.intro-flor { display: block; margin-top: 16px; font-size: 12px; letter-spacing: .5em; color: var(--salvia); }

/* ---------- 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, #A9B596, var(--salvia) 50%, var(--salvia2)); color: #fff; box-shadow: 0 6px 22px rgba(111, 123, 92, .38); }
.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(46, 51, 42, .2); background: rgba(255, 255, 255, .8); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); backdrop-filter: blur(8px); }
.btn-sec:disabled { opacity: .4; }
.btn-sec.peligro { border-color: rgba(190, 80, 70, .4); color: #B4483C; }
.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(46, 51, 42, .18); background: rgba(255, 255, 255, .85); font-size: 17px; color: var(--tinta); backdrop-filter: blur(8px); box-shadow: 0 3px 10px rgba(70, 80, 55, .12); }

/* ---------- El cuadro: marco blanco fino + passepartout blanco ----------
   Se usa igual en el visor, el tríptico, la lupa y la pared de la galería.
   --marco = grosor del marco · --mat = ancho del passepartout */
.cuadro-marco {
  display: inline-block; position: relative; background: #FFFFFF;
  padding: var(--marco, 8px); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(142, 154, 122, .5), 0 30px 60px rgba(70, 80, 55, .25), 0 6px 16px rgba(70, 80, 55, .12);
}
.cuadro-mat { display: block; position: relative; background: #FFFFFF; padding: var(--mat, 34px); }
.cuadro-mat img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(46, 51, 42, .08); }

/* ---------- Visor de una foto ---------- */
#visor, #trio { 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(236, 238, 228, .9); 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: 9px; --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, .trio-fig figcaption { margin-top: 20px; font-family: var(--f-ser); font-style: italic; font-size: 22px; color: var(--olivo); }
.visor-fig.pano { max-width: min(96vw, 1500px); }
.visor-fig.pano .cuadro-marco { --marco: 8px; --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; align-items: center; margin-top: 18px; }
@keyframes aparece { from { opacity: 0; transform: translateY(30px) scale(.94); } }

/* ---------- Tríptico abierto ---------- */
.trio-fig { margin: 0; width: min(96vw, 1400px); text-align: center; animation: aparece .5s cubic-bezier(.2, .9, .25, 1.05); }
.trio-fig .cuadro-marco { --marco: 9px; --mat: clamp(12px, 2.4vmin, 28px); display: block; width: 100%; }
.trio-fig .cuadro-mat.trio-mat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--mat); }
.trio-fig .slot { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #F1F0E8; box-shadow: 0 0 0 1px rgba(46, 51, 42, .08); cursor: pointer; }
.trio-fig .slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.trio-fig .slot:hover img { transform: scale(1.03); }
.trio-fig .slot.hueco { cursor: default; background: repeating-linear-gradient(45deg, #F3F2EA 0 8px, #ECEBE2 8px 16px); }
.trio-fig .slot i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--f-ser); font-size: clamp(26px, 5vmin, 48px); color: rgba(46, 51, 42, .22); }
.trio-pista { margin: 12px 0 0; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
@media (max-width: 700px) { .trio-fig .slot { aspect-ratio: 3 / 4; } .trio-fig .cuadro-marco { --marco: 6px; --mat: 8px; } }

/* ---------- Galería Expo (la pared de cuadros) ---------- */
#expo { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #EEF0E7; 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(255, 244, 214, .7), transparent 55%); }
.expo-head { position: relative; flex: none; padding: calc(18px + var(--seg-top)) 70px 14px 22px; }
.expo-head small { display: block; font-family: var(--f-tit); font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--oro2); }
.expo-head h2 { margin: 2px 0 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(34px, 7vw, 56px); line-height: 1.05; color: var(--olivo); }
.expo-n { display: inline-block; margin-top: 6px; 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(--oro2); }
.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: crema con el vichy muy tenue, para que los marcos blancos resalten */
  background: linear-gradient(rgba(142, 154, 122, .07) 50%, transparent 50%), linear-gradient(90deg, rgba(142, 154, 122, .07) 50%, transparent 50%), linear-gradient(180deg, #F1F1E8, #E3E7DA);
  background-size: 28px 28px, 28px 28px, auto;
}
@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: 6px; --mat: 12px; animation: aparece .55s both; transition: transform .35s; }
@media (min-width: 700px) { .expo-panorama .cuadro { --marco: 7px; --mat: 17px; } }
.expo-panorama .cuadro:hover { transform: translateY(-4px); }
.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 1.5px var(--salvia2), 0 36px 70px rgba(70, 80, 55, .3), 0 6px 18px rgba(70, 80, 55, .15); }
.expo-panorama .cuadro .num { display: block; margin-top: 7px; font-family: var(--f-tit); font-size: 7px; letter-spacing: .26em; color: rgba(46, 51, 42, .35); text-align: center; }
.expo-panorama .cuadro:hover .num { color: var(--humo); }
.expo-panorama .cuadro.portada .num::after { content: ' · PORTADA'; color: var(--oro2); }
.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) ---------- */
#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(232, 234, 224, .97); touch-action: pan-y; }
#lupa .cuadro-marco { --marco: 9px; --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: 6px; --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(46, 51, 42, .18); background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); font-size: 30px; line-height: 1; color: var(--tinta); box-shadow: 0 3px 10px rgba(70, 80, 55, .12); }
.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-tit); 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: .85; } }

/* ---------- 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(120, 130, 100, .3); 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: #FFFFFF; border: 1px solid rgba(142, 154, 122, .4); border-bottom: 0; box-shadow: 0 -20px 80px rgba(70, 80, 55, .3); animation: sube .4s cubic-bezier(.2, .9, .25, 1.05); }
@media (min-width: 700px) { .hoja { border-radius: 20px; border-bottom: 1px solid rgba(142, 154, 122, .4); } }
.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-tit); font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--oro2); }
.hoja-head h2 { margin: 3px 0 0; font-family: var(--f-ser); font-weight: 500; font-size: 26px; letter-spacing: .01em; color: var(--tinta); }
.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(46, 51, 42, .2); background: #FBF9F3; font-size: 16px; font-weight: 300; letter-spacing: .04em; outline: none; }
.hoja input:focus { border-color: var(--salvia2); box-shadow: 0 0 0 3px rgba(142, 154, 122, .2); }
.hoja label { display: flex; flex-direction: column; gap: 6px; }
.hoja label span { font-family: var(--f-tit); 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: #B4483C; }
.recado.bien { color: var(--salvia2); }
.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(46, 51, 42, .16); background: #FBF9F3; 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(--salvia2); background: rgba(142, 154, 122, .14); box-shadow: 0 0 0 1px var(--salvia2) inset; }
.tipo.ancho { grid-column: 1 / -1; }
.pista-campo { font-size: 11px; color: var(--tenue); font-style: italic; margin-top: -2px; }

/* 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: #FBF9F3; text-align: left; }
.lista button:hover { border-color: rgba(142, 154, 122, .5); }
.lista .mini { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; background: #ECEBE2; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(142, 154, 122, .4); }
.lista .lt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista .lt small { font-family: var(--f-tit); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro2); }
.lista .lt b { font-family: var(--f-ser); font-weight: 500; font-size: 18px; letter-spacing: .01em; 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(46, 51, 42, .15); background: #fff; 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(46, 51, 42, .94); border: 1px solid rgba(201, 162, 90, .5); 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; }