/* ═══════════════════════════════════════════════════════════════════════════
   MEMORIAL DE FLOR — hoja de estilos
   Papel cálido de día, luz de vela de noche. Una sola familia serif.
   Sin dependencias. Pensada para un teléfono, de noche, con una mano.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Fuentes (autoalojadas; si faltan, Georgia responde) ----------
   Newsreader variable (Google Fonts, OFL).

   Antes aquí estaba Fraunces y hubo que sacarla: su "f" lleva un gancho tan
   largo que se monta encima de la letra siguiente y parece un error de
   imprenta — "for", "Fotografías", "oficina". No era configuración nuestra:
   probamos WONK 0, opsz fijo, sin ligaduras y con los cortes estáticos, y la
   efe salía igual en todos. Es el dibujo de la letra. Newsreader mantiene el
   aire editorial y cálido, tiene cursiva de verdad y su efe se comporta.

   Cuatro archivos: redonda y cursiva, cada una en latin y latin-ext (los
   acentos y la ñ del español viven repartidos entre los dos). */
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fuentes/newsreader-roman-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fuentes/newsreader-roman-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url("../fuentes/newsreader-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url("../fuentes/newsreader-italic-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --papel:#FAF5EC;
  --papel-2:#F3ECDD;
  /* blanco de papel, para alternar con el tostado en el menú */
  --papel-blanco:#FFFDF8;
  --tinta:#2E241B;
  --tinta-suave:#7A6B59;
  --linea:rgba(46,36,27,.16);
  --linea-fuerte:rgba(46,36,27,.34);
  --acento:#A64D63;
  --acento-texto:#FFF8EE;
  --acento-hover:#8F3F54;
  --foco:rgba(166,77,99,.4);
  --sombra:0 1px 2px rgba(46,36,27,.08),0 6px 24px rgba(46,36,27,.07);

  /* jardín */
  --verde-tallo:#5E7D5A;
  --verde-hoja:#6F8F66;
  --flor-contorno:rgba(46,36,27,.28);
  --suelo:rgba(94,125,90,.55);
  --pasto:rgba(94,125,90,.4);
  --f-rosa-p:#CE7D93;      --f-rosa-c:#DFAF4E;
  --f-rosita-p:#E4A9B8;    --f-rosita-c:#C97E93;
  --f-clavel-p:#B65A6B;    --f-clavel-c:#D98CA0;
  --f-lila-p:#A97CB8;      --f-lila-c:#E8D5A8;
  --f-crema-p:#F0E3C6;     --f-crema-c:#DFAF4E;
  --f-ambar-p:#E0A458;     --f-ambar-c:#8A5B2B;
  --f-cattleya-p:#A97CB8;  --f-cattleya-c:#DFAF4E; --f-cattleya-i:#8E6AA8;

  --serif:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;
  --texto:Georgia,"Iowan Old Style",Palatino,"Times New Roman",serif;
}

/* Un solo color, en todas partes.
   Antes el sitio seguía el modo oscuro del teléfono y a la mitad de la
   familia le salía casi negro: otro sitio distinto al que se ve en el
   computador, y las flores del jardín con otros tonos. Esta página es de
   papel — así se pensó y así se queda, de día, de noche, en el teléfono y
   en el computador. Si algún día se quiere una versión oscura, va aquí,
   pero decidida a mano y no por lo que tenga puesto el celular.            */
:root{ color-scheme: light }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
/* La cabecera va pegada arriba, así que al saltar a "#despedida" la sección
   quedaba justo debajo de ella: el título entraba tapado y parecía que el
   enlace apuntaba mal. Se le reserva el alto de la cabecera más un respiro.
   El alto lo mide el propio JS al cargar y al girar el teléfono (la cabecera
   no mide igual en el teléfono que en el computador); el valor de aquí es
   solo el de reserva por si el JS no llegó a correr.                        */
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--alto-cabecera, 56px) + 16px);
}
body{
  background:var(--papel);
  color:var(--tinta);
  font-optical-sizing:auto;   /* Newsreader sí usa bien el eje óptico */
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.sin-scroll{ overflow:hidden }
img{ max-width:100% }
a{ color:inherit; text-decoration-color:var(--linea-fuerte); text-underline-offset:3px }
a:hover{ text-decoration-color:var(--acento) }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:3px solid var(--foco); outline-offset:2px; border-radius:4px }
[hidden]{ display:none !important }
::selection{ background:var(--acento); color:var(--acento-texto) }

/* idioma: solo se muestra la lengua activa */
[data-lang="es"] [lang="en"]{ display:none }
[data-lang="en"] [lang="es"]{ display:none }

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:calc(11px + env(safe-area-inset-top)) clamp(14px,4vw,32px) 11px;
  /* blanco de papel, no el tostado del cuerpo: así la cabecera se lee como
     una barra aparte y no como parte de la página. Igual el pie. */
  background:color-mix(in srgb, var(--papel-blanco) 94%, transparent);
  backdrop-filter:saturate(150%) blur(9px);
  border-bottom:1px solid var(--linea);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.cabecera.pegada{
  border-bottom-color:var(--linea);
  box-shadow:0 2px 14px rgba(46,36,27,.06);
}
/* menú: ir directo a lo que la gente busca */
.menu{
  display:flex; align-items:center; gap:clamp(14px,3.2vw,30px);
  order:3; width:100%; justify-content:center;
  padding-top:10px; margin-top:4px;
}
/* Botones, no texto suelto. Antes eran mayúsculas grises sin fondo y se
   confundían con el resto de la página: nadie sabía que se podía hacer clic.
   Ahora son pastillas, como el botón de idioma que ya estaba al lado. */
.menu a{
  font-family:var(--texto);
  text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(.64rem,2.4vw,.73rem);
  color:var(--tinta); text-decoration:none;
  padding:10px 17px; min-height:42px;
  display:inline-flex; align-items:center;
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:999px;
  white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
/* Las pastillas alternan blanco y tostado. Las tres iguales se leían como un
   bloque; alternando, cada una se distingue de la de al lado y el menú tiene
   ritmo en vez de ser una barra maciza. El botón de idioma sigue la cuenta
   como si fuera la cuarta.                                                  */
.menu a:nth-child(odd){ background:var(--papel-blanco) }
.menu a:nth-child(even){ background:var(--papel-2) }
.menu a:hover,.menu a:focus-visible{
  background:var(--acento); border-color:var(--acento); color:var(--acento-texto);
}
/* la página en la que ya estás no se disfraza de enlace */
.menu a[aria-current="page"]{
  background:transparent; border-color:var(--linea-fuerte); color:var(--tinta-suave);
}
/* en teléfono las tres pastillas tienen que caber en una línea sin tocar
   los bordes de la pantalla */
/* En el teléfono la cabecera medía 134 px —una quinta parte de la pantalla,
   y pegada arriba, así que se los quedaba siempre. Casi todo era el nombre y
   las fechas… que están repetidos en letra grande tres centímetros más abajo.
   Fuera esa línea: queda la flor como enlace al inicio, y con lo que sobra
   las pastillas crecen de 10 px a 11,4 px, que era la letra más pequeña de
   todo el sitio y la lee gente mayor. */
@media (max-width:560px){
  /* TODO en una sola línea: flor · Fotos · Recuerdos · Despedida · idioma.
     Antes el menú se llevaba su propia fila (width:100%) y la cabecera medía
     134 px pegada arriba — una quinta parte del teléfono, para siempre. El
     nombre y las fechas se quitan porque están repetidos en grande justo
     debajo, y con ese sitio el menú cabe al lado de la flor. */
  .cabecera{
    gap:6px; flex-wrap:nowrap;
    padding:calc(6px + env(safe-area-inset-top)) 12px 6px;
  }
  .marca span{ display:none }
  .marca{ gap:0; flex:none }
  .marca-flor{ width:24px; height:24px }
  .menu{
    order:0; width:auto; flex:1 1 auto; min-width:0;
    padding-top:0; margin-top:0; gap:5px;
    justify-content:flex-end; flex-wrap:nowrap;
  }
  .menu a{ padding:8px 10px; letter-spacing:.03em; font-size:.68rem; min-height:38px }
  #botonIdioma{ flex:none; padding:8px 10px; min-height:38px; font-size:.72rem; letter-spacing:.03em }
}
@media (max-width:370px){
  .cabecera{ padding-left:9px; padding-right:9px; gap:4px }
  .menu{ gap:4px }
  .menu a{ padding:8px 7px; font-size:.63rem; letter-spacing:.02em }
  #botonIdioma{ padding:8px 8px; font-size:.68rem }
}
@media (min-width:820px){
  .menu{
    order:0; width:auto; padding-top:0; margin-top:0;
    border-top:0; justify-content:flex-end; margin-left:auto; margin-right:6px;
  }
}
.marca{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--serif); font-size:.92rem; letter-spacing:.06em;
  text-decoration:none; color:var(--tinta-suave);
}
.marca-flor{ width:19px; height:19px }
.mf-petalos{ fill:var(--f-rosa-p) }
.mf-centro{ fill:var(--f-rosa-c) }
.idioma{
  font-size:.88rem; color:var(--tinta-suave);
  padding:9px 16px; border:1px solid var(--linea); border-radius:999px;
  min-height:40px;
  /* cierra la alternancia del menú: tres pastillas blanco-tostado-blanco y
     esta, tostada, hace la cuarta */
  background:var(--papel-2);
}
.idioma:hover{ color:var(--tinta); border-color:var(--linea-fuerte) }

/* ---------- Portada ---------- */
.portada{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(30px,5vh,72px) 12px 30px;
}
/* El bloque del nombre: compacto, para que la foto se quede con la pantalla. */
.titular{ margin-bottom:clamp(16px,3vh,28px) }

/* La foto es el sitio. En teléfono ocupa casi todo el ancho; en pantalla
   grande se mide contra el alto de la ventana para no salirse por abajo. */
.retrato{ margin:0 0 clamp(16px,2.6vh,26px); width:100%; display:flex; justify-content:center }
.retrato img{
  /* el archivo es horizontal (1500x1125); el marco vertical recorta a los
     lados y la deja a ella, que es de lo que se trata */
  width:min(100%, 470px);
  aspect-ratio:4/5; object-fit:cover; object-position:50% 42%;
  max-height:62svh;
  border-radius:14px; box-shadow:var(--sombra);
  border:6px solid var(--papel-2); outline:1px solid var(--linea);
}
@media (min-width: 820px){
  .retrato img{
    width:auto; height:clamp(360px, 54svh, 620px);
    max-height:none; border-width:8px; border-radius:16px;
  }
}
/* Su nombre completo ES el titular. Antes había un "Flor" en cursiva enorme
   encima de la foto y la palabra pesaba más que ella; el apodo sigue vivo
   abajo, en la línea que va rotando los nombres con que la llamaban. */
.nombre-completo{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.45rem,5.4vw,2.5rem);
  line-height:1.16;
  letter-spacing:-.005em;
  color:var(--tinta);
  text-wrap:balance;
  max-width:16ch; margin-inline:auto;
}
.vda{ font-size:.72em; color:var(--tinta-suave); font-style:italic; letter-spacing:0 }
/* Su nombre, en grande. Iba en peso 600 y con las letras apretadas: a 8rem
   un serif italic sube tanto el contraste entre trazo grueso y fino que las
   puntas quedan como cuchillas, y el tracking negativo las amontona. A este
   tamaño se necesita MENOS peso, no más. En 420 la misma letra respira. */
.fechas{
  margin-top:9px;
  font-size:clamp(.95rem,3.4vw,1.05rem);
  letter-spacing:.05em;
  color:var(--tinta-suave);
}
.lema{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,3.8vw,1.26rem);
  margin-top:0;
}
/* los nombres con que la llamaban, uno tras otro */
.apodos{
  display:inline-grid; vertical-align:baseline; text-align:left;
  min-width:7.5em;
}
.apodo{
  grid-area:1 / 1;
  color:var(--acento);
  opacity:0; transform:translateY(6px);
  transition:opacity .6s ease, transform .6s ease;
  white-space:nowrap;
}
.apodo.activo{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .apodos{ display:inline; min-width:0 }
  .apodo{ opacity:1; transform:none; transition:none; white-space:normal }
}

/* ---------- Jardín ---------- */
.jardin-envoltura{
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:clamp(200px,30vh,280px);
  margin-top:clamp(22px,5vh,46px);
}
#jardin{ display:block; width:100%; height:100% }

#jardin .tallo, #jardinPie2 .tallo{
  fill:none; stroke:var(--verde-tallo); stroke-width:2.6; stroke-linecap:round;
}
#jardin .hoja, #jardinPie2 .hoja, .enredaderas .hoja{ fill:var(--verde-hoja); stroke:var(--flor-contorno); stroke-width:.6 }
#jardin .petalo, #jardinPie2 .petalo, .enredaderas .petalo{ fill:var(--fp,#CE7D93); stroke:var(--flor-contorno); stroke-width:.7 }
#jardin .petalo-i, #jardinPie2 .petalo-i, .enredaderas .petalo-i{ fill:var(--fi,var(--fp,#CE7D93)); stroke:var(--flor-contorno); stroke-width:.7 }
#jardin .centro, #jardinPie2 .centro, .enredaderas .centro{ fill:var(--fc,#DFAF4E); stroke:var(--flor-contorno); stroke-width:.7 }
#jardin .suelo, #jardinPie2 .suelo{ fill:none; stroke:var(--suelo); stroke-width:2; stroke-linecap:round }
#jardin .pasto, #jardinPie2 .pasto, .enredaderas .pasto{ fill:none; stroke:var(--pasto); stroke-width:1.6; stroke-linecap:round }

#jardin .f-rosa, #jardinPie2 .f-rosa, .enredaderas .f-rosa{ --fp:var(--f-rosa-p); --fc:var(--f-rosa-c) }
#jardin .f-rosita, #jardinPie2 .f-rosita, .enredaderas .f-rosita{ --fp:var(--f-rosita-p); --fc:var(--f-rosita-c) }
#jardin .f-clavel, #jardinPie2 .f-clavel, .enredaderas .f-clavel{ --fp:var(--f-clavel-p); --fc:var(--f-clavel-c) }
#jardin .f-lila, #jardinPie2 .f-lila, .enredaderas .f-lila{ --fp:var(--f-lila-p); --fc:var(--f-lila-c) }
#jardin .f-crema, #jardinPie2 .f-crema, .enredaderas .f-crema{ --fp:var(--f-crema-p); --fc:var(--f-crema-c) }
#jardin .f-ambar, #jardinPie2 .f-ambar, .enredaderas .f-ambar{ --fp:var(--f-ambar-p); --fc:var(--f-ambar-c) }
#jardin .f-cattleya, #jardinPie2 .f-cattleya, .enredaderas .f-cattleya{ --fp:var(--f-cattleya-p); --fc:var(--f-cattleya-c); --fi:var(--f-cattleya-i) }

/* ---------- Enredaderas: el jardín trepa por los bordes de la portada ---------- */
.portada{ position:relative }
.portada > *{ position:relative; z-index:1 }
.enredaderas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.enredaderas svg{ width:100%; height:100%; display:block }
.enredadera{
  transform-box:fill-box; transform-origin:50% 100%;
}
.enredadera.viva{
  animation:mecerEnredadera 11s ease-in-out var(--ev-delay,0s) infinite alternate;
}
@keyframes mecerEnredadera{
  from{ transform:rotate(-.6deg) } to{ transform:rotate(.6deg) }
}
.enredadera-tallo{
  fill:none; stroke:var(--verde-tallo); stroke-width:2.3;
  stroke-linecap:round; opacity:.9;
}
.enredadera-tallo.dibuja{
  animation:dibujarEnredadera var(--ev-dur,28s) ease-out var(--ev-delay,0s) forwards;
}
@keyframes dibujarEnredadera{ to{ stroke-dashoffset:0 } }
.enredaderas .nudo{
  transform-box:fill-box; transform-origin:center;
  transform:scale(0);
}
.enredaderas .nudo.abre{
  animation:abrirNudo 1.6s cubic-bezier(.34,1.5,.64,1) var(--nd-delay,0s) forwards;
}
@keyframes abrirNudo{ to{ transform:scale(1) } }

/* brisa: capa que inclina la flor siguiendo el cursor/dedo */
#jardin .brisa, #jardinPie2 .brisa{
  transform-box:fill-box; transform-origin:50% 100%;
  transform:rotate(var(--brisa,0deg));
  transition:transform .38s ease-out;
}

/* crecimiento: el tallo se dibuja, la corola se abre, las hojas aparecen */
#jardin .flor, #jardinPie2 .flor{ opacity:0 }
#jardin .flor.crece, #jardinPie2 .flor.crece, #jardin .flor.crecida, #jardinPie2 .flor.crecida{ opacity:var(--op,1) }
#jardin .flor.crece .tallo, #jardinPie2 .flor.crece .tallo{
  animation:crecerTallo .95s ease-out var(--retraso,0ms) forwards;
}
@keyframes crecerTallo{ to{ stroke-dashoffset:0 } }
#jardin .flor.crece .corola, #jardinPie2 .flor.crece .corola{
  transform-box:fill-box; transform-origin:center;
  transform:scale(0);
  animation:abrirCorola .75s cubic-bezier(.34,1.5,.64,1) calc(var(--retraso,0ms) + .6s) forwards;
}
@keyframes abrirCorola{ to{ transform:scale(1) } }
#jardin .flor.crece .hoja-g, #jardinPie2 .flor.crece .hoja-g{
  opacity:0;
  animation:aparecerHoja .5s ease calc(var(--retraso,0ms) + .45s) forwards;
}
@keyframes aparecerHoja{ to{ opacity:1 } }
#jardin .flor.crecida .tallo, #jardinPie2 .flor.crecida .tallo{ stroke-dasharray:none !important; stroke-dashoffset:0 !important }
#jardin .flor.crecida .corola, #jardinPie2 .flor.crecida .corola{ transform:scale(1) }
#jardin .flor.crecida .hoja-g, #jardinPie2 .flor.crecida .hoja-g{ opacity:1 }

/* pétalos a la deriva sobre el prado */
.petalo-deriva{
  position:absolute; top:var(--pd-alto,30%); left:-30px;
  width:15px; height:11px; pointer-events:none; opacity:0;
  animation:derivar var(--pd-dur,22s) linear var(--pd-delay,0s) infinite;
}
.petalo-deriva svg{ width:100%; height:100%; display:block;
  animation:girarPetalo 5.5s ease-in-out infinite alternate; }
.petalo-deriva svg path{ fill:var(--tono,#CE7D93); opacity:.55;
  stroke:var(--flor-contorno); stroke-width:.5 }
@keyframes derivar{
  0%{ transform:translate(0,0); opacity:0 }
  6%{ opacity:1 }
  50%{ transform:translate(55vw,26px) }
  94%{ opacity:.8 }
  100%{ transform:translate(105vw,-14px); opacity:0 }
}
@keyframes girarPetalo{
  from{ transform:rotate(-24deg) translateY(0) }
  to{ transform:rotate(200deg) translateY(9px) }
}

/* pétalos por toda la página — la misma deriva del prado, pero en una capa fija
   que acompaña el scroll. Van más lentos, más pequeños y mucho más tenues que
   los de la portada: la idea es que se sientan, no que se miren. Quedan por
   debajo de la cabecera (z-30) y de cualquier modal (z-45+). */
.petalos-ambiente{
  position:fixed; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}
.petalos-ambiente .petalo-deriva{ width:12px; height:9px }
.petalos-ambiente .petalo-deriva svg path{ opacity:.3 }
@media (max-width:640px){
  .petalos-ambiente .petalo-deriva:nth-child(n+5){ display:none }
}

/* vaivén — solo algunas flores lo llevan (rendimiento) */
#jardin .mece, #jardin .mece.anima, #jardinPie2 .mece.anima{
  animation:mecerse var(--dur,5.4s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes mecerse{
  from{ transform:rotate(calc(var(--amp,1.3deg) * -1)) }
  to{ transform:rotate(var(--amp,1.3deg)) }
}
/* al tocar una flor: una pequeña reverencia (ella era payasa) */
#jardin .mece.boing, #jardinPie2 .mece.boing{ animation:boing .9s cubic-bezier(.34,1.56,.64,1) 1 }
@keyframes boing{
  0%{ transform:rotate(0) } 30%{ transform:rotate(4.5deg) }
  62%{ transform:rotate(-3deg) } 100%{ transform:rotate(0) }
}

/* florecer inicial de la suya */
#jardin .flor-suya .tallo.preparado, #jardinPie2 .flor-suya .tallo.preparado{ transition:stroke-dashoffset 1.05s ease-out .15s }
#jardin .flor-suya .corola, #jardinPie2 .flor-suya .corola{
  transform-box:fill-box; transform-origin:center; transform:scale(0);
}
#jardin .flor-suya.abierta .corola, #jardinPie2 .flor-suya.abierta .corola{
  transform:scale(1);
  transition:transform .85s cubic-bezier(.34,1.5,.64,1);
}
#jardin .flor-suya .hoja, #jardinPie2 .flor-suya .hoja{ opacity:0 }
#jardin .flor-suya.abierta .hoja, #jardinPie2 .flor-suya.abierta .hoja{ opacity:1; transition:opacity .5s ease .35s }

/* brote de las demás en la primera pintada */
#jardin .flor.brota, #jardinPie2 .flor.brota{ animation:brotar .55s ease-out both }
@keyframes brotar{
  from{ opacity:0; transform:translate(var(--tx),calc(var(--ty) + 6px)) scale(var(--esc)) }
  to{ opacity:1; transform:translate(var(--tx),var(--ty)) scale(var(--esc)) }
}

/* La nota va PEGADA al pasto. Con el margen de antes quedaba flotando lejos
   del jardín, como un pie de foto huérfano, y a 36ch se partía en cuatro
   renglones cortos y desiguales. Más ancha arma dos o tres líneas llenas y
   se lee como si saliera de la tierra. */
.jardin-nota{
  max-width:50ch;
  margin:clamp(2px,.8vh,10px) auto 0;
  font-size:1rem;
  color:var(--tinta-suave);
  text-wrap:balance;
}

/* ---------- Botones ---------- */
.cta-fila{
  display:flex; flex-wrap:wrap; gap:13px; justify-content:center;
  margin-top:24px;
}
/* En teléfono los dos botones van lado a lado. Antes "Enviar fotos" ocupaba
   toda la línea y "Dejar un mensaje" caía debajo, medio escondido: parecían
   un botón principal y una nota al pie, cuando son las dos cosas que la
   gente vino a hacer. Aquí valen lo mismo y se ven de una. */
@media (max-width: 560px){
  .portada .cta-fila{
    flex-wrap:nowrap; gap:9px; width:100%; max-width:440px; margin-inline:auto;
  }
  .portada .cta-fila > *{
    flex:1 1 0; min-width:0;
    padding:14px 10px; font-size:.96rem; gap:7px; min-height:56px;
    text-align:center; line-height:1.25;
  }
  .portada .cta-fila .boton-flor{ width:19px; height:19px; flex:none }
}
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--acento); color:var(--acento-texto);
  font-family:var(--serif); font-weight:600; font-size:1.07rem;
  padding:16px 28px; border-radius:999px;
  text-decoration:none;
  min-height:54px;
  box-shadow:var(--sombra);
  transition:background .2s ease, transform .15s ease;
}
.boton:hover{ background:var(--acento-hover) }
.boton:active{ transform:translateY(1px) }
.boton-flor{ width:21px; height:21px; flex:none }
.boton.secundario{
  background:transparent; color:var(--tinta);
  border:1.5px solid var(--linea-fuerte); box-shadow:none;
}
.boton.secundario:hover{ background:var(--papel-2) }
.cta-pista{
  margin-top:13px; font-size:.86rem; color:var(--tinta-suave);
  text-wrap:balance;
}

/* ---------- Secciones ---------- */
.seccion{
  max-width:640px;
  margin:0 auto;
  padding:clamp(58px,10vh,104px) 22px 0;
  text-align:center;
}
.seccion:last-of-type{ padding-bottom:clamp(58px,10vh,104px) }
.divisor{
  width:104px; height:14px; display:block; margin:0 auto 22px;
  stroke:var(--acento); opacity:.55; fill:none; stroke-width:1.6;
  stroke-linecap:round;
}
.divisor circle{ fill:var(--acento); stroke:none }
h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.75rem,6vw,2.3rem);
  letter-spacing:-.01em;
  margin-bottom:18px;
}
.seccion-intro{
  color:var(--tinta-suave);
  max-width:46ch; margin:0 auto 26px;
  text-wrap:pretty;
}

/* ---------- Quién era ----------
   Las palabras de Camila se mudaron al cuadro de tributos, junto a las de
   Natasha y Clayton (ver .tf-marco más abajo). Aquí queda la semblanza corta,
   que también sirve de cierre en "Este lugar se queda". */
.semblanza{
  max-width:52ch; margin:0 auto;
  font-size:1.1rem; line-height:1.78;
  text-wrap:pretty;
}
/* la entrada va centrada, como un epígrafe; el cuerpo se alinea a la
   izquierda, que es donde cuatro párrafos seguidos se leen sin cansar */
.semblanza p{ margin-bottom:1.05em; text-align:left }
.semblanza p:last-child{ margin-bottom:0 }
.semblanza p:first-child{
  font-family:var(--serif); font-size:1.28rem; line-height:1.5;
  color:var(--tinta); text-align:center;
  margin-bottom:1.2em;
}
.permanece .cta-fila{ margin-top:28px }
.permanece .forma-estado{ min-height:1.4em; margin-top:12px }
/* la foto de cierre: toda la familia con ella, antes de pedir la siguiente */
.cierre-foto{ margin:0 auto 30px; max-width:640px }
.cierre-foto img{
  display:block; width:100%; height:auto;
  border-radius:12px; box-shadow:var(--sombra);
  border:7px solid var(--papel-2); outline:1px solid var(--linea);
}
.cierre-foto figcaption{
  margin-top:11px; text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:.94rem; color:var(--tinta-suave);
}
.partida{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--linea);
  font-size:.98rem;
  color:var(--tinta-suave);
  max-width:52ch; margin-left:auto; margin-right:auto;
  text-wrap:pretty;
}
.partida + .partida{ border-top:0; margin-top:14px; padding-top:0 }

/* ---------- Fotografías ---------- */
.fotos{ max-width:1080px }
.fotos-vacio{
  border:1px solid var(--linea);
  background:var(--papel-2);
  border-radius:18px;
  padding:clamp(34px,7vw,56px) 24px;
  max-width:560px; margin:0 auto;
}
.vacio-flor{ width:34px; height:34px; margin-bottom:14px; opacity:.85 }
.vacio-texto{ max-width:38ch; margin:0 auto 22px; text-wrap:balance }
.fotos-vacio .cta-pista{ margin-top:12px }

/* muro de fotos: columnas tipo álbum, sin recortar las caras */
.galeria-cuenta{
  font-family:var(--serif); font-style:italic;
  color:var(--tinta-suave); font-size:1rem;
  margin:-6px 0 22px;
}
.mosaico{
  column-count:2; column-gap:10px;
}
@media (min-width:640px){ .mosaico{ column-count:3; column-gap:12px } }
@media (min-width:1040px){ .mosaico{ column-count:4 } }
.celda{
  break-inside:avoid;
  display:block; width:100%; padding:0;
  margin:0 0 10px;
  overflow:hidden; border-radius:10px;
  background:var(--papel-2);
  position:relative;
  box-shadow:0 1px 2px rgba(46,36,27,.07);
  transition:transform .3s ease, box-shadow .3s ease;
}
@media (min-width:640px){ .celda{ margin-bottom:12px } }
/* Hueco reservado mientras la foto viene en camino.
   Sin esto, una celda sin cargar mide CERO de alto. En un teléfono las 283
   celdas se apilaban todas en el mismo punto, el navegador decidía que
   ninguna estaba a la vista y `loading="lazy"` no bajaba ninguna: la galería
   se quedaba vacía para siempre (1 de 281 fotos). En computador no se notaba
   porque las columnas son anchas y las primeras alcanzaban a dar altura.
   Con una altura de arranque hay geometría de verdad, la carga diferida sabe
   qué está a la vista, y la página deja de saltar mientras llegan. */
.celda.sin-cargar{ min-height:168px }
.celda.sin-cargar img{ min-height:168px; object-fit:cover }
.celda img{
  width:100%; height:auto; display:block;
  transition:transform .45s ease;
}
.celda:hover{ transform:translateY(-2px); box-shadow:0 4px 18px rgba(46,36,27,.14) }
.celda:hover img{ transform:scale(1.03) }
.celda-video{ min-height:120px }
.ver-todas{ margin-top:6px }
.fotos-mas{ margin-top:22px; color:var(--tinta-suave); font-size:.95rem }

/* ---------- Galería completa a pantalla entera ---------- */
/* La galería a pantalla completa se fue: /fotos es la galería.
   Se borró su CSS con ella para no dejar reglas huérfanas. */

/* el libro de recuerdos: un muro de tarjetas */
.libro-todo .lista-recuerdos{
  display:block; column-count:1; column-gap:16px;
  max-width:1180px; margin:0 auto; text-align:left;
}
@media (min-width:760px){ .libro-todo .lista-recuerdos{ column-count:2 } }
@media (min-width:1220px){ .libro-todo .lista-recuerdos{ column-count:3 } }
.libro-todo .recuerdo{ break-inside:avoid; margin:0 0 16px }

/* ---------- Visor ---------- */
.visor{
  position:fixed; inset:0; z-index:50;
  background:rgba(24,17,12,.95);
  display:flex; align-items:center; justify-content:center;
}
.visor-figura{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:calc(100vw - 20px);
}
.visor-figura img{
  max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 128px);
  object-fit:contain;
  border-radius:4px;
}
.visor-figura figcaption{
  color:#EFE6D2; font-size:.92rem; text-align:center;
  min-height:1.4em; max-width:60ch; padding:0 14px;
}
.visor-figura figcaption .credito{ opacity:.65; font-style:italic }
.visor-cerrar,.visor-nav{
  position:fixed; z-index:51;
  width:54px; height:54px; border-radius:50%;
  background:rgba(250,245,236,.12); color:#F6EEDD;
  font-size:1.9rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px);
}
.visor-cerrar:hover,.visor-nav:hover{ background:rgba(250,245,236,.22) }
.visor-cerrar{ top:calc(12px + env(safe-area-inset-top)); right:12px }
.visor-ant{ left:8px; top:50%; transform:translateY(-50%) }
.visor-sig{ right:8px; top:50%; transform:translateY(-50%) }
.visor-contador{
  position:fixed; top:calc(26px + env(safe-area-inset-top)); left:18px; z-index:51;
  color:rgba(246,238,221,.75); font-size:.9rem; letter-spacing:.06em;
}
@media (max-width:600px){
  .visor-ant,.visor-sig{ top:auto; bottom:calc(18px + env(safe-area-inset-bottom)); transform:none }
  .visor-ant{ left:18px } .visor-sig{ right:18px }
  /* con el panel de comentarios abierto, las flechas quedaban debajo de él
     y no había forma visible de pasar a la siguiente foto */
  body.com-abierto .visor-ant,
  body.com-abierto .visor-sig{ bottom:calc(52dvh + 14px); z-index:53 }
  .visor-figura img{ max-height:calc(100dvh - 170px) }
}

/* ---------- La despedida ---------- */
.despedida{ max-width:1020px }
.eventos{
  display:grid; gap:14px;
  grid-template-columns:1fr;
  text-align:left;
}
@media (min-width:820px){ .eventos{ grid-template-columns:repeat(3,1fr) } }
.evento{
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:16px;
  padding:24px 24px 22px;
}
.evento h3{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
}
.evento h3::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--acento); opacity:.7; flex:none;
}
.campo{ margin-bottom:10px }
.campo dt{
  text-transform:uppercase; letter-spacing:.14em; font-size:.68rem;
  color:var(--tinta-suave); margin-bottom:1px;
}
.campo dd{ font-size:1.02rem }
.campo .zona{ font-size:.85rem; color:var(--tinta-suave) }
.pendiente{ color:var(--tinta-suave); font-style:italic; font-size:.97rem }
.evento-nota{ margin-top:12px; font-size:.9rem; color:var(--tinta-suave) }
.evento-acciones{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px }
.boton.mini{
  font-size:.95rem; padding:11px 20px; min-height:44px; box-shadow:none;
}
.eventos-fallback{ grid-column:1/-1; text-align:center; color:var(--tinta-suave) }

.transmision{
  margin-top:14px;
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:16px;
  padding:22px 24px;
}
.transmision h3{
  font-family:var(--serif); font-weight:600; font-size:1.15rem; margin-bottom:8px;
}
.transmision p{ color:var(--tinta-suave); font-size:.97rem }
.transmision .boton{ margin-top:12px }

/* ---------- Recuerdos ---------- */
.lista-titulo{
  margin-top:38px; margin-bottom:2px;
  font-family:var(--texto); text-transform:uppercase;
  letter-spacing:.16em; font-size:.72rem; color:var(--tinta-suave);
}
.lista-recuerdos{
  margin-top:16px;
  display:grid; gap:14px;
  text-align:left;
}
.lista-recuerdos:empty{ display:none }
/* con muchos recuerdos, el bloque se convierte en un panel con su propio scroll */
.lista-recuerdos.con-scroll{
  max-height:74vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding:16px 14px;
  border:1px solid var(--linea);
  border-radius:18px;
  background:linear-gradient(var(--papel), var(--papel-2));
}
.lista-recuerdos.con-scroll::-webkit-scrollbar{ width:9px }
.lista-recuerdos.con-scroll::-webkit-scrollbar-thumb{
  background:var(--linea-fuerte); border-radius:99px;
}
.lista-recuerdos.con-scroll::-webkit-scrollbar-track{ background:transparent }
.recuerdo.recien{
  animation:recienLlegado 2.8s ease-out 1;
}
@keyframes recienLlegado{
  0%{ box-shadow:0 0 0 3px var(--acento) }
  70%{ box-shadow:0 0 0 3px var(--acento) }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0) }
}
@media (min-width:820px){
  .recuerdos{ max-width:820px }
}
.recuerdo{
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:16px;
  padding:24px 26px 20px;
  position:relative;
}
.recuerdo blockquote{
  font-size:1.05rem; line-height:1.7;
}
.recuerdo blockquote::before{
  content:"“";
  font-family:var(--serif);
  font-size:3.4em; line-height:0;
  color:var(--acento); opacity:.45;
  display:block; margin:.42em 0 .1em;
}
.recuerdo figcaption{
  margin-top:14px; text-align:right;
  font-family:var(--serif); font-style:italic;
  color:var(--tinta-suave); font-size:.95rem;
}

/* ---------- Pie ---------- */
.pie{
  margin-top:clamp(40px,8vh,80px);
  border-top:1px solid var(--linea);
  /* el mismo blanco de la cabecera: la página queda enmarcada arriba y abajo */
  background:var(--papel-blanco);
  padding:clamp(44px,7vh,64px) 22px calc(46px + env(safe-area-inset-bottom));
  text-align:center;
}
.pie .divisor{ margin-bottom:26px }
.pie-nombre{
  font-family:var(--texto); text-transform:uppercase;
  letter-spacing:.16em; font-size:.72rem; color:var(--tinta-suave);
}
.pie-fechas{ font-family:var(--serif); font-style:italic; margin:6px 0 14px }
.pie-amor{ color:var(--tinta-suave); font-size:.95rem }
.pie-enlaces{
  margin-top:22px; font-size:.92rem; color:var(--tinta-suave);
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.pie-idioma{ min-height:36px; padding:7px 14px }

/* ---------- Su familia (tributos largos) ---------- */
.familia{ max-width:680px }
.lista-familia{ text-align:left; margin-top:8px }

/* Un solo cuadro con pestañas: los tres tributos completos sin que la página
   se estire tres pantallas. El texto rueda dentro del marco. */
.tf-pestanas{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:6px; margin-bottom:14px;
}
.tf-pestana{
  font-family:var(--serif); font-size:1rem;
  color:var(--tinta-suave);
  padding:9px 18px; min-height:42px;
  border:1px solid var(--linea); border-radius:999px;
  background:transparent;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.tf-pestana:hover{ color:var(--tinta); border-color:var(--linea-fuerte) }
.tf-pestana.activa{
  color:var(--acento-texto); background:var(--acento);
  border-color:var(--acento);
}
.tf-marco{
  position:relative;
  max-height:min(64svh, 580px);
  overflow-y:auto;
  /* sin `contain`: en el teléfono el marco ocupa casi toda la pantalla, y
     atrapar el dedo al llegar al final sería peor que dejar seguir la página */
  border-radius:18px;
  /* el texto se desvanece abajo: se ve que hay más y que rueda aquí dentro */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 46px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 46px), transparent 100%);
  scrollbar-width:thin;
  scrollbar-color:var(--linea-fuerte) transparent;
}
.tf-marco::-webkit-scrollbar{ width:8px }
.tf-marco::-webkit-scrollbar-thumb{
  background:var(--linea-fuerte); border-radius:999px;
}
.tf-marco::-webkit-scrollbar-track{ background:transparent }
/* al llegar al final ya no hay nada que insinuar */
.tf-marco.al-final{
  -webkit-mask-image:none; mask-image:none;
}
.tf-panel .tributo{ margin-bottom:0 }
/* dentro del marco la foto no puede comerse la ventana entera: si lo hace,
   abres a Clayton y solo ves una foto, con sus palabras debajo del borde */
.tf-panel .tributo-foto img{ max-height:min(300px, 34svh) }
.tributo{
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:18px;
  padding:30px 30px 24px;
  margin-bottom:18px;
}
.tributo blockquote{ font-size:1.12rem; line-height:1.8; margin-bottom:1em }
.tributo blockquote:first-of-type::before{
  content:"“";
  font-family:var(--serif);
  font-size:3.2em; line-height:0;
  color:var(--acento); opacity:.45;
  display:block; margin:.4em 0 .05em;
}
.tributo figcaption{
  text-align:right; font-family:var(--serif); font-style:italic;
  color:var(--tinta-suave);
}
.tributo .relacion{ font-size:.92em }
/* foto opcional dentro de un tributo — la escena que la persona está contando */
.tributo-foto{ margin:0 0 22px }
.tributo-foto img{
  /* sin recortes: la foto se ve entera, sea vertical u horizontal */
  display:block; margin:0 auto;
  max-width:100%; max-height:min(620px, 72svh); width:auto; height:auto;
  border-radius:10px; box-shadow:var(--sombra);
  border:6px solid var(--papel); outline:1px solid var(--linea);
}
.tributo-foto figcaption{
  text-align:center; font-family:var(--texto); font-style:normal;
  font-size:.82rem; color:var(--tinta-suave); margin-top:9px;
}
/* tributo pendiente: foto + una línea + cuenta regresiva, todo centrado */
.tributo-pendiente{ text-align:center }
.tp-nota{
  font-family:var(--serif); font-style:italic;
  font-size:1.14rem; color:var(--tinta-suave);
  margin:4px 0 20px;
}
.tp-cuenta{ display:flex; justify-content:center; gap:20px; margin:0 0 12px }
.tp-cuenta > div{ min-width:58px }
.tp-num{
  display:block; font-family:var(--serif);
  font-size:2.05rem; line-height:1.1; color:var(--acento);
  font-variant-numeric:tabular-nums;
}
.tp-lbl{
  display:block; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave); margin-top:3px;
}
.tp-cuando{ font-size:.95rem; color:var(--tinta-suave); margin:0 0 8px }
.tp-casi{
  font-family:var(--serif); font-style:italic;
  font-size:1.35rem; color:var(--acento); padding:16px 0;
}
.tributo-pendiente figcaption{ margin-top:14px }

/* varias fotos: una tira pareja, sin que ninguna se coma el cuadro */
.tributo-fotos{
  display:grid; gap:16px; margin:0 0 24px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.tributo-fotos .tributo-foto{ margin:0 }
.tributo-fotos .tributo-foto img,
.tributo-fotos .tributo-foto video{
  width:100%; height:auto; max-height:none;
  aspect-ratio:3/4; object-fit:cover; border-width:4px;
}
/* un video en la tira: mismo marco que las fotos, con su control */
.tributo-foto video{
  display:block; margin:0 auto;
  max-width:100%; border-radius:10px; box-shadow:var(--sombra);
  border:6px solid var(--papel); outline:1px solid var(--linea);
  background:var(--tinta);
}
.tf-panel .tributo-foto video{ max-height:min(300px, 34svh) }
.tributo-fotos figcaption{ font-size:.76rem; line-height:1.45; margin-top:7px }

/* ---------- Galería: video + admin ---------- */
.celda{ position:relative }
.celda-cine{
  display:block; width:100%; aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--papel-2), var(--linea));
}
.insignia-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#FFF8EE; pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.admin-x{
  position:absolute; top:6px; right:6px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  background:rgba(140,30,40,.85); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer;
}
.recuerdo .admin-x{ top:10px; right:10px }
.visor-figura video{
  max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 128px);
  border-radius:4px; background:#000;
}
@media (max-width:600px){
  .visor-figura video{ max-height:calc(100dvh - 170px) }
}
.fotos-archivo{ margin-top:10px; font-size:.85rem; color:var(--tinta-suave) }
.celda-recien{ box-shadow:0 0 0 3px var(--acento) }

/* ---------- Rotador de recuerdos (uno a la vez, en grande) ---------- */
.rotador{ margin:6px auto 30px; max-width:620px }
.rotador-pista{ display:grid }              /* todas las tarjetas en la misma celda */
.recuerdo-destacado{
  grid-area:1 / 1;
  opacity:0; transform:translateY(10px);
  transition:opacity .85s ease, transform .85s ease;
  pointer-events:none;
  padding:6px 8px 0;
}
.recuerdo-destacado.activa{ opacity:1; transform:none; pointer-events:auto }
.recuerdo-destacado blockquote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,4.4vw,1.62rem);
  line-height:1.6;
  text-wrap:pretty;
}
.recuerdo-destacado blockquote::before{
  content:"“";
  font-family:var(--serif); font-style:normal;
  font-size:3.4em; line-height:0;
  color:var(--acento); opacity:.4;
  display:block; margin:.42em 0 .16em;
}
.recuerdo-destacado figcaption{
  margin-top:20px;
  font-family:var(--texto);
  text-transform:uppercase; letter-spacing:.15em;
  font-size:.72rem; color:var(--tinta-suave);
}
.recuerdo-destacado .lugar-d{ text-transform:none; letter-spacing:.04em; font-style:italic }

.rotador-mando{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:22px;
}
.rotador-nav{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--linea);
  color:var(--tinta-suave); font-size:1.35rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.rotador-nav:hover{ color:var(--tinta); border-color:var(--linea-fuerte); background:var(--papel-2) }
.rotador-puntos{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  justify-content:center; min-width:60px;
}
.rotador-punto{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:var(--linea-fuerte); opacity:.5;
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
.rotador-punto.activo{ background:var(--acento); opacity:1; transform:scale(1.35) }
.rotador-cuenta{
  font-family:var(--serif); font-size:.92rem; color:var(--tinta-suave);
  letter-spacing:.08em; min-width:64px; text-align:center;
}
.ver-todos{ margin-top:26px }

/* ---------- Formulario de recuerdos ---------- */
.recuerdo-forma{
  max-width:560px; margin:0 auto 10px; text-align:left;
}
.recuerdo-forma textarea, .recuerdo-forma input[type="text"], .subir-panel input[type="text"]{
  width:100%;
  background:var(--papel-2);
  border:1px solid var(--linea-fuerte);
  border-radius:12px;
  padding:14px 16px;
  font:inherit; color:var(--tinta);
  margin-bottom:10px;
  resize:vertical;
}
.recuerdo-forma textarea:focus, .recuerdo-forma input:focus, .subir-panel input:focus{
  outline:3px solid var(--foco); outline-offset:1px; border-color:var(--acento);
}
#recuerdoWeb{ position:absolute; left:-9999px; height:1px; opacity:0 }
.forma-fila{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:520px){ .forma-fila{ grid-template-columns:1fr } }
.forma-pista{ font-size:.85rem; color:var(--tinta-suave); margin:-2px 0 12px }
.recuerdo-forma .boton{ width:100% }
.forma-estado{ margin-top:10px; font-size:.92rem; color:var(--acento); text-align:center; min-height:1.3em }
.recuerdo{ position:relative }

/* ---------- Panel de subida ---------- */
.subir-panel{
  position:fixed; inset:0; z-index:60;
  background:rgba(24,17,12,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:700px){ .subir-panel{ align-items:center } }
.subir-caja{
  background:var(--papel);
  border-radius:22px 22px 0 0;
  padding:26px 22px calc(24px + env(safe-area-inset-bottom));
  width:100%; max-width:560px; max-height:88dvh; overflow:auto;
  position:relative;
}
@media (min-width:700px){ .subir-caja{ border-radius:22px } }
.subir-caja h3{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  margin-bottom:16px; text-align:center;
}
.subir-cerrar{
  position:absolute; top:10px; right:12px;
  width:42px; height:42px; border-radius:50%;
  font-size:1.5rem; color:var(--tinta-suave);
}
.subir-lista{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px; margin-bottom:14px;
}
.subir-item{
  position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
  background:var(--papel-2);
}
.subir-item img,.subir-item video{ width:100%; height:100%; object-fit:cover; display:block }
.subir-quitar{
  position:absolute; top:4px; right:4px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(46,36,27,.65); color:#FFF8EE;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; cursor:pointer;
}
.subir-barra{
  position:absolute; left:0; right:0; bottom:0; height:5px;
  background:rgba(46,36,27,.25);
}
.subir-avance{
  display:block; height:100%; width:0;
  background:var(--acento);
  transition:width .3s ease;
}
/* el que no pudo irse queda marcado, para que se vea cuál reintentar */
.subir-item-fallo{ outline:2px solid #a33; outline-offset:-2px }
.subir-item-fallo::after{
  content:"!"; position:absolute; left:4px; top:4px;
  width:22px; height:22px; border-radius:50%;
  background:#a33; color:#fff; font-size:.85rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.subir-panel .cta-fila{ margin-top:4px }

/* ---------- Aviso vivo (“alguien plantó una flor”) ---------- */
.brote-aviso{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);
  background:var(--tinta); color:var(--papel);
  font-family:var(--serif); font-style:italic; font-size:.98rem;
  padding:13px 22px; border-radius:999px;
  box-shadow:var(--sombra);
  opacity:0; transition:opacity .4s ease, transform .4s ease;
  z-index:70; pointer-events:none; max-width:88vw; text-align:center;
}
.brote-aviso.visible{ opacity:1; transform:translateX(-50%) translateY(0) }

.enlace-simple{
  font:inherit; color:inherit; text-decoration:underline;
  text-decoration-color:var(--linea-fuerte); text-underline-offset:3px;
  padding:0; cursor:pointer;
}
.enlace-simple:hover{ text-decoration-color:var(--acento) }

/* ---------- Apariciones al hacer scroll ---------- */
html.js .rev{ opacity:0; transform:translateY(14px) }
html.js .rev.rev-lista{
  opacity:1; transform:none;
  transition:opacity .75s ease, transform .75s ease;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  #jardin .mece.anima,#jardin .mece.boing,#jardin .flor.brota,
  #jardin .flor.crece .tallo,#jardin .flor.crece .corola,#jardin .flor.crece .hoja-g{ animation:none !important }
  #jardin .flor{ opacity:var(--op,1) }
  #jardin .flor .corola{ transform:scale(1) !important }
  #jardin .flor .hoja-g{ opacity:1 !important }
  #jardin .brisa{ transform:none !important; transition:none }
  .petalo-deriva{ display:none }
  html.js .rev{ opacity:1; transform:none; transition:none }
  .celda img{ transition:none }
  .boton{ transition:none }
}
html.quieto #jardin .flor{ opacity:var(--op,1) }
html.quieto .petalo-deriva{ display:none }

/* modo captura (?quieto): sin hero de pantalla completa */
html.quieto .portada{ min-height:0; padding-top:110px }

/* ---------- Impresión ---------- */
@media print{
  .cabecera,.cta-fila,.cta-pista,.fotos-mas,.idioma,.visor{ display:none !important }
  body{ background:#fff; color:#000 }
  .seccion{ padding-top:34px }
}

/* ═══════════ Galería: grupos, créditos, comentarios, muro, presentación ═══════════ */

/* títulos que separan lo que manda la familia de lo que ya teníamos */
.grupo-tit{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,4vw,1.45rem);
  color:var(--tinta);
  text-align:center;
  margin:34px 0 18px;
  padding-top:22px;
  border-top:1px solid var(--linea);
}
#galeria > .grupo-tit:first-child{ border-top:0; padding-top:0; margin-top:6px }

/* cada foto con quién la mandó */
.celda-caja{ break-inside:avoid; margin:0 0 12px; display:block }
.celda-caja .celda{ margin:0 }
.celda-pie{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 3px 0; font-size:.76rem; color:var(--tinta-suave);
}
.c-quien{ font-style:italic }
.c-coment::before{ content:"💬 " }
.c-coment{ margin-left:auto; font-variant-numeric:tabular-nums }

/* panel de comentarios dentro del visor */
.comentarios{
  position:fixed; right:0; top:0; bottom:0; width:min(380px, 88vw);
  background:var(--papel); border-left:1px solid var(--linea);
  padding:calc(64px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto; z-index:52;
  transform:translateX(100%); transition:transform .35s ease;
}
.visor:not([hidden]) ~ .comentarios,
.comentarios.abierto{ transform:none }
.comentarios h4{
  font-family:var(--serif); font-weight:600; font-size:1.1rem; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.com-cuenta{ font-weight:400; font-size:.85rem; color:var(--tinta-suave) }
/* plegar el panel: la foto no debería competir con los comentarios por el sitio */
.com-plegar{
  margin-left:auto; flex:none;
  width:34px; height:34px; border-radius:50%;
  background:var(--papel-2); border:1px solid var(--linea);
  color:var(--tinta-suave); font-size:1.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.com-plegar:hover{ background:var(--linea); color:var(--tinta) }
/* la pestañita que lo devuelve. Va más abajo del centro a propósito: en el
   centro se sentaba justo encima de la flecha de "siguiente foto". */
.com-pestana{
  position:fixed; z-index:53;
  right:0; top:76%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px 10px; border-radius:14px 0 0 14px;
  background:var(--papel); border:1px solid var(--linea); border-right:0;
  color:var(--tinta-suave); font-size:1.05rem; line-height:1;
  box-shadow:0 6px 22px rgba(24,17,12,.25);
}
.com-pestana:hover{ color:var(--tinta) }
.com-pestana-n{ font-size:.78rem; font-variant-numeric:tabular-nums }
.com-pestana-n:empty{ display:none }
.com{ padding:11px 0; border-bottom:1px solid var(--linea) }
.com-txt{ font-size:.97rem; line-height:1.55 }
.com-quien{ font-family:var(--serif); font-style:italic; font-size:.85rem; color:var(--tinta-suave); margin-top:4px; text-align:right }
.com-vacio,.com-cargando{ color:var(--tinta-suave); font-size:.9rem; font-style:italic; padding:8px 0 }
.com-forma{ margin-top:16px }
.com-forma textarea,.com-forma input[type=text]{
  width:100%; background:var(--papel-2); border:1px solid var(--linea-fuerte);
  border-radius:10px; padding:10px 12px; font:inherit; color:var(--tinta);
  margin-bottom:8px; resize:vertical;
}
#comWeb{ position:absolute; left:-9999px; opacity:0; height:1px }
.com-fila{ display:flex; gap:8px }
.com-fila input{ flex:1; margin-bottom:0 }
.com-fila .boton{ flex:none }

/* ── El panel no se come la foto ───────────────────────────────────────────
   Antes el visor ocupaba toda la pantalla y el panel se le montaba encima:
   la foto quedaba cortada por la derecha. Ahora el visor cede exactamente el
   ancho del panel, así que la foto se encoge y se ve entera al lado. Y si lo
   pliegas, la foto recupera la pantalla completa.                          */
:root{ --ancho-com:min(380px, 88vw) }
@media (min-width:901px){
  body.com-abierto .visor{ padding-right:var(--ancho-com) }
  body.com-abierto .visor-figura img,
  body.com-abierto .visor-figura video{ max-width:calc(100vw - var(--ancho-com) - 20px) }
  body.com-abierto .visor-cerrar{ right:calc(var(--ancho-com) + 12px) }
  body.com-abierto .visor-sig{ right:calc(var(--ancho-com) + 8px) }
}
.visor{ transition:padding-right .35s ease }
.visor-cerrar,.visor-sig{ transition:right .35s ease }
/* plegado: fuera de pantalla, y la pestañita a la vista */
.comentarios.plegado{ transform:translateX(100%) !important }

@media (max-width:900px){
  .comentarios{
    top:auto; bottom:0; left:0; right:0; width:auto;
    max-height:62dvh; border-left:0; border-top:1px solid var(--linea);
    border-radius:18px 18px 0 0;
    padding-top:16px;
    transform:translateY(100%);
  }
  .visor:not([hidden]) ~ .comentarios,
  .comentarios.abierto{ transform:none }
  .comentarios.plegado{ transform:translateY(100%) !important }
  .visor-figura img,.visor-figura video{ max-height:calc(38dvh) }
  /* plegado en el teléfono: la foto se queda con toda la pantalla */
  body.com-plegado .visor-figura img,
  body.com-plegado .visor-figura video{ max-height:calc(100dvh - 170px) }
  .com-plegar{ transform:rotate(90deg) }
  .com-pestana{
    right:auto; top:auto;
    left:50%; transform:translateX(-50%);   /* centrado de verdad, mida lo que mida */
    bottom:calc(84px + env(safe-area-inset-bottom));
    flex-direction:row; gap:6px;
    border-radius:999px; border-right:1px solid var(--linea);
    padding:10px 16px;
  }
}

/* muro de comentarios recientes */
.muro{
  max-width:820px; margin:6px auto 0;
  background:var(--papel-2); border:1px solid var(--linea);
  border-radius:16px; padding:18px;
}
.muro-tit{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  margin-bottom:12px; text-align:center; color:var(--tinta-suave);
}
.muro-fila{
  display:flex; gap:12px; align-items:flex-start; width:100%;
  text-align:left; padding:10px 6px; border-bottom:1px solid var(--linea);
}
.muro-fila:last-child{ border-bottom:0 }
.muro-fila:hover{ background:var(--papel) }
.muro-fila img{ width:52px; height:52px; object-fit:cover; border-radius:8px; flex:none }
.muro-hueco{ width:52px; height:52px; border-radius:8px; background:var(--linea); flex:none }
.muro-txt{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.muro-c{ font-size:.94rem; line-height:1.5 }
.muro-q{ font-family:var(--serif); font-style:italic; font-size:.82rem; color:var(--tinta-suave) }
.pag-acciones-top{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0 18px }

/* durante la presentación, la interfaz se aparta */
/* en presentación el panel se va, así que la foto recupera toda la pantalla */
body.en-pase .comentarios{ transform:translateX(100%) }
body.en-pase .com-pestana{ display:none }
@media (min-width:901px){
  body.en-pase.com-abierto .visor{ padding-right:0 }
  body.en-pase.com-abierto .visor-figura img,
  body.en-pase.com-abierto .visor-figura video{ max-width:calc(100vw - 20px) }
  body.en-pase.com-abierto .visor-cerrar{ right:12px }
  body.en-pase.com-abierto .visor-sig{ right:8px }
}
@media (max-width:900px){ body.en-pase .comentarios{ transform:translateY(100%) } }

/* ── panel de duplicados ── */
.grupo-dupe{
  border:1px solid var(--linea); border-radius:14px;
  padding:16px; margin-bottom:16px; background:var(--papel-2);
}
.dupe-tit{ font-family:var(--serif); font-style:italic; margin-bottom:12px; color:var(--tinta-suave) }
.dupe-fotos{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.dupe-item{ width:130px; text-align:center }
.dupe-item img{ width:130px; height:130px; object-fit:cover; border-radius:8px; display:block }
.dupe-item figcaption{ font-size:.75rem; color:var(--tinta-suave); margin:6px 0 }

/* ---------- Invitación repetida ----------
   El sitio existe para que la gente mande fotos y escriba. Pedirlo una sola
   vez en la portada no alcanza: las dos secciones de texto miden juntas más
   de cuatro mil píxeles y en todo ese tramo no había dónde decir que sí.
   Estas invitaciones son a propósito calladas — una línea y un botón, sin
   caja de color ni signos de admiración. Es un memorial, no una campaña. */
.invitacion{
  max-width:var(--ancho-texto, 62ch);
  margin:clamp(30px,6vh,58px) auto;
  padding:0 22px;
  text-align:center;
}
.invitacion p{
  max-width:44ch;
  margin:0 auto 16px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.02rem,2.4vw,1.16rem);
  line-height:1.5;
  color:var(--tinta-suave);
  text-wrap:balance;
}
/* la que va dentro de "Palabras de su familia" cierra la sección, así que
   se separa un poco más de lo que acaba de leerse */
.invitacion-dentro{ margin-top:clamp(34px,7vh,64px) }

/* ---------- Flores para ella ----------
   Esta sección tiene que PARARSE de la página. Media familia está en Estados
   Unidos y no alcanza a viajar a Colombia: para ellos esto no es una nota al
   pie, es la única forma de mandarle algo. Así que va en tarjeta, con la flor
   del jardín en grande arriba — la misma flor que abre un mensaje, ahora
   ofrecida de verdad. Sigue siendo papel y tinta de la casa: destaca por
   contraste y por tamaño, no por gritar. */
.flores{ padding-top:clamp(10px,2vh,20px) }
.flores-caja{
  position:relative;
  max-width:min(640px, calc(100% - 28px));
  margin:0 auto;
  padding:clamp(30px,5vw,44px) clamp(20px,4vw,38px) clamp(26px,4.5vw,38px);
  border:1.5px solid color-mix(in srgb, var(--acento) 34%, transparent);
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(166,77,99,.09) 0%, rgba(166,77,99,0) 62%),
    var(--papel-blanco);
  box-shadow:var(--sombra);
  text-align:center;
}
.flores-marca{
  display:block;
  width:clamp(38px,7vw,50px); height:auto;
  margin:0 auto clamp(12px,2vh,18px);
}
.flores-marca .fm-petalos circle{ fill:var(--f-rosita-p) }
.flores-marca .fm-centro{ fill:var(--f-rosa-c) }

.flores-cejilla{
  margin:0 0 10px;
  font-size:.71rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--acento);
}
.flores-titulo{
  margin:0 0 clamp(16px,2.6vh,22px);
  font-family:var(--serif);
  font-size:clamp(1.5rem,5.2vw,2.05rem);
  line-height:1.18;
  color:var(--tinta);
  text-wrap:balance;
}
/* el divisor de las otras secciones no va: la tarjeta ya separa */
.flores .divisor{ display:none }

.flores-texto{
  max-width:46ch;
  margin:0 auto clamp(14px,2.4vh,20px);
  font-family:var(--serif);
  font-size:clamp(1.02rem,2.4vw,1.15rem);
  line-height:1.62;
  color:var(--tinta);
  text-wrap:pretty;
}
.flores-texto em{ font-style:italic; color:var(--acento) }
.flores-texto-2{
  font-size:clamp(.97rem,2.2vw,1.06rem);
  color:var(--tinta-suave);
  margin-bottom:clamp(20px,3.4vh,28px);
}
.flores-fila{ margin-bottom:clamp(16px,2.8vh,22px) }
/* Los datos, en dos renglones claros. Alguien que va a mandar plata tiene que
   poder LEER el usuario y el número sin lupa y sin dudar de cuál es cuál. */
.flores-datos{
  display:flex; flex-direction:column; gap:8px;
  max-width:30ch;
  margin:0 auto;
  padding-top:clamp(16px,2.6vh,22px);
  border-top:1px solid var(--linea);
}
.fd-linea{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.fd-linea b{
  font-weight:600;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave);
  white-space:nowrap;
}
.fd-linea a{
  font-family:var(--serif);
  font-size:clamp(1.02rem,2.5vw,1.14rem);
  font-weight:600;
  color:var(--acento);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--acento) 40%, transparent);
  white-space:nowrap;
}
.fd-linea a:hover{ text-decoration-color:var(--acento) }
@media (max-width:400px){
  .flores-datos{ max-width:100% }
  .fd-linea{ flex-direction:column; align-items:center; gap:1px }
}

.flores-nota{
  max-width:44ch;
  margin:clamp(16px,2.6vh,22px) auto 0;
  font-size:.88rem;
  line-height:1.58;
  color:var(--tinta-suave);
  text-wrap:pretty;
}
.flores-nota strong{ font-weight:600; color:var(--tinta) }

/* El puente de ARRIBA, bajo las fechas. Chiquito por respeto — encima está su
   nombre y no se le puede quitar el aire — pero con borde y flor para que se
   lea como algo en lo que se puede tocar, no como un pie de foto. */
.puente-arriba{
  margin:clamp(12px,2vh,18px) auto 0;
  text-align:center;
}
.puente-arriba a{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px 7px 11px;
  border:1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--acento) 5%, var(--papel-blanco));
  font-size:clamp(.79rem,2vw,.86rem);
  line-height:1.25;
  color:var(--acento);
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease;
}
.puente-arriba a:hover{
  border-color:color-mix(in srgb, var(--acento) 60%, transparent);
  background:color-mix(in srgb, var(--acento) 10%, var(--papel-blanco));
}
.puente-arriba svg{ width:16px; height:16px; flex:0 0 auto }
.puente-arriba .pa-petalos circle{ fill:var(--f-rosita-p) }
.puente-arriba .pa-centro{ fill:var(--f-rosa-c) }
@media (prefers-reduced-motion: reduce){
  .puente-arriba a{ transition:none }
}

/* El puente desde el jardín: una sola línea, subrayada, para el que acaba de
   entender qué es una flor aquí y quiere una de las otras. */
.jardin-puente{
  margin:10px auto 0;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(.95rem,2.2vw,1.04rem);
}
.jardin-puente a{
  color:var(--acento);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--acento) 45%, transparent);
}
.jardin-puente a:hover{ text-decoration-color:var(--acento) }

/* ---------- Barra fija de teléfono ----------
   Solo en pantallas de teléfono. En computador el botón de la portada y las
   invitaciones ya bastan, y una barra pegada estorbaría al leer. */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  transform:translateY(110%);
  transition:transform .32s ease;
}
/* Los dos botones se reparten el ancho por igual. flex-basis:0 es lo que
   importa: sin eso el más largo se queda con más sitio y quedan disparejos.
   min-width:0 les da permiso de encogerse por debajo de su texto en un
   iPhone pequeño, en vez de desbordarse fuera de la pantalla. */
.barra-movil{ gap:8px }
.barra-movil.ver{ transform:translateY(0) }
.barra-movil .boton{
  flex:1 1 0; min-width:0;
  justify-content:center; text-align:center;
  padding-left:10px; padding-right:10px;
  font-size:.86rem; letter-spacing:.02em;
  white-space:nowrap;
}
/* si aun así no cabe (pantallas de 320 px), que se lea antes que se parta */
@media (max-width:360px){
  .barra-movil{ gap:6px }
  .barra-movil .boton{ font-size:.79rem; padding-left:6px; padding-right:6px }
}

@media (max-width:700px){
  /* flex, no block: es donde los dos botones se reparten el ancho */
  .barra-movil{ display:flex }
  /* que la barra no tape el final del pie */
  .pie{ padding-bottom:calc(86px + env(safe-area-inset-bottom)) }
}
@media (prefers-reduced-motion: reduce){
  .barra-movil{ transition:none }
}

/* ---------- La eulogía ----------
   Es el texto que escribió la familia, así que se lee como un texto leído en
   voz alta: un poco más grande que la prosa de al lado y con un filo del color
   de la casa, para que se note que estas palabras son de ellos. */
.eulogia{
  max-width:60ch;
  margin:clamp(24px,5vh,40px) auto 0;
  padding:clamp(20px,4vw,30px) clamp(18px,4vw,34px);
  border-left:2px solid var(--acento);
  background:var(--papel-2);
  border-radius:0 14px 14px 0;
}
.eulogia p{
  font-family:var(--serif);
  font-size:clamp(1.03rem,2.5vw,1.16rem);
  line-height:1.68;
  text-wrap:pretty;
}
.eulogia p + p{ margin-top:1em }

/* ---------- Ella, hablando ----------
   Video vertical de teléfono: se le pone tope de alto para que no se coma la
   pantalla en un portátil, y se centra. */
.ella-video{
  max-width:min(300px, 70vw);
  margin:clamp(18px,3vh,28px) auto clamp(26px,4vh,38px);
  text-align:center;
}
.ella-video video{
  width:100%;
  max-height:min(56svh, 520px);
  border-radius:16px;
  display:block;
  background:var(--tinta);
  border:1px solid var(--linea);
}
.ella-video figcaption{
  margin-top:11px;
  font-family:var(--serif); font-style:italic;
  font-size:.92rem; color:var(--tinta-suave);
}

/* la línea que abre la eulogía: es la que la gente va a recordar */
.eulogia-abre{
  font-size:clamp(1.14rem,3vw,1.34rem) !important;
  line-height:1.5 !important;
}

/* la línea que la retrata, arriba de sus fotos: cada cosa que nombra
   está en alguna de las imágenes de abajo */
.epigrafe{
  max-width:44ch;
  margin:clamp(22px,4vh,38px) auto 0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,2.4vw,1.14rem);
  line-height:1.55;
  color:var(--tinta-suave);
  text-wrap:balance;
}

/* ---------- "Gracias por mantener viva su memoria" ----------
   El h2 vive en una columna de 640px y este título no cabe, así que "alive"
   caía solo en una segunda línea. Se le deja salir de la columna y en pantalla
   ancha va en una sola línea. En teléfono no cabe de ninguna manera a un
   tamaño legible, así que ahí se deja partir, pero equilibrado. */
#permanece h2{
  width:max-content;
  max-width:min(94vw, 900px);
  margin-left:auto;
  margin-right:auto;
  text-wrap:balance;
}
@media (min-width:760px){
  #permanece h2{
    white-space:nowrap;
    font-size:clamp(1.9rem, 3.4vw, 2.3rem);
  }
}

/* ---------- Comentarios en teléfono ----------
   El panel era un cajón lateral de 88vw: en un celular tapaba la pantalla y
   dejaba la foto como una tira de lado. En teléfono baja a ser una hoja
   inferior — los comentarios van DEBAJO de la foto, que es donde uno los
   busca — y la foto se queda con el espacio de arriba. En computador el
   cajón lateral se mantiene: ahí sí hay ancho para las dos cosas. */
@media (max-width:760px){
  .comentarios{
    left:0; right:0; top:auto; bottom:0;
    width:auto;
    max-height:56dvh;
    border-left:none;
    border-top:1px solid var(--linea);
    border-radius:18px 18px 0 0;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 28px rgba(46,36,27,.16);
    transform:translateY(100%);
  }
  .visor:not([hidden]) ~ .comentarios,
  .comentarios.abierto{ transform:none }

  /* agarradera, para que se lea como hoja que sube */
  .comentarios::before{
    content:""; display:block; width:38px; height:4px; border-radius:2px;
    background:var(--linea-fuerte); opacity:.5;
    margin:-8px auto 14px;
  }

  /* la foto se queda con lo que no ocupa la hoja */
  .visor-figura img,
  .visor-figura video{ max-height:calc(44dvh - 56px) }
  .visor-figura{ margin-bottom:56dvh }
  /* y si pliegas la hoja, se queda con todo */
  body.com-plegado .visor-figura{ margin-bottom:0 }
  body.com-plegado .visor-figura img,
  body.com-plegado .visor-figura video{ max-height:calc(100dvh - 170px) }
}

/* ---------- De quién es esta flor ----------
   Etiqueta que aparece al pasar por encima de una flor (o al tocarla en el
   teléfono). Va dentro del cantero, apuntando a la flor. */
.jardin-envoltura{ position:relative }
.flor-etiqueta{
  position:absolute; z-index:6;
  transform:translate(-50%,-118%);
  padding:6px 11px 7px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:999px;
  box-shadow:var(--sombra);
  font-size:.8rem; line-height:1.25; white-space:nowrap; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.flor-etiqueta.ver{ opacity:1 }
.flor-etiqueta b{ font-weight:600 }
.flor-etiqueta span{
  display:block; font-size:.7rem; color:var(--tinta-suave);
  font-family:var(--serif); font-style:italic;
}
.jardin-envoltura .flor{ cursor:pointer }
.jardin-envoltura .flor[data-quien]:hover .corola{ filter:brightness(1.08) }
@media (prefers-reduced-motion: reduce){
  .flor-etiqueta{ transition:none }
}

/* la hora en que se sembró: lo más callado de la etiqueta */
.flor-etiqueta span i{
  font-style:normal;
  opacity:.62;
  font-size:.92em;
}
.flor-etiqueta span i::before{ content:" · " }

/* ---------- La tira de la despedida ----------
   Va arriba del todo y solo mientras los eventos no hayan pasado. Discreta:
   informa, no grita. Es lo primero que ve alguien que abre el enlace la
   noche antes, así que tiene que leerse de un vistazo y sin estorbar a su
   nombre, que viene justo debajo. */
.tira-despedida{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 18px;
  max-width:min(720px, calc(100% - 28px));
  margin:14px auto 0;
  padding:12px 18px;
  border:1px solid var(--linea);
  border-radius:14px;
  background:var(--papel-2);
  font-size:.88rem; line-height:1.4;
}
.td-evento{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  flex:1 1 auto; min-width:0;
}
.td-evento b{
  font-weight:600; white-space:nowrap;
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--acento);
}
.td-evento i{
  flex:1 1 100%;
  font-style:italic; font-family:var(--serif);
  font-size:.82rem; color:var(--tinta-suave);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.td-acciones{ display:flex; gap:8px; flex:0 0 auto }
.tira-despedida .boton.mini{
  padding:8px 15px; min-height:40px; font-size:.83rem; white-space:nowrap;
}
@media (max-width:620px){
  .tira-despedida{
    gap:9px; padding:12px 14px; margin-top:10px;
    border-left:3px solid var(--acento);
  }
  .td-evento{ flex:1 1 100% }
  /* En el teléfono solo lo siguiente. Dos eventos con sus direcciones hacían
     un bloque de doscientos píxeles encima de su nombre; mañana lo único que
     importa es a dónde ir mañana. El resto está a un toque, en el botón. */
  .td-evento + .td-evento{ display:none }
  .td-acciones{ width:100%; }
  .tira-despedida .boton.mini{ flex:1 1 0; justify-content:center }
}



/* ---------- Agarrar una flor que se está meciendo ----------
   El óvalo invisible es lo único que recibe el puntero. Lo que se mece y se
   inclina con la brisa queda fuera del alcance del ratón, así que la flor
   puede moverse todo lo que quiera sin escaparse del dedo. */
.flor-tocar{
  fill:transparent;
  pointer-events:all;
  cursor:pointer;
}
/* los jardines de /fotos y /recuerdos anclan aquí su etiqueta de quién sembró */
.jardin-recuerdos{ position:relative }
#jardin .flor > .brisa, #jardinPie2 .flor > .brisa{ pointer-events:none }

/* al apuntarle, se queda quieta: se siente como sostenerla */
#jardin .flor:hover .mece.anima, #jardinPie2 .flor:hover .mece.anima, 
#jardinPie2 .flor:hover .mece.anima{ animation-play-state:paused }
#jardin .flor:hover .brisa, #jardinPie2 .flor:hover .brisa, 
#jardinPie2 .flor:hover .brisa{ transition:transform .18s ease-out }

/* y se ilumina apenas, para saber cuál se está tocando */
#jardin .flor:hover .corola, #jardinPie2 .flor:hover .corola, 
#jardinPie2 .flor:hover .corola{ filter:brightness(1.1) }


/* la pista de tocar una flor: parte de la nota, pero se distingue */
.jn-pista{
  display:block;
  margin-top:7px;
  font-weight:600;
  font-size:.92rem;
  color:var(--tinta);
}

/* y aire real entre la nota y lo que venga después, para que no se peguen */
.jardin-nota + .tira-despedida,
.jardin-nota + .cta-fila{ margin-top:clamp(24px,4.5vh,40px) }

/* ---------- Un recuerdo, abierto sobre el jardín ----------
   Igual que el visor de fotos: se abre encima, se cierra y te deja donde
   estabas. Un mensaje no merecía menos que una foto. */
.recuerdo-abierto{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(24,17,12,.72);
  backdrop-filter:blur(3px);
}
.ra-caja{
  position:relative;
  max-width:min(560px, 92vw);
  max-height:82dvh; overflow-y:auto;
  padding:clamp(26px,5vw,38px);
  background:var(--papel);
  border-radius:18px;
  box-shadow:var(--sombra);
  text-align:left;
}
.ra-caja blockquote{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.6vw,1.2rem);
  line-height:1.62;
  white-space:pre-wrap;
}
.ra-caja blockquote + blockquote{ margin-top:.75em }
.ra-caja footer{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin-top:18px; padding-top:13px; border-top:1px solid var(--linea);
}
.ra-caja footer b{ font-weight:600 }
.ra-caja footer span{ font-family:var(--serif); font-style:italic; color:var(--tinta-suave); font-size:.9rem }
.ra-caja footer i{ margin-left:auto; font-style:normal; font-size:.8rem; color:var(--tinta-suave); opacity:.75 }
.ra-caja .boton.mini{ margin-top:16px; display:inline-flex }
.ra-cerrar{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px; border-radius:50%;
  font-size:1.5rem; line-height:1; color:var(--tinta-suave);
}
.ra-cerrar:hover{ background:var(--papel-2); color:var(--tinta) }

/* ---------- El botón bajo los recuerdos ----------
   Quedaba pegado al borde de la última tarjeta, como si se hubiera caído de
   ella. Necesita aire propio y una línea que cierre la lista. */
#verTodosRecuerdos{
  margin-top:clamp(22px,3.5vh,34px);
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--linea);
  text-align:center;
}
#verTodosRecuerdos .boton{ min-width:min(280px, 82vw) }

/* Lo que no se puede perder de vista al cerrar la página. */
.semblanza strong{ font-weight:600; color:var(--tinta) }

/* Recuadro de subida cuando el navegador no puede dibujar el video */
.subir-item.sin-vista{
  background:linear-gradient(160deg, var(--papel-2), var(--papel));
  display:flex; align-items:center; justify-content:center;
}
.subir-item.sin-vista video{ display:none }
.subir-item.sin-vista .insignia-play{ opacity:.85 }
.sin-vista-nombre{
  position:absolute; left:8px; right:8px; bottom:8px;
  font-size:.66rem; color:var(--tinta-suave); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Video usado como miniatura dentro de la galería */
.celda-medio{ width:100%; height:auto; display:block; background:var(--papel-2) }


/* ---------- El jardín del pie ----------
   Cierra la página con lo mismo que la abre. Ancho completo, como el de
   arriba, y con su propia línea debajo. */
.jardin-pie-caja{ position:relative; width:100%; margin:clamp(30px,6vh,58px) 0 0 }
#jardinPie2{
  display:block; width:100%;
  height:clamp(170px,24vh,250px);
  overflow:visible;
}
.jardin-pie-nota{
  max-width:50ch; margin:clamp(2px,.8vh,10px) auto 0;
  padding:0 22px;
  text-align:center; font-size:.95rem; color:var(--tinta-suave);
  text-wrap:balance;
}
/* Las flores de aquí abajo usan EXACTAMENTE las mismas reglas que las de
   arriba: cada regla del jardín nombra los dos canteros. Antes sólo las
   nombraba a ellas, así que aquí los pétalos se quedaban sin color y salían
   negros. Un jardín, dibujado en dos sitios. */