@font-face { font-family: 'Fraunces'; font-weight: 500; font-display: swap; src: url('/fonts/fraunces-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 700; font-style: italic; font-display: swap; src: url('/fonts/fraunces-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }

@view-transition { navigation: auto; }

:root {
  /* Papel de acuarela, tinta cálida y gris de piedra. El ámbar de Eternimax es el único acento. */
  --noche: #ffffff;
  --hondo: #fffdf9;
  --panel: #f1ece4;
  --borde: #ddd6ca;
  --verde: #e8e2d8;
  --ambar: #f7941d;
  --ambar-claro: #a85a00;
  --hueso: #2b2926;
  --bruma: #6b6660;
  --tinta: #24150a;
  --papel: #faf7f2;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--papel);
  color: var(--hueso);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ambar); color: var(--tinta); }
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
:focus-visible { outline: 2px solid var(--ambar-claro); outline-offset: 3px; border-radius: 6px; }
h1, h2, p, blockquote, figure { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 0.2em; }
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#lienzo:active { cursor: grabbing; }
#lienzo.sobre-luz { cursor: pointer; }

/* Un velo oscuro bajo el texto para que se lea sobre el cielo, sin cajas. */
.velo { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(110% 85% at 0% 100%, rgba(250, 247, 242, 0.9), rgba(250, 247, 242, 0) 56%); }
/* Grano de papel de algodón sobre toda la pintura. */
.papel { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.44  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.cima { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem clamp(1rem, 3vw, 2.2rem); pointer-events: none; }
.cima > * { pointer-events: auto; }
.enlace { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.4rem; background: none; border: 0; color: var(--bruma); font-weight: 500; font-size: 0.94rem; text-decoration: none; transition: color 0.2s; }
.enlace:hover { color: var(--hueso); }
.enlace svg, .boton svg { width: 1.15em; height: 1.15em; flex: none; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0 1.35rem; border-radius: 999px; border: 1px solid #cfc7ba; background: rgba(250, 247, 242, 0.72); color: var(--hueso); font-weight: 600; font-size: 0.97rem; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--suave); }
.boton:hover { background: var(--panel); border-color: var(--hueso); }
.boton:active { transform: scale(0.97); }
.boton.principal { background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.boton.principal:hover { background: #ffab45; border-color: #ffab45; }
.boton[disabled] { opacity: 0.55; cursor: progress; }

/* ---------- Jardín ---------- */
.portada { position: fixed; left: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1.4rem, 5vh, 3rem); max-width: 31rem; pointer-events: none; }
.portada h1 { font: 500 clamp(2.5rem, 6vw, 4.6rem)/1 var(--serif); letter-spacing: -0.025em; text-wrap: balance; }
/* El nombre del jardín: ETERNA en versales abiertas y, debajo, Living Memorial. */
.sello { display: grid; gap: 0.18em; }
.portada .sello .eterna { font: 500 clamp(3.2rem, 8.5vw, 6rem)/0.92 var(--serif); letter-spacing: 0.16em; margin-right: -0.16em; }
.portada .sello .lema { font: 500 clamp(1.25rem, 2.8vw, 2rem)/1.1 var(--serif); letter-spacing: 0.01em; color: var(--bruma); }
.sello sup { font: 500 0.45em var(--sans); vertical-align: super; margin-left: 0.15em; }
.sello-mini { font: 600 0.82rem/1 var(--sans); letter-spacing: 0.22em; text-decoration: none; color: var(--hueso); }
.sello-mini span { font: 500 0.92rem var(--serif); letter-spacing: 0; color: var(--bruma); margin-left: 0.35em; }
.portada p { margin-top: 1rem; color: var(--bruma); font-size: 1.06rem; max-width: 27rem; }
.portada .pista { margin-top: 1.4rem; font-size: 0.86rem; color: var(--bruma); }
.portada { transition: opacity 0.6s; }
.en-camino .portada { opacity: 0; }
.firma { position: fixed; left: clamp(1rem, 3vw, 2.2rem); top: 1.3rem; font-size: 0.8rem; color: var(--bruma); }
.andar { position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3.5vh, 2rem); display: flex; gap: 0.6rem; }
.andar .icono { border: 1px solid #cfc7ba; background: rgba(250, 247, 242, 0.72); color: var(--hueso); width: 48px; height: 48px; }

.placas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* Con 3D el enlace es una zona transparente sobre el letrero de madera; su texto queda para lectores de pantalla. */
.placa { position: absolute; left: 0; top: 0; display: block; border-radius: 4px; text-decoration: none; pointer-events: auto; will-change: transform; }
.placa:hover { box-shadow: 0 0 0 2px var(--ambar); }
.placa:focus-visible { outline-offset: 2px; }
body:not(.sin-3d) .placa > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.placa b { display: block; font: 500 1.28rem/1.15 var(--serif); letter-spacing: -0.01em; }
.placa span { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--bruma); }

/* Sin 3D: la lista de nombres sigue ahí, como una página normal. */
.sin-3d #lienzo { display: none; }
.sin-3d .placas { position: static; display: grid; gap: 0.5rem; padding: 6rem 1.5rem 14rem; justify-items: start; overflow: auto; height: 100%; }
.sin-3d .placa { position: static; text-align: left; padding: 0.5rem 0; }

/* ---------- Memorial ---------- */
.semblanza { position: fixed; left: clamp(1rem, 3vw, 2.2rem); bottom: clamp(6.4rem, 16vh, 9rem); width: min(24rem, 34vw); pointer-events: none; }
.retrato { width: 9.5rem; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--verde); box-shadow: 0 18px 40px -18px rgba(70, 60, 50, 0.45); display: grid; place-items: center; }
.retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato .iniciales { font: 500 3rem/1 var(--serif); color: var(--bruma); }
.semblanza h1 { margin-top: 1.5rem; font: 500 clamp(2.1rem, 3.8vw, 3.5rem)/1.02 var(--serif); letter-spacing: -0.025em; text-wrap: balance; }
.semblanza .anios { margin-top: 0.7rem; font-size: 1.02rem; color: var(--bruma); font-variant-numeric: tabular-nums; }
.semblanza .ejemplo { display: inline-block; margin-top: 0.7rem; padding: 0.15rem 0.6rem; border: 1px solid var(--ambar-claro); border-radius: 999px; font-size: 0.76rem; font-weight: 600; color: var(--ambar-claro); }
.semblanza .familia { margin-top: 0.9rem; font-size: 0.95rem; color: var(--bruma); white-space: pre-line; text-wrap: pretty; }
.semblanza blockquote { margin-top: 1.3rem; font: italic 700 1.22rem/1.38 var(--serif); color: var(--hueso); text-wrap: pretty; }
.semblanza cite { display: block; margin-top: 0.5rem; font: 400 0.84rem var(--sans); color: var(--bruma); font-style: normal; }

.acciones { position: fixed; left: 0; right: 0; bottom: clamp(1rem, 3.5vh, 2rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.7rem; padding: 0 1rem; pointer-events: none; }
.acciones > * { pointer-events: auto; }
.conteo { width: 100%; text-align: center; font-size: 0.86rem; color: var(--bruma); font-variant-numeric: tabular-nums; text-shadow: 0 1px 10px rgba(250, 247, 242, 0.9); }
.aviso-cierre { width: 100%; text-align: center; color: var(--bruma); font-size: 0.92rem; }

.rotulo { border: 1px solid var(--borde); position: fixed; left: 0; top: 0; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(250, 247, 242, 0.9); font-size: 0.82rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.rotulo.visible { opacity: 1; }

.panel { position: fixed; background: var(--hondo); border: 1px solid var(--borde); box-shadow: 0 30px 70px -30px rgba(70, 60, 50, 0.35); }

/* Tarjeta de un recuerdo */
.tarjeta { right: clamp(1rem, 3vw, 2.2rem); top: 50%; width: min(25rem, calc(100vw - 2rem)); max-height: min(78vh, 40rem); display: flex; flex-direction: column; border-radius: 14px; translate: 0 -50%; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.35s, transform 0.5s var(--suave), visibility 0s 0.35s; }
.tarjeta.abierta { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.5s var(--suave); }
.tarjeta .cuerpo { overflow-y: auto; padding: 1.6rem 1.6rem 1rem; }
.tarjeta .texto { font: 500 1.22rem/1.5 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.adjunto { margin-top: 1.1rem; border-radius: 8px; overflow: hidden; background: #ede8df; }
.adjunto img, .adjunto video { display: block; width: 100%; max-height: 18rem; object-fit: contain; }
.firma-recuerdo { margin-top: 1.2rem; font-size: 0.92rem; color: var(--bruma); }
.firma-recuerdo b { color: var(--hueso); font-weight: 600; }
.tarjeta .pie { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.9rem 0.6rem; border-top: 1px solid var(--borde); }
.tarjeta .pie .paso { font-size: 0.82rem; color: var(--bruma); font-variant-numeric: tabular-nums; }
.icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--bruma); transition: background 0.2s, color 0.2s; }
.icono:hover { background: var(--panel); color: var(--hueso); }
.icono svg { width: 1.25rem; height: 1.25rem; }
.cerrar { position: absolute; right: 0.4rem; top: 0.4rem; }
.retirar { margin-top: 0.9rem; padding: 0; border: 0; background: none; color: var(--ambar-claro); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 0.2em; }

/* Hoja lateral: todos los recuerdos, o fotos y videos */
.hoja { inset: 0 0 0 auto; width: min(28rem, 100vw); display: flex; flex-direction: column; border-width: 0 0 0 1px; transform: translateX(102%); visibility: hidden; transition: transform 0.55s var(--suave), visibility 0s 0.55s; }
.hoja.abierta { transform: none; visibility: visible; transition: transform 0.55s var(--suave); }
.hoja header { padding: 1.3rem 3.6rem 1rem 1.6rem; border-bottom: 1px solid var(--borde); }
.hoja h2 { font: 500 1.5rem/1.15 var(--serif); letter-spacing: -0.01em; }
.hoja .lista { flex: 1; overflow-y: auto; padding: 0.4rem 1.6rem 2rem; }
.hoja article { padding: 1.4rem 0; border-bottom: 1px solid var(--borde); }
.hoja article:last-child { border-bottom: 0; }
.hoja article .texto { font: 500 1.08rem/1.5 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.vacio { padding: 2.5rem 0; color: var(--bruma); }
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; padding-top: 1.2rem; }
.mosaico button { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: #ede8df; }
.mosaico img, .mosaico video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaico .es-video::after { content: ''; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border: 0.7rem solid transparent; border-left: 1.1rem solid #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }

/* Flores */
.ramo { left: 50%; bottom: clamp(5.4rem, 13vh, 7rem); width: min(31rem, calc(100vw - 2rem)); max-height: calc(100dvh - 8rem); overflow-y: auto; padding: 1.3rem 1.4rem 1.4rem; border-radius: 14px; translate: -50% 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s, transform 0.45s var(--suave), visibility 0s 0.3s; }
.ramo.abierta { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.45s var(--suave); }
.ramo h2 { font: 500 1.3rem/1.2 var(--serif); padding-right: 2.5rem; }
.flores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 1rem; }
.flores button { display: grid; justify-items: center; align-content: end; gap: 0.3rem; padding: 0.6rem 0.2rem 0.55rem; line-height: 1.2; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); font-size: 0.8rem; font-weight: 500; transition: border-color 0.2s, transform 0.3s var(--suave); }
.flores button:hover { border-color: var(--ambar-claro); transform: translateY(-3px); }
.flores canvas { height: 3.4rem; width: auto; max-width: 100%; }
.adjunto.grande { margin-top: 1.6rem; }
.adjunto.grande img, .adjunto.grande video { max-height: 26rem; }

/* Formulario */
dialog.escribir { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--borde); border-radius: 16px; background: var(--hondo); color: var(--hueso); box-shadow: 0 40px 90px -30px rgba(70, 60, 50, 0.45); }
dialog.escribir::backdrop { background: rgba(60, 54, 48, 0.36); }
dialog.escribir form { padding: 1.8rem clamp(1.2rem, 4vw, 2rem) 1.6rem; }
dialog.escribir h2 { font: 500 1.75rem/1.12 var(--serif); letter-spacing: -0.015em; padding-right: 2.4rem; text-wrap: balance; }
dialog.escribir .guia { margin-top: 0.5rem; color: var(--bruma); font-size: 0.95rem; }
.campo { display: block; margin-top: 1.15rem; }
.campo > span, fieldset legend { display: block; margin-bottom: 0.4rem; font-size: 0.88rem; font-weight: 600; }
.campo small { font-weight: 400; color: var(--bruma); }
.campo input[type='text'], .campo textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--noche); caret-color: var(--ambar); transition: border-color 0.2s; }
.campo textarea { min-height: 8.5rem; resize: vertical; font: 500 1.08rem/1.5 var(--serif); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ambar-claro); }
.campo ::placeholder { color: #746e67; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
fieldset { margin: 1.15rem 0 0; padding: 0; border: 0; }
.tipos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tipos label { position: relative; }
.tipos input { position: absolute; opacity: 0; inset: 0; }
.tipos span { display: block; padding: 0.5rem 1rem; border: 1px solid var(--borde); border-radius: 999px; font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.tipos input:checked + span { background: var(--hueso); border-color: var(--hueso); color: var(--papel); }
.tipos input:focus-visible + span { outline: 2px solid var(--ambar-claro); outline-offset: 3px; }
.archivo { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.archivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.archivo .elegido { font-size: 0.88rem; color: var(--bruma); overflow-wrap: anywhere; }
.error { margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: #fbe5dc; color: #8a2a12; font-size: 0.92rem; }
.enviar { display: flex; justify-content: flex-end; gap: 0.7rem; margin-top: 1.5rem; }

.nota { position: fixed; left: 50%; top: 1.2rem; translate: -50% 0; max-width: calc(100vw - 2rem); padding: 0.7rem 1.2rem; border-radius: 14px; text-align: center; background: var(--hueso); color: var(--papel); font-weight: 600; font-size: 0.93rem; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 0.3s, transform 0.5s var(--suave); }
.nota.visible { opacity: 1; transform: none; }
.cuidador { position: fixed; left: 50%; top: 4.4rem; translate: -50% 0; padding: 0.3rem 0.9rem; border-radius: 999px; border: 1px solid var(--ambar-claro); background: var(--hondo); color: var(--ambar-claro); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

.perdido { position: fixed; inset: 0; display: grid; place-content: center; justify-items: start; gap: 1rem; padding: 2rem; max-width: 34rem; margin: auto; }
.perdido h1 { font: 500 clamp(2rem, 6vw, 3.2rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.perdido p { color: var(--bruma); }

@media (max-width: 860px) {
  .velo { background: linear-gradient(rgba(250, 247, 242, 0.9), rgba(250, 247, 242, 0) 36%, rgba(250, 247, 242, 0) 66%, rgba(250, 247, 242, 0.85)); }
  .semblanza { left: 1rem; right: 1rem; top: 4rem; bottom: auto; width: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: center; }
  .retrato { width: 4.2rem; grid-row: span 2; border-radius: 8px; }
  .retrato .iniciales { font-size: 1.5rem; }
  .semblanza h1 { margin-top: 0; font-size: clamp(1.5rem, 6.4vw, 2rem); align-self: end; }
  .semblanza .anios { margin-top: 0.15rem; font-size: 0.9rem; align-self: start; }
  .semblanza .ejemplo { grid-column: 1 / -1; justify-self: start; }
  .semblanza .familia { grid-column: 1 / -1; font-size: 0.88rem; }
  .semblanza .familia { margin-top: 0.9rem; font-size: 0.95rem; color: var(--bruma); white-space: pre-line; text-wrap: pretty; }
.semblanza blockquote { grid-column: 1 / -1; margin-top: 0.9rem; font-size: 1.02rem; }
  .semblanza cite { font-size: 0.78rem; }
  .acciones { gap: 0.5rem; }
  .acciones .boton { flex: 1 1 calc(50% - 0.5rem); padding: 0 0.6rem; font-size: 0.9rem; }
  .tarjeta { left: 0.75rem; right: 0.75rem; top: auto; bottom: 0.75rem; width: auto; translate: none; max-height: 62vh; }
  .ramo { bottom: 0.75rem; }
  .portada { bottom: 5.4rem; right: 1rem; }
  .andar { left: 1rem; right: 1rem; }
  .andar .boton { flex: 1; }
  .portada .pista { display: none; }
  .dos { grid-template-columns: 1fr; }
  .sello-mini span { display: none; }
  .nota { top: auto; bottom: 9.4rem; width: max-content; }
  .cuidador { top: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  @view-transition { navigation: none; }
}

/* ---------- Panel de registro: una página de trabajo, sin jardín detrás ---------- */
body.registro { overflow: auto; }
.registro .perdido { position: static; min-height: 100dvh; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; }
.barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; padding: 0.7rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--borde); background: var(--hondo); }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.marca { font: 500 1.2rem/1.2 var(--serif); text-decoration: none; }
.marca span { margin-left: 0.5rem; font: 600 0.78rem var(--sans); color: var(--bruma); }
.quien { font-size: 0.88rem; color: var(--bruma); }
.hoja-registro { max-width: 60rem; margin: 0 auto; padding: 2.2rem clamp(1rem, 4vw, 2.5rem) 5rem; }
.hoja-registro h1 { font: 500 clamp(1.8rem, 4vw, 2.5rem)/1.08 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.hoja-registro h2 { font: 500 1.4rem/1.15 var(--serif); letter-spacing: -0.01em; }
.cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 1.5rem; }
.guia { margin-top: 0.4rem; max-width: 46rem; font-size: 0.9rem; color: var(--bruma); }
.volver { padding-left: 0; margin-bottom: 0.4rem; }

.personas, .correos, .album, .recuerdos-panel { list-style: none; margin: 0; padding: 0; }
.personas { margin-top: 1.4rem; border-top: 1px solid var(--borde); }
.personas li { border-bottom: 1px solid var(--borde); }
.persona { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 0.8rem 0.4rem; text-decoration: none; transition: background 0.2s; }
.persona:hover { background: var(--panel); }
.persona .datos b { display: block; font: 500 1.15rem/1.2 var(--serif); }
.persona .datos span { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: var(--bruma); font-variant-numeric: tabular-nums; }
.retrato.mini { width: 3rem; border-radius: 6px; box-shadow: none; }
.retrato.mini .iniciales { font-size: 1.05rem; }
.estado { padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid var(--borde); font-size: 0.78rem; font-weight: 600; white-space: nowrap; color: var(--bruma); }
.estado.visible { border-color: #b9cdb6; background: #edf4ea; color: #2f5a2c; }
.estado.cerrado { background: var(--panel); }

.equipo, .bloque { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--borde); }
.correos { margin-top: 1rem; }
.correos li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--borde); }
.correos li > span:first-child { flex: 1 1 14rem; overflow-wrap: anywhere; }
.agregar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem; margin-top: 0.4rem; }
.agregar .campo { flex: 1 1 18rem; }

.ficha { margin-top: 1.4rem; }
.con-retrato { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; align-items: start; }
.retrato-panel { display: grid; gap: 0.8rem; justify-items: start; }
.retrato-panel .retrato { width: 100%; }
.campo input[type='email'], .campo input[readonly] { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--noche); }
.campo input[readonly] { background: var(--panel); font-size: 0.88rem; }
.campo input[type='email']:focus { outline: none; border-color: var(--ambar-claro); }
.campo textarea.corto { min-height: 4.6rem; font: inherit; }
.casilla { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1.2rem; font-size: 0.94rem; cursor: pointer; }
.casilla input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--ambar); }
.copiar .fila { display: flex; gap: 0.6rem; }
.copiar .fila input { flex: 1; min-width: 0; }

.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.album li { display: grid; gap: 0.3rem; justify-items: start; }
.album img, .album video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #ede8df; }
.album .retirar, .correos .retirar { margin-top: 0; }
.recuerdos-panel li { padding: 1.2rem 0; border-bottom: 1px solid var(--borde); }
.recuerdos-panel .texto { font: 500 1.05rem/1.5 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 46rem; }
.recuerdos-panel .retirado .texto { color: var(--bruma); text-decoration: line-through; }
.recuerdos-panel .firma-recuerdo { margin-top: 0.6rem; }

@media (max-width: 720px) {
  .con-retrato { grid-template-columns: 1fr; }
  .retrato-panel .retrato { width: 9rem; }
  .persona { grid-template-columns: auto 1fr; }
  .persona .estado { grid-column: 2; justify-self: start; }
}

/* ---------- Buscador por nombre ---------- */
.buscar { position: fixed; top: 0.9rem; right: clamp(1rem, 3vw, 2.2rem); width: min(21rem, calc(100vw - 2rem)); }
.buscar svg { position: absolute; left: 0.95rem; top: 0.85rem; width: 1.15rem; height: 1.15rem; color: var(--bruma); pointer-events: none; }
.buscar input, .filtro input { width: 100%; min-height: 46px; padding: 0 1rem 0 2.7rem; border: 1px solid #cfc7ba; border-radius: 999px; background: rgba(255, 253, 249, 0.92); caret-color: var(--ambar); transition: border-color 0.2s; }
.buscar input:focus, .filtro input:focus { outline: none; border-color: var(--ambar-claro); }
.buscar input::placeholder, .filtro input::placeholder { color: #746e67; }
.resultados { list-style: none; margin: 0.5rem 0 0; padding: 0.4rem; max-height: min(60vh, 26rem); overflow-y: auto; border: 1px solid var(--borde); border-radius: 14px; background: var(--hondo); box-shadow: 0 24px 50px -24px rgba(70, 60, 50, 0.4); }
.resultados a { display: block; padding: 0.6rem 0.8rem; border-radius: 9px; text-decoration: none; }
.resultados a:hover, .resultados a:focus-visible { background: var(--panel); outline: none; }
.resultados b { display: block; font: 500 1.08rem/1.2 var(--serif); }
.resultados span { display: block; margin-top: 0.1rem; font-size: 0.82rem; color: var(--bruma); }
.resultados .nadie { padding: 0.7rem 0.8rem; font-size: 0.9rem; color: var(--bruma); }
.sin-3d .placa.fuera { display: none; }
.filtro { display: block; margin-top: 1.2rem; max-width: 24rem; }
.filtro input { padding-left: 1.1rem; }
@media (max-width: 860px) {
  .buscar { top: 3rem; left: 1rem; right: 1rem; width: auto; }
}
/* Mientras se camina hacia un árbol, el buscador y los botones se apartan. */
.caminando .buscar, .caminando .andar { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.campo .ayuda { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--bruma); }
#reenviar { margin-top: 0.9rem; }

/* ---------- Piezas a pedido ---------- */
.a-medida { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.a-medida p { flex: 1 1 14rem; font-size: 0.9rem; color: var(--bruma); }
.a-medida b { color: var(--hueso); }
.piezas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; margin-top: 1.1rem; }
.pieza { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); transition: border-color 0.2s, background 0.2s; }
.pieza.elegida { border-color: var(--ambar-claro); background: #fdf3e3; }
.pieza canvas { max-height: 2.4rem; width: auto; max-width: 2.4rem; justify-self: center; }
.nombre-pieza { font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.cuantos { display: flex; align-items: center; gap: 0.3rem; }
.cuantos button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid #cfc7ba; background: var(--noche); font-size: 1.15rem; line-height: 1; }
.cuantos button:hover { border-color: var(--ambar-claro); }
.cuantos output { min-width: 1.3rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.ver-tele { margin-top: 1.2rem; }
@media (max-width: 600px) { .piezas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- La tele: videos a pantalla completa, uno por vez ---------- */
dialog.tele { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141210; color: #fff; }
dialog.tele::backdrop { background: #141210; }
dialog.tele .cerrar { position: fixed; top: 0.9rem; right: 0.9rem; z-index: 2; color: #fff; background: rgba(20, 18, 16, 0.55); border-radius: 50%; }
.rollo { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.clip { position: relative; height: 100dvh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #141210; cursor: pointer; }
.pie-clip { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 4.5rem 1.6rem 1.2rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); pointer-events: none; }
.pie-clip b { font: 600 1rem var(--sans); }
.pie-clip p { margin-top: 0.3rem; max-width: 34rem; font: 500 1rem/1.4 var(--serif); }
.clip .cuenta { position: absolute; right: 1.1rem; bottom: 1.6rem; font-size: 0.85rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.clip .desliza { position: absolute; top: 1.2rem; left: 50%; translate: -50% 0; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(20, 18, 16, 0.55); font-size: 0.85rem; }

/* ---------- Panel: personalización ---------- */
.campo select { width: 100%; min-height: 48px; padding: 0 0.9rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--noche); font: inherit; color: inherit; }
.bloque .sub { margin-top: 2rem; font: 600 1rem var(--sans); }
.vacio.corto { padding: 0.8rem 0; }
.recuerdos-panel .texto { white-space: pre-wrap; }