/* ============================================================
   LA SOLEDAD Y EL SOL — sistema de diseño (portado del prototipo v4)
   · La portada y las pantallas de entrada tienen luz fija de mañana;
     puertas adentro, la luz vive la hora del día del visitante
     (mañana / tarde / noche) sobre fondos gris-marfil.
   · Los lugares son postales ilustradas con gama propia, y cada
     sección tiene su escena que acompaña la hora.
   ============================================================ */

:root{
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --radio:26px;
  --radio-ch:20px;
  --transicion-luz: background-color .8s ease, color .8s ease, box-shadow .8s ease, border-color .8s ease;
  /* cuánto sube la cajita de escritura sobre el fondo (para quedar sobre la barra de abajo).
     La lista de mensajes reserva este mismo alto + un respiro, así el último mensaje nunca
     queda tapado por la cajita. Los dos derivan de acá: cambiar una vez, quedan atados. */
  --charla-caja-sube:66px;
}

/* ---------- La luz de la mañana ---------- */
html[data-luz="manana"]{
  --fondo:#F1F0EB;
  --fondo-suave:#EAE8E1;
  --velo:#E2DFD6;
  --tarjeta:#FFFFFF;
  --tinta:#4A3B30;
  --tinta-suave:#8D7767;
  --tinta-tenue:#A99F92;
  --terracota:#BE7A61;
  --terracota-fuerte:#A9614A;
  --rosa:#EDCDC0;
  --rosa-suave:#F6E4DB;
  --salvia:#87987A;
  --salvia-suave:#E7E9E0;
  --celeste:#9FB4C2;
  --celeste-suave:#E4EAEE;
  --miel:#C99A57;
  --miel-suave:#F3E7CB;
  --lavanda:#A292B4;
  --lavanda-suave:#EAE6EF;
  --sol:#E9B87A;
  --sol-brillo:#F5D9AC;
  --sol-burbuja:#E9B87A;
  --sombra:0 10px 30px rgba(115,105,90,.16);
  --sombra-chica:0 4px 14px rgba(115,105,90,.12);
  --linea:#E6E4DD;
  --cielo1:#FBEFDE; --cielo2:#F6DFC7; --mar:#C9D8DE;
}

/* ---------- La luz de la tarde ---------- */
html[data-luz="tarde"]{
  --fondo:#F8E9D4;
  --fondo-suave:#F3DDBF;
  --velo:#EED2AE;
  --tarjeta:#FFFAF0;
  --tinta:#4C382B;
  --tinta-suave:#93755E;
  --tinta-tenue:#BC9D83;
  --terracota:#BC6E4F;
  --terracota-fuerte:#A55839;
  --rosa:#EFC5AE;
  --rosa-suave:#F8E2D2;
  --salvia:#8A9573;
  --salvia-suave:#E6E5D2;
  --celeste:#A9B2B9;
  --celeste-suave:#E7E7E3;
  --miel:#C08E44;
  --miel-suave:#F3DFB8;
  --lavanda:#A796A9;
  --lavanda-suave:#EBE0DF;
  --sol:#E29A56;
  --sol-brillo:#F2C88E;
  --sol-burbuja:#E29A56;
  --sombra:0 10px 30px rgba(170,110,60,.18);
  --sombra-chica:0 4px 14px rgba(170,110,60,.15);
  --linea:#EBD5B4;
  --cielo1:#F9E3BF; --cielo2:#F2C99B; --mar:#C4C9C4;
}

/* ---------- La luz de la noche ---------- */
html[data-luz="noche"]{
  --fondo:#2E2925;
  --fondo-suave:#282320;
  --velo:#221E1B;
  --tarjeta:#3A332D;
  --tinta:#F2E7D9;
  --tinta-suave:#C4B09C;
  --tinta-tenue:#8F7D6B;
  --terracota:#D89578;
  --terracota-fuerte:#E3A98D;
  --rosa:#C79A8B;
  --rosa-suave:#4A3C34;
  --salvia:#9FB08F;
  --salvia-suave:#3C3F33;
  --celeste:#93A8B5;
  --celeste-suave:#333B41;
  --miel:#D9B370;
  --miel-suave:#42392A;
  --lavanda:#B3A4C4;
  --lavanda-suave:#3B3640;
  --sol:#E9B87A;
  --sol-brillo:#8A6B42;
  --sol-burbuja:#9DB8D4;
  --sombra:0 12px 34px rgba(0,0,0,.4);
  --sombra-chica:0 4px 14px rgba(0,0,0,.35);
  --linea:#4A4138;
  --cielo1:#3A3630; --cielo2:#2E2C2A; --mar:#3D4448;
}

/* ---------- La mesa del Taller (rompecabezas · El 15 · Sumas) ----------
   El fondo del tablero VIVE LA HORA como el resto de la casa (pedido de
   Christian 22/7 noche). Solo el fondo: las piezas no se tocan.
   De noche la mesa se pone oscura PERO su contorno se sigue viendo — si no,
   se confundiría con el fondo de la página. Y queda más oscura que las
   fichas (que usan --tarjeta), así las fichas de El 15 nunca se pierden. */
html[data-luz="manana"]{
  --tll-mesa:#F2E8D8; --tll-mesa-linea:#E0D3BD; --tll-hueco:#EADDC8;
  --tll-mesa-sombra:inset 0 1px 6px rgba(90,70,54,.07);
}
html[data-luz="tarde"]{
  --tll-mesa:#F0DCBB; --tll-mesa-linea:#D7BB8F; --tll-hueco:#E7D2AC;
  --tll-mesa-sombra:inset 0 1px 6px rgba(140,95,45,.10);
}
html[data-luz="noche"]{
  --tll-mesa:#262220; --tll-mesa-linea:#6F5E4A; --tll-hueco:#332D28;
  --tll-mesa-sombra:inset 0 2px 12px rgba(0,0,0,.34), 0 0 0 1px rgba(233,184,122,.07);
}

*{margin:0;padding:0;box-sizing:border-box}

html{font-size:17px}

body{
  font-family:var(--sans);
  background:var(--fondo);
  color:var(--tinta);
  line-height:1.55;
  transition:var(--transicion-luz);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* halo de luz que acompaña el momento del día (solo puertas adentro) */
body.con-halo::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 120% 60% at 50% -10%, var(--sol-brillo) 0%, transparent 55%);
  opacity:.35;
  transition:opacity .8s ease;
  z-index:0;
}
html[data-luz="noche"] body.con-halo::before{opacity:.18}

/* durante el amanecer de entrada, los cambios de luz son bien graduales */
html.luz-lenta{--transicion-luz: background-color 2.5s ease, color 2.5s ease, box-shadow 2.5s ease, border-color 2.5s ease}

/* ============ etapas: recién llegada / en casa ============ */
html[data-modo="nuevo"] .solo-encasa{display:none !important}
html[data-modo="encasa"] .solo-nuevo{display:none !important}

/* la invitación de Sol: un globito suave junto a la burbuja */
.globito{
  position:fixed; right:88px; bottom:96px; z-index:51;
  max-width:250px;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:18px 18px 4px 18px;
  padding:12px 15px;
  box-shadow:var(--sombra);
  font-size:.9rem; line-height:1.45; color:var(--tinta);
  display:flex; align-items:flex-start; gap:9px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease, var(--transicion-luz);
  cursor:pointer;
}
.globito.visible{opacity:1; transform:none; pointer-events:auto}
.globito .solcito{width:22px; height:22px; flex:none; margin-top:2px}
@keyframes latir{0%,100%{transform:scale(1)} 50%{transform:scale(1.1)}}

/* micro-pregunta del apodo, bajo el saludo */
.apodo-link{margin-top:6px; font-size:.85rem}
.apodo-link a{color:var(--terracota); font-weight:700; text-decoration:none}

/* ============ la barra de arriba (parte del diseño) ============ */
.barra-arriba{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 8px; padding:7px 12px;
  padding-top:calc(7px + env(safe-area-inset-top));
  font-size:.68rem; letter-spacing:.04em;
  color:var(--tinta-suave);
  background:color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.barra-arriba .grupo{display:flex; align-items:center; gap:4px}
.barra-arriba a, .barra-arriba button{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  border:1px solid transparent; background:transparent; color:var(--tinta-suave);
  padding:4px 8px; border-radius:99px; cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:var(--transicion-luz);
}
.barra-arriba a.activo, .barra-arriba .luces button.activo{
  background:var(--tarjeta); color:var(--terracota);
  border-color:var(--linea); box-shadow:var(--sombra-chica);
}
.barra-arriba svg{width:16px; height:16px; display:block}
.barra-arriba .luces button{padding:5px 7px}

/* ============ estructura de pantallas ============ */
.pantalla{
  display:block;
  position:relative; z-index:1;
  min-height:100vh;
  min-height:100dvh; /* el alto VIVO del iPad/teléfono (la barra del navegador respira) */
  padding-top:var(--alto-barra, 44px); /* espacio de la barra de arriba, medido en vivo */
}
/* ⛔ Los SUPERPUESTOS van en la lista de excluidos (31/7): la entrada los
   forzaba visibles medio segundo encima de todo — el «botón marrón» que cazó
   Christian era el volver del reproductor apareciendo con la pantalla. Todo
   panel que viva tapado (velo, visor, ventanita) entra acá al nacer. */
.pantalla > *:not(.sol-flotante):not(.barra-inferior):not(.globito):not(.panel-charlas):not(.velo-charlas):not(.velo-voz):not(.reproductor):not(.cancionero):not(.velo-cancionero):not(.velo-play):not(.plz-capa):not(.gal-capa):not(.vnt-velo):not(.vnt-caja):not(.faro-conf):not(.faro-conf-velo):not(.vtn-visor):not(.vtn-lamina){animation:aparecer .5s ease}
@keyframes aparecer{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.columna{
  max-width:520px;
  margin:0 auto;
  padding:0 22px 40px;
}

/* ================================================================
   PORTADA — luz fija, siempre clara
   ================================================================ */
#portada{
  --fondo:#F1F0EB;
  --barra:#FBFBF9;
  --tarjeta:#FFFFFF;
  --tinta:#4A3B30;
  --tinta-suave:#8D7767;
  --tinta-tenue:#A99F92;
  --terracota:#BE7A61;
  --terracota-fuerte:#A9614A;
  --rosa-suave:#F6E4DB;
  --salvia:#87987A;
  --salvia-suave:#E7E9E0;
  --celeste:#9FB4C2;
  --celeste-suave:#E4EAEE;
  --miel:#C99A57;
  --miel-suave:#F3E7CB;
  --lavanda:#A292B4;
  --lavanda-suave:#EAE6EF;
  --sol:#E9B87A;
  --sol-brillo:#F5D9AC;
  --sombra:0 10px 30px rgba(115,105,90,.16);
  --sombra-chica:0 4px 14px rgba(115,105,90,.12);
  --linea:#E6E4DD;
  background:var(--fondo);
  color:var(--tinta);
}

.barra-marca{
  position:relative; z-index:5;
  background:var(--barra, var(--tarjeta));
  overflow:visible;                 /* deja que el sol grande cuelgue hacia abajo */
  transition:var(--transicion-luz);
}
/* la línea inferior va a TODO el ancho */
.barra-marca::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--linea); z-index:0;
  transition:var(--transicion-luz);
}
.barra-marca .adentro{
  position:relative; z-index:1;
  max-width:none; margin:0;         /* barra a todo el ancho: el logo pega a la izquierda */
  padding:8px 26px 8px 144px;       /* padding-left reserva el sol grande */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:60px;
}
/* el sol: imagen grande, contra la izquierda, sobresale por debajo de la barra */
.barra-marca .marca-sol{
  position:absolute; left:12px; top:4px;
  height:108px; width:auto; display:block; z-index:3;
  pointer-events:none;              /* no tapa los clics de abajo */
}
/* "tapa" del color de la barra: oculta la línea detrás del logo (sol + nombre)
   para que lo pisen y no se vea la línea atravesándolos */
.barra-marca .sol-tapa{
  position:absolute; left:6px; bottom:0;
  width:660px; height:3px;
  background:var(--barra, var(--tarjeta)); z-index:1;
  transition:var(--transicion-luz);
}
.barra-marca .marca{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit; min-width:0;
  transform:translateY(28px);       /* baja el nombre para centrarlo con el sol */
}
.barra-marca .marca-nombre{
  font-family:var(--serif); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:44px; line-height:1; white-space:nowrap; flex:none;
  color:var(--tinta);
}
.barra-marca .marca-nombre .yel{font-size:.6em; color:var(--terracota); letter-spacing:.03em}
.entrar-mini{
  flex:none;
  font-size:.82rem; font-weight:700; color:var(--terracota);
  text-decoration:none; white-space:nowrap;
  background:var(--tarjeta); border:1px solid var(--linea);
  padding:7px 14px; border-radius:99px;
  box-shadow:var(--sombra-chica);
}
/* --- tablet: el nombre en mayúsculas es ancho; se achica para no pisar el botón --- */
@media (min-width:760px) and (max-width:1000px){
  .barra-marca .marca-nombre{font-size:34px}
  .barra-marca .sol-tapa{width:520px}
}
/* --- mobile: el nombre sale de la barra (va al hero); queda sol + botón centrado --- */
@media (max-width:759px){
  .barra-marca::after{display:none}
  .barra-marca .adentro{padding:6px 14px 6px 88px; min-height:52px; justify-content:flex-end}
  .barra-marca .marca-sol{height:79px; left:5px; top:-3px}
  .barra-marca .sol-tapa{display:none}
  .barra-marca .marca{display:none}
  .entrar-mini{font-size:.75rem; padding:6px 12px}
  .hero-texto .hero-nombre{display:block}
}

.hero{
  position:relative;
  min-height:calc(100svh - 160px);
  background-image:url('../img/imagen3_v.png');
  background-size:cover;
  /* corrido hacia el faro: el teléfono muestra el faro completo
     y solo sacrifica el borde de pelo de la mujer de la izquierda */
  background-position:80% 50%;
  background-repeat:no-repeat;
  display:flex; flex-direction:column; justify-content:space-between;
}
.hero.sin-imagen{background-image:linear-gradient(180deg, #FBEFDE 0%, #F6DFC7 65%, #C9D8DE 100%)}

.hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:24%;
  background:linear-gradient(180deg, rgba(251,251,249,.9) 0%, rgba(251,251,249,.45) 55%, transparent 100%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(0deg, #F1F0EB 12%, rgba(241,240,235,.72) 55%, transparent 100%);
  pointer-events:none;
}

.hero-texto{
  position:relative; z-index:2;
  padding:22px 22px 0;
  text-align:center;
}
.hero-texto h1{
  display:flex; flex-direction:column; gap:1px;
  text-shadow:0 1px 10px rgba(255,255,255,.55);
}
.hero-texto .linea1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.15rem, 4.4vw, 1.5rem);
  letter-spacing:.02em;
  color:var(--tinta);
}
.hero-texto .linea2{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(2.05rem, 8.6vw, 3.1rem);
  line-height:1.08; letter-spacing:-.015em;
  color:var(--tinta);
}
.hero-texto .acento{
  position:relative; white-space:nowrap;
  color:var(--terracota-fuerte);
}
.hero-texto .trazo{
  position:absolute; left:-2%; bottom:-.22em;
  width:104%; height:.16em;
  color:var(--terracota);
  overflow:visible;
}
/* nombre del logo dentro del hero: SOLO en mobile (en desktop/tablet va en la barra) */
.hero-nombre{
  display:none;
  font-family:var(--serif); font-weight:600;
  text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(1.5rem, 7.2vw, 2.3rem); line-height:1.1;
  color:var(--tinta); text-align:center;
  margin:12px 0 42px; white-space:nowrap;
  text-shadow:0 1px 10px rgba(255,255,255,.55);
}
.hero-nombre .yel{font-size:.62em; color:var(--terracota-fuerte); font-style:normal}

.hero-pie{
  position:relative; z-index:2;
  padding:0 22px calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.hero-pie .bajada{
  color:var(--tinta-suave); font-size:.95rem; line-height:1.4;
  text-align:center; max-width:38ch;
  text-shadow:0 1px 10px rgba(241,240,235,.9);
}
.cta-principal{
  display:block; width:100%; max-width:420px;
  font-family:var(--sans); font-size:1.1rem; font-weight:800;
  color:#FFF9F2; text-align:center; text-decoration:none;
  background:linear-gradient(135deg, var(--terracota) 0%, var(--terracota-fuerte) 100%);
  border:none; border-radius:99px;
  padding:15px 20px;
  cursor:pointer;
  box-shadow:var(--sombra);
  transition:transform .15s ease, var(--transicion-luz);
}
.cta-principal:active{transform:scale(.98)}

.entrada-nota{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--tinta-suave); font-size:.8rem;
}
.entrada-nota .cuentas{display:flex; gap:6px}
/* cada redondelito es una puerta (un enlace), así que se le quita el subrayado
   y se le da un toque de vida al apretarlo */
.entrada-nota .cuenta{
  width:28px; height:28px; border-radius:50%;
  background:var(--tarjeta); border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.72rem; color:var(--tinta-suave);
  box-shadow:var(--sombra-chica);
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.entrada-nota a.cuenta:hover{border-color:var(--terracota); color:var(--terracota)}
.entrada-nota a.cuenta:active{transform:scale(.92)}

.promesas-franja{
  background:var(--fondo);
  padding:8px 22px 44px;
}
.promesas{
  display:grid; gap:12px;
  max-width:520px; margin:0 auto;
}
.promesa{
  display:flex; align-items:center; gap:13px;
  color:var(--tinta-suave); font-size:.95rem;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:18px;
  padding:12px 16px;
  box-shadow:var(--sombra-chica);
}
.promesa .icono{
  flex:none; width:38px; height:38px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.promesa:nth-child(1) .icono{background:var(--rosa-suave); color:var(--terracota)}
.promesa:nth-child(2) .icono{background:var(--salvia-suave); color:var(--salvia)}
.promesa:nth-child(3) .icono{background:var(--celeste-suave); color:var(--celeste)}
.promesa:nth-child(4) .icono{background:var(--miel-suave); color:var(--miel)}
.promesa:nth-child(5) .icono{background:var(--lavanda-suave); color:var(--lavanda)}
.promesa:nth-child(6) .icono{background:var(--rosa-suave); color:var(--terracota)}
.promesa svg{width:20px; height:20px}

/* --- lámina ilustrada de las promesas (reemplaza las cajitas) --- */
.promesas-pic{display:block; max-width:960px; margin:0 auto}
.promesas-imagen{
  display:block; width:100%; height:auto;
  border-radius:var(--radio);
  /* efecto "flotante": sombra cálida en dos capas (difusa amplia +
     contacto corta, con spread negativo para mantenerla elegante) */
  box-shadow:
    0 26px 50px -18px rgba(115,105,90,.34),
    0 8px 20px -10px rgba(115,105,90,.20);
  transition:transform .4s ease, box-shadow .4s ease;
}
/* leve levante al pasar el cursor (solo con mouse; en mobile queda fija) */
@media (hover:hover){
  .promesas-imagen:hover{
    transform:translateY(-7px);
    box-shadow:
      0 40px 66px -18px rgba(115,105,90,.40),
      0 14px 26px -10px rgba(115,105,90,.24);
  }
}

/* ================================================================
   FOOTER DEL HOME  (solo en la portada; minimalista, sobre marfil)
   Aire tras la última promesa → líñita dorada corta → enlaces +
   copyright centrado en el marroncito suave del sitio.
   ================================================================ */
.pie-home{
  background:var(--fondo);
  padding:0 22px calc(34px + env(safe-area-inset-bottom));
}
.pie-adentro{
  max-width:560px; margin:0 auto;
  padding-top:56px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.pie-linea{
  width:180px; height:2px; border-radius:2px;
  background:var(--sol); opacity:.65;
  margin-bottom:26px;
}
.pie-links{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:7px 12px;
  color:var(--tinta-suave); font-size:.85rem;
  margin-bottom:10px;
}
.pie-links a{color:var(--tinta-suave); text-decoration:none; font-weight:600; transition:color .2s ease}
.pie-links a:hover{color:var(--terracota)}
.pie-links span{color:var(--tinta-tenue)}
.pie-copy{color:var(--tinta-suave); font-size:.82rem; letter-spacing:.01em}

/* ================================================================
   PANTALLAS DE ENTRADA — crear tu lugar / entrar (luz fija de mañana)
   ================================================================ */
.entrada{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 22px calc(30px + env(safe-area-inset-bottom));
}
.entrada .marca-arriba{
  display:flex; align-items:center; gap:9px;
  padding:26px 0 8px;
  text-decoration:none; color:inherit;
}
.entrada .marca-arriba .solcito{width:34px; height:34px}
.entrada .marca-arriba .nombre{font-family:var(--serif); font-weight:600; font-size:1.05rem}

.tarjeta-entrada{
  width:100%; max-width:420px;
  margin-top:18px;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:26px 24px 24px;
}
.tarjeta-entrada.centrada{text-align:center}
.sobre-correo{width:96px; height:auto; display:block; margin:2px auto 12px; overflow:visible}
/* la puerta entreabierta de la pantalla que aparece al abrir el enlace del correo */
.puerta-abierta{width:104px; height:auto; display:block; margin:2px auto 12px; overflow:visible}

/* La aceptación de los términos, pegada al botón de entrar: chiquita y sin
   peso, pero legible (nada de tinta tenue, que queda en 2,3 de contraste y no
   se lee). Los dos enlaces se distinguen por el subrayado, no por el color:
   así la línea entera se lee como una nota y no como un cartel. */
/* La puerta de bienvenida va un poco más ancha que el resto de la entrada: con
   420 px el saludo y la línea de la aceptación se partían en dos renglones, y
   una frase cortada llama más la atención que una entera. En el teléfono manda
   el 100% de siempre, así que ahí no cambia nada. */
.tarjeta-puerta{max-width:476px}

.acepta-al-pasar{
  margin:14px auto 0;
  text-align:center; font-size:.78rem; line-height:1.45;
  /* un toque de tinta encima de la suave: sube el contraste de 4,23 a 4,82
     (medido en el sitio) sin que la línea pese. Esta frase tiene que poder
     leerse: es la que sostiene la aceptación. */
  color:color-mix(in srgb, var(--tinta) 15%, var(--tinta-suave));
}
.acepta-al-pasar a{
  color:inherit;
  text-decoration:underline; text-decoration-color:var(--tinta-tenue);
  text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.acepta-al-pasar a:hover{color:var(--terracota); text-decoration-color:var(--terracota)}

/* ---- El tilde que ve SOLO quien entra desde Europa (11/8) ----
   Nace oculto y lo muestra el navegador de esa persona; para el resto del mundo
   la puerta es la misma de siempre. El [hidden] explícito es regla de la casa:
   sin él, cualquier `display` de otra regla lo pisa y la casilla queda
   invisible pero puesta, comiéndose los toques de alrededor. */
.acepta-tilde[hidden]{display:none}
.acepta-tilde{
  display:flex; gap:9px; align-items:flex-start;
  max-width:36ch; margin:12px auto 0;
  text-align:left; font-size:.78rem; line-height:1.45;
  color:color-mix(in srgb, var(--tinta) 15%, var(--tinta-suave));
  cursor:pointer;
}
.acepta-tilde input{
  flex:0 0 auto; width:16px; height:16px; margin:2px 0 0;
  accent-color:var(--terracota); cursor:pointer;
}
.acepta-tilde a{
  color:inherit; text-decoration:underline;
  text-decoration-color:var(--tinta-tenue); text-underline-offset:3px;
}
.acepta-tilde a:hover{color:var(--terracota); text-decoration-color:var(--terracota)}
.acepta-falta{
  margin:12px auto 0; text-align:center; font-size:.8rem;
  color:var(--terracota);
}

/* ---- La ventanita de los documentos, dentro de la puerta ----
   Se abre acá mismo para que nadie se vaya de la puerta por tocar sin querer.
   La cruz vive PEGADA ARRIBA y no se mueve al deslizar el texto: la salida
   tiene que estar a la vista desde el primer momento. */
.legal-velo{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:color-mix(in srgb, var(--tinta) 38%, transparent);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s ease;
}
/* ⛔ igual que en la ventana de la memoria: sin esto, `display:flex` le gana al
   `hidden` y la capa queda invisible pero puesta, comiéndose todos los toques */
.legal-velo[hidden]{display:none}
.legal-velo.abierta{opacity:1}
.legal-hoja{
  position:relative;
  width:100%; max-width:620px; max-height:100%;
  display:flex; flex-direction:column;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra);
  transform:translateY(14px) scale(.985);
  transition:transform .28s ease;
}
.legal-velo.abierta .legal-hoja{transform:none}
.legal-cerrar{
  position:absolute; top:10px; right:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:8px 14px 8px 10px; border-radius:99px;
  border:1px solid var(--linea);
  background:color-mix(in srgb, var(--tarjeta) 92%, transparent);
  backdrop-filter:blur(6px);
  font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--tinta);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.legal-cerrar svg{width:15px; height:15px}
.legal-cerrar:hover{color:var(--terracota); border-color:var(--terracota)}
.legal-cuerpo{padding:8px 4px 18px; overflow-y:auto; -webkit-overflow-scrolling:touch}
/* el texto llega con su propia hoja: acá solo se le quita el aire de página
   entera, para que entre en la ventanita */
.legal-cuerpo .hoja-legal{padding-top:6px}
.legal-cuerpo .columna{max-width:none}
.legal-esperando{padding:40px 20px; text-align:center; color:var(--tinta-suave)}
@media (max-width:620px){
  .legal-velo{padding:8px}
  .legal-hoja{max-height:calc(100% - env(safe-area-inset-bottom))}
}
.tarjeta-entrada h1{
  font-family:var(--serif); font-weight:600;
  font-size:1.55rem; line-height:1.25;
}
.tarjeta-entrada .bajo-titulo{
  margin-top:6px; color:var(--tinta-suave); font-size:.93rem;
}

.campo{margin-top:16px}
.campo label{
  display:block; font-size:.85rem; font-weight:800;
  color:var(--tinta-suave); margin-bottom:6px;
}
.campo input{
  width:100%;
  font-family:var(--sans); font-size:1rem; color:var(--tinta);
  background:var(--fondo);
  border:1.5px solid var(--linea);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s ease, var(--transicion-luz);
}
.campo input:focus{border-color:var(--terracota)}
.campo .pista-campo{margin-top:5px; font-size:.78rem; color:var(--tinta-tenue)}

.campo-clave{position:relative}
.campo-clave input{padding-right:74px}
.ver-clave{
  position:absolute; right:8px; bottom:7px;
  font-family:var(--sans); font-size:.75rem; font-weight:800;
  color:var(--terracota); background:transparent;
  border:none; cursor:pointer; padding:6px 8px;
}

.boton-entrada{
  display:block; width:100%;
  margin-top:22px;
  font-family:var(--sans); font-size:1.05rem; font-weight:800;
  color:#FFF9F2; text-align:center; text-decoration:none;
  background:linear-gradient(135deg, var(--terracota) 0%, var(--terracota-fuerte) 100%);
  border:none; border-radius:99px;
  padding:14px 20px;
  cursor:pointer;
  box-shadow:var(--sombra-chica);
  transition:transform .15s ease;
}
.boton-entrada:active{transform:scale(.98)}

.alerta{
  margin-top:16px;
  background:var(--rosa-suave);
  color:var(--terracota-fuerte);
  border:1px solid color-mix(in srgb, var(--terracota) 30%, transparent);
  border-radius:14px;
  padding:11px 14px;
  font-size:.9rem; line-height:1.45;
}
.alerta.suave{
  background:var(--salvia-suave);
  color:var(--tinta);
  border-color:color-mix(in srgb, var(--salvia) 35%, transparent);
}

.recordarme{
  margin-top:14px;
  display:flex; align-items:center; gap:9px;
  font-size:.9rem; color:var(--tinta-suave);
}
.recordarme input{width:19px; height:19px; accent-color:var(--terracota)}

.cambio-entrada{
  margin-top:18px; text-align:center;
  font-size:.9rem; color:var(--tinta-suave);
}
.cambio-entrada a{color:var(--terracota); font-weight:800; text-decoration:none}

/* botones de cuentas (solo se muestran si el proveedor está configurado) */
.oauth-botones{margin-top:18px; display:grid; gap:10px}
.oauth-boton{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.95rem; font-weight:700;
  color:var(--tinta); text-decoration:none;
  background:var(--fondo);
  border:1.5px solid var(--linea);
  border-radius:99px;
  padding:11px 16px;
  transition:transform .15s ease;
}
.oauth-boton:active{transform:scale(.98)}
.oauth-boton svg{width:19px; height:19px; flex:none}
.o-linea{
  margin-top:20px;
  display:flex; align-items:center; gap:12px;
  color:var(--tinta-tenue); font-size:.8rem;
}
.o-linea::before, .o-linea::after{
  content:""; flex:1; height:1px; background:var(--linea);
}

/* ================================================================
   TU CASA
   ================================================================ */
#casa .columna{padding-bottom:110px}

.saludo{padding-top:26px; position:relative}
.saludo .fecha{
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-tenue); font-weight:700;
}
.saludo h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem, 6.5vw, 2.2rem);
  margin-top:6px; display:flex; align-items:center; gap:10px;
}
.saludo h1 .solcito{width:30px; height:30px; flex:none}
.saludo .casa-de{
  margin-top:4px; color:var(--tinta-suave); font-size:.98rem;
}

/* --- la vista al mar: te recibe al entrar y acompaña la hora --- */
.vista-mar{
  margin-top:18px;
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  border:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.vista-mar svg{display:block; width:100%; height:auto}

.vista-mar .s-sol{transition:transform 1.2s ease, opacity .9s ease}
html[data-luz="tarde"] .vista-mar .s-sol{transform:translate(28px, 52px)}
html[data-luz="noche"] .vista-mar .s-sol{opacity:0; transform:translate(55px, 110px)}

.vista-mar .s-luna{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .vista-mar .s-luna{opacity:1}

.vista-mar .s-estrellas{opacity:0; transition:opacity 1.2s ease}
html[data-luz="noche"] .vista-mar .s-estrellas{opacity:.9}

.vista-mar .s-haz{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .vista-mar .s-haz{opacity:.55}

.vista-mar .s-gaviotas{transition:opacity .8s ease}
html[data-luz="noche"] .vista-mar .s-gaviotas{opacity:0}

.vista-mar .s-farol{transition:fill .8s ease}

.seccion-titulo{
  margin-top:34px;
  display:flex; align-items:baseline; gap:10px;
}
.seccion-titulo h2{
  font-family:var(--serif); font-weight:600; font-size:1.45rem;
}
.seccion-titulo .sub{color:var(--tinta-tenue); font-size:.85rem}
.seccion-titulo.con-icono{align-items:center}
.icono-seccion{width:32px; height:32px; flex:none}

/* --- Tu Mesa: lo que espera hoy --- */
.mesa{margin-top:16px; display:grid; gap:14px}

.pieza{
  background:var(--tarjeta);
  border-radius:var(--radio);
  padding:20px;
  box-shadow:var(--sombra-chica);
  border:1px solid var(--linea);
  transition:var(--transicion-luz), transform .15s ease;
  cursor:pointer;
  display:block; text-decoration:none; color:inherit;
}
.pieza:active{transform:scale(.985)}
.pieza .etiqueta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
  margin-bottom:10px;
}
.pieza h3{
  font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.3;
}
.pieza p{margin-top:7px; color:var(--tinta-suave); font-size:.95rem}
.pieza .accion{
  margin-top:12px; font-weight:800; font-size:.9rem; color:var(--terracota);
}

/* etiquetas de color reutilizables */
.et-rosa{background:var(--rosa-suave); color:var(--terracota)}
.et-salvia{background:var(--salvia-suave); color:var(--salvia)}
.et-celeste{background:var(--celeste-suave); color:var(--celeste)}
.et-sol{background:color-mix(in srgb, var(--sol) 26%, var(--tarjeta)); color:var(--terracota-fuerte)}

/* --- Tu sol personal: la tarjeta protagonista de Tu Mesa --- */
.pieza.tu-sol{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--sol) 15%, var(--tarjeta)) 0%, var(--tarjeta) 70%);
}
.pieza.tu-sol .sol-arte{flex:none; width:86px; height:86px}
.pieza.tu-sol h3{font-size:1.28rem}
@keyframes titilar{0%,100%{opacity:1} 50%{opacity:.4}}
html[data-modo="nuevo"] .accion-titila{animation:titilar 2.6s ease-in-out infinite}

.pieza.novela .etiqueta{background:var(--rosa-suave); color:var(--terracota)}
.pieza.novela{position:relative; overflow:hidden; display:flex; flex-direction:column; padding-bottom:0}
.pieza.novela::after{
  content:""; position:absolute; right:-30px; top:-30px;
  width:110px; height:110px; border-radius:50%;
  background:var(--rosa-suave); opacity:.55; z-index:0;
  transition:var(--transicion-luz);
}
.pieza.novela > *{position:relative; z-index:1}

/* La pilita de libros (11/8): era la única tarjeta sin gráfica. Rehecha el
   mismo día al estilo de las láminas de La Ventana (pedido de Christian al
   ver la primera versión de bloques llenos): trazo fino a mano, las líneas
   con colorcitos de la gama (oscurecidos con la tinta, como el trazo de las
   viñetas), y una FRANJA con degradé rosado al pie de la tarjeta para que
   el dibujo no apoye directo sobre el blanco. UN solo detalle animado a
   propósito —la cinta señaladora rojiza que se mece—: las vecinas ya traen
   lo suyo. El alto es fijo y el dibujo se centra (meet): así la franja
   acompaña cualquier ancho de tarjeta sin agigantar los libros. */
.pieza.novela .accion{margin-bottom:12px}
.pieza.novela .nov-libros{
  display:block; width:calc(100% + 40px); height:164px;
  margin:auto -20px 0;             /* al pie, sangrando hasta los bordes */
  padding:26px 22px 12px;
  color:color-mix(in srgb, var(--tinta) 80%, var(--terracota));
  /* ⛔ SIN CORTE con la tarjeta (pedido de Christian, 11/8): arranca
     transparente —el blanco de la propia tarjeta— y se funde bajando
     hacia el colorcito más subido. Nada de rectángulo. */
  background:linear-gradient(180deg, transparent 0%, var(--rosa-suave) 52%, color-mix(in srgb, var(--rosa) 55%, var(--tarjeta)) 100%);
  transition:var(--transicion-luz);
}
.nov-libros *{vector-effect:non-scaling-stroke}
.nov-libros .nl-l1{stroke:color-mix(in srgb, var(--terracota) 72%, var(--tinta))}
.nov-libros .nl-l2{stroke:color-mix(in srgb, var(--salvia) 72%, var(--tinta))}
.nov-libros .nl-l3{stroke:color-mix(in srgb, var(--lavanda) 72%, var(--tinta))}
.nov-libros .nl-l4{stroke:color-mix(in srgb, var(--miel) 72%, var(--tinta))}
.nov-libros .nl-cinta{
  fill:var(--terracota-fuerte); stroke:none;
  transform-box:fill-box; transform-origin:50% 4%;
  animation:nl-mecer 3.6s ease-in-out infinite;
}
html[data-luz="noche"] .pieza.novela .nov-libros{filter:saturate(.92) brightness(.96)}
@keyframes nl-mecer{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(8deg)}}
@media (prefers-reduced-motion: reduce){
  .nov-libros .nl-cinta{animation:none}
}

.pieza.carta{
  background:linear-gradient(150deg, var(--rosa-suave) 0%, var(--tarjeta) 70%);
}
.pieza.carta .etiqueta{background:var(--tarjeta); color:var(--terracota)}
.pieza.carta .sello{
  float:right; width:44px; height:44px; margin-left:10px;
}

.pieza.pregunta .etiqueta{background:var(--salvia-suave); color:var(--salvia)}
.pieza.pregunta h3{font-style:italic}

/* «HOY APRENDO…» — la tarjeta del numero del dia (29/7).
   La tapa es el MISMO telon de la pantalla grande, en chiquito y tranquilo:
   la persona ve en la mesa el color del dia antes de entrar. Si el navegador
   no puede dibujar, queda la tarjeta comun y nadie se entera. */
/* LO NUEVO DE LA CASA, con el telon de tapa (29/7).
   La animacion nacio para «Hoy aprendo…»; esa seccion se descarto pero el
   telon gusto, asi que se queda acompañando lo que de verdad hace volver:
   que cambio hoy para esta persona. Los iconos de los lugares se montan
   SOBRE la animacion, en su medallon, para que se lean sobre cualquier gama. */
.pieza.novedad-mayor{position:relative; overflow:hidden; padding-top:0; border:none}
.pieza.novedad-mayor .alm-tapa{
  display:block; width:calc(100% + 40px); height:126px; margin:0 -20px 0;
}
.pieza.novedad-mayor .fichas{
  display:flex; gap:8px; margin:-30px 0 12px; position:relative; z-index:1;
}
.pieza.novedad-mayor .fichas .ficha-una{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--tarjeta); box-shadow:var(--sombra-chica);
}
.pieza.novedad-mayor .fichas .ficha-una svg{width:23px; height:23px}
.pieza.novedad-mayor h3{font-size:1.22rem; margin-top:14px}
.pieza.novedad-mayor.agrupada{cursor:default}

.pieza.plaza-aviso{display:flex; align-items:center; gap:14px; padding:16px 18px}
/* La fichita del aviso: el dibujo SUELTO, con el color propio del lugar.
   ⚠ Antes iba dentro de un cuadrado gris de 44 px — Christian, 27/7: «no en
   el cuadradito ese que queda horrible, sino con colorcito… se tienen que
   distinguir uno de otro. Así son como nada».
   ⛔ padding y borde EN CERO: hay otra regla `.ficha` más abajo, de un
   componente distinto, que trae padding:12px 13px 11px y borde de 1,5px.
   Esta no los pisaba, y del cuadrado quedaban 16,4 px de ancho por 24 de
   alto: el dibujo entraba ESTIRADO. El Faro sí los reseteaba — esa fue la
   pista. Se notaba poco con una sola tarjeta; con seis en fila, saltó. */
.pieza.plaza-aviso .ficha{
  flex:none; display:flex; align-items:center; gap:5px;
  padding:0; border:0; background:none;
  transition:var(--transicion-luz);
}
.pieza.plaza-aviso .ficha svg{width:27px; height:27px}
/* ⛔ sin `color` acá: `.pieza.plaza-aviso .ficha-una` son TRES clases y le
   ganaba a `.ficha-una.lug-plaza`, que son dos — los siete íconos salían
   terracota. El color por defecto vive abajo, con una sola clase, para que
   el del lugar siempre lo pise. */
.pieza.plaza-aviso .ficha-una{display:flex}
.ficha-una{color:var(--terracota)}

/* Un color por lugar, para que se distingan de un vistazo.
   ⛔ Christian, 29/7: «antes estaban coloridos, bellos, ahora se volvieron
   oscuros, sin vida». La primera versión oscurecía cada matiz por su cuenta
   para ganar contraste, y La Plaza, El Faro y La Ventana terminaban grises.
   Ahora los íconos usan LA MISMA paleta viva de las palabras (.nov-lugar):
   siete matices repartidos parejo por el círculo, medidos a 4,5 sobre el
   fondo de cada luz — de sobra para la vara de 2,4 del dibujo chico. */
.ficha-una.lug-sillon  {color:#C35241}
.ficha-una.lug-faro    {color:#8B7223}
.ficha-una.lug-taller  {color:#428235}
.ficha-una.lug-cuaderno{color:#378172}
.ficha-una.lug-ventana {color:#4379B6}
.ficha-una.lug-galeria {color:#8963B6}
.ficha-una.lug-plaza   {color:#BA4F8C}
.ficha-una.lug-habitacion{color:#874E2E}
html[data-luz="tarde"] .ficha-una.lug-sillon  {color:#C24F3D}
html[data-luz="tarde"] .ficha-una.lug-faro    {color:#876F22}
html[data-luz="tarde"] .ficha-una.lug-taller  {color:#428235}
html[data-luz="tarde"] .ficha-una.lug-cuaderno{color:#367D6F}
html[data-luz="tarde"] .ficha-una.lug-ventana {color:#4174AF}
html[data-luz="tarde"] .ficha-una.lug-galeria {color:#875FB4}
html[data-luz="tarde"] .ficha-una.lug-plaza   {color:#B94B89}
html[data-luz="tarde"] .ficha-una.lug-habitacion{color:#834B2C}
html[data-luz="noche"] .ficha-una.lug-sillon  {color:#D78B7F}
html[data-luz="noche"] .ficha-una.lug-faro    {color:#BC9B2F}
html[data-luz="noche"] .ficha-una.lug-taller  {color:#5AB148}
html[data-luz="noche"] .ficha-una.lug-cuaderno{color:#4BAF9B}
html[data-luz="noche"] .ficha-una.lug-ventana {color:#79A0CD}
html[data-luz="noche"] .ficha-una.lug-galeria {color:#AE93CC}
html[data-luz="noche"] .ficha-una.lug-plaza   {color:#D086B0}
html[data-luz="noche"] .ficha-una.lug-habitacion{color:#F0854A}
/* cuando se juntan varios, un poco más chicos para que la fila no crezca */
.pieza.plaza-aviso .ficha-una:not(:only-child) svg{width:22px; height:22px}

/* La tarjeta que agrupa no lleva a ningún lado: lo que se toca son los
   nombres de adentro. Sin cursor de mano, para no prometer un clic que no es. */
.pieza.plaza-aviso.agrupada{cursor:default}

/* Los nombres de lugar dentro del texto: enlace de verdad, pero SIN el link
   azul subrayado de siempre (pedido de Christian). Color propio + negrita
   fuerte + un «»» del mismo color que dice «esto se toca».
   ⛔ Christian, 29/7: probamos cápsulas-botón y las rechazó («botones
   gigantes que estiran todas las tarjetas»). Lo que pidió: «en lugar del
   subrayado, que vaya >> y en color y un poco más bold». El subrayado queda
   solo para el hover.
   ⚠ Estos colores NO son los de los íconos: para TEXTO la vara es 4,5, no la
   de 2,4 del dibujo chico. Medidos uno por uno sobre el fondo de cada luz. */
.nov-lugar{
  text-decoration:none; font-weight:800;
  color:var(--tinta); border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease, var(--transicion-luz);
}
/* ⛔ el «»» va ANTES de la palabra (Christian, segunda vuelta del 29/7: «es
   como una flechita antes de la palabra remarcada» — señala, no cierra).
   El espacio es duro (\00a0) para que la flechita nunca quede sola al final
   de un renglón, separada de su palabra. */
.nov-lugar::before{content:'\00bb\00a0'}
.nov-lugar:hover{border-bottom-color:currentColor}
.nov-lugar:focus-visible{outline:2px solid currentColor; outline-offset:2px; border-radius:3px}

/* ⚠ SEGUNDA VUELTA (Christian, 27/7): «entre la plaza y el faro, a simple
   vista aparecen casi el mismo color».

   La primera versión oscurecía el color de cada lugar hasta llegar a 4,5, y
   ahí está la trampa: al forzar contraste sobre un fondo claro, TODOS los
   tonos cálidos convergen al mismo marrón. Cuatro de los siete terminaban
   siendo el mismo color con otro nombre.

   Ahora los siete matices se reparten PAREJO por el círculo cromático (uno
   cada ~51°) y la luminosidad se ajusta después, hasta 4,5, sin tocar el
   matiz. La distancia entre el par más parecido pasó de 43 a 62.

   ⚠ Tu Cuaderno quedó en verde azulado: era el único hueco libre. Con un
   marrón —que sería lo suyo— vuelve a confundirse con El Sillón y El Faro.
   Es una cosa o la otra. */
.nov-lugar.lug-sillon  {color:#C35241}   /* rojo      */
.nov-lugar.lug-faro    {color:#8B7223}   /* dorado    */
.nov-lugar.lug-taller  {color:#428235}   /* verde     */
.nov-lugar.lug-cuaderno{color:#378172}   /* verdeazul */
.nov-lugar.lug-ventana {color:#4379B6}   /* azul      */
.nov-lugar.lug-galeria {color:#8963B6}   /* violeta   */
.nov-lugar.lug-plaza   {color:#BA4F8C}   /* magenta   */
/* ⚠ EL OCTAVO LUGAR (Christian, 4/8). La Habitación Secreta nació después de
   que se repartieran los siete matices, y hasta hoy caía en el color de
   repuesto: acá salía en tinta común —o sea, no parecía un lugar— y en las
   sugerencias salía en el mismo dorado que El Faro.
   Christian eligió el ÁMBAR, el fuego del cuarto, sabiendo que es el vecino
   del dorado del Faro y del naranja de la charla: el sector cálido ya estaba
   lleno y no quedaba hueco holgado. Así que la separación se ganó por el otro
   lado, bajando el tono a 22° (entre el rojo de El Sillón y el naranja de la
   charla) y oscureciéndolo hasta un ámbar de brasa. Medido en Lab contra los
   ocho: 25 de día, 24 de tarde, 27 de noche — la misma vara que el par más
   parecido que ya convivía (25 de día, 16 de noche). */
.nov-lugar.lug-habitacion{color:#874E2E}  /* ámbar de brasa */

html[data-luz="tarde"] .nov-lugar.lug-sillon  {color:#C24F3D}
html[data-luz="tarde"] .nov-lugar.lug-faro    {color:#876F22}
html[data-luz="tarde"] .nov-lugar.lug-taller  {color:#428235}
html[data-luz="tarde"] .nov-lugar.lug-cuaderno{color:#367D6F}
html[data-luz="tarde"] .nov-lugar.lug-ventana {color:#4174AF}
html[data-luz="tarde"] .nov-lugar.lug-galeria {color:#875FB4}
html[data-luz="tarde"] .nov-lugar.lug-plaza   {color:#B94B89}
html[data-luz="tarde"] .nov-lugar.lug-habitacion{color:#834B2C}

/* de noche el fondo es oscuro: los tonos se ACLARAN en vez de oscurecerse */
html[data-luz="noche"] .nov-lugar.lug-sillon  {color:#D78B7F}
html[data-luz="noche"] .nov-lugar.lug-faro    {color:#BC9B2F}
html[data-luz="noche"] .nov-lugar.lug-taller  {color:#5AB148}
html[data-luz="noche"] .nov-lugar.lug-cuaderno{color:#4BAF9B}
html[data-luz="noche"] .nov-lugar.lug-ventana {color:#79A0CD}
html[data-luz="noche"] .nov-lugar.lug-galeria {color:#AE93CC}
html[data-luz="noche"] .nov-lugar.lug-plaza   {color:#D086B0}
html[data-luz="noche"] .nov-lugar.lug-habitacion{color:#F0854A}
.pieza.plaza-aviso h3{font-size:1rem; font-family:var(--sans); font-weight:800}
.pieza.plaza-aviso p{margin-top:2px; font-size:.88rem}

/* --- Tus lugares: las puertas --- */
.lugares{
  margin-top:16px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.puerta{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:18px 16px 16px;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), transform .15s ease;
  cursor:pointer;
  text-decoration:none; color:inherit;
}
.puerta:active{transform:scale(.97)}
/* puerta con viñeta: el anticipo como una postal del lugar, arriba.
   Cada postal tiene su PROPIA gama de color — vistas juntas, cada
   puerta sorprende distinto. De noche se atenúan y prenden su luz. */
.puerta.con-vineta{padding:0; overflow:hidden; display:flex; flex-direction:column}
.puerta.con-vineta .vineta{display:block; width:100%; height:auto}
.puerta.con-vineta .texto-puerta{padding:12px 16px 16px}
html[data-luz="noche"] .vineta{filter:brightness(.85) saturate(.88)}

/* elementos de las viñetas y escenas que viven la hora */
.vineta .e-lampara, .vineta .v-noche{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .vineta .e-lampara, html[data-luz="noche"] .vineta .v-noche{opacity:1}
.vineta .v-dia{opacity:1; transition:opacity 1s ease}
html[data-luz="noche"] .vineta .v-dia{opacity:0}
.lugar-escena .e-dia{transition:opacity .8s ease}
html[data-luz="noche"] .lugar-escena .e-dia{opacity:0}

/* velos para escenas de gama fija (exteriores): la tarde las dora,
   la noche las oscurece — y sus luces se pintan por encima */
.lugar-escena .e-velo-tarde{opacity:0; transition:opacity 1s ease}
html[data-luz="tarde"] .lugar-escena .e-velo-tarde{opacity:.18}
.lugar-escena .e-velo-noche{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .lugar-escena .e-velo-noche{opacity:.52}
.puerta h3{font-family:var(--serif); font-weight:600; font-size:1.12rem}
.puerta p{margin-top:3px; color:var(--tinta-tenue); font-size:.82rem; line-height:1.4}

.puerta.faro{grid-column:1 / -1}

/* --- Cosas que te hacen bien: la invitación a lo que SIEMPRE está ---

   ⚠ PRIMERA VERSIÓN DESCARTADA (27/7). Iba sin caja, apoyada en el fondo,
   con el título afuera. Christian la vio en el sitio: «quedó muy fea,
   apartada… así suelta quedó horrible y corta mucho la visión hacia las
   zonas de la casa». Tenía razón: sin caja no se leía como una sección
   sino como un hueco, y partía la página en dos justo antes de las puertas.

   Ahora es UNA CAJA, igual que los avisos de arriba, con el título, el
   ícono y las frases adentro. Lo que la distingue no es el fondo —él pidió
   expresamente no tocarlo, porque vive la hora— sino el DORADO: reborde y
   tipografía. Es el mismo oro de Tu Novela, que ya tiene resuelto su valor
   para las tres luces. */
.destacadas{
  /* ⚠ Es el oro de Tu Novela apenas oscurecido (4% de día, 3% de tarde).
     Medido el 27/7: el original daba 4,20 y 4,36 sobre la tarjeta, y el
     nombre del lugar va dentro de la frase, en cuerpo chico — ahí la vara es
     4,5, no la de un título. Con este ajuste da 4,52 y 4,58 y sigue leyéndose
     dorado; oscurecerlo más lo volvía marrón. De noche ya daba 5,81. */
  --dest-oro:#947126;
  /* El corazón del título: burdeos elegido por Christian. De día y de tarde
     va tal cual, y con holgura (9,20 y 8,84 de contraste).
     ⚠ De noche cae a 1,35 contra el fondo oscuro —prácticamente invisible—,
     así que ahí se aclara conservando el matiz (336°) hasta 3,50. Ese valor
     nocturno es casi idéntico al que daba el rojo anterior: cualquier tono de
     este matiz que se lea sobre oscuro termina en el mismo rosa. */
  --dest-corazon:#92003A;
  margin-top:34px;
  background:var(--tarjeta);
  border:1.5px solid var(--dest-oro);
  border-radius:var(--radio);
  padding:16px 18px 4px;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
html[data-luz="tarde"] .destacadas{--dest-oro:#9B682B}
html[data-luz="noche"] .destacadas{--dest-oro:#D3AC5E; --dest-corazon:#FF2C80}

.destacadas-titulo{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.destacadas-titulo h2{
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  color:var(--dest-oro);
}
/* ⛔ sin opacity: bajarla le comía el contraste al texto más chico de la caja.
   .86 y no .82: a .82 quedaba demasiado chica al lado de un título que ya es
   más bajo que el de las otras secciones (1,28 contra 1,45). */
.destacadas-titulo .sub{color:var(--dest-oro); font-size:.86rem}
/* 30 px, como los íconos de las otras secciones: es un título de sector, no
   una viñeta más de las de abajo. El color lo trae el propio dibujo. */
.destacadas .icono-seccion{width:30px; height:30px}

/* Cada sugerencia, según lo dictó Christian (29/7): «el circulito pulsante y
   en colores más brillantes… van a izquierda y pulsantes. Un color por cada
   fila, nunca se repite. Después va el texto con color el lugar… y el ícono
   los tres a derecha alineados contra el margen derecho, también en colores».
   ⛔ SIN filetes divisorios: «no me gustan las líneas divisorias que parecen
   como renglones». El aire entre filas separa solo. */
.destacada{
  display:flex; align-items:center; gap:12px;
  padding:11px 2px;
  text-decoration:none; color:inherit;
  transition:var(--transicion-luz), opacity .15s ease;
}
.destacada:active{opacity:.55}

/* Un color VIVO por fila: el de su lugar (la misma paleta de las novedades).
   delDia() jamás invita dos veces al mismo lugar en el día, así que el color
   tampoco se repite. La charla con Sol no estaba en la paleta y estrena su
   naranja de sol (4,9 de contraste sobre la tarjeta de día; de noche se
   enciende como los demás). */
.destacada.lug-sillon  {--dl:#C35241}
.destacada.lug-faro    {--dl:#8B7223}
.destacada.lug-taller  {--dl:#428235}
.destacada.lug-cuaderno{--dl:#378172}
.destacada.lug-ventana {--dl:#4379B6}
.destacada.lug-galeria {--dl:#8963B6}
.destacada.lug-plaza   {--dl:#BA4F8C}
.destacada.lug-charla  {--dl:#A85E10}
.destacada.lug-habitacion{--dl:#874E2E}
html[data-luz="tarde"] .destacada.lug-sillon  {--dl:#C24F3D}
html[data-luz="tarde"] .destacada.lug-faro    {--dl:#876F22}
html[data-luz="tarde"] .destacada.lug-taller  {--dl:#428235}
html[data-luz="tarde"] .destacada.lug-cuaderno{--dl:#367D6F}
html[data-luz="tarde"] .destacada.lug-ventana {--dl:#4174AF}
html[data-luz="tarde"] .destacada.lug-galeria {--dl:#875FB4}
html[data-luz="tarde"] .destacada.lug-plaza   {--dl:#B94B89}
html[data-luz="tarde"] .destacada.lug-charla  {--dl:#A25A0F}
html[data-luz="tarde"] .destacada.lug-habitacion{--dl:#834B2C}
html[data-luz="noche"] .destacada.lug-sillon  {--dl:#D78B7F}
html[data-luz="noche"] .destacada.lug-faro    {--dl:#BC9B2F}
html[data-luz="noche"] .destacada.lug-taller  {--dl:#5AB148}
html[data-luz="noche"] .destacada.lug-cuaderno{--dl:#4BAF9B}
html[data-luz="noche"] .destacada.lug-ventana {--dl:#79A0CD}
html[data-luz="noche"] .destacada.lug-galeria {--dl:#AE93CC}
html[data-luz="noche"] .destacada.lug-plaza   {--dl:#D086B0}
html[data-luz="noche"] .destacada.lug-charla  {--dl:#E8A83C}
html[data-luz="noche"] .destacada.lug-habitacion{--dl:#F0854A}

/* el circulito: el brillo lo da el halo de su propio color (como el badge
   del resumidor que trajo Christian de ejemplo, pero con la paleta de acá) */
.dest-puntito{
  flex:none; width:11px; height:11px; border-radius:50%;
  background:var(--dl, var(--dest-oro));
  box-shadow:0 0 9px color-mix(in srgb, var(--dl, var(--dest-oro)) 80%, transparent),
             0 0 20px color-mix(in srgb, var(--dl, var(--dest-oro)) 38%, transparent);
  animation:dest-latido 2.2s ease-in-out infinite;
}
@keyframes dest-latido{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.28);
      box-shadow:0 0 13px color-mix(in srgb, var(--dl, var(--dest-oro)) 95%, transparent),
                 0 0 28px color-mix(in srgb, var(--dl, var(--dest-oro)) 55%, transparent)}
}
@media (prefers-reduced-motion: reduce){ .dest-puntito{animation:none} }

.dest-texto{flex:1; font-size:.94rem; line-height:1.5}
/* el nombre del lugar, del color de su fila; la fila entera es el enlace */
.dest-texto b{font-weight:700; color:var(--dl, var(--dest-oro))}
/* el dibujo del lugar, suelto contra el margen derecho, en su color */
.dest-ficha{flex:none; display:flex; color:var(--dl, var(--dest-oro))}
.dest-ficha svg{width:21px; height:21px}

/* --- El puntito de material nuevo ---
   Solo cuando la casa SUMÓ algo (una meditación, una lámina, temas nuevos):
   eso pasa poco, pero hasta hoy no se enteraba nadie. Se apaga al entrar.

   El aro del color de la tarjeta lo despega de la viñeta, que tiene gama
   propia en cada puerta y cambia con la hora: sin ese aro, sobre una viñeta
   clara y con luz de mañana, el punto se perdía. Y la amplitud es GENEROSA a
   propósito — a 11 px un latido calcado de una pieza grande se ve quieto (ya
   nos pasó con un solcito de esta misma medida). */
.puerta.con-vineta{position:relative}
.puerta-nuevo{
  position:absolute; top:10px; right:10px; z-index:2;
  width:11px; height:11px; border-radius:50%;
  /* ⛔ NO var(--sol): medido el 27/7 daba 1,81 contra el aro blanco, y para un
     dibujo chico la vara de la casa es 2,4. Es exactamente el error del halo
     del quinqué de Tu Novela, que con --sol se fundía con el marfil. El
     terracota fuerte da 4,67 y se sostiene en las tres luces. */
  background:var(--terracota-fuerte);
  box-shadow:0 0 0 2.5px var(--tarjeta), 0 0 9px 1px rgba(0,0,0,.14);
  animation:puerta-nuevo-late 2.4s ease-in-out infinite;
}
@keyframes puerta-nuevo-late{
  0%,100%{ opacity:.5; transform:scale(.82) }
  50%    { opacity:1;  transform:scale(1.18) }
}
@media (prefers-reduced-motion:reduce){
  .puerta-nuevo{animation:none; opacity:1}
}

/* --- Sol, siempre a mano --- */
.sol-flotante{
  position:fixed; right:18px; bottom:86px; z-index:50;
  width:60px; height:60px; border-radius:50%;
  border:none; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  box-shadow:0 6px 24px rgba(190,130,60,.5), 0 0 0 6px color-mix(in srgb, var(--sol) 18%, transparent);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, var(--transicion-luz);
}
.sol-flotante:active{transform:scale(.94)}
.sol-flotante svg{width:30px; height:30px; color:#7A4E26}
/* mientras la persona no charló, la burbuja titila suave, a toda hora */
html[data-modo="nuevo"] .sol-flotante{animation:latir 2.8s ease-in-out infinite}
/* de noche, la burbuja vira a la gama de los azules */
html[data-luz="noche"] .sol-flotante{
  background:radial-gradient(circle at 35% 30%, #CFDDEA, #8FA9C4);
  box-shadow:0 6px 24px rgba(60,90,130,.5), 0 0 0 6px rgba(143,169,196,.2);
}
html[data-luz="noche"] .sol-flotante svg{color:#2E3E52}

/* --- barra inferior --- */
.barra-inferior{
  position:fixed; left:0; right:0; bottom:0; z-index:49;
  display:flex; justify-content:space-around; align-items:center;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  background:var(--tarjeta);
  border-top:1px solid var(--linea);
  transition:var(--transicion-luz);
  /* ⚠ ACÁ NO VA NADA QUE LE DÉ CAPA DE COMPOSICIÓN PROPIA: ni `transform`, ni
     `backdrop-filter`, ni `will-change`, ni `filter`.
     El 23/7 se le puso `translateZ(0)` para que no se despegara en el iPad y
     salió peor. El 25/7 Christian mandó una tercera captura con la barra
     flotando a media pantalla y el jardín pasando por debajo: lo que quedaba
     dándole capa propia era el `backdrop-filter` del vidrio esmerilado, y en
     Safari esa capa se repinta tarde y queda clavada donde estaba.
     Se fue el esmerilado y el fondo pasó a ser opaco. Se pierde un efecto
     bonito y se gana una barra que no se despega: en una barra de navegación,
     eso vale más.
     Si el iPad volviera a portarse mal, el paso siguiente NO es otro parche a
     ciegas: es clavarla con la medida real de `window.visualViewport`, que es
     lo único que sabe dónde termina la pantalla cuando Safari esconde su
     propia barra. Se construye con una captura nueva en la mano, no antes. */
}
.barra-inferior a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--tinta-tenue);
  font-size:.68rem; font-weight:700;
  min-width:74px;
}
.barra-inferior a.activo{color:var(--terracota)}
.barra-inferior svg{width:24px; height:24px}

/* ⛔ EL CIERRE DE TU CASA EN EL iPAD: UN ADORNO DE LIBRO, NO UNA BARRA
   (Christian, 4/8, tras rechazar dos versiones). Como en el iPad la barra
   flotante no existe, Tu casa terminaba pelada. Se probó un pie con fondo
   blanco (quedaba «cortado»: el navegador roto no deja que la página llegue
   al borde, y ese sobrante no se puede llenar — tampoco con faldas ni
   pintando la página, probado y horrible) y tres botones en relieve (no
   gustaron). Lo que quedó: dos hilos que se desvanecen y el solcito en el
   medio, pegadito a la última tarjeta. SIN fondo: al no haber bloque de
   color, el sobrante del navegador no tiene contra qué notarse. Los colores
   son los de la tinta de la casa y heredan la transición de la luz, así
   acompaña mañana, tarde y noche.
   (La marca `pant-casa` que pone base.php queda disponible por si algún día
   hay que apuntarle a una pantalla desde acá sin funciones nuevas de CSS.) */
.cierre-casa{display:none}
html.es-ipad .cierre-casa{
  display:flex; align-items:center; gap:14px;
  max-width:480px;
  margin:0 auto calc(34px + env(safe-area-inset-bottom));
  padding:0 22px;
  color:var(--tinta-tenue);
  transition:var(--transicion-luz);
}
html.es-ipad .cierre-casa .hilo{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, currentColor);
  opacity:.4;
}
html.es-ipad .cierre-casa .hilo:last-child{
  background:linear-gradient(90deg, currentColor, transparent);
}
html.es-ipad .cierre-casa svg{width:20px; height:20px; opacity:.7}

/* ⛔ EN EL iPAD NO EXISTE LA BARRA DE ABAJO (Christian, 4/8, decisión final
   tras seis rondas medidas contra la falla del navegador del iPad).
   La marca es-ipad la pone base.php ANTES de pintar nada, así que la barra no
   llega a dibujarse jamás; y los lugares recuperan el aire que le reservaban.
   A «Tú» se llega por las rayitas de la barra de arriba, que en el iPad se
   encienden siempre (en tablet estaban apagadas) y ganan el renglón «Tú»
   (lo agrega barra-inferior.php). El porqué completo, en ese archivo. */
html.es-ipad .barra-inferior{display:none !important}
html.es-ipad .pantalla-lugar .columna{padding-bottom:40px}
/* ⛔ LA CHARLA NO SE TOCA. Se probó bajarle la cajita al borde para ganar el
   alto que dejaba libre la barra (--charla-caja-sube:0) y ponerle una pollera
   opaca para tapar lo que asomara debajo: las DOS salieron peor (4/8). La
   cajita es «pegajosa», no fija, y el margen negativo de la pollera la corrió
   hacia ARRIBA — quedó en mitad de la pantalla apenas abría el chat.
   La cajita se queda donde siempre, con su franja de aire abajo. El defecto
   que le queda (cola de la conversación asomando por debajo al scrollear) es
   el mismo borde mentiroso del navegador, y se cura con la obra de raíz
   anotada en la bitácora: que la charla no se deslice entera bajo el teclado,
   con los mensajes corriendo en su propio marco. */
html.es-ipad .barra-arriba .menu-chico-caja{display:inline-flex}

/* ⭐ LO QUE CUELGA DE ARRIBA ES INMUNE (hallazgo del 4/8, y la salvación de
   la burbuja). En TODAS las capturas de ese día la barra de ARRIBA quedó
   perfecta, con lo de abajo despegado: el defecto no corre la capa entera,
   solo le miente el BORDE DE ABAJO. Así que la burbuja del Sol y su globito
   vuelven al iPad colgados desde arriba (top) en vez de apoyados abajo
   (bottom), a la misma altura de siempre. El globito se cuelga por su base
   con translateY(-100%), y por eso acá se rehacen sus dos transform (el de
   asomarse y el de quedar puesto): si se tocan, hay que tocar los dos.
   ⛔ Regla para todo lo nuevo del iPad: nada se apoya abajo. Se cuelga. */
html.es-ipad .sol-flotante{bottom:auto; top:calc(100dvh - 96px)}
html.es-ipad .globito{
  bottom:auto; top:calc(100dvh - 96px);
  transform:translateY(calc(-100% + 8px));
}
html.es-ipad .globito.visible{transform:translateY(-100%)}

/* Y la cajita de escribir de la charla, COLGADA IGUAL (idea de Christian,
   13:26: «¿no hay forma de calcular algo desde la parte de arriba?»).
   Era «pegajosa» y se apoyaba abajo, así que sufría el mismo borde
   mentiroso: quedaba alta y la cola de la conversación asomaba por debajo.
   Ahora se cuelga desde arriba por su base —el mismo truco del globito, el
   único que funcionó— y para eso pasa a ser fija, con el ancho de la columna
   a mano (una fija no hereda el ancho de su madre) y fondo opaco, para que
   nada se vea por detrás. La lista deja el aire que la cajita ocupa.
   ⚠ Los dos anchos tienen que seguir a `.pantalla-charla .columna`: 520 de
   base, 680 de 700 px para arriba, menos los 44 de aire de la columna. */
html.es-ipad .pantalla-charla .escritura{
  position:fixed; left:50%; bottom:auto;
  top:calc(100dvh - 10px);
  transform:translate(-50%, -100%);
  width:min(520px, 100% - 44px);
  z-index:20;
  background:var(--fondo);
}
html.es-ipad .pantalla-charla .mensajes{
  padding-bottom:calc(126px + env(safe-area-inset-bottom));
}
/* el bordecito que asomaba DEBAJO de la cajita: una faldita del mismo fondo
   que baja hasta pasarse de la pantalla. Va como añadido (::after) y no como
   relleno de la cajita: la cajita cuelga de su base, así que agrandarla la
   estiraría hacia ARRIBA en vez de hacia abajo (el error de la pollera, 13:20).
   Sin capturar toques, que abajo puede haber cosas de la página. */
html.es-ipad .pantalla-charla .escritura::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:260px;
  background:var(--fondo); pointer-events:none;
}
@media (min-width:700px){
  html.es-ipad .pantalla-charla .escritura{width:min(680px, 100% - 44px)}
}

/* En el iPad, «Free / Premium» ya se lee entero en la barra de arriba, así que
   dentro de las rayitas queda SOLO «Tú» — si no, estaría dos veces (Christian,
   13:30). En el teléfono el panelito sigue igual: ahí el enlace no entra en la
   barra y las rayitas son su único lugar. */
html.es-ipad .menu-chico-panel a:not(.menu-chico-tu){display:none}

/* ================================================================
   LOS LUGARES — escena propia que vive la hora del día
   ================================================================ */
.pantalla-lugar .columna{padding-bottom:110px}

.volver{
  display:inline-block;
  margin-top:18px;
  font-size:.9rem; font-weight:800; color:var(--terracota);
  text-decoration:none;
}

/* la escena del lugar: mismo lenguaje que la vista al mar */
.lugar-escena{
  margin-top:14px;
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  border:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.lugar-escena svg{display:block; width:100%; height:auto}

/* la hora del día dentro de la escena */
.lugar-escena .e-sol{transition:transform 1.2s ease, opacity .9s ease}
html[data-luz="tarde"] .lugar-escena .e-sol{transform:translate(6px, 16px)}
html[data-luz="noche"] .lugar-escena .e-sol{opacity:0; transform:translate(12px, 34px)}

.lugar-escena .e-luna{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .lugar-escena .e-luna{opacity:1}

.lugar-escena .e-estrellas{opacity:0; transition:opacity 1.2s ease}
html[data-luz="noche"] .lugar-escena .e-estrellas{opacity:.9}

.lugar-escena .e-lampara{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .lugar-escena .e-lampara{opacity:1}

.lugar-cabecera{margin-top:20px}
.lugar-cabecera h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.8rem, 7vw, 2.3rem);
}
.lugar-cabecera p{margin-top:3px; color:var(--tinta-suave); font-size:.97rem}

.nota-lugar{
  margin-top:26px; text-align:center;
  color:var(--tinta-tenue); font-size:.9rem; font-style:italic;
}

/* el aviso honesto mientras el lugar se prepara */
.pronto{
  margin-top:22px;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:22px 20px;
  box-shadow:var(--sombra-chica);
  display:flex; align-items:flex-start; gap:14px;
  transition:var(--transicion-luz);
}
.pronto .solcito{width:34px; height:34px; flex:none; margin-top:2px}
.pronto h3{font-family:var(--serif); font-weight:600; font-size:1.15rem}
.pronto p{margin-top:5px; color:var(--tinta-suave); font-size:.95rem}

/* ================================================================
   LA CHARLA
   ================================================================ */
.pantalla-charla{display:flex; flex-direction:column}
.pantalla-charla .columna{
  flex:1; display:flex; flex-direction:column;
  padding-bottom:0; width:100%;
  min-height:100svh;
}

.charla-cabecera{
  display:flex; align-items:center; gap:13px;
  padding:18px 0 14px;
  border-bottom:1px solid var(--linea);
}
.charla-cabecera .solcito{width:44px; height:44px; flex:none}
.charla-cabecera .quien h2{
  font-family:var(--serif); font-weight:600; font-size:1.25rem;
}
.charla-cabecera .quien p{color:var(--tinta-tenue); font-size:.82rem}
.charla-cabecera .volver-charla{
  margin-left:auto;
  font-size:.9rem; font-weight:800; color:var(--terracota);
  text-decoration:none; white-space:nowrap;
}

.mensajes{
  flex:1; overflow-y:auto;
  /* abajo dejamos el alto que sube la cajita + un respiro, para que el último
     mensaje nunca quede tapado por la cajita de escritura (mobile, tablet y desktop) */
  padding:22px 0 calc(var(--charla-caja-sube) + 24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px;
}
.burbuja{
  max-width:85%;
  padding:13px 17px;
  border-radius:var(--radio-ch);
  font-size:1rem; line-height:1.5;
  transition:var(--transicion-luz);
  animation:aparecer .4s ease;
}
.burbuja.sol{
  align-self:flex-start;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-bottom-left-radius:7px;
  box-shadow:var(--sombra-chica);
}
.burbuja.persona{
  align-self:flex-end;
  background:var(--salvia-suave);
  color:var(--tinta);
  border-bottom-right-radius:7px;
}
.burbuja em{font-style:italic}

.confianza{
  align-self:center;
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--tinta-tenue);
  padding:4px 14px; text-align:center;
}
.confianza svg{width:15px; height:15px; flex:none}

/* ================================================================
   LA CARTA DE BIENVENIDA
   ================================================================ */
#carta .columna{max-width:460px; padding-bottom:110px}
.carta-hoja{
  margin-top:22px;
  background:linear-gradient(150deg, var(--rosa-suave) 0%, var(--tarjeta) 55%);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:26px 22px;
  transition:var(--transicion-luz);
}
.carta-hoja .sello{float:right; width:44px; height:44px; margin-left:10px}
.carta-hoja h1{font-family:var(--serif); font-weight:600; font-size:1.45rem}
.carta-hoja p{margin-top:14px; color:var(--tinta); font-size:.98rem; line-height:1.65}
.carta-hoja .firma{margin-top:18px; font-family:var(--serif); font-style:italic; font-size:1.1rem}

/* ================================================================
   PANTALLA TÚ — tu perfil, simple y a mano
   ================================================================ */
#perfil .columna{padding-bottom:110px; max-width:460px}
.perfil-cabecera{padding-top:26px; text-align:center}
.perfil-cabecera .solcito{width:44px; height:44px}
.perfil-cabecera h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem, 6vw, 2rem); margin-top:8px;
}
.perfil-cabecera p{color:var(--tinta-suave); font-size:.95rem; margin-top:4px}

.tarjeta-perfil{
  margin-top:22px;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra-chica);
  padding:22px 20px;
  transition:var(--transicion-luz);
}

/* ---- La ventana de «lo que el Sol recuerda de ti» (29/7) ----
   La memoria no se vuelca en la pantalla: la tarjeta invita y todo vive acá.
   En el teléfono ocupa casi todo (con su respiro arriba y abajo) y el cuerpo
   es lo único que se desliza, así el título y la cruz quedan siempre a mano. */
.mem-velo{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:color-mix(in srgb, var(--tinta) 34%, transparent);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s ease;
}
/* ⛔ ESTA LÍNEA NO SE BORRA NUNCA. Sin ella, `display:flex` de arriba le gana
   al `hidden` del navegador (una regla nuestra siempre le gana a la suya), y
   entonces la ventana queda INVISIBLE PERO PUESTA, tapando la pantalla entera
   y comiéndose todos los toques: la pantalla Tú quedaba muerta y nada
   respondía. Cazado el 29/7 y solo porque se midió qué elemento hay debajo del
   dedo — las pruebas hechas con JavaScript no lo veían, porque un click de
   JavaScript no se fija en lo que hay encima. */
.mem-velo[hidden]{display:none}
.mem-velo.abierta{opacity:1}
.mem-hoja{
  width:100%; max-width:520px; max-height:100%;
  display:flex; flex-direction:column;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra);
  transform:translateY(14px) scale(.985);
  transition:transform .28s ease, var(--transicion-luz);
}
.mem-velo.abierta .mem-hoja{transform:none}
.mem-cabecera{
  display:flex; align-items:center; gap:12px;
  padding:18px 18px 12px; border-bottom:1px solid var(--linea);
}
.mem-cabecera h2{
  flex:1; margin:0;
  font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--tinta);
}
.mem-cerrar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linea); background:var(--fondo); color:var(--tinta-suave);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.mem-cerrar svg{width:18px; height:18px}
.mem-cerrar:hover{color:var(--terracota); border-color:var(--terracota)}
.mem-cuerpo{padding:16px 18px 22px; overflow-y:auto; -webkit-overflow-scrolling:touch}
.mem-intro{margin:0; color:var(--tinta-suave); font-size:.9rem; line-height:1.5}
/* cada apunte en su renglón, con su puntito: lo mismo que decía el bloque,
   pero se lee de un vistazo */
.mem-lista{
  margin:14px 0 0; padding:14px 16px; list-style:none;
  background:var(--fondo); border-radius:var(--radio-ch);
  font-size:.95rem; line-height:1.5;
}
.mem-lista li{position:relative; padding-left:16px}
.mem-lista li + li{margin-top:9px; padding-top:9px; border-top:1px solid var(--linea)}
.mem-lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--sol);
}
.mem-form{margin-top:20px}
.mem-form textarea{width:100%; resize:vertical}
.mem-cero{margin-top:24px; padding-top:18px; border-top:1px solid var(--linea)}
.mem-cero p{color:var(--tinta-suave); font-size:.9rem; line-height:1.5}
.mem-casilla{display:flex; gap:9px; align-items:flex-start; margin:11px 0; font-size:.9rem}
.mem-casilla input{margin-top:3px; flex:0 0 auto}
@media (max-width:520px){
  .mem-velo{padding:10px}
  .mem-hoja{max-height:calc(100% - env(safe-area-inset-bottom))}
}
.tarjeta-perfil + .tarjeta-perfil{margin-top:14px}
.tarjeta-perfil h2{
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
}
.dato-perfil{
  margin-top:12px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:.95rem;
}
.dato-perfil .que{color:var(--tinta-tenue); font-size:.85rem; font-weight:700}
.dato-perfil .valor{color:var(--tinta); text-align:right; overflow-wrap:anywhere}

/* el aviso del correo que rebota (18/8, obra del pago sin peaje): ámbar
   sereno, sin alarma — quien lo lee tiene que corregir, no asustarse */
.correo-rebota-aviso{
  margin-top:12px; padding:10px 12px; border-radius:12px;
  font-size:.86rem; line-height:1.5; color:var(--tinta);
  background:color-mix(in srgb, var(--miel) 18%, var(--fondo-suave));
  border:1px solid var(--miel);
}

.boton-suave{
  display:inline-block; margin-top:16px;
  font-family:var(--sans); font-size:.92rem; font-weight:800;
  color:var(--terracota); text-decoration:none;
  background:var(--fondo);
  border:1.5px solid var(--linea);
  border-radius:99px;
  padding:10px 18px;
  cursor:pointer;
  transition:transform .15s ease, var(--transicion-luz);
}
.boton-suave:active{transform:scale(.97)}

/* ================================================================
   TABLET Y ESCRITORIO
   ================================================================ */
@media (min-width:760px){
  html{font-size:18px}
  .columna{max-width:640px}

  .lugares{grid-template-columns:1fr 1fr 1fr}
  .puerta.faro{grid-column:1 / -1}

  /* Tu Mesa: la tarjeta de Sol entera arriba, y la fila de tres debajo */
  .mesa{grid-template-columns:1fr 1fr 1fr}
  /* sin la tarjeta de novedades, las dos que quedan se reparten la fila */
  .mesa.mesa-sin-novedad{grid-template-columns:1fr 1fr}
  .pieza.plaza-aviso, .pieza.faro-mesa{grid-column:1 / -1}

  /* las escenas se vuelven panorámicas, no dominan la página */
  .vista-mar svg, .lugar-escena svg{height:260px; width:100%}

  .promesas{grid-template-columns:1fr 1fr 1fr; max-width:960px}
}

@media (min-width:1080px){
  .columna{max-width:960px}

  .hero{
    min-height:max(calc(100vh - 170px), 670px);
    background-image:url('../img/portada.png');
    background-position:center 30%;
  }
  .hero-texto{
    padding-top:30px;
    text-align:right;
    margin-left:auto; margin-right:5%;
    width:fit-content;
  }
  .hero-texto .linea1{font-size:1.5rem}
  .hero-texto .linea2{font-size:3.2rem}
  .hero-pie{
    flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:14px 26px; padding-bottom:26px;
  }
  .hero-pie .bajada{flex-basis:100%; max-width:none}
  .cta-principal{width:auto; max-width:none; padding:15px 46px}

  #casa .columna, .pantalla-lugar .columna{max-width:1000px}
  .lugares{grid-template-columns:repeat(4, 1fr)}
  .puerta.faro{grid-column:span 2}
  .mesa{grid-template-columns:1fr 1fr 1fr}
  .mesa.mesa-sin-novedad{grid-template-columns:1fr 1fr}

  .pantalla-charla .columna{max-width:680px}
}

/* ================================================================
   PASO 2 · LA CHARLA REAL (escritura, parlantito, dictado)
   — agregado al final: no tocar las secciones anteriores —
   ================================================================ */

.burbuja .texto{white-space:pre-wrap; word-wrap:break-word}

/* la caja de escritura, fija abajo */
.escritura{
  position:sticky;
  /* por encima de la barra inferior fija (si no, la caja y la pista quedan tapadas) */
  bottom:calc(var(--charla-caja-sube) + env(safe-area-inset-bottom));
  padding:12px 0 6px;
  background:linear-gradient(transparent, var(--fondo) 25%);
}
.escritura .caja{
  display:flex; align-items:flex-end; gap:10px;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:28px;
  padding:8px 8px 8px 20px;
  box-shadow:var(--sombra);
  transition:var(--transicion-luz);
}
.escritura textarea{
  flex:1; border:none; outline:none; resize:none;
  background:transparent; color:var(--tinta);
  font-family:var(--sans); font-size:1rem; line-height:1.45;
  padding:9px 0; max-height:120px;
}
.escritura textarea::placeholder{color:var(--tinta-tenue)}
.boton-mic{
  flex:none; width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, opacity .2s ease;
}
.boton-mic:active{transform:scale(.92)}
.boton-mic svg{width:22px; height:22px; color:#7A4E26}
html[data-luz="noche"] .boton-mic svg{color:#4A3213}
.boton-mic.oculto{display:none}
.boton-mic.grabando{animation:latido-mic 1.2s ease-in-out infinite}
@keyframes latido-mic{
  0%,100%{box-shadow:0 0 0 0 rgba(226,168,92,.45)}
  50%{box-shadow:0 0 0 12px rgba(226,168,92,0)}
}
.boton-enviar{
  flex:none; width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer; display:none;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.boton-enviar.visible{display:flex}
.boton-enviar:active{transform:scale(.92)}
.boton-enviar svg{width:22px; height:22px; color:#7A4E26}
html[data-luz="noche"] .boton-enviar svg{color:#4A3213}
.escritura .pista{
  text-align:center; margin-top:9px;
  font-size:.8rem; color:var(--tinta-tenue);
}

/* elección de la voz que lee (discreta, bajo la pista) */
.voz-lectura{
  text-align:center; margin-top:4px;
  font-size:.74rem; color:var(--tinta-tenue);
}
.voz-lectura .voz-opcion{
  border:none; background:none; cursor:pointer; padding:2px 3px;
  font-family:var(--sans); font-size:.74rem; color:var(--tinta-tenue);
}
.voz-lectura .voz-opcion.activa{
  color:var(--tinta); font-weight:700;
  border-bottom:1px solid var(--sol);
}

/* el parlantito: delicado y discreto, en la esquina de cada respuesta */
.burbuja.sol{position:relative; padding-right:34px}
.parlantito{
  position:absolute; right:8px; bottom:7px;
  width:22px; height:22px; padding:0;
  border:none; background:none; cursor:pointer;
  color:var(--tinta-tenue); opacity:.45;
  transition:opacity .2s ease, color .2s ease;
}
.parlantito:hover{opacity:.9}
.parlantito svg{width:100%; height:100%}
.parlantito .onda{opacity:.7}
.parlantito.cargando{opacity:.9}
.parlantito.cargando svg{animation:parlante-espera 1s ease-in-out infinite}
@keyframes parlante-espera{0%,100%{opacity:.4}50%{opacity:1}}
.parlantito.sonando{opacity:1; color:var(--sol)}
.parlantito.sonando .onda1{animation:onda-suena 1s ease-in-out infinite}
.parlantito.sonando .onda2{animation:onda-suena 1s ease-in-out infinite .25s}
@keyframes onda-suena{0%,100%{opacity:.25}50%{opacity:1}}

/* Sol está escribiendo… */
.burbuja.escribiendo{
  display:flex; gap:5px; align-items:center;
  min-width:56px; min-height:20px;
}
.burbuja.escribiendo .puntito{
  width:7px; height:7px; border-radius:50%;
  background:var(--tinta-tenue); opacity:.5;
  animation:puntito-late 1.2s ease-in-out infinite;
}
.burbuja.escribiendo .puntito:nth-child(2){animation-delay:.18s}
.burbuja.escribiendo .puntito:nth-child(3){animation-delay:.36s}
@keyframes puntito-late{0%,100%{opacity:.25; transform:translateY(0)}50%{opacity:.9; transform:translateY(-3px)}}

/* la columna de la charla ocupa la pantalla y la escritura queda abajo */
.pantalla-charla .columna{
  min-height:calc(100vh - var(--alto-barra, 60px) - 20px);
  display:flex; flex-direction:column;
}
.pantalla-charla .mensajes{flex:1}

/* ============================================================
   LOS HILOS DE CHARLA — panel lateral de charlas anteriores
   (oculto por defecto; se cierra solo; pantalla completa siempre)
   ============================================================ */
.boton-charlas{
  flex:0 0 auto; width:38px; height:38px; margin-right:2px;
  border:none; border-radius:12px; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--tinta-tenue); transition:background .25s ease, color .25s ease;
}
.boton-charlas:hover{ background:var(--fondo-suave); color:var(--tinta-suave) }
.boton-charlas svg{ width:20px; height:20px }

.velo-charlas{
  position:fixed; inset:0; z-index:60; background:rgba(30,26,20,.28);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.velo-charlas.visible{ opacity:1; pointer-events:auto; transition:opacity .4s ease }

.panel-charlas{
  position:fixed; top:0; bottom:0; left:0; z-index:61;
  width:min(330px, 88vw);
  background:var(--tarjeta); color:var(--tinta);
  box-shadow:var(--sombra);
  transform:translateX(-104%);
  /* al cerrarse se retira despacio, sin golpe */
  transition:transform .7s cubic-bezier(.45,.05,.25,1);
  display:flex; flex-direction:column;
  padding:calc(var(--alto-barra, 64px) + 12px) 14px 10px;
}
.panel-charlas.abierto{
  transform:translateX(0);
  transition:transform .45s cubic-bezier(.22,.8,.3,1);
}
.panel-charlas h3{
  font-family:var(--serif, inherit); font-weight:600;
  font-size:1.05rem; color:var(--tinta); padding:0 8px 10px;
}
.charla-nueva{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; margin:0 4px 8px; border-radius:12px;
  color:var(--tinta-suave); text-decoration:none; font-size:.9rem;
  transition:background .3s ease, color .3s ease;
}
.charla-nueva svg{ width:17px; height:17px; color:var(--tinta-tenue); flex:0 0 auto }
.charla-nueva:hover{ background:var(--fondo-suave); color:var(--tinta) }
.charla-nueva:hover svg{ color:var(--tinta-suave) }
.lista-charlas{ flex:1; overflow-y:auto; padding:2px 4px; scrollbar-width:thin }
.charla-item{
  display:block; padding:11px 12px; border-radius:12px;
  text-decoration:none; color:inherit; transition:background .2s ease;
}
.charla-item:hover{ background:var(--fondo-suave) }
.charla-item.actual{ background:var(--miel-suave) }
.charla-item .cuando{ display:block; font-size:.95rem; color:var(--tinta); line-height:1.35 }
.charla-item .ultima{ display:block; font-size:.78rem; color:var(--tinta-tenue); margin-top:2px }
.charlas-cargando{ padding:16px 10px; font-size:.88rem; color:var(--tinta-tenue); text-align:center }
.leyenda-charlas{
  padding:10px 8px 4px; text-align:center;
  font-size:.74rem; line-height:1.5; color:var(--tinta-tenue);
  border-top:1px solid var(--linea); margin-top:6px;
}

/* ============================================================
   EL VISOR DEL TALLER — chips discretos bajo cada respuesta de Sol
   (solo los ve el administrador con la perilla debug_memoria en 1)
   ============================================================ */
.traza-sol{
  display:flex; flex-wrap:wrap; gap:5px;
  margin-top:8px; padding-top:7px;
  border-top:1px dashed var(--linea);
}
.chip-traza{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.68rem; line-height:1.5; letter-spacing:.01em;
  color:var(--tinta-suave); background:var(--fondo-suave);
  border:1px solid var(--linea); white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.chip-traza.memoria{ background:var(--salvia-suave); border-color:transparent }
.chip-traza.actividad, .chip-traza.recientes{ background:var(--celeste-suave); border-color:transparent }
.chip-traza.archivo.encontro{ background:var(--miel-suave); border-color:transparent }
.chip-traza.archivo.sin-suerte{ background:var(--rosa-suave); border-color:transparent }
.chip-traza.archivo.quieto{ opacity:.75 }
.chip-traza.modelo{ opacity:.8 }

/* ── los tres estados del micrófono: grabando (stop) y escribiendo (ruedita) ── */
.boton-mic.procesando{ opacity:.75; cursor:default }
.rueda-mic{ animation:gira-mic .9s linear infinite; transform-origin:center }
@keyframes gira-mic{ to{ transform:rotate(360deg) } }

/* el ícono de inicio (la puerta) un poco más grande y claro que el resto de la barra */
.barra-arriba .ir-inicio{padding:3px 7px}
.barra-arriba .ir-inicio svg{width:24px; height:24px}

/* ============================================================
   ELEGIR LA VOZ — ventanita de la primera vez y sección «Tú»
   ============================================================ */
.voz-ops{display:flex; gap:10px; flex-wrap:wrap}
.voz-op{
  flex:1 1 140px; padding:12px 14px;
  border:1.5px solid var(--linea); border-radius:14px;
  background:var(--tarjeta); color:var(--tinta);
  font-family:var(--sans); font-size:.95rem; font-weight:700;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.voz-op:hover{background:var(--fondo-suave)}
.voz-op.activa{border-color:var(--terracota); color:var(--terracota); background:var(--rosa-suave)}
.voz-guardada{margin-top:10px; font-size:.85rem; color:var(--salvia)}

/* la aclaración chiquita: hasta dónde llega esta elección (Christian, 4/8).
   Sin ella, quien elige aquí una voz espera que también cambie la de las
   meditaciones y los cuentos —que tienen la suya, sin opción— y va a escribir
   preguntando por qué no le cambió. Va en la charla y en «Tú», igual en las
   dos. Chiquita a propósito: aclara, no compite con la elección. */
.voz-alcance{
  margin-top:12px; font-size:.76rem; line-height:1.45;
  color:var(--tinta-suave); opacity:.9;
}

.velo-voz{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:22px; padding-bottom:calc(22px + env(safe-area-inset-bottom));
  background:rgba(30,26,20,.42); animation:aparece-velo .3s ease;
}
@keyframes aparece-velo{from{opacity:0} to{opacity:1}}
.velo-voz.yendose{opacity:0; transition:opacity .35s ease}
.tarjeta-voz{
  background:var(--tarjeta); border-radius:22px; box-shadow:var(--sombra);
  padding:26px 22px; max-width:360px; width:100%; text-align:center;
  animation:sube-voz .35s cubic-bezier(.22,.8,.3,1);
}
@keyframes sube-voz{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.tarjeta-voz .solcito{width:40px; height:40px; margin:0 auto 8px}
.tarjeta-voz h3{font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--tinta); margin-bottom:8px}
.tarjeta-voz p{font-size:.92rem; color:var(--tinta-suave); line-height:1.5; margin-bottom:18px}
.tarjeta-voz .voz-op{flex:1 1 0}

/* ================================================================
   EL SILLÓN — F4.1: estantes, LA FONOLA, barrita y cancionero
   (portado de Diseno/pruebas-visual/el-sillon-maqueta.html)
   ================================================================ */
.pantalla-sillon .columna{padding-bottom:120px}
.sillon-intro{margin-top:20px}
.sillon-intro h1{font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,7vw,2.3rem)}
.sillon-intro p{margin-top:5px; color:var(--tinta-suave); font-size:.98rem; line-height:1.5; max-width:40ch}

/* los dos estantes (meditación / cuentos) */
.estante-tabs{
  display:flex; gap:6px; margin-top:22px;
  background:var(--fondo-suave); border:1px solid var(--linea);
  border-radius:99px; padding:5px;
  transition:var(--transicion-luz);
}
.estante-tabs button{
  flex:1; border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:.9rem; color:var(--tinta-suave);
  padding:11px 8px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.estante-tabs button svg{width:18px; height:18px}
.estante-tabs button.on{background:var(--tarjeta); color:var(--terracota); box-shadow:var(--sombra-chica)}

.panel{display:none; animation:aparecer .45s ease}
.panel.on{display:block}

/* perillas de página (las usa el estante de cuentos y el cancionero) */
.perillas{margin-top:20px; display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-end}
.perilla{display:flex; flex-direction:column; gap:8px}
.perilla > .rot{
  font-family:var(--sans); font-weight:800; font-size:.7rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-tenue);
}
.seg-mini{
  display:inline-flex; background:var(--fondo-suave);
  border:1px solid var(--linea); border-radius:99px; padding:4px;
  transition:var(--transicion-luz);
}
.seg-mini button{
  border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:.83rem; color:var(--tinta-suave);
  padding:8px 13px; border-radius:99px; transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.seg-mini button.on{background:var(--tarjeta); color:var(--terracota); box-shadow:var(--sombra-chica)}
.seg-mini button small{display:block; font-size:.64rem; font-weight:700; color:var(--tinta-tenue); margin-top:1px; letter-spacing:.02em}
.seg-mini button.on small{color:var(--terracota); opacity:.75}

.interruptor{display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.interruptor .riel{
  width:46px; height:27px; border-radius:99px; position:relative; flex:none;
  background:var(--fondo-suave); border:1px solid var(--linea);
  transition:background .3s ease, border-color .3s ease;
}
.interruptor .bolita{
  position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%;
  background:var(--tarjeta); box-shadow:var(--sombra-chica);
  display:grid; place-items:center; transition:transform .28s cubic-bezier(.4,1.3,.5,1);
}
.interruptor .bolita svg{width:12px; height:12px; color:var(--tinta-tenue); opacity:.6; transition:color .3s, opacity .3s}
.interruptor.on .riel{background:color-mix(in srgb, var(--salvia) 55%, var(--tarjeta)); border-color:transparent}
.interruptor.on .bolita{transform:translateX(19px)}
.interruptor.on .bolita svg{color:var(--salvia); opacity:1}
.interruptor .txt{font-family:var(--sans); font-weight:700; font-size:.86rem; color:var(--tinta-suave)}

.voz-fija{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.82rem; color:var(--tinta-tenue);
  background:var(--fondo-suave); border:1px solid var(--linea);
  border-radius:99px; padding:8px 14px;
}
.voz-fija svg{width:15px; height:15px; color:var(--tinta-suave)}

/* la cajita de personalización */
.cajita{
  margin-top:22px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--sol) 12%, var(--tarjeta)) 0%, var(--tarjeta) 62%);
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:18px 18px 16px; box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.cajita .titu{display:flex; align-items:center; gap:9px; margin-bottom:4px}
.cajita .titu .solcito{width:22px; height:22px; flex:none}
.cajita .titu h3{font-family:var(--serif); font-weight:600; font-size:1.12rem}
.cajita .sub{color:var(--tinta-suave); font-size:.9rem; line-height:1.45}
.cajita .caja{
  display:flex; align-items:center; gap:9px; margin-top:13px;
  background:var(--tarjeta); border:1.5px solid var(--linea); border-radius:16px;
  padding:6px 6px 6px 15px; transition:border-color .2s ease, var(--transicion-luz);
}
.cajita .caja:focus-within{border-color:var(--terracota)}
.cajita .caja input{
  flex:1; border:0; outline:0; background:transparent; color:var(--tinta);
  font-family:var(--sans); font-size:1rem; padding:9px 0; min-width:0;
}
.cajita .caja input::placeholder{color:var(--tinta-tenue)}
.mini-mic, .mini-ir{
  flex:none; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; transition:transform .15s ease, opacity .2s;
}
.mini-mic{background:var(--fondo-suave); border:1px solid var(--linea)}
.mini-mic svg{width:19px; height:19px; color:var(--tinta-suave)}
.mini-mic:active{transform:scale(.92)}
.mini-ir{background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol)); box-shadow:var(--sombra-chica)}
.mini-ir svg{width:20px; height:20px; color:#7A4E26}
html[data-luz="noche"] .mini-ir svg{color:#4A3213}
.mini-ir:active{transform:scale(.92)}
.cajita .pista{margin-top:9px; font-size:.78rem; color:var(--tinta-tenue); line-height:1.45}

.estante-tit{margin-top:26px; display:flex; align-items:baseline; gap:10px}
.estante-tit h2{font-family:var(--serif); font-weight:600; font-size:1.3rem}
.estante-tit .sub{color:var(--tinta-tenue); font-size:.84rem}

/* ---- LA FONOLA: imagen única + capas vivas por código ---- */
/* aire entre la barrita y la fonola (pedido de Christian: que respire,
   sin exagerar — la fonola tiene que verse enseguida; afinado a oreja el 18/7) */
.fonola-zona{margin-top:48px; display:flex; flex-direction:column; align-items:center; position:relative; z-index:6}
.fonola-caja{position:relative; width:min(80vw,380px); --esc:.55}
.fonola-halo{
  position:absolute; inset:-22% -30%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--sol) 55%, transparent) 0%, transparent 72%);
  opacity:0; transition:opacity 2.6s ease; pointer-events:none;
  animation:halo-respira 7s ease-in-out infinite;
}
html[data-luz="noche"] .fonola-halo{
  background:radial-gradient(closest-side, color-mix(in srgb, #E9A05A 62%, transparent) 0%, transparent 74%);
}
@keyframes halo-respira{0%,100%{transform:scale(1); opacity:var(--halo-op,0)} 50%{transform:scale(1.06); opacity:calc(var(--halo-op,0)*1.25)}}
.fonola-img{
  position:relative; width:100%; display:block;
  /* el encendido FLORECE despacio (pedido de Christian 20/7: antes 1.6s
     pisaba la bajada; ahora 2.6s y arranca escalonado desde el JS) */
  transition:filter 2.6s ease;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
.visor{
  position:absolute; left:33.5%; top:17.8%; width:33%; height:11.5%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:visible; cursor:pointer;
  transition:opacity 1.2s ease;
}
.visor .et{
  font-family:var(--sans); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:max(8px, calc(12px * var(--esc)));
  color:#8A5A2B; opacity:.85;
}
.visor h2{
  font-family:var(--serif); font-style:italic; font-weight:600; line-height:1.12;
  font-size:max(13px, calc(23px * var(--esc)));
  color:#5C3A1E; margin-top:calc(4px * var(--esc));
  text-shadow:0 1px 0 rgba(255,248,230,.5);
}
.visor .linea-caja{
  width:100%; overflow:hidden; margin-top:calc(5px * var(--esc));
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.visor .linea{
  display:inline-block; white-space:nowrap;
  font-family:var(--sans); font-weight:700;
  font-size:max(10px, calc(14px * var(--esc)));
  color:#7A522C;
}
.visor .linea.desfila{animation:desfila 7s ease-in-out infinite alternate}
@keyframes desfila{from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--dx, 0px)))}}
.visor.cambia .et, .visor.cambia h2, .visor.cambia .linea{opacity:0; transform:translateY(4px)}
.visor .et, .visor h2, .visor .linea{transition:opacity .16s ease, transform .16s ease}

/* la barrita: el manejo de la reproducción, arriba de la fonola.
   Dos pisos: controles arriba (guardar · anterior/play/siguiente · duración/música)
   y la línea de progreso abajo. Duración y música en espejo con las perillas. */
/* Apagada NO ocupa lugar (pedido de Christian 20/7: la fonola llega arriba,
   visible de entrada; recién al encenderse la barrita se despliega y la
   fonola baja). El despliegue anima alto + margen + borde, todo junto. */
.barrita{
  margin:0 auto; width:min(92vw,430px);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:color-mix(in srgb, var(--tarjeta) 82%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid transparent; border-radius:22px;
  padding:0 16px; box-shadow:none;
  max-height:0; overflow:hidden;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  position:relative; z-index:6;
  /* bajada LENTA y PAREJA (pedido de Christian 20/7, 2ª vuelta: todavía bajaba
     rápido). 1.9s con ease-in-out suave: sin caída brusca al arranque, glisa
     parejo y se asienta. El encendido espera a que ESTO termine (JS: 2000ms). */
  transition:opacity 1s ease, transform 1s ease,
    max-height 1.9s cubic-bezier(.42,0,.35,1),
    margin 1.9s cubic-bezier(.42,0,.35,1),
    padding 1.9s cubic-bezier(.42,0,.35,1),
    border-color 1s ease, box-shadow 1s ease, var(--transicion-luz);
}
.barrita.visible{
  opacity:1; transform:none; pointer-events:auto;
  max-height:340px; margin:16px auto 0; padding:10px 16px;
  border-color:var(--linea); box-shadow:var(--sombra-chica);
}
.b-fila{display:flex; align-items:center; justify-content:space-between; width:100%; gap:6px}
.b-centro{display:flex; align-items:center; gap:14px}
.b-extras{display:flex; align-items:center; gap:6px}
.b-dur{
  border:1.5px solid var(--linea); background:transparent; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:.76rem; color:var(--tinta-suave);
  padding:7px 11px; border-radius:99px; white-space:nowrap;
  transition:color .25s ease, border-color .25s ease, transform .15s ease, var(--transicion-luz);
}
.b-dur:active{transform:scale(.93)}
.b-dur:hover{color:var(--terracota); border-color:var(--terracota)}
.b-mus{color:var(--salvia)}
.b-mus .tacha{opacity:0; transition:opacity .25s ease}
.b-mus.sin-musica{color:var(--tinta-tenue)}
.b-mus.sin-musica .tacha{opacity:1}
.b-guardar{
  width:38px; height:38px; flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--tinta-tenue); display:grid; place-items:center; padding:0;
  transition:color .25s ease, transform .15s ease;
}
.b-guardar:active{transform:scale(.86)}
.b-guardar svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8}
.b-guardar.guardada{color:#D99A3D}
.b-guardar.guardada svg{fill:#E9B87A; stroke:#B97F2E}
.b-mini{
  width:38px; height:38px; flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--tinta-suave); display:grid; place-items:center; padding:0; transition:transform .15s;
}
.b-mini:active{transform:scale(.88)}
.b-mini svg{width:19px; height:19px}
.b-play{
  width:52px; height:52px; flex:none; border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  box-shadow:0 5px 18px color-mix(in srgb,var(--sol) 50%,transparent), 0 0 0 5px color-mix(in srgb,var(--sol) 14%,transparent);
  display:grid; place-items:center; transition:transform .16s;
}
.b-play:active{transform:scale(.93)}
.b-play svg{width:20px; height:20px; fill:#7A4E26}
html[data-luz="noche"] .b-play{background:radial-gradient(circle at 35% 30%, #CFDDEA, #8FA9C4); box-shadow:0 5px 18px rgba(60,90,130,.45), 0 0 0 5px rgba(143,169,196,.18)}
html[data-luz="noche"] .b-play svg{fill:#2E3E52}
@keyframes bplay-avisa{0%,100%{transform:scale(1)} 50%{transform:scale(1.14)}}
.b-play.avisa{animation:bplay-avisa .5s ease-in-out 2}

/* ---- la ruedita del preparando (4/8) ----------------------------------
   Mientras la meditación se arma y se baja, el círculo deja de mostrar el
   triangulito y gira una ruedita. Sin esto la persona tocaba play, la fonola
   decía «Preparándola…» y arriba seguía el triángulo: parecía que no había
   pasado nada (Christian: «va a creer que no funciona»).

   Delicada a propósito: el mismo color de la tinta del ícono, un arco de tres
   cuartos, y una vuelta cada segundo — nada de un reloj de espera con nervios.
   Y NO cambia el tamaño ni el color del círculo, para que el cambio se lea
   como «está trabajando» y no como otro botón. */
.b-play .b-rueda{display:none}
.b-play.cargando #barPlayIcon{display:none}
.b-play.cargando .b-rueda{
  display:block; stroke:#7A4E26;
  /* ⚠ `transform-box:view-box` NO es un adorno: sin él, Safari —o sea el iPhone
     y el iPad, que son medio sitio— mide el centro contra la caja del dibujo y
     no contra el lienzo, y la rueda gira descentrada, bamboleándose. */
  transform-box:view-box; transform-origin:12px 12px;
  animation:bplay-rueda 1s linear infinite;
}
html[data-luz="noche"] .b-play.cargando .b-rueda{stroke:#2E3E52}
@keyframes bplay-rueda{to{transform:rotate(360deg)}}
/* a quien pidió menos movimiento en su aparato, la rueda no le gira: se queda
   quieta, que igual dice «esto no es el play» */
@media (prefers-reduced-motion:reduce){
  .b-play.cargando .b-rueda{animation:none}
}
.b-prog{width:100%; min-width:0; display:flex; flex-direction:column; gap:5px; padding:0 2px}
.b-linea{height:3.5px; border-radius:99px; background:color-mix(in srgb, var(--tinta) 14%, transparent); position:relative; cursor:pointer; touch-action:none}
.b-linea::before{content:""; position:absolute; left:-4px; right:-4px; top:-13px; bottom:-13px}
.b-linea i{position:absolute; left:0; top:0; height:100%; width:0%; border-radius:99px; background:var(--terracota); transition:width .3s linear}
.b-linea i::after{
  content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%; background:var(--terracota);
  box-shadow:0 1px 5px color-mix(in srgb, var(--terracota) 55%, transparent);
}
.b-linea.arrastrando i{transition:none}
/* los tiempos: el que va corriendo a la izquierda, el total a la derecha.
   Cifras de ancho fijo para que el reloj no baile mientras avanza. */
.b-tiempos{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.72rem; color:var(--tinta-tenue); letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}

/* mientras suena: la pantalla se atenúa; la fonola y la barrita quedan en su luz */
.velo-play{
  position:fixed; inset:0; z-index:5; background:rgba(40,31,22,.26);
  opacity:0; pointer-events:none; transition:opacity .9s ease;
}
.velo-play.visible{opacity:1}

/* el dial giratorio (recorte de la propia imagen) */
.dial{
  position:absolute; aspect-ratio:1; cursor:pointer; z-index:3;
  border-radius:50%;
  touch-action:none;
  transition:transform .15s ease;
}
.dial:active{transform:scale(.985)}
.dial-giro{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  transform:rotate(0deg);
  transition:transform .34s cubic-bezier(.34,1.35,.5,1);
}
.dial-giro img{
  position:absolute; display:block;
  transition:filter 2.6s ease;   /* florece con la fonola, mismo tiempo lento */
  pointer-events:none; -webkit-user-drag:none;
}
.dial::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  box-shadow:inset 0 0 7px 3px rgba(60,25,5,.4);
  pointer-events:none;
}
.lente{
  position:absolute; border-radius:50%; z-index:4; cursor:pointer;
  background:transparent; border:0; padding:0;
  transition:transform .12s ease;
}
.lente:active{transform:scale(.92)}
.lente .destello{
  position:absolute; inset:-12%; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,240,190,.85) 0%, rgba(255,200,110,.35) 55%, transparent 75%);
  transition:opacity .5s ease;
}
.lente.late .destello{opacity:1; animation:lente-late 1.6s ease-in-out infinite}
@keyframes lente-late{0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}}
.flechita{
  position:absolute; z-index:2; pointer-events:none;
  font-family:var(--sans); font-weight:800;
  font-size:max(12px, calc(19px * var(--esc)));
  color:rgba(72,38,12,.5); text-shadow:0 1px 1px rgba(255,240,210,.45);
  transition:opacity 1.2s ease;
}
.perilla-fis{
  position:absolute; z-index:3; cursor:pointer;
  width:12%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:transparent; border:0; padding:0; border-radius:50%;
}
.perilla-fis::before{content:""; position:absolute; inset:-12px; border-radius:50%}
.perilla-fis .brillo{
  position:absolute; inset:-30%; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,240,190,.75) 0%, rgba(255,200,110,.3) 55%, transparent 78%);
  transition:opacity .45s ease;
}
.perilla-fis.toca .brillo{opacity:1; transition:opacity .1s ease}

/* la ayudita bajo el título: qué hace cada dial */
.ayudita{
  margin-top:8px; display:flex; align-items:center; gap:7px;
  font-family:var(--sans); font-weight:600; font-size:.8rem; color:var(--tinta-tenue);
}
.ayudita svg{width:15px; height:15px; flex:none}

/* los susurros bajo la fonola */
.susurros{
  margin-top:16px; display:flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:.86rem; color:var(--tinta-suave);
}
.susurros button{
  border:0; background:transparent; cursor:pointer; padding:6px 4px;
  font-family:var(--sans); font-weight:700; font-size:.86rem; color:var(--tinta-suave);
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.susurros button:hover{color:var(--terracota)}
.susurros .punto{color:var(--tinta-tenue)}
.susurros button svg{width:14px; height:14px}
@keyframes susurro-late{0%,100%{color:var(--tinta-suave); transform:none} 50%{color:var(--terracota); transform:translateY(-1px)}}
.susurros button.respira{animation:susurro-late 2.2s ease-in-out 3}

/* ---- EL CANCIONERO: la puerta clara (hoja abajo en el teléfono, panel en desktop) ---- */
.velo-cancionero{
  position:fixed; inset:0; z-index:80; background:rgba(30,26,20,.42);
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.velo-cancionero.visible{opacity:1; pointer-events:auto}
.cancionero{
  position:fixed; left:0; right:0; bottom:0; z-index:81;
  background:var(--tarjeta); color:var(--tinta);
  border-radius:26px 26px 0 0; box-shadow:var(--sombra);
  max-height:86svh; display:flex; flex-direction:column;
  transform:translateY(105%);
  transition:transform .5s cubic-bezier(.22,.9,.3,1), var(--transicion-luz);
}
.cancionero.abierto{transform:translateY(0)}
.canc-asa{padding:10px 0 2px; display:flex; justify-content:center; flex:none}
.canc-asa i{width:44px; height:5px; border-radius:99px; background:var(--linea)}
.canc-cabeza{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:8px 22px 0;
}
.canc-cabeza h3{font-family:var(--serif); font-weight:600; font-size:1.3rem}
.canc-cabeza .cerrar{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--linea);
  background:var(--fondo); color:var(--tinta-suave); cursor:pointer;
  display:grid; place-items:center; transition:transform .15s ease, var(--transicion-luz);
}
.canc-cabeza .cerrar:active{transform:scale(.9)}
.canc-cabeza .cerrar svg{width:16px; height:16px}
.canc-cuerpo{overflow-y:auto; padding:4px 22px 10px; scrollbar-width:thin}
.canc-cuerpo .perillas{margin-top:12px}
.canc-sub{
  margin-top:18px; font-family:var(--sans); font-weight:800; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue);
}
.fichas{margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ficha{
  position:relative; text-align:left; cursor:pointer;
  background:var(--fondo); border:1.5px solid var(--linea); border-radius:18px;
  padding:12px 13px 11px; transition:border-color .25s ease, background .25s ease, var(--transicion-luz);
}
.ficha .etiqueta{
  display:inline-flex; font-size:.66rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:99px; margin-bottom:7px;
}
.ficha h5{font-family:var(--serif); font-weight:600; font-size:.98rem; line-height:1.25; padding-right:20px}
.ficha p{margin-top:4px; color:var(--tinta-suave); font-size:.78rem; line-height:1.4}
.ficha.elegida{border-color:var(--terracota); background:color-mix(in srgb, var(--rosa-suave) 55%, var(--tarjeta))}
.ficha .f-star{
  position:absolute; right:8px; top:8px; width:30px; height:30px;
  border:0; background:transparent; cursor:pointer; padding:0;
  color:var(--tinta-tenue); opacity:.6; display:grid; place-items:center;
  transition:color .25s ease, opacity .25s ease, transform .15s ease;
}
.ficha .f-star:active{transform:scale(.85)}
.ficha .f-star svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8}
.ficha .f-star.guardada{color:#D99A3D; opacity:1}
.ficha .f-star.guardada svg{fill:#E9B87A; stroke:#B97F2E}
.canc-vacio{margin-top:8px; font-size:.85rem; color:var(--tinta-tenue); font-style:italic}
.canc-pie{
  flex:none; padding:12px 22px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--tarjeta) 30%);
}
.canc-play{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; border:0; cursor:pointer;
  font-family:var(--sans); font-size:1.02rem; font-weight:800; color:#FFF9F2;
  background:linear-gradient(135deg, var(--terracota) 0%, var(--terracota-fuerte) 100%);
  border-radius:99px; padding:14px 20px; box-shadow:var(--sombra-chica);
  transition:transform .15s ease, var(--transicion-luz);
}
.canc-play:active{transform:scale(.98)}
.canc-play svg{width:18px; height:18px; fill:currentColor}
@media (min-width:760px){
  .cancionero{
    left:50%; right:auto; bottom:50%; transform:translate(-50%, 60%) scale(.96);
    width:min(92vw, 560px); border-radius:26px; max-height:80vh;
    opacity:0; pointer-events:none;
    transition:transform .4s cubic-bezier(.22,.9,.3,1), opacity .35s ease, var(--transicion-luz);
  }
  .cancionero.abierto{transform:translate(-50%, 50%) scale(1); opacity:1; pointer-events:auto}
  .canc-asa{display:none}
  .fichas{grid-template-columns:1fr 1fr 1fr}
}

/* etiquetas extra */
.et-lavanda{background:var(--lavanda-suave); color:var(--lavanda)}
.et-miel{background:var(--miel-suave); color:var(--miel)}

/* ---- el estante de cuentos (postales; la radio retro llegará después) ---- */
.estante{margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.op-card{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px; box-shadow:var(--sombra-chica); cursor:pointer;
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:var(--transicion-luz), transform .15s ease, box-shadow .3s ease;
}
.op-card:active{transform:scale(.98)}
@media (hover:hover){.op-card:hover{transform:translateY(-3px); box-shadow:var(--sombra)}}
.op-card h3{font-family:var(--serif); font-weight:600; font-size:1.05rem; line-height:1.28; margin-top:2px}
.op-card .linea{margin-top:6px; color:var(--tinta-suave); font-size:.83rem; line-height:1.42}
.op-card .meta{margin-top:auto; padding-top:11px; display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; color:var(--tinta-tenue)}
.op-card .meta svg{width:14px; height:14px}
.op-card.sorpresa{
  border-style:dashed; background:transparent; align-items:flex-start; justify-content:center;
  gap:8px; box-shadow:none;
}
.op-card.sorpresa .chispa{
  width:38px; height:38px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--sol) 22%, var(--tarjeta)); color:var(--terracota-fuerte); margin-bottom:2px;
}
.op-card.sorpresa .chispa svg{width:21px; height:21px}
.op-card.sorpresa h3{font-size:1.05rem}
.op-card.sorpresa .linea{margin-top:3px}
.op-card.tema{padding:0}
.medallon{
  position:relative; width:100%; aspect-ratio:16/8; overflow:hidden;
  display:grid; place-items:center;
}
.medallon .emoji{font-size:2rem; filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)); z-index:2}
.medallon .est{position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .8s ease}
html[data-luz="noche"] .medallon .est{opacity:.9}
.tema .cuerpo{padding:13px 15px 15px; display:flex; flex-direction:column; flex:1}
.tema .cuerpo h3{margin-top:0}

/* ---- las viñetas de los mundos: línea fina dibujada por código, que vive la hora
   (de día es tinta cálida sobre la gama clara; de noche la tinta del sitio ya es
   crema, así que la viñeta se enciende sola) ---- */
.medallon .vineta{
  position:relative; z-index:2;
  width:74%; max-width:190px; height:auto; display:block;
  color:color-mix(in srgb, var(--tinta) 80%, var(--terracota));
  opacity:.92;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.10));
  transition:color .8s ease;
}
html[data-luz="noche"] .medallon .vineta{
  filter:drop-shadow(0 0 6px rgba(242,231,217,.22));
}
.medallon .vineta *{vector-effect:non-scaling-stroke}
html[data-luz="noche"] .medallon{filter:saturate(.92) brightness(.92)}

/* ============================================================================
   LAS FAMILIAS DE COLOR DEL TALLER (2026-07-23, pedido de Christian)
   «Están todos los colores demasiado similares. Queda muy homogéneo y no llama
   la atención. Me gustaría que los colores también indiquen qué es cada cosa.»
   Antes cada medallón mezclaba su color con el blanco de la tarjeta al 26-40 %
   y todos terminaban en el mismo pastel. Ahora cada pieza tiene SU familia, con
   el color bien presente, y el degradado se arma mezclando con `--tarjeta`: de
   día eso aclara, de noche oscurece, así que las tres luces salen solas.
   Los tonos base se derivan de las variables de la casa, que ya viven la hora.
   ========================================================================= */
/* CÓMO SE ELIGIERON ESTOS COLORES (medido, no a ojo).
   El primer intento mezclaba el color de cada pieza con el de la tarjeta. Salía
   mal por dos motivos que se vieron con números: la paleta pastel de la casa
   converge al mezclarse (de noche las ocho familias quedaban a 8 puntos de
   distancia entre sí: todas el mismo marrón), y más color significaba menos
   contraste con el trazo de la viñeta.
   La cura: FIJAR EL BRILLO y variar solo el TONO, repartido cada ~45° del
   círculo. Así el contraste con el trazo es parejo para todas —y por eso se
   puede subir el color sin que nada se pierda— y la diferencia entre piezas es
   pura diferencia de color.
   Medido en las tres luces: contraste mínimo 4,5 de día y 3,8 de noche;
   distancia entre las dos familias más parecidas, 34 de día y 38 de noche
   (antes: 18 y 8). */
:root                  { --tll-s:34%; --tll-l:86%; --tll-l2:79% }
html[data-luz="noche"] { --tll-s:26%; --tll-l:31%; --tll-l2:25% }

.tll-fam-terracota { --tll-h:8 }     /* el duelo, el fuego     · Cuatro en línea */
.tll-fam-dorado    { --tll-h:48 }    /* lo de HOY, lo que brilla · La grilla del día */
.tll-fam-verde     { --tll-h:100 }   /* el paisaje              · Armar la lámina */
.tll-fam-esmeralda { --tll-h:158; --tll-l:79%; --tll-l2:71% }  /* los números que crecen · Sumas.
     En la zona verde-cian dos tonos vecinos se parecen demasiado aunque estén
     lejos en grados: a esta se le baja además el brillo para que nunca se
     confunda con la sopa (medido: pasaban de 9 de distancia a 30). */
html[data-luz="noche"] .tll-fam-esmeralda{ --tll-l:26%; --tll-l2:21% }   /* de noche, oscuro como las demás: si no, esta sola quedaba encendida */
.tll-fam-agua      { --tll-h:198 }   /* la sopa                 · La sopa del día */
.tll-fam-indigo    { --tll-h:232 }   /* la lógica               · El sudoku */
.tll-fam-violeta   { --tll-h:277 }   /* la memoria              · Parejas */
.tll-fam-ciruela   { --tll-h:325 }   /* orden y paciencia       · El 15 */

[class*="tll-fam-"] > .medallon,
.medallon[class*="tll-fam-"],
.sbr-medallon{
  background:linear-gradient(150deg,
    hsl(var(--tll-h, 48), var(--tll-s), var(--tll-l)),
    hsl(var(--tll-h, 48), var(--tll-s), var(--tll-l2)));
}
/* el apagado de noche era para los pasteles viejos: acá aplanaría lo ganado */
html[data-luz="noche"] [class*="tll-fam-"] > .medallon{filter:none}

/* El saber diario es la puerta a CINCO caminos: su medallón funde los cinco
   colores, como el «Sorpréndeme» de los cuentos funde los seis mundos. */
.tll-fam-cinco > .medallon,
.medallon.tll-fam-cinco{
  background:linear-gradient(150deg,
    hsl(8, var(--tll-s), var(--tll-l)) 0%,
    hsl(48, var(--tll-s), var(--tll-l)) 26%,
    hsl(100, var(--tll-s), var(--tll-l2)) 51%,
    hsl(232, var(--tll-s), var(--tll-l)) 76%,
    hsl(277, var(--tll-s), var(--tll-l2)) 100%);
}

/* ---- el Sorpréndeme vivo: funde las gamas de los 6 mundos, su estrella late
   y cada tanto cruza una fugaz ---- */
.op-card.sorpresa-v2{padding:0}
.medallon.sorpresa{
  background:linear-gradient(150deg, var(--fondo-suave), color-mix(in srgb, var(--celeste) 30%, var(--tarjeta)));
}
.medallon.sorpresa .vineta{width:34%; animation:sorpresa-late 4.5s ease-in-out infinite}
@keyframes sorpresa-late{0%,100%{transform:scale(1); opacity:.88} 50%{transform:scale(1.05); opacity:1}}
.medallon.sorpresa .gamas{
  position:absolute; inset:0; z-index:0; opacity:.5;
  animation:gamas-funde 42s ease-in-out infinite;
}
@keyframes gamas-funde{
  0%,100%{background:color-mix(in srgb, var(--celeste) 42%, transparent)}   /* tren */
  17%   {background:color-mix(in srgb, var(--mar) 48%, transparent)}        /* cabaña */
  33%   {background:color-mix(in srgb, var(--lavanda) 38%, transparent)}    /* pueblo */
  50%   {background:color-mix(in srgb, var(--salvia) 42%, transparent)}     /* barca */
  67%   {background:color-mix(in srgb, var(--salvia) 26%, var(--miel) 22%)} /* bosque */
  83%   {background:color-mix(in srgb, var(--terracota) 34%, transparent)}  /* desierto */
}
/* sus estrellitas se ven SIEMPRE — de día en tinta (en crema se perdían contra el
   fondo claro, lo cazó Christian 18/7); de noche en crema, como todas */
.medallon.sorpresa .est{
  opacity:.55; fill:color-mix(in srgb, var(--tinta) 66%, var(--terracota));
  transition:opacity .8s ease, fill .8s ease;
}
html[data-luz="noche"] .medallon.sorpresa .est{opacity:.9; fill:#F5EDDC}
/* la fugaz también vive la hora: cálida de día, luminosa de noche */
.medallon.sorpresa .fugaz{
  position:absolute; z-index:1; left:-18%; top:16%;
  width:15%; height:1.5px; border-radius:99px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--terracota) 70%, #FFF) 65%, var(--terracota-fuerte));
  box-shadow:0 0 6px color-mix(in srgb, var(--terracota) 55%, transparent);
  transform:rotate(9deg); opacity:0;
  animation:fugaz-cruza 9s ease-in 2.5s infinite;
}
html[data-luz="noche"] .medallon.sorpresa .fugaz{
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--sol-brillo) 85%, #FFF) 65%, #FFF);
  box-shadow:0 0 6px color-mix(in srgb, var(--sol) 60%, transparent);
}
@keyframes fugaz-cruza{
  0%   {left:-18%; top:16%; opacity:0}
  3%   {opacity:.9}
  12%  {left:104%; top:34%; opacity:0}
  100% {left:104%; top:34%; opacity:0}
}

/* ---- la hoja del cuento: la puerta previa (mundo elegido + la pregunta +
   música + el botón grande). Reusa la ropa del cancionero. ---- */
.hoja-medallon{margin-top:8px}
.hoja-medallon .medallon{aspect-ratio:16/6.5; border-radius:18px; overflow:hidden}
.hoja-medallon .medallon .vineta{width:52%; max-width:240px}
.hoja-linea{margin-top:10px; color:var(--tinta-suave); font-size:.92rem; line-height:1.45}
.hoja-cuento .cajita{margin-top:16px}
#hojaMusica:not(.on)+.canc-vol{opacity:.35; pointer-events:none}

/* ---- el cuento que quedó a medias: el chip que lo retoma donde iba ---- */
.chip-cuento{
  position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); z-index:55;
  transform:translate(-50%, 14px);
  display:flex; align-items:center; gap:10px; max-width:88vw;
  background:color-mix(in srgb, var(--tarjeta) 90%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid var(--linea); border-radius:99px;
  padding:8px 18px 8px 9px; box-shadow:var(--sombra);
  font-family:var(--sans); font-weight:700; font-size:.86rem; color:var(--tinta);
  cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .5s ease, var(--transicion-luz);
}
.chip-cuento.visible{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.chip-cuento:active{transform:translate(-50%, 0) scale(.97)}
.chip-cuento .play{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  box-shadow:0 3px 10px color-mix(in srgb, var(--sol) 45%, transparent);
}
.chip-cuento .play svg{width:13px; height:13px; fill:#7A4E26}
html[data-luz="noche"] .chip-cuento .play{background:radial-gradient(circle at 35% 30%, #CFDDEA, #8FA9C4)}
html[data-luz="noche"] .chip-cuento .play svg{fill:#2E3E52}
.chip-cuento span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- el reproductor a pantalla completa (hoy lo usan solo los cuentos) ---- */
.reproductor{
  position:fixed; inset:0; z-index:90; overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  color:var(--tinta);
}
.reproductor.abierto{opacity:1; pointer-events:auto}
.rep-escena{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--cielo1) 0%, var(--cielo2) 52%, var(--mar) 100%);
  transition:background .8s ease;
}
.rep-glow{
  position:absolute; left:50%; top:34%; width:min(70vw,440px); height:min(70vw,440px);
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, var(--sol-brillo) 0%, color-mix(in srgb,var(--sol) 50%, transparent) 30%, transparent 66%);
  opacity:.85; animation:rep-respira 7s ease-in-out infinite;
}
html[data-luz="noche"] .rep-glow{background:radial-gradient(circle, #CFDDEA 0%, rgba(143,169,196,.4) 32%, transparent 68%); opacity:.5}
@keyframes rep-respira{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.8} 50%{transform:translate(-50%,-50%) scale(1.08); opacity:1}}
.rep-mar{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(0deg, color-mix(in srgb, var(--mar) 88%, #000 6%), transparent);
  opacity:.7;
}
.rep-estrellas{position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease}
html[data-luz="noche"] .rep-estrellas{opacity:.9}
.rep-ui{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  /* arriba deja pasar la barra del sitio (que queda por encima): el volver
     y el título arrancan debajo de ella, siempre visibles */
  padding:calc(env(safe-area-inset-top) + 66px) 22px calc(env(safe-area-inset-bottom) + 30px);
}
.rep-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; transition:opacity .6s ease}
/* el volver: delicadito y con su flechita, arriba a la izquierda (pedido de
   Christian 18/7: la cruz no se entendía como retroceso y ni se veía) */
.rep-volver{
  flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:9px 15px 9px 11px; border-radius:99px;
  border:1px solid color-mix(in srgb, var(--linea) 80%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 72%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--sans); font-weight:700; font-size:.8rem; color:var(--tinta-suave);
  box-shadow:var(--sombra-chica);
  transition:transform .15s, color .25s ease, var(--transicion-luz);
}
.rep-volver:active{transform:scale(.95)}
.rep-volver:hover{color:var(--terracota)}
.rep-volver svg{width:16px; height:16px}
.rep-titulo{
  position:relative; padding:11px 15px; margin:-11px -15px; border-radius:20px;
  background:radial-gradient(135% 135% at 20% 30%, color-mix(in srgb, var(--tarjeta) 55%, transparent) 0%, transparent 70%);
  max-width:70%;
}
.rep-titulo .lugar{font-family:var(--sans); font-weight:800; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-tenue)}
.rep-titulo h2{font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(1.4rem,5.5vw,1.9rem); color:var(--tinta); margin-top:8px; line-height:1.16}
.rep-titulo .sub{font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--tinta-suave); margin-top:8px}
.rep-cerrar{
  flex:none; width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--linea) 70%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 58%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; color:var(--tinta-suave); transition:transform .15s;
}
.rep-cerrar:active{transform:scale(.9)}
.rep-cerrar svg{width:18px; height:18px}
.rep-abajo{display:flex; flex-direction:column; align-items:center; gap:18px; transition:opacity .6s ease}
/* La línea del cuento SE ARRASTRA, igual que la de la meditación (Christian,
   4/8): el dedo la lleva adelante o atrás. `touch-action:none` es lo que evita
   que el teléfono entienda el gesto como «desplazar la página» y se lleve el
   arrastre puesto; el ::before invisible agranda la zona tocable, porque una
   línea de 3 px no se acierta con el dedo. */
.rep-progreso{width:min(80vw,440px); height:3px; border-radius:99px; position:relative;
  cursor:pointer; touch-action:none;
  background:color-mix(in srgb, var(--tinta) 16%, transparent)}
.rep-progreso::before{content:""; position:absolute; left:-6px; right:-6px; top:-15px; bottom:-15px}
.rep-progreso i{position:absolute; left:0; top:0; height:100%; width:0%; border-radius:99px; background:var(--terracota); transition:width .3s linear}
.rep-progreso.arrastrando i{transition:none}
.rep-progreso i::after{content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:var(--terracota); box-shadow:0 2px 6px color-mix(in srgb,var(--terracota) 55%,transparent)}
.rep-tiempos{width:min(80vw,440px); display:flex; justify-content:space-between; font-family:var(--sans); font-weight:700; font-size:.72rem; color:var(--tinta-tenue); margin-top:-8px}
.rep-controles{display:flex; align-items:center; gap:26px}
.rep-play{
  width:70px; height:70px; border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  box-shadow:0 8px 26px color-mix(in srgb,var(--sol) 55%,transparent), 0 0 0 7px color-mix(in srgb,var(--sol) 16%,transparent);
  display:grid; place-items:center; transition:transform .18s;
}
html[data-luz="noche"] .rep-play{background:radial-gradient(circle at 35% 30%, #CFDDEA, #8FA9C4); box-shadow:0 8px 26px rgba(60,90,130,.5), 0 0 0 7px rgba(143,169,196,.2)}
.rep-play:active{transform:scale(.93)}
.rep-play svg{width:26px; height:26px; fill:#7A4E26}
html[data-luz="noche"] .rep-play svg{fill:#2E3E52}
.rep-musica{display:flex; align-items:center; gap:18px; font-family:var(--sans); font-weight:700; font-size:.78rem; color:var(--tinta-suave)}
.rep-musica .v-grupo{display:flex; align-items:center; gap:11px}
.rep-musica .v-mus{display:none}
.rep-musica .v-mus.visible{display:flex}
.rep-vol{width:120px; accent-color:var(--terracota)}
/* el dial de música del cancionero: mismo dial chiquito; sin música, se apaga */
.canc-vol{width:100%; margin-top:10px}
#cancMusica:not(.on)+.canc-vol{opacity:.35; pointer-events:none}
/* los diales finos de la barrita: voz y música con su ícono, delicaditos.
   El de música solo se ve con la música en Sí */
.b-vol{display:flex; align-items:center; gap:18px; margin-top:7px; color:var(--tinta-suave)}
.b-vol .v-grupo{display:flex; align-items:center; gap:7px; flex:1; min-width:0}
.b-vol .v-mus{display:none}
.b-vol .v-mus.visible{display:flex}
.b-vol svg{width:14px; height:14px; flex:none; opacity:.7}
.b-vol input{flex:1; width:auto}

/* los diales de volumen, FINITOS como la línea principal (los sliders nativos
   del navegador son unos ladrillos — Christian, 18/7): línea de 3 px con el
   mismo gris de la b-linea + puntito terracota de 10 px */
.vol-voz, .vol-musica{
  -webkit-appearance:none; appearance:none;
  height:14px;                /* la zona de toque queda cómoda; la línea es la finita */
  background:transparent; cursor:pointer; margin:0; padding:0;
}
/* la parte recorrida se pinta terracota hasta el puntito (como la línea principal):
   el % lo pone la fonola en --fill al mover el dial */
.vol-voz::-webkit-slider-runnable-track, .vol-musica::-webkit-slider-runnable-track{
  height:3px; border-radius:99px;
  background:linear-gradient(to right,
    var(--terracota) var(--fill, 0%),
    color-mix(in srgb, var(--tinta) 14%, transparent) var(--fill, 0%));
}
.vol-voz::-webkit-slider-thumb, .vol-musica::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; border-radius:50%; border:0;
  background:var(--terracota);
  box-shadow:0 1px 5px color-mix(in srgb, var(--terracota) 55%, transparent);
  margin-top:-3.5px;          /* centrado sobre la línea de 3 px */
}
.vol-voz::-moz-range-track, .vol-musica::-moz-range-track{
  height:3px; border-radius:99px;
  background:linear-gradient(to right,
    var(--terracota) var(--fill, 0%),
    color-mix(in srgb, var(--tinta) 14%, transparent) var(--fill, 0%));
}
.vol-voz::-moz-range-thumb, .vol-musica::-moz-range-thumb{
  width:10px; height:10px; border-radius:50%; border:0;
  background:var(--terracota);
  box-shadow:0 1px 5px color-mix(in srgb, var(--terracota) 55%, transparent);
}
.rep-preparando{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center; gap:0;
  background:color-mix(in srgb, var(--fondo) 30%, transparent);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.rep-preparando.on{opacity:1}
.rep-preparando .caja{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--tarjeta) 72%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--linea) 70%, transparent);
  border-radius:22px; padding:26px 30px; text-align:center;
}
.rep-preparando .solcito{width:40px; height:40px; animation:latir 2s ease-in-out infinite}
.rep-preparando p{font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--tinta)}
.rep-preparando small{font-family:var(--sans); font-size:.76rem; color:var(--tinta-suave)}
.reproductor.zen .rep-top, .reproductor.zen .rep-abajo{opacity:0; pointer-events:none}
.reproductor.zen.peek .rep-top, .reproductor.zen.peek .rep-abajo{opacity:1; pointer-events:auto}

/* ---- EL VELADOR: la luz para dormir (Christian, 9/8) --------------------
   Solo en los cuentos: son los que duran y los que se ponen para dormir. La
   llavecita baja la luz de la pantalla sin apagarla, y el velador dibujado
   apaga su resplandor —así se entiende de un vistazo qué hace, sin leer.
   ⛔ Ningún sitio web puede bajar el brillo real del aparato (eso lo maneja
   solo el sistema): lo que se oscurece es lo que se MUESTRA. En las pantallas
   de hoy el negro apaga los puntitos, así que el resultado es el mismo.  */
.rep-velador{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:2px 6px;
  font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.2px;
  color:var(--tinta-suave); opacity:.9; transition:opacity .3s ease;
}
.rep-velador:hover{opacity:1}
.rep-velador:active{transform:scale(.97)}
.rep-velador .vel-lampara{display:flex}
.rep-velador svg{width:20px; height:20px}
/* el resplandor del velador: lo único que se apaga */
.vel-luz{fill:var(--sol); opacity:.5; transition:opacity .7s ease}
html[data-luz="noche"] .vel-luz{fill:#CFDDEA; opacity:.42}
.rep-velador[aria-pressed="true"] .vel-luz{opacity:0}
.rep-velador[aria-pressed="true"] .vel-texto{opacity:.7}
/* la llavecita: suave y chiquita, no un interruptor de fábrica */
.vel-llave{
  width:34px; height:19px; border-radius:99px; position:relative; flex:0 0 auto;
  background:color-mix(in srgb, var(--tinta-tenue) 34%, transparent);
  transition:background .35s ease;
}
.vel-llave i{
  position:absolute; top:2.5px; left:2.5px; width:14px; height:14px; border-radius:50%;
  background:var(--tarjeta); box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .35s cubic-bezier(.4,1.4,.5,1);
}
.rep-velador[aria-pressed="true"] .vel-llave{background:var(--terracota)}
.rep-velador[aria-pressed="true"] .vel-llave i{transform:translateX(15px)}

/* el manto: la penumbra. Se come el toque, para que al querer solo volver la
   luz nadie pause el cuento sin querer.
   ⚠ Cuelga del CUERPO de la página, no del reproductor, y su encendido va en
   su PROPIA clase (.on) — no en una del reproductor. El reproductor vive
   dentro de una sección, y desde ahí su capa no alcanza a la barra de arriba:
   la penumbra tapaba todo menos la barra, que quedaba alumbrando sola.
   Probado en vivo el 9/8. */
.vel-manto{
  position:fixed; inset:0; z-index:9990; background:#04060A;
  opacity:0; pointer-events:none; transition:opacity 1.2s ease;
  display:grid; place-items:center;
}
.vel-manto.on{opacity:.96; pointer-events:auto}
.vel-manto span{
  font-family:var(--sans); font-size:.74rem; color:#5C6470; letter-spacing:.4px;
  opacity:0; transition:opacity 1.4s ease;
}
.vel-manto.on span{opacity:1}
/* la pista se retira sola: la penumbra tiene que quedar limpia */
.vel-manto.on.quieto span{opacity:0}
.rep-pista{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  padding:16px 34px 12px; opacity:0; pointer-events:none; cursor:pointer; z-index:4;
  transition:opacity .6s ease;
}
.rep-pista i{display:block; width:46px; height:4.5px; border-radius:99px;
  background:color-mix(in srgb, var(--tinta-tenue) 55%, transparent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--tarjeta) 18%, transparent)}
.reproductor.zen .rep-pista{opacity:.5; pointer-events:auto}
.reproductor.zen.peek .rep-pista{opacity:0; pointer-events:none}

@media (min-width:760px){
  .estante{grid-template-columns:1fr 1fr 1fr}
  .estante-tabs{max-width:480px}
  .fonola-caja{width:min(50vw,400px)}
}
@media (min-width:1080px){
  .estante{grid-template-columns:repeat(4,1fr)}
}

/* ================================================================
   LA VENTANA — paisajes que respiran + imágenes que calman
   (agregado al final: no tocar las secciones anteriores.
    Todo con prefijo vtn-/lam-: el molde de cuentos se calca, no se pisa)
   ================================================================ */
.vtn-intro{margin-top:20px}
.vtn-intro h1{font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,7vw,2.3rem)}
.vtn-intro p{margin-top:5px; color:var(--tinta-suave); font-size:.98rem; line-height:1.5; max-width:44ch}
.vtn-elige{margin-top:14px; text-align:center; color:var(--tinta-tenue); font-size:.88rem; font-style:italic}
.vtn-panel{display:none; animation:aparecer .45s ease}
.vtn-panel.on{display:block}
.vtn-nota{margin-top:18px; text-align:center; color:var(--tinta-tenue); font-size:.85rem; font-style:italic}

/* ---- el visor de paisajes y la lámina: pantalla completa, misma ropa ---- */
.vtn-visor, .vtn-lamina{
  position:fixed; inset:0; z-index:90; overflow:hidden;
  background:var(--fondo); color:var(--tinta);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.vtn-visor.abierto, .vtn-lamina.abierto{opacity:1; pointer-events:auto}
/* trabas a la copia casual (pedido de Christian 20/7): sin selección ni el
   menú "guardar imagen" del apretón largo en móvil. NO toca lo funcional: el
   toque que esconde los controles y el dial siguen igual (son 'click'/pointer,
   no 'callout'). La consola NUNCA se bloquea. */
.vtn-visor, .vtn-lamina, #vtnCanvas, .vtn-lamina-arte{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
#vtnCanvas{position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-user-drag:none}

/* arriba: el título con su halo (siempre legible) + el volver + el selector */
.vtn-arriba{
  position:absolute; left:0; right:0; top:0;
  padding:calc(env(safe-area-inset-top) + 62px) 16px 0;
  display:flex; flex-direction:column; gap:10px;
  transition:opacity .7s ease;
}
.vtn-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.vtn-titulo{
  position:relative; padding:11px 15px; margin:-11px -15px; border-radius:20px;
  background:radial-gradient(135% 135% at 20% 30%, color-mix(in srgb, var(--tarjeta) 55%, transparent) 0%, transparent 70%);
  max-width:68%;
}
.vtn-titulo .lugar{font-family:var(--sans); font-weight:800; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-tenue)}
.vtn-titulo h2{font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(1.35rem,5.2vw,1.8rem); color:var(--tinta); margin-top:8px; line-height:1.16}
.vtn-titulo .sub{font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--tinta-suave); margin-top:8px}
.vtn-volver{
  flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:9px 15px 9px 11px; border-radius:99px;
  border:1px solid color-mix(in srgb, var(--linea) 80%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 72%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--sans); font-weight:700; font-size:.8rem; color:var(--tinta-suave);
  box-shadow:var(--sombra-chica);
  transition:transform .15s, color .25s ease, var(--transicion-luz);
}
.vtn-volver:active{transform:scale(.95)}
.vtn-volver:hover{color:var(--terracota)}
.vtn-volver svg{width:16px; height:16px}

/* el selector de escenas: una fila deslizable de chips con su gotita de color
   (el anticipo de la gama propia de cada paisaje) */
.vtn-fila{position:relative; display:flex; max-width:100%}
.vtn-chips{
  display:flex; gap:8px; overflow-x:auto; max-width:100%;
  padding:4px 2px 12px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.vtn-chips::-webkit-scrollbar{display:none}
.vtn-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:1px solid color-mix(in srgb, var(--linea) 70%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 62%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-radius:99px; padding:8px 14px 8px 9px; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:.8rem; color:var(--tinta-suave);
  white-space:nowrap;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.vtn-chip .gota{
  width:18px; height:18px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
}
.vtn-chip.on{
  background:var(--tarjeta); color:var(--terracota);
  box-shadow:var(--sombra-chica); border-color:transparent;
  transform:translateY(-1px);
}
/* «Más ›» / «‹‹»: avisan que hay más escenas hacia cada lado; el fundido tapa
   cualquier chip a medio cortar (calcado de la galería aprobada) */
.vtn-mas, .vtn-menos{
  display:flex; align-items:center; position:absolute; top:50%; transform:translateY(-58%); z-index:2;
  border:0; cursor:pointer; pointer-events:auto;
  font-family:var(--sans); font-weight:800; font-size:13px; color:var(--terracota);
  border-radius:99px; transition:opacity .3s;
}
.vtn-mas{right:-1px; padding:9px 12px 9px 30px;
  background:linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--fondo) 92%, transparent) 26px)}
.vtn-menos{left:-1px; padding:9px 30px 9px 12px; letter-spacing:.05em;
  background:linear-gradient(270deg, transparent 0, color-mix(in srgb, var(--fondo) 92%, transparent) 26px)}
.vtn-mas.oculto, .vtn-menos.oculto{opacity:0; pointer-events:none}

/* el botoncito del caleido: cambia gama y tipología (solo se ve en esa escena) */
.vtn-gama{
  position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom) + 96px);
  width:46px; height:46px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--linea) 70%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 62%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:var(--sombra-chica); display:none; place-items:center; cursor:pointer;
  color:var(--tinta-suave); transition:transform .25s ease, opacity .7s ease; z-index:5;
}
.vtn-gama:active{transform:rotate(40deg) scale(.9)}
.vtn-gama svg{width:21px; height:21px}

/* abajo: el dial finito de la música (la capa de los cuentos, calcada) */
.vtn-abajo{
  position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 26px);
  display:flex; justify-content:center; transition:opacity .7s ease;
}
.vtn-vmus{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:99px;
  border:1px solid color-mix(in srgb, var(--linea) 70%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 62%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:var(--sombra-chica); color:var(--tinta-suave);
}
.vtn-vmus svg{width:15px; height:15px; flex:none; opacity:.75}
.vtn-vmus input{width:130px}
/* «otro tema»: saltar la música con delicadeza */
.vtn-otro{
  flex:none; width:30px; height:30px; margin:-4px -6px -4px 0;
  border:0; background:transparent; padding:0; cursor:pointer;
  display:grid; place-items:center; color:var(--tinta-suave);
  transition:color .25s ease, transform .15s ease;
}
.vtn-otro:active{transform:scale(.86)}
.vtn-otro:hover{color:var(--terracota)}
.vtn-otro svg{width:16px; height:16px; opacity:1}

/* la pistita del descanso: cuando la interfaz se esconde, queda este indicio */
.vtn-pista{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  padding:16px 34px 12px; opacity:0; pointer-events:none; cursor:pointer; z-index:4;
  transition:opacity .6s ease;
}
.vtn-pista i{display:block; width:46px; height:4.5px; border-radius:99px;
  background:color-mix(in srgb, var(--tinta-tenue) 55%, transparent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--tarjeta) 18%, transparent)}
/* el descanso (zen): si nadie toca nada, todo se esconde y queda el paisaje */
.vtn-visor.zen .vtn-arriba, .vtn-visor.zen .vtn-abajo, .vtn-visor.zen .vtn-gama,
.vtn-lamina.zen .vtn-arriba, .vtn-lamina.zen .vtn-abajo{opacity:0; pointer-events:none}
.vtn-visor.zen .vtn-pista, .vtn-lamina.zen .vtn-pista{opacity:.5; pointer-events:auto}

/* ---- la lámina: el fondo suave que vive la hora + el arte centrado ---- */
.vtn-lamina-fondo{position:absolute; inset:0; transition:var(--transicion-luz)}
.vtn-fondo-faro{background:linear-gradient(180deg, var(--celeste-suave) 0%, var(--fondo) 46%, color-mix(in srgb, var(--celeste) 26%, var(--fondo)) 100%)}
.vtn-fondo-taza{background:linear-gradient(180deg, var(--rosa-suave) 0%, var(--fondo) 48%, var(--miel-suave) 100%)}
.vtn-fondo-luna{background:linear-gradient(180deg, var(--celeste-suave) 0%, var(--fondo) 52%, color-mix(in srgb, var(--mar) 38%, var(--fondo)) 100%)}
.vtn-fondo-luciernagas{background:linear-gradient(180deg, color-mix(in srgb, var(--salvia) 16%, var(--fondo)) 0%, var(--fondo) 50%, var(--salvia-suave) 100%)}
.vtn-fondo-otono{background:linear-gradient(180deg, var(--miel-suave) 0%, var(--fondo) 50%, var(--rosa-suave) 100%)}
.vtn-fondo-montana{background:linear-gradient(180deg, var(--lavanda-suave) 0%, var(--fondo) 52%, var(--celeste-suave) 100%)}
.vtn-fondo-pradera{background:linear-gradient(180deg, var(--celeste-suave) 0%, var(--fondo) 46%, var(--salvia-suave) 100%)}
.vtn-fondo-estanque{background:linear-gradient(180deg, color-mix(in srgb, var(--salvia) 14%, var(--fondo)) 0%, var(--fondo) 48%, color-mix(in srgb, var(--celeste) 30%, var(--fondo)) 100%)}
.vtn-fondo-fogata{background:linear-gradient(180deg, color-mix(in srgb, var(--celeste) 18%, var(--fondo)) 0%, var(--fondo) 46%, var(--miel-suave) 100%)}
.vtn-fondo-pueblito{background:linear-gradient(180deg, var(--lavanda-suave) 0%, var(--fondo) 52%, var(--celeste-suave) 100%)}
.vtn-fondo-muelle{background:linear-gradient(180deg, color-mix(in srgb, var(--celeste) 22%, var(--fondo)) 0%, var(--fondo) 48%, color-mix(in srgb, var(--mar) 42%, var(--fondo)) 100%)}
.vtn-fondo-globo{background:linear-gradient(180deg, var(--celeste-suave) 0%, var(--rosa-suave) 55%, var(--salvia-suave) 100%)}
.vtn-lamina-arte{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:calc(env(safe-area-inset-top) + 118px) 20px calc(env(safe-area-inset-bottom) + 96px);
}
.vtn-lamina-arte svg{width:100%; height:100%; max-width:560px}

/* la animación tenue de las láminas (suave, nunca protagonista — pero que se
   NOTE sin prestar atención: ajuste de Christian 19/7, «un diez por ciento más») */
.lam-titila{animation:lam-titila 3.8s ease-in-out infinite}
@keyframes lam-titila{0%,100%{opacity:.2} 50%{opacity:1}}
.lam-glow{animation:lam-glow 6s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes lam-glow{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.09)}}
.lam-haz{animation:lam-haz 10s ease-in-out infinite alternate}
@keyframes lam-haz{from{transform:rotate(-11deg)} to{transform:rotate(11deg)}}
.lam-ola{animation:lam-ola 7s ease-in-out infinite alternate}
@keyframes lam-ola{from{transform:translateX(-13px)} to{transform:translateX(13px)}}
.lam-humo{opacity:0; animation:lam-humo 8s ease-in-out infinite}
@keyframes lam-humo{
  0%{transform:translateY(14px); opacity:0}
  18%{opacity:.8}
  70%{opacity:.5}
  100%{transform:translateY(-46px); opacity:0}
}
.lam-llama{animation:lam-llama 2.3s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%}
@keyframes lam-llama{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.09,1.16) rotate(-3deg)}
  70%{transform:scale(.95,.92) rotate(3deg)}
}
/* hojas y copos que caen sin apuro */
.lam-cae{opacity:0; animation:lam-cae 8s linear infinite}
@keyframes lam-cae{
  0%{transform:translateY(-34px); opacity:0}
  12%{opacity:1}
  80%{opacity:.85}
  100%{transform:translateY(50px); opacity:0}
}
/* bruma y nubes que pasean despacio */
.lam-deriva{animation:lam-deriva 13s ease-in-out infinite alternate}
@keyframes lam-deriva{from{transform:translateX(-22px)} to{transform:translateX(22px)}}
/* las ondas del agua, que se abren y se van */
.lam-abre{opacity:0; animation:lam-abre 5.2s ease-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes lam-abre{
  0%{transform:scale(.25); opacity:.85}
  70%{opacity:.32}
  100%{transform:scale(1.14); opacity:0}
}
/* el pasto y los juncos, que el viento mece */
.lam-mece{animation:lam-mece 4s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:50% 100%}
@keyframes lam-mece{from{transform:rotate(-5deg)} to{transform:rotate(5deg)}}
/* las chispas de la fogata */
.lam-chispa{opacity:0; animation:lam-chispa 3.2s ease-out infinite}
@keyframes lam-chispa{
  0%{transform:translateY(8px); opacity:0}
  15%{opacity:1}
  100%{transform:translateY(-42px); opacity:0}
}
/* el globo, que flota despacio */
.lam-flota{animation:lam-flota 8s ease-in-out infinite alternate}
@keyframes lam-flota{from{transform:translateY(-13px)} to{transform:translateY(13px)}}

/* ================================================================
   EL SILLÓN — TUS GUARDADAS (las sesiones exactas, con su estrellita)
   (agregado al final: no tocar las secciones anteriores)
   ================================================================ */
.gda-zona{margin-top:36px}
.gda-lista{
  margin-top:12px; display:flex; flex-direction:column; gap:8px;
  max-height:326px; overflow-y:auto; padding:2px 6px 2px 2px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--tinta-tenue) 45%, transparent) transparent;
}
.gda-fila{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:16px;
  padding:9px 8px 9px 10px; cursor:pointer;
  transition:var(--transicion-luz), transform .15s ease, border-color .25s ease;
}
.gda-fila:active{transform:scale(.985)}
@media (hover:hover){.gda-fila:hover{border-color:color-mix(in srgb, var(--terracota) 45%, var(--linea))}}
.gda-play{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--sol-brillo), var(--sol));
  box-shadow:0 3px 10px color-mix(in srgb, var(--sol) 40%, transparent);
}
.gda-play svg{width:12px; height:12px; fill:#7A4E26}
html[data-luz="noche"] .gda-play{background:radial-gradient(circle at 35% 30%, #CFDDEA, #8FA9C4)}
html[data-luz="noche"] .gda-play svg{fill:#2E3E52}
.gda-cuerpo{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.gda-tit{font-family:var(--serif); font-weight:600; font-size:.95rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gda-det{font-family:var(--sans); font-weight:600; font-size:.73rem; color:var(--tinta-tenue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gda-star{
  flex:none; width:34px; height:34px; border:0; background:transparent; cursor:pointer; padding:0;
  display:grid; place-items:center; color:#D99A3D;
  transition:transform .15s ease, opacity .2s ease;
}
.gda-star:active{transform:scale(.85)}
.gda-star svg{width:17px; height:17px; fill:#E9B87A; stroke:#B97F2E; stroke-width:1.6}

/* la estrellita del reproductor: guardar lo que está sonando (cuento o
   meditación a tu medida), junto al volver */
.rep-acciones{flex:none; display:flex; align-items:center; gap:8px}
.rep-guardar{
  flex:none; width:39px; height:39px; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--linea) 80%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 72%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; color:var(--tinta-suave);
  box-shadow:var(--sombra-chica);
  transition:transform .15s, color .25s ease, var(--transicion-luz);
}
.rep-guardar:active{transform:scale(.9)}
.rep-guardar svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8}
.rep-guardar.guardada{color:#D99A3D}
.rep-guardar.guardada svg{fill:#E9B87A; stroke:#B97F2E}

@media (min-width:760px){
  .vtn-tabs{max-width:480px}
  .vtn-arriba{padding:calc(env(safe-area-inset-top) + 70px) 30px 0}
  .vtn-titulo h2{font-size:1.9rem}
  .vtn-fila{justify-content:flex-end}
  .vtn-chips{padding-bottom:8px}
}

/* ================================================================
   EL TALLER — gimnasia de la mente (F1, 2026-07-22)
   Mirada adulta: acá se entrena, no se "juega". Prefijo tll-.
   ================================================================ */

.tll-intro{margin-top:20px}
.tll-intro h1{font-family:var(--serif); font-size:1.8rem; color:var(--tinta)}
.tll-intro p{color:var(--tinta-suave); max-width:520px; margin-top:6px; line-height:1.55}

.tll-mesa{margin-top:4px}

/* ---- página de ejercicio ---- */
.pantalla-taller .columna{max-width:560px}
.tll-ej-cab{margin-top:18px}
.tll-ej-cab h1{font-family:var(--serif); font-size:1.65rem; color:var(--tinta)}
.tll-ej-cab p{color:var(--tinta-suave); margin-top:6px; line-height:1.5; font-size:.95rem}

.tll-controles{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:16px 0 12px}
.tll-niveles{display:flex; gap:6px; flex-wrap:wrap}
.tll-niveles button{
  appearance:none; border:1.5px solid var(--linea); background:var(--tarjeta);
  color:var(--tinta-suave); font-family:var(--sans); font-size:.82rem; font-weight:700;
  padding:7px 13px; border-radius:999px; cursor:pointer; transition:var(--transicion-luz), transform .15s ease;
}
.tll-niveles button:active{transform:scale(.95)}
.tll-niveles button.on{background:var(--terracota); border-color:var(--terracota); color:#FFF8EF}
.tll-reglas-btn{
  appearance:none; border:none; background:none; color:var(--terracota-fuerte);
  font-family:var(--sans); font-size:.85rem; font-weight:700; cursor:pointer;
  padding:7px 2px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}

/* ---- el marco del ejercicio (la mesa servida) ---- */
.tll-marco{
  background:var(--tarjeta); border-radius:var(--radio); box-shadow:var(--sombra-chica);
  padding:16px 14px 18px; transition:var(--transicion-luz);
}
.tll-estado{
  min-height:22px; text-align:center; color:var(--tinta-suave);
  font-size:.9rem; margin-bottom:12px;
}
.tll-estado.pensando{color:var(--tinta-tenue)}
.tll-estado.pensando::after{content:'…'; animation:tllPuntitos 1.2s infinite}
@keyframes tllPuntitos{0%,100%{opacity:.2} 50%{opacity:1}}
.tll-pie{display:flex; justify-content:center; margin-top:14px}

.tll-btn{
  appearance:none; border:none; cursor:pointer; font-family:var(--sans);
  background:var(--terracota); color:#FFF8EF; font-weight:800; font-size:.95rem;
  padding:12px 22px; border-radius:999px; box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), transform .15s ease; text-decoration:none; text-align:center;
}
.tll-btn:active{transform:scale(.96)}
.tll-btn-suave{
  appearance:none; cursor:pointer; font-family:var(--sans); display:inline-block;
  background:none; border:1.5px solid var(--linea); color:var(--tinta-suave);
  font-weight:700; font-size:.88rem; padding:10px 18px; border-radius:999px;
  transition:var(--transicion-luz), transform .15s ease; text-decoration:none; text-align:center;
}
.tll-btn-suave:active{transform:scale(.96)}

/* ---- velos y hojas (reglas / cierre) ---- */
.tll-velo{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:22px; background:color-mix(in srgb, var(--velo) 55%, rgba(40,32,25,.45));
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.tll-velo.oculto{display:none}
.tll-hoja{
  background:var(--tarjeta); border-radius:var(--radio); box-shadow:var(--sombra);
  padding:24px 22px; max-width:430px; width:100%; max-height:82vh; overflow:auto;
}
.tll-hoja h2{font-family:var(--serif); color:var(--tinta); font-size:1.3rem; margin-bottom:12px}
.tll-hoja ol{margin:0 0 12px 20px; display:grid; gap:9px}
.tll-hoja ol li{color:var(--tinta-suave); line-height:1.5; font-size:.93rem}
.tll-hoja ol li strong, .tll-hoja ol li em{color:var(--tinta)}
.tll-hoja-nota{
  background:var(--fondo-suave); border-radius:14px; padding:10px 13px;
  color:var(--tinta-suave); font-size:.86rem; line-height:1.5; margin-bottom:16px;
}
.tll-hoja .tll-btn{display:block; width:100%}
.tll-hoja-fin{text-align:center}
.tll-hoja-fin h2{margin-bottom:6px}
.tll-hoja-fin p{color:var(--tinta-suave); line-height:1.5; font-size:.93rem; margin-bottom:16px}
.tll-fin-sol .solcito{width:40px; height:40px; margin:0 auto 10px}
.tll-hoja-botones{display:grid; gap:9px}

/* el cierre de ronda vive DEBAJO del tablero — jamás lo tapa (regla 22/7) */
.tll-cierre{
  margin-top:18px; padding-top:18px; text-align:center;
  border-top:1.5px dashed var(--linea);
  animation:tllAparece .55s ease;
}
.tll-cierre[hidden]{display:none}
.tll-cierre h2{font-family:var(--serif); color:var(--tinta); font-size:1.25rem; margin-bottom:5px}
.tll-cierre p{color:var(--tinta-suave); line-height:1.5; font-size:.92rem; margin-bottom:14px}
.tll-cierre .tll-hoja-botones{max-width:340px; margin:0 auto}
@keyframes tllAparece{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---- Cuatro en línea ---- */
.tll-c4-tablero{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;
  max-width:440px; margin:0 auto; padding:10px; overflow:hidden;
  background:color-mix(in srgb, var(--miel-suave) 55%, var(--tarjeta));
  border-radius:18px; transition:var(--transicion-luz);
}
.tll-c4-celda{
  appearance:none; border:none; cursor:pointer; position:relative;
  aspect-ratio:1; border-radius:50%; padding:0;
  background:var(--fondo); box-shadow:inset 0 1px 4px rgba(80,65,50,.18);
  transition:var(--transicion-luz);
}
@media (hover:hover){ .tll-c4-celda:hover{background:color-mix(in srgb, var(--sol-brillo) 30%, var(--fondo))} }
.tll-ficha{
  position:absolute; inset:9%; border-radius:50%; pointer-events:none;
  transform:translateY(calc(var(--caida) * -115%)); opacity:.9;
  transition:transform .5s cubic-bezier(.55,0,.55,1.25);
}
.tll-ficha.abajo{transform:translateY(0); opacity:1}
.tll-ficha.mia{background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--rosa) 55%, var(--terracota)), var(--terracota-fuerte))}
.tll-ficha.taller{background:radial-gradient(circle at 34% 30%, var(--tinta-suave), var(--tinta))}

/* la línea ganadora se enciende en DORADO ficha por ficha y el resto se atenúa:
   que se vea al instante POR QUÉ terminó la ronda (pedido de Christian 22/7) */
.tll-c4-tablero.con-ganadora .tll-ficha:not(.gana){opacity:.38; filter:saturate(.7)}
.tll-ficha.gana{
  background:radial-gradient(circle at 34% 30%, var(--sol-brillo), var(--sol) 60%, color-mix(in srgb, var(--miel) 78%, var(--tinta)));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sol) 65%, transparent), 0 0 16px var(--sol-brillo);
  animation:tllGana .7s cubic-bezier(.3,1.6,.55,1) both, tllLate 1.6s ease .9s infinite;
  opacity:1;
}
@keyframes tllGana{0%{transform:scale(.85)} 55%{transform:scale(1.22)} 100%{transform:scale(1)}}
@keyframes tllLate{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--sol) 65%, transparent), 0 0 16px var(--sol-brillo)} 50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--sol) 30%, transparent), 0 0 24px var(--sol-brillo)}}

/* ---- El sudoku ---- */
.tll-sd-grid{
  display:grid; grid-template-columns:repeat(9, 1fr);
  max-width:440px; margin:0 auto;
  border:2px solid var(--tinta-suave); border-radius:12px; overflow:hidden;
  background:var(--tarjeta); transition:var(--transicion-luz);
}
.tll-sd-celda{
  appearance:none; cursor:pointer; position:relative; padding:0;
  aspect-ratio:1; border:1px solid var(--linea); border-radius:0; background:var(--tarjeta);
  font-family:var(--serif); font-size:clamp(.95rem, 4.2vw, 1.35rem);
  color:var(--terracota-fuerte); transition:background-color .2s ease, color .2s ease;
}
.tll-sd-celda.fija{color:var(--tinta); font-weight:700}
.tll-sd-celda.caja-der{border-right:2px solid var(--tinta-suave)}
.tll-sd-celda.caja-abajo{border-bottom:2px solid var(--tinta-suave)}
.tll-sd-celda.guia{background:var(--fondo-suave)}
.tll-sd-celda.igual{background:color-mix(in srgb, var(--miel-suave) 65%, var(--tarjeta))}
.tll-sd-celda.sel{background:color-mix(in srgb, var(--sol-brillo) 55%, var(--tarjeta)); box-shadow:inset 0 0 0 2px var(--sol)}
.tll-sd-celda.choca{color:var(--terracota); background:color-mix(in srgb, var(--rosa-suave) 70%, var(--tarjeta))}
.tll-sd-celda.mal{background:var(--rosa-suave); color:var(--terracota)}
.tll-sd-celda.regalo{animation:tllRegalo .9s ease}
@keyframes tllRegalo{0%{background:var(--sol-brillo)} 100%{background:var(--tarjeta)}}
.tll-sd-celda .notas{
  position:absolute; inset:1px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  pointer-events:none;
}
.tll-sd-celda .notas i{
  font-style:normal; font-family:var(--sans); font-size:clamp(.42rem, 1.7vw, .58rem);
  color:var(--tinta-tenue); display:flex; align-items:center; justify-content:center; line-height:1;
}

.tll-sd-botonera{max-width:440px; margin:14px auto 0}
.tll-sd-numeros{display:grid; grid-template-columns:repeat(9, 1fr); gap:5px}
.tll-sd-numeros button{
  appearance:none; cursor:pointer; border:1.5px solid var(--linea); background:var(--fondo);
  border-radius:10px; min-height:44px; font-family:var(--serif); font-size:1.15rem;
  color:var(--tinta); transition:var(--transicion-luz), transform .12s ease; padding:0;
}
.tll-sd-numeros button:active{transform:scale(.9); background:var(--sol-brillo)}
.tll-sd-acciones{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:8px}
.tll-sd-acciones button{
  appearance:none; cursor:pointer; border:1.5px solid var(--linea); background:none;
  border-radius:12px; padding:8px 4px; font-family:var(--sans); font-size:.72rem; font-weight:700;
  color:var(--tinta-suave); display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:var(--transicion-luz), transform .12s ease;
}
.tll-sd-acciones button:active{transform:scale(.94)}
.tll-sd-acciones button svg{width:19px; height:19px}
.tll-sd-acciones button.on{border-color:var(--terracota); color:var(--terracota-fuerte); background:var(--rosa-suave)}

/* ---- Parejas ---- */
.tll-pj-tablero{display:grid; gap:8px; max-width:460px; margin:0 auto}
.tll-pj-tablero.cols-4{grid-template-columns:repeat(4, 1fr)}
.tll-pj-tablero.cols-5{grid-template-columns:repeat(5, 1fr)}
.tll-pj-tablero.cols-6{grid-template-columns:repeat(6, 1fr); gap:6px}
.tll-pj-carta{
  appearance:none; border:none; background:none; cursor:pointer; padding:0;
  position:relative; aspect-ratio:1/1.12; perspective:600px;
  transform-style:preserve-3d; transition:transform .5s ease; transform:rotateY(0);
}
.tll-pj-carta.vuelta, .tll-pj-carta.lograda{transform:rotateY(180deg)}
.tll-pj-carta .cara{
  position:absolute; inset:0; border-radius:13px; display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:var(--transicion-luz);
}
.tll-pj-carta .dorso{
  background:var(--tarjeta); border:1.5px solid var(--linea); color:var(--tinta-tenue);
  box-shadow:var(--sombra-chica);
}
.tll-pj-carta .dorso svg{width:56%; height:56%}
.tll-pj-carta .frente{
  transform:rotateY(180deg); color:var(--tinta);
  background:linear-gradient(150deg, var(--fondo), var(--fondo-suave));
  border:1.5px solid var(--linea); box-shadow:var(--sombra-chica);
}
.tll-pj-carta .frente svg{width:62%; height:62%}
.tll-pj-carta.lograda{cursor:default}
.tll-pj-carta.lograda .frente{
  border-color:var(--sol); background:linear-gradient(150deg, color-mix(in srgb, var(--sol-brillo) 40%, var(--fondo)), var(--fondo-suave));
  animation:tllLograda .6s ease;
}
@keyframes tllLograda{0%{transform:rotateY(180deg) scale(1)} 45%{transform:rotateY(180deg) scale(1.07)} 100%{transform:rotateY(180deg) scale(1)}}

/* ---- Las piezas del día (F2): comunes ---- */
.tll-tema{font-family:var(--serif); color:var(--tinta); font-style:italic}
.tll-estado-chico{color:var(--tinta-suave); font-size:.88rem; min-height:20px}
.tll-manana{margin-top:12px; color:var(--tinta-tenue); font-size:.85rem}

/* ---- La grilla del día ---- */
.tll-gr-palabras{display:grid; gap:15px; --caja:28px}
.tll-gr-fila .pista{font-size:.88rem; color:var(--tinta-suave); margin-bottom:6px; line-height:1.45}
.tll-gr-fila .celdas{display:flex; gap:3px}
.tll-gr-check{ /* el tilde de la fila: aparece cuando la palabra queda completa */
  display:inline-block; margin-left:7px; font-family:var(--sans); font-weight:800;
  opacity:0; transition:opacity .3s ease;
}
.tll-gr-check::before{content:''}
.tll-gr-fila.bien .tll-gr-check{opacity:1; color:#6f9873}
.tll-gr-fila.bien .tll-gr-check::before{content:'✓'}
.tll-gr-fila.duda .tll-gr-check{opacity:.7; color:var(--terracota)}
.tll-gr-fila.duda .tll-gr-check::before{content:'✕'}
.tll-gr-caja{
  appearance:none; cursor:pointer; position:relative; padding:0; flex:none;
  width:var(--caja); height:var(--caja); border-radius:7px;
  border:1.5px solid var(--linea); background:var(--fondo);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:calc(var(--caja) * .52); color:var(--terracota-fuerte);
  transition:var(--transicion-luz);
}
.tll-gr-caja.dorada{background:color-mix(in srgb, var(--sol-brillo) 45%, var(--fondo)); border-color:var(--sol)}
.tll-gr-caja.sel{box-shadow:inset 0 0 0 2px #6FA8C9; background:#E4F2F9} /* celestito claro: se distingue de la columna dorada */
.tll-gr-caja.mal{background:var(--rosa-suave); color:var(--terracota)}
.tll-gr-caja.regalo{animation:tllRegalo .9s ease}
.tll-gr-caja.viva{
  background:radial-gradient(circle at 34% 30%, var(--sol-brillo), color-mix(in srgb, var(--sol) 70%, var(--fondo)));
  border-color:var(--sol); color:var(--tinta); animation:tllLetraViva .5s ease;
}

.tll-gr-frase-tit{margin:20px 0 10px; font-family:var(--serif); color:var(--tinta); font-size:1.05rem}
.tll-gr-frase{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; padding-bottom:4px}
.tll-gr-frase .grupo{display:flex; gap:3px}
.tll-gr-fcaja{
  /* la medida la pone el JS (--fcaja) para que la palabra más larga de la
     frase entre SIEMPRE a lo ancho, también en el teléfono */
  width:var(--fcaja, 26px); height:calc(var(--fcaja, 26px) * 1.22); position:relative;
  border-bottom:2px solid var(--tinta-tenue);
  display:flex; align-items:flex-end; justify-content:center;
  font-family:var(--serif); color:var(--tinta); font-size:calc(var(--fcaja, 26px) * .58); padding-bottom:2px;
}
.tll-gr-fcaja i{position:absolute; top:0; left:1px; font-style:normal; font-family:var(--sans); font-size:max(7px, calc(var(--fcaja, 26px) * .28)); color:var(--tinta-tenue); line-height:1}
.tll-gr-fcaja.viva{border-color:var(--sol); color:var(--terracota-fuerte); animation:tllLetraViva .5s ease}
@keyframes tllLetraViva{0%{transform:translateY(4px); opacity:.3} 100%{transform:none; opacity:1}}

.tll-gr-entrada{ /* sin teclado propio: esta entrada invisible sostiene el foco y
  levanta el teclado NATIVO del teléfono; letra 16px = el iPhone no hace zoom */
  position:fixed; bottom:0; left:0; width:1px; height:1px; padding:0; border:0; outline:0;
  background:transparent; color:transparent; caret-color:transparent; font-size:16px; opacity:.01;
}
.tll-gr-acciones{grid-template-columns:repeat(3, 1fr)}

/* ---- La sopa del día ---- */
.tll-sp-grilla{
  display:grid; grid-template-columns:repeat(var(--dim, 10), 1fr); gap:2px;
  max-width:440px; margin:0 auto;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.tll-sp-celda{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:clamp(.92rem, 3.6vw, 1.25rem); color:var(--tinta);
  background:var(--fondo); border-radius:7px;
  transition:background-color .2s ease, color .2s ease;
}
.tll-sp-celda.marcando{background:color-mix(in srgb, var(--sol-brillo) 65%, var(--fondo)); color:var(--tinta)}
.tll-sp-celda.hallada.tono-1{background:var(--rosa-suave)}
.tll-sp-celda.hallada.tono-2{background:var(--salvia-suave)}
.tll-sp-celda.hallada.tono-3{background:var(--celeste-suave)}
.tll-sp-celda.hallada.tono-4{background:var(--miel-suave)}
.tll-sp-celda.hallada.tono-5{background:var(--lavanda-suave)}
.tll-sp-celda.hallada.tono-6{background:color-mix(in srgb, var(--rosa) 45%, var(--fondo))}
.tll-sp-celda.hallada.tono-7{background:color-mix(in srgb, var(--celeste) 40%, var(--fondo))}
.tll-sp-celda.frase{background:color-mix(in srgb, var(--sol-brillo) 60%, var(--fondo)); color:var(--terracota-fuerte); animation:tllLetraViva .5s ease}

.tll-sp-saber{
  margin:12px auto 0; max-width:440px; background:var(--fondo-suave); border-radius:12px;
  padding:10px 14px; font-size:.88rem; color:var(--tinta-suave); line-height:1.5;
}
.tll-sp-saber b{color:var(--tinta)}
.tll-sp-saber.recien{animation:tllAparece .55s ease}
.tll-sp-lista-tit{margin:16px 0 8px; text-align:center; color:var(--tinta-tenue); font-size:.8rem}
.tll-sp-lista{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:460px; margin:0 auto}
.tll-sp-chip{border:1.5px solid var(--linea); border-radius:999px; padding:4px 12px; font-size:.8rem; color:var(--tinta-suave); transition:var(--transicion-luz)}
.tll-sp-chip.hallada{text-decoration:line-through; opacity:.55; border-color:var(--sol)}

/* ---- compu: aire y tamaños ---- */
@media (min-width:760px){
  .tll-intro h1{font-size:2rem}
  .tll-ej-cab h1{font-size:1.85rem}
  .tll-marco{padding:22px 22px 24px}
  .tll-sd-numeros button{font-size:1.3rem}
  .tll-sd-acciones button{font-size:.78rem}
}

/* ============================================================================
   EL TALLER · F4 — EL SABER DIARIO (2026-07-23)
   La hoja de libro que Christian aprobó en el boceto («la muestra es hermosa»),
   portada tal cual a la pantalla real. Prefijo propio `sbr-`, sin pisar nada.
   La lámina vive la hora del día sola: sus colores son variables de la casa.
   ========================================================================= */

/* La hoja del saber respira más que el resto del Taller: es para LEER, y así
   la aprobó Christian en el boceto (760 px de hoja). En el teléfono no cambia
   nada; en la compu el renglón queda del largo de un libro y no de una tira. */
#taller-saber .columna,
#taller-saber-leccion .columna{max-width:812px}

/* ---- la vitrina de las series ---- */
.sbr-vitrina{display:grid; gap:14px; margin-top:6px}
.sbr-serie-card{
  display:flex; align-items:stretch; text-decoration:none; color:inherit;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio-ch);
  box-shadow:var(--sombra-chica); overflow:hidden;
  transition:var(--transicion-luz), transform .16s ease;
}
a.sbr-serie-card:hover{transform:translateY(-2px)}

/* El dibujo alusivo de cada camino (pedido de Christian, 23/7): una viñeta de
   línea propia por serie, sobre el color de su familia. Son chicas y van en el
   HTML a propósito — el blindaje no se les aplica (una foto las copia igual y
   no justifican el peso; regla de `blindaje-material-visual.md`). */
.sbr-medallon{
  flex:0 0 158px; display:grid; place-items:center; padding:8px 6px;
  color:color-mix(in srgb, var(--tinta) 82%, var(--terracota));
  transition:var(--transicion-luz);
}
/* Cada camino con SU color, del mismo idioma que las familias del Taller: el
   color dice de qué se trata antes de leer una sola palabra. Los cinco son los
   mismos que funde el medallón de la tarjeta de la mesa. */
.sbr-serie-card[data-lamina="ciudad"]  .sbr-medallon{--tll-h:8}
.sbr-serie-card[data-lamina="palabra"] .sbr-medallon{--tll-h:48}
.sbr-serie-card[data-lamina="obra"]    .sbr-medallon{--tll-h:100}
.sbr-serie-card[data-lamina="cielo"]   .sbr-medallon{--tll-h:232}
.sbr-serie-card[data-lamina="escena"]  .sbr-medallon{--tll-h:277}
.sbr-vineta{width:100%; height:auto; display:block; overflow:visible; opacity:.74}
a.sbr-serie-card:hover .sbr-vineta{opacity:.95}

.sbr-serie-cuerpo{flex:1; padding:16px 18px 15px; min-width:0}
.sbr-serie-cuerpo h3{font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--tinta); line-height:1.25}
.sbr-serie-cuerpo p{color:var(--tinta-suave); font-size:.9rem; line-height:1.45; margin-top:4px}
.sbr-serie-pie{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:11px}
.sbr-chip{
  font-size:.76rem; font-weight:700; border-radius:999px; padding:4px 12px;
  border:1px solid var(--linea); color:var(--tinta-suave); background:var(--fondo);
}
.sbr-chip.lista{background:var(--sol); border-color:var(--sol); color:#4A3213}
.sbr-vas{font-family:var(--serif); font-size:.86rem; color:var(--tinta-tenue)}
.sbr-serie-card.dormida{opacity:.72}

/* ---- el aviso de relectura (arriba de la hoja) ---- */
.sbr-relectura{
  max-width:760px; margin:14px auto 0; padding:12px 18px; border-radius:var(--radio-ch);
  background:var(--miel-suave); border:1px solid var(--linea);
  font-family:var(--serif); font-style:italic; font-size:.98rem; line-height:1.5;
  color:var(--tinta-suave); text-align:center; transition:var(--transicion-luz);
}
.sbr-antes-esta{border-color:var(--sol) !important; background:var(--miel-suave) !important; color:var(--tinta) !important}
.sbr-antes-marca{font-style:italic; color:var(--tinta-tenue); font-size:.82rem; margin-left:6px}

/* ---- la hoja de la lección ---- */
.sbr-hoja{
  max-width:760px; margin:14px auto 0; background:var(--tarjeta); border-radius:var(--radio);
  box-shadow:var(--sombra); overflow:hidden; transition:var(--transicion-luz);
}
.sbr-lamina{
  position:relative; aspect-ratio:3/2; background:var(--fondo-suave);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.sbr-lamina svg{display:block; width:100%; height:100%}
.sbr-cuerpo{padding:26px 30px 30px}
.sbr-encabezado{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:12px}
.sbr-serie{font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-tenue)}
.sbr-leccion{font-family:var(--serif); font-size:.9rem; color:var(--tinta-tenue); white-space:nowrap}
.sbr-titulo{font-family:var(--serif); font-weight:600; font-size:1.75rem; line-height:1.15; letter-spacing:-.01em; color:var(--tinta); margin-bottom:10px}
.sbr-bajada{font-family:var(--serif); font-style:italic; font-size:1.06rem; line-height:1.5; color:var(--tinta-suave)}
.sbr-filete{display:flex; align-items:center; gap:14px; margin:22px 0 20px; color:var(--tinta-tenue); font-size:.9rem}
.sbr-filete span{flex:1; height:1px; background:var(--linea)}
.sbr-mov{margin-bottom:22px}
.sbr-mov-cab{display:flex; align-items:center; gap:11px; margin-bottom:7px}
.sbr-num{
  flex:none; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:.9rem; font-weight:600; color:var(--tinta);
  background:var(--miel-suave); border:1px solid var(--linea);
}
.sbr-mov h3{font-family:var(--serif); font-weight:600; font-size:1.04rem; color:var(--tinta)}
.sbr-mov p{font-size:1rem; line-height:1.68; color:var(--tinta)}
.sbr-capitular::first-letter{
  font-family:var(--serif); font-weight:600; font-size:3.1rem; float:left;
  line-height:.86; padding:4px 10px 0 0; color:var(--terracota);
}
.sbr-ficha-obra{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--linea);
  font-size:.82rem; color:var(--tinta-tenue); line-height:1.5;
}

/* ---- la pregunta ---- */
.sbr-pregunta{
  margin-top:26px; padding:20px 20px 18px; border-radius:var(--radio-ch);
  background:var(--miel-suave); border:1px solid var(--linea);
}
.sbr-pregunta h4{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:9px;
}
.sbr-preg-texto{font-family:var(--serif); font-size:1.1rem; line-height:1.4; color:var(--tinta); margin-bottom:14px}
.sbr-ops{display:flex; flex-direction:column; gap:9px}
.sbr-op{
  text-align:left; font-family:var(--sans); font-size:.97rem; line-height:1.45; color:var(--tinta);
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:14px;
  padding:12px 15px; cursor:pointer; transition:.18s;
}
.sbr-op:hover{border-color:var(--sol); transform:translateY(-1px)}
.sbr-op.bien{border-color:var(--salvia); background:var(--salvia-suave); font-weight:700}
.sbr-op.otra{opacity:.5}
.sbr-op[disabled]{cursor:default; transform:none}
.sbr-resp{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--linea);
  font-size:.97rem; line-height:1.6; color:var(--tinta-suave);
}
.sbr-resp[hidden]{display:none !important}

/* ---- el pie de la hoja ---- */
.sbr-pie{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--linea);
}
.sbr-solcitos{letter-spacing:.3em; font-size:.78rem; color:var(--sol); word-break:break-all}
.sbr-manana{font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--tinta-tenue); text-align:right}
.sbr-siguiente{max-width:760px; margin:20px auto 0; display:grid; gap:9px; justify-items:center}
.sbr-siguiente[hidden]{display:none !important}
.sbr-siguiente .tll-btn{min-width:260px; text-align:center}
.sbr-nota{font-size:.85rem; color:var(--tinta-tenue); text-align:center; line-height:1.5}

/* ---- lo que ESA persona ya recorrió (nunca el banco entero) ---- */
.sbr-antes{max-width:760px; margin:26px auto 0}
.sbr-antes summary{cursor:pointer; font-size:.86rem; color:var(--tinta-tenue); list-style:none}
.sbr-antes summary::-webkit-details-marker{display:none}
.sbr-antes ol{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px}
.sbr-antes a{
  display:block; text-decoration:none; color:var(--tinta-suave); font-size:.9rem; line-height:1.4;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px; padding:9px 13px;
}
.sbr-antes a:hover{border-color:var(--sol); color:var(--tinta)}
.sbr-antes b{font-family:var(--serif); color:var(--tinta-tenue); font-weight:600; margin-right:7px}

/* los botoncitos del índice: destapar el tramo y bajar a los más viejos */
.sbr-antes-mas{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px}
.sbr-antes-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--sans); font-size:.82rem; color:var(--tinta-tenue);
  background:transparent; border:1px solid var(--linea); border-radius:99px; padding:7px 15px;
  transition:var(--transicion-luz), border-color .2s ease, color .2s ease;
}
.sbr-antes-btn:hover{border-color:var(--sol); color:var(--tinta-suave)}
.sbr-antes-fin{font-size:.8rem; font-style:italic; color:var(--tinta-tenue); margin:0}
/* OJO: el `hidden` del navegador es solo un display:none flojo, y CUALQUIER
   regla nuestra con display se lo lleva puesto. Sin esto, el botón de los
   tramos viejos se veía aun cuando no quedaba nada más atrás (cazado en la
   captura del 24/7). Vale para los renglones tapados de la lista también. */
.sbr-antes-mas [hidden], .sbr-antes li[hidden]{display:none !important}

/* la línea de arriba de la hoja: el volver, y a la derecha el marcador que
   baja hasta el índice de lo ya leído (no se lo lleva de lugar: solo lo va a
   buscar). Nace solo si de verdad hay algo anterior que mirar. */
.sbr-arriba{
  max-width:760px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
}
.sbr-marcador{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  margin-top:18px; text-decoration:none;
  font-family:var(--sans); font-size:.78rem; color:var(--tinta-tenue);
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:99px;
  padding:5px 13px 5px 10px;
  transition:var(--transicion-luz), border-color .2s ease, color .2s ease;
}
.sbr-marcador svg{width:14px; height:14px; flex:none; opacity:.85}
.sbr-marcador:hover{border-color:var(--sol); color:var(--tinta-suave)}

/* ---- cuando todavía no hay nada ---- */
.sbr-vacio{
  max-width:620px; margin:20px auto 0; text-align:center; background:var(--tarjeta);
  border:1px solid var(--linea); border-radius:var(--radio-ch); padding:26px 24px;
  box-shadow:var(--sombra-chica);
}
.sbr-vacio h2{font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--tinta); margin-bottom:7px}
.sbr-vacio p{color:var(--tinta-suave); font-size:.95rem; line-height:1.55}

@media (max-width:640px){
  /* en el teléfono la franja del dibujo cede unos píxeles: así el título del
     camino entra en menos renglones y la tarjeta no se estira de más */
  .sbr-medallon{flex-basis:100px; padding:6px 4px}
  .sbr-serie-cuerpo{padding:13px 14px 12px}
  .sbr-serie-cuerpo h3{font-size:1.04rem}
  .sbr-serie-cuerpo p{font-size:.86rem}
  .sbr-cuerpo{padding:20px 18px 24px}
  .sbr-titulo{font-size:1.5rem}
  .sbr-bajada{font-size:1rem}
  .sbr-hoja{border-radius:20px}
  .sbr-pie{flex-direction:column; align-items:flex-start; gap:7px}
  .sbr-manana{text-align:left}
  .sbr-siguiente .tll-btn{min-width:0; width:100%}
}
@media (min-width:760px){
  .sbr-titulo{font-size:2.05rem}
  .sbr-cuerpo{padding:30px 38px 34px}
  .sbr-vitrina{gap:16px}
}

/* ================================================================
   LA GALERÍA (2026-07-23) — la pared, la obra, colgar y lo tuyo.
   Mobile first: una columna generosa; a 640 la pared abre dos, a
   1020 tres. Los marcos y la placa viven la hora con las variables.
   ================================================================ */

.gal-col{max-width:840px; margin:0 auto}

.gal-intro{margin:6px 0 20px}
.gal-intro h1{font-family:var(--serif); font-weight:600; font-size:1.9rem; margin-bottom:6px}
.gal-intro p{color:var(--tinta-suave); font-size:.98rem; line-height:1.6; max-width:560px}
.gal-acciones{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center}

.gal-btn{display:inline-block; font-family:var(--sans); font-size:.9rem; font-weight:700; padding:10px 20px;
  border-radius:999px; border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta);
  cursor:pointer; text-decoration:none; transition:.2s; text-align:center}
.gal-btn:hover{transform:translateY(-1px); box-shadow:var(--sombra-chica)}
.gal-btn-lleno{background:var(--sol); border-color:var(--sol); color:#4A3213}
.gal-btn-chico{padding:6px 13px; font-size:.8rem}
.gal-btn-grande{padding:14px 30px; font-size:1rem}

.gal-aviso{background:var(--tarjeta); border:1px solid var(--linea); border-radius:14px;
  padding:13px 16px; margin:0 0 16px; color:var(--tinta-suave); font-size:.95rem; line-height:1.55}
.gal-aviso-lindo{background:var(--salvia-suave); color:var(--tinta)}

.gal-vacia{text-align:center; padding:46px 12px; color:var(--tinta-suave); display:grid; gap:16px;
  justify-items:center; font-family:var(--serif); font-size:1.08rem; line-height:1.6}

/* ================================================================
   «ESTOY TRABAJANDO» — la rueditita de cualquier botón que pide algo
   al servidor (24/7). Vive acá arriba para que valga en TODA la casa,
   también en el panel: se pinta sola sobre cualquier botón, sin que
   cada pantalla tenga que saber nada.
   ================================================================ */
/* La rueditita va AL LADO del texto, nunca encima: esconder el texto pedía
   pintarlo de transparente, y los botones de la casa tienen transición —
   el color se animaba y a veces el texto no llegaba a irse (cazado el 24/7
   midiendo en el sitio). Con la ruedita al lado se lee todo y no falla. */
button.trabajando{position:relative; pointer-events:none; opacity:.8;
  padding-left:calc(1em + 22px) !important}
button.trabajando::after{
  content:""; position:absolute; top:50%; left:12px; width:15px; height:15px;
  margin-top:-8px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  border-top-color:var(--terracota);
  animation:sol-girando .7s linear infinite}
button.trabajando.lleno::after, button.trabajando.gal-btn-lleno::after,
button.trabajando.tll-btn::after{border-top-color:#4A3213}
@keyframes sol-girando{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  button.trabajando::after{animation-duration:2.4s}
}

/* ---------- EL MURO DE LA SALA (24/7: «como una galería de arte») ---------- */
.gal-muro{position:relative; border:1px solid var(--linea); border-radius:var(--radio);
  padding:52px 18px 0; overflow:hidden; transition:var(--transicion-luz);
  background:linear-gradient(color-mix(in srgb, var(--fondo-suave) 82%, var(--tarjeta) 18%) 0%, var(--fondo-suave) 100%)}
/* el riel de cuadros, a lo largo de todo el muro */
.gal-muro::before{content:""; position:absolute; top:18px; left:16px; right:16px; height:5px;
  border-top:2.5px solid color-mix(in srgb, var(--tinta) 30%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--tinta) 12%, transparent); border-radius:2px}
/* la luz de la sala, bañando el muro desde arriba (vive la hora sola) */
.gal-muro::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 36% 34% at 20% -6%, var(--sol-brillo) 0%, transparent 72%),
    radial-gradient(ellipse 36% 34% at 50% -8%, var(--sol-brillo) 0%, transparent 74%),
    radial-gradient(ellipse 36% 34% at 80% -6%, var(--sol-brillo) 0%, transparent 72%);
  opacity:.42}
.gal-muro .gal-vacia{position:relative; z-index:1}

/* ---------- la pared mezclada ---------- */
.gal-pared{columns:1; column-gap:18px; position:relative; z-index:1}
@media (min-width:640px){ .gal-pared{columns:2} }
@media (min-width:1020px){ .gal-pared{columns:3} }

/* cada obra cuelga de su tanza con clavito, apenas inclinada */
.gal-muro .gal-obra-caja{position:relative; padding-top:24px}
.gal-muro .gal-obra-caja::before{content:""; position:absolute; top:2px; left:50%; width:1.5px;
  height:23px; transform:translateX(-50%);
  background:color-mix(in srgb, var(--tinta) 30%, transparent)}
.gal-muro .gal-obra-caja::after{content:""; position:absolute; top:-1px; left:50%; width:8px; height:8px;
  border-radius:50%; transform:translateX(-50%);
  background:color-mix(in srgb, var(--miel) 78%, var(--tinta) 22%);
  box-shadow:0 1px 2px color-mix(in srgb, var(--tinta) 35%, transparent)}
.gal-muro .gal-obra-caja:nth-child(2n) .gal-obra{transform:rotate(.45deg)}
.gal-muro .gal-obra-caja:nth-child(2n+1) .gal-obra{transform:rotate(-.4deg)}
.gal-muro .gal-obra:hover{transform:translateY(-2px) rotate(0)}

/* el remate de la sala: las columnas griegas que la sostienen (bajitas, de base).
   Nacen PEGADAS al piso del muro (la doble línea) y bajan hasta el suelo. */
.gal-remate{position:relative; z-index:1; display:flex; align-items:flex-start;
  justify-content:space-between; margin:18px -18px 0; padding:0 7%;
  border-top:3px double color-mix(in srgb, var(--tinta) 24%, transparent);
  background:color-mix(in srgb, var(--fondo-suave) 55%, var(--tarjeta) 45%);
  transition:var(--transicion-luz)}
.gal-columna svg{display:block; width:58px; height:60px;
  color:color-mix(in srgb, var(--tinta) 74%, transparent)}
.gal-remate .gal-plaqueta{align-self:center; margin:8px 0}
.gal-plaqueta{display:inline-flex; align-items:center; gap:12px;
  padding:8px 16px; border-radius:8px;
  background:linear-gradient(color-mix(in srgb, var(--miel-suave) 70%, var(--tarjeta) 30%), var(--miel-suave));
  border:1px solid color-mix(in srgb, var(--miel) 55%, var(--tinta) 12%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tarjeta) 55%, transparent), var(--sombra-chica)}
.gal-plaqueta-cartel{font-family:var(--serif); font-weight:600; font-size:.98rem; color:var(--tinta);
  letter-spacing:.04em; white-space:nowrap}
.gal-plaqueta-cartel i{font-style:normal; font-weight:400; color:var(--tinta-suave); font-size:.86rem}
.gal-sala-flecha{font-size:1.05rem; color:var(--terracota); text-decoration:none; line-height:1;
  padding:2px 4px; border-radius:6px; transition:.2s}
.gal-sala-flecha:hover{transform:translateX(0) scale(1.15)}
.gal-sala-flecha.apagada{color:var(--tinta-tenue); opacity:.4}
@media (max-width:640px){
  .gal-muro{padding:46px 12px 0}
  .gal-remate{margin:16px -12px 0; padding:0 8%}
  .gal-columna svg{width:44px; height:46px}
}

.gal-obra{display:block; break-inside:avoid; margin:0 0 18px; text-decoration:none; color:inherit;
  background:var(--tarjeta); border-radius:var(--radio-ch); box-shadow:var(--sombra-chica);
  padding:14px; transition:transform .18s ease, box-shadow .18s ease, var(--transicion-luz)}
.gal-obra:hover{transform:translateY(-2px); box-shadow:var(--sombra)}

.gal-cartel{display:block; padding:11px 4px 2px}
.gal-tit{font-family:var(--serif); font-weight:600; font-size:1.08rem; line-height:1.3; display:block}
.gal-gancho{display:block; font-family:var(--serif); font-style:italic; color:var(--tinta-suave);
  font-size:.92rem; line-height:1.45; margin-top:3px}
.gal-firma{display:block; color:var(--tinta-tenue); font-size:.8rem; margin-top:7px}
.gal-cor{color:var(--terracota); font-weight:700}
/* el contador del cuadrito de la pared viaja SIEMPRE en el html, escondido
   cuando está en cero, para que el corazoncito de la obra abierta pueda
   encenderlo sin recargar. ⚠ El `display:none` va escrito: en esta casa ya
   aprendimos que `hidden` solo lo pisa cualquier regla que fije un display. */
.gal-cor[hidden]{display:none}

/* el escrito en la pared: una hojita que tienta con sus primeras líneas */
.gal-hojita{display:block; padding:6px 6px 0}
.gal-hojita::before{content:"❧"; display:block; color:var(--tinta-tenue); font-size:.85rem; margin-bottom:8px}
.gal-extracto{display:block; font-family:var(--serif); font-size:.97rem; line-height:1.6;
  color:var(--tinta); margin-top:8px}
.gal-leer{display:inline-block; margin-top:10px; font-size:.8rem; font-weight:800; color:var(--terracota)}

.gal-mas{text-align:center; margin:26px 0 8px}

/* ---------- los cuatro marcos de la casa ---------- */
.gal-marco{display:block; line-height:0; transition:var(--transicion-luz)}
.gal-marco img{width:100%; height:auto; display:block}
.gal-marco-1{padding:7px; border:1.6px solid color-mix(in srgb, var(--tinta) 60%, transparent); background:var(--tarjeta)}
.gal-marco-2{padding:8px; border:4px double color-mix(in srgb, var(--tinta) 55%, transparent); background:var(--tarjeta)}
.gal-marco-3{padding:clamp(12px, 5%, 24px); border:1.4px solid color-mix(in srgb, var(--tinta) 45%, transparent);
  background:color-mix(in srgb, var(--tarjeta) 80%, var(--miel-suave) 20%)}
.gal-marco-4{padding:5px; border:8px solid color-mix(in srgb, var(--miel) 72%, var(--terracota) 28%);
  background:var(--tarjeta); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tinta) 30%, transparent)}

/* ---------- la obra a página entera ---------- */
.gal-sala{margin-top:4px}
.gal-cuadro{margin:0; text-align:center}
.gal-cuadro .gal-marco{display:inline-block; max-width:100%; box-shadow:var(--sombra)}
.gal-placa{text-align:center; margin:18px auto 10px; max-width:620px; background:var(--tarjeta);
  border:1px solid var(--linea); border-radius:14px; padding:16px 22px; box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz)}
.gal-placa h1{font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.25}
.gal-placa .gal-gancho{margin-top:4px; font-size:1rem}
.gal-placa .gal-firma{margin-top:9px}

.gal-hoja{background:var(--tarjeta); border-radius:var(--radio); box-shadow:var(--sombra);
  padding:30px 26px 26px; max-width:760px; margin:0 auto; transition:var(--transicion-luz)}
.gal-hoja h1{font-family:var(--serif); font-weight:600; font-size:1.85rem; line-height:1.2}
.gal-filete{display:flex; align-items:center; gap:14px; margin:16px 0 18px; color:var(--tinta-tenue); font-size:.9rem}
.gal-filete span{flex:1; height:1px; background:var(--linea)}
.gal-hoja p{font-size:1.02rem; line-height:1.75; margin-bottom:16px; color:var(--tinta)}
.gal-capitular::first-letter{font-family:var(--serif); font-weight:600; font-size:3rem; float:left;
  line-height:.85; padding:4px 10px 0 0; color:var(--terracota)}
.gal-firma-hoja{color:var(--tinta-tenue); font-style:italic; text-align:right; margin-top:8px; font-size:.92rem}

/* ---------- el corazoncito ---------- */
.gal-carino{display:flex; align-items:center; gap:12px; justify-content:center; margin:22px 0; flex-wrap:wrap}
.gal-form-corazon{display:inline-block}
.gal-corazon{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--linea);
  background:var(--tarjeta); border-radius:999px; padding:9px 16px; cursor:pointer; transition:.2s;
  color:var(--tinta-suave); font-family:var(--sans)}
.gal-corazon svg{width:20px; height:20px; fill:none; stroke:var(--terracota); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; transition:.25s}
.gal-corazon.puesto svg{fill:var(--terracota)}
.gal-corazon:hover{transform:translateY(-1px); box-shadow:var(--sombra-chica)}
.gal-cor-n{font-weight:800; color:var(--terracota); font-size:.9rem; min-width:2px}
.gal-cor-texto{color:var(--tinta-tenue); font-size:.88rem}

/* ---------- las palabras para el autor ---------- */
.gal-palabras{max-width:760px; margin:8px auto 0}
.gal-palabras h2{font-family:var(--serif); font-weight:600; font-size:1.25rem; margin:18px 0 12px}
.gal-sin-palabras{color:var(--tinta-tenue); font-size:.92rem; margin-bottom:10px}
.gal-palabra{background:var(--tarjeta); border:1px solid var(--linea); border-radius:14px;
  padding:12px 15px; margin-bottom:10px; transition:var(--transicion-luz)}
.gal-palabra-cab{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.gal-palabra-cab b{font-size:.9rem}
.gal-moderador{font-size:.62rem; font-weight:800; letter-spacing:.08em; background:var(--miel-suave);
  border:1px solid var(--linea); color:var(--tinta-suave); border-radius:6px; padding:2px 6px}
.gal-palabra p{font-size:.95rem; line-height:1.55}
/* el aviso «me incomodó»: una banderita chiquita y delicada, nunca un cartel
   (24/7) — en la obra entera va con su palabrita al lado, más discreta */
.gal-form-incomodo{margin-left:auto; display:inline}
.gal-incomodo{display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  color:var(--tinta-tenue); font-size:.74rem; cursor:pointer; opacity:.6; padding:4px;
  font-family:var(--sans); border-radius:8px; transition:.2s}
.gal-incomodo svg{width:15px; height:15px; display:block}
.gal-incomodo:hover{opacity:1; color:var(--terracota); background:var(--fondo-suave)}
.gal-incomodo-grande{padding:6px 12px}
.gal-incomodo-obra{text-align:center; margin:14px 0 0; margin-left:0}
.gal-ya-avise{max-width:760px; margin:16px auto 0; text-align:center; font-size:.84rem;
  line-height:1.55; color:var(--tinta-tenue); background:var(--fondo-suave);
  border:1px solid var(--linea); border-radius:12px; padding:10px 16px}

/* la ventanita de la casa (reemplaza al confirm del navegador) */
.gal-preguntita{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:20px; background:color-mix(in srgb, var(--velo) 72%, transparent);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .24s ease}
.gal-preguntita.abierta{opacity:1}
.gal-preguntita-caja{background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); box-shadow:var(--sombra); padding:22px 24px 18px;
  max-width:380px; width:100%; transform:translateY(8px) scale(.985);
  transition:transform .24s cubic-bezier(.2,.8,.3,1)}
.gal-preguntita.abierta .gal-preguntita-caja{transform:none}
.gal-preguntita-tit{font-family:var(--serif); font-weight:600; font-size:1.12rem;
  line-height:1.35; color:var(--tinta); margin-bottom:8px}
.gal-preguntita-nota{font-size:.9rem; line-height:1.55; color:var(--tinta-suave)}
.gal-preguntita-botones{display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
.gal-preguntita-botones .gal-btn{padding:9px 18px; font-size:.88rem}
.gal-sugerencia{background:var(--miel-suave); border:1px solid var(--linea); border-radius:14px;
  padding:13px 16px; margin:12px 0; font-size:.95rem; line-height:1.55}
.gal-form-palabra{margin-top:14px; display:grid; gap:9px}
.gal-form-palabra label{font-weight:700; font-size:.9rem}
.gal-form-palabra textarea{font-family:var(--sans); font-size:16px; padding:12px 14px;
  border:1px solid var(--linea); border-radius:12px; background:var(--fondo-suave); color:var(--tinta);
  width:100%; resize:vertical}
.gal-form-palabra textarea:focus{outline:none; border-color:var(--sol)}
.gal-form-palabra .gal-btn{justify-self:start}

/* ---------- colgar algo tuyo ---------- */
.gal-form{display:grid; gap:18px; background:var(--tarjeta); border-radius:var(--radio-ch);
  box-shadow:var(--sombra-chica); padding:20px; transition:var(--transicion-luz)}
.gal-tipos{display:flex; gap:10px}
.gal-tipos button{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 8px;
  border-radius:14px; border:1px solid var(--linea); background:var(--fondo-suave); color:var(--tinta-suave);
  font-family:var(--sans); font-weight:700; font-size:.95rem; cursor:pointer; transition:.2s}
.gal-tipos button svg{width:20px; height:20px; flex:none}
.gal-tipos button.on{background:var(--miel-suave); border-color:var(--sol); color:var(--tinta)}
.gal-campo{display:grid; gap:7px}
.gal-campo label{font-weight:700; font-size:.92rem}
.gal-campo label i{font-weight:400; font-style:italic; color:var(--tinta-tenue); font-size:.82rem}
.gal-campo input[type="text"], .gal-campo textarea{font-family:var(--sans); font-size:16px;
  padding:12px 14px; border:1px solid var(--linea); border-radius:12px; background:var(--fondo-suave);
  color:var(--tinta); width:100%}
.gal-campo input[type="text"]:focus, .gal-campo textarea:focus{outline:none; border-color:var(--sol)}
.gal-campo textarea{resize:vertical; line-height:1.6}
/* el botón de subir, de la casa (el de fábrica del navegador queda escondido) */
.gal-archivo-real{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}
.gal-subir{display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-size:.94rem; font-weight:700; color:var(--tinta);
  background:var(--miel-suave); border:1px dashed color-mix(in srgb, var(--miel) 70%, var(--tinta) 15%);
  border-radius:14px; padding:13px 22px; transition:.2s; width:fit-content}
.gal-subir svg{width:20px; height:20px; flex:none; color:var(--terracota)}
.gal-subir:hover{transform:translateY(-1px); box-shadow:var(--sombra-chica); border-style:solid}
.gal-archivo-real:focus-visible + .gal-subir{outline:2px solid var(--sol); outline-offset:2px}
.gal-archivo-nombre{font-size:.84rem; color:var(--tinta-suave)}
.gal-aviso-chico{font-size:.86rem; line-height:1.5; color:var(--terracota-fuerte);
  background:var(--rosa-suave); border:1px solid var(--linea); border-radius:12px; padding:9px 13px}
.gal-contador{font-size:.75rem; color:var(--tinta-tenue); justify-self:end}
.gal-previa{margin-top:4px}
.gal-previa .gal-marco{display:inline-block; max-width:min(100%, 420px)}
/* EL VIDRIO DE LA PREVIA (18/8/2026): al girar la foto un cuarto de vuelta, la
   caja tiene que darse vuelta con ella —si no, la imagen se sale del marco—.
   La proporción invertida y la escala justa las pone galeria.js, que es el
   único que sabe cuánto mide la foto de verdad. */
.gal-previa-vidrio{position:relative; display:block; line-height:0}
.gal-previa-vidrio img{transition:transform .25s ease}
/* de canto: la foto sale del flujo y el ancho y el alto de la caja los fija
   galeria.js en píxeles — sin eso la caja se achica a cero y no se ve nada */
.gal-previa-vidrio.de-canto{overflow:hidden}
.gal-previa-vidrio.de-canto img{position:absolute; top:50%; left:50%; transform-origin:50% 50%}
.gal-girar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:10px; max-width:min(100%, 420px)}
.gal-girar-texto{flex:1; min-width:170px; font-size:.82rem; line-height:1.45; color:var(--tinta-suave)}
.gal-girar-botones{display:inline-flex; gap:8px}
.gal-girar-btn{display:grid; place-items:center; width:42px; height:42px; flex:none;
  border:1px solid var(--linea); border-radius:50%; background:var(--tarjeta);
  color:var(--tinta); cursor:pointer; transition:.2s}
.gal-girar-btn svg{width:20px; height:20px}
.gal-girar-btn:hover{border-color:var(--sol); color:var(--terracota); transform:translateY(-1px)}
.gal-girar-btn:active{transform:translateY(0) scale(.94)}
/* el mismo par de flechas, ya colgada la obra, en la franja de «Lo tuyo».
   ⚠ inline-grid, NO grid: en bloque cada flecha se llevaba su propio renglón y
   la franja crecía a tres líneas (visto en el sitio, 18/8). */
.gal-girar-chico{display:inline-grid; place-items:center; width:34px; height:34px; padding:0;
  border-radius:50%; line-height:0; vertical-align:middle}
.gal-girar-chico svg{width:16px; height:16px}
.gal-marcos{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
@media (max-width:520px){ .gal-marcos{grid-template-columns:repeat(2, 1fr)} }
.gal-marco-pick{position:relative; display:grid; gap:6px; justify-items:center; cursor:pointer; text-align:center}
.gal-marco-pick input{position:absolute; opacity:0; pointer-events:none}
.gal-marco-pick .gal-marco{width:82px; border-radius:2px}
.gal-muestra{display:block; width:100%; aspect-ratio:4/3;
  background:linear-gradient(140deg, var(--celeste-suave), var(--rosa-suave))}
.gal-marco-pick i{font-style:normal; font-size:.74rem; color:var(--tinta-suave)}
.gal-marco-pick input:checked + .gal-marco{box-shadow:0 0 0 2px var(--sol)}
.gal-marco-pick input:checked ~ i{color:var(--tinta); font-weight:700}
.gal-envio{display:grid; gap:10px}
.gal-envio .gal-btn{justify-self:start}
.gal-nota{font-size:.82rem; color:var(--tinta-tenue); line-height:1.5}

/* ---------- el rechazo cálido y lo tuyo ---------- */
.gal-rechazo{background:var(--tarjeta); border:1px solid var(--linea); border-left:4px solid var(--terracota);
  border-radius:14px; padding:16px 18px; margin-bottom:18px}
.gal-rechazo p{font-size:.96rem; line-height:1.65; margin-bottom:12px}
.gal-rechazo .gal-acciones{margin-top:2px}

.gal-mias{display:grid; gap:12px}
.gal-mia{display:flex; gap:14px; align-items:center; background:var(--tarjeta); border-radius:var(--radio-ch);
  box-shadow:var(--sombra-chica); padding:12px 14px; flex-wrap:wrap; transition:var(--transicion-luz)}
.gal-mia-mini{flex:none; width:74px; height:56px; border-radius:8px; overflow:hidden;
  background:var(--fondo-suave); display:grid; place-items:center}
.gal-mia-mini img{width:100%; height:100%; object-fit:cover; display:block}
.gal-mia-esc svg{width:26px; height:26px; color:var(--tinta-tenue)}
.gal-mia-cuerpo{flex:1; min-width:170px; display:grid; gap:3px}
.gal-mia-cuerpo b{font-family:var(--serif); font-weight:600; font-size:1.02rem; line-height:1.25}
.gal-mia-estado{font-size:.8rem; color:var(--tinta-suave)}
.gal-est-publicada{color:var(--salvia); font-weight:700}
.gal-est-rechazada, .gal-est-oculta{color:var(--terracota)}
.gal-mia-botones{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.gal-mia-botones form{display:inline}

/* ---------- las muestras que invitan a imaginarse (23/7) ---------- */
.gal-imagina{display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 18px}
@media (min-width:640px){ .gal-imagina{grid-template-columns:1fr 1fr} }
.gal-obra-muestra{cursor:default}
.gal-obra-muestra:hover{transform:none; box-shadow:var(--sombra-chica)}
.gal-chip-muestra{display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--linea); border-radius:6px; padding:1px 6px;
  color:var(--tinta-tenue); margin-left:4px; vertical-align:1px}
.gal-imagina-pie{text-align:center; font-family:var(--serif); font-style:italic; color:var(--tinta-suave);
  font-size:.95rem; margin:0 0 26px}
.gal-imagina-chica{margin:0 0 22px}
.gal-imagina-chica .gal-obra{padding:10px}
.gal-imagina-chica .gal-tit{font-size:.95rem}
.gal-imagina-chica .gal-gancho{font-size:.84rem}
.gal-imagina-chica .gal-extracto{font-size:.86rem}
.gal-imagina-chica .gal-firma{font-size:.74rem}
@media (min-width:520px){ .gal-imagina-chica{grid-template-columns:1fr 1fr} }

/* la firma de la casa: el moderador publica a la vista, sin disfraz */
.gal-casa{display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; background:var(--miel-suave); border:1px solid var(--linea);
  color:var(--tinta-suave); border-radius:6px; padding:1px 6px; margin-left:4px; vertical-align:1px}
.gal-autor{font-weight:800; color:var(--tinta-suave)}

/* ---------- la pared ancha y su barra de arriba (23/7 noche) ---------- */
.gal-col-ancha{max-width:1100px}
.gal-intro{margin-top:16px}
.gal-barra{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:0 0 18px}
.gal-filtros{display:flex; gap:8px}
.gal-chip{display:inline-block; font-size:.86rem; font-weight:700; padding:8px 16px;
  border-radius:999px; border:1px solid var(--linea); background:var(--tarjeta);
  color:var(--tinta-suave); text-decoration:none; transition:.2s}
.gal-chip.on{background:var(--miel-suave); border-color:var(--sol); color:var(--tinta)}
/* la franja de «Lo tuyo»: pegada a su tarjeta, no flotando sobre el muro.
   ⚠ Va POR ENCIMA del cuadro (z-index): sube 20px para tapar la costura, y sin
   esto el cuadro —que tiene transform, o sea su propia capa— le pintaba encima
   su borde y su sombra, y la franja se leía sucia y como cortada. */
.gal-mio-pie{display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin:-20px 0 18px; padding:11px 15px 12px;
  position:relative; z-index:2;
  background:color-mix(in srgb, var(--tarjeta) 88%, var(--fondo-suave) 12%);
  border:1px solid var(--linea); border-top:0;
  border-radius:0 0 var(--radio-ch) var(--radio-ch);
  box-shadow:var(--sombra-chica); transition:var(--transicion-luz)}
.gal-mio-pie .gal-mia-estado{font-size:.82rem; color:var(--tinta-suave)}
.gal-mio-pie.gal-est-publicada .gal-mia-estado{color:var(--salvia); font-weight:700}
.gal-mio-pie.gal-est-rechazada .gal-mia-estado,
.gal-mio-pie.gal-est-oculta .gal-mia-estado{color:var(--terracota)}
.gal-mio-pie.gal-est-revision .gal-mia-estado{color:var(--miel); font-weight:700}
/* ⛔ CON FRANJA, LA TARJETA CIERRA RECTA ABAJO: las dos piezas son una sola.
   La marca `gal-con-pie` la pone el SERVIDOR (ver lugar-galeria.php). Antes esto
   preguntaba `.gal-obra-caja:has(.gal-mio-pie)`, y `:has()` el iPad de Christian
   no lo entiende: la regla se ignoraba entera y en silencio, así que el cuadro
   se quedaba con sus esquinas redondas y su margen de abajo mientras la franja
   igual subía 20px — le trepaba encima y le tapaba el botón de descolgar.
   ⛔ REGLA DE LA CASA: en lo que se ve, nada depende de `:has()`. */
.gal-con-pie > .gal-obra{border-radius:var(--radio-ch) var(--radio-ch) 0 0;
  margin-bottom:0; padding-bottom:22px}

/* ⛔ Y LA FRANJA SE INCLINA CON SU CUADRO. Los cuadros del muro cuelgan apenas
   torcidos (medio grado, uno para cada lado); la franja no giraba, así que la
   costura abría en abanico —unos cinco milímetros de punta a punta en una
   pantalla ancha— y de nuevo se veía «mal empalmado».
   Las dos giran alrededor de LA COSTURA MISMA (una por su borde de abajo, la
   otra por el de arriba): girando por el mismo punto, la unión no se abre. */
.gal-muro .gal-con-pie > .gal-obra{transform-origin:50% 100%}
.gal-muro .gal-con-pie > .gal-mio-pie{transform-origin:50% 0}
.gal-muro .gal-obra-caja:nth-child(2n) > .gal-mio-pie{transform:rotate(.45deg)}
.gal-muro .gal-obra-caja:nth-child(2n+1) > .gal-mio-pie{transform:rotate(-.4deg)}
/* con franja, el cuadro NO se levanta al pasarle por encima: se movería él solo
   y dejaría la franja atrás. Conserva su inclinación, que es lo que importa. */
@media (hover:hover){
  .gal-muro .gal-obra-caja:nth-child(2n).gal-con-pie > .gal-obra:hover{transform:rotate(.45deg)}
  .gal-muro .gal-obra-caja:nth-child(2n+1).gal-con-pie > .gal-obra:hover{transform:rotate(-.4deg)}
}
.gal-obra-caja{break-inside:avoid}
.gal-obra-caja .gal-obra{break-inside:auto}
.gal-mio-botones{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end}
.gal-mio-botones form{display:inline}

/* ---------- la hojita de manuscrito (pedido: «que simule una hoja bella») ---------- */
.gal-hojita, .gal-manuscrito{
  position:relative;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--tarjeta) 90%, var(--miel-suave) 10%) 0%,
                            color-mix(in srgb, var(--tarjeta) 78%, var(--miel-suave) 22%) 100%);
  border:1px solid color-mix(in srgb, var(--linea) 60%, var(--miel) 12%);
  border-radius:4px 14px 4px 4px;
  box-shadow:var(--sombra-chica);
}
/* la esquina doblada, arriba a la derecha */
.gal-hojita::after, .gal-manuscrito::after{
  content:""; position:absolute; top:0; right:0; width:26px; height:26px;
  background:linear-gradient(225deg, var(--fondo-suave) 0 49%, color-mix(in srgb, var(--tarjeta) 70%, var(--tinta) 7%) 50% 100%);
  border-bottom-left-radius:8px; border-left:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
/* el margencito del cuaderno, a la izquierda */
.gal-hojita::before{
  content:""; position:absolute; top:10px; bottom:10px; left:14px; width:1px;
  background:color-mix(in srgb, var(--terracota) 42%, transparent);
}
.gal-obra-esc .gal-hojita{display:block; padding:18px 18px 16px 26px; margin:2px 2px 0}
.gal-obra-esc .gal-hojita .gal-tit{padding-right:22px}
/* los renglones, y el texto sentado sobre ellos */
.gal-extracto, .gal-renglones{
  background:repeating-linear-gradient(
    transparent 0, transparent 27px,
    color-mix(in srgb, var(--tinta) 11%, transparent) 27px,
    color-mix(in srgb, var(--tinta) 11%, transparent) 28px);
}
.gal-extracto{display:block; font-family:var(--serif); font-style:italic; font-size:.97rem;
  line-height:28px; color:var(--tinta); margin-top:8px}
.gal-renglones p{line-height:28px !important; margin-bottom:28px !important}
.gal-manuscrito .gal-firma-hoja{margin-top:12px}
.gal-manuscrito{padding-left:30px}
.gal-manuscrito::before{
  content:""; position:absolute; top:12px; bottom:12px; left:16px; width:1px;
  background:color-mix(in srgb, var(--terracota) 42%, transparent);
}

/* ---------- la obra en capa, a pantalla completa (23/7 noche) ---------- */
.gal-velo{position:fixed; inset:0; z-index:120; overflow:hidden;
  background:color-mix(in srgb, var(--fondo) 96%, transparent);
  opacity:0; transition:opacity .3s ease}
.gal-velo.abierta{opacity:1}
.gal-capa{position:absolute; inset:0; display:flex; flex-direction:column}
/* la pared de la sala detrás del cuadro: la luz de la hora con su haz */
.gal-capa-cuadro-modo{
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, var(--sol-brillo) 0%, transparent 58%),
    linear-gradient(var(--fondo) 0%, var(--fondo-suave) 100%);
}
.gal-capa-hoja-modo{
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, var(--sol-brillo) 0%, transparent 62%),
    var(--velo);
}
.gal-capa-volver{position:absolute; top:14px; left:14px; z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--linea);
  background:color-mix(in srgb, var(--tarjeta) 88%, transparent); backdrop-filter:blur(8px);
  color:var(--tinta); font-size:1.2rem; cursor:pointer; box-shadow:var(--sombra-chica)}
.gal-capa-scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:64px 18px calc(40px + env(safe-area-inset-bottom))}
.gal-capa-cuadro{margin:0; text-align:center}
.gal-capa-cuadro .gal-marco{display:inline-block; box-shadow:var(--sombra);
  max-width:min(96vw, 1400px)}
.gal-capa-cuadro img{max-width:100%; max-height:74vh; width:auto; height:auto; object-fit:contain}
.gal-capa-placa{max-width:560px}
.gal-capa-hoja{max-width:760px; margin:0 auto}
.gal-capa .gal-carino, .gal-capa .gal-palabras, .gal-capa .gal-aviso,
.gal-capa .gal-incomodo-obra{max-width:760px; margin-left:auto; margin-right:auto}
.gal-capa .gal-carino{margin-top:22px; margin-bottom:0}
.gal-capa .gal-aviso{margin-top:14px}
/* el teléfono acostado: que el cuadro se luzca a pantalla casi entera */
@media (orientation:landscape) and (max-height:520px){
  .gal-capa-scroll{padding-top:12px}
  .gal-capa-cuadro img{max-height:88vh}
  .gal-capa-volver{top:10px; left:10px; width:38px; height:38px}
}

@media (max-width:640px){
  .gal-intro h1{font-size:1.6rem}
  .gal-hoja{padding:24px 18px 22px 28px; border-radius:20px}
  .gal-hoja h1{font-size:1.5rem}
  .gal-placa{padding:14px 16px}
  .gal-mia-botones{width:100%; justify-content:flex-end}
  .gal-barra .gal-btn{flex:1; text-align:center}
}

/* ================================================================
   LAS PÁGINAS DE LA CASA — privacidad, términos y borrado (24/7)
   Una hoja de papel cálido, centrada, para leer con calma. Luz fija
   de mañana como la portada: no cambian con la hora del día.
   ================================================================ */
.pantalla-legal{padding-bottom:0}

.hoja-legal{
  max-width:680px;
  padding:34px 22px 60px;
}

/* ---- la cabecera: el solcito, la marca y el título ---- */
.hoja-legal-cabecera{text-align:center; margin-bottom:26px}
.hoja-legal-sol{
  display:block; width:34px; height:34px; margin:0 auto 14px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--sol-brillo) 0%, var(--sol) 62%, transparent 72%);
  box-shadow:0 0 22px 6px color-mix(in srgb, var(--sol) 34%, transparent);
}
.hoja-legal-sobre{
  font-family:var(--sans); font-weight:700;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.hoja-legal-cabecera h1{
  font-family:var(--serif); font-weight:600;
  font-size:2rem; line-height:1.15; margin-top:8px;
  color:var(--terracota-fuerte);
}
.hoja-legal-fecha{
  margin-top:9px; font-size:.8rem; color:var(--tinta-tenue);
}

/* ---- la hoja ---- */
.hoja-legal-cuerpo{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:34px 32px 30px;
  transition:var(--transicion-luz);
  font-size:.97rem; line-height:1.66;
  color:var(--tinta);
}

/* el respiro de arriba: lo importante, dicho primero y en voz baja */
.hoja-legal-nota{
  background:color-mix(in srgb, var(--sol-brillo) 34%, transparent);
  border-left:3px solid var(--sol);
  border-radius:0 12px 12px 0;
  padding:15px 18px;
  margin-bottom:28px;
  font-size:.95rem; line-height:1.6;
  color:var(--tinta-suave);
}

.hoja-legal-cuerpo h2{
  font-family:var(--serif); font-weight:600;
  font-size:1.14rem; line-height:1.3;
  color:var(--terracota-fuerte);
  margin-top:30px; margin-bottom:9px;
}
.hoja-legal-cuerpo h2:first-child{margin-top:0}
.hoja-legal-cuerpo p{margin-bottom:13px}
.hoja-legal-cuerpo p:last-child{margin-bottom:0}
.hoja-legal-cuerpo ul,
.hoja-legal-cuerpo ol{margin:0 0 15px; padding-left:22px}
.hoja-legal-cuerpo li{margin-bottom:8px}
.hoja-legal-cuerpo li:last-child{margin-bottom:0}
.hoja-legal-cuerpo strong{font-weight:700; color:var(--tinta)}
.hoja-legal-cuerpo em{font-style:italic}
.hoja-legal-cuerpo a{color:var(--terracota); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--terracota) 40%, transparent)}
.hoja-legal-cuerpo a:hover{border-bottom-color:var(--terracota)}
.hoja-legal-remate{margin-top:14px; font-size:.95rem}
.hoja-legal-remate a{border-bottom:none}

/* ---- el pie: las otras dos páginas y la salida ---- */
.hoja-legal-pie{
  margin-top:26px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.hoja-legal-otras{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px;
  font-size:.86rem;
}
.hoja-legal-otras a{color:var(--tinta-suave); text-decoration:none; font-weight:600}
.hoja-legal-otras a:hover{color:var(--terracota)}
.hoja-legal-volver{
  display:inline-block;
  font-size:.86rem; font-weight:700; text-decoration:none;
  color:var(--terracota);
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:99px; padding:9px 20px;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}

@media (max-width:640px){
  .hoja-legal{padding:26px 16px 48px}
  .hoja-legal-cabecera h1{font-size:1.62rem}
  .hoja-legal-cuerpo{padding:24px 20px 22px; border-radius:20px; font-size:.95rem}
  .hoja-legal-nota{padding:14px 15px; margin-bottom:24px}
  .hoja-legal-cuerpo h2{font-size:1.08rem; margin-top:26px}
}

/* ================================================================
   EL FARO — el pórtico, la greca y el papiro (2026-07-24)
   Todo sale de las variables de la casa, así el sello griego vive la
   hora del día solo: de día piedra clara, de tarde dorada, de noche
   piedra tibia. Ni una línea de JavaScript.
   ================================================================ */
html[data-luz="manana"]{ --faro-piedra:#E4DDCC; --faro-piedra-2:#D2C8B0; --faro-papiro:#FBF6EA; --faro-papiro-linea:#E7DAC0; }
html[data-luz="tarde"] { --faro-piedra:#EBD4A9; --faro-piedra-2:#DCC08A; --faro-papiro:#FDF3E0; --faro-papiro-linea:#EBD3AB; }
html[data-luz="noche"] { --faro-piedra:#4C443B; --faro-piedra-2:#5E5449; --faro-papiro:#3E3730; --faro-papiro-linea:#564C41; }

/* Las fases del 25/7: el hilo de las lámparas (vidas), el arco de la semana y
   la nota personal. Misma regla: todo por variables, así viven la hora solas.
   De noche la llama es lo único que sube de brillo — es el sentido del lugar. */
html[data-luz="manana"]{
  --faro-hilo:#D8CFBB; --faro-lampara:#AC9269; --faro-lampara-2:#8E7550;
  --faro-llama:#C67A22; --faro-halo:rgba(233,184,122,.32);
  --faro-nota:#FFFDF5; --faro-nota-linea:#E6DECA; --faro-arco:#D8CFBB;
}
html[data-luz="tarde"]{
  --faro-hilo:#E2C89C; --faro-lampara:#AD8047; --faro-lampara-2:#8F6633;
  --faro-llama:#B25812; --faro-halo:rgba(226,154,86,.34);
  --faro-nota:#FFF9EC; --faro-nota-linea:#EAD6B2; --faro-arco:#E2C89C;
}
html[data-luz="noche"]{
  --faro-hilo:#4E4539; --faro-lampara:#7C6E5B; --faro-lampara-2:#9C8C75;
  --faro-llama:#F2B75F; --faro-halo:rgba(242,183,95,.24);
  --faro-nota:#3D362E; --faro-nota-linea:#574C40; --faro-arco:#4E4539;
}

.faro-col{max-width:820px}
.faro-intro{text-align:center; margin-top:16px}
.faro-intro h1{font-family:var(--serif); font-weight:600; font-size:1.72rem}
.faro-intro p{color:var(--tinta-suave); font-size:.95rem; line-height:1.6; margin-top:6px; max-width:520px; margin-inline:auto}

/* la greca: la firma del sector */
/* la greca es una FIRMA centrada, no una línea de borde a borde: a tamaño
   completo el meandro se leía como un código de barras (24/7) */
.faro-firma{margin:16px auto 2px; display:flex; justify-content:center}
.faro-greca{display:block; height:19px; width:auto; max-width:100%; color:var(--tinta-tenue); opacity:.7}

/* ---- el pórtico con la frase del día ---- */
.faro-templo{max-width:640px; margin:18px auto 0; transition:var(--transicion-luz)}
.faro-fronton{display:block; width:100%; height:auto}
.faro-estilobato{display:block; width:100%; height:16px}
.f-piedra{fill:var(--faro-piedra)}
.f-piedra-2{fill:var(--faro-piedra-2)}
.f-sol{fill:var(--sol)}
.f-estria{stroke:var(--faro-piedra-2); stroke-width:1.4}
.faro-nave{display:flex; align-items:stretch; background:var(--tarjeta); transition:var(--transicion-luz)}
.faro-columna{width:26px; flex:none; align-self:stretch}
.faro-nave-centro{flex:1; min-width:0; padding:26px 20px 24px; text-align:center}
.faro-hoy{font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--tinta-tenue)}
.faro-frase{font-family:var(--serif); font-size:1.24rem; line-height:1.55; margin-top:12px; color:var(--tinta)}
.faro-escuela{display:inline-flex; align-items:center; gap:7px; margin-top:14px; color:var(--terracota); font-size:.86rem}
.faro-emblema{width:23px; height:23px; flex:none}
.faro-glosa{color:var(--tinta-suave); font-size:.9rem; line-height:1.65; margin-top:4px}
/* el rótulo que le pone nombre a cada bloque del pórtico. Va en --tinta-suave y
   no en --tinta-tenue: de tarde ese tono daba 2,44 sobre la tarjeta y un rótulo
   que no se lee no aclara nada (misma lección que el descargo legal del 24/7) */
.faro-rotulo{
  font-size:.68rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--tinta-suave); margin-top:16px;
}
.faro-vacio{max-width:560px; margin:22px auto 0; text-align:center; color:var(--tinta-suave)}
.faro-vacio h2{font-family:var(--serif); font-size:1.2rem; color:var(--tinta); margin-bottom:8px}

/* ---- la cajita ---- */
.faro-cajita{max-width:640px; margin-inline:auto}
.faro-caja{display:block; margin-top:13px}
.faro-caja textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:96px;
  background:var(--tarjeta); border:1.5px solid var(--linea); border-radius:16px;
  padding:13px 15px; color:var(--tinta); font-family:var(--sans); font-size:1rem; line-height:1.55;
  transition:border-color .2s ease, var(--transicion-luz);
}
.faro-caja textarea:focus{outline:0; border-color:var(--terracota)}
.faro-caja textarea::placeholder{color:var(--tinta-tenue)}
.faro-form-pie{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap}
.faro-quedan{font-size:.78rem; color:var(--tinta-tenue)}
.faro-aviso{
  margin-top:13px; padding:13px 16px; border-radius:var(--radio-ch);
  background:var(--miel-suave); border:1px solid var(--linea);
  font-size:.92rem; line-height:1.6; color:var(--tinta-suave); transition:var(--transicion-luz);
}

/* ---- EL PAPIRO: para que la lectura no sea texto de corrido ---- */
/* el respiro cuando la lectura llega sin recargar y la vista se acerca a ella:
   así no queda pegada abajo de la barra de arriba */
#faroAqui{scroll-margin-top:76px}
.faro-papiro{max-width:700px; margin:24px auto 0; filter:drop-shadow(var(--sombra-chica))}
.faro-papiro-borde{display:block; width:100%; height:14px; fill:var(--faro-papiro)}
.faro-papiro-borde-pie{margin-top:-1px}
.faro-papiro-cuerpo{
  position:relative; background:var(--faro-papiro); padding:8px 30px 22px;
  margin-block:-1px; transition:var(--transicion-luz);
}
/* las fibras del papiro: líneas finísimas, apenas insinuadas */
.faro-fibras{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 13px, var(--faro-papiro-linea) 13px 13.5px);
}
.faro-papiro-cuerpo > *{position:relative}
.faro-lec-cab{text-align:center; padding-top:12px}
.faro-lec-quien{display:block; font-size:.72rem; letter-spacing:1.8px; text-transform:uppercase; color:var(--tinta-tenue)}
.faro-lec-epoca{display:block; font-size:.76rem; color:var(--tinta-tenue); margin-top:4px; font-style:italic}
.faro-papiro .faro-greca{display:block; margin:12px auto 4px; height:15px; opacity:.55}
.faro-parte{margin-top:20px}
.faro-parte h3{
  font-family:var(--sans); font-size:.72rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--terracota); margin-bottom:8px;
}
.faro-parte p{font-size:1rem; line-height:1.75; color:var(--tinta); margin-bottom:10px}
.faro-parte-abierta{border-top:1px solid var(--faro-papiro-linea); padding-top:16px; margin-top:22px}
.faro-abierto{font-family:var(--serif); font-style:italic; font-size:1.06rem; line-height:1.6}
.faro-nota-planb{margin-top:16px; font-size:.85rem; font-style:italic; color:var(--tinta-tenue); line-height:1.6}
.faro-lec-pie{margin-top:22px; border-top:1px solid var(--faro-papiro-linea); padding-top:14px}
.faro-voto{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.faro-voto-txt{font-size:.82rem; color:var(--tinta-tenue)}
.faro-voto-btn{
  cursor:pointer; font-family:var(--sans); font-size:.8rem; color:var(--tinta-suave);
  background:transparent; border:1px solid var(--faro-papiro-linea); border-radius:99px; padding:5px 14px;
  transition:border-color .2s ease, color .2s ease;
}
.faro-voto-btn:hover{border-color:var(--sol); color:var(--tinta)}
.faro-descargo{margin-top:12px; font-size:.78rem; line-height:1.55; color:var(--tinta-suave)}

/* ================================================================
   EL FARO — EL RÓTULO DE CADA ZONA (2026-07-25)
   Christian: «uno entra y no sabe si tiene que volver todos los días
   porque va a haber una novedad, o si es algo estático». Cada zona
   dice su ritmo, y no se deja adivinar.
   ================================================================ */
.faro-zona{
  display:flex; align-items:center; gap:14px;
  max-width:640px; margin:34px auto 4px;
}
.fz-linea{flex:1; height:1px; background:var(--linea); transition:var(--transicion-luz)}
.fz-txt{flex:none; text-align:center; line-height:1.25}
.fz-txt b{
  display:block; font-size:.72rem; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:700;
}
.fz-txt i{display:block; font-style:normal; font-size:.72rem; color:var(--tinta-tenue); margin-top:3px}

/* el botón mientras los filósofos piensan: además de la ruedita, DICE lo que
   está pasando. «El botón te muestra el spinner pero no cambia la leyenda»
   (Christian, 25/7). Se le deja lugar para el texto largo sin que salte nada. */
.faro-form .tll-btn{min-width:150px; transition:min-width .2s ease}
.faro-form .tll-btn.trabajando{min-width:0; font-size:.86rem; padding-inline:22px 40px}

/* ---- lo que ya le leyeron ---- */
.faro-antes{max-width:700px; margin:22px auto 0}
/* ⚠ el `hidden` del navegador es un display:none flojo: cualquier regla nuestra
   con display se lo lleva puesto. Acá se blinda, porque los tramos viejos y el
   botón de «ver anteriores» viven de él. */
.faro-antes [hidden], #faroAqui [hidden], .faro-cajita [hidden]{display:none !important}
/* ⚠ ESTA CAJITA TIENE QUE PARECER UNA PUERTA, NO UN RENGLÓN.
   Christian y Vani, el 25/7: «tenemos miedo de que parezca sencillamente un
   comentario en la zona y que la gente no se dé cuenta de que adentro hay
   contenido, y es algo muy valioso para ver». Por eso lleva rollo dorado,
   borde dorado de dos puntos y sombra: se despega de la página y se lee como
   algo para tocar. Al abrirla se calma sola — ya cumplió su trabajo. */
.faro-antes summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:11px;
  padding:14px 17px; border-radius:14px;
  background:color-mix(in srgb, var(--sol) 9%, var(--tarjeta));
  border:2px solid var(--miel);
  box-shadow:var(--sombra-chica);
  transition:box-shadow .22s ease, transform .22s ease, var(--transicion-luz);
}
.faro-antes summary:hover{box-shadow:var(--sombra); transform:translateY(-1px)}
.faro-antes summary:active{transform:translateY(0)}
.faro-antes[open] summary{
  box-shadow:none;
  background:var(--tarjeta);
  border-color:color-mix(in srgb, var(--miel) 45%, transparent);
}
.faro-antes summary::-webkit-details-marker{display:none}
/* el rollo: dice «acá adentro hay cosas escritas para vos» */
.fa-rollo{flex:none; width:23px; height:21px; color:var(--miel)}
/* la flecha, que gira al abrir: es lo que dice «esto se abre» */
.faro-antes summary::after{
  content:'▸'; flex:none; margin-left:4px; color:var(--miel); font-size:1rem;
  transition:transform .22s ease;
}
.faro-antes[open] summary::after{transform:rotate(90deg)}
.fa-titulo{font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--tinta)}
.fa-cuantas{
  flex:none; font-size:.74rem; font-weight:700; color:#4A3213;
  background:var(--miel); border-radius:99px; padding:2px 10px;
}
.fa-pista{margin-left:auto; font-size:.78rem; color:var(--tinta-suave)}
.faro-antes[open] .fa-pista{visibility:hidden}
@media (max-width:520px){
  /* en el teléfono la pista no entra al lado del título: pasa abajo */
  .faro-antes summary{flex-wrap:wrap}
  .fa-pista{margin-left:33px; width:100%; margin-top:3px}
  .faro-antes summary::after{margin-left:auto}
}
.fa-mas{
  display:block; margin:9px auto 0; cursor:pointer; font-family:var(--sans);
  font-size:.8rem; color:var(--tinta-suave); background:transparent;
  border:1px solid var(--linea); border-radius:99px; padding:7px 18px;
}
.fa-mas:hover{border-color:var(--sol); color:var(--tinta)}
.faro-antes a.trayendo{opacity:.55; pointer-events:none}
/* ⚠ `minmax(0,1fr)` y el `min-width:0` del renglón NO son adorno.
   Por omisión, una celda de grilla se agranda hasta que entra su contenido. Con
   el texto en una sola línea, el renglón se estiraba a DOS MIL PÍXELES en vez
   de recortarse: no se veían los puntos suspensivos y, en un teléfono, la
   pantalla se iría de costado. Medido en el navegador el 25/7 — el CSS parecía
   correcto y el ancho real decía otra cosa. */
.faro-antes ol{
  margin:10px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:minmax(0,1fr); gap:6px;
}
.faro-antes ol > li{min-width:0}

/* ⚠ CADA RENGLÓN SE NOMBRA POR SU CLASE, NO POR SU ETIQUETA.
   Antes estaba escrito como `.faro-antes b` y `.faro-antes span`, y eso
   alcanzaba también al título y al número del rótulo de arriba, ganándoles por
   especificidad: salían en gris tenue sin que el CSS lo dijera. Con clases
   propias eso no puede volver a pasar. */
.fa-item{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px;
  padding:11px 14px; transition:border-color .2s ease, var(--transicion-luz);
}
a.fa-item:hover{border-color:var(--sol)}
/* el emblema de la escuela que leyó: cada renglón queda definido de un vistazo,
   y encima dice algo — la roca de los estoicos, la balanza de los aristotélicos
   (pedido de Christian el 25/7: «que tengan un ícono, que destaque, cosa que
   visualmente sean ítems mejor definidos») */
.fa-sello{flex:none; display:flex; align-items:center; color:var(--terracota)}
.fa-sello .faro-emblema{width:26px; height:26px}
/* min-width:0 es lo que le permite al texto encogerse y recortarse dentro del
   flex; sin eso, el renglón se estira y el recorte no ocurre nunca */
.fa-cuerpo{flex:1; min-width:0}
/* el nombre y la marca comparten renglón: así TODOS los ítems miden lo mismo */
/* La altura de este renglón la manda el NOMBRE, no la pastillita: con
   `align-items:center` y la pastilla más baja que la línea del nombre, el ítem
   marcado mide exactamente lo mismo que los demás (medido: 68 px los cuatro). */
.fa-linea{display:flex; align-items:center; gap:9px; min-width:0; line-height:1.3}
.fa-quien{
  flex:0 1 auto; min-width:0;
  font-family:var(--serif); font-weight:600; font-size:.94rem;
  color:var(--tinta); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ⛔ UN SOLO RENGLÓN, EN CUALQUIER PANTALLA Y EN CUALQUIER POSICIÓN.
   Es la regla que pidió Christian el 25/7, y se resuelve acá y no en PHP:
   cortar por cantidad de letras no puede saber cuánto entra en un renglón. El
   navegador corta en el borde justo y pone los puntos suspensivos él mismo, así
   que tampoco queda una palabra partida al medio. */
.fa-arranque{
  display:block; font-size:.83rem; color:var(--tinta-tenue); line-height:1.5; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* la que se está leyendo: queda en la lista para no perder el hilo, pero sin
   enlace — si se pudiera tocar, la lista se daría vuelta sola y parecería un
   loop (defecto que marcó Christian el 25/7) */
.fa-esta{background:var(--fondo-suave); border-style:dashed}
/* la marca de «esta es la que estás leyendo»: una pastillita al lado del
   nombre. Estuvo un rato en un renglón propio y hacía que este ítem midiera
   103 px contra 68 de los demás — desparejo, que es justo lo que había que
   evitar. Y con `width:100%` más margen se iba 1 px fuera de la pantalla. */
.fa-marca{
  flex:none; font-style:normal; font-size:.64rem; letter-spacing:1px;
  text-transform:uppercase; color:var(--terracota);
  border:1px solid color-mix(in srgb, var(--terracota) 45%, transparent);
  border-radius:99px; padding:0 8px; line-height:1.35;
}

@media (max-width:640px){
  .faro-nave-centro{padding:20px 12px 18px}
  .faro-frase{font-size:1.12rem}
  .faro-columna{width:18px}
  .faro-papiro-cuerpo{padding:8px 18px 20px}
  .faro-parte p{font-size:.96rem}
}

/* la tarjeta de El Faro en Tu Mesa (solo si todavía no vio la frase de hoy).
   ⚠ SE MONTABA SOBRE EL TÍTULO (27/7): el emblema va en un <span class="ficha">
   igual que los otros avisos de la mesa, pero esas reglas viven bajo
   `.pieza.plaza-aviso .ficha` y esta tarjeta no lleva esa clase. Sin ellas, el
   span caía en la `.ficha` GENÉRICA de las canciones del Sillón (una tarjetita
   con borde y padding) y, siendo un elemento en línea, su caja se derramaba
   sobre el renglón de arriba y tapaba media palabra del título. Se arregla
   dándole a esta tarjeta su propia fila igual que a los demás avisos, en vez
   de heredar algo que no era para ella. */
.pieza.faro-mesa{display:flex; align-items:flex-start; gap:14px; padding:16px 18px}
.pieza.faro-mesa .ficha{
  /* sin el cuadrado de fondo, igual que los avisos de arriba: con una tarjeta
     enmarcada y otra suelta en la misma pantalla, la mesa se veía despareja
     (27/7, al sacarle el marco a las otras) */
  flex:none; border:0; padding:0; margin-top:2px; background:none;
  color:var(--terracota-fuerte);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transicion-luz);
}
.pieza.faro-mesa .ficha svg{width:27px; height:27px}
/* min-width:0 para que el texto pueda encogerse dentro del flex en pantallas
   angostas (sin esto, una frase larga empuja la tarjeta fuera de la pantalla) */
.pieza.faro-mesa > div{min-width:0}
.faro-mesa h3{font-size:1rem; font-family:var(--sans); font-weight:800}
.faro-mesa-frase{
  font-family:var(--serif); font-style:italic; line-height:1.5;
  font-size:.92rem; margin-top:5px;
}
.faro-mesa-quien{font-size:.8rem; color:var(--tinta-tenue); margin-top:4px}

/* ================================================================
   EL FARO — LAS CITAS VERIFICADAS (F7, 2026-07-25)
   La frase de la casa es nuestra; la cita viene después, más chica y
   en cursiva, como quien muestra de dónde salió. Nunca compite con
   la frase: se lee segunda.
   ================================================================ */
.faro-cita{margin:16px auto 0; max-width:460px; padding-top:13px; border-top:1px solid var(--linea)}
.faro-cita blockquote{
  font-family:var(--serif); font-style:italic; font-size:.97rem; line-height:1.6;
  color:var(--tinta-suave); margin:0;
}
.faro-cita figcaption{margin-top:7px; font-size:.76rem; color:var(--tinta-tenue); letter-spacing:.2px}
.faro-cita-rotulo{
  font-size:.68rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:8px;
}
.faro-cita-papiro{margin-top:22px; border-top-color:var(--faro-papiro-linea); text-align:left; max-width:none}

/* ================================================================
   EL FARO — LA IDEA DE LA SEMANA (F5, 2026-07-25)
   El arco es el recorrido de los siete días sobre la curva que hace
   el sol. Los días que pasaron se pueden volver a leer; el de hoy es
   el sol con su halo; los que faltan son círculos huecos y no llevan
   a ningún lado.
   ================================================================ */
.faro-semana{max-width:640px; margin:14px auto 0; text-align:center}
.faro-semana-titulo{
  font-family:var(--serif); font-weight:600; font-size:1.24rem; line-height:1.4;
  color:var(--tinta); margin-top:2px;
}

.faro-arco{margin:6px auto 0; max-width:340px}
.faro-arco svg{display:block; width:100%; height:auto; overflow:visible}
.arc-linea{stroke:var(--faro-arco); stroke-width:1.6; stroke-linecap:round}
.arc-punto{fill:var(--faro-arco); transition:fill .3s ease, r .3s ease}
.arc-toque{fill:transparent}          /* área de toque cómoda en el teléfono */
.arc-letra{
  font-family:var(--sans); font-size:10px; letter-spacing:.6px;
  fill:var(--tinta-suave); text-transform:uppercase;
}
.es-pasado .arc-punto{fill:var(--tinta-suave)}
.es-futuro .arc-punto{fill:none; stroke:var(--faro-arco); stroke-width:1.6}
.es-futuro .arc-letra{opacity:.5}
.es-hoy .arc-punto{fill:var(--sol)}
.es-hoy .arc-letra{fill:var(--tinta); font-weight:700}
.arc-halo{fill:var(--faro-halo)}
.faro-arco a{cursor:pointer}
.faro-arco a:hover .arc-punto{fill:var(--terracota)}
.se-ve .arc-punto{stroke:var(--terracota); stroke-width:2}

.faro-pieza{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio-ch);
  padding:20px 22px 22px; margin-top:14px; text-align:left; box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.faro-pieza-rubro{
  font-size:.7rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--tinta-suave);
}
.faro-pieza-rubro span{opacity:.5; margin:0 4px}
.faro-pieza h3{
  font-family:var(--serif); font-weight:600; font-size:1.1rem; line-height:1.45;
  color:var(--tinta); margin:8px 0 12px;
}
.faro-pieza p{font-size:1rem; line-height:1.75; color:var(--tinta); margin-bottom:10px}
.faro-pieza-idea{
  font-family:var(--serif); font-size:1.2rem; line-height:1.6; color:var(--tinta);
}
.faro-pieza-volver{margin-top:14px; font-size:.83rem}
.faro-pieza-volver a{color:var(--terracota); text-decoration:none; border-bottom:1px solid transparent}
.faro-pieza-volver a:hover{border-bottom-color:var(--terracota)}

/* ================================================================
   EL FARO — «PARA TI» (F6, 2026-07-25)
   Todo lo demás del lugar es de la casa entera. Esto es de UNA
   persona, y tiene que notarse: no va sobre piedra ni sobre papiro,
   va sobre una nota doblada, como la que alguien deja en la mesa.
   ================================================================ */
.faro-nota{max-width:640px; margin:26px auto 0}
.faro-nota-hoja{
  position:relative; background:var(--faro-nota); border:1px solid var(--faro-nota-linea);
  border-radius:4px; padding:22px 24px 18px; box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
/* el doblez de la esquina: dos triángulos, uno que tapa y otro que hace sombra */
.faro-nota-doblez{
  position:absolute; top:0; right:0; width:30px; height:30px;
  background:linear-gradient(225deg, var(--fondo) 0 50%, var(--faro-nota-linea) 50% 54%, var(--faro-nota) 54%);
  border-top-right-radius:4px;
}
.faro-nota-rotulo{
  font-family:var(--serif); font-size:.98rem; color:var(--terracota); margin-bottom:11px;
}
.faro-nota-texto{font-size:1rem; line-height:1.78; color:var(--tinta); margin-bottom:11px}
.faro-nota-pie{margin-top:16px; border-top:1px solid var(--faro-nota-linea); padding-top:13px}
.faro-nota-aclara{margin-top:11px; font-size:.78rem; line-height:1.55; color:var(--tinta-suave)}
.faro-nota .faro-voto-btn{border-color:var(--faro-nota-linea)}

/* la nota de la semana pasada, cuando esta semana no le toca ninguna porque no
   hubo novedades: queda a mano, cerrada, sin ocupar lugar y sin repetirse en la
   cara de nadie (regla del sello, 25/7) */
.faro-nota-vieja{
  max-width:640px; margin:20px auto 0; background:var(--faro-nota);
  border:1px dashed var(--faro-nota-linea); border-radius:4px; padding:13px 18px;
  transition:var(--transicion-luz);
}
.faro-nota-vieja summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  font-size:.88rem; color:var(--tinta-suave);
}
.faro-nota-vieja summary::-webkit-details-marker{display:none}
.faro-nota-vieja summary::before{content:'▸'; color:var(--terracota); transition:transform .22s ease}
.faro-nota-vieja[open] summary::before{transform:rotate(90deg)}
.faro-nota-vieja summary i{margin-left:auto; font-style:normal; font-size:.78rem; color:var(--tinta-tenue)}
.faro-nota-vieja[open] summary i{visibility:hidden}
.faro-nota-vieja p{font-size:.97rem; line-height:1.75; color:var(--tinta); margin-top:11px}

/* ================================================================
   EL FARO — VIDAS QUE ALUMBRAN (F4, 2026-07-25)
   ⛔ Christian: «nada de tarjetitas otra vez». Acá NO hay grilla: hay
   un HILO de luz que baja por los siglos con una lámpara de aceite
   encendida en cada vida. Se entra por la lámpara y la vida se abre
   en su lugar del hilo, empujando el resto hacia abajo.
   ================================================================ */
.vidas-col{max-width:760px}
.vidas-intro{text-align:center; margin-top:16px}
.vidas-intro h1{font-family:var(--serif); font-weight:600; font-size:1.72rem}
.vidas-intro p{color:var(--tinta-suave); font-size:.95rem; line-height:1.6; margin-top:6px; max-width:520px; margin-inline:auto}
.vidas-guia{
  max-width:520px; margin:14px auto 0; text-align:center;
  font-size:.9rem; line-height:1.6; color:var(--tinta-suave);
}
.vidas-guia a{color:var(--terracota); text-decoration:none; border-bottom:1px solid currentColor}

/* ---- la lámpara de aceite ---- */
.faro-lampara{display:block; width:100%; height:auto}
.faro-lampara-grande{width:60px}
.faro-lampara-chica{width:48px}
.lmp-cuerpo ellipse, .lmp-cuerpo path{fill:var(--faro-lampara)}
.lmp-boca{fill:var(--faro-lampara-2)}
.lmp-asa{stroke:var(--faro-lampara); stroke-width:2.6; stroke-linecap:round}
.lmp-llama{fill:var(--faro-llama); opacity:.9}
.lmp-llama-nucleo{fill:var(--sol-brillo); opacity:.85}
.lmp-halo{fill:var(--faro-halo)}

/* ---- el hilo ---- */
.vidas-hilo{
  position:relative; list-style:none; margin:26px auto 0; padding:0 0 0 0;
  max-width:640px;
}
.vidas-hilo::before{
  content:''; position:absolute; left:25px; top:4px; bottom:0; width:2px;
  background:linear-gradient(180deg,
    transparent 0, var(--faro-hilo) 26px,
    var(--faro-hilo) calc(100% - 40px), transparent 100%);
  transition:var(--transicion-luz);
}
.vidas-siglo{
  position:relative; padding-left:66px; margin:22px 0 8px;
  font-size:.7rem; letter-spacing:2.4px; text-transform:uppercase; color:var(--tinta-tenue);
}
.vidas-siglo span{background:var(--fondo); padding-right:8px; transition:var(--transicion-luz)}
.vidas-siglo::before{
  content:''; position:absolute; left:18px; top:50%; width:16px; height:1px;
  background:var(--faro-hilo);
}
.vidas-nudo{position:relative; margin-bottom:6px}
.vidas-lampara{
  position:relative; display:flex; align-items:flex-start; gap:14px;
  padding:10px 12px 10px 0; text-decoration:none; border-radius:14px;
  transition:background-color .25s ease;
}
.vidas-lampara:hover{background:var(--fondo-suave)}
.vidas-luz{
  flex:none; width:60px; display:flex; justify-content:center;
  /* la lámpara se apoya SOBRE el hilo: por eso el fondo tapa la línea */
  background:var(--fondo); padding:4px 0; border-radius:50%;
  transition:var(--transicion-luz);
}
.vidas-quien{display:block; min-width:0; padding-top:6px}
.vidas-quien b{
  display:block; font-family:var(--serif); font-weight:600; font-size:1.06rem;
  color:var(--tinta); line-height:1.3;
}
.vidas-quien i{
  display:block; font-style:normal; font-size:.76rem; color:var(--tinta-tenue);
  margin-top:3px; letter-spacing:.3px;
}
.vidas-quien em{
  display:block; font-style:normal; font-size:.92rem; line-height:1.5;
  color:var(--tinta-suave); margin-top:6px;
}
.esta-abierta .vidas-quien b{color:var(--terracota-fuerte)}
.esta-abierta .lmp-halo{fill:var(--faro-halo); r:15}

/* ---- la vida abierta, ahí mismo en el hilo ---- */
.vidas-relato{
  margin:4px 0 22px 66px; background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); padding:20px 22px 18px; box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.vidas-parte{margin-bottom:18px}
.vidas-parte h3{
  font-size:.7rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--terracota); margin-bottom:9px;
}
.vidas-parte p{font-size:1rem; line-height:1.78; color:var(--tinta); margin-bottom:10px}
.vidas-parte-alumbra{
  border-top:1px solid var(--linea); padding-top:16px; margin-bottom:12px;
}
.vidas-parte-alumbra p{font-family:var(--serif); font-size:1.02rem; line-height:1.7}
.vidas-pie{border-top:1px solid var(--linea); padding-top:13px}
.vidas-fuente{font-size:.78rem; line-height:1.55; color:var(--tinta-suave)}
.vidas-fuente span{color:var(--tinta-tenue)}
.vidas-cerrar{
  display:inline-block; margin-top:11px; font-size:.83rem; color:var(--terracota);
  text-decoration:none; border-bottom:1px solid transparent;
}
.vidas-cerrar:hover{border-bottom-color:var(--terracota)}
.vidas-fin{height:26px}

/* ---- la puerta a las vidas, desde El Faro ---- */
.faro-puerta-vidas{
  display:flex; align-items:center; gap:14px; max-width:640px; margin:28px auto 0;
  padding:14px 18px; text-decoration:none; background:var(--tarjeta);
  border:1px solid var(--linea); border-radius:var(--radio-ch);
  box-shadow:var(--sombra-chica); transition:border-color .25s ease, var(--transicion-luz);
}
.faro-puerta-vidas:hover{border-color:var(--sol)}
.faro-puerta-luz{flex:none; width:48px}
.faro-puerta-txt b{
  display:block; font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--tinta);
}
.faro-puerta-txt i{
  display:block; font-style:normal; font-size:.85rem; line-height:1.5;
  color:var(--tinta-suave); margin-top:3px;
}

@media (max-width:640px){
  .faro-semana-titulo{font-size:1.12rem}
  .faro-pieza{padding:17px 16px 18px}
  .faro-pieza-idea{font-size:1.1rem}
  .faro-nota-hoja{padding:19px 17px 16px}
  .vidas-hilo::before{left:21px}
  .vidas-luz{width:50px}
  .faro-lampara-grande{width:50px}
  .vidas-lampara{gap:11px}
  .vidas-quien b{font-size:1rem}
  .vidas-relato{margin-left:0; padding:17px 16px 16px}
  .vidas-siglo{padding-left:56px}
}

/* ================================================================
   TU CUADERNO — el diario y su jardín (2026-07-25)
   · La hoja es papel de verdad: textura, renglones y margen, y vive la
     hora del día como toda la casa.
   · El jardín es el premio: cada página planta algo. Un cantero por mes.
   · Entra en cualquier pantalla: teléfono de pie o acostado, tablet y
     computadora. Nada se sale de costado (medido, no supuesto).
   ================================================================ */

/* ---------------- la promesa de arriba ---------------- */
.cdn-promesa{
  margin-top:20px;
  padding:18px 18px 16px;
  border-radius:var(--radio);
  background:color-mix(in srgb, var(--tarjeta) 88%, transparent);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.cdn-promesa p{margin-top:9px; font-size:.97rem; line-height:1.62; color:var(--tinta-suave)}
.cdn-promesa p:first-child{margin-top:0}
.cdn-promesa strong{color:var(--tinta)}
.cdn-promesa-alta{
  font-family:var(--serif); font-weight:600;
  font-size:1.16rem; line-height:1.4; color:var(--tinta);
}
.cdn-aviso{
  margin-top:13px; padding-top:12px;
  border-top:1px dashed var(--linea);
  font-size:.88rem; color:var(--tinta-tenue);
}

/* ---------------- botones del cuaderno ---------------- */
.cdn-abrir{margin-top:20px; text-align:center}
.cdn-boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; min-height:52px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--terracota); color:#FFF6EF;
  font-family:var(--sans); font-size:1.03rem; font-weight:800;
  text-decoration:none;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), transform .16s ease;
}
.cdn-boton:hover{transform:translateY(-1px)}
.cdn-boton svg{width:21px; height:21px}
.cdn-boton-suave{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; min-height:44px;
  border:1px solid var(--linea); border-radius:999px; cursor:pointer;
  background:var(--tarjeta); color:var(--tinta);
  font-family:var(--sans); font-size:.92rem; font-weight:700;
  text-decoration:none;
  transition:var(--transicion-luz);
}
.cdn-boton-fino{
  display:inline-block; padding:9px 14px; cursor:pointer;
  color:var(--tinta-tenue); font-size:.86rem; font-weight:700;
  background:none; border:0; list-style:none;
}
.cdn-boton-fino::-webkit-details-marker{display:none}
.cdn-sigue{margin-top:11px; font-size:.9rem; color:var(--tinta-suave)}
.cdn-sigue a{color:var(--terracota); font-weight:700; text-decoration:none}

/* ---------------- el jardín ---------------- */
.cdn-jardin{margin-top:26px}
.cdn-jardin-rotulo h2{
  font-family:var(--serif); font-weight:600; font-size:1.34rem; color:var(--tinta);
}
.cdn-jardin-rotulo p{margin-top:3px; font-size:.9rem; color:var(--tinta-suave)}
.cdn-canteros{margin-top:12px}
.cdn-cantero{margin-top:16px}
.cdn-cantero-mes{
  font-family:var(--sans); font-weight:800;
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-tenue);
  margin-bottom:5px;
}
.cdn-cantero-lienzo{
  position:relative; width:100%;
  border-radius:var(--radio-ch); overflow:hidden;
  border:1px solid var(--linea);
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.cdn-cantero-lienzo canvas{display:block; width:100%}
.cdn-cantero-vivo{position:absolute; inset:0; pointer-events:none}
.cdn-jardin-mas{margin-top:14px; text-align:center}

/* ---- la leyenda: que sepa que cada mes es un jardín nuevo ---- */
.cdn-jardin-aviso{
  margin-top:10px; font-size:.84rem; line-height:1.6;
  color:var(--tinta-tenue); font-style:italic;
}

/* ---- LOS CAJONES DE LOS AÑOS ANTERIORES ----
   Cerrados no piden nada al servidor: sus jardines se traen recién al abrir
   (regla de peso de Christian). */
.cdn-cajones{margin-top:26px; display:flex; flex-direction:column; gap:10px}
.cdn-cajon{border:1px solid var(--linea); border-radius:var(--radio-ch); overflow:hidden; background:var(--tarjeta)}
.cdn-cajon-tapa{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:13px 15px; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--tinta);
}
.cdn-cajon-tapa small{margin-left:auto; font-weight:400; font-size:.78rem; color:var(--tinta-tenue)}
.cdn-cajon-flecha{width:16px; height:16px; flex:0 0 auto; color:var(--tinta-tenue); transition:transform .28s ease}
.cdn-cajon-tapa[aria-expanded="true"] .cdn-cajon-flecha{transform:rotate(90deg)}
.cdn-cajon-adentro{padding:0 12px 12px}
.cdn-cajon-adentro .cdn-cantero:first-child{margin-top:4px}
.cdn-cajon-trayendo .cdn-cajon-tapa{opacity:.6}
.cdn-cajon-nada{padding:10px 4px; font-size:.86rem; color:var(--tinta-tenue)}
@media (max-width:420px){ .cdn-cajon-tapa small{display:none} }
/* el cantero vacío: la tierra esperando (nunca una pantalla en blanco) */
.cdn-jardin-vacio .cdn-canteros::after{
  content:''; display:block; height:132px; margin-top:12px;
  border-radius:var(--radio-ch);
  border:1px dashed var(--linea);
  background:
    radial-gradient(120% 60% at 50% 118%, color-mix(in srgb, var(--miel) 34%, transparent), transparent 70%),
    color-mix(in srgb, var(--fondo-suave) 70%, transparent);
  transition:var(--transicion-luz);
}

/* ---------------- el cierre de la semana ---------------- */
.cdn-cierre{
  margin-top:22px; padding:16px 17px 12px;
  border-radius:var(--radio-ch);
  background:color-mix(in srgb, var(--miel-suave) 62%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--miel) 34%, var(--linea));
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), opacity .3s ease, transform .3s ease;
}
.cdn-cierre-yendose{opacity:0; transform:translateY(-6px)}
.cdn-cierre-marca{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px}
.cdn-cierre-titulo{
  font-family:var(--sans); font-weight:800;
  font-size:.71rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--miel);
}
.cdn-cierre-cuando{font-size:.79rem; color:var(--tinta-tenue)}
.cdn-cierre-cuerpo{margin-top:9px}
.cdn-cierre-plegado .cdn-cierre-cuerpo{display:none}
.cdn-cierre-texto{
  font-family:var(--serif); font-size:1.03rem; line-height:1.62;
  color:var(--tinta-suave);
}
.cdn-cierre-texto em{font-style:italic}
.cdn-cierre-firma{margin-top:7px; font-size:.83rem; color:var(--tinta-tenue)}
.cdn-cierre-pie{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:8px; padding-top:7px;
  border-top:1px dashed color-mix(in srgb, var(--miel) 30%, var(--linea));
}
.cdn-cierre-accion{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 11px; min-height:38px;
  background:none; border:0; border-radius:999px; cursor:pointer;
  color:var(--tinta-tenue); font-family:var(--sans); font-size:.82rem; font-weight:700;
  list-style:none;
}
.cdn-cierre-accion::-webkit-details-marker{display:none}
.cdn-cierre-accion svg{width:15px; height:15px}
.cdn-cierre-borrar[open] .cdn-cierre-accion{color:var(--terracota-fuerte)}
.cdn-cierre-seguro{
  width:100%; margin-top:8px; padding:12px 13px;
  border-radius:14px;
  background:color-mix(in srgb, var(--tarjeta) 90%, transparent);
  border:1px solid var(--linea);
}
.cdn-cierre-seguro p{font-size:.86rem; color:var(--tinta-suave)}
.cdn-cierre-si{
  margin-top:9px; padding:10px 17px; min-height:42px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--terracota-fuerte); color:#FFF6EF;
  font-family:var(--sans); font-size:.88rem; font-weight:800;
}

/* ---------------- lo que volvió (un día como hoy) ---------------- */
.cdn-volvio{margin-top:24px}
.cdn-etiqueta{
  display:inline-block; margin-bottom:7px;
  font-family:var(--sans); font-weight:800;
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--celeste);
}
.cdn-volvio-hoja{
  display:block; padding:16px 17px;
  border-radius:var(--radio-ch); text-decoration:none;
  background:var(--tarjeta); border:1px solid var(--linea);
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), transform .16s ease;
}
.cdn-volvio-hoja:hover{transform:translateY(-1px)}
.cdn-volvio-hoja h3{
  font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--tinta);
}
.cdn-volvio-fecha{margin-top:2px; font-size:.8rem; color:var(--tinta-tenue)}
.cdn-asomo{
  margin-top:8px; font-size:.92rem; line-height:1.55; color:var(--tinta-suave);
}
.cdn-asomo-cerrado{font-style:italic; color:var(--tinta-tenue)}

/* ---------------- la lista de páginas ---------------- */
.cdn-ultimas, .cdn-cierres-viejos{margin-top:28px}
.cdn-ultimas h2, .cdn-cierres-viejos h2{
  font-family:var(--serif); font-weight:600; font-size:1.24rem; color:var(--tinta);
}
.cdn-lista{list-style:none; margin-top:10px}
.cdn-lista li{margin-top:7px}
.cdn-lista a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  gap:10px; padding:13px 15px;
  border-radius:15px; text-decoration:none;
  background:var(--tarjeta); border:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.cdn-lista-titulo{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:700; font-size:.97rem; color:var(--tinta);
}
.cdn-candadito{width:13px; height:13px; margin-right:4px; vertical-align:-1px; color:var(--tinta-tenue)}
.cdn-lista-fecha{font-size:.78rem; color:var(--tinta-tenue); white-space:nowrap}
.cdn-lista-asomo{
  grid-column:1 / -1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.85rem; color:var(--tinta-suave);
}
.cdn-todas{margin-top:14px; text-align:center}
.cdn-todas a{color:var(--terracota); font-weight:700; font-size:.92rem; text-decoration:none}

/* ---------------- buscar ---------------- */
.cdn-cabecera-fina{margin-top:16px}
.cdn-buscar{display:flex; gap:8px; margin-top:16px}
.cdn-buscar input{
  flex:1 1 auto; min-width:0;
  padding:13px 16px; min-height:48px;
  border-radius:999px; border:1px solid var(--linea);
  background:var(--tarjeta); color:var(--tinta);
  font-family:var(--sans); font-size:16px;
  transition:var(--transicion-luz);
}
.cdn-buscar input:focus{outline:2px solid color-mix(in srgb, var(--terracota) 45%, transparent); outline-offset:1px}
.cdn-resultado-rotulo{margin-top:14px; font-size:.92rem; color:var(--tinta-suave)}
.cdn-resultado-rotulo a{margin-left:6px; color:var(--terracota); font-weight:700; text-decoration:none}
.cdn-paginado{display:flex; justify-content:space-between; gap:10px; margin-top:18px}
.cdn-vacio{margin-top:26px; text-align:center; color:var(--tinta-suave)}
.cdn-vacio p{margin-top:14px}

/* ================================================================
   LA HOJA — escribir y leer
   ================================================================ */
.pantalla-hoja{padding-bottom:0}
.cdn-hoja-pantalla{
  max-width:720px; margin:0 auto;
  padding:0 16px calc(46px + env(safe-area-inset-bottom));
}
.cdn-hoja-barra{
  position:sticky; top:var(--alto-barra, 44px); z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:11px 2px 10px;
  background:linear-gradient(to bottom, var(--fondo) 72%, transparent);
  transition:var(--transicion-luz);
}
.cdn-hoja-volver{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 auto;
  border-radius:50%; color:var(--terracota); text-decoration:none;
  background:color-mix(in srgb, var(--tarjeta) 80%, transparent);
  border:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.cdn-hoja-volver svg{width:20px; height:20px}
.cdn-hoja-fecha{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--serif); font-size:1rem; color:var(--tinta);
}
.cdn-guardado{
  flex:0 0 auto; font-size:.76rem; color:var(--tinta-tenue);
  transition:color .3s ease;
}
.cdn-guardado-ok{color:var(--salvia)}
.cdn-solo-tuya{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  padding:5px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--celeste-suave) 80%, transparent);
  color:var(--tinta-suave); font-size:.74rem; font-weight:700;
}
.cdn-solo-tuya svg{width:13px; height:13px}

/* ---- el papel ---- */
.cdn-papel{
  --cdn-renglon:32px;
  --cdn-margen:52px;
  position:relative;
  margin-top:4px;
  border-radius:6px 6px 14px 14px;
  background-color:var(--tarjeta);
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--cdn-renglon) - 1px),
      color-mix(in srgb, var(--linea) 88%, transparent) calc(var(--cdn-renglon) - 1px),
      color-mix(in srgb, var(--linea) 88%, transparent) var(--cdn-renglon));
  background-position:0 14px;
  box-shadow:var(--sombra);
  border:1px solid var(--linea);
  overflow:hidden;
  transition:var(--transicion-luz);
}
/* la línea del margen */
.cdn-papel::before{
  content:''; position:absolute; top:0; bottom:0;
  left:var(--cdn-margen); width:1px;
  background:color-mix(in srgb, var(--terracota) 42%, transparent);
  z-index:1;
}
.cdn-margen{
  position:absolute; left:0; top:0;
  width:var(--cdn-margen); height:100%;
  z-index:2; pointer-events:none;
}
/* ⛔ LA HOJA CRECE SOLA, SIN JAVASCRIPT Y SIN SCROLL.
   Antes el alto salía de MEDIR el texto con JavaScript, y esa medida siempre
   podía llegar tarde: la tipografía de la casa carga después (con la de
   reserva el texto ocupa menos), girar la tablet cambia el ancho, el zoom
   también. El alto quedaba corto, aparecía un scroll adentro de la hoja y el
   papel —que recorta— se comía la última línea. Christian lo diagnosticó
   exacto: «tiene scroll vertical, por eso se está cortando… el scroll me
   parece antinatural».

   Ahora el alto lo pone EL NAVEGADOR. Debajo del textarea vive una copia
   invisible del mismo texto, con la misma tipografía y los mismos márgenes;
   las dos comparten la misma celda. La copia manda el alto y el textarea se
   estira a llenarlo. No hay nada que medir, así que no hay nada que pueda
   llegar tarde. */
.cdn-crece{
  position:relative; z-index:3;
  display:grid;
  min-height:260px;
}
/* ⛔ `hidden` NO alcanza cuando la clase pone `display:grid` — es el defecto
   que ya se pagó el 25/7 con la capa del premio, que quedaba invisible pero
   tapando la pantalla entera. */
.cdn-crece[hidden]{display:none}
.cdn-crece > .cdn-texto,
.cdn-crece::after{
  grid-area:1 / 1 / 2 / 2;
  padding:14px 18px 22px calc(var(--cdn-margen) + 12px);
  font-family:var(--sans);
  font-size:17px; line-height:var(--cdn-renglon);
  white-space:pre-wrap;
  overflow-wrap:break-word;
  border:0;
}
.cdn-crece::after{
  content:attr(data-texto) " ";
  visibility:hidden;
  pointer-events:none;
}
.cdn-texto{
  display:block; width:100%;
  background:transparent; resize:none;
  overflow:hidden;                 /* la hoja NUNCA tiene scroll propio */
  color:var(--tinta);
  transition:color .8s ease;
}
.cdn-texto::placeholder{color:var(--tinta-tenue)}
.cdn-texto:focus{outline:none}

/* ---- la página ya escrita ---- */
.cdn-pagina-titulo{
  margin-top:8px;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.4rem, 5.5vw, 1.9rem); line-height:1.25; color:var(--tinta);
}
.cdn-papel-leido{margin-top:14px}
.cdn-leido{
  position:relative; z-index:3;
  padding:14px 18px 22px calc(var(--cdn-margen) + 12px);
  font-family:var(--sans); font-size:17px; line-height:var(--cdn-renglon);
  color:var(--tinta);
  overflow-wrap:break-word;
  transition:color .8s ease;
}
.cdn-papel{--cdn-capital:92px}
.cdn-capitular{
  position:absolute; z-index:4;
  left:calc(var(--cdn-margen) + 12px); top:14px;
  width:var(--cdn-capital); height:var(--cdn-capital);
}
/* el hueco que le deja el texto SALE DE LA MISMA MEDIDA que la capitular:
   si se separan, la letra se monta encima de las primeras líneas (25/7) */
.cdn-leido-capital::before{
  content:''; float:left;
  width:calc(var(--cdn-capital) + 12px); height:var(--cdn-capital);
}
.cdn-capital-oculta{position:absolute; left:-9999px}
.cdn-pagina-acciones{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:16px;
}
.cdn-borrar-pagina .cdn-cierre-seguro{max-width:420px}
.cdn-pagina-pie{margin-top:22px; text-align:center}
.cdn-pagina-pie a{color:var(--terracota); font-weight:700; font-size:.92rem; text-decoration:none}
.cdn-hoja-pie{margin-top:14px; text-align:center}
.cdn-hoja-pie a{color:var(--tinta-suave); font-size:.88rem; text-decoration:none}

/* ---- la frasecita que invita (nunca una consigna) ---- */
.cdn-invita{
  margin-top:12px; padding:0 4px;
  font-family:var(--serif); font-style:italic;
  font-size:.94rem; line-height:1.5; color:var(--tinta-tenue);
  transition:opacity .5s ease;
}
.cdn-invita-lejos{opacity:.35}

/* ---- las herramientas de la hoja ---- */
.cdn-herramientas{
  position:sticky; bottom:0; z-index:7;
  display:flex; align-items:center; gap:9px;
  margin-top:16px;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--fondo) 74%, transparent);
  transition:var(--transicion-luz);
}
.cdn-mic, .cdn-candado{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 15px; min-height:50px; flex:0 0 auto;
  border-radius:999px; cursor:pointer;
  background:var(--tarjeta); border:1px solid var(--linea);
  color:var(--tinta-suave);
  font-family:var(--sans); font-size:.86rem; font-weight:700;
  transition:var(--transicion-luz);
}
.cdn-mic svg, .cdn-candado svg{width:19px; height:19px}
.cdn-mic-grabando{
  background:var(--terracota); color:#FFF6EF; border-color:transparent;
  animation:cdnLatir 1.6s ease-in-out infinite;
}
@keyframes cdnLatir{0%,100%{opacity:1} 50%{opacity:.72}}
.cdn-candado-puesto{background:var(--celeste-suave); color:var(--tinta)}
.cdn-guardar{
  flex:1 1 auto; min-width:0;
  padding:14px 18px; min-height:50px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--terracota); color:#FFF6EF;
  font-family:var(--sans); font-size:1rem; font-weight:800;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.cdn-nota-candado{
  margin-top:-4px; padding:0 4px 8px;
  font-size:.79rem; line-height:1.5; color:var(--tinta-tenue);
}

/* ---- el premio al guardar ---- */
/* ⛔ EL DEFECTO MÁS CARO DEL 25/7: `hidden` NO alcanza cuando la clase pone
   `display:flex` —la regla de la casa le gana a la del navegador—, así que
   esta capa quedaba invisible PERO TAPANDO TODA LA PANTALLA: no se podía
   escribir ni tocar nada de la hoja. Lo encontró Christian probando.
   Ahora se apaga de las dos maneras: `display:none` y sin recibir toques. */
.cdn-premio[hidden]{display:none}
.cdn-premio{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:color-mix(in srgb, var(--fondo) 93%, transparent);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.cdn-premio-visible{opacity:1; pointer-events:auto}
.cdn-premio canvas{
  width:92px; height:92px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.16));
  animation:cdnLlegar .7s ease both;
}
@keyframes cdnLlegar{from{opacity:0; transform:scale(.7) rotate(-6deg)} to{opacity:1; transform:none}}
.cdn-premio-texto{
  max-width:22rem; padding:0 24px; text-align:center;
  font-family:var(--serif); font-size:1.08rem; line-height:1.5; color:var(--tinta);
  animation:cdnLlegar .7s .18s ease both;
}

/* ---------------- el vivero (solo el panel) ---------------- */
.cdn-vivero-mandos{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:16px 0 6px;
}
.cdn-vivero-mandos button{
  padding:9px 14px; min-height:40px;
  border-radius:999px; cursor:pointer;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta);
  font-family:var(--sans); font-size:.86rem; font-weight:700;
}
.cdn-vivero-mandos button.activo{background:var(--terracota); color:#FFF6EF; border-color:transparent}
.cdn-vivero-rotulo{
  font-family:var(--sans); font-weight:800; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue);
  width:100%;
}
.cdn-vivero-dato{margin-top:8px; font-size:.86rem; color:var(--tinta-suave)}

/* ---------------- pantallas anchas y chicas ---------------- */
@media (min-width:760px){
  .cdn-papel{--cdn-margen:66px}
  /* ⚠ la copia invisible SIEMPRE con la misma medida que el textarea: si se
     separan, el alto que calcula el navegador deja de valer */
  .cdn-crece > .cdn-texto, .cdn-crece::after, .cdn-leido{font-size:18px}
}
@media (max-width:420px){
  .cdn-papel{--cdn-margen:44px}
  .cdn-promesa{padding:16px 15px 14px}
  .cdn-promesa-alta{font-size:1.08rem}
  .cdn-guardar{font-size:.95rem; padding:14px 12px}
  .cdn-mic span, .cdn-candado span{display:none}
  .cdn-mic, .cdn-candado{padding:12px 14px}
  .cdn-papel{--cdn-capital:74px}
}
/* el teléfono acostado: la hoja no puede comerse la pantalla entera */
@media (max-height:520px) and (orientation:landscape){
  .cdn-texto{min-height:180px}
  .cdn-hoja-barra{position:static}
  .cdn-herramientas{position:static; padding-bottom:16px}
}

/* ================================================================
   TU CUADERNO — segunda vuelta (25/7, sobre lo que probó Christian)
   · La hoja vive EN la portada del lugar, con la vela encendida arriba.
   · El candado dejó de ser un botón mudo: es una elección explicada.
   · Se pasan las páginas como en un libro.
   ================================================================ */

/* ---- la hoja dentro de la portada ---- */
.cdn-hoja{margin-top:22px}
.cdn-vela-fila{display:flex; justify-content:center; margin-bottom:-6px}
.cdn-vela{width:74px; height:106px; display:block; overflow:visible}
@media (max-width:420px){ .cdn-vela{width:62px; height:89px} }

/* la barra de la hoja: pegajosa solo cuando la hoja está sola en su pantalla */
.cdn-hoja .cdn-hoja-barra{position:static; background:none; padding:6px 2px 8px}
.cdn-hoja-volver-fila{
  display:inline-flex; align-items:center; gap:6px;
  margin:14px 0 2px; padding:8px 2px;
  color:var(--terracota); font-size:.9rem; font-weight:800; text-decoration:none;
}
.cdn-hoja-volver-fila svg{width:18px; height:18px}

/* ---- «solo para mí»: el candado explicado ---- */
.cdn-solo-mia{
  display:flex; align-items:flex-start; gap:11px;
  margin-top:12px; padding:13px 15px;
  border-radius:16px; cursor:pointer;
  background:color-mix(in srgb, var(--tarjeta) 82%, transparent);
  border:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.cdn-solo-mia input{position:absolute; opacity:0; width:0; height:0}
.cdn-solo-mia-marca{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--fondo-suave); color:var(--tinta-tenue);
  border:1px solid var(--linea);
  transition:var(--transicion-luz);
}
.cdn-solo-mia-marca svg{width:17px; height:17px}
.cdn-solo-mia-txt{min-width:0}
.cdn-solo-mia-txt b{display:block; font-size:.94rem; font-weight:800; color:var(--tinta)}
.cdn-solo-mia-txt i{
  display:block; margin-top:3px; font-style:normal;
  font-size:.83rem; line-height:1.5; color:var(--tinta-tenue);
}
.cdn-solo-mia input:focus-visible + .cdn-solo-mia-marca{outline:2px solid var(--terracota); outline-offset:2px}
.cdn-solo-mia-puesta{
  background:color-mix(in srgb, var(--celeste-suave) 72%, var(--tarjeta));
  border-color:color-mix(in srgb, var(--celeste) 45%, var(--linea));
}
.cdn-solo-mia-puesta .cdn-solo-mia-marca{background:var(--celeste); color:#FFF; border-color:transparent}

/* ---- pasar las páginas, como en un libro ---- */
.cdn-pasar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:18px; padding:6px 0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.cdn-pasar-lado{
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 10px; min-height:42px;
  color:var(--terracota); font-size:.86rem; font-weight:700; text-decoration:none;
}
.cdn-pasar-lado svg{width:17px; height:17px}
.cdn-pasar-quieto{color:var(--tinta-tenue); opacity:.55}
.cdn-pasar-medio{
  font-family:var(--serif); font-size:.92rem; color:var(--tinta-suave);
  white-space:nowrap;
}
.cdn-ir{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px;
  font-size:.86rem; color:var(--tinta-tenue);
}
.cdn-ir input{
  width:88px; padding:9px 12px; min-height:42px;
  border-radius:999px; border:1px solid var(--linea);
  background:var(--tarjeta); color:var(--tinta);
  font-family:var(--sans); font-size:16px; text-align:center;
}
.cdn-tomo{margin-top:2px; font-size:.86rem; color:var(--tinta-tenue)}
.cdn-lista-numero{
  grid-row:1; grid-column:1;
  font-size:.7rem; font-weight:800; letter-spacing:.05em;
  color:var(--tinta-tenue); text-transform:uppercase;
}
.cdn-lista a{grid-template-columns:auto minmax(0,1fr) auto}
.cdn-lista-titulo{grid-column:2}
.cdn-lista-fecha{grid-column:3}
.cdn-lista-asomo{grid-column:1 / -1}
@media (max-width:420px){
  .cdn-pasar-lado span{display:none}
  .cdn-pasar-quieto span{display:inline}
  .cdn-pasar-quieto{font-size:.8rem}
}

/* ================================================================
   TU CUADERNO — tercera vuelta (25/7): la hoja se guarda sola
   «Estamos afeando la interfaz con botones que no tienen sentido»
   (Christian). Abajo de la hoja quedaron tres cosas: hablar, el
   candadito y el borrar. Nada más.
   ================================================================ */
.cdn-herramientas{
  position:static;
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding:0 2px 4px;
  background:none;
}
.cdn-herramientas-sep{flex:1 1 auto}
.cdn-icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto;
  border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid transparent;
  color:var(--tinta-tenue);
  transition:var(--transicion-luz), background-color .2s ease;
}
.cdn-icono svg{width:19px; height:19px}
.cdn-icono:hover{background:color-mix(in srgb, var(--tarjeta) 80%, transparent); border-color:var(--linea)}
.cdn-icono-puesto{
  background:var(--celeste-suave); color:var(--celeste); border-color:transparent;
}
.cdn-icono-borrar:hover{color:var(--terracota-fuerte)}

/* la explicación aparece SOLO al tocar el candadito */
.cdn-avisito{
  margin-top:10px; padding:14px 16px;
  border-radius:16px;
  background:color-mix(in srgb, var(--tarjeta) 92%, transparent);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-chica);
  animation:cdnAsoma .3s ease both;
}
@keyframes cdnAsoma{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.cdn-avisito p{font-size:.9rem; line-height:1.55; color:var(--tinta-suave)}
.cdn-avisito b{color:var(--tinta)}
.cdn-avisito-botones{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.cdn-avisito-si, .cdn-avisito-no{
  padding:10px 18px; min-height:42px;
  border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:.88rem; font-weight:800;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta-suave);
}
.cdn-avisito-si{background:var(--terracota); color:#FFF6EF; border-color:transparent}
/* «Empezar otra hoja»: con su iconito, discreto pero que SE VEA (Christian,
   25/7: «casi ni se ve»). Una pastillita como las del resto de la casa. */
/* el pie de la hoja: volver a la anterior y empezar otra */
.cdn-hoja-pies{
  margin-top:12px; display:flex; gap:10px;
  align-items:center; justify-content:center; flex-wrap:wrap;
}
.cdn-hoja-pies a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; min-height:42px;
  border:1px solid var(--linea); border-radius:999px;
  background:var(--tarjeta);
  color:var(--tinta-suave); font-size:.86rem; font-weight:700;
  text-decoration:none;
  transition:var(--transicion-luz), border-color .2s ease, color .2s ease;
}
.cdn-hoja-pies a:hover{color:var(--terracota); border-color:var(--terracota)}
.cdn-hoja-pies svg{width:17px; height:17px; flex:0 0 auto; opacity:.8}
.cdn-hoja-pies a[hidden]{display:none}

/* lo que dice el micrófono, al lado del micrófono */
.cdn-mic-dice{
  margin-top:10px; padding:10px 14px;
  border-radius:var(--radio-ch);
  background:var(--fondo-suave);
  font-size:.86rem; line-height:1.55; color:var(--tinta-suave);
}
.cdn-mic-dice[hidden]{display:none}

/* el botón de guardar solo existe sin JavaScript */
.cdn-guardar{
  flex:0 0 auto; padding:12px 22px; min-height:46px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--terracota); color:#FFF6EF;
  font-family:var(--sans); font-size:.95rem; font-weight:800;
}

/* ---- la arboleda: un árbol por año (el jardín que no se termina) ----
   Ya no tiene caja propia: es el HORIZONTE del jardín y se dibuja DENTRO del
   lienzo del cantero más nuevo, en el mismo cielo (Christian, 25/7). Por eso
   acá no queda ninguna regla: la caja y su borde eran justamente el corte que
   había que sacar. */

/* ---- la inicial iluminada ----
   ⛔ YA NO VA EN LA BARRA (Christian, 25/7, probándolo: «la h tiene que
   ponerse DENTRO del escrito, no en el título»). Vive donde tiene que vivir:
   como primera letra de lo escrito, en el papel dado vuelta. */
.cdn-inicial-llega{animation:cdnLlegar .7s ease both}

/* ---- el avisito de la hoja larguísima (solo muy cerca del tope) ---- */
.cdn-hoja-larga{
  margin-top:8px; font-size:.86rem; line-height:1.6; color:var(--tinta-tenue);
}
.cdn-comolink{
  border:0; background:none; padding:0; cursor:pointer;
  font:inherit; color:var(--terracota); text-decoration:underline;
}

/* ---- EL PAPEL DADO VUELTA: lo escrito, con su capitular, ahí mismo ---- */
.cdn-leido-hoja{cursor:text}
.cdn-leido-hoja:focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:8px}
.cdn-leido-llega{animation:cdnPapelGira .55s ease both}
@keyframes cdnPapelGira{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:none}
}

/* sube, por favor */

/* ================================================================
   TU NOVELA — historias por entregas (2026-07-26)

   La zona de lectura tiene que PARECER UN LIBRO, y ser propia:
   ⛔ nada de repetir la hoja con renglones de Tu Cuaderno.
   Lo que la hace libro: caja de texto angosta, serifa, márgenes
   generosos, capitular, cornisa arriba, folio abajo, la sombra del
   lomo a la izquierda y una orla tipográfica al cerrar.
   Todo el color sale de las variables de la casa: vive las tres luces.
   ================================================================ */

.nvl-col{max-width:760px}

/* ---- la marca del lugar: un libro entreabierto ---- */
.nvl-marca{width:76px; height:auto; color:var(--tinta-suave); display:block; margin:0 auto}

.nvl-intro{text-align:center; margin:6px 0 28px}
.nvl-intro-marca{margin-bottom:10px}
.nvl-intro h1{font-family:var(--serif); margin:0 0 6px}
.nvl-intro p{color:var(--tinta-suave); margin:0; max-width:34em; margin-inline:auto}

.nvl-aviso{
  background:var(--miel-suave); border:1px solid var(--linea); color:var(--tinta);
  border-radius:var(--radio-ch); padding:12px 16px; margin:0 0 20px; text-align:center;
}
.nvl-titulito{
  font:600 .74rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-tenue); margin:34px 0 14px; text-align:center;
}

/* ---- lo que está leyendo ahora ---- */
.nvl-encurso{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 24px 28px; text-align:center; box-shadow:var(--sombra-chica);
}
.nvl-etiqueta{
  font:600 .68rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracota);
}
.nvl-encurso h2{font-family:var(--serif); font-size:1.6rem; margin:10px 0 2px}
.nvl-mundo{color:var(--tinta-tenue); font-size:.9rem; margin:0 0 18px}

/* los puntos del avance: siete, uno por capítulo */
.nvl-avance{display:flex; gap:9px; justify-content:center; margin:0 0 8px}
.nvl-punto{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--linea); background:transparent;
  transition:background var(--transicion-luz), border-color var(--transicion-luz);
}
.nvl-punto.es-leido{background:var(--sol); border-color:var(--sol)}
.nvl-avance-dice{color:var(--tinta-suave); font-size:.9rem; margin:0 0 20px}

/* ---- el estante para elegir la próxima ---- */
.nvl-estante{display:grid; gap:18px}
@media (min-width:640px){ .nvl-estante{grid-template-columns:1fr 1fr} }
.nvl-ficha{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px 20px 22px; display:flex; flex-direction:column;
}
.nvl-ficha-mundo{
  font:600 .66rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.nvl-ficha h3{font-family:var(--serif); font-size:1.28rem; margin:8px 0 10px}
.nvl-contratapa{
  font-family:var(--serif); font-size:.97rem; line-height:1.62;
  color:var(--tinta-suave); margin:0 0 14px; flex:1;
}
.nvl-ficha-pie{font-size:.82rem; color:var(--tinta-tenue); margin:0 0 14px}

.nvl-vacio{text-align:center; color:var(--tinta-suave); padding:30px 0}
.nvl-coleccion-cinta{text-align:center; margin-top:34px}
.nvl-coleccion-dice{color:var(--tinta-suave); font-size:.92rem; margin:0 0 14px}

/* ================================================================
   LA HOJA — el bloque de libro
   ================================================================ */

.nvl-libro{margin:8px 0 0}

.nvl-cornisa{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font:600 .68rem/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue); padding:0 4px 10px;
}
.nvl-cornisa-obra{font-style:normal}

/* el bloque: papel liso (NO de cuaderno) con la sombra del lomo a la izquierda */
.nvl-hoja{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:2px 10px 10px 2px;
  padding:34px 26px 24px;
  box-shadow:var(--sombra-chica), inset 9px 0 14px -12px rgba(0,0,0,.42);
  transition:background var(--transicion-luz), border-color var(--transicion-luz);
}
@media (min-width:700px){ .nvl-hoja{padding:52px 62px 34px} }

.nvl-cap-titulo{
  font-family:var(--serif); font-weight:600; font-size:1.5rem;
  text-align:center; margin:0 0 14px; letter-spacing:.01em;
}
.nvl-filete{
  width:64px; height:1px; background:var(--linea);
  margin:0 auto 26px; position:relative;
}
.nvl-filete::before,.nvl-filete::after{
  content:''; position:absolute; top:-2px; width:5px; height:5px;
  background:var(--linea); transform:rotate(45deg);
}
.nvl-filete::before{left:-9px} .nvl-filete::after{right:-9px}

.nvl-texto{
  font-family:var(--serif);
  font-size:1.06rem; line-height:1.78;
  color:var(--tinta);
  max-width:34em; margin-inline:auto;
  text-align:justify; hyphens:auto;
}
.nvl-texto p{margin:0 0 1.05em; text-indent:1.4em}
.nvl-texto p:first-of-type{text-indent:0}

/* el cambio de escena: un respiro con su rombo — aire tipográfico, no un
   comienzo de libro. El texto viejo sin marcas no lo usa y se ve igual que
   siempre (compatibilidad hacia atrás obligatoria). */
.nvl-escena{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:30px auto 28px; max-width:110px;
}
.nvl-escena i{flex:1; height:1px; background:var(--linea); opacity:.75}
.nvl-escena .nvl-rombo{
  width:5px; height:5px; border-color:var(--tinta-tenue);
}
.nvl-escena + p{text-indent:0}

/* la capitular: tres renglones, con la primera letra iluminada */
.nvl-capital{
  float:left; font-family:var(--serif); font-weight:600;
  font-size:3.5em; line-height:.82;
  padding:.06em .1em 0 0; margin:.04em .04em 0 0;
  color:var(--terracota);
}

/* la orla de cierre: nada de "FIN", solo un remate tipográfico */
.nvl-cierre-orla{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:30px auto 6px; max-width:170px;
}
.nvl-cierre-orla span{flex:1; height:1px; background:var(--linea)}
.nvl-rombo{
  flex:0 0 auto !important; width:6px; height:6px; background:none !important;
  border:1px solid var(--tinta-tenue); transform:rotate(45deg);
}
.nvl-folio{
  text-align:center; color:var(--tinta-tenue);
  font:400 .76rem/1 var(--sans); letter-spacing:.1em; padding-top:12px;
}

.nvl-fin{text-align:center; margin:26px 0 10px}
.nvl-fin-dice{color:var(--tinta-suave); font-size:.92rem; margin:0 0 14px}

/* ---- las pantallas de espera (ya leyó hoy / terminada) ---- */
.nvl-espera{
  text-align:center; background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); padding:38px 24px 34px; margin-top:14px;
}
.nvl-espera h1{font-family:var(--serif); font-size:1.5rem; margin:14px 0 10px}
.nvl-espera-dice{font-family:var(--serif); font-size:1.1rem; margin:0 0 6px}
.nvl-espera-sub{color:var(--tinta-suave); font-size:.94rem; margin:0 0 22px}

/* ================================================================
   LA LÁMINA DE PREMIO
   ================================================================ */

.nvl-galeria{display:grid; gap:24px; justify-items:center}
@media (min-width:640px){ .nvl-galeria{grid-template-columns:1fr 1fr} }

.nvl-lamina{
  margin:0; width:100%; max-width:340px;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); padding:14px 14px 4px;
  box-shadow:var(--sombra-chica);
}
.nvl-lamina svg{width:100%; height:auto; display:block; color:var(--tinta)}
.nvl-lamina-pie{text-align:center; padding:6px 12px 16px; color:var(--tinta)}
.nvl-lamina-linea{
  font-family:var(--serif); font-style:italic; font-size:.98rem; line-height:1.55;
  margin:8px 0 12px;
}
.nvl-lamina-para{
  font-family:var(--serif); font-size:.86rem; color:var(--tinta-suave); margin:0 0 5px;
}
.nvl-lamina-titulo{
  font:600 .64rem/1 var(--sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--tinta-tenue); margin:0;
}

/* el premio recién ganado, que llega sin recargar */
.nvl-premio{margin-top:26px; display:flex; justify-content:center}
.nvl-premio[hidden]{display:none}
.nvl-premio-llega{animation:nvlPremio .7s ease both}
@keyframes nvlPremio{
  from{opacity:0; transform:translateY(10px) scale(.985)}
  to{opacity:1; transform:none}
}

/* ---- Tu Novela: el panel (prefijo nva-) ---- */
.nva-cabecera{margin:6px 0 22px}
.nva-cabecera h1{font-family:var(--serif); margin:0 0 4px}
.nva-cabecera p{color:var(--tinta-suave); margin:0}

.nva-vigia{
  background:var(--tarjeta); border:1px solid var(--linea); border-left:4px solid var(--salvia);
  border-radius:var(--radio-ch); padding:18px 20px; margin:0 0 20px;
}
.nva-vigia h2{font-size:1.12rem; margin:0 0 8px}
.nva-vigia p{margin:0 0 8px; color:var(--tinta-suave)}
.nva-vigia.es-alarma{border-left-color:var(--terracota-fuerte); background:var(--miel-suave)}
.nva-vigia.es-alarma h2{color:var(--terracota-fuerte); animation:nvaLate 2.2s ease-in-out infinite}
@keyframes nvaLate{0%,100%{opacity:1} 50%{opacity:.62}}
.nva-como code,.nva-nota code{
  background:var(--fondo-suave); border:1px solid var(--linea); border-radius:4px;
  padding:1px 6px; font-size:.9em;
}
.nva-generos{font-size:.9rem; color:var(--tinta-tenue)}

.nva-cifras{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 26px}
.nva-cifra{
  flex:1 1 150px; background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); padding:14px 16px; text-align:center;
}
.nva-cifra b{display:block; font-size:1.7rem; font-family:var(--serif)}
.nva-cifra span{font-size:.8rem; color:var(--tinta-tenue)}

.nva-titulo2{
  font:600 .74rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-tenue); margin:28px 0 12px;
}
.nva-vacio{color:var(--tinta-suave)}

.nva-ficha{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); padding:16px 18px; margin:0 0 14px;
}
.nva-ficha-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.nva-ficha-cab b{font-family:var(--serif); font-size:1.14rem}
.nva-ficha-tema{font-size:.86rem; color:var(--tinta-tenue); margin:4px 0 2px}
.nva-ficha-fondo{font-size:.92rem; color:var(--tinta-suave); margin:0 0 10px}

.nva-chip{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  font:600 .66rem/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--linea); color:var(--tinta-tenue);
}
.nva-chip.es-publicada{background:var(--salvia-suave); border-color:var(--salvia); color:var(--tinta)}
.nva-chip.es-retirada{background:var(--rosa-suave); border-color:var(--rosa)}

.nva-datos{display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0; margin:0;
  font-size:.86rem; color:var(--tinta-suave)}
.nva-datos b{color:var(--tinta)}
.nva-ojo{color:var(--terracota-fuerte); font-weight:600}

.nva-boton{
  border:1px solid var(--terracota); background:var(--terracota); color:#fff;
  border-radius:999px; padding:7px 16px; font:600 .84rem/1 var(--sans); cursor:pointer;
}
.nva-boton.suave{background:transparent; color:var(--terracota)}
.nva-nota{font-size:.88rem; color:var(--tinta-tenue); margin-top:26px; line-height:1.6}

/* ---- Tu Novela: la mesa de lectura (una sola historia por vez) ---- */
.nvl-quinque-caja{display:flex; justify-content:center; margin-bottom:6px}
.nvl-quinque{width:82px; height:auto; display:block}

.nvl-mesa{
  display:grid; gap:26px; align-items:start;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 24px 30px; box-shadow:var(--sombra-chica);
}
@media (min-width:660px){ .nvl-mesa{grid-template-columns:206px 1fr; gap:34px; padding:34px} }

/* la portada, apoyada: color propio, pero la sombra la pone la hora */
.nvl-mesa-libro{display:flex; justify-content:center}
.nvl-portada{
  width:100%; max-width:206px; height:auto; display:block;
  border-radius:2px 5px 5px 2px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55), 0 2px 5px -2px rgba(0,0,0,.4);
  transform:rotate(-.6deg);
}
.nvl-mesa-ficha h2{font-family:var(--serif); font-size:1.72rem; margin:8px 0 12px}
.nvl-mesa-ficha .nvl-contratapa{
  font-family:var(--serif); font-size:1rem; line-height:1.68;
  color:var(--tinta-suave); margin:0 0 18px;
}
.nvl-mesa-ficha .nvl-avance{justify-content:flex-start}
.nvl-mesa-ficha .nvl-avance-dice{margin-bottom:18px}

/* ================================================================
   Tu Novela — el botón dorado, y el teléfono

   ⚠ Defecto propio (26/7, lo vio Christian en el sitio): las vistas
   usaban class="boton", que NO EXISTE en esta hoja — solo existe
   .boton-suave. El enlace salía azul y subrayado, como un link pelado.
   Una clase inventada no da error: simplemente no hace nada.
   ================================================================ */

.nvl-col{
  /* el dorado del sector: el mismo de la portada, ajustado a cada luz */
  --nvl-oro:#9A7628;
  --nvl-oro-suave:rgba(154,118,40,.09);
}
html[data-luz="tarde"] .nvl-col{--nvl-oro:#A06B2C; --nvl-oro-suave:rgba(160,107,44,.10)}
html[data-luz="noche"] .nvl-col{--nvl-oro:#D3AC5E; --nvl-oro-suave:rgba(211,172,94,.13)}

.nvl-boton{
  display:inline-block; text-decoration:none; cursor:pointer;
  font:500 1rem/1 var(--serif); letter-spacing:.02em;
  color:var(--nvl-oro);
  background:var(--nvl-oro-suave);
  border:1px solid var(--nvl-oro);
  border-radius:999px;
  padding:12px 26px;
  transition:background .25s ease, color .25s ease, border-color var(--transicion-luz);
}
.nvl-boton:hover{background:var(--nvl-oro); color:var(--tarjeta)}
.nvl-boton:focus-visible{outline:2px solid var(--nvl-oro); outline-offset:3px}
.nvl-boton:active{transform:scale(.98)}
.nvl-boton[disabled]{opacity:.55; cursor:default; transform:none}

/* ---- el teléfono, y el teléfono acostado ---- */
@media (max-width:560px){
  /* justificado en columna angosta abre ríos de espacio: en el teléfono,
     el texto va alineado a la izquierda */
  .nvl-texto{text-align:left; hyphens:auto; font-size:1.04rem; line-height:1.74}
  .nvl-capital{font-size:3.1em}
  .nvl-hoja{padding:26px 18px 20px; border-radius:2px 8px 8px 2px}
  .nvl-cap-titulo{font-size:1.3rem}
  .nvl-cornisa{flex-wrap:wrap; gap:2px 12px; font-size:.62rem}
  .nvl-mesa{padding:22px 18px 26px}
  .nvl-portada{max-width:170px}
  .nvl-boton{width:100%; text-align:center; padding:14px 20px}
  .nvl-galeria{grid-template-columns:1fr}
}
@media (max-width:360px){
  .nvl-capital{font-size:2.7em}
  .nvl-hoja{padding:22px 14px 18px}
}
/* acostado y bajito: que la hoja no obligue a desplazarse por gusto */
@media (max-height:520px) and (orientation:landscape){
  .nvl-intro{margin-bottom:14px}
  .nvl-quinque{width:58px}
  .nvl-hoja{padding-top:26px}
}

/* ---- el fuego del quinqué: color propio, y su fuerza por hora ----
   De mañana el halo con var(--sol) se fundía con el marfil y la llama parecía
   quieta. El fuego ahora es ámbar anaranjado y se lee en las tres luces. */
.nvl-quinque{
  --nvl-llama:#E08A28; --nvl-llama-nucleo:#FFE6B0;
  --nvl-halo:rgba(224,138,40,.50);
  --nvl-halo-medio:rgba(224,138,40,.17);
  --nvl-halo-nada:rgba(224,138,40,0);
}
html[data-luz="tarde"] .nvl-quinque{
  --nvl-llama:#DC7A23; --nvl-llama-nucleo:#FFE0A4;
  --nvl-halo:rgba(220,122,35,.52);
  --nvl-halo-medio:rgba(220,122,35,.18);
  --nvl-halo-nada:rgba(220,122,35,0);
}
html[data-luz="noche"] .nvl-quinque{
  --nvl-llama:#F2A93F; --nvl-llama-nucleo:#FFF0CB;
  --nvl-halo:rgba(242,169,63,.60);
  --nvl-halo-medio:rgba(242,169,63,.20);
  --nvl-halo-nada:rgba(242,169,63,0);
}

/* ---- volver a un capítulo ya leído, y la doble confirmación ---- */
.nvl-atras{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 12px; padding:0 4px;
  font:400 .78rem/1 var(--sans); color:var(--tinta-tenue);
}
.nvl-atras span{letter-spacing:.08em}
.nvl-atras-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 7px;
  border:1px solid var(--linea); border-radius:6px;
  font:500 .78rem/1 var(--serif); color:var(--tinta-suave); text-decoration:none;
  transition:border-color .2s ease, color .2s ease;
}
.nvl-atras-n:hover{border-color:var(--nvl-oro); color:var(--nvl-oro)}
.nvl-atras-n.es-aqui{border-color:var(--nvl-oro); color:var(--nvl-oro); background:var(--nvl-oro-suave)}
.nvl-boton.es-preguntando{
  background:var(--nvl-oro); color:var(--tarjeta); border-color:var(--nvl-oro);
}
.nvl-espera-otra{margin:16px 0 0; font-size:.9rem}
.nvl-espera-otra a{color:var(--tinta-tenue)}

/* ---- Tus temas para pensar: los colapsibles ---- */
.nvl-pensares{display:flex; flex-direction:column; gap:12px}
.nvl-pensar{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); overflow:hidden;
}
.nvl-pensar summary{
  cursor:pointer; list-style:none; padding:16px 18px;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  transition:background .2s ease;
}
.nvl-pensar summary::-webkit-details-marker{display:none}
.nvl-pensar summary::after{
  content:'+'; margin-left:auto; color:var(--nvl-oro);
  font:400 1.15rem/1 var(--sans); transition:transform .25s ease;
}
.nvl-pensar[open] summary::after{content:'−'}
.nvl-pensar summary:hover{background:var(--nvl-oro-suave)}
.nvl-pensar summary:focus-visible{outline:2px solid var(--nvl-oro); outline-offset:-3px}
.nvl-pensar-titulo{font-family:var(--serif); font-size:1.14rem; color:var(--tinta)}
.nvl-pensar-mundo{
  font:600 .64rem/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.nvl-pensar-cuerpo{padding:0 18px 20px; display:flex; justify-content:center}
.nvl-pensar-cuerpo .nvl-lamina{border:0; box-shadow:none; padding:0; background:none}
@media (prefers-reduced-motion:reduce){ .nvl-pensar summary{transition:none} }

/* ---- el libro entero, en el panel ---- */
.nvl-indice{
  display:grid; gap:6px; margin:0 0 30px;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); padding:16px 18px;
}
.nvl-indice a{
  display:flex; align-items:baseline; gap:12px; text-decoration:none;
  color:var(--tinta-suave); padding:4px 0;
}
.nvl-indice a:hover{color:var(--nvl-oro)}
.nvl-indice b{
  min-width:34px; font-family:var(--serif); color:var(--nvl-oro);
  font-weight:500; letter-spacing:.04em;
}
.nvl-indice span{font-family:var(--serif)}
.nvl-volver-indice{text-align:center; margin:14px 0 42px; font-size:.84rem}
.nvl-volver-indice a{color:var(--tinta-tenue); text-decoration:none}
.nva-acciones{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nva-boton.suave:hover{background:var(--terracota); color:#fff}

/* ---- el premio, visto desde el panel ---- */
.nvl-premio-panel{display:flex; justify-content:center; margin:0 0 18px}
.nvl-premio-panel .nvl-lamina{max-width:400px}
.nvl-premio-nota{
  color:var(--tinta-suave); font-size:.92rem; line-height:1.6;
  max-width:34em; margin:0 auto 30px; text-align:center;
}
.nvl-premio-otras{
  font:600 .72rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-tenue); text-align:center; margin:0 0 14px;
}
.nvl-premio-tira{display:grid; gap:18px; justify-items:center; margin-bottom:40px}
@media (min-width:640px){ .nvl-premio-tira{grid-template-columns:1fr 1fr} }
.nvl-premio-tira .nvl-lamina{max-width:280px}

/* ---- el cierre del día: se ve qué quedó hecho y qué pasa mañana ---- */
.nvl-cerrado{
  text-align:center; margin:26px 0 10px;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); padding:28px 22px 26px;
  animation:nvlCierre .5s ease both;
}
@keyframes nvlCierre{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.nvl-cerrado-tilde{
  font:400 1.5rem/1 var(--sans); color:var(--nvl-oro); margin:0 0 10px;
}
.nvl-cerrado-hecho{
  font-family:var(--serif); font-size:1.16rem; color:var(--tinta); margin:0 0 6px;
}
.nvl-cerrado-manana{color:var(--tinta-suave); font-size:.95rem; margin:0 0 20px}
.nvl-cerrado-puertas{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.nvl-fin-dice.es-avisando{color:var(--nvl-oro)}

/* ---- el panel de la novela: el proceso y la gente ---- */
.nva-listo{background:var(--salvia-suave); border:1px solid var(--salvia);
  border-radius:var(--radio-ch); padding:10px 16px; margin:0 0 16px}

/* ---- Lo que el editor dejó para decidir ----------------------------------
   Los errores de dato ya vienen arreglados; esto es lo otro. No se aplica solo,
   y mientras haya alguno sin resolver la historia no se puede publicar.        */
.nva-frenada{
  background:var(--rosa-suave); border:1px solid var(--rosa);
  border-radius:var(--radio-ch); padding:11px 16px; margin:0 0 16px;
  line-height:1.6;
}
.nva-chip.es-aviso{
  background:var(--rosa-suave); border-color:var(--rosa);
  color:var(--tinta); text-decoration:none;
}
/* el Publicar trabado: se ve que existe pero lleva a lo que falta decidir */
.nva-boton.trabada{
  background:transparent; color:var(--tinta-tenue); border-color:var(--linea);
  text-decoration:none; display:inline-block;
}
.nva-boton.trabada::after{content:' ⚑'}

.nva-avisos{
  margin:16px 0 0; padding:14px 16px;
  border:1px solid var(--rosa); border-radius:var(--radio-ch);
  background:var(--rosa-suave);
}
.nva-avisos h3{margin:0 0 4px; font-size:.98rem}
.nva-avisos-bajada{margin:0 0 14px; font-size:.86rem; color:var(--tinta-suave); line-height:1.6}

.nva-aviso{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); padding:13px 15px; margin:0 0 11px;
}
.nva-aviso-cap{
  margin:0 0 5px; font:600 .68rem/1.6 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue);
}
.nva-aviso-por{margin:0 0 12px; font-size:.92rem; line-height:1.6}

/* las dos versiones lado a lado en compu, una arriba de otra en teléfono */
.nva-aviso-par{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:760px){ .nva-aviso-par{grid-template-columns:1fr} }
.nva-aviso-lado{min-width:0}
.nva-aviso-et{
  display:block; margin-bottom:4px; font:600 .66rem/1.6 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue);
}
.nva-aviso-lado blockquote{
  margin:0; padding:10px 12px; border-radius:var(--radio-ch);
  border:1px solid var(--linea); background:var(--fondo);
  font-family:var(--serif); font-size:.9rem; line-height:1.65;
  /* un pasaje largo no puede estirar la tarjeta ni empujar la página */
  max-height:220px; overflow-y:auto; overflow-wrap:anywhere;
}
.nva-aviso-lado.es-nueva blockquote{
  border-color:var(--salvia); background:var(--salvia-suave);
}
.nva-aviso-botones{margin-top:12px}
.nva-aviso-botones form{display:flex; gap:8px; flex-wrap:wrap}
.nva-aviso-todos{
  margin-top:4px; padding-top:12px; border-top:1px solid var(--rosa);
}
.nva-aviso-todos form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nva-aviso-todos span{font-size:.86rem; color:var(--tinta-suave)}
.nva-proceso{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); padding:20px 22px; margin:0 0 22px;
}
.nva-proceso h2{font-size:1.05rem; margin:0 0 14px}
.nva-pasos{list-style:none; margin:0; padding:0; display:grid; gap:14px}
@media (min-width:760px){ .nva-pasos{grid-template-columns:1fr 1fr} }
.nva-pasos li{display:flex; gap:12px; align-items:flex-start}
.nva-paso-n{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--nvl-oro-suave, rgba(154,118,40,.09));
  border:1px solid var(--terracota); color:var(--terracota);
  font:600 .82rem/1 var(--sans);
}
/* ⛔ SOLO el <b> del título del paso, no todos. Como `.nva-pasos b` alcanzaba
   también a las negritas de adentro del párrafo, cada una se llevaba su propio
   renglón y el texto quedaba desarmado en escalera: «Vos elegís una» arriba y
   «, y escribe los siete capítulos solo.» abajo (Christian, 27/7). */
.nva-pasos li > div > b{display:block; margin-bottom:2px}
.nva-pasos p{margin:0; font-size:.88rem; color:var(--tinta-suave); line-height:1.55}
/* la aclaración de las dos redes de error. `.nva-pasos p` va a margen cero, así que
   sin esto quedaría pegada al párrafo de arriba. Más tenue y con filete para que no
   compita con el paso en sí: es una tranquilidad, no una tarea suya. */
.nva-pasos p.nva-paso-extra{
  margin-top:7px; padding-left:9px; font-size:.83rem;
  border-left:2px solid var(--linea); color:var(--tinta-tenue);
}
.nva-proceso-pie{margin:16px 0 0; font-size:.86rem; color:var(--tinta-tenue); line-height:1.6}

.nva-lectores{margin-top:12px; border-top:1px solid var(--linea); padding-top:10px}
.nva-lectores summary{cursor:pointer; font-size:.86rem; color:var(--tinta-suave)}
.nva-gente{width:100%; border-collapse:collapse; margin-top:10px; font-size:.86rem}
.nva-gente td{padding:6px 8px; border-bottom:1px solid var(--linea); vertical-align:middle}
.nva-gente td.num{color:var(--tinta-tenue); font-variant-numeric:tabular-nums}
.nva-gente-nota{font-size:.8rem; color:var(--tinta-tenue); margin:10px 0 0; line-height:1.5}

/* ================================================================
   PORTADA · EL LEMA (la frase madre + el detalle)
   Reemplaza a la vieja .bajada del hero. Cuatro tratamientos en
   prueba (lema-f1..f4) — al elegir uno, se borran los otros tres.
   ================================================================ */

.lema{
  display:flex; flex-direction:column; align-items:center;
  gap:5px; width:100%;
}
.lema-madre{
  display:flex; flex-direction:column; gap:1px;
  margin:0; max-width:31ch; /* el primer renglón («Compañía, calma y experiencias») mide 30ch */
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.02rem, 4.4vw, 1.34rem);
  line-height:1.26; letter-spacing:-.005em;
  color:var(--tinta); text-align:center;
  text-shadow:0 1px 10px rgba(241,240,235,.92);
}
.lema-luz{position:relative; white-space:nowrap; color:var(--terracota-fuerte)}
/* en teléfono el detalle va SIEMPRE en dos renglones, nunca tres: por eso la
   letra cede un poco en las pantallas angostas (a 320 px entraría en tres) */
.lema-detalle{
  margin:13px 0 0; /* un renglón de respiro tras la frase madre (Christian, 14/8) */
  max-width:46ch;
  font-size:clamp(.78rem, 3.6vw, .87rem); line-height:1.45;
  color:var(--tinta-suave); text-align:center;
  text-shadow:0 1px 10px rgba(241,240,235,.92);
}
.lema-sol{color:var(--terracota); font-weight:700}

/* El detalle vive en dos versiones (mismo patrón que nota-corta/larga): la
   completa solo cabe en UN renglón en escritorio ancho; en teléfono (dos
   renglones, nunca tres) y en tablet (un solo renglón, 29/7) va la corta. */
.detalle-larga{display:none}
@media (min-width:1080px){
  .detalle-corta{display:none}
  .detalle-larga{display:inline}
}
/* en los teléfonos más angostos la corta entraría en TRES renglones:
   la letra cede un poco más para sostener los dos */
@media (max-width:340px){
  .lema-detalle{font-size:.74rem}
}

/* apagados por defecto: cada variante enciende lo suyo */
.lema .trazo-lema{display:none}
.lema .lema-filete{display:none}

/* --- 2 · con el trazo dibujado a mano, como el título --- */
/* el trazo es chico: si se calca la proporción del título queda un hilito.
   Va con más cuerpo (.24em) para que se lea como trazo de mano y no como
   subrayado (ver «animación chica pide más amplitud»). */
.lema-f2 .trazo-lema{
  display:block; position:absolute;
  left:-1.5%; bottom:-.20em; width:103%; height:.24em;
  color:var(--terracota); overflow:visible;
}

/* --- 3 · editorial: todo en Fraunces, con filete y solcito --- */
.lema-f3 .lema-detalle{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:.94rem; line-height:1.42; letter-spacing:.005em;
  max-width:38ch;
}
.lema-f3 .lema-sol{font-style:normal; font-weight:600}
.lema-f3 .lema-filete{
  display:block; position:relative;
  width:136px; height:9px; margin:1px 0 0;
  background:radial-gradient(circle at 50% 4px,
              var(--sol) 0 3.2px,
              rgba(233,184,122,.32) 3.2px 5.6px,
              transparent 5.6px);
}
.lema-f3 .lema-filete::before,
.lema-f3 .lema-filete::after{
  content:""; position:absolute; top:4px; width:50px; height:1px; opacity:.55;
}
.lema-f3 .lema-filete::before{left:0;  background:linear-gradient(90deg, transparent, var(--terracota))}
.lema-f3 .lema-filete::after {right:0; background:linear-gradient(90deg, var(--terracota), transparent)}

/* --- 4 · sobre una tarjeta marfil que despega de la foto --- */
.lema-f4{
  gap:6px;
  background:rgba(255,251,244,.74);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);
          backdrop-filter:blur(7px) saturate(1.05);
  border:1px solid rgba(230,228,221,.85);
  border-radius:22px;
  padding:14px 22px 15px;
  box-shadow:0 8px 26px rgba(115,105,90,.13);
  width:auto; max-width:46ch;
}
.lema-f4 .lema-madre,
.lema-f4 .lema-detalle{text-shadow:none}

/* corte de renglón invisible: en pantalla grande el pie del hero es una fila
   y el lema tiene que quedarse con el renglón entero (si no, el botón se le
   sienta al lado). En teléfono no existe. */
.hero-corte{display:none}

/* De tablet para arriba el detalle va en UN SOLO renglón (Christian, 29/7):
   cortado en dos parte la frase y se pierde el golpe. */
@media (min-width:760px){
  .lema-detalle{max-width:none; white-space:nowrap}
  .lema-f3 .lema-detalle{max-width:none}
  .lema-f4{max-width:none; width:auto}
}

@media (min-width:1080px){
  .hero-corte{display:block; flex-basis:100%; height:0}
  .lema-f4{margin:0 auto}
  .lema-madre{max-width:none}
  .hero-pie{gap:6px 26px; padding-bottom:8px}
  .lema{gap:2px}
  /* aire entre el lema y el botón: estaban pegados (Christian, 29/7);
     un renglón más al crecer el respiro del detalle (14/8) */
  .hero-pie .lema{margin-bottom:26px}
  /* en pantallas altas el hero se estira y el lema baja solo.
     +28px (14/8): el pie creció con los respiros nuevos y, como está anclado
     abajo, sin esta altura extra la frase madre SUBÍA en vez de bajar lo demás */
  .hero{min-height:max(calc(100vh - 122px), 698px)}
}

/* --- el bloque baja y el dibujo respira --- */

/* En teléfono el hero se estira: el lema y el botón bajan, lejos de las caras.
   Christian aceptó que en teléfono la parte de abajo quede un poco más abajo. */
@media (max-width:1079px){
  .hero{min-height:calc(100svh - 90px)} /* +28px por los respiros del pie (14/8) */
  .hero-pie .lema{margin-bottom:24px}   /* aire antes del botón (+1 renglón, 14/8) */
}

/* El velo de abajo sube más y más opaco: el texto se apoya sobre bruma, no
   sobre la gente del dibujo (era el «queda muy feo» del 29/7). */
.hero::after{
  height:48%;
  background:linear-gradient(0deg,
    #F1F0EB 14%,
    rgba(241,240,235,.93) 44%,
    rgba(241,240,235,.62) 70%,
    rgba(241,240,235,.22) 88%,
    transparent 100%);
}

/* --- la línea de las cuentas, en UN renglón en teléfono --- */
.entrada-nota{flex-wrap:nowrap; white-space:nowrap}
.nota-larga{display:none}
@media (min-width:760px){
  .nota-corta{display:none}
  .nota-larga{display:inline}
}

/* --- ⚠️ TEMPORAL: la tirita para saltar entre variantes (?frase=) --- */
.prueba-frases{
  position:fixed; right:10px; bottom:10px; z-index:60;
  display:flex; align-items:center; gap:5px;
  background:rgba(74,59,48,.88); color:#FFF3E4;
  border-radius:99px; padding:5px 9px;
  font-size:.72rem; letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.prueba-frases a{
  display:flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:50%;
  color:#FFF3E4; text-decoration:none; font-weight:700;
  background:rgba(255,255,255,.14);
}
.prueba-frases a.viva{background:#BE7A61; color:#fff}


/* ================================================================
   NUESTRO PORQUÉ — el encabezado animado y la carta manuscrita
   Rehecho el 29/7: la escena es la FRANJA de encabezado que tienen
   todos los lugares de la casa (no un fondo), y la carta se apoya
   sobre papel de renglones, como la hoja de Tu Cuaderno.
   ================================================================ */

/* --- la franja del encabezado: hereda el marco de .lugar-escena --- */
.pq-escena{
  aspect-ratio:640/300;
  background:var(--fondo-suave);
}
.pq-escena canvas{
  display:block; width:100%; height:100%;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* --- la carta, sobre papel de renglones --- */
.pq-manuscrito{
  position:relative;
  margin:18px 0 30px;
  padding:26px 20px 28px 34px;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio, 18px);
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
/* el margen rojo del cuaderno */
.pq-manuscrito::before{
  content:""; position:absolute; top:14px; bottom:14px; left:20px; width:1px;
  background:color-mix(in srgb, var(--terracota) 42%, transparent);
}
/* los renglones, y el texto SENTADO sobre ellos: el alto de línea y el paso
   del rayado tienen que ser el mismo número o la letra se despega */
.pq-renglones{
  background:repeating-linear-gradient(
    transparent 0, transparent 27px,
    color-mix(in srgb, var(--tinta) 11%, transparent) 27px,
    color-mix(in srgb, var(--tinta) 11%, transparent) 28px);
}
.pq-renglones p{
  font-family:var(--serif);
  font-size:1rem; line-height:28px; margin:0 0 28px;
  color:var(--tinta);
}
.pq-renglones p:last-child{margin-bottom:0}
.pq-renglones strong{font-weight:700}

.pq-renglones .pq-arranque{font-weight:700}
.pq-renglones .pq-cierre{
  font-style:italic; font-weight:700;
  color:var(--terracota-fuerte);
}

@media (min-width:760px){
  .pq-manuscrito{padding:34px 34px 36px 52px; margin-bottom:44px}
  .pq-manuscrito::before{left:34px; top:20px; bottom:20px}
  .pq-renglones{
    background:repeating-linear-gradient(
      transparent 0, transparent 31px,
      color-mix(in srgb, var(--tinta) 11%, transparent) 31px,
      color-mix(in srgb, var(--tinta) 11%, transparent) 32px);
  }
  .pq-renglones p{font-size:1.06rem; line-height:32px; margin-bottom:32px}
}

/* --- el enlace de la barra de arriba, con su solcito --- */
.barra-arriba a.pq-enlace{display:inline-flex; align-items:center; gap:5px}
/* Christian, 29/7: «tres veces más grande, casi no se ve». Va a 30 px con
   márgenes negativos para que la barra no se estire por el ícono.
   El color es PROPIO, no currentColor: así no cambia al tocarlo ni queda
   marcado como visitado. */
.barra-arriba .pq-solcito{
  width:26px; height:26px; flex:none;   /* 30 px menos el 15% que pidió Christian */
  margin:-7px -3px -7px 0;
  color:var(--pq-solcito-barra, #E3B45C);
}
html[data-luz="noche"] .barra-arriba .pq-solcito{--pq-solcito-barra:#EFC77E}
.barra-arriba a.pq-enlace:visited{color:var(--tinta-suave)}
.barra-arriba a.pq-enlace.activo:visited{color:var(--terracota)}

/* ---- «Free / Premium» en la barra, y el menú de las pantallas chicas ----
   (Christian, 2/8). En pantalla ancha se ve el enlace; en el teléfono no
   entra, así que se retira el solcito y aparece el cuadradito de siempre.
   ⛔ El panel nace con su [hidden]{display:none}: sin eso queda invisible
   pero PUESTO, comiéndose los toques de la barra (lección del 29/7). */
.barra-arriba .menu-chico-caja{position:relative; display:none; align-items:center}
.barra-arriba .menu-chico{padding:4px 6px}
.barra-arriba .menu-chico svg{width:18px; height:18px}
.barra-arriba .menu-chico[aria-expanded="true"]{
  background:var(--tarjeta); color:var(--terracota);
  border-color:var(--linea); box-shadow:var(--sombra-chica);
}
/* ⛔ Anclado al borde de la PANTALLA, no al botón: en 375 px la barra va
   tan justa que el botón queda pegado al borde y el panel se salía 10 px
   (medido el 2/8). Con position:fixed no se puede escapar. */
.menu-chico-panel{
  position:fixed; top:var(--alto-barra, 50px); right:10px; z-index:70;
  min-width:150px; padding:6px;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:12px; box-shadow:var(--sombra);
  transition:var(--transicion-luz);
}
.menu-chico-panel[hidden]{display:none}
.barra-arriba .menu-chico-panel a{
  display:block; width:100%; text-align:left;
  padding:8px 10px; font-size:.78rem; border-radius:8px;
}
.barra-arriba .menu-chico-panel a:hover{background:var(--fondo)}

/* Las lucecitas se pegan al borde derecho, y el cuadradito de las rayitas queda
   a la derecha de ellas (Christian, 3/8). Sin esto el reparto del espacio dejaba
   las lucecitas flotando en el medio. En tablet y computadora el cuadradito está
   apagado, así que las lucecitas siguen donde siempre. */
.barra-arriba .grupo.luces{margin-left:auto}

@media (max-width:700px){
  .barra-arriba .pq-solcito{display:none}
  .barra-arriba a.premium-enlace{display:none}
  .barra-arriba .menu-chico-caja{display:inline-flex}
  /* ⛔ En el teléfono «Nuestro porqué» se retira de la barra (Christian, 3/8):
     ocupaba tanto que las tres lucecitas de la luz del día caían a un segundo
     renglón, y ese renglón se montaba encima del sitio tapando opciones. La
     carta no se pierde: en Tu casa va TERCERA en la fila de piezas. */
  .barra-arriba a.pq-enlace{display:none}
  /* Y se le quita un poco de aire a los botones, SOLO en el teléfono: retirar
     «Nuestro porqué» dejaba la barra necesitando 396 px de ancho y el teléfono
     común tiene 375 o 390 — seguía cayendo el segundo renglón. Con esto entra
     en un solo renglón desde 347 px, o sea en todos (medido el 3/8). */
  .barra-arriba{padding-left:8px; padding-right:8px; gap:4px 6px}
  .barra-arriba .grupo{gap:3px}
  .barra-arriba a, .barra-arriba button{padding:4px 5px}
  .barra-arriba .ir-inicio{padding:3px 5px}
  .barra-arriba .luces button{padding:5px 4px}
}

/* --- el teléfono viejo, o el que tiene el texto agrandado (Christian, 3/8) ---
   Debajo de 347 px lo de arriba todavía no alcanzaba y las rayitas se caían
   solas a un segundo renglón. Acá la letra baja un pelo (de 0,68 a 0,62) y se
   recortan bordes: la barra pasa a necesitar 301 px, o sea que entra en un
   renglón hasta en una pantalla de 320 con 19 px de sobra — ese sobrante es el
   que aguanta a quien agranda el texto.
   ⚠ Solo acá abajo: ningún teléfono normal ve la letra más chica. Achicarla en
   todos sería ir contra nuestra gente, que justamente agranda para leer. */
@media (max-width:350px){
  .barra-arriba{padding-left:6px; padding-right:6px; gap:4px 5px}
  .barra-arriba .grupo{gap:2px}
  .barra-arriba a, .barra-arriba button{font-size:.62rem; letter-spacing:.02em; padding:4px 4px}
  .barra-arriba svg{width:14px; height:14px}
  .barra-arriba .ir-inicio{padding:3px 4px}
  .barra-arriba .ir-inicio svg{width:20px; height:20px}
  .barra-arriba .luces button{padding:5px 3px}
}
.que-hacer .cada a{color:var(--terracota); text-decoration:none}
.que-hacer .cada a:hover{text-decoration:underline}

/* --- portada: aire entre el hero y la caja de promesas ---
   En tablet y computadora la imagen quedaba pegada al botón (Christian,
   29/7); en teléfono está bien y no se toca. */
@media (min-width:760px){
  .promesas-franja{padding-top:40px}
}

/* ============================================================
   LAS LLAVES — muestra visual v2 (30/7, diseño de Christian):
   · .llave-puntito  la llavecita discreta EN el cuadradito premium
   · .llave-pie      la leyenda-invitación al pie, delicada
   Nada corta el flujo de arriba; los que no son premium quedan
   limpios. El dorado de noche se aclara para seguir leyéndose.
   ============================================================ */
html{--llave:#A8791D}
html[data-luz="tarde"]{--llave:#9C6F16}
html[data-luz="noche"]{--llave:#E4BE6E}

.llave-puntito{
  position:absolute; top:9px; right:9px; z-index:2;
  width:21px; height:21px; border-radius:50%;
  background:color-mix(in srgb, var(--tarjeta) 82%, transparent);
  box-shadow:0 1px 4px rgba(0,0,0,.10);
  display:grid; place-items:center;
  pointer-events:none;   /* el toque pasa de largo: la tarjeta sigue igual */
}
.llave-puntito svg{width:12px; height:12px; color:var(--llave)}

/* la leyenda del pie, en una o dos líneas (Christian, 30/7): arriba la
   invitación con la llavecita; abajo —solo en las secciones «en bloque»,
   donde la llave sola no dice sobre qué es— qué incluye free y qué suma
   premium, en una línea más tenue todavía. */
.llave-pie{margin:26px auto 4px; text-align:center; letter-spacing:.03em}
/* ⛔ cada línea es UNA línea, también en el teléfono (Christian, 30/7):
   nada de saltos — el texto es corto y la letra se achica apenas si la
   pantalla es muy angosta */
.llave-pie .invita{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0; color:var(--tinta-suave);
  font-size:min(.8rem, 3.5vw); white-space:nowrap;
}
.llave-pie .invita svg{width:17px; height:17px; flex:none; color:var(--llave)}
.llave-pie .detalle{
  margin:5px auto 0;
  color:var(--tinta-tenue); font-size:min(.75rem, 3.3vw); line-height:1.5;
  white-space:nowrap;
}

/* el que lleva puntito y no es tarjeta (una cajita, el banco) necesita
   ser su propio marco de referencia */
.llave-caja{position:relative}

/* la llavecita dentro de un chip del visor de escenas (La Ventana):
   hereda el espacio del chip, chiquita y dorada */
.vtn-chip-llave{width:11px; height:11px; flex:none; color:var(--llave); margin-left:-2px}

/* ============================================================
   LO QUE SE ESTÁ PERDIENDO, A LA VISTA (F2.e, 31/7)
   El criterio de Christian: que nadie crea que la casa tiene
   poco, o que algo no anda. Lo cerrado SE VE — con su leyenda
   delicada y un badge dorado que late para llevar la vista —
   y al tocarlo se abre la ventanita de las opciones, imposible
   de no ver. Siempre invitación, jamás idioma de error.
   ============================================================ */

/* el badge que late: un puntito dorado, delicado pero vivo (la
   amplitud es a propósito: chiquito y quieto parecería apagado) */
.llave-badge{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--llave); flex:none;
  animation:llave-late 1.8s ease-in-out infinite;
}
@keyframes llave-late{
  0%, 100%{transform:scale(1); opacity:.55;
    box-shadow:0 0 0 0 color-mix(in srgb, var(--llave) 50%, transparent)}
  50%{transform:scale(1.3); opacity:1;
    box-shadow:0 0 0 7px transparent}
}
@media (prefers-reduced-motion: reduce){
  .llave-badge{animation:none; opacity:.9}
}

/* la leyenda previa: una línea suave arriba de la sección que dice
   cuánto hay en la casa y cómo se abre — sin gritar */
.llave-leyenda{
  display:flex; align-items:flex-start; gap:9px;
  margin:2px 2px 14px; color:var(--tinta-suave);
  font-size:.83rem; line-height:1.5;
}
.llave-leyenda .llave-badge{margin-top:5px}
.llave-leyenda b{color:var(--tinta); font-weight:700}

/* el pie-invitación de siempre gana su latido, sin tocar cada vista */
.llave-pie .invita::after{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--llave); flex:none;
  animation:llave-late 1.8s ease-in-out infinite;
}

/* leyendas y pies son PUERTAS (31/7, Christian: «dice conócelas, haces
   clic y no pasa nada»): el toque lleva a las opciones premium */
a.llave-pie{display:block; text-decoration:none; color:inherit; cursor:pointer}
a.llave-leyenda{text-decoration:none; cursor:pointer}
a.llave-pie:hover .invita span, a.llave-leyenda:hover span:last-child{color:var(--tinta)}
/* y cualquier aviso-invitación convertido en puerta (faro, banco…) */
a.llave-puerta{display:block; text-decoration:none; color:inherit; cursor:pointer}
a.llave-puerta:hover{filter:brightness(.92)}

/* lo cerrado se muestra apagadito: se ve QUÉ existe, se nota que espera */
.llave-gris{opacity:.5; filter:saturate(.4); transition:opacity .25s ease}
.llave-gris:hover{opacity:.68}

/* LA VENTANITA DE LAS OPCIONES: hermana del faro-conf — hojita desde
   abajo en el teléfono, tarjeta centrada en la computadora, viviendo
   la luz de la hora como todo en la casa */
/* nacen con hidden y esta regla lo hace valer aunque otra les ponga display
   (lección del 29/7: un display de clase le gana al hidden del navegador) */
.vnt-velo[hidden], .vnt-caja[hidden]{display:none !important}
.vnt-velo{
  position:fixed; inset:0; z-index:120; background:rgba(30,26,20,.42);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.vnt-velo.visible{opacity:1; pointer-events:auto}
.vnt-caja{
  position:fixed; left:0; right:0; bottom:0; z-index:121;
  background:var(--tarjeta); color:var(--tinta); text-align:center;
  border-radius:26px 26px 0 0; box-shadow:var(--sombra);
  padding:10px 24px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(105%);
  transition:transform .5s cubic-bezier(.22,.9,.3,1), var(--transicion-luz);
}
.vnt-caja.visible{transform:none}
.vnt-caja .asa{width:44px; height:5px; border-radius:99px;
  background:var(--linea); margin:8px auto 14px}
.vnt-titu{display:flex; align-items:center; justify-content:center; gap:9px; margin:0 0 8px}
.vnt-titu .llave-badge{width:8px; height:8px}
.vnt-titu svg{width:21px; height:21px; color:var(--llave); flex:none}
.vnt-titu h3{font-family:var(--serif); font-weight:600; font-size:1.14rem; margin:0}
.vnt-caja p{color:var(--tinta-suave); font-size:.92rem; line-height:1.55;
  margin:0 auto 18px; max-width:40ch}
.vnt-botones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.vnt-btn{
  display:inline-block; text-decoration:none;
  border-radius:99px; padding:11px 22px; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:.92rem;
  border:1.5px solid var(--linea); background:transparent; color:var(--tinta-suave);
  transition:var(--transicion-luz), transform .15s ease;
}
.vnt-btn:hover{transform:translateY(-1px)}
.vnt-btn-lleno{border-color:var(--llave); background:var(--llave); color:#fff}
.vnt-btn-lleno:hover{filter:brightness(1.07)}
@media (min-width:720px){
  .vnt-caja{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(92vw, 410px); border-radius:26px; padding:26px 30px;
    transform:translate(-50%, -46%) scale(.97); opacity:0; pointer-events:none;
    transition:transform .35s ease, opacity .3s ease, var(--transicion-luz);
  }
  .vnt-caja.visible{transform:translate(-50%, -50%); opacity:1; pointer-events:auto}
  .vnt-caja .asa{display:none}
}

/* EL FARO — las palabras textuales de la persona en el papiro (30/7):
   en cursiva y entre comillas, bien distintas de la lectura de los
   filósofos, para que se entienda a qué respondieron */
.faro-parte .faro-textual{
  margin:0; font-style:italic; color:var(--tinta-suave); line-height:1.65;
}

/* borrar una charla del Faro (30/7): delicadito, al pie del papiro */
.faro-borrar{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:10px; padding:4px 9px; border:0; background:none;
  color:var(--tinta-tenue); font-family:var(--sans); font-size:.72rem;
  letter-spacing:.02em; cursor:pointer; border-radius:9px;
  transition:var(--transicion-luz), color .2s ease;
}
.faro-borrar svg{width:14px; height:14px; flex:none}
.faro-borrar:hover{color:var(--terracota); background:color-mix(in srgb, var(--terracota) 8%, transparent)}

/* la ventanita de confirmar el borrado: propia de la casa, nada del
   navegador — hojita desde abajo en el teléfono, tarjeta centrada en la
   computadora, viviendo la luz de la hora como todo */
.faro-conf-velo{
  position:fixed; inset:0; z-index:90; background:rgba(30,26,20,.42);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.faro-conf-velo.visible{opacity:1; pointer-events:auto}
.faro-conf{
  position:fixed; left:0; right:0; bottom:0; z-index:91;
  background:var(--tarjeta); color:var(--tinta); text-align:center;
  border-radius:26px 26px 0 0; box-shadow:var(--sombra);
  padding:10px 24px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(105%);
  transition:transform .5s cubic-bezier(.22,.9,.3,1), var(--transicion-luz);
}
.faro-conf.visible{transform:none}
.faro-conf .asa{width:44px; height:5px; border-radius:99px;
  background:var(--linea); margin:8px auto 14px}
.faro-conf-dibujo{width:30px; height:30px; color:var(--terracota);
  display:block; margin:0 auto 10px}
.faro-conf h3{font-family:var(--serif); font-weight:600; font-size:1.18rem; margin:0 0 8px}
.faro-conf p{color:var(--tinta-suave); font-size:.92rem; line-height:1.55;
  margin:0 auto 18px; max-width:38ch}
.faro-conf-botones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.faro-conf-btn{
  border-radius:99px; padding:11px 22px; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:.92rem;
  border:1.5px solid var(--linea); background:transparent; color:var(--tinta-suave);
  transition:var(--transicion-luz), transform .15s ease;
}
.faro-conf-btn:hover{transform:translateY(-1px)}
.faro-conf-btn-lleno{border-color:var(--terracota); background:var(--terracota); color:#fff}
.faro-conf-btn-lleno:hover{background:var(--terracota-fuerte)}
@media (min-width:720px){
  .faro-conf{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(92vw, 400px); border-radius:26px; padding:26px 30px;
    transform:translate(-50%, -46%) scale(.97); opacity:0; pointer-events:none;
    transition:transform .35s ease, opacity .3s ease, var(--transicion-luz);
  }
  .faro-conf.visible{transform:translate(-50%, -50%); opacity:1; pointer-events:auto}
  .faro-conf .asa{display:none}
}

/* ============================================================
   LAS OPCIONES PREMIUM — la página de las cuatro membresías
   (30/7 · subida al nivel del resto de la casa el 3/8). Vive la
   hora puertas adentro; sin sesión, luz clara fija (eso lo decide
   el controlador). Los dorados salen de --llave, así toda la casa
   habla el mismo idioma.

   ⛔ TODO CUELGA DE .mem-col, Y NO ES CAPRICHO. Existe OTRO juego
   de clases «mem-» mucho más arriba en esta hoja —la ventana de
   «lo que el Sol recuerda de ti», en Tu perfil— que comparte tres
   nombres: .mem-intro, .mem-lista y .mem-form. Sin anclar, las
   reglas se cruzaban en los dos sentidos: a la ventana del perfil
   le llegaba el texto centrado y se le comía el aire del
   formulario, y a estas tarjetas les llegaba el fondo gris que la
   ventana le pone a su lista (ese recuadro apagado detrás de cada
   lista, que nadie había pedido). Con .mem-col adelante, cada una
   se queda en su casa. Regla nueva de esta página = .mem-col
   adelante, siempre.
   ============================================================ */
.mem-col{max-width:1120px}

/* ---- el encabezado ----------------------------------------------------
   La llavecita con su halo tibio, el título grande (crece con la pantalla,
   así el teléfono no lo recorta) y el filete finito que usa la hoja de La
   Habitación para separar la cornisa del texto. */
.mem-col .mem-intro{text-align:center; margin-top:12px}
.mem-col .mem-llave{
  width:38px; height:38px; color:var(--llave); display:block; margin:0 auto 12px;
  filter:drop-shadow(0 3px 10px color-mix(in srgb, var(--llave) 38%, transparent));
}
.mem-col .mem-intro h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.85rem, 7.4vw, 2.35rem); line-height:1.14;
  margin:0; letter-spacing:-.015em;
}
.mem-col .mem-intro h1::after{
  content:""; display:block; width:84px; height:1px; margin:15px auto 14px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--llave) 75%, transparent), transparent);
}
.mem-col .mem-intro p{
  margin:0 auto; max-width:50ch; color:var(--tinta-suave);
  font-size:1rem; line-height:1.62;
}

/* la píldora de los siete días: ahora con el solcito de la casa adelante */
.mem-col .mem-semana{
  display:flex; align-items:center; gap:10px;
  width:fit-content; max-width:100%; margin:22px auto 0; padding:9px 20px 9px 15px;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--sol) 24%, var(--tarjeta)),
    color-mix(in srgb, var(--sol) 9%, var(--tarjeta)));
  border:1px solid color-mix(in srgb, var(--llave) 28%, var(--linea));
  border-radius:99px; box-shadow:var(--sombra-chica);
  color:var(--tinta-suave); font-size:.86rem; line-height:1.4; text-align:left;
  transition:var(--transicion-luz);
}
.mem-col .mem-semana-sol{width:21px; height:21px; flex:none}

/* ---- el badge de la promoción (4/8) -----------------------------------
   ⚠ EL ORO VA CLARO DE DÍA Y OSCURO DE NOCHE, y la letra usa la tinta de la
   casa, que se da vuelta con la luz: así el MISMO par de reglas da más de 5
   de contraste en las tres luces, sin una sola excepción por luz. Es la
   lección de la cinta dorada de aquí abajo — un oro macizo con letra blanca
   se lee en 2,6 y no alcanza ni de lejos para una letra chica.

   Y son SIEMPRE dos líneas: la promoción arriba y la aclaración debajo. En
   computadora y tableta cada una entra en un renglón; en el teléfono la
   primera se parte en dos, pero por el corte que elegimos nosotros (ver el
   comentario de premium.php), nunca a mitad de una idea. */
.mem-col .mem-promo{
  width:fit-content; max-width:min(100%, 680px); margin:26px auto 0;
  padding:13px 22px; border-radius:16px;
  text-align:center; color:var(--tinta);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--llave) 40%, var(--tarjeta)) 0%,
    color-mix(in srgb, var(--llave) 15%, var(--tarjeta)) 48%,
    color-mix(in srgb, var(--llave) 36%, var(--tarjeta)) 100%);
  border:1px solid color-mix(in srgb, var(--llave) 55%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--llave) 22%, transparent);
  transition:var(--transicion-luz);
}
.mem-col .mem-promo-1,
.mem-col .mem-promo-2{display:block; text-wrap:balance}
.mem-col .mem-promo-1{
  font-weight:700; font-size:clamp(.88rem, 3.5vw, 1.02rem); line-height:1.34;
  letter-spacing:-.005em;
}
.mem-col .mem-promo-2{
  margin-top:5px;
  font-weight:500; font-size:clamp(.76rem, 3vw, .87rem); line-height:1.4;
}
/* los dos pedazos de la primera línea no se parten por dentro */
.mem-col .mem-promo-nb{white-space:nowrap}

/* ---- las cuatro postales ---------------------------------------------
   ⚠ El hueco entre filas es GRANDE a propósito: la cinta de la destacada
   sale 13px por encima de su tarjeta, y en teléfono (una sola columna)
   con el hueco chico quedaba pegada a la tarjeta de arriba. */
.mem-col .mem-grilla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));
  gap:30px 16px; margin-top:34px; align-items:stretch;
}
.mem-col .mem-tarjeta{
  position:relative; display:flex; flex-direction:column;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); padding:0;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), transform .25s ease, box-shadow .25s ease;
}
/* en computadora la postal se levanta apenas al pasarle por encima; en
   teléfono no existe el «pasar por encima», así que ni se declara */
@media (hover:hover){
  .mem-col .mem-tarjeta:hover{transform:translateY(-3px); box-shadow:var(--sombra)}
}

/* la cabeza de la postal: nombre, precio y frase sobre un velo tibio */
.mem-col .mem-cabeza{
  padding:24px 20px 19px;
  border-bottom:1px solid var(--linea);
  border-radius:calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sol) 13%, var(--tarjeta)) 0%, var(--tarjeta) 100%);
  transition:var(--transicion-luz);
}
.mem-col .mem-detalle{
  display:flex; flex-direction:column; flex:1;
  padding:19px 20px 22px;
}

/* el nombre, en versalitas doradas: la misma voz que la cornisa del libro
   de La Habitación. Deja de competir con el precio y lo presenta.
   ⚠ El oro va OSCURECIDO con la tinta de la casa. Medido: el --llave puro
   sobre la cabeza de la tarjeta da 3,6 de mañana —flojo para un nombre que
   hay que leer, y acá lee gente mayor—; con un quinto de tinta pasa de 4,4
   en las tres luces y sigue siendo, a la vista, el mismo dorado. */
.mem-col .mem-nombre{
  font-family:var(--serif); font-weight:600; font-size:1.05rem;
  font-variant:small-caps; letter-spacing:.15em;
  margin:0; color:color-mix(in srgb, var(--llave) 80%, var(--tinta));
}
/* el precio con jerarquía: la moneda chica y arriba, la cifra grande, y el
   «por mes» en su renglón, en letra de la casa */
.mem-col .mem-precio{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 5px;
  font-family:var(--serif); font-weight:700; color:var(--tinta);
  margin:.5rem 0 0; line-height:1;
}
.mem-col .mem-moneda{
  font-size:.95rem; font-weight:600; color:var(--tinta-suave);
  align-self:flex-start; margin-top:.42em;
}
.mem-col .mem-cifra{font-size:2.4rem; letter-spacing:-.028em}
.mem-col .mem-cifra-palabra{font-size:2rem}     /* «Gratis» no es una cifra */
.mem-col .mem-precio small{
  flex:1 0 100%;
  font-family:var(--sans); font-size:.69rem; font-weight:700;
  color:var(--tinta-tenue); letter-spacing:.07em; text-transform:uppercase;
  margin-top:8px;
}
.mem-col .mem-frase{
  margin:.75rem 0 0; color:var(--tinta-suave); font-size:.9rem; line-height:1.45;
}

/* «Todo lo de Premium, y además»: rótulo con su hilo dorado debajo, a lo
   ancho de la tarjeta, en vez de un renglón suelto en mayúsculas.
   ⚠ El hilo va DEBAJO y no al costado: el rótulo entra en dos renglones en
   una tarjeta angosta, y al costado el hilo quedaba como una rayita suelta
   colgando de la segunda línea. */
.mem-col .mem-desde{
  display:block; margin:0; padding-bottom:11px;
  border-bottom:1px solid color-mix(in srgb, var(--llave) 26%, var(--linea));
  font-size:.66rem; font-weight:800; line-height:1.5;
  letter-spacing:.085em; text-transform:uppercase;
  /* mismo oro oscurecido que el nombre: a este tamaño el --llave puro daba
     3,9 de mañana, y es letra chica */
  color:color-mix(in srgb, var(--llave) 80%, var(--tinta));
}

/* la lista: cada cosa con su palomita fina en dorado, y aire en vez de
   renglones. Los ceros de arriba desarman lo que le llega de la lista del
   perfil (fondo, relleno y las rayitas entre ítems). */
.mem-col .mem-lista{
  list-style:none; padding:0; margin:1rem 0 1.4rem;
  background:none; border-radius:0; font-size:inherit; line-height:inherit;
}
.mem-col .mem-lista li{
  position:relative; padding:0 0 0 25px; margin:0; border-top:0;
  font-size:.87rem; line-height:1.46; color:var(--tinta);
}
.mem-col .mem-lista li + li{margin-top:12px; padding-top:0; border-top:0}
.mem-col .mem-lista li::before{
  content:""; position:absolute; left:1px; top:.2em;
  width:15px; height:15px; border-radius:0; opacity:1;
  background:var(--llave);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8 9.4 17.7 19.5 6.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8 9.4 17.7 19.5 6.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* el ítem destacadito de Free: los siete días con todo abierto */
.mem-col .mem-lista .es-siete{
  padding:11px 13px 11px 34px;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--sol) 26%, var(--tarjeta)),
    color-mix(in srgb, var(--sol) 10%, var(--tarjeta)));
  border:1px solid color-mix(in srgb, var(--llave) 20%, var(--linea));
  border-radius:14px; font-weight:700; transition:var(--transicion-luz);
}
.mem-col .mem-lista .es-siete::before{left:11px; top:calc(.2em + 11px)}

/* ⭐ §8/B2 (18/8) — LOS CAMINOS DEL HALL EN SOL Y SOL+: los primeros ítems,
   cada uno con su color, con la casilla dorada de la landing como molde del
   título. Solo se dibujan con `venta.planes_nuevos` (o la vista previa admin
   ?nueva=1): hoy la gente no los ve — regla madre de la obra de venta.
   Las gamas viven IGUAL en las tres luces (mismos valores que hall.css). */
.mem-col .mem-lista .mem-caminos-titulo{
  padding:10px 13px; border-radius:12px; font-weight:800; font-size:.85rem; line-height:1.35;
  background:linear-gradient(135deg, #F7E6BC, #E8C177);
  border:1px solid #E0B45F; color:#7A5A18;
}
.mem-col .mem-lista .mem-caminos-titulo::before{display:none}
.mem-col .mem-lista .mem-camino{
  padding:9px 12px 9px 31px; border-radius:12px; font-weight:700; font-size:.85rem; line-height:1.35;
  background:color-mix(in srgb, var(--cg) 16%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--cg) 38%, var(--linea));
  transition:var(--transicion-luz);
}
.mem-col .mem-lista .mem-camino::before{
  left:11px; top:calc(50% - 5px); width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cg) 45%, #fff), var(--cgh));
  -webkit-mask:none; mask:none;
}
.mem-col .mem-lista .mem-camino + .mem-camino,
.mem-col .mem-lista .mem-caminos-titulo + .mem-camino{margin-top:7px; padding-top:9px}
.mem-camino-animo{--cg:#E2A45C; --cgh:#B97E3E}
.mem-camino-calma{--cg:#7FA8A0; --cgh:#5B837C}
.mem-camino-horiz{--cg:#8E7A9B; --cgh:#6B5A78}
.mem-camino-vibra{--cg:#D2694D; --cgh:#A54A31}
.mem-camino-medida{--cg:#C99A57; --cgh:#8A6420}
/* ⭐ Corrección de Christian (18/8): con las tarjetas una al lado de la otra,
   el rótulo «Todo lo de…» reserva DOS renglones aunque use uno — así su hilo
   dorado y la casilla de los caminos arrancan ALINEADOS entre Sol y Sol+
   («Premium» hace envolver el rótulo de Sol y el de Sol+ quedaba más arriba).
   En el teléfono, apiladas, no se reserva nada. Sin :has(): .mem-desde solo
   existe en esas dos tarjetas. */
@media (min-width:601px){
  .mem-col .mem-desde{min-height:calc(1.98rem + 11px)}
}
/* el botón, cómodo al dedo (13px de alto de relleno = 46px de blanco para
   tocar, la medida que pide un teléfono) y con su foco visible al tabular */
.mem-col .mem-boton{
  margin-top:auto; display:block; width:100%; text-align:center;
  border-radius:99px; padding:13px 18px;
  font-family:var(--sans); font-weight:800; font-size:.92rem; line-height:1.2;
  border:1.5px solid var(--terracota); color:var(--terracota); background:transparent;
  cursor:pointer; text-decoration:none;
  transition:var(--transicion-luz), transform .18s ease,
             background .2s ease, color .2s ease, box-shadow .2s ease;
}
.mem-col .mem-boton-lleno{
  background:var(--terracota); color:#fff;
  box-shadow:0 3px 12px color-mix(in srgb, var(--terracota) 24%, transparent);
}
/* ⛔ quieto GANA sobre lleno y le apaga el fondo: los dos se combinan cuando
   la pasarela está apagada, y un fondo terracota con la letra tenue encima
   no se lee. (Va después de -lleno a propósito.) */
.mem-col .mem-boton-quieto{
  border-color:var(--linea); color:var(--tinta-tenue);
  background:transparent; box-shadow:none; cursor:default;
}
@media (hover:hover){
  .mem-col .mem-boton:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px color-mix(in srgb, var(--terracota) 26%, transparent);
  }
  .mem-col .mem-boton-lleno:hover{background:var(--terracota-fuerte); border-color:var(--terracota-fuerte)}
  .mem-col .mem-boton-quieto:hover{transform:none; box-shadow:none}
}
.mem-col .mem-boton:focus-visible{outline:2px solid var(--llave); outline-offset:3px}
/* el botón que cobra viaja dentro de un formulario (F6): el margen que lo
   empuja al pie de la tarjeta pasa al formulario, o las tarjetas se desparejan */
.mem-col .mem-form{margin-top:auto; display:block}
.mem-col .mem-form .mem-boton{margin-top:0}
/* los avisos de esta página (no se pudo abrir el pago, el cambio quedó
   hecho…). Cálidos, del color de la casa — jamás un cartel de error */
.mem-col .mem-aviso{
  max-width:660px; margin:20px auto 0; padding:14px 18px; border-radius:var(--radio-ch);
  background:color-mix(in srgb, var(--sol) 14%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--llave) 26%, var(--linea));
  color:var(--tinta-suave); box-shadow:var(--sombra-chica);
  font-size:.89rem; line-height:1.6; transition:var(--transicion-luz);
}
.mem-col .mem-aviso a{color:var(--terracota)}
.mem-col .mem-aviso strong{color:var(--tinta)}

/* la elegida: borde dorado, un halo finito alrededor y su cinta */
.mem-col .mem-elegida{
  border:1.5px solid color-mix(in srgb, var(--llave) 58%, var(--linea));
  box-shadow:var(--sombra), 0 0 0 4px color-mix(in srgb, var(--llave) 10%, transparent);
}
.mem-col .mem-elegida .mem-cabeza{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--llave) 15%, var(--tarjeta)) 0%, var(--tarjeta) 100%);
}
/* la cinta, con la llavecita de las membresías y su resplandor dorado.
   ⚠ EL FONDO SE QUEDA CLARO A PROPÓSITO: con la cinta dorada maciza y la
   letra en blanco, el contraste da 2,6 de mañana — muy por debajo de lo que
   necesita una letra chica en negrita. Así, con la letra en oro oscurecido
   con la tinta de la casa, da más de 5 en las tres luces. La presencia la
   ponen el resplandor, la llavecita y el borde, no un fondo que no se lee. */
.mem-col .mem-cinta{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; padding:5px 15px 5px 12px; border-radius:99px;
  background:var(--tarjeta);
  border:1.5px solid var(--llave);
  color:color-mix(in srgb, var(--llave) 72%, var(--tinta));
  font-size:.72rem; font-weight:800; letter-spacing:.045em;
  box-shadow:0 5px 15px color-mix(in srgb, var(--llave) 30%, transparent);
  transition:var(--transicion-luz);
}
.mem-col .mem-cinta svg{width:13px; height:13px; flex:none; color:var(--llave)}
/* la más alta (Sol+): un bañito dorado apenas perceptible */
.mem-col .mem-alta{
  background:linear-gradient(165deg, color-mix(in srgb, var(--llave) 7%, var(--tarjeta)) 0%, var(--tarjeta) 55%);
}
.mem-col .mem-alta .mem-cabeza{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--llave) 17%, var(--tarjeta)) 0%,
    color-mix(in srgb, var(--llave) 3%, var(--tarjeta)) 100%);
}

.mem-col .mem-promesa{
  display:flex; align-items:center; gap:16px;
  max-width:660px; margin:32px auto 0; padding:19px 24px;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--sol) 17%, var(--tarjeta)),
    color-mix(in srgb, var(--sol) 6%, var(--tarjeta)));
  border:1px solid color-mix(in srgb, var(--llave) 20%, var(--linea));
  border-radius:var(--radio-ch); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.mem-col .mem-promesa-sol{width:34px; height:34px; flex:none}
.mem-col .mem-promesa p{margin:0; font-size:.92rem; line-height:1.6; color:var(--tinta-suave)}
.mem-col .mem-promesa strong{color:var(--tinta)}

/* ---- EL REGALO: «llévale el Sol a su vida» (3/8) ----------------------
   Pedido de Christian. El bloque entero se lee como un paquete envuelto: el
   moñito a línea fina —el mismo trazo de los grabados de La Habitación— y
   los dos hilos de cinta que le salen a los costados, todo en el dorado de
   las membresías, así que vive la hora del día como el resto de la casa.
   ⛔ El botón de hoy abre el correo de la casa, porque comprar el regalo por
   la web todavía no existe. El día que exista se cambia UN SOLO elemento en
   premium.php (está marcado ahí); de estos estilos no se toca nada. */
.mem-col .mem-regalo{
  position:relative;
  max-width:660px; margin:32px auto 0; padding:26px 24px 28px; text-align:center;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--llave) 11%, var(--tarjeta)) 0%, var(--tarjeta) 62%);
  border:1px solid color-mix(in srgb, var(--llave) 34%, var(--linea));
  border-radius:var(--radio); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.mem-col .mem-monio{
  display:block; width:100%; max-width:228px; height:auto;
  margin:0 auto; color:var(--llave);
  filter:drop-shadow(0 3px 9px color-mix(in srgb, var(--llave) 24%, transparent));
}
.mem-col .mem-regalo h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.32rem, 5.4vw, 1.62rem); line-height:1.22;
  margin:8px 0 0; letter-spacing:-.012em;
}
.mem-col .mem-regalo-texto{
  margin:13px auto 0; max-width:46ch;
  color:var(--tinta-suave); font-size:.94rem; line-height:1.62;
}
.mem-col .mem-regalo .mem-boton{
  display:inline-block; width:auto; min-width:250px; max-width:100%;
  margin:22px auto 0;
}
/* ⚠ ESTA letra chica NO es un pie de página: es la que dice que el regalo
   todavía se prepara a mano. Una advertencia honesta tiene que LEERSE — con
   el gris tenue del resto de las notas daba 2,1 de contraste (casi un
   fantasma), así que va con la tinta suave de la casa. */
.mem-col .mem-regalo .mem-letra-chica{margin-top:15px; color:var(--tinta-suave)}

/* ---- el cambio de plan (F6-C, 2/8) ----------------------------------
   Subir es el gesto lleno de siempre; bajar es un gesto SUAVE: se puede,
   se ve, pero no compite con quedarse. Y el cambio en camino se anuncia
   con la calidez de la casa, nunca como una alarma. */
.mem-col .mem-boton-suave{
  border-color:var(--linea); color:var(--tinta-suave); font-weight:700;
  background:transparent; box-shadow:none;
}
.mem-col .mem-boton-suave:hover{
  border-color:var(--terracota); color:var(--terracota);
}
/* el aviso de «salió bien»: el verde de la casa (--salvia), que vive la hora.
   Antes pedía un --verde que no existe en ninguna luz y caía siempre en el
   mismo gris verdoso fijo, de noche incluido. */
.mem-col .mem-aviso-bien{
  background:color-mix(in srgb, var(--salvia) 13%, var(--tarjeta));
  border-color:color-mix(in srgb, var(--salvia) 32%, var(--linea));
}

/* ============================================================
   EL REGALO COMPRADO (F5, 3/8) — «Llévale el Sol a su vida»
   Las dos pantallas: los tres pasos en una sola página
   (/premium/regalo) y la tarjeta de después (…/gracias).

   ⛔ TODO SIGUE COLGANDO DE .mem-col por la colisión de nombres
   de arriba: estas pantallas usan la misma columna, el mismo
   moñito y los mismos botones que la página de precios.

   ⛔ NADA DE VENTANA APARTE (Christian, 3/8): lo que incluye
   cada membresía se ve DEBAJO de la elección y cambia al tocar
   otra. Por eso cada bloque nace con `hidden` puesto y cada uno
   lleva SU regla de `[hidden]` — sin ella, la capa apagada se
   queda encima y se come los toques.
   ============================================================ */

/* la columna es más angosta que la de las cuatro postales: acá se decide una
   cosa por vez, y un renglón que cruza toda la pantalla cansa de leer */
/* ⚠ AIRE ABAJO (Christian, 4/8: «el cuadro inferior queda cortado»). Son las
   dos pantallas más largas de la casa y terminan en un bloque grande; con los
   40 px de la columna común, el último renglón queda pegado al borde de la
   ventana y parece que falta algo. La misma medida generosa que Tu casa. */
.reg-col{max-width:760px; padding-bottom:110px}
.reg-col .mem-monio{max-width:206px}
.reg-col .mem-intro p{max-width:46ch}

.mem-col .reg-form{margin-top:24px}
.mem-col .reg-paso{margin-top:32px}

/* el número del paso, en su medallón dorado: se ve de un vistazo por dónde va */
.mem-col .reg-titulo{
  display:flex; align-items:center; gap:11px; margin:0;
  font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.3;
  color:var(--tinta);
}
.mem-col .reg-numero{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.83rem; font-weight:800;
  background:color-mix(in srgb, var(--llave) 16%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--llave) 45%, var(--linea));
  /* el mismo oro oscurecido con la tinta de la casa que usan el nombre y el
     rótulo de las postales: el --llave puro, a este tamaño, queda flojo */
  color:color-mix(in srgb, var(--llave) 78%, var(--tinta));
  transition:var(--transicion-luz);
}

/* ---- las opciones: tarjetitas que se tocan enteras ---------------------
   El circulito de marcar es dibujado (el del navegador no vive la hora del
   día y en cada teléfono se ve distinto), pero el control de verdad sigue
   siendo el radio: se tabula, se lee con lector de pantalla y se marca con
   la barra espaciadora. */
.mem-col .reg-opciones{display:grid; gap:13px; margin-top:22px}
.mem-col .reg-opcion{
  position:relative; display:flex; align-items:flex-start; gap:13px;
  padding:15px 17px; cursor:pointer;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), border-color .2s ease, box-shadow .2s ease;
}
/* la que lleva cinta necesita aire arriba: la cinta sale 13px por encima */
.mem-col .reg-opcion-cinta{margin-top:14px}
.mem-col .reg-opcion input{
  position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none;
}
.mem-col .reg-marca{
  flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--tarjeta);
  border:1.5px solid color-mix(in srgb, var(--llave) 42%, var(--linea));
  transition:var(--transicion-luz), background .2s ease, border-color .2s ease,
             box-shadow .2s ease;
}
/* el punto de adentro se dibuja con una sombra hacia dentro del color de la
   tarjeta: así el relleno dorado queda como un puntito y no como un disco */
.mem-col .reg-opcion input:checked ~ .reg-marca{
  background:var(--llave); border-color:var(--llave);
  box-shadow:inset 0 0 0 3.5px var(--tarjeta);
}
.mem-col .reg-opcion input:focus-visible ~ .reg-marca{
  outline:2px solid var(--llave); outline-offset:3px;
}
/* ⚠ LAS DOS REGLAS VAN SEPARADAS a propósito: si `:has()` se escribiera en la
   misma lista, un navegador que no lo entienda tiraría la regla ENTERA y la
   opción elegida se quedaría sin ningún realce. La clase la pone el
   JavaScript; el `:has()` es el cinturón por si el JavaScript no llegó. */
.mem-col .reg-opcion.es-elegida{
  border-color:color-mix(in srgb, var(--llave) 55%, var(--linea));
  box-shadow:var(--sombra), 0 0 0 3px color-mix(in srgb, var(--llave) 11%, transparent);
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--llave) 9%, var(--tarjeta)) 0%, var(--tarjeta) 62%);
}
.mem-col .reg-opcion:has(input:checked){
  border-color:color-mix(in srgb, var(--llave) 55%, var(--linea));
  box-shadow:var(--sombra), 0 0 0 3px color-mix(in srgb, var(--llave) 11%, transparent);
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--llave) 9%, var(--tarjeta)) 0%, var(--tarjeta) 62%);
}
@media (hover:hover){
  .mem-col .reg-opcion:hover{border-color:color-mix(in srgb, var(--llave) 40%, var(--linea))}
  /* ⚠ la elegida NO se apaga al pasarle por encima: sin esta línea, el hover
     —que pesa lo mismo— le pisaba el borde dorado y parecía que se desmarcaba */
  .mem-col .reg-opcion.es-elegida:hover{border-color:color-mix(in srgb, var(--llave) 55%, var(--linea))}
  .mem-col .reg-opcion:has(input:checked):hover{border-color:color-mix(in srgb, var(--llave) 55%, var(--linea))}
}

.mem-col .reg-cuerpo{flex:1 1 auto; min-width:0}
.mem-col .reg-linea{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:2px 12px;
}
/* el nombre de la membresía, en las versalitas doradas de las postales */
.mem-col .reg-linea .reg-nombre{
  font-family:var(--serif); font-weight:600; font-size:1.02rem;
  font-variant:small-caps; letter-spacing:.12em;
  color:color-mix(in srgb, var(--llave) 80%, var(--tinta));
}
/* el nombre del plazo: letra de la casa, sin versalitas (son palabras
   corrientes, no un nombre propio) */
.mem-col .reg-cuerpo > .reg-nombre{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:1.02rem; line-height:1.3; color:var(--tinta);
}
.mem-col .reg-precio{
  font-family:var(--serif); font-weight:700; font-size:1.06rem;
  color:var(--tinta); white-space:nowrap;
}
.mem-col .reg-precio small{
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-left:3px;
}
.mem-col .reg-resumen{
  display:block; margin-top:5px;
  font-size:.85rem; line-height:1.5; color:var(--tinta-suave);
}
/* ⛔ la frase del plazo es SIEMPRE mensual, jamás un total: las nueve las
   escribe el servidor y acá solo se muestra la que corresponde */
.mem-col .reg-frase{
  display:block; margin-top:5px;
  font-size:.85rem; line-height:1.5; color:var(--tinta-suave);
}
.mem-col .reg-frase[hidden]{display:none}

/* ---- lo que incluye, en vivo, debajo de la elección -------------------- */
.mem-col .reg-casa{margin-top:16px}
.mem-col .reg-casa-bloque{
  padding:20px 20px 18px;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--llave) 8%, var(--tarjeta)) 0%, var(--tarjeta) 58%);
  border:1px solid color-mix(in srgb, var(--llave) 28%, var(--linea));
  border-radius:var(--radio); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.mem-col .reg-casa-bloque[hidden]{display:none}
.mem-col .reg-casa-titulo{
  margin:0 0 15px; text-align:center;
  font-family:var(--sans); font-size:.72rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb, var(--llave) 80%, var(--tinta));
}
.mem-col .reg-casa-grilla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
  gap:16px 24px;
}
.mem-col .reg-grupo-titulo{
  display:flex; align-items:center; gap:7px; margin:0 0 7px;
  padding-bottom:7px;
  border-bottom:1px solid color-mix(in srgb, var(--llave) 24%, var(--linea));
  font-family:var(--sans); font-size:.73rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-suave);
}
.mem-col .reg-emoji{font-size:.95rem; line-height:1; flex:none}
.mem-col .reg-grupo-lista{list-style:none; margin:0; padding:0}
.mem-col .reg-grupo-lista li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:4px 0; margin:0; border:0;
  font-size:.83rem; line-height:1.45;
}
.mem-col .reg-que{min-width:0; color:var(--tinta-suave)}
.mem-col .reg-cuanto{
  flex:none; max-width:54%; text-align:right;
  font-weight:700; color:var(--tinta);
}
/* lo que esa membresía no trae: se dice, sin gritarlo */
.mem-col .reg-grupo-lista .reg-no .reg-que,
.mem-col .reg-grupo-lista .reg-no .reg-cuanto{color:var(--tinta-tenue); font-weight:400}

/* ---- los campos de «¿para quién es?» ---------------------------------- */
.mem-col .reg-campos{
  display:grid; gap:19px; margin-top:22px; padding:21px 20px;
  background:color-mix(in srgb, var(--sol) 7%, var(--tarjeta));
  border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.mem-col .reg-campo{display:flex; flex-direction:column; gap:6px; margin:0}
.mem-col .reg-etiqueta{
  font-family:var(--sans); font-size:.76rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-suave);
}
.mem-col .reg-opcional{
  font-weight:600; letter-spacing:0; text-transform:none; color:var(--tinta-tenue);
}
/* ⚠ 1rem clavado: por debajo de 16px el teléfono hace zoom solo al tocar el
   campo y la pantalla se descoloca */
.mem-col .reg-input{
  width:100%; font-family:var(--sans); font-size:1rem; line-height:1.5;
  padding:12px 14px; color:var(--tinta); background:var(--tarjeta);
  border:1px solid var(--linea); border-radius:var(--radio-ch);
  transition:var(--transicion-luz), border-color .2s ease, box-shadow .2s ease;
}
.mem-col .reg-input::placeholder{color:var(--tinta-tenue)}
.mem-col .reg-input:focus{
  outline:none; border-color:var(--llave);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--llave) 18%, transparent);
}
.mem-col .reg-area{resize:vertical; min-height:86px}
.mem-col .reg-ayuda{font-size:.8rem; line-height:1.5; color:var(--tinta-tenue)}

/* ---- el cierre: el resumen en una línea y el botón --------------------- */
.mem-col .reg-cierre{
  margin-top:32px; padding:24px 22px 22px; text-align:center;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--llave) 11%, var(--tarjeta)) 0%, var(--tarjeta) 62%);
  border:1px solid color-mix(in srgb, var(--llave) 34%, var(--linea));
  border-radius:var(--radio); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.mem-col .reg-resumen-linea{
  margin:0 0 18px;
  font-family:var(--serif); font-size:1.08rem; line-height:1.45;
  color:var(--tinta-suave);
}
.mem-col .reg-r-que{color:var(--tinta); font-weight:600}
.mem-col .reg-r-guion{color:var(--tinta-tenue); margin:0 3px}
.mem-col .reg-cierre .mem-boton{
  display:inline-block; width:auto; min-width:230px; max-width:100%; margin:0;
}
/* la pasarela todavía sin poner: el botón se ve, quieto, y debajo la casa
   explica con cariño qué hacer mientras tanto */
.mem-col .reg-quieto{
  max-width:46ch; margin:13px auto 0;
  font-size:.85rem; line-height:1.55; color:var(--tinta-suave);
}
.mem-col .reg-quieto a{color:var(--terracota)}
.mem-col .reg-nota{
  max-width:52ch; margin:15px auto 0;
  font-size:.84rem; line-height:1.58; color:var(--tinta-suave);
}
.mem-col .reg-nota a{color:var(--terracota)}

/* ---- la tarjeta de después: el regalo, en la mano --------------------- */
.mem-col .reg-tarjeta{
  position:relative;
  max-width:520px; margin:26px auto 0; padding:30px 26px 26px; text-align:center;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--llave) 10%, var(--tarjeta)) 0%, var(--tarjeta) 60%);
  border:1px solid color-mix(in srgb, var(--llave) 32%, var(--linea));
  border-radius:var(--radio); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.mem-col .reg-gracias-titulo{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.32rem, 5.6vw, 1.62rem); line-height:1.22;
  margin:8px 0 0; letter-spacing:-.012em;
}
.mem-col .reg-gracias-texto{
  margin:13px auto 0; max-width:42ch;
  font-size:.95rem; line-height:1.62; color:var(--tinta-suave);
}
.mem-col .reg-gracias-texto strong{color:var(--tinta)}
/* el pago que se está confirmando: sereno, del color de la casa — nunca una
   alarma. El enlace ya sirve, y eso es lo que necesita saber */
.mem-col .reg-serena{
  margin:17px auto 0; max-width:42ch; padding:12px 16px;
  background:color-mix(in srgb, var(--sol) 16%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--llave) 26%, var(--linea));
  border-radius:var(--radio-ch);
  font-size:.87rem; line-height:1.58; color:var(--tinta-suave);
  transition:var(--transicion-luz);
}
.mem-col .reg-copiar{
  margin-top:22px; padding:16px; text-align:left;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); transition:var(--transicion-luz);
}
.mem-col .reg-copiar-rotulo{
  margin:0 0 8px;
  font-family:var(--sans); font-size:.71rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue);
}
.mem-col .reg-copiar-texto{
  margin:0; font-size:.9rem; line-height:1.6;
  color:var(--tinta); overflow-wrap:anywhere;
}
.mem-col .reg-copiar-botones{display:flex; flex-wrap:wrap; gap:10px; margin-top:15px}
.mem-col .reg-copiar-botones .mem-boton{flex:1 1 165px; width:auto; margin:0}
.mem-col .reg-boton-copiar.es-copiado{border-color:var(--salvia); color:var(--salvia)}
/* el espejo del plan B para los navegadores viejos: fuera de la vista, pero
   NUNCA con display:none — así no se puede copiar de él */
.mem-col .reg-copiar-espejo{
  position:absolute; left:-9999px; top:0; width:1px; height:1px;
  opacity:0; border:0; padding:0;
}
.mem-col .reg-gracias-nota{
  margin:16px auto 0; max-width:46ch;
  font-size:.83rem; line-height:1.58; color:var(--tinta-suave);
}
.mem-col .reg-gracias-nota strong{color:var(--tinta)}
.mem-col .reg-gracias-nota a{color:var(--terracota)}
.mem-col .reg-volver{margin:20px 0 0; font-size:.85rem}
.mem-col .reg-volver a{color:var(--tinta-tenue)}

/* ---- la cara del teléfono ---------------------------------------------
   Mobile-first: la casa se vive en el teléfono. Las postales respiran un
   poco más apretadas por los costados, la cifra crece (hay ancho de sobra en
   una sola columna), el botón se hace más cómodo al dedo y la promesa se
   apila para no partir el renglón. */
@media (max-width:600px){
  .mem-col .mem-grilla{gap:30px; margin-top:30px}
  .mem-col .mem-cabeza{padding:22px 18px 17px}
  .mem-col .mem-detalle{padding:17px 18px 20px}
  .mem-col .mem-cifra{font-size:2.6rem}
  .mem-col .mem-cifra-palabra{font-size:2.15rem}
  .mem-col .mem-lista li{font-size:.9rem}
  .mem-col .mem-boton{padding:14px 18px; font-size:.95rem}
  .mem-col .mem-regalo{padding:24px 18px 26px}
  /* ⚠ el botón del regalo lleva la frase más larga de la página: a 375px de
     ancho —la medida del teléfono más común— con la letra de los demás se
     partía en dos renglones. Un punto más chica y con menos aire a los
     costados entra en uno solo. */
  .mem-col .mem-regalo .mem-boton{
    min-width:0; width:100%; font-size:.9rem; padding-left:14px; padding-right:14px;
  }
  .mem-col .mem-promesa{
    flex-direction:column; text-align:center; gap:12px; padding:20px 18px;
  }

  /* ---- el regalo comprado, en 375px de ancho ---------------------------
     Una sola columna en todo: las opciones se tocan enteras, la comparación
     baja en lista y el botón de regalar ocupa el ancho del pulgar. */
  .mem-col .reg-titulo{font-size:1.08rem}
  .mem-col .reg-opcion{padding:14px 15px; gap:11px}
  .mem-col .reg-linea{gap:1px 10px}
  .mem-col .reg-casa-bloque{padding:18px 15px 16px}
  .mem-col .reg-casa-grilla{grid-template-columns:1fr; gap:15px}
  /* con la pantalla angosta, «Personalizados (la cajita)» y su valor no
     entran uno al lado del otro: se apilan y el valor queda a la izquierda,
     debajo, en vez de partirse en dos renglones contra el borde */
  .mem-col .reg-grupo-lista li{
    flex-direction:column; align-items:flex-start; gap:1px; padding:5px 0;
  }
  .mem-col .reg-cuanto{max-width:100%; text-align:left}
  .mem-col .reg-campos{padding:18px 15px; gap:17px}
  .mem-col .reg-cierre{padding:22px 16px 20px}
  .mem-col .reg-cierre .mem-boton{min-width:0; width:100%}
  .mem-col .reg-resumen-linea{font-size:1.02rem}
  .mem-col .reg-tarjeta{padding:26px 17px 22px}
  .mem-col .reg-copiar-botones .mem-boton{flex:1 1 100%}
}

/* ============================================================
   LA FRANJA DE LA MEMBRESÍA (F4 dentro de F6, 2/8)
   «Suave en las palabras, notoria en la presencia» (Christian).
   Va pegada bajo la barra de arriba, ocupa el ancho entero y se
   ve de entrada — pero con los colores de la casa, nunca un
   cartel de alarma rojo. Dos tonos: «atender» (ámbar, hay algo
   que hacer o algo terminó) y «suave» (aviso amable).
   ============================================================ */
.franja-mem{
  /* ⛔ FIJA, justo debajo de la barra de arriba (que también es fija) y a lo
     ancho de la pantalla. El contenido baja solo: luz.js suma este alto a
     --alto-barra. Con `sticky` quedaba escondida detrás de la barra. */
  position:fixed; top:var(--alto-barra-sola, 47px); left:0; right:0; z-index:55;
  /* ⛔ NUNCA envuelve (Christian, 2/8): con wrap, a 760 px el botón bajaba a
     una segunda fila. La línea se encoge y, si hace falta, corta con puntos —
     el mensaje entero está a un toque, en la ventanita. */
  display:flex; align-items:center; flex-wrap:nowrap; gap:10px 16px;
  /* ⛔ LO MÁS BAJITA POSIBLE (Christian, 2/8): «no quiero una barra que sea
     más importante que la del sitio, sería absurdo». La barra de arriba mide
     46 px — la franja tiene que quedar por debajo de eso. Medido: con 12 px
     de aire daba 68, con 8 daba 56, con 5 da ~40. */
  padding:5px 16px; margin:0;
  border-bottom:1px solid var(--linea);
  font-family:var(--sans); font-size:.84rem; line-height:1.4;
  color:var(--tinta-suave);
  transition:var(--transicion-luz);
}
/* ⛔ UNA SOLA LÍNEA, también en computadora (Christian, 2/8): la franja no
   puede envolver nunca. Si el texto no entrara, se corta con puntos —el
   mensaje completo vive en la ventanita, que se abre tocando la línea. */
.franja-mem .franja-linea{
  flex:1 1 auto; min-width:0; margin:0; padding:0;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:.84rem; color:var(--tinta-suave);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.franja-atender .franja-linea{color:var(--tinta); font-weight:700}
.franja-mem .franja-linea:hover{text-decoration:underline}
.franja-mem strong{color:var(--tinta)}
.franja-boton{
  flex:none; padding:5px 14px; border-radius:99px;
  font-family:var(--sans); font-weight:800; font-size:.78rem;
  text-decoration:none; white-space:nowrap;
  background:var(--terracota); color:#fff; border:1.5px solid var(--terracota);
  transition:var(--transicion-luz), transform .15s ease, background .2s ease;
}
.franja-boton:hover{background:var(--terracota-fuerte); transform:translateY(-1px)}
.franja-cerrar{
  flex:none; background:transparent; border:0; cursor:pointer;
  color:var(--tinta-tenue); padding:4px; line-height:0; border-radius:50%;
}
.franja-cerrar svg{width:16px; height:16px; display:block}
.franja-cerrar:hover{color:var(--tinta-suave)}

/* «atender»: la que no se puede pasar por alto (cobro fallido, o la
   membresía que terminó). El ámbar de la casa, el mismo que usa el panel
   para decir «te espera algo» — se nota, y no asusta. */
/* ⚠ Medido el 2/8: con un 20% la franja daba 1,11 contra el fondo — por
   debajo de la vara de 1,15 que la casa usa para un bloque, o sea que NO se
   notaba. Christian la quiere notoria: se sube el tinte y se le pone una
   línea dorada arriba, que es lo que la separa de la barra y la hace leer
   como una franja de verdad. */
.franja-atender{
  background:color-mix(in srgb, var(--llave) 38%, var(--tarjeta));
  border-top:2px solid var(--llave);
  border-bottom-color:color-mix(in srgb, var(--llave) 60%, var(--linea));
  box-shadow:var(--sombra-chica);
}
/* sobre el ámbar fuerte, la tinta plena: acá se lee algo que importa
   (medido: con la tinta suave quedaba en 2,5) */
.franja-atender .franja-linea{color:var(--tinta)}
/* «suave»: se termina la bienvenida, el regalo, o el cambio que pidió */
.franja-suave{
  background:color-mix(in srgb, var(--sol) 30%, var(--tarjeta));
  border-bottom-color:color-mix(in srgb, var(--sol) 45%, var(--linea));
}

/* ---- la cara del teléfono: UNA sola línea, y la ventanita al tocarla ----
   Pedido de Christian (2/8): «nunca vi una barra de dos o tres líneas, me
   parece horrible». La línea NUNCA envuelve: si el texto no entra, se corta
   con puntos suspensivos y el mensaje completo vive en la ventanita. */
.franja-corta{display:none}

/* ⚠ El corte es 900 y no 700 (medido el 2/8): con la ventana en 762 px la
   línea larga se cortaba con puntos en 5 de las 7 franjas. Debajo de 900 se
   usa la versión compacta, que entra siempre entera. */
@media (max-width:900px){
  .franja-mem{padding:0; gap:0}
  .franja-mem .franja-linea,
  .franja-mem > .franja-boton{display:none}
  .franja-corta{
    display:flex; align-items:center; gap:10px;
    flex:1 1 auto; min-width:0;
    padding:8px 4px 8px 14px; background:transparent; border:0; cursor:pointer;
    font-family:var(--sans); font-size:.82rem; text-align:left;
    color:var(--tinta-suave);
  }
  .franja-atender .franja-corta{color:var(--tinta); font-weight:700}
  .franja-corta-texto{
    flex:1 1 auto; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .franja-corta-ver{
    flex:none; padding:4px 12px; border-radius:99px;
    background:var(--terracota); color:#fff;
    font-size:.74rem; font-weight:800;
  }
  /* la crucecita va DENTRO de la línea, al final — no flotando afuera */
  .franja-mem .franja-cerrar{flex:none; margin-right:10px}
}

/* la ventanita: el mensaje entero, el botón, y salir sin hacer nada */
.franja-velo{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:flex-end; justify-content:center;
  padding:14px; background:rgba(30, 24, 18, .38);
}
.franja-velo[hidden]{display:none}
.franja-hoja{
  width:100%; max-width:420px; padding:22px 20px 18px;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:18px; box-shadow:var(--sombra);
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.franja-hoja-texto{
  margin:0 0 16px; font-family:var(--sans); font-size:.92rem; line-height:1.55;
  color:var(--tinta-suave);
}
.franja-hoja-texto strong{color:var(--tinta)}
.franja-hoja .franja-boton{display:block; width:100%; text-align:center}
.franja-hoja-cerrar{
  display:block; width:100%; margin-top:10px; padding:9px;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.84rem; font-weight:700;
  color:var(--tinta-tenue);
}

/* el puente de F6-D: ya creó su lugar, le queda completar la membresía */
.mem-puente{
  max-width:420px; margin:26px auto 0; padding:22px; text-align:center;
  background:var(--tarjeta); border:1.5px solid color-mix(in srgb, var(--llave) 45%, var(--linea));
  border-radius:var(--radio-ch); box-shadow:var(--sombra);
  transition:var(--transicion-luz);
}
.mem-puente-plan{
  margin:0 0 16px; display:flex; flex-direction:column; gap:2px;
  font-family:var(--serif);
}
.mem-puente-plan strong{font-size:1.5rem; font-weight:600}
.mem-puente-plan span{font-family:var(--sans); font-size:.88rem; color:var(--tinta-suave)}
.mem-puente .mem-form{margin:0}
.mem-puente .mem-letra-chica{margin-top:12px}

/* «la que sigue» hacia arriba: un realce menor que el de la tarjeta propia —
   invita sin gritar. ⛔ Nunca se le pone a una tarjeta INFERIOR. */
.mem-sigue{border:1.5px solid color-mix(in srgb, var(--llave) 32%, var(--linea))}

.mem-programado{
  max-width:640px; margin:18px auto 0; padding:16px 20px; text-align:center;
  background:color-mix(in srgb, var(--llave) 10%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--llave) 45%, var(--linea));
  border-radius:var(--radio-ch); transition:var(--transicion-luz);
}
.mem-programado p{margin:0 0 12px; font-size:.9rem; line-height:1.6; color:var(--tinta-suave)}
.mem-programado strong{color:var(--tinta)}
.mem-programado .mem-boton{display:inline-block; width:auto; margin:0}

/* ⛔ A NADIE SE LO INCITA A BAJAR (regla de Christian, 3/8). A quien acaba de
   subir de membresía la puerta de vuelta se le deja abierta —nadie queda
   atrapado—, pero al PIE del bloque y en voz baja: la misma letra chica de las
   notas de esta página, nunca un botón que compita con lo que acaba de elegir.
   El gesto sigue siendo un envío de verdad (lleva su sello de sesión), solo que
   vestido de enlace. */
.mem-programado .mem-deshacer{margin:2px auto 0}
.mem-deshacer button{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-weight:400;
  font-size:inherit; line-height:inherit; color:inherit;
  text-decoration:underline; text-decoration-color:var(--tinta-tenue);
  text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.mem-deshacer button:hover{color:var(--tinta-suave); text-decoration-color:var(--tinta-suave)}

.mem-credito{
  max-width:640px; margin:14px auto 0; text-align:center;
  font-size:.88rem; color:var(--tinta-suave);
}
.mem-credito strong{color:var(--llave)}

/* la pantalla de confirmar una baja: quedarse va primero y se ve mejor */
.mem-quedarse{
  display:flex; align-items:center; gap:14px;
  max-width:640px; margin:22px auto 0; padding:16px 20px;
  background:color-mix(in srgb, var(--sol) 14%, var(--tarjeta));
  border:1px solid color-mix(in srgb, var(--llave) 40%, var(--linea));
  border-radius:var(--radio-ch); transition:var(--transicion-luz);
}
.mem-quedarse p{margin:0; font-size:.9rem; line-height:1.55; color:var(--tinta-suave)}
.mem-quedarse strong{color:var(--tinta)}

.mem-pierde{max-width:640px; margin:26px auto 0}
.mem-pierde h2{
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
  margin:0 0 .3rem; text-align:center;
}
.mem-pierde-nota{
  margin:0 0 14px; text-align:center; font-size:.85rem; color:var(--tinta-tenue);
}
.mem-tabla-cambio{
  width:100%; border-collapse:collapse; font-size:.86rem;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); overflow:hidden;
  transition:var(--transicion-luz);
}
.mem-tabla-cambio th{
  text-align:left; padding:10px 12px; font-family:var(--sans); font-weight:800;
  font-size:.75rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--tinta-tenue); border-bottom:1px solid var(--linea);
}
.mem-tabla-cambio td{padding:9px 12px; border-bottom:1px solid var(--linea); color:var(--tinta-suave)}
.mem-tabla-cambio tr:last-child td{border-bottom:0}
.mem-tabla-cambio .mem-zona td{
  font-family:var(--sans); font-weight:800; font-size:.75rem;
  letter-spacing:.03em; text-transform:uppercase; color:var(--llave);
  background:color-mix(in srgb, var(--llave) 7%, var(--tarjeta));
}
.mem-tabla-cambio .mem-hoy{color:var(--tinta); font-weight:700}
.mem-tabla-cambio .mem-despues{color:var(--tinta-tenue)}

.mem-decidir{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  align-items:stretch; margin:26px auto 0; max-width:640px;
}
.mem-decidir .mem-boton{width:auto; min-width:210px; margin:0}
.mem-decidir .mem-form{margin:0}
.mem-letra-chica{
  max-width:560px; margin:14px auto 0; text-align:center;
  font-size:.82rem; line-height:1.55; color:var(--tinta-tenue);
}
.mem-letra-chica strong{color:var(--tinta-suave)}


/* ============================================================
   LA HABITACIÓN SECRETA — el cuarto del abrigo (2026-08-01)
   La postal ancha, la escena del fuego, la hoja de libro antiguo
   y el estante «Sensaciones de hoy». Todo vive las tres luces.
   ============================================================ */

/* la postal ocupa la fila entera en cualquier ancho (pedido de Christian 1/8) */
.puerta.habitacion{grid-column:1 / -1}

/* la única postal animada de la grilla: la luz de la rendija tiembla como llama */
.vineta .hab-rendija{animation:hab-flicker 4.5s ease-in-out infinite}
.vineta .hab-luzpiso{animation:hab-flicker 4.5s ease-in-out infinite}
.vineta .hab-mota{animation:hab-mota 11s linear infinite}
@keyframes hab-flicker{
  0%,100%{opacity:.45}
  30%{opacity:.85}
  55%{opacity:.6}
  78%{opacity:.9}
}
@keyframes hab-mota{
  0%{opacity:0; transform:translateY(5px)}
  18%{opacity:.55}
  60%{opacity:.35}
  100%{opacity:0; transform:translateY(-22px)}
}

/* la escena de recepción: la llama respira, las chispas suben */
.hab-escena .e-llama{transform-origin:230px 258px; animation:hab-llama 4.4s ease-in-out infinite}
.hab-escena .e-llama2{transform-origin:230px 256px; animation:hab-llama 5.8s ease-in-out infinite reverse}
.hab-escena .e-llama3{transform-origin:230px 253px; animation:hab-llama 3.6s ease-in-out infinite}
.hab-escena .e-vela{transform-origin:151px 93px; animation:hab-llama 3.4s ease-in-out infinite}
.hab-escena .e-resplandor{animation:hab-flicker 6.5s ease-in-out infinite}
.hab-escena .e-resplandor2{animation:hab-flicker 9s ease-in-out infinite}
.hab-escena .e-chispa{opacity:0; animation:hab-chispa 6.5s linear infinite}
@keyframes hab-llama{
  0%,100%{transform:scale(1,1)}
  30%{transform:scale(.985,1.04) skewX(-.8deg)}
  60%{transform:scale(1.02,.97) skewX(.7deg)}
  82%{transform:scale(.99,1.02)}
}
@keyframes hab-chispa{
  0%{opacity:0; transform:translateY(10px)}
  16%{opacity:.75}
  60%{opacity:.35}
  100%{opacity:0; transform:translateY(-30px)}
}
/* la noche del cuarto, más honda: el velo aprieta y el fuego (e-lampara) manda */
html[data-luz="noche"] .hab-escena .e-velo-noche{opacity:.6}
@media (prefers-reduced-motion:reduce){
  .vineta .hab-rendija,.vineta .hab-luzpiso,.vineta .hab-mota,
  .hab-escena .e-llama,.hab-escena .e-llama2,.hab-escena .e-llama3,
  .hab-escena .e-resplandor,.hab-escena .e-resplandor2,.hab-escena .e-chispa{animation:none}
  .hab-escena .e-chispa,.vineta .hab-mota{opacity:.5}
}

/* el papel del libro antiguo, por luz (siempre legible «a la luz del fuego») */
html[data-luz="manana"]{--hab-papel1:#f8efdb; --hab-papel2:#eedcb8; --hab-borde:#c3ab7c; --hab-filete:#b09659; --hab-tinta:#3a3126; --hab-cornisa:#8d764a; --hab-capitular:#96702f}
html[data-luz="tarde"]{--hab-papel1:#f6e9cd; --hab-papel2:#e9d3a6; --hab-borde:#bda26d; --hab-filete:#a98f52; --hab-tinta:#392f1e; --hab-cornisa:#89693c; --hab-capitular:#8f6826}
html[data-luz="noche"]{--hab-papel1:#eadcb6; --hab-papel2:#d8c090; --hab-borde:#a68c58; --hab-filete:#957a3e; --hab-tinta:#33291a; --hab-cornisa:#7c6338; --hab-capitular:#7d5a20}

.hab-intro{margin:18px 2px 6px}
.hab-intro h1{margin:0 0 6px}
.hab-intro p{margin:0; color:var(--tinta-tenue); max-width:44em}

.hab-seccion{margin-top:26px}
.hab-rotulo{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 2px 12px}
.hab-rotulo h2{margin:0}
.hab-rotulo .sub{color:var(--tinta-tenue); font-size:.92rem}

/* la hoja de libro antiguo */
.hab-hoja{
  position:relative;
  background:radial-gradient(ellipse at center, var(--hab-papel1) 55%, var(--hab-papel2) 100%);
  border:1px solid var(--hab-borde);
  border-radius:6px;
  box-shadow:inset 0 0 70px rgba(122,92,42,.14), var(--sombra-chica);
  color:var(--hab-tinta);
  transition:var(--transicion-luz);
}
.hab-filete{border:3px double var(--hab-filete); border-radius:4px; margin:12px; padding:26px 24px 30px}
.hab-cornisa{text-align:center; font-variant:small-caps; letter-spacing:.28em; font-size:.88rem; color:var(--hab-cornisa)}
.hab-cornisa-raya{width:120px; height:1px; background:var(--hab-borde); margin:8px auto 22px}
/* la viñeta como grabado del libro: tinta sobre el papel, arriba del título */
.hab-lamina{max-width:330px; margin:0 auto 16px}
.hab-lamina svg{display:block; width:100%; height:auto; opacity:.92}
.hab-dedicatoria{text-align:center; font-style:italic; color:var(--hab-cornisa); margin-bottom:14px}
.hab-titulo{font-size:1.9rem; text-align:center; margin:0 0 4px; color:var(--hab-tinta)}
.hab-datos{text-align:center; font-size:.82rem; color:var(--hab-cornisa); margin-bottom:24px}
.hab-cuento p{font-size:1.06rem; line-height:1.75; margin:0 0 1.05em; text-align:justify}
.hab-cuento p:first-of-type::first-letter{font-size:3.1em; float:left; line-height:.85; padding:4px 8px 0 0; color:var(--hab-capitular)}
.hab-fin{text-align:center; color:var(--hab-capitular); font-size:1.3rem; margin:24px 0 0}
.hab-cierre{text-align:center; font-style:italic; font-size:1.05rem; color:var(--hab-cornisa); max-width:30em; margin:14px auto 0; line-height:1.55}
.hab-folio{text-align:center; font-size:.78rem; letter-spacing:.2em; color:var(--hab-capitular); margin-top:22px}

/* la estrellita de la hoja */
.hab-estrella{
  position:absolute; top:16px; right:16px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--hab-borde); background:var(--hab-papel1);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s ease;
}
.hab-estrella:active{transform:scale(.92)}
.hab-estrella svg{width:20px; height:20px; fill:none; stroke:var(--hab-cornisa); stroke-width:1.6; stroke-linejoin:round}
.hab-estrella.guardada svg{fill:var(--hab-capitular); stroke:var(--hab-capitular)}

/* al guardar, la estrella SALTA: la respuesta se tiene que ver (cura del 2/8) */
@keyframes hab-estrella-pop{
  0%{transform:scale(1)} 40%{transform:scale(1.3)} 70%{transform:scale(.92)} 100%{transform:scale(1)}
}
.hab-estrella.pop{animation:hab-estrella-pop .45s ease}

/* el avisito de la estrellita: confirmación o explicación, nunca silencio.
   Vive en el body (fuera del mundo de capas del cuarto), por eso lleva sus
   colores con red de respaldo por si las variables --hab-* no lo alcanzan */
.hab-avisito{
  position:fixed; left:50%; bottom:78px; transform:translate(-50%, 10px);
  max-width:min(86vw, 430px); padding:10px 18px; border-radius:22px;
  background:var(--hab-papel1, #f5efdf); color:var(--hab-tinta, #3b3427);
  border:1px solid var(--hab-borde, var(--linea, #cbbfa3));
  box-shadow:0 8px 26px rgba(30, 22, 8, .22);
  font-size:.92rem; line-height:1.45; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:130;
}
.hab-avisito.viva{opacity:1; transform:translate(-50%, 0)}

/* el estante «Sensaciones de hoy» */
.hab-chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 2px 14px}
.hab-chip{
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta);
  border-radius:20px; padding:6px 14px; font-size:.9rem; cursor:pointer;
  transition:var(--transicion-luz);
}
.hab-chip.activa{border-color:var(--miel); font-weight:700}
.hab-estante{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:640px){ .hab-estante{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .hab-estante{grid-template-columns:1fr 1fr 1fr} }
.hab-carta{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-chica); text-decoration:none; color:inherit;
  transition:var(--transicion-luz), transform .15s ease;
}
.hab-carta:hover{transform:translateY(-2px)}
.hab-carta-dibujo{display:block; background:var(--velo); padding:6px 0 0}
.hab-carta-dibujo svg{display:block; width:100%; height:auto; max-height:150px}
.hab-carta-texto{padding:12px 16px 16px; display:flex; flex-direction:column; gap:3px}
.hab-carta-texto b{font-size:1.06rem}
.hab-carta-sub{color:var(--tinta-tenue); font-size:.88rem}
.hab-marca{font-size:.78rem; color:var(--tinta-tenue); margin-top:4px}
.hab-marca.guardada::before{content:'★ '; color:var(--miel)}

/* ---- EL SELLO DE «ya la viviste» (9/8/2026, pedido de Christian) ----
   Antes esto era una frase («ya la leíste · releer es libre») y él la
   quería GRÁFICA: que se vea de un vistazo, sin leer. Es un sello de
   lacre con su tilde, como el de una carta ya abierta — el mismo en la
   carta del estante y en la funda del tocadiscos, porque leerla o
   escucharla es vivir LA MISMA historia. La palabra vive en el title,
   para quien pase el dedo o use lector de pantalla. */
.hab-sello{
  position:absolute; top:8px; right:8px; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--velo);
  box-shadow:0 1px 3px rgba(0,0,0,.10);
  transition:transform .18s ease, opacity .18s ease;
}
.hab-sello svg{width:100%; height:100%; overflow:visible}
/* DORADO, no verde (Christian, 9/8: «lo pusiste un color feo»): la miel es
   el dorado de la casa — el mismo de la estrellita de las guardadas. */
.hab-sello circle{
  fill:color-mix(in srgb, var(--miel) 16%, transparent);
  stroke:var(--miel); stroke-width:1.4; opacity:.9;
}
.hab-sello path{
  fill:none; stroke:var(--miel); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
/* EL SELLO VACÍO: se ve apenas y solo invita — al tocarlo, la marca a mano.
   En el tocadiscos el sello no se toca (ahí el toque es para que suene): esos
   van SIEMPRE con .es-puesto, que es el único estado que se dibuja. */
.hab-sello[role="button"]{cursor:pointer; pointer-events:auto}
.hab-sello:not(.es-puesto){opacity:.30}
.hab-sello:not(.es-puesto) path{opacity:0}
.hab-sello[role="button"]:hover{opacity:1; transform:scale(1.12)}
.hab-sello[role="button"]:focus-visible{outline:2px solid var(--miel); outline-offset:2px}
.hab-sello.esta-guardando{opacity:.55}
/* el que solo muestra (tocadiscos) no roba el toque de la funda */
.hab-sello:not([role="button"]){pointer-events:none}
/* la tarjeta vivida descansa un punto: sigue invitando, pero ya no grita */
.hab-carta.es-vivida .hab-carta-dibujo,
.hab-funda.es-vivida .hab-funda-tapa{opacity:.88}
.hab-carta{position:relative}
.hab-cupo{color:var(--tinta-tenue); font-size:.9rem; margin:12px 2px 0}

/* ============ HISTORIAS NARRADAS — el tocadiscos (2/8) ============
   Las mismas historias, contadas en voz alta. El tocadiscos dibujado
   al estilo del cuarto; las repisas de madera con las fundas (la
   viñeta de cada historia es la tapa del disco). Todo vive las horas
   con las variables --hab-* y se toca lindo en el teléfono. */
.hab-narradas .hab-toc-zona{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-chica); padding:18px 16px 20px;
}
/* la salita entera va A LÍNEA sobre el velo (corrección 2/8: los plenos de
   papel claro brillaban de noche y vibraban de día — el estilo es el de las
   viñetas: tinta y velo, tenue en las tres luces) */
.hab-tocadiscos{max-width:470px; margin:0 auto}
.hab-toc-svg{width:100%; height:auto; display:block}
.toc-piso{stroke:var(--tinta-tenue); stroke-width:1.3; opacity:.35; stroke-linecap:round}
.toc-caja{fill:var(--velo); stroke:var(--tinta-tenue); stroke-width:1.4}
.toc-tapa{fill:var(--tinta-tenue); opacity:.16}
.toc-disco{fill:var(--velo); stroke:var(--tinta); stroke-width:1.6}
.toc-surco{stroke:var(--tinta-tenue); stroke-width:.9; opacity:.6}
.toc-etiqueta{fill:var(--miel); opacity:.4}
.toc-eje{fill:var(--tinta)}
.toc-brazo-base{fill:none; stroke:var(--tinta); stroke-width:1.6}
.toc-brazo, .toc-aguja{stroke:var(--tinta); stroke-width:2; stroke-linecap:round; fill:none}
.toc-parlante{fill:var(--velo); stroke:var(--tinta-tenue); stroke-width:1.4}
.toc-tela{stroke:var(--tinta-tenue); stroke-width:1.2; opacity:.7}
.toc-mueble{fill:var(--velo); stroke:var(--tinta-tenue); stroke-width:1.4}
.toc-mueble-borde{fill:none; stroke:var(--tinta-tenue); stroke-width:1.2}
.toc-mueble-linea{stroke:var(--tinta-tenue); stroke-width:1.4; fill:none; stroke-linecap:round}
.toc-lamp-pantalla{fill:var(--velo); stroke:var(--tinta-tenue); stroke-width:1.4}
.toc-lamp-glow{fill:var(--miel); opacity:.14}
/* (el play grande sobre el tocadiscos se retiró el 2/8: manda el de la barra) */

/* al sonar: el disco gira y el brazo se posa — y al PAUSAR todo queda
   quieto (el giro vive en .girando, que pone y saca el JS) */
.toc-disco-g{transform-origin:202px 128px}
.toc-brazo-g{transform-origin:288px 108px; transition:transform .8s ease}
.girando .toc-disco-g{animation:toc-girar 3.6s linear infinite}
.girando .toc-brazo-g{transform:rotate(8deg)}
@keyframes toc-girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .girando .toc-disco-g{animation:none}
}

/* el reproductor: velo y tinta, delicado */
.hab-player{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:520px; margin:10px auto 4px; padding:8px 12px;
  background:var(--velo); border:1px solid var(--linea); border-radius:14px;
}
.hab-player[hidden]{display:none}
.hab-play{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linea);
  background:transparent; color:var(--tinta); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:border-color .2s ease;
}
.hab-play:hover{border-color:var(--miel)}
.hab-play svg{width:16px; height:16px}
.hab-play svg[hidden]{display:none}
.hab-player-titulo{
  font-weight:700; color:var(--tinta); font-size:.9rem;
  max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hab-player-tiempo{font-size:.82rem; color:var(--tinta-tenue); font-variant-numeric:tabular-nums}
/* las barras, finitas (2/8: estaban gruesas) */
.hab-player-barra{flex:1 1 120px; min-width:90px}
.hab-player-vol{flex:0 0 70px; width:70px}
.hab-player-barra, .hab-player-vol{
  -webkit-appearance:none; appearance:none; height:3px; border-radius:2px;
  background:var(--linea); outline:none; cursor:pointer; align-self:center;
}
.hab-player-barra::-webkit-slider-thumb, .hab-player-vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:11px; height:11px;
  border-radius:50%; background:var(--miel); border:none;
}
.hab-player-barra::-moz-range-thumb, .hab-player-vol::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--miel); border:none;
}
.hab-player-barra::-moz-range-track, .hab-player-vol::-moz-range-track{
  height:3px; border-radius:2px; background:var(--linea);
}

/* las repisas: las fundas sobre el velo, tenues */
.hab-repisas{
  list-style:none; margin:18px 0 0; padding:0 6px 8px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:22px 14px;
}
.hab-repisas li{display:flex}
.hab-funda{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--velo); border-radius:8px 8px 3px 3px;
  /* la lineita gris oscurita que enmarca (pedido 2/8: como la dorada del
     activo, pero discreta) — se nota en las tres luces sin gritar */
  border:1px solid color-mix(in srgb, var(--tinta) 26%, transparent);
  padding:10px 8px 8px; cursor:pointer; text-decoration:none; color:inherit;
  box-shadow:0 2px 0 0 rgba(30, 22, 8, .08), 0 6px 12px rgba(30, 22, 8, .1);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.hab-funda:hover{transform:translateY(-3px)}
.hab-funda.sonando{
  outline:2px solid var(--miel); outline-offset:1px;
  transform:translateY(-3px);
}
.hab-funda-tapa{
  width:78px; height:78px; border-radius:50%; overflow:hidden;
  background:transparent; border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
}
.hab-funda-tapa svg{width:86%; height:86%}
/* la tapa gira SOLO mientras suena (pausa = quieta, como el plato) */
.girando .hab-funda.sonando .hab-funda-tapa{animation:toc-girar 3.6s linear infinite}
@media (prefers-reduced-motion: reduce){ .girando .hab-funda.sonando .hab-funda-tapa{animation:none} }
.hab-funda-titulo{
  font-size:.82rem; font-weight:700; color:var(--tinta); text-align:center; line-height:1.25;
}
.hab-funda-min{font-size:.74rem; color:var(--tinta-tenue)}
.hab-llavecita{font-size:.72rem}

/* los apagaditos: se ven y tientan, no se tocan (la hilera siempre poblada);
   conservan su marquito para no fundirse con el fondo */
.hab-funda.apagada{opacity:.6; pointer-events:none; box-shadow:none; cursor:default}

/* la zona con llavecita (Free pasada su primera semana): se ve y tienta */
.hab-toc-zona.cerrada .hab-funda{cursor:pointer; opacity:.82}
.hab-invita{margin:10px 2px 0; font-size:.9rem; text-align:center}
.hab-invita a{color:var(--miel); font-weight:700; text-decoration:none}
.hab-invita a:hover{text-decoration:underline}

/* el puente desde la hoja: la misma historia, para escuchar */
.hab-narrada-puente{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  font-size:.86rem; font-weight:700; color:var(--hab-cornisa, var(--tinta-suave));
  text-decoration:none; border:1px solid var(--linea); border-radius:16px; padding:5px 12px;
}
.hab-narrada-puente svg{width:15px; height:15px}
.hab-narrada-puente:hover{border-color:var(--miel)}

/* tus guardadas — colapsable delicadito (pedido 2/8): cerrado no molesta;
   abierto, una debajo de la otra con su estrellita y sin subrayados.
   Va en el color cemento (el velo) y TENUE — nada de papel a puro contraste,
   ni de día ni de noche (corrección 2/8, segunda vuelta) */
.hab-guardadas-caja{
  background:var(--velo);
  border:1px solid color-mix(in srgb, var(--tinta) 26%, transparent);
  border-radius:14px; overflow:hidden;
}
.hab-guardadas-caja summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  padding:13px 16px; cursor:pointer; user-select:none;
}
.hab-guardadas-caja summary::-webkit-details-marker{display:none}
.hab-gc-estrella{width:17px; height:17px; fill:var(--miel); flex:0 0 auto; opacity:.9}
.hab-gc-titulo{
  font-family:var(--serif); font-weight:700; font-size:1.08rem; color:var(--tinta);
}
/* la insignia dorada, suavecita: dorado sobre dorado al velo, sin gritar */
.hab-gc-sub{
  background:color-mix(in srgb, var(--miel) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--miel) 45%, transparent);
  color:var(--miel); border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.03em; padding:2px 11px;
}
.hab-gc-flecha{
  width:18px; height:18px; margin-left:auto; color:var(--tinta-tenue);
  transition:transform .25s ease; flex:0 0 auto;
}
.hab-guardadas-caja[open] .hab-gc-flecha{transform:rotate(180deg)}
.hab-guardadas{list-style:none; margin:0; padding:2px 16px 10px}
.hab-guardadas li + li{border-top:1px solid color-mix(in srgb, var(--tinta) 14%, transparent)}
.hab-guardadas a{
  display:flex; align-items:center; gap:11px; padding:10px 2px;
  color:inherit; text-decoration:none;
}
.hab-guardadas a svg{width:14px; height:14px; fill:var(--miel); stroke:none; flex:0 0 auto; opacity:.85}
.hab-g-textos{display:flex; flex-direction:column; gap:1px; min-width:0}
.hab-g-titulo{font-family:var(--serif); font-weight:700; font-size:.98rem; color:var(--tinta)}
.hab-guardadas a:hover .hab-g-titulo{color:var(--miel)}
.hab-guardada-sub{color:var(--tinta-tenue); font-size:.83rem}

/* el descanso del estante (cupo del día) — aviso cálido, jamás un error */
.hab-descanso{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-chica); padding:28px 24px; margin-top:18px; text-align:center;
}
.hab-descanso svg{width:34px; height:34px; color:var(--miel); margin-bottom:8px}
.hab-descanso h2{margin:0 0 8px}
.hab-descanso p{color:var(--tinta-tenue); max-width:38em; margin:0 auto}
.hab-volver-fuego{
  display:inline-block; margin-top:16px; padding:10px 20px; border-radius:22px;
  background:var(--velo); border:1px solid var(--linea);
  color:inherit; text-decoration:none; font-weight:700;
}

/* ------------------------------------------------------------
   F5 · RESPIRAR CON EL FUEGO (2026-08-01)
   La llama es una puerta que se descubre: la etiqueta insinúa,
   el latido invita cada tanto, y al tocar el fuego la escena se
   concentra en la práctica. Sutileza y punto medio, siempre.
   ------------------------------------------------------------ */

/* la etiqueta chiquita bajo el hogar: se insinúa, no se grita.
   De noche va en tinta OSCURA: el piso ahí está alumbrado por el fuego, y la
   tinta clarita se perdía contra esa luz (corrección de Christian 1/8). */
.hab-escena .hab-etiqueta{
  font-family:var(--serif); font-size:11px; font-weight:600; letter-spacing:.14em;
  fill:#7c6338; opacity:.55;
}
html[data-luz="noche"] .hab-escena .hab-etiqueta{fill:#43301a; opacity:.8}

/* el latido ocasional: una respiración más honda cada ~26 s, lenta */
.hab-escena .e-latido{transform-origin:230px 258px; animation:hab-latido 26s ease-in-out infinite}
@keyframes hab-latido{
  0%,100%{transform:scale(1,1)}
  5%{transform:scale(1.03,1.12)}
  11%{transform:scale(1,1)}
}
@media (prefers-reduced-motion:reduce){
  .hab-escena .e-latido{animation:none}
}

/* el marco de la escena: posa el botón invisible del fuego y la ayudita */
.hab-escena-marco{position:relative}
.hab-fuego-boton{
  position:absolute; left:13%; top:12%; width:31%; height:82%;
  background:transparent; border:0; padding:0; margin:0; cursor:pointer;
  border-radius:12px;
}
.hab-fuego-boton:focus-visible{outline:2px solid var(--miel); outline-offset:-2px}

/* (la «ayuda de primera vez» del fuego se retiró entera el 2/8 — pedido de
   Christian: en el iPad reaparecía pisando la etiqueta y arruinaba la gráfica) */

/* el marcador al estante: que nadie crea que hay una sola historia (pedido 1/8) */
.hab-extras{margin-left:auto; align-self:center; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.hab-extras .hab-musica{margin-left:0}
.hab-mas{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta-suave);
  border-radius:17px; padding:8px 13px; font-size:.85rem; text-decoration:none;
  transition:var(--transicion-luz);
}
.hab-mas i{width:7px; height:7px; border-radius:50%; background:var(--miel); flex:none}

/* la música mientras se lee: el botoncito discreto y su dial finito */
.hab-musica{display:flex; align-items:center; gap:9px; margin-left:auto; align-self:center}
.hab-musica-boton{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta-suave);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:var(--transicion-luz);
}
.hab-musica-boton svg{width:17px; height:17px}
.hab-musica-boton.on{border-color:var(--miel); color:var(--miel)}
.hab-vmus{display:flex; align-items:center; gap:7px}
.hab-vmus[hidden]{display:none}
.hab-vmus .vol-musica{width:84px}
.hab-otro{
  border:0; background:none; color:var(--tinta-suave); cursor:pointer;
  width:26px; height:26px; padding:0; display:flex; align-items:center; justify-content:center;
}
.hab-otro svg{width:16px; height:16px}
.hab-arriba{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px}
.hab-arriba .volver{margin-top:0}

/* --- el estante de la semana (decisión 1/8): el día en cada carta --- */
.hab-carta-dia{
  font-size:.74rem; letter-spacing:.08em; font-variant:small-caps;
  color:var(--tinta-tenue);
}
.hab-carta-dia.hoy{color:var(--salvia); font-weight:700}
.hab-carta-dia.espera{color:var(--miel); font-weight:700}
/* la carta de un día que aún no llegó: tienta entera, apenas velada */
.hab-carta-cerrada .hab-carta-dibujo{opacity:.8}
/* el día que todavía no tiene historia asignada: la promesa, discreta */
.hab-carta-sin{border-style:dashed; box-shadow:none; justify-content:center}
.hab-carta-sin .hab-carta-texto{padding:22px 16px}
.hab-carta-sin b{color:var(--tinta-suave)}
/* la espera dulce de una historia futura: la viñeta a la vista */
.hab-espera-vineta{max-width:280px; margin:0 auto 6px}
.hab-espera-vineta svg{display:block; width:100%; height:auto; opacity:.9}

/* la carta siempre visible que invita a respirar (pedido 1/8): caja con un
   tinte cálido propio — se nota que es una práctica, no una historia */
.hab-carta-respirar{
  width:100%; text-align:left; cursor:pointer; font:inherit; padding:0;
  background-color:var(--tarjeta);
  background-image:linear-gradient(180deg, rgba(242,171,92,.13), rgba(242,171,92,.03));
  border-color:rgba(217,140,64,.5);
}
.hab-carta-respirar .hab-carta-dibujo{background:transparent; padding:8px 0 0}
.hab-carta-respirar .hab-carta-dibujo svg{max-height:96px}
/* la llamita pulsante: chiquita pide MÁS amplitud que la grande para notarse */
.hr-carta-llama{transform-origin:150px 85px; animation:hab-llamita 3.2s ease-in-out infinite}
.hr-carta-glow{animation:hab-flicker 4.5s ease-in-out infinite}
@keyframes hab-llamita{
  0%,100%{transform:scale(1,1)}
  45%{transform:scale(1.05,1.16)}
  72%{transform:scale(.99,1.02)}
}
@media (prefers-reduced-motion:reduce){
  .hr-carta-llama,.hr-carta-glow{animation:none}
}

/* --- la práctica: la escena concentrada (siempre íntima, en toda luz) --- */
.hab-respira{
  position:fixed; inset:0; z-index:120; display:none; flex-direction:column;
  background:radial-gradient(ellipse at 50% 76%, #43301f 0%, #2a1e15 52%, #19110c 100%);
  color:#f3e3c2;
}
.hab-respira.abierto{display:flex}
.hab-respira-cerrar{
  position:absolute; top:14px; left:14px; z-index:2;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(246,200,122,.3); background:rgba(246,200,122,.08); color:#f0d9a8;
  display:flex; align-items:center; justify-content:center;
}
.hab-respira-cerrar svg{width:17px; height:17px}
.hab-respira-lienzo{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; max-width:540px; margin:0 auto; padding:54px 20px 8px; min-height:0;
  overflow-y:auto;
}
.hab-respira-fuego{width:min(46vw, 210px); flex:none}
.hab-respira .hr-glow{transition-property:opacity; transition-timing-function:cubic-bezier(.45,.05,.55,.95)}
.hab-respira .hr-llama{transform-origin:120px 186px; will-change:transform; transition-property:transform,opacity; transition-timing-function:cubic-bezier(.45,.05,.55,.95)}
.hab-respira.quieta .hr-llama{transition:none; animation:hab-llama 4.4s ease-in-out infinite}
.hab-respira-guia{
  min-height:1.7em; margin-top:10px; text-align:center;
  font-family:var(--serif); font-size:1.28rem; letter-spacing:.02em; color:#f8e8c8;
}
.hab-respira-panel{margin-top:14px; text-align:center}
.hab-respira-panel h2{margin:0 0 4px; font-family:var(--serif); font-weight:600; color:#f8ecd2}
.hab-respira-como{margin:0 0 16px; color:#d9c39a; font-size:.94rem}
.hr-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:10px}
.hr-chip{
  border:1px solid rgba(246,200,122,.32); background:rgba(246,200,122,.06); color:#f3e3c2;
  border-radius:18px; padding:8px 15px; font-size:.92rem; cursor:pointer; line-height:1.25;
}
.hr-chip small{display:block; font-size:.72rem; color:#cdb488; font-weight:400}
.hr-chip.activa{background:rgba(246,200,122,.17); border-color:#f6c87a; font-weight:700}
.hr-chip.activa small{color:#e2cb9c}
.hab-respira-comenzar{
  margin-top:12px; padding:12px 34px; border-radius:24px; cursor:pointer;
  border:1px solid #f6c87a; background:linear-gradient(180deg, #f2ab5c, #d98c40);
  color:#2a1c10; font-weight:700; font-size:1rem;
}
.hab-respira-linea{margin:14px auto 0; max-width:34em; font-size:.85rem; color:#c8b28a}
.hab-respira-fin{margin-top:16px; text-align:center}
.hab-respira-fin[hidden]{display:none}
.hab-respira-fin p{margin:0 0 14px; font-family:var(--serif); font-size:1.15rem; color:#f0dcb4}
.hab-respira-volver{
  padding:10px 24px; border-radius:22px; cursor:pointer;
  border:1px solid rgba(246,200,122,.4); background:rgba(246,200,122,.1); color:#f3e3c2; font-weight:700;
}
.hab-respira.practicando .hab-respira-panel{display:none}
.hab-respira-pie{
  flex:none; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  color:#cdb488;
}
.hab-respira-pie .vol-musica{width:110px}
.hab-respira-pie .hab-otro{color:#cdb488}
.hab-vmus-rotulo{font-size:.78rem; letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){
  .hab-respira.quieta .hr-llama{animation:none}
}

/* ============================================================
   PREGUNTAS FRECUENTES (/preguntas, 5/8)
   La estética es la de /premium (mem-col), que es la que pidió
   Christian: título en serif con su filete dorado y tarjetas
   cálidas. Arriba, el remate dorado: el badge en degradé suave
   con la frase de gancho y la puerta del registro ahí mismo.
   Los pliegues son <details> nativos — nada de :has(), nada
   apoyado abajo (leyes del iPad).
   ============================================================ */
.faq-col{max-width:760px}

/* ---- el remate dorado -------------------------------------------------
   Un degradé suavecito del dorado de la casa (--llave) sobre la tarjeta:
   tibio y luminoso, nunca chillón. Todo centrado, como una bienvenida. */
.faq-badge{
  margin-top:18px; padding:34px 24px 30px; text-align:center;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--llave) 17%, var(--tarjeta)) 0%,
    color-mix(in srgb, var(--sol) 10%, var(--tarjeta)) 55%,
    var(--tarjeta) 100%);
  border:1px solid color-mix(in srgb, var(--llave) 32%, var(--linea));
  border-radius:var(--radio);
  box-shadow:0 10px 30px color-mix(in srgb, var(--llave) 14%, transparent);
  transition:var(--transicion-luz);
}
/* la cintita de arriba: el mismo lenguaje que las cintas de /premium */
.faq-badge-cinta{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 16px 6px 13px; border-radius:99px;
  background:var(--tarjeta); border:1.5px solid var(--llave);
  color:color-mix(in srgb, var(--llave) 72%, var(--tinta));
  font-size:.74rem; font-weight:800; letter-spacing:.05em;
  box-shadow:0 5px 15px color-mix(in srgb, var(--llave) 26%, transparent);
  transition:var(--transicion-luz);
}
.faq-badge-cinta svg{width:14px; height:14px; flex:none; color:var(--llave)}
.faq-badge-frase{
  margin:18px auto 0; max-width:21em;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.42rem, 5.6vw, 1.85rem); line-height:1.28;
  letter-spacing:-.01em; color:var(--tinta);
}
.faq-badge-invita{margin:12px auto 0; color:var(--tinta-suave); font-size:.98rem}
/* el botón de la portada, pero angosto y centrado: acá es un remate, no un héroe */
.faq-col .cta-principal.faq-cta{
  display:inline-block; width:auto; max-width:none;
  margin-top:16px; padding:14px 42px;
}

.faq-titulo{margin-top:40px}

/* ---- las tarjetas de las preguntas ------------------------------------ */
.faq-lista{margin-top:22px; display:grid; gap:12px}
.faq-item{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.faq-item[open]{border-color:color-mix(in srgb, var(--llave) 38%, var(--linea))}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px;
  font-family:var(--serif); font-weight:600; font-size:1.04rem; line-height:1.35;
  color:var(--tinta);
}
.faq-item summary::-webkit-details-marker{display:none}
/* el redondelito del + : dos barritas; abierto, la de parada se acuesta y
   queda un −. Solo transform, que no cuesta nada. */
.faq-mas{
  flex:none; position:relative; width:24px; height:24px; border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--llave) 55%, var(--linea));
}
.faq-mas::before, .faq-mas::after{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:1.5px; background:var(--llave);
  transform:translate(-50%, -50%);
  transition:transform .25s ease;
}
.faq-mas::after{transform:translate(-50%, -50%) rotate(90deg)}
.faq-item[open] .faq-mas::after{transform:translate(-50%, -50%) rotate(0deg)}
.faq-cuerpo{padding:0 18px 17px; color:var(--tinta-suave); font-size:.95rem; line-height:1.68}
.faq-cuerpo p{margin:0}
.faq-cuerpo p + p{margin-top:10px}

/* ---- el cierre: la puerta también al pie ------------------------------ */
.faq-cierre{margin:36px 0 10px; text-align:center}
.faq-cierre p{
  margin:0 0 2px; font-family:var(--serif); font-size:1.08rem; color:var(--tinta-suave);
}

/* ============================================================
   CONTACTO (/contacto, 5/8)
   Sigue la estética de /preguntas y /premium (mem-col). Nada
   apoyado abajo, nada que dependa de :has() — leyes del iPad.
   ============================================================ */
.cto-form{margin-top:26px; display:grid; gap:18px}
.cto-fila{display:grid; gap:7px}
.cto-fila label{
  font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--tinta);
}
.cto-fila input, .cto-fila select, .cto-fila textarea{
  width:100%; padding:12px 14px;
  font-family:var(--sans); font-size:1rem; color:var(--tinta);
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch);
  transition:var(--transicion-luz), border-color .2s ease, box-shadow .2s ease;
}
.cto-fila textarea{resize:vertical; min-height:150px; line-height:1.6}
.cto-fila input:focus, .cto-fila select:focus, .cto-fila textarea:focus{
  outline:none; border-color:var(--llave);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--llave) 20%, transparent);
}
/* el campo que quedó mal: se señala con calidez, nunca en rojo de alarma */
.cto-fila .cto-mal{border-color:color-mix(in srgb, var(--terracota) 65%, var(--linea))}

/* ⛔ EL CAMPO TRAMPA. Fuera de la pantalla, no escondido con `display:none`:
   algunos programas que mandan basura saltean lo que está apagado del todo,
   pero llenan lo que existe aunque no se vea. Nadie con teclado ni con lector
   de pantalla llega hasta él (tabindex=-1 + aria-hidden en la vista). */
.cto-trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.cto-nota{margin:2px 0 0; font-size:.84rem; color:var(--tinta-tenue); line-height:1.5}
.cto-nota a{color:var(--terracota)}

/* la buena noticia, cuando el mensaje ya salió */
.cto-listo{
  margin-top:26px; padding:30px 24px; text-align:center;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--sol) 20%, var(--tarjeta)) 0%,
    var(--tarjeta) 100%);
  border:1px solid color-mix(in srgb, var(--llave) 30%, var(--linea));
  border-radius:var(--radio);
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz);
}
.cto-listo-sol{width:34px; height:34px; color:var(--llave); display:block; margin:0 auto 12px}
.cto-listo p{margin:0 auto; max-width:44ch; color:var(--tinta-suave); line-height:1.65}
.cto-listo .faq-cta{margin-top:20px}

/* el ojo para la errata del dominio, y el correo a la vista al final (5/8) */
/* ⛔ el [hidden] explícito: sin esto, una regla de más arriba puede ganarle al
   atributo y el aviso queda a la vista aunque no haya nada que sugerir */
.cto-ojo[hidden]{display:none}
.cto-ojo{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:2px 0 0; font-size:.86rem; color:var(--tinta-suave);
}
.cto-ojo button{
  padding:5px 13px; border-radius:99px; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:.78rem;
  border:1.5px solid var(--terracota); background:transparent; color:var(--terracota);
}
.cto-adonde{margin:14px auto 0; font-size:1.02rem; color:var(--tinta)}
.cto-adonde b{overflow-wrap:anywhere}
.cto-adonde-nota{margin:6px auto 0; max-width:40ch; font-size:.85rem; color:var(--tinta-tenue); line-height:1.55}

/* ============================================================
   RINCÓN DE CAFÉ Y PODCAST — la sala (concepto §3 y §3.1, 10/8)
   Los episodios son objetos sobre la mesita: la pizarrita anuncia
   el de hoy en tiza, la taza es el play, los posavasos son las
   últimas dos semanas. Todo vive las tres luces de la casa.
   ⛔ Nada de :has() en lo visible (regla del iPad).
   ============================================================ */

/* la gama propia del Rincón, en las tres luces (patrón hab-papel) */
.pantalla-rincon, .pieza.rincon{
  --rc-pared1:#F7F3EA; --rc-pared2:#EFE7D6; --rc-piso:#E5D5BC; --rc-zocalo:#D6C4A6;
  --rc-metal:#7E756A; --rc-metal-osc:#5C544B; --rc-pantalla:#F8F4E9;
  --rc-madera:#C89A6B; --rc-madera-osc:#A97F52;
  --rc-tazon:#F3EFE6; --rc-cafe:#7A4E2D; --rc-sello:#6E4F35;
  --rc-cielo:#7E8890;   /* afuera NIEVA: cielo gris de tormenta, no celeste */
  /* los almohadones: colores con cuerpo, que se vean también de día */
  --rc-alm1:#D8916B; --rc-alm2:#93A88B; --rc-alm3:#8FAEC2; --rc-alm4:#E0B183;
  --rc-hondo:#3B3128;
}
html[data-luz="tarde"] .pantalla-rincon, html[data-luz="tarde"] .pieza.rincon{
  --rc-pared1:#FAEEDA; --rc-pared2:#F3E2C5; --rc-piso:#E8D2AC; --rc-zocalo:#D9BE94;
  --rc-metal:#82756A; --rc-metal-osc:#5F5348; --rc-pantalla:#FAF3E2;
  --rc-madera:#CC9A60; --rc-madera-osc:#AD7F49;
  --rc-tazon:#F7EFDD; --rc-cafe:#7A4A26; --rc-sello:#6E4A2C;
  --rc-cielo:#837A7C;
  --rc-alm1:#DB8F60; --rc-alm2:#93A47E; --rc-alm3:#92A8B4; --rc-alm4:#E2AE74;
  --rc-hondo:#3E2E22;
}
html[data-luz="noche"] .pantalla-rincon, html[data-luz="noche"] .pieza.rincon{
  --rc-pared1:#332C26; --rc-pared2:#2B2520; --rc-piso:#241F1B; --rc-zocalo:#453B30;
  /* la pantalla NO se apaga de noche (la enciende el haz), pero va en un
     crema bien hundido: encendida quemaba contra la sala dormida (10/8
     noche, con segunda bajada a pedido de Christian) */
  --rc-metal:#57504A; --rc-metal-osc:#403A34; --rc-pantalla:#C5BA9D;
  --rc-madera:#7A644C; --rc-madera-osc:#5D4B39;
  --rc-tazon:#E6DAC4; --rc-cafe:#8A5C38; --rc-sello:#D9C9AE;
  --rc-cielo:#333A44;
  /* de noche apenas más claros que la sala, para que el bulto se lea */
  --rc-alm1:#A06F50; --rc-alm2:#7B9471; --rc-alm3:#7290A6; --rc-alm4:#AD8960;
  --rc-hondo:#161311;
}

/* ---------- la sala ---------- */
.rc-sala{
  position:relative; margin-top:14px; overflow:hidden;
  border-radius:var(--radio); border:1px solid var(--linea);
  box-shadow:var(--sombra);
  background:linear-gradient(180deg, var(--rc-pared1), var(--rc-pared2));
  transition:var(--transicion-luz), background .8s ease;
}
/* el piso, con su zócalo */
.rc-sala::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:23%;
  background:var(--rc-piso); border-top:1px solid var(--rc-zocalo);
  transition:background-color .8s ease, border-color .8s ease;
}
.rc-foquitos{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}

/* la ventanita con nieve (arriba a la derecha) y el estante (a la izquierda) */
.rc-ventanita{position:absolute; top:16px; right:16px; width:clamp(92px, 24%, 148px); z-index:2; pointer-events:none}
.rc-ventanita svg, .rc-estante svg{display:block; width:100%; height:auto}
.rc-estante{position:absolute; top:24px; left:16px; width:clamp(96px, 25%, 186px); z-index:2; pointer-events:none; opacity:.9}
/* afuera nieva: sin sol ni estrellas (se mezclaban con los copos, 10/8);
   la luna asoma tenue solo de noche, detrás de la nevada */
.rc-ventanita .e-luna{opacity:0; transition:opacity 1s ease}
html[data-luz="noche"] .rc-ventanita .e-luna{opacity:1}
.rc-copo{animation:rc-nevar var(--rc-dura, 8s) linear var(--rc-espera, 0s) infinite}
@keyframes rc-nevar{
  0%{transform:translate(0, -6px); opacity:0}
  10%{opacity:.95}
  55%{transform:translate(5px, 58px)}
  90%{opacity:.8}
  100%{transform:translate(-2px, 118px); opacity:0}
}

.rc-adentro{position:relative; z-index:3; padding:clamp(130px, 30%, 190px) 16px 20px}
.rc-fila{display:flex; align-items:flex-end; justify-content:center; gap:14px; flex-wrap:wrap}
.rc-pronto{margin-bottom:14px}

/* la proyección: la pantalla de estudio y su proyector retro; el lienzo de
   la diapositiva y del polvo del haz cubre el componente ENTERO */
.rc-proyeccion{position:relative; flex:0 1 300px; min-width:230px; max-width:350px}
.rc-proyeccion svg{display:block; width:100%; height:auto}
.rc-proy-lienzo{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
/* el haz se nota más cuando la sala oscurece */
.rc-haz{opacity:.12; transition:opacity .8s ease}
html[data-luz="tarde"] .rc-haz{opacity:.18}
html[data-luz="noche"] .rc-haz{opacity:.3}
/* los rollitos giran despacio, y el piloto respira */
.rc-rollo{transform-box:fill-box; transform-origin:50% 50%}
.rc-rollo1{animation:rc-girar 16s linear infinite}
.rc-rollo2{animation:rc-girar 11s linear infinite}
@keyframes rc-girar{to{transform:rotate(360deg)}}
.rc-piloto{animation:rc-late 2.6s ease-in-out infinite}
@keyframes rc-late{0%, 100%{opacity:.45} 50%{opacity:1}}

/* la mesita con el café humeante: la taza ES el play */
.rc-mesita{position:relative; flex:0 1 320px; min-width:236px; max-width:340px}
.rc-mesita svg{display:block; width:100%; height:auto}
.rc-taza{
  position:absolute; left:38%; top:24%; width:28%; height:38%;
  background:transparent; border:none; cursor:pointer; padding:0;
  border-radius:22px;
}
.rc-taza:focus-visible{outline:2px solid var(--miel); outline-offset:4px}
/* el posavaso que se asoma bajo el platito cuando algo suena */
.rc-bajotaza{opacity:0; transition:opacity .45s ease}
.rc-sala.con-posavaso .rc-bajotaza{opacity:1}
/* el vapor: sube tranquilo… y baila despacito mientras suena */
.rc-vapor{transform-box:fill-box; transform-origin:50% 100%; animation:rc-vapor-sube 7.5s ease-in-out infinite}
.rc-v2{animation-duration:8.6s; animation-delay:.8s}
.rc-v3{animation-duration:6.8s; animation-delay:1.6s}
@keyframes rc-vapor-sube{
  0%, 100%{transform:translateY(1.5px) scaleY(.96) rotate(0deg); opacity:.32}
  50%{transform:translateY(-2.5px) scaleY(1.05) rotate(2deg); opacity:.65}
}
.rc-sala.sonando .rc-vapor{animation-name:rc-vapor-baila; animation-duration:3.4s}
.rc-sala.sonando .rc-v2{animation-duration:4.1s}
.rc-sala.sonando .rc-v3{animation-duration:2.9s}
@keyframes rc-vapor-baila{
  0%, 100%{transform:translateY(0) rotate(-4deg) scaleY(1); opacity:.55}
  30%{transform:translateY(-3px) rotate(4deg) scaleY(1.08); opacity:.8}
  65%{transform:translateY(-1.5px) rotate(-3deg) scaleY(1.03); opacity:.7}
}

/* ---------- los posavasos ---------- */
.rc-pila{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 6px; margin:18px auto 2px; max-width:560px}
.rc-posavaso{
  position:relative; width:92px; height:92px; border-radius:50%;
  /* caja explícita: el posavaso también puede ser un span (las muestras de
     obra), y a un elemento en línea el ancho se le ignora en silencio */
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:var(--velo); color:inherit; padding:10px; margin-left:-10px;
  border:1.5px solid color-mix(in srgb, var(--tinta) 26%, transparent);
  box-shadow:0 2px 0 rgba(30, 22, 8, .08), 0 5px 10px rgba(30, 22, 8, .10);
  cursor:pointer; transform:rotate(var(--rc-giro, 0deg));
  transition:transform .18s ease, box-shadow .18s ease, background-color .8s ease;
}
.rc-posavaso:first-child{margin-left:0}
.rc-posavaso::before{
  content:''; position:absolute; inset:5px; border-radius:50%; pointer-events:none;
  border:1px dashed color-mix(in srgb, var(--tinta) 30%, transparent);
}
.rc-posavaso:hover{transform:rotate(var(--rc-giro, 0deg)) translateY(-3px)}
.rc-posavaso.sonando{outline:2px solid var(--miel); outline-offset:2px; transform:rotate(0deg) translateY(-3px)}
.rc-pv-titulo{
  display:block; overflow:hidden; overflow-wrap:anywhere;
  font-family:var(--serif); font-weight:700; font-size:.6rem; line-height:1.25;
  letter-spacing:.03em; text-transform:uppercase; text-align:center;
  color:var(--rc-sello); transition:color .8s ease;
}
/* ⛔ el sello JAMÁS se corta con puntos suspensivos (10/8): rincon.js le
   achica la letra hasta que el título entra entero en el posavaso */
/* el aro de café: el estado contado sin textos ni insignias (§3.1) */
.rc-pv-aro{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s ease; pointer-events:none}
.rc-posavaso.oido .rc-pv-aro{opacity:.5}
/* el viaje de la pila a abajo de la taza */
.rc-viajando{
  position:fixed; z-index:60; margin:0; pointer-events:none;
  transition:transform .48s cubic-bezier(.4, .7, .3, 1), opacity .48s ease;
}

/* ---------- la estrellita de guardar (10/8) ----------
   El posavaso va envuelto para que la estrellita se le pose en la esquina
   sin girar con él. El solapado de la pila pasa al envoltorio. */
.rc-pv-envuelto{position:relative; display:inline-block}
.rc-pila .rc-pv-envuelto{margin-left:-10px}
.rc-pila .rc-pv-envuelto:first-child{margin-left:0}
.rc-pila .rc-pv-envuelto .rc-posavaso{margin-left:0}
.rc-pv-estrella{
  position:absolute; top:-4px; right:-2px; z-index:2;
  width:26px; height:26px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--tarjeta); border:1px solid var(--linea);
  color:var(--tinta-tenue); cursor:pointer; text-decoration:none;
  box-shadow:var(--sombra-chica);
  transition:var(--transicion-luz), transform .15s ease;
}
.rc-pv-estrella svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.rc-pv-estrella:hover{transform:scale(1.1)}
.rc-pv-estrella.guardada{color:var(--miel); border-color:var(--miel)}
.rc-pv-estrella.guardada svg{fill:var(--miel); stroke:var(--miel)}
/* quien no puede guardar la ve con su llavecita (sello honesto de la casa) */
.rc-pv-estrella.rc-llave span{position:absolute; right:-5px; bottom:-7px; font-size:11px}

/* el posavaso grisado: un próximo que tienta (patrón de La Habitación) */
.rc-posavaso.apagado{opacity:.55; pointer-events:none; box-shadow:none; cursor:default}
.rc-pv-nota{display:block; margin-top:3px; font-size:.56rem; font-style:italic; color:var(--tinta-tenue); text-align:center; text-transform:none; letter-spacing:0}

/* ---------- «Para volver a escuchar»: los días, debajo de la sala ----------
   (corrección 10/8 noche: en la escena vive UN solo posavaso — el de hoy —
   para no contaminarla de círculos; el resto respira acá abajo) */
.rc-pila-hoy{margin-top:16px}
.rc-dias{margin:22px auto 0; max-width:560px; text-align:center}
.rc-dias-titulo{font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--tinta)}
.rc-dias-sub{margin-top:3px; font-size:.85rem; color:var(--tinta-tenue)}
.rc-dias .rc-pila{margin-top:14px}
/* la nota discreta de por qué hoy no llegó uno nuevo (molde .hab-invita) */
.rc-dias-nota{margin:12px auto 0; max-width:480px; font-size:.82rem; color:var(--tinta-tenue); text-align:center; line-height:1.55}
.rc-dias-nota a,
.rc-invita a{color:var(--miel); font-weight:700; text-decoration:none}
.rc-dias-nota a:hover,
.rc-invita a:hover{text-decoration:underline}
.rc-invita{margin:10px 2px 0; font-size:.9rem}

/* ---------- la zona plegable «Tus episodios guardados» ---------- */
.rc-guardados{max-width:560px; margin:16px auto 0; border-top:1px dashed var(--linea); padding-top:10px}
.rc-guardados[hidden]{display:none}
.rc-guardados summary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; list-style:none;
  font-weight:700; font-size:.92rem; color:var(--tinta);
}
.rc-guardados summary::-webkit-details-marker{display:none}
.rc-guardados summary::after{content:'▾'; color:var(--tinta-tenue); font-size:.8rem; transition:transform .25s ease}
.rc-guardados[open] summary::after{transform:rotate(180deg)}
.rc-g-estrella{width:16px; height:16px; flex:0 0 16px; fill:var(--miel); stroke:var(--miel); stroke-width:1.5}
.rc-g-cupo{font-weight:600; font-size:.8rem; color:var(--tinta-tenue)}
.rc-pila-guardados{margin-top:12px}
.rc-g-nota{margin:10px auto 0; max-width:460px; font-size:.8rem; color:var(--tinta-tenue); text-align:center; line-height:1.5}

/* el panel del admin del Rincón: la instrucción previa al encargo y el
   circuito de «qué pasa después» (10/8 noche) */
.rin-paso-previo{margin:0 0 10px; font-size:.93rem; color:var(--tinta); line-height:1.6}
.rin-como-titulo{margin:16px 0 0; font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--tinta)}
.rin-como{margin:10px 0 0; padding-left:22px; display:grid; gap:8px; font-size:.92rem; color:var(--tinta); line-height:1.55}
.rin-como li::marker{font-weight:800; color:var(--terracota)}

/* la ventanita prolija de la casa: por qué no se pudo guardar — sin
   membresía o con el estante lleno (10/8 noche; jamás la del navegador) */
.rc-velo{
  position:fixed; inset:0; z-index:80;
  background:rgba(30, 24, 18, .45);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.rc-velo[hidden]{display:none}
.rc-modal{
  max-width:340px; width:100%; text-align:center;
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio-ch); box-shadow:var(--sombra);
  padding:22px 20px 18px; transition:var(--transicion-luz);
}
.rc-modal-estrella{width:26px; height:26px; fill:var(--miel); stroke:var(--miel); stroke-width:1.4}
.rc-modal h3{margin-top:8px; font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--tinta); line-height:1.35}
.rc-modal p{margin-top:8px; font-size:.9rem; color:var(--tinta-suave); line-height:1.55}
.rc-modal-botones{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.rc-modal-ir{
  display:block; padding:10px 16px; border-radius:99px; text-decoration:none;
  background:var(--terracota); color:#FFF; font-weight:800; font-size:.92rem;
}
.rc-modal-ir[hidden]{display:none}
.rc-modal-cerrar{
  padding:9px 16px; border-radius:99px; cursor:pointer;
  background:transparent; border:1.5px solid var(--linea);
  color:var(--tinta-suave); font-family:var(--sans); font-weight:700; font-size:.9rem;
}
.rc-modal-cerrar:hover{border-color:var(--miel); color:var(--tinta)}

/* ---------- el reproductor discreto (calco del de La Habitación) ---------- */
.rc-player{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:520px; margin:14px auto 0; padding:8px 12px;
  background:var(--velo); border:1px solid var(--linea); border-radius:14px;
  transition:var(--transicion-luz);
}
.rc-player[hidden]{display:none}
.rc-play{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linea);
  background:transparent; color:var(--tinta); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 34px; padding:0;
}
.rc-play svg{width:19px; height:19px}
/* los dibujos SVG no respetan la propiedad hidden: la regla va explícita
   (trampa cazada el 2/8 en el tocadiscos) */
.rc-play svg[hidden]{display:none}
.rc-play:hover{border-color:var(--miel)}
.rc-player-titulo{font-weight:700; color:var(--tinta); font-size:.9rem; max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rc-player-tiempo{font-size:.82rem; color:var(--tinta-tenue); font-variant-numeric:tabular-nums}
.rc-player-barra{flex:1 1 120px; min-width:90px}
.rc-player-vol{flex:0 0 70px; width:70px}
.rc-player-barra, .rc-player-vol{
  -webkit-appearance:none; appearance:none; height:3px; border-radius:2px;
  background:var(--linea); outline:none; cursor:pointer; align-self:center;
}
.rc-player-barra::-webkit-slider-thumb, .rc-player-vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:11px; height:11px;
  border-radius:50%; background:var(--miel); border:none;
}
.rc-player-barra::-moz-range-thumb, .rc-player-vol::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--miel); border:none;
}
.rc-player-barra::-moz-range-track, .rc-player-vol::-moz-range-track{
  height:3px; border-radius:2px; background:var(--linea);
}

.rc-obra{margin:10px auto 0; max-width:520px; font-size:.82rem; color:var(--tinta-tenue); text-align:center; line-height:1.5}

.rc-intro{margin-top:18px; text-align:center}
.rc-intro h1{font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--tinta)}
.rc-intro p{margin:8px auto 0; max-width:560px; color:var(--tinta-suave); line-height:1.6}

.rc-oculto{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (min-width:760px){
  .rc-fila{gap:30px}
  .rc-adentro{padding-left:24px; padding-right:24px}
}

/* ---------- la tarjeta en Tu casa (reemplaza «Nuestro porqué», §2) ----------
   Rehecha el 10/8 por la noche («no tiene vida»): el texto arriba —al revés
   que la tarjeta de al lado, que lleva su telón arriba— y abajo una FRANJA
   VIVA de foquitos de verdad (rincon-carta.js): pulsan, viajan y van
   cambiando de familia de color, como en la sala. */
.pieza.rincon{
  position:relative; overflow:hidden; padding-bottom:0;
  background:linear-gradient(150deg, var(--miel-suave) 0%, var(--tarjeta) 72%);
  display:flex; flex-direction:column;
}
.pieza.rincon .etiqueta{background:var(--tarjeta); color:var(--terracota)}
/* el cafecito y la frase en la MISMA línea (10/8 noche): así todo sube y
   el espacio ganado lo luce la franja */
.pieza.rincon .rc-lema{display:flex; align-items:center; gap:12px}
.pieza.rincon .rc-lema h3{flex:1; min-width:0}
.pieza.rincon .sello{flex:0 0 44px; width:44px; height:44px; color:var(--terracota)}
/* ⚠ sin padding en el lienzo: estiraría el dibujo (clientWidth lo incluye);
   el respiro lo pone la acción de arriba */
.pieza.rincon .accion{margin-bottom:14px}
/* la camita gris de la franja (10/8 noche): sobre el blanco de la tarjeta
   los foquitos se deslucían de día y de tarde — un degradé de grises bien
   claritos, apenas más hondo hacia abajo, les da dónde apoyar sin pelearse
   con el texto de arriba. De noche la franja se hunde con la tarjeta. */
.pieza.rincon{
  --rc-franja1:#F1F0EC; --rc-franja2:#E0DDD5;
}
html[data-luz="tarde"] .pieza.rincon{
  --rc-franja1:#F1ECE3; --rc-franja2:#DFD8CB;
}
html[data-luz="noche"] .pieza.rincon{
  --rc-franja1:#332D28; --rc-franja2:#241F1C;
}
.rc-carta-luces{
  display:block; width:calc(100% + 40px); height:132px;
  margin:0 -20px 0; margin-top:auto;
  background:linear-gradient(180deg, var(--rc-franja1), var(--rc-franja2));
  transition:background .8s ease;
}

/* menos movimiento para quien lo pidió: la sala se aquieta, no se apaga */
@media (prefers-reduced-motion: reduce){
  .rc-copo, .rc-vapor, .rc-sala.sonando .rc-vapor, .rc-rollo1, .rc-rollo2, .rc-piloto{animation:none}
  .rc-copo{opacity:.5}
  .rc-piloto{opacity:.8}
  .rc-viajando{transition:none}
}

/* ================================================================
   TU SOL — la ropa del producto en la charla (F2, 24/8)
   Solo la ve quien tiene el pase del producto: la casa no cambia.
   ================================================================ */
.tusol-badges{
  display:flex; align-items:center; gap:8px;
  padding:12px 0 4px;
  overflow-x:auto;
  scrollbar-width:none;             /* mobile first: se desliza, sin barrita */
  -webkit-overflow-scrolling:touch;
}
.tusol-badges::-webkit-scrollbar{display:none}
.tusol-badge{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:999px;
  font-family:var(--sans); font-size:.85rem; font-weight:700;
  color:var(--tinta);
  box-shadow:var(--sombra-chica);
  cursor:pointer;
  transition:var(--transicion-luz);
}
.tusol-badge .tb-emoji{font-size:1rem; line-height:1}
.tusol-badge:disabled{opacity:.55; cursor:default}
.tusol-badge.usado{opacity:.45; cursor:default}
.tusol-badges-nota{
  flex:none;
  font-size:.72rem; color:var(--tinta-tenue);
  white-space:nowrap; padding-right:4px;
}
/* 26/8 (Christian): los DOS pedidos del día crecen parejos — anchos similares */
.tusol-badge[data-elige-historia],
.tusol-badge[data-pide="podcast"]{flex:1 1 auto; justify-content:center}
/* 26/8, segunda vuelta (su ronda): en el TELÉFONO los badges de arriba se
   esconden («en chiquito quedan espantosamente feos» y la charla los tapa
   enseguida) — lo del día vive en la barra de abajo, siempre a la vista.
   En desktop e iPad los badges se quedan (en iPad la barra de abajo no
   existe: los badges SON su puerta). */
@media (max-width:560px){ .tusol-badges{display:none} }
html.es-ipad .tusol-badges{display:flex !important}

/* 26/8: el avisito de la llave enviada (una sola vez, al abrir la prueba) */
.tusol-llave-aviso{margin:10px 0 2px; padding:10px 14px; border-radius:12px;
  background:var(--tarjeta); border:1.5px dashed var(--linea);
  color:var(--tinta-tenue); font-size:.84rem; line-height:1.5; text-align:center}
.tusol-llave-aviso b{color:var(--tinta); word-break:break-all}

/* el «Del día» de la barra de abajo: el librito y el micrófono juntos */
.barra-inferior .tusol-deldia .td-iconos{display:flex; align-items:center; gap:3px; height:24px}
.barra-inferior .tusol-deldia .td-iconos svg{width:19px; height:19px}

/* ⭐ 26/8 — LA ELECCIÓN DE LA HISTORIA (un solo botón: al tocarlo se elige
   la forma — leerla o escucharla). Tarjeta clara siempre, como la ventana
   del plan; se cierra con la X o tocando afuera (acá no se pierde nada). */
.tusol-eleccion-velo{position:fixed; inset:0; z-index:60; background:rgba(20,16,13,.45);
  display:flex; align-items:center; justify-content:center; padding:20px}
.tusol-eleccion-velo[hidden]{display:none}
.tusol-eleccion{position:relative; width:100%; max-width:340px; background:#FFFDF9;
  border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.32); padding:24px 20px 20px;
  text-align:center; color:#1D1915}
.tusol-eleccion .te-cerrar{position:absolute; right:8px; top:8px; width:34px; height:34px;
  border-radius:50%; border:1.5px solid #E4E1DC; background:#FFF; color:#6E675F;
  font-size:.9rem; font-weight:800; cursor:pointer; font-family:inherit}
.tusol-eleccion .te-cerrar:hover{border-color:#1D1915; color:#1D1915}
.tusol-eleccion .te-titulo{font-family:"Fraunces", Georgia, serif; font-weight:500;
  font-size:1.3rem; letter-spacing:-.01em; margin:0}
.tusol-eleccion .te-pregunta{color:#6E675F; font-size:.88rem; margin:4px 0 6px}
.tusol-eleccion .te-opcion{display:flex; align-items:center; gap:12px; width:100%;
  text-align:left; background:#F5F2EC; border:1.5px solid #E4DED2; border-radius:14px;
  padding:12px 14px; margin-top:10px; cursor:pointer; font-family:inherit; color:#1D1915;
  transition:transform .12s ease, border-color .12s ease}
.tusol-eleccion .te-opcion:hover{border-color:#D9A048}
.tusol-eleccion .te-opcion:active{transform:scale(.98)}
.tusol-eleccion .te-emoji{font-size:1.5rem; line-height:1; flex:none}
.tusol-eleccion .te-textos b{display:block; font-weight:800; font-size:.98rem}
.tusol-eleccion .te-textos small{display:block; color:#6E675F; font-size:.8rem; margin-top:1px}

/* la tarjeta de la pieza del día (dentro del hilo, como burbuja de Sol) */
.tusol-tarjeta{width:min(85%, 340px)}
.tusol-tarjeta .tt-titulo{font-family:var(--serif); font-weight:600; font-size:1.02rem}
.tusol-tarjeta .tt-sub{font-size:.8rem; color:var(--tinta-tenue); margin-top:2px}
.tusol-tarjeta .tt-player{display:flex; align-items:center; gap:10px; margin-top:10px}
.tusol-tarjeta .tt-play{
  flex:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--linea); background:var(--miel-suave); color:var(--tinta);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--sombra-chica);
}
.tusol-tarjeta .tt-play svg{width:20px; height:20px}
.tusol-tarjeta .tt-barra{
  flex:1; height:6px; border-radius:999px;
  background:color-mix(in srgb, var(--linea) 60%, transparent);
  overflow:hidden;
}
.tusol-tarjeta .tt-avance{width:0; height:100%; border-radius:999px; background:var(--miel)}
.tusol-tarjeta .tt-tiempo{flex:none; font-size:.75rem; color:var(--tinta-tenue); min-width:38px; text-align:right}
.tusol-tarjeta .tt-abrir{
  margin-top:10px; padding:8px 14px;
  border:1px solid var(--linea); border-radius:999px;
  background:var(--miel-suave); color:var(--tinta);
  font-family:var(--sans); font-size:.85rem; font-weight:700; cursor:pointer;
}

/* la hoja de lectura, a pantalla completa (el libro antiguo de la casa) */
.tusol-velo{
  position:fixed; inset:0; z-index:120;
  display:none; overflow-y:auto;
  background:color-mix(in srgb, var(--fondo) 88%, black);
  padding:26px 14px 40px;
  -webkit-overflow-scrolling:touch;
}
.tusol-velo.abierta{display:block}
.tusol-velo .tusol-hoja-cuerpo{max-width:560px; margin:0 auto}
/* La hoja viaja de La Habitación, pero su NOMBRE es de la casa (26/8,
   revisión): dentro de Tu Sol la cornisa y el folio no se muestran. */
.tusol-velo .hab-cornisa,
.tusol-velo .hab-folio{display:none}
.tusol-cerrar{
  position:sticky; top:0; margin-left:calc(100% - 40px); z-index:2;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta);
  font-size:1rem; cursor:pointer; box-shadow:var(--sombra-chica);
}
html.tusol-sin-scroll, html.tusol-sin-scroll body{overflow:hidden}

/* la barra de arriba en modo Tu Sol: sin puertas de la casa, el menú de
   rayitas siempre a mano (en la casa solo aparece en pantallas chicas) */
.barra-arriba.barra-tusol .menu-chico-caja{display:inline-flex}

/* el botoncito de la nota (cabecera) y la barrita de música */
.tusol-nota{
  margin-left:auto;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--sombra-chica); flex:none;
}
.tusol-nota svg{width:19px; height:19px}
.tusol-nota[aria-expanded="true"]{background:var(--miel-suave); color:var(--tinta)}
.tusol-musica{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin-top:10px;
  background:var(--tarjeta);
  border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra-chica);
}
.tusol-musica[hidden]{display:none}
.tusol-musica .tm-btn{
  flex:none; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--linea); background:var(--miel-suave); color:var(--tinta);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.tusol-musica .tm-btn svg{width:16px; height:16px}
.tusol-musica .tm-vol{flex:1; max-width:180px}

/* Los filósofos en el iPad (donde la barra de abajo no existe, regla del
   4/8): un botoncito a la IZQUIERDA de la barra de arriba (decisión de
   Christian, 25/8 — el badge en segunda línea quedaba feo) y la vuelta
   con Sol dentro de la sala. Todo SOLO-iPad: los demás ya lo tienen abajo. */
/* Decisión final de Christian (25/8): el botoncito queda EN TODOS los
   aparatos, aunque en los que tienen barra de abajo esté duplicado —
   «no hay problema, dejalo». */
.barra-arriba.barra-tusol .grupo.ts-arriba-caja{display:inline-flex}
.ts-arriba-filosofos{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px 6px 10px; border-radius:999px;
  border:1px solid var(--linea);
  background:linear-gradient(180deg, var(--tarjeta), var(--miel-suave));
  color:var(--tinta); text-decoration:none;
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  box-shadow:var(--sombra-chica);
}
.ts-arriba-filosofos svg{width:17px; height:17px; color:var(--acento, #B85C3C)}
.ts-arriba-filosofos.activo{background:var(--miel-suave)}
/* 26/8 (su ronda): la flechita de vuelta con Sol se ve SIEMPRE, en todos
   los aparatos (antes era solo-iPad; en teléfono y desktop se volvía solo
   por la barra de abajo y no era evidente) */
.ts-volver-charla{display:inline-block}

/* La tarjeta de la imagen del día, dentro del hilo de la charla (F5).
   Ancha como la caja de escritura (Christian, 25/8: «está muy linda,
   podría tener el tamaño de la caja»). */
.tusol-tarjeta-imagen{width:100%; padding:8px}
.tusol-tarjeta-imagen .ti-lienzo{display:block; width:100%; aspect-ratio:8/5; border-radius:10px; cursor:zoom-in}
.tusol-tarjeta-imagen .ti-nombre{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--serif); font-size:.92rem; color:var(--tinta);
  padding:7px 4px 2px;
}
.ti-ampliar{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  border:1px solid var(--linea); border-radius:999px;
  background:var(--tarjeta); color:var(--tinta-tenue);
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  padding:4px 10px; cursor:pointer;
}
.ti-ampliar svg{width:13px; height:13px}

/* el velo de contemplación: la misma imagen, a toda pantalla, con la
   música de la barrita sonando si la persona quiere */
.ts-img-velo{
  position:fixed; inset:0; z-index:120;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(24,20,17,.95);
  padding:16px;
}
.ts-img-velo.abierta{display:flex}
.ts-img-velo .tusol-cerrar{position:absolute; top:14px; right:14px; margin-left:0}
.ts-img-velo .ts-img-marco{
  width:min(96vw, calc((100vh - 150px)*1.6));
  width:min(96vw, calc((100dvh - 150px)*1.6));
}
.ts-img-velo .ts-img-marco canvas{
  display:block; width:100%; aspect-ratio:8/5; border-radius:14px; cursor:default;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.ts-img-velo-nombre{
  color:#EFE7DA; font-family:var(--serif); font-size:1.05rem;
  margin-top:14px; text-align:center;
}

/* La vidriera de obra de la imagen del día (F5; se retira al lanzar) */
.ts-img-tarjeta{
  max-width:560px; margin:0 auto;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:16px;
  padding:10px; box-shadow:var(--sombra-chica);
}
.ts-img-tarjeta canvas{display:block; width:100%; aspect-ratio:8/5; border-radius:12px}
.ts-img-nombre{
  font-family:var(--serif); font-size:1rem; color:var(--tinta);
  text-align:center; padding:8px 4px 2px;
}
.ts-img-perillas{max-width:560px; margin:18px auto 0; font-family:var(--sans); font-size:.88rem}
.ts-img-perillas .fila{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:5px 0}
.ts-img-perillas .rotulo{color:var(--tinta-tenue); flex:none}
.ts-img-perillas a{
  color:var(--tinta); text-decoration:none;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:999px;
  padding:3px 11px;
}
.ts-img-perillas a.activo{background:var(--miel-suave); font-weight:700}
.ts-img-perillas .nota{color:var(--tinta-tenue); font-size:.76rem}
.ts-img-pie{color:var(--tinta-tenue); margin-top:12px; line-height:1.5}

/* (25/8, retirado el mismo día: el cuarto badge del iPad envolvía a una
   segunda línea y quedaba feo — los filósofos del iPad viven ahora como
   botoncito a la izquierda de la barra de arriba: .ts-arriba-caja) */

/* ============================================================
   TU SOL — F7: el botón «TU PLAN CON SOL» de la barra de arriba
   (spec de Christian 25/8: CENTRADO, bonito, con un solcito y
   PULSANDO suave — llama la atención sin molestar). Solo se pinta
   durante el día de prueba; al comprar desaparece solo. Vive
   ABSOLUTO sobre la barra para quedar centrado de verdad, sin
   pelear con los grupos de los costados.
   ============================================================ */
.barra-arriba .ts-plan-llamador{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, #8E2650 0%, #6E1C3E 100%);
  color:#FFF5EC; border:0; border-radius:999px; cursor:pointer;
  padding:7px 16px 7px 10px; font-family:var(--sans);
  font-size:.78rem; font-weight:800; letter-spacing:.05em;
  box-shadow:0 4px 16px rgba(142,38,80,.35);
  animation:tsPlanPulso 3.2s ease-in-out infinite;
  z-index:5; white-space:nowrap;
}
.barra-arriba .ts-plan-llamador:hover{filter:brightness(1.08)}
.barra-arriba .ts-plan-llamador .ts-plan-llamador-sol{
  flex:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #FFE9C4, #E9B87A 62%, #D9924C);
  box-shadow:0 0 10px rgba(233,184,122,.8);
}
@keyframes tsPlanPulso{
  0%,100%{transform:translate(-50%,-50%) scale(1); box-shadow:0 4px 16px rgba(142,38,80,.35)}
  50%{transform:translate(-50%,-50%) scale(1.045); box-shadow:0 6px 22px rgba(142,38,80,.55)}
}
@media (prefers-reduced-motion:reduce){ .barra-arriba .ts-plan-llamador{animation:none} }
.barra-arriba .ts-plan-llamador .tpl-corto{display:none}
@media (max-width:560px){
  .barra-arriba .ts-plan-llamador{font-size:.7rem; padding:6px 12px 6px 8px; gap:6px}
  .barra-arriba .ts-plan-llamador .ts-plan-llamador-sol{width:16px; height:16px}
}
/* 26/8: en pantallas chicas el rótulo corto — el largo se encimaba con las
   lucecitas de la luz (su caza) */
@media (max-width:470px){
  .barra-arriba .ts-plan-llamador .tpl-largo{display:none}
  .barra-arriba .ts-plan-llamador .tpl-corto{display:inline}
}
/* (la ventana del plan reutiliza html.tusol-sin-scroll, ya definida arriba) */