/* estilos.css · El Susurro de la Hiedra
   1) Base web/PWA: alto real de pantalla, áreas seguras (notch), tamaños fluidos
   2) Estilos propios de la app (paneles, animaciones, casita, muñequita) */

/* ---------- 1. Base web / PWA ---------- */
:root {
    --alto-app: 100vh;                      /* respaldo para navegadores antiguos */
    --seguro-arriba: env(safe-area-inset-top, 0px);
    --seguro-abajo: env(safe-area-inset-bottom, 0px);
    --seguro-izq: env(safe-area-inset-left, 0px);
    --seguro-der: env(safe-area-inset-right, 0px);
    color-scheme: dark;
}
@supports (height: 100dvh) {
    :root { --alto-app: 100dvh; }           /* alto visible real en celulares (sin barras del navegador) */
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #0c1a10; }
body {
    min-height: var(--alto-app);
    padding: var(--seguro-arriba) var(--seguro-der) var(--seguro-abajo) var(--seguro-izq);
    overscroll-behavior-y: none;            /* sin "rebote" al tirar hacia abajo en modo app */
    -webkit-tap-highlight-color: transparent;
}
button, a, input, select, textarea { touch-action: manipulation; }

/* Modales: nunca más altos que la pantalla visible, respetando el notch */
#collection-modal, #journal-modal, #reflection-prompt-modal, #settings-modal {
    padding-top: calc(0.75rem + var(--seguro-arriba));
    padding-bottom: calc(0.75rem + var(--seguro-abajo));
}
#collection-modal > div, #journal-modal > div {
    max-height: calc(var(--alto-app) - 1.5rem - var(--seguro-arriba) - var(--seguro-abajo));
}

/* Temporizador: el anillo y la taza/hongo crecen con la pantalla */
.reloj-fluido { width: clamp(15rem, 78vw, 21rem); aspect-ratio: 1 / 1; }
.visual-fluido { width: clamp(5.5rem, 26vw, 8.5rem); aspect-ratio: 1 / 1; }
#timer-display { font-size: clamp(2.25rem, 10vw, 3.25rem); }

/* Vajilla y hongos en las cuadrículas de la colección */
#teas-grid svg, #mushrooms-grid svg { max-width: 100%; height: auto; }


/* Aviso flotante (instalación / sin conexión) */
#aviso-pwa { bottom: calc(1rem + var(--seguro-abajo)); }

/* Instalada como app: sin botón "Instalar" */
@media (display-mode: standalone), (display-mode: fullscreen) {
    #btn-instalar { display: none !important; }
}

/* ---------- Navegación entre secciones ---------- */
.nav-principal {
    display: flex; gap: .25rem; padding: .3rem;
    border-radius: 999px;
    background: rgba(12, 26, 16, .7);
    border: 1px solid rgba(140, 174, 140, .22);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-item {
    position: relative; display: flex; align-items: center; gap: .45rem;
    padding: .5rem 1rem; border-radius: 999px;
    font-size: .8rem; color: #d7e4d7; white-space: nowrap;
    transition: background .2s, color .2s;
}
.nav-item:hover { color: #E8E4F1; }
.nav-item.activo { background: #b4cdb4; color: #0c1a10; font-weight: 600; }
.nav-icono { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.nav-mini-reloj {
    font-size: .66rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
    padding: .05rem .4rem; border-radius: 999px; background: rgba(232, 228, 241, .16); color: #E8E4F1;
}

/* Celular: barra inferior tipo app */
@media (max-width: 767px) {
    .nav-principal {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        justify-content: space-around; gap: 0;
        border-radius: 1.2rem 1.2rem 0 0; border-width: 1px 0 0;
        padding: .35rem .5rem calc(.35rem + var(--seguro-abajo));
        background: rgba(12, 26, 16, .94);
    }
    .nav-item { flex: 1; flex-direction: column; gap: .15rem; padding: .4rem .25rem; border-radius: .9rem; font-size: .68rem; }
    .nav-item.activo { background: rgba(180, 205, 180, .16); color: #E8E4F1; }
    .nav-icono { width: 1.35rem; height: 1.35rem; }
    .nav-mini-reloj { position: absolute; top: -.2rem; right: 18%; font-size: .58rem; background: #b4cdb4; color: #0c1a10; }
    body { padding-bottom: calc(4.6rem + var(--seguro-abajo)); }
    #aviso-pwa { bottom: calc(5.5rem + var(--seguro-abajo)) !important; }
}

/* Secciones: solo una visible, con una entrada suave */
.seccion[hidden] { display: none !important; }
.seccion { animation: entrarSeccion .35s ease-out; }
@keyframes entrarSeccion { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seccion { animation: none; } }

/* ---------- Casita: vajilla ---------- */
.vajilla-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.6rem), 1fr)); gap: .5rem; }
.vajilla-item { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .35rem .6rem; border-radius: .9rem; text-align: center; transition: border-color .2s, transform .2s; }
.vajilla-item:hover { transform: translateY(-2px); }
.vajilla-item.elegida { border-color: rgba(232, 228, 241, .7); box-shadow: 0 0 0 1px rgba(232, 228, 241, .35); }
.vajilla-taza { display: block; width: 100%; max-width: 4.5rem; aspect-ratio: 1 / 1; }

/* ---------- Tienda: Papelería ---------- */
.tienda-portada {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(180, 205, 180, .12), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(128, 21, 43, .12), transparent 60%),
        rgba(21, 41, 27, .75);
}
.tienda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.producto { display: flex; flex-direction: column; border-radius: 1.1rem; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.producto:hover { transform: translateY(-3px); border-color: rgba(180, 205, 180, .35); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.producto-imagen { position: relative; aspect-ratio: 4 / 3; background: #132418; overflow: hidden; }
.producto-imagen > svg, .producto-imagen > img { display: block; width: 100%; height: 100%; }
.producto-etiqueta {
    position: absolute; top: .65rem; left: .65rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .65rem; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(232, 228, 241, .92); color: #3b2a4f; font-weight: 600;
}
.producto-cuerpo { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.05rem 1.1rem; flex: 1; }
.producto-pie { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .5rem; flex-wrap: wrap; }
.producto-tipo { font-size: .66rem; letter-spacing: .04em; color: #c9a45c; }
.producto-boton {
    display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; margin-top: .35rem;
    padding: .7rem 1rem; border-radius: .8rem;
    background: #b4cdb4; color: #0c1a10; font-size: .78rem; font-weight: 600;
    transition: background .2s, transform .1s;
}
.producto-boton:hover { background: #E8E4F1; }
.producto-boton:active { transform: scale(.97); }
.producto-boton:disabled { background: rgba(180, 205, 180, .2); color: #8cae8c; cursor: not-allowed; }
.producto-boton svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.producto-boton-mini { width: auto; margin: 0; padding: .45rem .8rem; font-size: .72rem; text-decoration: none; }

/* Tus compras */
.mis-compras { display: grid; gap: .5rem; }
.mi-compra { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border-radius: .9rem; }

/* Ventana de compra de la tienda */
.compra-resumen { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; padding: .6rem; border-radius: 1rem; background: rgba(12, 26, 16, .55); border: 1px solid rgba(140, 174, 140, .18); }
.compra-mini { width: 4rem; aspect-ratio: 3 / 4; border-radius: .6rem; overflow: hidden; flex-shrink: 0; }
.compra-mini > svg, .compra-mini > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.compra-cantidad { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; padding: 0 .2rem; }
.compra-cantidad[hidden], [data-solo-fisico][hidden] { display: none !important; }
.compra-contador { display: flex; align-items: center; gap: .2rem; border-radius: 999px; background: rgba(12, 26, 16, .6); border: 1px solid rgba(140, 174, 140, .25); }
.compra-contador button { width: 2.1rem; height: 2.1rem; border-radius: 999px; color: #E8E4F1; font-size: 1.1rem; }
.compra-contador button:hover { background: rgba(180, 205, 180, .15); }
.compra-contador output { min-width: 1.6rem; text-align: center; font-weight: 700; color: #f5f0eb; }
.compra-campos { margin-top: 1rem; border: 0; padding: 0; display: grid; gap: .55rem; }
.compra-campos legend { text-align: left; margin-bottom: .35rem; }
.compra-envio { display: grid; gap: .55rem; }
.compra-campo { display: grid; gap: .2rem; font-size: .72rem; color: #b4cdb4; }
.compra-campo input { width: 100%; padding: .7rem .8rem; border-radius: .75rem; font-size: .9rem; color: #f5f0eb;
    background: rgba(12, 26, 16, .7); border: 1px solid rgba(140, 174, 140, .3); }
.compra-campo input:focus { outline: 2px solid #E8E4F1; outline-offset: 1px; }
.compra-campo input.invalido { border-color: #f3b4c0; box-shadow: 0 0 0 1px #f3b4c0; }
.compra-totales { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: .9rem; background: rgba(12, 26, 16, .45); display: grid; gap: .3rem; }
.compra-totales > div { display: flex; justify-content: space-between; font-size: .82rem; color: #d7e4d7; }
.compra-totales > div[hidden] { display: none; }
.compra-totales dd { margin: 0; }
.compra-total { padding-top: .35rem; border-top: 1px dashed rgba(201, 164, 92, .4); font-weight: 700; color: #f5f0eb !important; font-size: .95rem !important; }
.pago-insignias-compactas { margin-top: .9rem; }
.pago-insignias-compactas .pago-insignia, .pago-insignias-compactas .pago-insignia.destacada { grid-column: span 4; padding: .4rem .25rem; }
.pago-insignias-compactas .pago-insignia-icono { width: 1rem !important; height: 1rem !important; }
.pago-insignias-compactas .pago-insignia-nombre { font-size: .72rem !important; }
a.pago-boton { text-decoration: none; }
a.pago-boton[hidden] { display: none; }

/* Casita sin Pase Premium: invitación + vista previa enmarcada (el personaje sigue siendo gratis) */
#seccion-casita { position: relative; }
.casita-invitacion {
    display: grid; gap: 1rem; align-items: center; margin-bottom: 1.1rem;
    padding: clamp(1.1rem, 4vw, 1.75rem); border-radius: 1.5rem;
    background: radial-gradient(120% 140% at 0% 0%, rgba(201, 164, 92, .16), transparent 55%),
                linear-gradient(180deg, rgba(26, 50, 34, .92), rgba(18, 36, 26, .94));
    border: 1px solid rgba(201, 164, 92, .42); box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
@media (min-width: 768px) { .casita-invitacion { grid-template-columns: 1.1fr 1fr; gap: 2rem; } }
.casita-invitacion .pago-titulo { text-align: left; margin-top: .2rem; }
.casita-invitacion .pago-subtitulo { text-align: left; margin-top: .45rem; }
.casita-invitacion .pago-eyebrow { text-align: left; }
.casita-invitacion .pago-boton { margin-top: 0; white-space: normal; }
.casita-invitacion-accion { display: flex; flex-direction: column; align-items: stretch; }
.casita-invitacion-accion .pago-enlace { align-self: center; }
.pago-insignias-cuatro .pago-insignia, .pago-insignias-cuatro .pago-insignia.destacada { grid-column: span 3 !important; }
.casita-marco { position: relative; width: 100%; display: flex; justify-content: center; }
.casita-cinta {
    position: absolute; top: .7rem; left: 50%; transform: translateX(-50%); z-index: 3;
    font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
    padding: .3rem .8rem; border-radius: 999px; color: #f3e7c9;
    background: rgba(12, 26, 16, .78); border: 1px solid rgba(201, 164, 92, .5);
}
body:not(.acceso-activo) #casita { pointer-events: none; }

.nav-candado { font-size: .7rem; line-height: 1; }
.nav-candado[hidden] { display: none; }

/* Tienda: producto principal */
.producto-destacado { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 1.4rem; overflow: hidden; }
@media (min-width: 768px) { .producto-destacado { grid-template-columns: minmax(16rem, 5fr) 7fr; } }
.destacado-portada {
    display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 2.5rem);
    background: radial-gradient(120% 90% at 50% 30%, rgba(180, 205, 180, .14), transparent 65%), #132418;
}
.destacado-libro { width: min(62vw, 15rem); aspect-ratio: 3 / 4; border-radius: .5rem; overflow: hidden;
    box-shadow: -8px 14px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 164, 92, .25); transform: rotate(-2deg); transition: transform .3s; }
.producto-destacado:hover .destacado-libro { transform: rotate(0) translateY(-3px); }
.destacado-libro > svg, .destacado-libro > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La portada en la tienda se ve igual que el libro de Mi Journal (estilos .journal-libro de fase2.css) */
.destacado-journal-libro { --j-oro: #c9a45c; margin: .5rem 0 1.6rem; display: block; padding: 0; border: 0; background: none; }
.destacado-journal-libro[aria-hidden="true"] { cursor: default; }
.destacado-vista { display: flex; flex-direction: column; align-items: center; }
.destacado-hojear { font-size: .72rem; font-style: italic; color: rgba(225, 192, 122, .85); margin-top: -.4rem; text-align: center; }
/* Lector de la muestra (usa los estilos del lector de Mi Journal) */
.muestra-caja { width: min(100%, 36rem); }
.muestra-hoja { margin: 0; display: flex; justify-content: center; position: relative; perspective: 1600px; }
.muestra-hoja.pasar, .muestra-hoja.pasar-atras { animation: none; }
.muestra-volando { position: absolute; z-index: 2; object-fit: cover; transform-origin: 0 50%; backface-visibility: hidden;
    border-radius: .3rem .7rem .7rem .3rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); pointer-events: none; }
.muestra-volando.adelante { animation: muestraHojaAdelante .6s cubic-bezier(.45, .05, .35, 1) forwards; }
.muestra-volando.atras { animation: muestraHojaAtras .6s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes muestraHojaAdelante {
    from { transform: rotateY(0); filter: brightness(1); }
    to { transform: rotateY(-100deg); filter: brightness(.55); opacity: .2; } }
@keyframes muestraHojaAtras {
    from { transform: rotateY(-100deg); filter: brightness(.55); opacity: .2; }
    to { transform: rotateY(0); filter: brightness(1); opacity: 1; } }
.muestra-hoja img { display: block; width: auto; max-width: 100%; max-height: min(72vh, 760px); aspect-ratio: 720 / 931; border-radius: .3rem .7rem .7rem .3rem;
    background: #f6f1e6; box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 164, 92, .2); user-select: none; -webkit-user-drag: none; }

.muestra-pdf { font-size: .74rem; color: rgba(225, 192, 122, .9); text-decoration: underline; text-underline-offset: 3px; }
.muestra-pdf[hidden] { display: none; }
.destacado-cuerpo { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.1rem, 4vw, 2rem); }
.destacado-incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.destacado-incluye li { display: flex; align-items: center; gap: .7rem; font-size: .82rem; line-height: 1.35; color: #d7e4d7; }
.destacado-incluye .incluye-icono { flex: none; width: 2.2rem; height: 2.2rem; padding: .26rem; border-radius: 50%; color: #e1c07a;
    background: radial-gradient(circle at 35% 30%, rgba(225, 192, 122, .16), rgba(225, 192, 122, .04)); border: 1px solid rgba(225, 192, 122, .35); }
.destacado-compra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .4rem;
    padding-top: .9rem; border-top: 1px dashed rgba(201, 164, 92, .35); }
.destacado-boton { width: auto; flex: 1 1 15rem; margin: 0; padding: .85rem 1.1rem; font-size: .86rem; }
.destacado-insignias { margin-top: 0; }
.tienda-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }

/* Tienda: tarjetas "Próximamente" */
.proximamente-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .9rem; }
.proximamente { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
    padding: 1.1rem 1rem 1.2rem; border-radius: 1.1rem; border: 1px dashed rgba(140, 174, 140, .35);
    background: radial-gradient(100% 80% at 50% 0%, rgba(140, 174, 140, .08), transparent 70%), rgba(12, 26, 16, .35); }
.proximamente-ilustracion { width: 7rem; opacity: .75; }
.proximamente-sello { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: #c9a45c;
    padding: .2rem .65rem; border-radius: 999px; border: 1px solid rgba(201, 164, 92, .45); }

/* Candados del Pase Premium */
.vajilla-item { position: relative; }
.vajilla-item.bloqueada .vajilla-taza { opacity: .55; filter: saturate(.7); }
.vajilla-candado { position: absolute; top: .3rem; right: .35rem; font-size: .8rem; }

/* ---------- Pago: Acceso Total ---------- */
body.sin-scroll { overflow: hidden; }
.pago-fondo {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    padding: calc(1rem + var(--seguro-arriba)) 1rem calc(1rem + var(--seguro-abajo));
    background: rgba(8, 18, 11, .72);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .2s ease;
}
.pago-fondo.abierto { opacity: 1; }
.pago-fondo[hidden] { display: none; }
.pago-panel {
    position: relative; width: min(100%, 30rem);
    max-height: calc(var(--alto-app) - 2rem - var(--seguro-arriba) - var(--seguro-abajo));
    overflow-y: auto; overscroll-behavior: contain;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 1.6rem;
    background:
        radial-gradient(130% 70% at 50% 0%, rgba(232, 228, 241, .10), transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(140, 109, 83, .18), transparent 70%),
        linear-gradient(180deg, #1a3222 0%, #12241a 100%);
    border: 1px solid rgba(201, 164, 92, .35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    transform: translateY(10px) scale(.98); transition: transform .25s ease;
}
.pago-fondo.abierto .pago-panel { transform: none; }
.pago-cerrar { position: absolute; top: .9rem; right: 1rem; width: 2rem; height: 2rem; border-radius: 999px; color: #b4cdb4; }
.pago-cerrar:hover { background: rgba(180, 205, 180, .12); color: #E8E4F1; }

.pago-cabecera { text-align: center; }
.pago-emblema { width: 3.6rem; height: 3.6rem; margin: 0 auto .6rem; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }
.pago-eyebrow { padding: 0 2.2rem; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: #c9a45c; }
.pago-titulo { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.2; color: #E8E4F1; margin-top: .35rem; }
.pago-subtitulo { margin-top: .6rem; font-size: .88rem; color: #d7e4d7; line-height: 1.45; }
.pago-subtitulo strong { color: #f5f0eb; font-weight: 700; white-space: nowrap; }

.pago-beneficios { margin: 1.1rem 0 0; padding: .9rem 1rem; list-style: none; display: grid; gap: .5rem;
    border-radius: 1rem; background: rgba(12, 26, 16, .55); border: 1px solid rgba(140, 174, 140, .18); }
.pago-beneficios li { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; color: #eef3ee; line-height: 1.35; }
.pago-beneficios svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }

.pago-medios { margin-top: 1.1rem; }
.pago-medios-titulo { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #8cae8c; text-align: center; margin-bottom: .6rem; }
.pago-insignias { display: grid; grid-template-columns: repeat(12, 1fr); gap: .45rem; }
.pago-insignia {
    grid-column: span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    padding: .6rem .35rem; border-radius: .9rem; text-align: center;
    background: #f5f0eb; color: #3d2c20; border: 1px solid #e4d8cd;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.pago-insignia.destacada { grid-column: span 6; background: linear-gradient(180deg, #fbf7ef, #efe4d2); border-color: #c9a45c; }
.pago-insignia-icono { width: 1.3rem; height: 1.3rem; color: #346143; }
.pago-insignia.destacada .pago-insignia-icono { width: 1.5rem; height: 1.5rem; color: #274a33; }
.pago-insignia-logo { height: 1.5rem; width: auto; object-fit: contain; }
.pago-insignia-nombre { font-weight: 800; font-size: .86rem; letter-spacing: .01em; }
.pago-insignia.destacada .pago-insignia-nombre { font-size: 1rem; }
.pago-insignia-detalle { font-size: .62rem; color: #8c6d53; line-height: 1.2; }

.pago-boton {
    margin-top: 1.25rem; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    padding: 1rem 1.1rem; border-radius: 1.1rem;
    font-weight: 700; font-size: clamp(.8rem, 3.4vw, 1.02rem); white-space: nowrap; color: #0c1a10;
    background: linear-gradient(135deg, #cfe0cf 0%, #b4cdb4 45%, #d9d2ea 100%);
    box-shadow: 0 10px 26px rgba(180, 205, 180, .25), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s;
}
.pago-boton svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.pago-boton:hover { filter: brightness(1.05); box-shadow: 0 14px 32px rgba(232, 228, 241, .28), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pago-boton:active { transform: scale(.985); }
.pago-boton:focus-visible, .pago-cerrar:focus-visible, .pago-enlace:focus-visible { outline: 2px solid #E8E4F1; outline-offset: 3px; }
.pago-redireccion { margin-top: .45rem; font-size: .7rem; color: #8cae8c; text-align: center; }
/* Promoción Fundadores y PayPal (fuera de Colombia) */
.pago-fundadores { margin: .55rem auto 0; width: fit-content; max-width: 100%; padding: .32rem .8rem; border-radius: 999px; font-size: .74rem; line-height: 1.3;
    color: #f1eadb; background: rgba(140, 174, 140, .16); border: 1px solid rgba(201, 164, 92, .55); text-align: center; }
.pago-fundadores strong { color: #e6c98a; }
.pago-fundadores[hidden] { display: none; }
.pago-fundadores-izq { margin-left: 0; }
.pago-paypal { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed rgba(236, 224, 200, .22); }
.pago-paypal[hidden] { display: none; }
.pago-paypal-titulo { font-size: .74rem; color: #c9d8c9; text-align: center; }
.pago-boton.pago-boton-paypal { margin-top: .5rem; }
#pago-insignias .pago-insignia:not(.destacada) { grid-column: span 4; }

.pago-seguridad {
    margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .6rem .8rem; border-radius: .8rem; font-size: .74rem; color: #d7e4d7; text-align: left;
    background: rgba(52, 97, 67, .25); border: 1px solid rgba(140, 174, 140, .25);
}
.pago-seguridad svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; color: #b4cdb4; }
.pago-seguridad strong { color: #eef3ee; }

.pago-pie { margin-top: .9rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pago-enlace { font-size: .75rem; color: #b4cdb4; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(180, 205, 180, .4); }
.pago-enlace:hover { color: #E8E4F1; }

@media (max-width: 480px), (max-height: 760px) {
    .pago-emblema { width: 2.8rem; height: 2.8rem; margin-bottom: .35rem; }
    .pago-beneficios { margin-top: .8rem; padding: .7rem .8rem; gap: .35rem; }
    .pago-beneficios li { font-size: .76rem; }
    .pago-medios { margin-top: .8rem; }
    .pago-insignia { padding: .45rem .3rem; }
    .pago-boton { margin-top: .9rem; padding: .85rem .9rem; }
    .pago-seguridad { margin-top: .7rem; }
}

/* Pantallas de la ventana de pago */
.pago-vista[hidden] { display: none !important; }
.pago-centrada { text-align: center; padding: 1rem 0 .25rem; display: flex; flex-direction: column; align-items: center; }
.pago-centrada .pago-titulo:focus { outline: none; }
.pago-hoja-giratoria { font-size: 2.6rem; animation: hojaGira 2.4s ease-in-out infinite; margin-bottom: .5rem; }
@keyframes hojaGira { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(14deg) translateY(-6px); } }
.pago-exito-icono { font-size: 2.8rem; margin-bottom: .4rem; filter: drop-shadow(0 6px 14px rgba(232, 228, 241, .35)); }
.pago-codigo-caja { margin: 1.1rem 0 .4rem; padding: .9rem 1rem; width: 100%; border-radius: 1rem;
    background: rgba(12, 26, 16, .6); border: 1px dashed rgba(201, 164, 92, .6); }
.pago-codigo { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: clamp(1.05rem, 5vw, 1.35rem);
    letter-spacing: .08em; color: #f5f0eb; margin: .15rem 0 .45rem; user-select: all; -webkit-user-select: all; word-break: break-all; }
.pago-input { width: 100%; margin-top: 1rem; padding: .85rem 1rem; border-radius: .9rem; text-align: center;
    font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
    color: #f5f0eb; background: rgba(12, 26, 16, .7); border: 1px solid rgba(140, 174, 140, .35); }
.pago-input:focus { outline: 2px solid #E8E4F1; outline-offset: 2px; }
.pago-error { margin-top: .5rem; font-size: .78rem; color: #f3b4c0; text-align: center; }
.pago-boton:disabled { opacity: .75; cursor: progress; }
.pago-boton.cargando span::after { content: '…'; }
.mt-4 { margin-top: 1rem; }

/* Acceso activo: ocultar ofertas, mostrar insignia */
[data-si-acceso][hidden], [data-sin-acceso][hidden] { display: none !important; }

/* Tarjeta de Acceso Total en la tienda */
.acceso-total {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.2rem; border-radius: 1.2rem; margin-bottom: 1.25rem;
    background: linear-gradient(120deg, rgba(107, 90, 138, .35), rgba(52, 97, 67, .35) 60%, rgba(140, 109, 83, .3));
    border: 1px solid rgba(201, 164, 92, .4);
}
.acceso-total-texto { flex: 1 1 14rem; }
.boton-acceso { padding: .6rem 1.1rem; border-radius: .9rem; font-size: .8rem; font-weight: 700; color: #0c1a10;
    background: linear-gradient(135deg, #cfe0cf, #d9d2ea); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); white-space: nowrap; }
.boton-acceso:hover { filter: brightness(1.06); }
.chip-acceso { color: #0c1a10; background: linear-gradient(135deg, #cfe0cf, #d9d2ea); font-weight: 700; }

/* ---------- 2. Estilos de la app ---------- */


/* ---------- Enfoque · Hora del Té ---------- */
.pausa-duraciones { display: none; align-items: center; gap: .35rem; margin: -.6rem 0 .6rem; font-size: .72rem; color: rgba(191, 211, 191, .75); }
body.modo-pausa .pausa-duraciones { display: flex; }
.pausa-duraciones button {
    padding: .28rem .7rem; border-radius: 999px; border: 1px solid rgba(140, 174, 140, .28); color: #d7e3d7;
    background: rgba(13, 28, 18, .5); transition: background .2s, color .2s, border-color .2s;
}
.pausa-duraciones button:hover { border-color: rgba(232, 228, 241, .6); }
.pausa-duraciones button.activa { background: #E8E4F1; color: #10241a; border-color: #E8E4F1; font-weight: 600; }

/* Modo pausa minimalista: solo la taza, su nombre, el contador y su nota */
body.modo-pausa #columna-pendientes,
body.modo-pausa #panel-sonido,
body.modo-pausa #seccion-enfoque > div:first-child { display: none !important; }
@media (min-width: 768px) { body.modo-pausa #columna-reloj { width: 100%; max-width: 36rem; } }
body.modo-pausa #tarjeta-nota { background: transparent; border-color: transparent; box-shadow: none; gap: .7rem; }
body.modo-pausa #active-item-desc { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: .95rem; color: #e9e2d0; }
body.modo-pausa #tea-ingredients-box { text-align: center; background: transparent; border: 0; padding: 0; font-size: .78rem; }
.etiqueta-nota {
    display: block; font-family: system-ui, sans-serif; font-style: normal; font-size: .6rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: #c9a45c; margin-bottom: .25rem;
}

/* Tira con las 9 tazas */
#tea-nav-bar { border-bottom: 0 !important; margin-bottom: 0 !important; }
.tira-tes { flex: 1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(.15rem, 1vw, .35rem); padding: .35rem 0; }
.tira-taza {
    position: relative; width: 100%; aspect-ratio: 1; max-width: 3rem; justify-self: center; padding: 12%; border-radius: .7rem;
    border: 1px solid rgba(140, 174, 140, .18); background: rgba(13, 28, 18, .45); transition: transform .2s, border-color .2s;
}
.tira-taza svg { width: 100%; height: 100%; display: block; }
.tira-taza:hover { transform: translateY(-2px); border-color: rgba(232, 228, 241, .5); }
.tira-taza.elegida { border-color: #E8E4F1; background: rgba(232, 228, 241, .12); box-shadow: 0 0 0 2px rgba(232, 228, 241, .18); }
.tira-taza.bloqueada svg { filter: grayscale(.85) brightness(.6); opacity: .7; }
.tira-candado {
    position: absolute; right: -.2rem; bottom: -.2rem; font-size: .55rem; line-height: 1; padding: .15rem;
    border-radius: 999px; background: #1a2f22; border: 1px solid rgba(201, 164, 92, .6);
}
.tira-taza .tira-candado { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; padding: 0; color: #e1c07a; }
.tira-taza .tira-candado svg { width: .62rem; height: .62rem; filter: none; opacity: 1; }   /* el candado no debe heredar el 100 % de la taza */
.tira-flecha { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Precio de lanzamiento en la tienda */
.lanzamiento-sello { display: table; margin-bottom: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .7rem; letter-spacing: .02em;
    color: #f1eadb; background: rgba(140, 174, 140, .18); border: 1px solid rgba(201, 164, 92, .55); }
.lanzamiento-antes { margin-left: .45rem; font-size: .95rem; color: rgba(214, 205, 230, .6); text-decoration-thickness: 1px; }

/* Botones de pasarela (Casita): Mercado Pago y, si está configurado, PayPal */
.pasarelas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.pasarelas.pasarelas-una { grid-template-columns: 1fr; }
.pasarela {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    padding: .6rem .5rem; border-radius: .9rem; text-align: center; cursor: pointer;
    background: linear-gradient(180deg, #fbf7ef, #efe4d2); color: #3d2c20; border: 1px solid #c9a45c;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transition: transform .15s, box-shadow .15s;
}
.pasarela:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.pasarela:focus-visible { outline: 2px solid #c9b6ea; outline-offset: 2px; }
.pasarela svg { width: 1.35rem; height: 1.35rem; color: #274a33; }
.pasarela-nombre { font-weight: 800; font-size: .95rem; }
.pasarela-detalle { font-size: .66rem; color: #8c6d53; line-height: 1.25; }
.pago-usd, .precio-usd { color: #c9d8c9; font-weight: 400; }
.precio-usd { font-size: .95rem; }
.destacado-medios { font-size: .74rem; color: #b4cdb4; margin-top: .7rem; line-height: 1.45; }

.glass-panel {
    background: rgba(21, 41, 27, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(140, 174, 140, 0.2);
}
.glass-card {
    background: rgba(12, 26, 16, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(140, 174, 140, 0.15);
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(232, 228, 241, 0.4)); }
    50% { filter: drop-shadow(0 0 14px rgba(232, 228, 241, 0.8)); }
}
.animate-glow {
    animation: glowPulse 3s ease-in-out infinite;
}

/* ================= MI CASITA EN EL BOSQUE ================= */
.casita {
    position: relative;
    /* 9:16 que cabe tanto en ancho como en alto de pantalla */
    width: min(100%, calc(72vh * 9 / 16));
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    background: #1e140e;
    border: 1px solid rgba(140, 174, 140, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0,0,0,.4);
}
.casita > svg { display: block; width: 100%; height: 100%; }

/* Capas comprables: ocultas por defecto, visibles con la clase .activo
   (también funciona style.display = 'block' / 'none' desde JS) */
.casita .objeto { display: none; }
.casita .objeto.activo { display: block; }
.casita #chimenea.activo ~ #velas .repisa-velas { display: none; }

/* Animaciones suaves */
.casita .llama { transform-box: fill-box; transform-origin: 50% 100%; animation: casitaLlama 1.4s ease-in-out infinite; }
.casita .resplandor { animation: casitaResplandor 3.2s ease-in-out infinite; }
.casita .brasa { animation: casitaBrasa 2s ease-in-out infinite; }
.casita .niebla { animation: casitaNiebla 14s ease-in-out infinite alternate; }
.casita .niebla.lenta { animation-duration: 20s; animation-direction: alternate-reverse; }
.casita .estrella { animation: casitaEstrella 4s ease-in-out infinite; }
.casita .vapor { animation: casitaVapor 3s ease-in-out infinite; opacity: 0; }
@keyframes casitaLlama {
    0%, 100% { transform: scale(1, 1) skewX(0); }
    25% { transform: scale(.94, 1.07) skewX(2deg); }
    50% { transform: scale(1.04, .94) skewX(0); }
    75% { transform: scale(.97, 1.04) skewX(-2deg); }
}
@keyframes casitaResplandor { 0%, 100% { opacity: .85; } 35% { opacity: .65; } 60% { opacity: 1; } }
@keyframes casitaBrasa { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes casitaNiebla { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes casitaEstrella { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes casitaVapor { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .casita * { animation: none !important; } }

/* Tienda */
.tienda-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .9rem; }
.tienda-item.comprado { border-color: rgba(180, 205, 180, 0.35); }
.tienda-item.probando { border-color: rgba(232, 228, 241, 0.55); box-shadow: 0 0 0 1px rgba(232,228,241,.25); }

/* Papel tapiz, estantería con frascos */
.casita:has(#frascos-hongos.activo) .fila-2,
.casita:has(#frascos-hongos.activo) .fila-4,
.casita.con-frascos .fila-2, .casita.con-frascos .fila-4 { display: none; }

/* Gatos */
.casita .cola { animation: casitaCola 3.2s ease-in-out infinite; }
.casita .respira { transform-box: fill-box; transform-origin: 50% 100%; animation: casitaRespira 3.6s ease-in-out infinite; }
.casita .zzz { animation: casitaZzz 3.4s ease-in-out infinite; opacity: 0; }
@keyframes casitaCola { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(14deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(8deg); } }
@keyframes casitaRespira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.05); } }
@keyframes casitaZzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(-6px, -10px); } }

/* Paisajes */
.casita .copo { animation: casitaCopo 8s linear infinite; }
.casita .gota { animation: casitaGota .8s linear infinite; }
.casita .petalo { animation: casitaPetalo 9s linear infinite; }
.casita .relampago { opacity: 0; animation: casitaRelampago 11s linear infinite; }
.casita .nube { animation: casitaNiebla 18s ease-in-out infinite alternate; }
@keyframes casitaCopo { from { transform: translate(0, 0); } 50% { transform: translate(6px, 110px); } to { transform: translate(-2px, 220px); } }
@keyframes casitaGota { from { transform: translate(0, 0); } to { transform: translate(-22px, 230px); } }
@keyframes casitaPetalo { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(14px, 110px) rotate(180deg); } to { transform: translate(-6px, 220px) rotate(360deg); } }
@keyframes casitaRelampago { 0%, 93%, 100% { opacity: 0; } 94% { opacity: .55; } 95% { opacity: .05; } 96.5% { opacity: .4; } 98% { opacity: 0; } }

/* Visitantes */
.casita .parpado { transform-box: fill-box; transform-origin: 50% 0; animation: casitaParpadeo 5s ease-in-out infinite; }
@keyframes casitaParpadeo { 0%, 88%, 100% { transform: scaleY(0); } 92% { transform: scaleY(1); } }
.casita .ciervo-cabeza { transform-box: view-box; transform-origin: 204px 264px; animation: casitaCiervo 7s ease-in-out infinite; }
@keyframes casitaCiervo { 0%, 60%, 100% { transform: rotate(0); } 70%, 85% { transform: rotate(-9deg); } }
.casita .luciernaga { animation: casitaLuciernaga 7s ease-in-out infinite alternate; }
.casita .luciernaga .brillo { animation: casitaEstrella 2.4s ease-in-out infinite; }
@keyframes casitaLuciernaga { 0% { transform: translate(0, 0); } 33% { transform: translate(6px, -8px); } 66% { transform: translate(-5px, -3px); } 100% { transform: translate(3px, 6px); } }
.casita .polilla { animation: casitaPolilla 7s ease-in-out infinite; }
.casita .alas { transform-box: fill-box; transform-origin: 50% 50%; animation: casitaAlas .22s ease-in-out infinite alternate; }
@keyframes casitaPolilla { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(10px, -6px); } 50% { transform: translate(4px, 8px); } 75% { transform: translate(-8px, 2px); } }
@keyframes casitaAlas { from { transform: scaleX(1); } to { transform: scaleX(.45); } }

/* Lámpara y tocadiscos */
.casita .resplandor.lento { animation-duration: 6s; }
.casita .gira { transform-box: fill-box; transform-origin: 50% 50%; animation: casitaGira 1.8s linear infinite; }
@keyframes casitaGira { to { transform: rotate(360deg); } }
.casita .nota { animation: casitaNota 4s ease-in-out infinite; opacity: 0; }
@keyframes casitaNota { 0% { opacity: 0; transform: translate(0, 6px); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(8px, -22px); } }

/* ================= MUÑEQUITA ================= */
.casita {
    --pelo: #4a2e1d; --pelo-sombra: #33200f; --pelo-brillo: #6b4630;
    --ojos: #c98a1b;
    --piel: #e0ae86; --piel-sombra: #c9926a;
}
.casita .c-pelo { fill: var(--pelo); }
.casita .c-pelo-sombra { fill: var(--pelo-sombra); }
.casita .c-pelo-brillo { stroke: var(--pelo-brillo); }
.casita .c-cejas { stroke: var(--pelo-sombra); }
.casita .c-ojos { fill: var(--ojos); }
.casita .c-piel { fill: var(--piel); }
.casita .c-piel-sombra { fill: var(--piel-sombra); }
.casita .c-piel-rubor { fill: var(--piel-rubor, #e8858a); }
.casita .c-piel-sombra-trazo { stroke: var(--piel-sombra); }

/* Solo se ve la textura de cabello y el atuendo elegidos (data-pelo / data-ropa en #casita) */
.casita .pelo, .casita .ropa { display: none; }
/* Género del personaje (data-genero en #casita): rasgos y prendas de cada uno */
.casita:not([data-genero="masculino"]) .solo-m,
.casita[data-genero="masculino"] .solo-f { display: none; }
.casita[data-pelo="liso"] .pelo-liso,
.casita[data-pelo="ondulado"] .pelo-ondulado,
.casita[data-pelo="rizado"] .pelo-rizado,
.casita[data-pelo="afro"] .pelo-afro,
.casita[data-pelo="mono-jardin"] .pelo-mono-jardin,
.casita[data-pelo="trenza-boho"] .pelo-trenza-boho,
.casita[data-pelo="corto"] .pelo-corto,
.casita[data-pelo="media-melena"] .pelo-media-melena,
.casita[data-pelo="rastas"] .pelo-rastas,
.casita[data-pelo="rizos-cortos"] .pelo-rizos-cortos,
.casita[data-pelo="mono"] .pelo-mono,
.casita[data-pelo="ondas"] .pelo-ondas,
.casita[data-ropa="otono"] .ropa-otono,
.casita[data-ropa="lavanda"] .ropa-lavanda,
.casita[data-ropa="trapecio"] .ropa-trapecio,
.casita[data-ropa="rosa"] .ropa-rosa,
.casita[data-ropa="polo"] .ropa-polo,
.casita[data-ropa="trabajo"] .ropa-trabajo,
.casita[data-ropa="musgo"] .ropa-musgo { display: block; }
/* Calzado (Zapatos Mary Jane): reemplaza los zapatos del atuendo */
.casita .calzado { display: none; }
.casita[data-calzado="mary-jane"] .calzado-mary-jane { display: block; }
.casita[data-calzado="mary-jane"]:not([data-genero="masculino"]) .zapatos-base { display: none; }

.casita .parpadeo { transform-box: fill-box; transform-origin: 50% 50%; animation: casitaParpadeoM 6s ease-in-out infinite; }
@keyframes casitaParpadeoM { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.casita .muneca-respira { transform-box: view-box; transform-origin: 225px 480px; animation: casitaRespiraM 4.5s ease-in-out infinite; }
@keyframes casitaRespiraM { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.008, 1.012); } }

/* ================= POSES =================
   Cambia la clase de #personaje:  pose-de-pie · pose-ventana · pose-leyendo
   (en SVG usa setAttribute('class', ...) o classList; o simplemente Casita.pose('leyendo')) */
.casita .pose { display: none; }
.casita #personaje.pose-de-pie > .pose-de-pie,
.casita #personaje.pose-ventana > .pose-ventana,
.casita #personaje.pose-leyendo > .pose-leyendo,
.casita #personaje-frente.pose-leyendo > .pose-leyendo,
.casita:has(#personaje.pose-leyendo) #personaje-frente > .pose-leyendo { display: block; }
.casita:has(#personaje:not(.pose-leyendo)) #personaje-frente > .pose-leyendo { display: none; }

/* Trazos del color del cabello (tirabuzones) */
.casita .c-pelo-trazo { stroke: var(--pelo); fill: none; }

/* El gato, un poco más pequeño para que quede proporcional a la muñequita */
.casita .gato { transform-box: view-box; transform-origin: 232px 484px; transform: scale(.82); }

/* ================= INTERACCIONES (Pase Premium) ================= */
.casita .hoja-ventana { transform-box: view-box; transition: transform 1.1s cubic-bezier(.4,.1,.2,1); }
.casita .hoja-izq { transform-origin: 132px 200px; }
.casita .hoja-der { transform-origin: 228px 200px; }
.casita.ventana-abierta .hoja-izq, .casita.ventana-abierta .hoja-der { transform: scaleX(.14); }
.casita #maceta-menta { transform-box: fill-box; transform-origin: 50% 100%; }
.casita.regando #maceta-menta { animation: casitaCrecerMenta 1.8s ease .6s; }
@keyframes casitaCrecerMenta { 40% { transform: scale(1.08); } }
.casita .flores-menta, .casita .rocio-menta { opacity: 0; transition: opacity .9s; }
.casita.plantas-regadas .rocio-menta, .casita.plantas-florecidas .flores-menta { opacity: 1; }
.casita.plantas-regadas .hojas-menta { filter: saturate(1.25) brightness(1.08); }
.casita.gato-feliz .gato .cola { animation-duration: .7s !important; }
.casita.gato-feliz .gato .zzz { display: none; }
.casita .gato { cursor: pointer; }
.casita .corazon-sube { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: casitaCorazon 2.3s ease-out forwards; }
@keyframes casitaCorazon { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) scale(1.1); } }
.casita .ronroneo { opacity: 0; animation: casitaRonroneo 2.4s ease forwards; }
@keyframes casitaRonroneo { 20%, 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
.casita .hoja-brisa { opacity: 0; transform-box: fill-box; animation: casitaBrisa 4.6s ease-in forwards; }
@keyframes casitaBrisa { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-130px, 190px) rotate(300deg); } }
.casita .regadera-anim { opacity: 0; transform-box: fill-box; transform-origin: 85% 40%; animation: casitaRegadera 2.3s ease forwards; }
@keyframes casitaRegadera { 0% { opacity: 0; transform: translateY(-10px); } 15% { opacity: 1; transform: rotate(0); } 30%, 78% { opacity: 1; transform: rotate(-30deg); } 100% { opacity: 0; transform: rotate(0); } }
.casita .gota-cae { opacity: 0; animation: casitaGota .8s ease-in 3; }
@keyframes casitaGota { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
/* ================= FASE 2 · El Susurro de la Hiedra =================
   Tablero kanban · semillas y monedas · diario con íconos · crecimiento de hongos ·
   Ritual del Té · interacciones de la casita · La vida en el bosque · paseo */
:root {
    --f2-bosque: #0c1a10;
    --f2-panel: rgba(21, 41, 27, .78);
    --f2-tarjeta: rgba(12, 26, 16, .62);
    --f2-borde: rgba(180, 205, 180, .18);
    --f2-texto: #f5f0eb;
    --f2-suave: #b4cdb4;
    --f2-tenue: rgba(180, 205, 180, .7);
    --f2-oro: #c9a45c;
    --f2-oro-claro: #f3dca0;
    --f2-lavanda: #E8E4F1;
}

/* ---------- Íconos y divisas ---------- */
.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: none; }
.ico-grande { width: 1.6em; height: 1.6em; }
.bolsa { display: inline-flex; align-items: center; gap: .1rem; padding: .2rem .35rem; border-radius: 999px; font-size: 11px; color: #d7e4d7; }
.divisa { display: inline-flex; align-items: center; gap: .28rem; padding: .12rem .45rem; border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 600; }
.divisa .ico { width: 1.15rem; height: 1.15rem; }
.bolsa .divisa + .divisa:not([hidden]) { border-left: 1px solid var(--f2-borde); border-radius: 0 999px 999px 0; }
.divisa-inline { display: inline-flex; align-items: center; gap: .18rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bolsa-semillas.late { animation: f2Latido .9s ease; }
@keyframes f2Latido { 30% { transform: scale(1.18); } 60% { transform: scale(.96); } }
@media (max-width: 420px) { .bolsa { font-size: 10px; } .divisa { padding: .1rem .3rem; } }

/* Recompensa flotante (pausa con té, sesión completada) */
.recompensa-flotante {
    position: fixed; top: calc(1rem + env(safe-area-inset-top)); left: 50%; z-index: 70;
    display: flex; align-items: center; gap: .8rem; width: min(92vw, 23rem); padding: .8rem 1rem;
    border-radius: 1.1rem; background: linear-gradient(180deg, rgba(29, 56, 38, .97), rgba(16, 34, 22, .97));
    border: 1px solid rgba(201, 164, 92, .55); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    transform: translate(-50%, -140%); opacity: 0; transition: transform .5s cubic-bezier(.2, .9, .3, 1.2), opacity .4s;
}
.recompensa-flotante.visible { transform: translate(-50%, 0); opacity: 1; }
.recompensa-semilla { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(243, 220, 160, .25), transparent 70%); }
.recompensa-semilla .ico { width: 2.1rem; height: 2.1rem; animation: f2Brotar 1.2s ease; }
.recompensa-titulo { font-family: Georgia, serif; color: var(--f2-texto); font-size: .95rem; }
.recompensa-texto { font-size: .72rem; color: var(--f2-tenue); }
.recompensa-cifra { margin-left: auto; font-family: Georgia, serif; font-size: 1.5rem; color: var(--f2-oro-claro); }
@keyframes f2Brotar { 0% { transform: scale(.4) translateY(8px); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* Fin de sesión: bolsita de semillas */
.recompensa-sesion { display: flex; flex-direction: column; align-items: center; margin-bottom: .8rem; }
.sesion-semilla { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, rgba(243, 220, 160, .22), rgba(140, 174, 140, .08) 60%, transparent 72%);
    border: 1px solid rgba(201, 164, 92, .35); }
.sesion-semilla .ico { width: 3rem; height: 3rem; animation: f2Brotar 1.4s ease; }
.sesion-cifra { margin-top: .4rem; font-family: Georgia, serif; font-size: 1.35rem; color: var(--f2-oro-claro); }
.sesion-sub { font-size: .7rem; color: var(--f2-tenue); }

/* ---------- Diario: categorías con ícono ---------- */
.categorias-diario { display: flex; flex-wrap: wrap; gap: .35rem; }
.categoria-ficha {
    display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .65rem; border-radius: 999px;
    font-size: .7rem; color: #d7e4d7; border: 1px solid var(--f2-borde); background: rgba(12, 26, 16, .5); transition: all .2s;
}
.categoria-ficha .ico { width: 1.05rem; height: 1.05rem; color: var(--cat); }
.categoria-ficha:hover { border-color: var(--cat); }
.categoria-ficha.activa { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 18%, transparent); color: var(--f2-texto); }
.categoria-etiqueta { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; padding: .15rem .55rem; border-radius: 999px;
    color: var(--f2-texto); background: color-mix(in srgb, var(--cat) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cat) 45%, transparent); }
.categoria-etiqueta .ico { color: var(--cat); width: 1rem; height: 1rem; }
#journal-manual-form .categorias-diario { justify-content: flex-end; }
#session-reflection-form .categorias-diario { justify-content: center; }

/* ---------- Enfoque: crecimiento del hongo ---------- */
.etapa-hongo { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--f2-oro); margin-bottom: .2rem; }
#active-visual-wrapper.brotar svg { animation: f2Brotar .9s ease; }
.crecimiento-hongo .espora { animation: f2Espora 3s ease-in-out infinite; opacity: 0; }
@keyframes f2Espora { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ---------- Ahora mismo + sonido ---------- */
.ahora-lista { display: flex; flex-direction: column; gap: .45rem; }
.ahora-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: .8rem; background: var(--f2-tarjeta);
    border: 1px solid var(--f2-borde); border-left: 3px solid var(--tipo); font-size: .78rem; color: var(--f2-texto); }
.ahora-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ahora-ico { color: var(--tipo); }
.ahora-vacio { font-size: .74rem; color: var(--f2-tenue); line-height: 1.5; }
.musica-titulo { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--f2-tenue); margin: .75rem 0 .4rem; }

/* ---------- Tablero kanban ---------- */
.tablero { margin-top: 1.5rem; border-radius: 1.25rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid rgba(180, 205, 180, .2); }
.tablero-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.tablero-nueva { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.tablero-nueva input { flex: 1 1 14rem; min-width: 0; padding: .6rem .85rem; border-radius: .8rem; font-size: .8rem; color: var(--f2-texto);
    background: rgba(12, 26, 16, .85); border: 1px solid var(--f2-borde); }
.tablero-nueva input::placeholder { color: rgba(180, 205, 180, .45); }
.tablero-nueva input:focus, .tablero-nueva select:focus, .tarea-editar-texto:focus, .tarea-select:focus { outline: 2px solid rgba(232, 228, 241, .5); outline-offset: 1px; }
.tablero-nueva select, .tarea-select { padding: .55rem .7rem; border-radius: .8rem; font-size: .78rem; color: var(--f2-texto); background: #10241a; border: 1px solid var(--f2-borde); }
.tablero-nueva button { padding: .55rem 1.1rem; border-radius: .8rem; font-size: .8rem; font-weight: 600; color: #0c1a10; background: var(--f2-suave); }
.tablero-nueva button:hover { background: var(--f2-lavanda); }
.tablero-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.filtro-tarea { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: 999px; font-size: .7rem; color: #d7e4d7;
    border: 1px solid var(--f2-borde); background: rgba(12, 26, 16, .45); }
.filtro-tarea .ico { color: var(--tipo); }
.filtro-tarea.activo { background: var(--f2-suave); color: #0c1a10; border-color: var(--f2-suave); }
.filtro-tarea.activo .ico { color: #0c1a10; }
.tablero-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.columna-tablero { min-width: 0; display: flex; flex-direction: column; border-radius: 1rem; padding: .7rem; background: rgba(12, 26, 16, .45);
    border: 1px dashed transparent; transition: border-color .2s, background .2s; }
.columna-tablero.columna-sobre { border-color: rgba(232, 228, 241, .55); background: rgba(232, 228, 241, .06); }
.columna-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 0 .2rem .55rem; }
.columna-cabeza h3 { font-family: Georgia, serif; font-size: .95rem; color: var(--f2-texto); font-weight: 400; }
.columna-cuenta { font-size: .68rem; min-width: 1.5rem; text-align: center; padding: .1rem .4rem; border-radius: 999px; background: rgba(180, 205, 180, .14); color: var(--f2-suave); font-variant-numeric: tabular-nums; }
.columna-lista { display: flex; flex-direction: column; gap: .5rem; min-height: 4rem; flex: 1; }
.columna-vacia { font-size: .72rem; color: rgba(180, 205, 180, .5); padding: .8rem .4rem; text-align: center; border: 1px dashed var(--f2-borde); border-radius: .8rem; }
.tarea { border-radius: .85rem; padding: .6rem .65rem .5rem; background: var(--f2-panel); border: 1px solid var(--f2-borde); border-left: 3px solid var(--tipo, var(--f2-suave));
    cursor: grab; transition: transform .15s, box-shadow .15s, opacity .15s; }
.tarea:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.tarea.arrastrando { opacity: .4; }
.tarea.hecha .tarea-texto { text-decoration: line-through; color: rgba(180, 205, 180, .55); }
.tarea-fila { display: flex; gap: .5rem; align-items: flex-start; }
.tarea-check { flex: none; width: 1.3rem; height: 1.3rem; color: var(--f2-suave); margin-top: .05rem; }
.tarea-check svg { width: 100%; height: 100%; }
.tarea-check:hover { color: var(--f2-lavanda); }
.tarea-texto { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.45; color: var(--f2-texto); overflow-wrap: anywhere; cursor: text; }
.tarea-pie { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .45rem; }
.tarea-tipo { display: inline-flex; align-items: center; gap: .25rem; font-size: .64rem; color: var(--f2-tenue); }
.tarea-tipo .ico { color: var(--tipo); }
.tarea-acciones { display: inline-flex; gap: .1rem; }
.tarea-acciones button { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: .5rem; color: var(--f2-tenue); font-size: 1rem; line-height: 1; }
.tarea-acciones button:hover:not(:disabled) { background: rgba(180, 205, 180, .14); color: var(--f2-texto); }
.tarea-acciones button:disabled { opacity: .25; }
.tarea-acciones [data-borrar]:hover { color: #f4a3a3 !important; }
.tarea.editando { cursor: default; border-left-color: var(--f2-lavanda); }
.tarea-editar { display: flex; flex-direction: column; gap: .5rem; }
.tarea-editar-texto { width: 100%; resize: vertical; min-height: 3.2rem; padding: .5rem .6rem; border-radius: .6rem; font-size: .8rem; color: var(--f2-texto); background: #0c1a10; border: 1px solid var(--f2-borde); }
.tarea-editar-fila { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tarea-editar-fila .tarea-select { flex: 1; min-width: 6rem; padding: .35rem .5rem; }
.tarea-btn, .tarea-btn-sec { padding: .35rem .7rem; border-radius: .6rem; font-size: .72rem; font-weight: 600; }
.tarea-btn { background: var(--f2-suave); color: #0c1a10; }
.tarea-btn-sec { color: var(--f2-suave); border: 1px solid var(--f2-borde); }
.tablero-ayuda { margin-top: .8rem; font-size: .66rem; color: rgba(180, 205, 180, .55); }
@media (max-width: 767px) {
    .tablero-columnas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .7rem; padding-bottom: .4rem; margin-inline: -.25rem; padding-inline: .25rem; }
    .columna-tablero { flex: 0 0 82%; scroll-snap-align: start; }
}
body.modo-pausa #tablero-tareas { display: none !important; }

/* ---------- El Ritual del Té ---------- */
.ritual { width: 100%; max-width: 40rem; margin: 0 auto 1rem; padding: clamp(.9rem, 3vw, 1.4rem); border-radius: 1.4rem;
    background: radial-gradient(120% 100% at 50% 0%, rgba(201, 164, 92, .12), transparent 60%), rgba(16, 34, 22, .8);
    border: 1px solid rgba(201, 164, 92, .35); }
body.ritual-activo #columna-reloj .reloj-fluido,
body.ritual-activo #tarjeta-nota,
body.ritual-activo #controles-reloj { display: none !important; }
body.ritual-servido #tea-nav-bar { display: none !important; }
.ritual-servido-nota { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--f2-oro-claro); margin: -.2rem 0 .4rem; }
.ritual-servido-nota[hidden] { display: none; }
.ritual-cabeza { text-align: center; margin-bottom: 1rem; }
.ritual-eyebrow { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--f2-oro); }
.ritual-titulo { font-family: Georgia, serif; font-size: clamp(1.15rem, 3.6vw, 1.5rem); color: var(--f2-texto); margin-top: .2rem; text-wrap: balance; }
.ritual-sub { font-size: .76rem; color: var(--f2-tenue); margin-top: .3rem; text-wrap: balance; }
.ritual-sub .ico { width: 1rem; height: 1rem; }
.recetario { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.receta-item { display: flex; flex-direction: column; gap: .35rem; }
.receta { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .5rem .6rem; border-radius: 1rem; text-align: center;
    background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); transition: transform .2s, border-color .2s, background .2s; height: 100%; }
.receta:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(232, 228, 241, .55); background: rgba(232, 228, 241, .06); }
.receta.ultima { border-color: rgba(201, 164, 92, .55); }
.receta:disabled { opacity: .55; cursor: not-allowed; }
.receta-taza { width: 3.6rem; height: 3.6rem; }
.receta-taza svg { width: 100%; height: 100%; }
.receta-nombre { font-family: Georgia, serif; font-size: .82rem; color: var(--f2-texto); line-height: 1.25; }
.receta-ings { display: flex; gap: .15rem; }
.receta-estado { font-size: .62rem; color: var(--f2-tenue); }
.receta-estado.ok { color: #a7d3a7; }
.receta-estado.falta { color: #f2b8a0; }
.receta-comprar { font-size: .66rem; padding: .35rem .5rem; border-radius: .7rem; color: #0c1a10; background: var(--f2-oro-claro); font-weight: 600; }
.receta-comprar:disabled { opacity: .5; }
.ritual-mas { display: block; margin: .9rem auto 0; font-size: .72rem; padding: .4rem .8rem; border-radius: 999px; }
.ritual-saltar { display: block; margin: .8rem auto 0; font-size: .72rem; color: var(--f2-tenue); text-decoration: underline; text-underline-offset: 3px; }
.ritual-saltar:disabled { opacity: .35; }
.ritual-mesa { display: grid; grid-template-columns: 1fr; gap: .8rem; align-items: center; }
@media (min-width: 640px) { .ritual-mesa { grid-template-columns: 1.3fr 1fr; } }
.ritual-escena-caja { border-radius: 1.1rem; background: radial-gradient(circle at 40% 70%, rgba(201, 164, 92, .14), rgba(12, 26, 16, .4) 70%); border: 1px solid var(--f2-borde); }
.ritual-escena-caja.recibe { animation: f2Recibe .5s ease; }
@keyframes f2Recibe { 40% { box-shadow: 0 0 0 4px rgba(243, 220, 160, .35) inset; } }
.ritual-escena { width: 100%; height: auto; display: block; }
.ritual-ingredientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ritual-ing { position: relative; width: 100%; display: flex; align-items: center; gap: .45rem; padding: .5rem .55rem; border-radius: .9rem; font-size: .72rem; text-align: left;
    color: var(--f2-texto); background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); cursor: grab; touch-action: none; transition: transform .2s, opacity .3s; }
.ritual-ing:hover:not(:disabled) { border-color: rgba(232, 228, 241, .5); transform: translateY(-2px); }
.ritual-ing.puesto { opacity: .35; cursor: default; }
.ritual-ing.arrastrando { opacity: .3; }
.ritual-ing.raro { border-color: rgba(201, 164, 92, .45); }
.ritual-raro { position: absolute; top: .2rem; right: .4rem; color: var(--f2-oro); font-size: .7rem; }
.ritual-fantasma { position: fixed; z-index: 80; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg); width: auto; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.ritual-acciones { display: flex; flex-direction: column; align-items: center; margin-top: 1rem; }
.ritual-boton { min-width: 14rem; padding: .8rem 1.4rem; border-radius: 1rem; font-weight: 700; font-size: .9rem; color: #0c1a10;
    background: linear-gradient(135deg, #f3dca0, #b4cdb4); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); transition: transform .2s, opacity .2s; }
.ritual-boton:hover:not(:disabled) { transform: translateY(-2px); }
.ritual-boton:disabled { opacity: .55; }
/* tetera de vidrio: estados del ritual */
.ritual-escena .tetera-liquido { fill: rgba(200, 225, 240, .35); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.ritual-escena .ing-dentro { transform-box: fill-box; transform-origin: 50% 50%; animation: f2Flotar 4.6s ease-in-out var(--d, 0s) infinite alternate; }
.ritual-escena .ing-dentro.nuevo { animation: f2CaerIng .95s cubic-bezier(.3, .6, .35, 1) both, f2Flotar 4.6s ease-in-out .95s infinite alternate; }
@keyframes f2CaerIng { 0% { transform: translate(18px, -86px) rotate(-40deg) scale(.7); opacity: 0; } 18% { opacity: 1; } 78% { transform: translate(0, 3px) rotate(6deg) scale(1.05); } 100% { transform: none; } }
@keyframes f2Flotar { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-1.6px) rotate(5deg); } }
.ritual-escena .salpica { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: f2Salpica .7s ease-out .75s; }
@keyframes f2Salpica { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
.ritual-escena .vapor-tetera { opacity: 0; transition: opacity 1s; }
.paso-reposando .vapor-tetera, .paso-listo .vapor-tetera { opacity: 1; }
.ritual-escena .tetera-tapa { transform-box: fill-box; transform-origin: 100% 100%; transform: translate(-8px, -14px) rotate(-18deg); transition: transform .5s; }
.ritual-escena .hervidor, .ritual-escena .chorro, .ritual-escena .vertido { opacity: 0; }
.ritual-escena .taza-te-liquido { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); opacity: 0; }
.ritual-escena .taza-te-vapor { opacity: 0; transition: opacity 1.2s; }
.ritual-escena .vapor-ritual { opacity: 0; transition: opacity 1.2s; }
.paso-vertiendo .hervidor { animation: f2Aparece 1.9s ease forwards; }
.paso-vertiendo .chorro { animation: f2Chorro 1.9s ease forwards; }
.paso-vertiendo .tetera-liquido { animation: f2Llenar 1.9s ease forwards; }
@keyframes f2Aparece { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes f2Chorro { 0%, 15% { opacity: 0; } 25%, 80% { opacity: .9; } 100% { opacity: 0; } }
@keyframes f2Llenar { 0%, 20% { transform: scaleY(0); } 100% { transform: scaleY(.82); } }
.paso-reposando .tetera-liquido, .paso-listo .tetera-liquido, .paso-sirviendo .tetera-liquido { transform: scaleY(.82); }
.paso-reposando .tetera-liquido { animation: f2Tenir 2.6s ease forwards; }
.paso-listo .tetera-liquido { fill: var(--te); opacity: .85; }
.paso-reposando .tetera-tapa, .paso-listo .tetera-tapa, .paso-sirviendo .tetera-tapa { transform: none; }
@keyframes f2Tenir { from { fill: rgba(200, 225, 240, .35); } to { fill: var(--te); opacity: .85; } }

.paso-sirviendo .tetera-liquido { fill: var(--te); opacity: .85; animation: f2Vaciar 1.7s ease forwards; }
.paso-sirviendo .vertido { animation: f2Chorro 1.7s ease forwards; }
.paso-sirviendo .taza-te-liquido { animation: f2LlenarTaza 1.7s ease forwards; }
.paso-sirviendo .taza-te-vapor { opacity: 1; transition-delay: 1s; }
.paso-sirviendo .vapor-ritual { opacity: 1; }
@keyframes f2Vaciar { 0%, 25% { transform: scaleY(.82); } 100% { transform: scaleY(.35); } }
@keyframes f2LlenarTaza { 0%, 30% { transform: scale(0); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Casita: panel ocultable e interacciones ---------- */
.casita-contenido { position: relative; }
.panel-casita-boton { position: absolute; top: .7rem; right: .7rem; z-index: 4; display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem; border-radius: 999px; font-size: .7rem; color: #d7e4d7; background: rgba(12, 26, 16, .75); border: 1px solid var(--f2-borde); }
.panel-casita-boton:hover { color: var(--f2-lavanda); border-color: rgba(232, 228, 241, .5); }
.casita-contenido.panel-oculto > aside { display: none !important; }
.casita-contenido.panel-oculto .casita-columna-escena { width: 100%; }
.casita-contenido.panel-oculto .casita-marco { max-width: 26rem; margin-inline: auto; }
@media (max-width: 767px) {
    .panel-casita-boton { position: static; order: 2; align-self: center; }
    .casita-contenido > .casita-columna-escena { order: 1; }
    .casita-contenido > aside { order: 3; }
}
.casita-interacciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; width: 100%; }
.casita-interacciones[hidden] { display: none !important; }
.interaccion { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; font-size: .74rem; color: var(--f2-texto);
    background: rgba(12, 26, 16, .6); border: 1px solid var(--f2-borde); transition: transform .2s, border-color .2s; }
.interaccion:hover { transform: translateY(-2px); border-color: rgba(232, 228, 241, .5); }

/* ---------- La vida en el bosque ---------- */
.bosque { margin-top: 1.4rem; border-radius: 1.4rem; padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid rgba(201, 164, 92, .3); }
.bosque[hidden] { display: none !important; }
.bosque-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.bosque-divisas { display: flex; gap: .4rem; }
.bosque-divisas .divisa { padding: .3rem .7rem; background: rgba(12, 26, 16, .6); border: 1px solid var(--f2-borde); color: var(--f2-texto); }
.bosque-pestanas { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .2rem; margin-bottom: 1rem; border-bottom: 1px solid var(--f2-borde); }
.bosque-pestanas button { flex: none; padding: .5rem .95rem; font-size: .8rem; color: var(--f2-tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bosque-pestanas button.activa { color: var(--f2-texto); border-bottom-color: var(--f2-oro); }
.bosque-titulo { font-family: Georgia, serif; font-size: 1.15rem; color: var(--f2-texto); margin-bottom: .3rem; }
.bosque-texto { font-size: .78rem; color: var(--f2-tenue); line-height: 1.55; max-width: 38rem; }
.bosque-vacio { font-size: .74rem; color: rgba(180, 205, 180, .55); }
.bosque-boton { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .7rem 1.2rem; border-radius: .9rem; font-weight: 700; font-size: .82rem;
    color: #0c1a10; background: linear-gradient(135deg, #f3dca0, #b4cdb4); transition: transform .2s, opacity .2s; }
.bosque-boton:hover:not(:disabled) { transform: translateY(-2px); }
.bosque-boton:disabled { opacity: .45; cursor: not-allowed; }
.bosque-boton.pequeno { padding: .42rem .75rem; font-size: .72rem; border-radius: .7rem; }
.bosque-boton.sec { background: transparent; color: var(--f2-suave); border: 1px solid var(--f2-borde); }
.bosque-boton .ico { width: 1rem; height: 1rem; }
.bosque-paseo { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 720px) { .bosque-paseo { grid-template-columns: 1fr 1.1fr; } }
.paseo-portada { border-radius: 1rem; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; border: 1px solid var(--f2-borde); }
.paseo-portada svg, .paseo-portada-lienzo { display: block; width: 100%; height: 100%; }
.paseo-datos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .9rem 0 1rem; }
.paseo-datos li { display: flex; flex-direction: column; padding: .5rem .65rem; border-radius: .8rem; background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); }
.paseo-datos span { font-size: .62rem; color: var(--f2-tenue); text-transform: uppercase; letter-spacing: .12em; }
.paseo-datos strong { font-size: .85rem; color: var(--f2-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.inventario-grid { display: flex; flex-direction: column; gap: 1.3rem; margin-top: .8rem; }
.inventario-grupo h4, .tiendita-seccion h4 { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--f2-oro); margin-bottom: .5rem; }
.inventario-lista { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.inventario-item { display: flex; align-items: center; gap: .7rem; padding: .8rem; border-radius: 1rem; background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); min-height: 4.2rem; }
.inventario-item > svg { flex: none; }
.inventario-nombre { flex: 1; min-width: 0; font-family: Georgia, serif; font-size: .9rem; color: var(--f2-texto); display: flex; flex-direction: column; gap: .15rem; }
.inventario-nombre small { font-family: inherit; font-size: .68rem; color: var(--f2-tenue); }
.inventario-item .inventario-cant { font-size: .85rem; }
.inventario-item .bosque-boton { flex: none; white-space: nowrap; }
/* tarjetas con botón (cestas y herramientas): el botón va debajo del nombre, sin apretar el texto */
.inventario-item:has(.bosque-boton) { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; row-gap: .5rem; align-items: center; }
.inventario-item:has(.bosque-boton) > svg { grid-row: span 2; }
.inventario-item:has(.bosque-boton) .bosque-boton { grid-column: 2; justify-self: start; margin-left: 0 !important; }
.cesta-serie { cursor: default; opacity: .9; }
.paseo-cesta-dato strong { display: inline-flex; align-items: center; gap: .35rem; }
.paseo-cesta-dato strong svg { flex: none; }
.inventario-cant { font-size: .74rem; color: var(--f2-suave); font-variant-numeric: tabular-nums; }
.cocina-lista { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: .8rem; }
.cocina-receta { display: flex; flex-direction: column; gap: .55rem; padding: .8rem; border-radius: 1rem; background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); }
.cocina-receta.falta { opacity: .75; }
.cocina-receta.cocinando .ingrediente-svg { animation: f2Burbuja .5s ease-in-out infinite alternate; }
@keyframes f2Burbuja { to { transform: translateY(-3px) scale(1.06); } }
.cocina-producto { display: flex; gap: .6rem; align-items: center; }
.cocina-nombre { font-family: Georgia, serif; font-size: .9rem; color: var(--f2-texto); }
.cocina-venta { font-size: .68rem; color: var(--f2-tenue); }
.cocina-ingredientes { display: flex; flex-wrap: wrap; gap: .35rem; }
.cocina-ingredientes li { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; padding: .15rem .45rem; border-radius: 999px; color: #f2b8a0; background: rgba(12, 26, 16, .5); font-variant-numeric: tabular-nums; }
.cocina-ingredientes li.ok { color: #a7d3a7; }
.cocina-receta .bosque-boton { align-self: flex-start; }
.tiendita-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tiendita-saldo { font-size: .8rem; color: var(--f2-tenue); display: inline-flex; gap: .35rem; align-items: center; }
.tiendita-saldo .divisa-inline { color: var(--f2-oro-claro); font-size: 1rem; }
.tiendita-seccion { margin-top: 1.1rem; }
.tiendita-lista { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.tiendita-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: .9rem; background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); }
.tiendita-info { flex: 1; min-width: 0; font-size: .8rem; color: var(--f2-texto); }
.tiendita-sub { font-size: .66rem; color: var(--f2-tenue); line-height: 1.4; }
.tiendita-acciones { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.tiendita-tuyo { font-size: .66rem; color: var(--f2-suave); text-align: right; max-width: 7rem; }
.tiendita-acciones .ico, .cocina-venta .ico, .receta-comprar .ico { width: .95rem; height: .95rem; }

/* ---------- Paseo (minijuego) ---------- */
.paseo-modal { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 14, 9, .82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.paseo-modal[hidden] { display: none !important; }
.paseo-panel { width: min(100%, 48rem); max-height: calc(100dvh - 2rem); overflow: auto; border-radius: 1.4rem; padding: 1rem; background: #10241a; border: 1px solid rgba(201, 164, 92, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.paseo-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.paseo-cerrar { width: 2rem; height: 2rem; border-radius: 50%; color: var(--f2-suave); }
.paseo-cerrar:hover { background: rgba(180, 205, 180, .12); }
.paseo-hud { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; font-size: .78rem; color: var(--f2-texto); font-variant-numeric: tabular-nums; }
.paseo-tiempo { display: inline-flex; align-items: center; gap: .5rem; flex: 1; }
.paseo-barra-fondo { flex: 1; max-width: 14rem; height: .4rem; border-radius: 999px; background: rgba(180, 205, 180, .15); overflow: hidden; }
.paseo-barra { display: block; height: 100%; background: linear-gradient(90deg, #8cae8c, #f3dca0); border-radius: inherit; transition: width .3s linear; }
.paseo-cesta { display: inline-flex; align-items: center; gap: .3rem; }
.paseo-lienzo { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 14rem; max-height: 60dvh; border-radius: 1rem; touch-action: manipulation; cursor: pointer; background: #132a1c; }
.paseo-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; }
.paseo-conteo { display: flex; gap: .35rem; flex-wrap: wrap; }
.paseo-ficha { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; padding: .15rem .5rem; border-radius: 999px; background: var(--f2-tarjeta); color: var(--f2-texto); font-variant-numeric: tabular-nums; }
.paseo-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.paseo-ayuda { margin-top: .5rem; font-size: .66rem; color: rgba(180, 205, 180, .55); }
.paseo-resumen { text-align: center; padding: 1rem 0 .4rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.paseo-resumen[hidden], #paseo-juego[hidden] { display: none !important; }
.paseo-resumen-lista { display: grid; gap: .4rem; width: min(100%, 22rem); }
.paseo-resumen-lista li { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: .8rem; background: var(--f2-tarjeta); font-size: .82rem; color: var(--f2-texto); }
.paseo-resumen-lista li span { flex: 1; text-align: left; }
body.paseo-abierto { overflow: hidden; }

/* ---------- Logros: dos requisitos ---------- */
.requisitos-logro { display: flex; flex-direction: column; gap: .25rem; margin-top: .6rem; }
.requisitos-logro li { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: rgba(180, 205, 180, .7); }
.requisitos-logro .req-marca { width: .85rem; height: .85rem; border-radius: 50%; border: 1.5px solid rgba(180, 205, 180, .45); flex: none; }
.requisitos-logro li.cumplido { color: #e9dcae; }
.requisitos-logro li.cumplido .req-marca { border-color: #c9a45c; background: #c9a45c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230c1a10' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.req-detalle { color: rgba(180, 205, 180, .5); }

@media (prefers-reduced-motion: reduce) {
    .recompensa-flotante, .ritual-escena *, .receta, .tarea, .bosque-boton, .interaccion { animation: none !important; transition: none !important; }
}

/* Cabecera en celular: nombre y las dos divisas caben en una fila */
@media (max-width: 480px) {
    #cabecera h1 { font-size: 1.02rem; letter-spacing: .01em; }
    #cabecera { gap: .4rem; padding-left: .85rem; padding-right: .85rem; }
    #cabecera > div { gap: .3rem; }
    .bolsa { padding: .1rem .15rem; }
    .bolsa .divisa { padding: .08rem .28rem; gap: .18rem; }
    .bolsa .divisa .ico { width: 1rem; height: 1rem; }
    #btn-open-settings { padding: .4rem; }
}

/* Colección: las tarjetas (hongos, tés y logros) muestran su texto completo; la lista se desplaza */
#mushrooms-grid, #teas-grid, #medals-grid { grid-auto-rows: max-content; align-content: start; min-height: 0; }
#mushrooms-view-container > :not(#mushrooms-grid),
#teas-view-container > :not(#teas-grid),
#medals-view-container > :not(#medals-grid) { flex-shrink: 0; }

/* Ritual: la taza y la tetera no se mueven; solo el vapor ondula */
body.modo-pausa #active-visual-wrapper { animation: none !important; transform: none !important; }
.ritual-escena .avatar-svg { overflow: visible; }

/* Durante el paseo la casita y sus animaciones se pausan detrás (el sendero va más fluido) */
body.paseo-abierto #app-main, body.paseo-abierto #cabecera, body.paseo-abierto #nav-principal { visibility: hidden; }
body.paseo-abierto #app-main * { animation-play-state: paused !important; }
.paseo-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: radial-gradient(circle at 50% 40%, #12261a, #060e09) !important; }
@media (max-width: 640px) {
    .paseo-modal { padding: .5rem; }
    .paseo-panel { padding: .75rem; }
    .paseo-lienzo { aspect-ratio: 1 / 1; max-height: 62dvh; }
}

/* ---------- Pomodoro / Flowtime ---------- */
.selector-trabajo { display: inline-flex; gap: .2rem; padding: .2rem; margin-bottom: .7rem; border-radius: 999px; background: rgba(12, 26, 16, .55); border: 1px solid rgba(201, 164, 92, .3); }
.selector-trabajo button { padding: .32rem .85rem; border-radius: 999px; font-size: .72rem; color: #d7e4d7; letter-spacing: .02em; transition: background .2s, color .2s; }
.selector-trabajo button.activo { background: linear-gradient(135deg, #f3dca0, #b4cdb4); color: #0c1a10; font-weight: 700; }
.selector-trabajo button:disabled { opacity: .4; cursor: not-allowed; }
.controles-flujo { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 .3rem; }
body.flujo-trabajo .controles-flujo { display: flex; }
body.flujo-trabajo #controles-reloj { display: none !important; }
.flujo-boton { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1.3rem; border-radius: .9rem; font-size: .85rem; font-weight: 600;
    color: #d7e4d7; border: 1px solid rgba(180, 205, 180, .3); background: rgba(12, 26, 16, .55); transition: transform .2s; }
.flujo-boton.principal { color: #0c1a10; border-color: transparent; background: #b4cdb4; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.flujo-boton:hover { transform: translateY(-2px); }
.flujo-boton[hidden] { display: none !important; }
.flujo-sugerencia { display: none; font-size: .72rem; color: rgba(180, 205, 180, .75); margin-bottom: .6rem; text-align: center; }
body.flujo-trabajo .flujo-sugerencia { display: block; }
body.flujo-trabajo #timer-display { font-variant-numeric: tabular-nums; font-size: clamp(2rem, 9vw, 2.9rem); }
.flujo-descanso { font-size: .74rem; color: #f3dca0; margin: -.3rem 0 .5rem; text-align: center; }
.flujo-descanso[hidden] { display: none; }

/* ---------- Micro-diario pos-sesión ---------- */
.micro-contador { align-self: flex-end; margin-top: -.45rem; font-size: .66rem; color: rgba(180, 205, 180, .7); font-variant-numeric: tabular-nums; }
.micro-contador.cerca { color: #f3dca0; }
.micro-contador.lleno { color: #f2b8a0; font-weight: 600; }
.micro-invitacion { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(180, 205, 180, .15); font-size: .7rem; line-height: 1.55; color: rgba(215, 228, 215, .7); font-style: italic; font-family: Georgia, serif; }
.micro-enlace { color: #f3dca0; font-style: italic; text-decoration: underline; text-underline-offset: 3px; }
.micro-enlace:hover { color: #E8E4F1; }

/* ---------- Tablero: etiqueta Journaling ---------- */
.tablero-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -.2rem 0 .7rem; font-size: .68rem; color: rgba(180, 205, 180, .7); }
.atajo-diario { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; color: #f3e7c9;
    border: 1px dashed rgba(201, 164, 92, .6); background: rgba(201, 164, 92, .08); }
.atajo-diario:hover { background: rgba(201, 164, 92, .18); }
.atajo-diario .ico { color: #c9a45c; }

/* =================== MI HABITACIÓN (escena del refugio · Pase Premium) =================== */
.escena-pestanas { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: rgba(12, 26, 16, .7); border: 1px solid var(--f2-borde); }
.escena-pestanas[hidden] { display: none; }
.escena-pestana { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .95rem; border-radius: 999px; font-size: .74rem; color: #d7e4d7; transition: background .2s, color .2s; }
.escena-pestana:hover { color: var(--f2-lavanda); }
.escena-pestana.activa { background: #b4cdb4; color: #0c1a10; font-weight: 600; }
.habitacion-marco { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.habitacion-marco[hidden], .casita-marco[hidden] { display: none !important; }
.habitacion { width: 100%; aspect-ratio: 9 / 16; border-radius: 1.4rem; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(201, 164, 92, .25); background: #2a2018; }
.habitacion-svg { width: 100%; height: 100%; display: block; }
.habitacion-texto { font-size: .74rem; color: var(--f2-tenue); text-align: center; min-height: 2.2em; max-width: 30ch; font-style: italic; }
.habitacion-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.hab-accion { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .74rem; color: #e8efe6; background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); transition: background .2s, border-color .2s, transform .15s; }
.hab-accion:hover { border-color: rgba(201, 164, 92, .55); transform: translateY(-1px); }
.hab-accion.activa { background: rgba(201, 164, 92, .22); border-color: var(--f2-oro); color: var(--f2-oro-claro); }
.habitacion-armario { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem; width: 100%; }
.habitacion-armario[hidden] { display: none; }
.hab-ropa { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .35rem; border-radius: .9rem; font-size: .7rem; color: #e8efe6; background: var(--f2-tarjeta); border: 1px solid var(--f2-borde); transition: border-color .2s; }
.hab-ropa span:first-child { font-size: 1.2rem; }
.hab-ropa small { font-size: .6rem; color: var(--f2-oro-claro); }
.hab-ropa.puesta { border-color: var(--f2-oro); background: rgba(201, 164, 92, .14); }
.hab-ropa[data-abrir-pago] { opacity: .7; }
.hab-ropa[data-abrir-pago]::after { content: '🔒'; font-size: .62rem; }
.casita-interacciones.oculto-en-habitacion { display: none !important; }

/* Animaciones de la escena */
.hab-foco { animation: habFoco 3.2s ease-in-out infinite; }
@keyframes habFoco { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.hab-cortina-izq, .hab-cortina-der { transform-box: fill-box; transform-origin: 50% 0; animation: habCortina 7s ease-in-out infinite; }
.hab-cortina-der { animation-delay: -3.5s; }
@keyframes habCortina { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(1.8deg); } }
/* La escena se vuelve a dibujar en cada actividad: los cambios se animan con @keyframes al aparecer */
.hab-puerta-izq, .hab-puerta-der { transform-box: fill-box; }
.hab-puerta-izq { transform-origin: 0 50%; } .hab-puerta-der { transform-origin: 100% 50%; }
[data-actividad="vestirse"] .hab-puerta-izq, [data-actividad="vestirse"] .hab-puerta-der { animation: habAbrirPuerta .8s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes habAbrirPuerta { to { transform: scaleX(.16); } }
.hab-armario-interior { opacity: 0; }
[data-actividad="vestirse"] .hab-armario-interior { animation: habAparecer .5s .25s forwards; }
@keyframes habAparecer { to { opacity: 1; } }
.hab-luz-mesa { opacity: .25; }
[data-actividad="escritorio"] .hab-luz-mesa { animation: habEncender 1s forwards; }
@keyframes habEncender { from { opacity: .25; } to { opacity: 1; } }
.hab-luz-lampara { opacity: .8; }
[data-actividad="descansar"] .hab-luz-lampara { animation: habAtenuar 1.2s forwards; }
@keyframes habAtenuar { from { opacity: .8; } to { opacity: .35; } }
.hab-personaje { animation: habEntrar .6s ease both; }
@keyframes habEntrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hab-foco, .hab-cortina-izq, .hab-cortina-der, .hab-personaje { animation: none; } }

/* Navegación con 4 secciones en tableta */
@media (min-width: 768px) and (max-width: 1023px) { .nav-item { padding: .5rem .7rem; } }

/* =================== MI JOURNAL (Cartas a mis estaciones) =================== */
.journal-seccion {
    --j-noche: #22172a; --j-noche-2: #2e2036; --j-crema: #f1ece2; --j-crema-2: #e6dccb; --j-tinta: #2c3446;
    --j-linea: rgba(241, 236, 226, .16); --j-oro: #c9a45c;
}
.journal-seccion [hidden] { display: none !important; }
.journal-cabecera { text-align: center; max-width: 40rem; margin: 0 auto 1.6rem; }
.journal-eyebrow { font-size: .64rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(241, 236, 226, .65); }
.journal-titulo { font-family: Georgia, 'Playfair Display', serif; font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--j-crema); margin-top: .2rem; }
.journal-subtitulo { font-size: .85rem; color: var(--f2-tenue); margin-top: .35rem; }
.journal-rejilla {
    display: grid; gap: 1.6rem; align-items: start; padding: clamp(1rem, 3vw, 2rem); border-radius: 1.6rem;
    background: radial-gradient(120% 90% at 20% 0%, #3b2a44 0%, var(--j-noche) 60%), var(--j-noche);
    border: 1px solid var(--j-linea); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); position: relative; overflow: hidden;
}
/* cielo con estrellas, como la portada */
.journal-rejilla::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 64% 72%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 86%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 58%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 45% 40%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 62%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 90%, #fff 50%, transparent 51%);
}
.journal-rejilla > * { position: relative; }
@media (min-width: 768px) { .journal-rejilla { grid-template-columns: minmax(220px, 300px) 1fr; } }
@media (max-width: 767px) { .journal-libro { width: min(70%, 240px); } }

/* El libro */
.journal-libro-col { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.journal-libro {
    position: relative; width: min(100%, 280px); aspect-ratio: 900 / 1165; border-radius: 4px 12px 12px 4px; perspective: 900px;
    transition: transform .5s cubic-bezier(.3, .7, .3, 1); cursor: pointer;
}
.journal-libro img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px 10px 10px 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 14px 22px 34px rgba(0, 0, 0, .55), 2px 3px 6px rgba(0, 0, 0, .4);
    transform-origin: 0 50%; transition: transform .6s cubic-bezier(.3, .7, .3, 1);
}
.journal-paginas {        /* canto de las hojas */
    position: absolute; top: 2.5%; bottom: 2.5%; right: -7px; width: 12px; border-radius: 0 4px 4px 0;
    background: repeating-linear-gradient(0deg, #efe7d6 0 1px, #d9cdb6 1px 2px); box-shadow: 4px 6px 12px rgba(0, 0, 0, .35);
}
.journal-lomo { position: absolute; top: 0; bottom: 0; left: 0; width: 7%; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(255, 255, 255, .06) 55%, transparent); pointer-events: none; }
.journal-cinta {          /* cinta marcapáginas */
    position: absolute; bottom: -22px; right: 22%; width: 12px; height: 46px; background: linear-gradient(#b8933f, var(--j-oro));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); z-index: -1;
}
.journal-candado {
    position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: rgba(34, 23, 42, .82); color: var(--j-crema); border: 1px solid var(--j-linea); backdrop-filter: blur(4px);
}
.journal-libro:hover, .journal-libro:focus-visible { transform: translateY(-4px) rotate(-1deg); }
.journal-libro:hover img, .journal-libro:focus-visible img { transform: rotateY(-14deg); }
.journal-libro:focus-visible { outline: 2px solid var(--j-oro); outline-offset: 6px; }
.journal-abrir {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    background: var(--j-crema); color: var(--j-noche); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .15s, background .2s;
}
.journal-abrir:hover { background: #fff; transform: translateY(-1px); }
.journal-abrir-premium { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: var(--j-noche); color: var(--j-oro); }

/* Contador y categorías */
.journal-info { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.journal-contador { padding: 1rem 1.1rem; border-radius: 1.1rem; background: rgba(241, 236, 226, .05); border: 1px solid var(--j-linea); }
.journal-contador-numero { display: flex; align-items: baseline; gap: .55rem; }
.journal-contador-numero strong { font-family: Georgia, serif; font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--j-crema); font-variant-numeric: tabular-nums; }
.journal-contador-numero span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 236, 226, .7); }
.journal-ultima { font-size: .74rem; color: rgba(241, 236, 226, .55); margin-top: .3rem; font-style: italic; }
.journal-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; margin-top: .8rem; }
.journal-categorias li { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: #e9e3d6; padding: .35rem .55rem; border-radius: .6rem; background: rgba(255, 255, 255, .03); }
.journal-categorias li .ico { color: var(--cat); }
.journal-categorias li b { margin-left: auto; font-weight: 600; color: var(--cat); font-variant-numeric: tabular-nums; }
.journal-categorias li.vacia { opacity: .45; }

/* Vista previa: hojas de carta apiladas */
.journal-previa-titulo { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(241, 236, 226, .6); margin-bottom: .55rem; }
.journal-previa { display: flex; flex-direction: column; gap: .55rem; }
.journal-hoja {
    position: relative; text-align: left; display: flex; flex-direction: column; gap: .35rem; padding: .8rem 1rem .85rem 1.25rem; border-radius: .5rem .9rem .9rem .5rem;
    background: linear-gradient(transparent 0 calc(100% - 1px), rgba(44, 52, 70, .05) 0) 0 1.55rem / 100% 1.25rem, linear-gradient(var(--j-crema), var(--j-crema-2));
    color: var(--j-tinta); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); margin-right: calc(var(--i) * .6rem); opacity: calc(1 - var(--i) * .12);
    transition: transform .25s, box-shadow .25s; overflow: hidden;
}
.journal-hoja::before { content: ''; position: absolute; left: .55rem; top: 0; bottom: 0; width: 1px; background: rgba(201, 120, 120, .35); }
.journal-hoja:hover, .journal-hoja:focus-visible { transform: translateY(-2px); opacity: 1; box-shadow: 0 10px 22px rgba(0, 0, 0, .38); }
.journal-hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.journal-hoja-fecha { font-family: Georgia, serif; font-style: italic; font-size: .74rem; color: #5d6578; }
.journal-hoja-texto { font-family: Georgia, serif; font-size: .86rem; line-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.journal-bloqueado .journal-hoja-texto { filter: blur(3.5px); opacity: .75; user-select: none; }
.journal-hoja-sello {
    position: absolute; right: .8rem; bottom: .55rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem;
    background: radial-gradient(circle at 35% 30%, #9a3a3a, #6b2a2f); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); filter: saturate(.9);
}
.journal-cat { display: inline-flex; align-items: center; gap: .25rem; font-size: .64rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; color: color-mix(in srgb, var(--cat) 55%, #2c3446); background: color-mix(in srgb, var(--cat) 20%, transparent); }
.journal-cat .ico { color: var(--cat); }
.journal-mas { font-size: .72rem; color: rgba(241, 236, 226, .55); text-align: center; font-style: italic; }
.journal-vacio { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.2rem; text-align: center; font-size: .8rem; color: rgba(241, 236, 226, .65); border: 1px dashed var(--j-linea); border-radius: 1rem; }
.journal-previa-nota { font-size: .7rem; color: rgba(241, 236, 226, .55); margin-top: .6rem; }

/* Nota manual */
.journal-nota { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: rgba(241, 236, 226, .05); border: 1px solid var(--j-linea); }
.journal-nota-titulo { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(241, 236, 226, .6); }
.journal-nota textarea { width: 100%; resize: vertical; min-height: 4.5rem; padding: .7rem .8rem; border-radius: .8rem; font-size: .82rem; color: var(--j-crema); background: rgba(8, 15, 25, .6); border: 1px solid var(--j-linea); }
.journal-nota textarea::placeholder { color: rgba(241, 236, 226, .35); }
.journal-nota textarea:focus { outline: none; border-color: rgba(201, 164, 92, .6); }
.journal-nota-pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.journal-nota-pie .micro-contador { margin: 0; align-self: center; }
.journal-nota-ok { font-size: .72rem; color: #a9d3a9; }
.journal-nota-boton { margin-left: auto; padding: .5rem 1.1rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--j-oro); color: var(--j-noche); transition: filter .2s; }
.journal-nota-boton:hover { filter: brightness(1.1); }

/* Modales del journal (Premium y lector) */
.journal-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .3s; }
.journal-modal[hidden] { display: none; }
.journal-modal.visible { opacity: 1; }
.journal-modal-velo { position: absolute; inset: 0; background: rgba(6, 12, 20, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.journal-modal-caja {
    position: relative; width: min(100%, 26rem); max-height: calc(100dvh - 2rem); overflow-y: auto; border-radius: 1.5rem; padding: 2rem 1.6rem 1.6rem; text-align: center;
    background: radial-gradient(120% 70% at 50% 0%, #3b2a44, var(--j-noche) 70%); border: 1px solid rgba(201, 164, 92, .35);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 6px rgba(34, 23, 42, .9), inset 0 0 0 7px rgba(241, 236, 226, .12);
    transform: translateY(12px) scale(.98); transition: transform .35s cubic-bezier(.3, .7, .3, 1);
}
.journal-modal.visible .journal-modal-caja { transform: none; }
.journal-modal-cerrar { position: absolute; top: .8rem; right: .9rem; width: 2rem; height: 2rem; border-radius: 50%; color: rgba(241, 236, 226, .7); transition: background .2s; }
.journal-modal-cerrar:hover { background: rgba(241, 236, 226, .1); color: var(--j-crema); }
.journal-premium-portada { width: 92px; margin: 0 auto 1rem; transform: rotate(-4deg); }
.journal-premium-portada img { width: 100%; border-radius: 2px 6px 6px 2px; box-shadow: 8px 12px 22px rgba(0, 0, 0, .55); }
.journal-premium-titulo { font-family: Georgia, serif; font-weight: 400; font-size: 1.6rem; color: var(--j-crema); margin: .3rem 0 .6rem; }
.journal-premium-texto { font-size: .84rem; line-height: 1.55; color: rgba(241, 236, 226, .8); }
.journal-premium-texto strong { color: var(--j-oro); font-weight: 600; }
.journal-premium-boton { width: 100%; justify-content: center; margin-top: 1.2rem; white-space: normal; font-size: .9rem; padding: .85rem 1rem; line-height: 1.3; }
.journal-premium-unico { font-size: .68rem; color: rgba(241, 236, 226, .5); margin-top: .5rem; }
.journal-premium-separador { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0 .9rem; color: rgba(201, 164, 92, .7); }
.journal-premium-separador::before, .journal-premium-separador::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(241, 236, 226, .2), transparent); }
.journal-premium-cartas { font-size: .74rem; line-height: 1.55; color: rgba(241, 236, 226, .6); font-style: italic; }
.journal-enlace-cartas { font-style: italic; color: var(--j-crema); text-decoration: underline; text-decoration-color: rgba(201, 164, 92, .6); text-underline-offset: 3px; }
.journal-enlace-cartas:hover { color: var(--j-oro); }

/* Lector: una carta por página */
.journal-lector-caja { width: min(100%, 32rem); text-align: left; }
.journal-lector-pagina { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(241, 236, 226, .6); text-align: center; margin-bottom: .9rem; }
.journal-carta {
    position: relative; min-height: 16rem; padding: 1.4rem 1.4rem 1.2rem 2rem; border-radius: .6rem 1rem 1rem .6rem; color: var(--j-tinta);
    background: linear-gradient(transparent 0 calc(100% - 1px), rgba(44, 52, 70, .09) 0) 0 3.4rem / 100% 1.6rem, linear-gradient(160deg, #f6f1e7, var(--j-crema-2));
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45); display: flex; flex-direction: column;
}
.journal-carta::before { content: ''; position: absolute; left: 1.1rem; top: 0; bottom: 0; width: 1px; background: rgba(201, 120, 120, .4); }
.journal-carta.pasar { animation: journalPasar .45s ease; }
@keyframes journalPasar { from { opacity: 0; transform: translateX(10px) rotate(.6deg); } to { opacity: 1; transform: none; } }
.journal-carta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.journal-carta-fecha { font-family: Georgia, serif; font-style: italic; font-size: .8rem; color: #5d6578; }
.journal-carta-saludo { font-family: Georgia, serif; font-style: italic; margin-top: 1rem; font-size: .95rem; color: #3f4860; }
.journal-carta-texto { font-family: Georgia, serif; font-size: 1rem; line-height: 1.6rem; margin-top: .3rem; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.journal-carta-pie { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .72rem; color: #5d6578; }
.journal-carta-hongo { width: 34px; height: 34px; flex: none; }
.journal-carta-hongo svg { width: 100%; height: 100%; }
.journal-lector-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.journal-pasar { padding: .45rem .9rem; border-radius: 999px; font-size: .78rem; color: var(--j-crema); border: 1px solid var(--j-linea); transition: background .2s; }
.journal-pasar:hover:not(:disabled) { background: rgba(241, 236, 226, .1); }
.journal-pasar:disabled { opacity: .3; cursor: default; }
.journal-borrar { font-size: .7rem; color: rgba(242, 184, 160, .75); }
.journal-borrar:hover { color: #f2b8a0; text-decoration: underline; }
body.journal-modal-abierto { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .journal-libro, .journal-libro img, .journal-carta.pasar, .journal-modal, .journal-modal-caja { transition: none; animation: none; } }

/* Mi Habitación · ventanal, mascotas */
.hab-estrella { animation: habFoco 3.6s ease-in-out infinite; }
.hab-reflejo { transform-box: fill-box; transform-origin: 50% 50%; animation: habReflejo 3.4s ease-in-out infinite; }
@keyframes habReflejo { 0%, 100% { transform: scaleX(1); opacity: .5; } 50% { transform: scaleX(.75); opacity: .25; } }
.hab-respira { transform-box: fill-box; transform-origin: 50% 100%; animation: habRespira 3.8s ease-in-out infinite; }
@keyframes habRespira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.045); } }
.hab-mascota .hab-cola { transform-box: fill-box; transform-origin: 0% 50%; animation: habCola 6s ease-in-out infinite; }
@keyframes habCola { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-6deg); } }
.hab-mascota-conejo .hab-oreja { transform-box: fill-box; transform-origin: 0% 50%; animation: habOreja 5s ease-in-out infinite; }
@keyframes habOreja { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-6deg); } 92% { transform: rotate(2deg); } }
.hab-mascota-conejo .hab-nariz { transform-box: fill-box; transform-origin: 50% 50%; animation: habNariz 1.1s ease-in-out infinite; }
@keyframes habNariz { 50% { transform: scaleY(.6); } }
.hab-ir-journal { font-size: .74rem; color: var(--f2-oro-claro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 164, 92, .5); }
.hab-ir-journal[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hab-estrella, .hab-reflejo, .hab-respira, .hab-mascota .hab-cola, .hab-mascota-conejo .hab-oreja, .hab-mascota-conejo .hab-nariz { animation: none; } }

/* =================== MI JOURNAL · progreso y recompensas =================== */
.journal-progreso { max-width: 26rem; margin: 1.1rem auto 0; padding: .8rem 1rem .75rem; border-radius: 1rem; background: rgba(34, 23, 42, .55); border: 1px solid rgba(201, 164, 92, .22); }
.journal-progreso-cifra { font-size: .78rem; letter-spacing: .08em; color: rgba(241, 236, 226, .75); }
.journal-progreso-cifra strong { font-family: Georgia, serif; font-weight: 400; font-size: 1.5rem; color: #f3dca0; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.journal-progreso-cifra span { font-variant-numeric: tabular-nums; }
.journal-progreso-barra { position: relative; height: 2px; margin: .85rem .4rem .7rem; background: rgba(241, 236, 226, .14); border-radius: 2px; }
.journal-progreso-relleno {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px;
    background: linear-gradient(90deg, #8a6a2c, #c9a45c 40%, #f3dca0); box-shadow: 0 0 8px rgba(243, 220, 160, .55);
    transition: width 1s cubic-bezier(.3, .7, .3, 1);
}
.journal-progreso-relleno::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 10px #f3dca0; }
.journal-hito-marca { position: absolute; top: 50%; transform: translate(-50%, -54%); font-style: normal; font-size: .9rem; line-height: 1; color: rgba(241, 236, 226, .35); text-shadow: 0 0 0 transparent; transition: color .4s, text-shadow .4s; }
.journal-hito-marca.logrado { color: #f3dca0; text-shadow: 0 0 8px rgba(243, 220, 160, .8); }
.journal-progreso-texto { font-size: .72rem; color: rgba(241, 236, 226, .6); font-style: italic; }
.journal-progreso.completo { border-color: rgba(201, 164, 92, .5); box-shadow: 0 0 24px rgba(201, 164, 92, .12); }

/* Cartas especiales en la sección */
.journal-especiales { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.journal-especial { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem .55rem .55rem; border-radius: .9rem; text-align: left; background: rgba(46, 61, 56, .55); border: 1px solid rgba(180, 205, 180, .25); color: #f1ece2; transition: transform .2s, border-color .2s; }
button.journal-especial:hover { transform: translateY(-2px); border-color: rgba(243, 220, 160, .6); }
.journal-especial.dorada { background: linear-gradient(135deg, rgba(201, 164, 92, .22), rgba(34, 23, 42, .6)); border-color: rgba(201, 164, 92, .55); }
.journal-especial-img { flex: none; width: 46px; aspect-ratio: 1546 / 2000; border-radius: 4px; overflow: hidden; box-shadow: 3px 5px 10px rgba(0, 0, 0, .45); }
.journal-especial.dorada .journal-especial-img { outline: 2px solid #c9a45c; outline-offset: 1px; }
.journal-especial-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-especial-dorso { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #2e2036 0 4px, #36263f 4px 8px); border: 1px solid rgba(241, 236, 226, .2); color: rgba(243, 220, 160, .55); font-size: 1rem; }
.journal-especial.bloqueada { opacity: .7; border-style: dashed; }
.journal-especial-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.journal-especial-texto b { font-family: Georgia, serif; font-weight: 400; font-size: .92rem; }
.journal-especial-texto small { font-size: .68rem; color: rgba(241, 236, 226, .6); }

/* Lector tipo cuaderno */
.journal-lector-caja { width: min(100%, 34rem); }
.journal-marcadores { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin: -.3rem 0 .8rem; }
.journal-marcadores:empty { display: none; }
.journal-marcadores button { font-size: .66rem; letter-spacing: .06em; padding: .22rem .65rem; border-radius: 0 0 .5rem .5rem; color: rgba(241, 236, 226, .75); background: rgba(241, 236, 226, .08); border-top: 2px solid rgba(140, 174, 140, .7); }
.journal-marcadores button.dorada { border-top-color: #c9a45c; }
.journal-marcadores button.activa { background: rgba(241, 236, 226, .2); color: #fff; }
.journal-cuaderno { position: relative; perspective: 1400px; }
.journal-cuaderno::before { content: ''; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 10px; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #170f1c, #3b2a44); box-shadow: -2px 0 6px rgba(0, 0, 0, .4); }
.journal-pagina { position: relative; transform-origin: 0 50%; border-radius: .4rem .9rem .9rem .4rem; }
.journal-pagina.pasar { animation: journalHoja .55s cubic-bezier(.3, .7, .3, 1); }
.journal-pagina.pasar-atras { animation: journalHojaAtras .55s cubic-bezier(.3, .7, .3, 1); }
@keyframes journalHoja { from { transform: rotateY(-22deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes journalHojaAtras { from { transform: rotateY(14deg) translateX(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.journal-pagina.tipo-nota .journal-carta { box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 10px 0 14px -10px rgba(0, 0, 0, .25); }
.journal-pagina.tipo-arquetipo, .journal-pagina.tipo-ritual, .journal-pagina.tipo-archivo {
    padding: 1.1rem 1.1rem .8rem; background: linear-gradient(160deg, #f6f1e7, #e6dccb); color: #2c3446; text-align: center;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 10px 0 14px -10px rgba(0, 0, 0, .25);
}
.journal-pagina.tipo-ritual { background: linear-gradient(160deg, #fbf3dc, #ecd9a8); box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 2px #c9a45c, 0 0 28px rgba(243, 220, 160, .35); }
.journal-pagina .journal-eyebrow { color: #7a6a4a; }
.journal-pagina .journal-eyebrow.dorado { color: #9a7428; }
.journal-pagina-titulo { font-family: Georgia, serif; font-weight: 400; font-size: 1.45rem; margin-top: .2rem; color: #22303f; }
.journal-pagina-sub { font-size: .74rem; color: #6b6458; font-style: italic; margin-top: .15rem; }
.journal-lamina { margin: .9rem auto 0; max-width: 21rem; border-radius: .5rem; overflow: hidden; box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
.journal-lamina img { display: block; width: 100%; height: auto; }
.journal-lamina.lamina-ritual { outline: 3px solid #c9a45c; outline-offset: -3px; max-width: 100%; }
.journal-pagina-reflexion { font-family: Georgia, serif; font-size: .9rem; line-height: 1.55; color: #3f4860; margin: .9rem auto 0; max-width: 24rem; font-style: italic; }
.journal-folio { font-family: Georgia, serif; font-size: .7rem; color: #8a8270; text-align: center; margin-top: .7rem; }
.journal-pagina.tipo-nota .journal-folio { color: rgba(241, 236, 226, .5); }
.journal-ciclo {
    margin: 1.1rem auto .2rem; max-width: 24rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 1rem;
    background: radial-gradient(120% 80% at 50% 0%, #3b2a44, #22172a 70%); color: #f1ece2; border: 1px solid #c9a45c;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 0 0 4px #22172a, inset 0 0 0 5px rgba(201, 164, 92, .45);
}
.journal-ciclo-adorno { color: #c9a45c; letter-spacing: .4em; font-size: .8rem; }
.journal-ciclo h4 { font-family: Georgia, serif; font-weight: 400; font-size: 1.3rem; margin: .35rem 0 .45rem; color: #f3dca0; }
.journal-ciclo p { font-size: .84rem; line-height: 1.55; color: rgba(241, 236, 226, .85); }
.journal-ciclo-boton {
    margin-top: .95rem; padding: .7rem 1.4rem; border-radius: 999px; font-size: .84rem; font-weight: 600; letter-spacing: .02em;
    color: #22172a; background: linear-gradient(180deg, #f6e3ad, #c9a45c); box-shadow: 0 6px 18px rgba(201, 164, 92, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .15s, filter .2s;
}
.journal-ciclo-boton:hover { transform: translateY(-1px); filter: brightness(1.06); }
.journal-archivo { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .6rem 0; }
.journal-archivo-portada { width: 84px; border-radius: 2px 6px 6px 2px; box-shadow: 6px 10px 18px rgba(0, 0, 0, .4); transform: rotate(-3deg); margin-bottom: .4rem; }
.journal-pagina.tipo-archivo .journal-premium-texto { color: #4b4f5c; }
.journal-pagina.tipo-archivo .journal-premium-texto strong { color: #9a7428; }

/* Modal de recompensa */
.journal-hito-caja { overflow: hidden; }
.journal-hito-carta { width: 120px; margin: .3rem auto 1rem; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px rgba(243, 220, 160, .6), 0 0 34px rgba(243, 220, 160, .35), 10px 16px 28px rgba(0, 0, 0, .55); }
.journal-hito-carta img { display: block; width: 100%; }
.journal-modal.visible .journal-hito-carta { animation: journalRevelar 1.1s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes journalRevelar { 0% { transform: perspective(600px) rotateY(180deg) scale(.7); opacity: 0; } 45% { opacity: 1; } 100% { transform: none; } }
.journal-hito-destellos { position: absolute; inset: 0; pointer-events: none; }
.journal-hito-destellos span { position: absolute; color: #f3dca0; font-size: .9rem; opacity: 0; animation: journalDestello 2.6s ease-in-out infinite; }
.journal-hito-destellos span:nth-child(1) { left: 14%; top: 14%; } .journal-hito-destellos span:nth-child(2) { left: 80%; top: 10%; animation-delay: .5s; }
.journal-hito-destellos span:nth-child(3) { left: 86%; top: 46%; animation-delay: 1s; } .journal-hito-destellos span:nth-child(4) { left: 8%; top: 52%; animation-delay: 1.4s; }
.journal-hito-destellos span:nth-child(5) { left: 50%; top: 4%; animation-delay: .8s; }
@keyframes journalDestello { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
#journal-hito.dorado .journal-modal-caja { border-color: #c9a45c; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(201, 164, 92, .25), inset 0 0 0 6px rgba(34, 23, 42, .9), inset 0 0 0 7px rgba(201, 164, 92, .4); }
.journal-hito-luego { display: block; margin: .8rem auto 0; font-size: .74rem; }
@media (prefers-reduced-motion: reduce) { .journal-pagina.pasar, .journal-pagina.pasar-atras, .journal-modal.visible .journal-hito-carta, .journal-hito-destellos span, .journal-progreso-relleno { animation: none; transition: none; } }
.journal-borrar.armado { color: #fff; background: #8a3a2c; padding: .35rem .8rem; border-radius: 999px; text-decoration: none; }
.journal-aviso { text-align: center; font-size: .74rem; color: #f3dca0; margin-top: .6rem; }
.journal-aviso[hidden] { display: none; }

/* Mi Journal · "Tus últimas cartas" como desplegable */
.journal-desplegable { border-top: 1px solid rgba(241, 236, 226, .12); border-bottom: 1px solid rgba(241, 236, 226, .12); }
.journal-desplegable > summary { list-style: none; display: flex; align-items: center; gap: .55rem; padding: .85rem .2rem; margin: 0; cursor: pointer; user-select: none; }
.journal-desplegable > summary::-webkit-details-marker { display: none; }
.journal-desplegable > summary:hover { color: #f1ece2; }
.journal-desplegable-cuenta { font-size: .64rem; letter-spacing: 0; padding: .05rem .5rem; border-radius: 999px; background: rgba(236, 224, 200, .12); color: #ece0c8; font-variant-numeric: tabular-nums; }
.journal-desplegable-flecha { margin-left: auto; transition: transform .3s ease; }
.journal-desplegable[open] .journal-desplegable-flecha { transform: rotate(180deg); }
.journal-desplegable-cuerpo { padding: .2rem 0 1rem; }
.journal-desplegable[open] .journal-desplegable-cuerpo { animation: journalDesplegar .35s ease; }
@keyframes journalDesplegar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .journal-desplegable-flecha, .journal-desplegable[open] .journal-desplegable-cuerpo { transition: none; animation: none; } }

/* Tienda · galería del producto (portada + mockups) */
.destacado-portada { flex-direction: column; gap: 1rem; }
.destacado-vista { display: flex; align-items: center; justify-content: center; width: 100%; }
.destacado-vista [hidden] { display: none !important; }
.destacado-foto { width: 100%; max-width: 30rem; height: auto; border-radius: .9rem; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.destacado-miniaturas { display: flex; gap: .5rem; justify-content: center; }
.destacado-mini { width: 3.6rem; height: 2.7rem; border-radius: .5rem; overflow: hidden; border: 1.5px solid rgba(236, 224, 200, .2); opacity: .7; transition: opacity .2s, border-color .2s, transform .2s; }
.destacado-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destacado-mini:hover { opacity: 1; transform: translateY(-1px); }
.destacado-mini.activa { opacity: 1; border-color: #ece0c8; }

/* =================== Visitante: Hadas =================== */
.hada-ala { transform-box: fill-box; animation: hadaAleteo .42s ease-in-out infinite alternate; }
.hada-ala-der { transform-origin: 0% 50%; }
.hada-ala-izq { transform-origin: 100% 50%; }
@keyframes hadaAleteo { from { transform: scaleX(1); } to { transform: scaleX(.38); } }
.hada-vuelo:nth-of-type(2n) .hada-ala { animation-duration: .5s; }
.hada-halo { animation: hadaHalo 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hadaHalo { 0%, 100% { opacity: .75; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.hada-destello { transform-box: fill-box; transform-origin: center; animation: hadaDestello 2.4s ease-in-out infinite; opacity: 0; }
@keyframes hadaDestello { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .hada-ala, .hada-halo, .hada-destello { animation: none; } .hada-destello { opacity: .6; } }

/* ---------- La vida en el bosque: vista previa (gratis) y panel que se guarda ---------- */
.bosque-cabeza { position: relative; }
.bosque-guardar { position: static; align-self: center; }
.bosque.bosque-guardado .bosque-cabeza { margin-bottom: 0; }
.bosque.bosque-guardado .bosque-divisas { display: none; }
.bosque-cinta { display: inline-block; margin-left: .45rem; padding: .1rem .5rem; border-radius: 999px; font-size: .58rem; letter-spacing: .18em;
    color: #e1c07a; border: 1px solid rgba(201, 164, 92, .5); background: rgba(12, 26, 16, .6); vertical-align: 1px; }
.bosque-previa .bosque-divisas { opacity: .45; }
.bosque-previa-cont .paseo-portada { position: relative; }
.bosque-previa-cont .paseo-portada canvas { filter: saturate(.85) brightness(.85); }
.bosque-previa-icono { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 9rem; height: 100%; border-radius: 1rem;
    background: radial-gradient(90% 80% at 50% 40%, rgba(201, 164, 92, .14), rgba(12, 26, 16, .5)); opacity: .9; }
.bosque-previa-icono svg { width: 4rem; height: 4rem; }
.bosque-previa-sello { position: absolute; top: .6rem; left: .6rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px;
    font-size: .64rem; letter-spacing: .08em; color: #e1c07a; background: rgba(12, 26, 16, .78); border: 1px solid rgba(201, 164, 92, .5); }
.bosque-previa-lista { list-style: none; padding: 0; margin: .2rem 0 .9rem; display: grid; gap: .3rem; font-size: .8rem; color: #d7e4d7; }
.bosque-previa-lista li::before { content: '✦'; color: #c9a45c; margin-right: .45rem; font-size: .7rem; }
.bosque-previa-sello svg { width: 12px !important; height: 12px !important; flex: none; }
.bosque-cabeza .bosque-divisas { margin-left: auto; }
.bosque-guardar { order: 3; }
.bosque-previa-icono svg { width: 4.5rem !important; height: 4.5rem !important; }
.tiendita-emoji { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.5rem; color: #e1c07a; border-radius: .7rem; background: rgba(225, 192, 122, .08); }
.tiendita-emoji svg { width: 1.5rem; height: 1.5rem; }

/* Guardarropa: cada prenda se ve puesta en tu personaje */
.prenda-vista { flex: none; width: 3.6rem; height: 5.6rem; border-radius: .7rem; background: radial-gradient(ellipse at 50% 70%, rgba(236, 224, 200, .14), rgba(236, 224, 200, .03)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prenda-vista-calzado { height: 3.2rem; width: 4.6rem; }
.prenda-vista svg { width: 100%; height: 100%; }
/* En pantallas angostas, los botones Probar / precio pasan bajo la descripción de la prenda */
@media (max-width: 480px) {
    .tienda-item:has(.prenda-vista) { flex-wrap: wrap; }
    .tienda-item:has(.prenda-vista) > span.flex-1 { flex-basis: calc(100% - 4.6rem); }
    .tienda-item:has(.prenda-vista) > span.flex.items-center { margin-left: 4.4rem; }
}
/* Botones de pago: el texto nunca se sale del botón en pantallas angostas */
.pago-boton { white-space: normal; text-align: center; line-height: 1.25; }
.hab-ropa .hab-prenda-vista { margin: 0 auto .2rem; width: 3rem; height: 4.6rem; }
.hab-ropa .hab-prenda-vista.prenda-vista-calzado { width: 4rem; height: 2.6rem; }

/* ================= PALETA · El Susurro de la Hiedra =================
   Una sola fuente de color para toda la interfaz (va al final de estilos.css).
     · Verde bosque profundo  → color principal: fondos, paneles y navegación.
     · Crema marfil           → secundario: tarjetas de lectura, pergaminos y contenedores de texto.
     · Azul medianoche        → tarjetas especiales y contenedores de alto impacto (Pase, Journal).
     · Crema                  → también lo seleccionado: chips, pestañas, filtros y navegación activa.
     · Lila suave             → detalles: insignias y pequeños acentos.
     · Ciruela místico        → botones principales (CTA), con texto crema.
     · Oro / ámbar cálido     → SOLO trazos finos de 1px, estrellas pequeñas e íconos de acento.
   Contraste (WCAG 2.1): todos los textos ≥ 4.5:1 sobre su fondo (ver LEEME). */
:root {
    /* Verde bosque (principal) */
    --bosque-950: #08130b;
    --bosque-900: #0c1a10;
    --bosque-800: #15291b;
    --bosque-700: #1d3826;
    --bosque-600: #274a33;
    --salvia-300: #b4cdb4;   /* texto secundario sobre bosque · 10.5:1 */
    --salvia-200: #d7e4d7;   /* texto sobre bosque · 11.7:1 */

    /* Crema marfil (secundario) */
    --crema-50:  #fdf9f0;
    --crema-100: #f7f0e1;    /* fondo de tarjetas de lectura */
    --crema-200: #ece0c8;    /* bordes, separadores, estados hover sobre crema */
    --crema-300: #dccaa6;
    --tinta-900: #2a261d;    /* texto principal sobre crema · 13.3:1 */
    --tinta-700: #57503f;    /* texto secundario sobre crema · 7:1 */
    --tinta-bosque: #1d3826; /* titulares verdes sobre crema · 11.2:1 */

    /* Azul medianoche (complementario) */
    --noche-950: #0a1420;
    --noche-900: #0f1c2c;
    --noche-800: #16263a;
    --noche-700: #1e3049;

    /* Lila suave (detalles) */
    --lila-100: #efe8fa;
    --lila-200: #ddd0f2;
    --lila-300: #c9b6ea;     /* estados activos · texto bosque-900 encima 9.7:1 */
    --lila-500: #9b82c9;
    --lila-700: #5d4691;     /* lila como texto sobre crema · 6.7:1 */

    /* Oro / ámbar cálido (premium y CTA) */
    --oro-200: #f6e6b8;
    --oro-300: #f3dca0;      /* oro como texto sobre bosque/noche · 11.3–13.3:1 */
    --oro-400: #e1c07a;
    --oro-500: #c9a45c;      /* bordes, estrellas · CTA con texto oro-tinta ≥ 7.5:1 */
    --oro-700: #7d5f24;      /* oro como texto sobre crema · 5.3:1 */
    --oro-tinta: #1f1709;    /* texto sobre botones dorados */
    /* Ciruela místico: botones principales (CTA) con texto crema */
    --ciruela-700: #3b2c42;
    --ciruela-600: #4a3352;
    --ciruela-500: #5b4064;
    --cta: linear-gradient(180deg, var(--ciruela-500) 0%, var(--ciruela-600) 55%, var(--ciruela-700) 100%);
    --cta-sombra: 0 10px 24px rgba(20, 8, 26, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ---------- Fondo general: bosque con un velo nocturno muy suave ---------- */
html, body { background-color: var(--bosque-900); }

/* ---------- Crema: lo seleccionado (chips, pestañas, filtros, navegación) ---------- */
.bg-sage-300 { background-color: var(--crema-200) !important; }
.bg-sage-300.text-forest-900, .bg-sage-300 .text-forest-900 { color: var(--bosque-900) !important; }
.nav-item.activo { background: var(--crema-200); color: var(--bosque-900); }
@media (max-width: 767px) {
    .nav-item.activo { background: rgba(236, 224, 200, .16); color: var(--crema-50); }
    .nav-item.activo .nav-icono { color: var(--crema-200); }
}
.escena-pestana.activa, .filtro-tarea.activo, .selector-trabajo button.activo { background: var(--crema-200); color: var(--bosque-900); }
.filtro-tarea.activo { border-color: var(--crema-200); }
.filtro-tarea.activo .ico { color: var(--bosque-900); }
.hab-accion.activa { background: rgba(236, 224, 200, .16); border-color: var(--crema-200); color: var(--crema-50); }
.categoria-ficha.activa { box-shadow: 0 0 0 1px var(--crema-200); }
.border-sage-300 { border-color: var(--crema-200) !important; }
:where(button, a, [tabindex], input, select, textarea):focus-visible { outline: 2px solid var(--crema-200); outline-offset: 2px; }

/* Insignias pequeñas en lila */
.proximamente-sello { color: var(--lila-200); border-color: rgba(201, 182, 234, .45) !important; background: rgba(201, 182, 234, .08); }
.columna-cuenta { background: rgba(201, 182, 234, .16); color: var(--lila-100); }

/* ---------- Ciruela místico: botones principales (texto crema · 10.9:1) ---------- */
#btn-toggle-timer, .flujo-boton.principal, .pago-boton, .tablero-nueva button, .bosque-boton:not(:disabled),
.producto-boton:not(:disabled), button[data-acc="comprar"], #session-reflection-form button[type="submit"],
#journal-manual-form button[type="submit"], .journal-nota-boton, .journal-ciclo-boton, #btn-instalar {
    background: var(--cta) !important; color: var(--crema-50) !important;
    box-shadow: var(--cta-sombra), 0 0 0 1px rgba(201, 164, 92, .55) !important; border-color: transparent !important;
}
#btn-toggle-timer:hover, .flujo-boton.principal:hover, .pago-boton:hover, .tablero-nueva button:hover, .bosque-boton:not(:disabled):hover,
.producto-boton:not(:disabled):hover, button[data-acc="comprar"]:hover, .journal-nota-boton:hover, .journal-ciclo-boton:hover { filter: brightness(1.15); }

/* Premium: crema con un trazo dorado de 1px */
.chip-acceso { color: var(--crema-100); background: linear-gradient(180deg, var(--noche-800), var(--noche-900)); border: 1px solid rgba(201, 164, 92, .7); font-weight: 600; }
.chip-acceso:hover { border-color: var(--oro-400); color: var(--crema-50); }

/* Oro solo en trazos finos */
.journal-especial.dorada .journal-especial-img { outline-width: 1px !important; }
.journal-lamina.lamina-ritual { outline-width: 1px !important; outline-offset: -1px !important; }
.journal-progreso-barra { height: 1px; }
.journal-pagina.tipo-ritual { box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 1px #c9a45c !important; }

/* Marca de la cabecera en crema */
#cabecera h1 { color: var(--crema-100) !important; }

/* Etiquetas que no son premium dejan el oro y pasan a lila / crema */
.producto-tipo { color: var(--crema-200); font-weight: 600; }
.etiqueta-nota { color: var(--crema-200); }
.pago-medios-titulo { color: var(--salvia-300); }

/* ---------- Crema marfil: tarjetas de lectura y contenedores de texto ---------- */
/* Nota bajo el reloj (descripción del hongo / nota de cata del té) */
/* Nota bajo el reloj: se queda en el verde bosque; el crema va en los acentos */
#tarjeta-nota .etapa-hongo, #tarjeta-nota .etiqueta-nota { color: var(--crema-200) !important; font-weight: 600; }
#tarjeta-nota #btn-prev-msh:hover, #tarjeta-nota #btn-next-msh:hover { color: var(--crema-100) !important; border-color: rgba(236, 224, 200, .45); }

/* Tablero: las tareas son notas de papel */
.tarea { background: linear-gradient(180deg, var(--crema-50), var(--crema-100)); border-color: var(--crema-300); border-left: 4px solid var(--tipo, var(--salvia-300)); }
.tarea-texto { color: var(--tinta-900); }
.tarea.hecha .tarea-texto { color: #6f6757; }
.tarea-tipo { color: var(--tinta-700); }
.tarea-tipo .ico { filter: saturate(1.3) brightness(.75); }
.tarea-check { color: var(--tinta-bosque); }
.tarea-check:hover { color: var(--lila-700); }
.tarea-acciones button { color: var(--tinta-700); }
.tarea-acciones button:hover:not(:disabled) { background: var(--crema-200); color: var(--tinta-900); }
.tarea-acciones [data-borrar]:hover { color: #a3312a !important; }
.tarea.editando { border-left-color: var(--lila-500); }
.tarea-editar-texto { background: #fff; color: var(--tinta-900); border-color: var(--crema-300); }
.tarea-btn { background: var(--bosque-700); color: var(--crema-50); }
.tarea-btn-sec { color: var(--tinta-700); border-color: var(--crema-300); }

/* Papelería: la ficha del producto es un pergamino editorial */
/* Papelería: la ficha se queda en el verde bosque; el crema va en los acentos */
.producto-destacado .destacado-cuerpo .text-lavender-500 { color: var(--crema-100) !important; }
.producto-destacado .destacado-compra { border-color: rgba(236, 224, 200, .25) !important; }

/* Micro-diario y nota rápida: el papel donde se escribe */
#session-reflection-text, #journal-manual-text {
    background: var(--crema-50) !important; color: var(--tinta-900) !important; border-color: var(--crema-300) !important;
}
#session-reflection-text::placeholder, #journal-manual-text::placeholder { color: #6f6757 !important; }

/* ---------- Azul medianoche: contenedores de alto impacto ---------- */
.pago-panel {
    background:
        radial-gradient(130% 70% at 50% 0%, rgba(201, 182, 234, .10), transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(201, 164, 92, .10), transparent 70%),
        linear-gradient(180deg, var(--noche-700) 0%, var(--noche-900) 100%);
    border-color: rgba(201, 164, 92, .55);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 5px rgba(15, 28, 44, .7), inset 0 0 0 6px rgba(201, 164, 92, .22);
}
.pago-beneficios { background: rgba(10, 20, 32, .55) !important; border-color: rgba(201, 182, 234, .2) !important; }
.pago-eyebrow { color: var(--oro-300); }
.casita-invitacion { background: radial-gradient(120% 140% at 0% 0%, rgba(201, 164, 92, .14), transparent 55%), linear-gradient(180deg, var(--noche-800), var(--noche-900)); }

/* ---------- Cabecera: la marca nunca queda tapada ----------
   Fila 1: marca (izquierda) y bolsa/Pase/ajustes (derecha) · Fila 2 (tableta y computador): menú centrado */
#cabecera { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: .9rem; }
#cabecera > a:first-child { min-width: 0; }
#cabecera h1 { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
    #nav-principal { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ---------- Papelería: el mismo azul medianoche de Mi Journal y de la portada ---------- */
#seccion-tienda .tienda-portada, #seccion-tienda .producto-destacado, #seccion-tienda .proximamente, #seccion-tienda .mis-compras > *, #seccion-tienda .compra-item {
    background: radial-gradient(120% 90% at 20% 0%, #1b2c42 0%, #0f1c2c 60%), #0f1c2c !important;
    border: 1px solid rgba(241, 236, 226, .16) !important; backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
/* cielo con estrellas, como la portada */
#seccion-tienda .tienda-portada, #seccion-tienda .producto-destacado { position: relative; overflow: hidden; }
#seccion-tienda .tienda-portada::before, #seccion-tienda .producto-destacado::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 64% 72%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 86%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 58%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 45% 40%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 62%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 90%, #fff 50%, transparent 51%);
}
#seccion-tienda .tienda-portada > *, #seccion-tienda .producto-destacado > * { position: relative; }
#seccion-tienda .destacado-portada { background: radial-gradient(110% 80% at 50% 35%, rgba(241, 236, 226, .07), transparent 65%) !important; }
#seccion-tienda .destacado-cuerpo { background: transparent !important; }
#seccion-tienda .proximamente { border-style: dashed !important; box-shadow: none; }

/* ================= TIPOGRAFÍA · El Susurro de la Hiedra =================
   · Playfair Display  → títulos (marca, títulos de sección, tarjetas, modales, reloj)
   · Cormorant Garamond→ textos (descripciones, cartas, botones, etiquetas)
   · Cinzel            → detalles muy especiales (pequeñas etiquetas en mayúsculas, sellos)
   Todas van dentro de la app (/fonts), así funcionan sin conexión.
   Las tres tienen licencia libre SIL Open Font License 1.1 (uso comercial permitido): ver fonts/licencias/. */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/playfair-display-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 700; font-display: swap; src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/cinzel-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2'); }

:root {
    --f-principal: 'Playfair Display', Georgia, serif;
    --f-titulo: 'Playfair Display', Georgia, serif;
    --f-texto: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --f-especial: 'Cinzel', 'Playfair Display', serif;
}

/* Texto general: Cormorant, con un poco más de cuerpo (su "x" es pequeña) para que se lea bien */
body, .font-sans, button, input, select, textarea {
    font-family: var(--f-texto);
    font-size-adjust: .47;
    font-variant-numeric: lining-nums;
}
body { font-weight: 500; }
button, .pago-boton, .producto-boton { font-weight: 600; }

/* Títulos secundarios: Playfair Display */
.font-serif, h2, h3, h4, .journal-pagina-titulo, .journal-premium-titulo, .pago-titulo, .columna-cabeza h3,
.journal-carta-texto, .journal-hoja-texto, .journal-carta-saludo, .journal-especial-texto b {
    font-family: var(--f-titulo); font-size-adjust: none;
}
.journal-carta-texto, .journal-hoja-texto { font-family: var(--f-texto); font-size-adjust: .47; }
#timer-display { font-family: var(--f-titulo); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }

/* Títulos primarios: Playfair Display */
#cabecera h1, .journal-titulo, #titulo-tienda, #titulo-casita, #titulo-bosque, .casita-invitacion .pago-titulo {
    font-family: var(--f-principal); font-weight: 400; letter-spacing: 0; font-size-adjust: none;
}
#cabecera h1 { font-size: clamp(1.45rem, 2.6vw, 2.15rem); line-height: 1.15; padding: .1em 0; }

/* Detalles muy especiales: Cinzel en etiquetas pequeñas en mayúsculas */
.journal-eyebrow, .pago-eyebrow, .producto-tipo, .proximamente-sello, .etapa-hongo, .etiqueta-nota,
.journal-previa-titulo, .journal-nota-titulo, .journal-lector-pagina, .journal-folio, .pago-medios-titulo,
#cabecera a > p, .uppercase[class*="tracking-"], [class*="tracking-["][class*="uppercase"] {
    font-family: var(--f-especial); font-size-adjust: none; letter-spacing: .14em;
}
#timer-display + p, #active-item-name { font-family: var(--f-texto); }

/* Cifras: Cormorant usa números antiguos (el 0 parece una "o"); los contadores van en Playfair */
.semillas-count, .monedas-count, #total-hours-label, .columna-cuenta, .journal-desplegable-cuenta, #journal-total, #journal-notas, #journal-meta,
.divisa, .bolsa, [class*="contador"], .hab-ropa small { font-family: var(--f-titulo); font-size-adjust: none; font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 767px) {
    #cabecera h1 { font-size: clamp(1.1rem, 5.4vw, 1.4rem); white-space: normal !important; overflow: visible; line-height: 1.05; }
}
#msh-counter-label { letter-spacing: .06em !important; white-space: nowrap; font-size: .62rem !important; }

/* ================= AMBIENTE · reloj, hora del día, celebraciones, sala ================= */

/* ---------- Reloj: anillo fino en crema con brillo suave y el hongo más grande ---------- */
.reloj-fluido { width: clamp(16rem, 80vw, 23rem); }
.reloj-fluido > svg { filter: none !important; overflow: visible; }
.reloj-fluido > svg > circle:not(.reloj-hilo):not(#timer-progress-ring) { stroke: rgba(236, 224, 200, .12) !important; stroke-width: .6 !important; }
#timer-progress-ring { stroke: #ece0c8 !important; stroke-width: .85 !important; filter: drop-shadow(0 0 1.6px rgba(236, 224, 200, .6)); }
.reloj-hilo { stroke: #c9a45c; stroke-opacity: .55; stroke-width: .3; }
.visual-fluido { width: clamp(7.5rem, 36vw, 11.5rem); }
#timer-display { font-size: clamp(2.3rem, 9vw, 3.1rem) !important; letter-spacing: .01em; }
body.modo-flowtime #timer-display { font-size: clamp(2rem, 8vw, 2.7rem) !important; }

/* El hongo florece al terminar la sesión */
#active-visual-wrapper.florece { animation: florecer 1.6s cubic-bezier(.2, .8, .3, 1); }
@keyframes florecer {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(243, 220, 160, 0)); }
    35% { transform: scale(1.22) rotate(-3deg); filter: drop-shadow(0 0 18px rgba(243, 220, 160, .75)); }
    60% { transform: scale(.96) rotate(1deg); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(243, 220, 160, 0)); }
}
.celebracion { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.celebracion-destello { position: fixed; width: 12px; height: 12px; background: #f6e3ad;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #f3dca0); }
.celebracion-semilla { position: fixed; width: 22px; height: 22px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.celebracion-semilla .ico { width: 100%; height: 100%; }
.bolsa-semillas.salto { animation: saltoContador .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saltoContador { 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- Al cambiar de sección: aparece con un fundido suave ---------- */
.seccion:not([hidden]) { animation: entrarSeccion .38s ease both; }
@keyframes entrarSeccion { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Enfoque sereno: Atmósfera Sonora plegable ---------- */
#panel-sonido > :first-child { margin-bottom: 0; }
#panel-sonido:not(.plegado) > :first-child { margin-bottom: .5rem; }
#panel-sonido.plegado > :not(:first-child) { display: none !important; }
#panel-sonido.plegado { padding-top: .7rem; padding-bottom: .7rem; }
.sonido-plegar { display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem; padding: .2rem .45rem; border-radius: 999px; color: #b4cdb4; }
.sonido-plegar:hover { color: #f7f0e1; background: rgba(236, 224, 200, .08); }
.sonido-plegar svg { transition: transform .3s; }
#panel-sonido:not(.plegado) .sonido-plegar svg { transform: rotate(180deg); }
.sonido-activos { font-size: .72rem; color: #ece0c8; }
.sonido-activos[hidden] { display: none; }

/* ---------- Íconos propios (en lugar de emojis) ---------- */
.ico-propio { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* ---------- Sala: texturas, cortinas, guirnalda y haz de luz ---------- */
.casita .s-texturizado { filter: url(#s-textura); }
.casita .s-cortina { transform-box: fill-box; transform-origin: 50% 0; animation: habCortina 8s ease-in-out infinite; }
.casita .s-cortina-der { animation-delay: -4s; }
.casita .s-mota { animation: mota 10s ease-in-out infinite; opacity: 0; }
@keyframes mota { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .7; } 70% { opacity: .5; } 100% { opacity: 0; transform: translate(14px, -26px); } }
.casita .s-sol, .casita .s-cielo-tinte { display: none; }
.casita .s-cielo-tinte, .casita .s-luz-ambiente, .habitacion .hab-luz-ambiente { mix-blend-mode: soft-light; fill: transparent; }

/* ---------- La hora del día ---------- */
/* Noche: luna y estrellas, haz de luz frío */
.s-haz-a, .s-haz-b { stop-color: #c9d6ff; }
html[data-momento="noche"] .casita .s-luz-ambiente { fill: #2a3656; opacity: .22; mix-blend-mode: multiply; }
/* Amanecer: cielo rosado, sol bajo, luz durazno */
html[data-momento="amanecer"] .casita .s-luna, html[data-momento="dia"] .casita .s-luna, html[data-momento="atardecer"] .casita .s-luna { display: none; }
html[data-momento="amanecer"] .casita .s-sol-bajo, html[data-momento="atardecer"] .casita .s-sol-bajo, html[data-momento="dia"] .casita .s-sol-alto { display: block; }
html[data-momento="amanecer"] .casita .s-cielo-tinte { display: block; fill: #f6a8a0; opacity: .75; }
html[data-momento="amanecer"] .casita .s-luz-ambiente, html[data-momento="amanecer"] .habitacion .hab-luz-ambiente { fill: #f7c4b4; opacity: .35; }
html[data-momento="amanecer"] .s-haz-a, html[data-momento="amanecer"] .s-haz-b { stop-color: #ffd2c0; }
html[data-momento="amanecer"] .casita .estrella { opacity: .25 !important; }
/* Día: cielo claro, sol alto, luz cálida que entra a la sala */
html[data-momento="dia"] .casita .s-cielo-tinte { display: block; fill: #bfe3ff; opacity: .85; mix-blend-mode: screen; }
html[data-momento="dia"] .casita .s-luz-ambiente, html[data-momento="dia"] .habitacion .hab-luz-ambiente { fill: #fff1d2; opacity: .4; }
html[data-momento="dia"] .s-haz-a, html[data-momento="dia"] .s-haz-b { stop-color: #fff0c4; }
html[data-momento="dia"] .casita .estrella, html[data-momento="dia"] .casita .luciernaga { opacity: 0 !important; }
html[data-momento="dia"] .hab-foco, html[data-momento="dia"] .casita .hab-foco { opacity: .45; animation: none; }
/* Atardecer: ámbar y violeta */
html[data-momento="atardecer"] .casita .s-cielo-tinte { display: block; fill: #f2a35a; opacity: .7; }
html[data-momento="atardecer"] .casita .s-luz-ambiente, html[data-momento="atardecer"] .habitacion .hab-luz-ambiente { fill: #f0a060; opacity: .35; }
html[data-momento="atardecer"] .s-haz-a, html[data-momento="atardecer"] .s-haz-b { stop-color: #ffc48a; }
html[data-momento="noche"] .habitacion .hab-luz-ambiente { fill: #1d2a4a; opacity: .25; mix-blend-mode: multiply; }

@media (prefers-reduced-motion: reduce) {
    .seccion:not([hidden]), #active-visual-wrapper.florece, .casita .s-cortina, .casita .s-mota, .bolsa-semillas.salto { animation: none; }
}

/* ---------- Hiedra botánica de las esquinas ---------- */
.hiedra-esquina { position: fixed; z-index: 0; pointer-events: none; user-select: none; width: clamp(170px, 21vw, 300px); aspect-ratio: 1; opacity: .78;
    filter: saturate(.85) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.hiedra-esquina svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hiedra-sup { top: 0; left: 0; }
.hiedra-inf { bottom: 0; right: 0; transform: rotate(180deg); }
/* Quieta a propósito: el vaivén de la hiedra (fija, con sombra) hacía que el vidrio esmerilado de la cabecera
   y de la tarjeta de la Casita se recalculara en cada cuadro y la parte superior temblaba en el celular. */
.hiedra-sup { transform: translateZ(0); }
@media (max-width: 767px) { .hiedra-esquina { width: 150px; opacity: .6; } .hiedra-inf { bottom: 4.6rem; } }
#cabecera h1 { text-shadow: 0 1px 10px #0c1a10, 0 0 3px #0c1a10; }
.hiedra-sup { opacity: .68; }

/* ---------- Sala: acciones abajo y burbujas sobre los objetos ---------- */
.casita-interacciones { display: none !important; }
.sala-acciones { margin-top: .1rem; }
#habitacion-marco:not([hidden]) ~ .sala-acciones { display: none; }
.casita-marco { position: relative; }
.sala-puntos { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
.sala-puntos[hidden] { display: none; }
.sala-punto { position: absolute; pointer-events: auto; border-radius: 1rem; cursor: pointer; background: transparent; }
.sala-punto[hidden] { display: none; }
.sala-punto:hover, .sala-punto.mostrar, .sala-punto:focus-visible { box-shadow: inset 0 0 0 1px rgba(236, 224, 200, .35); background: radial-gradient(closest-side, rgba(255, 236, 190, .12), transparent); }
.sala-burbuja { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; font-size: .78rem; color: #f7f0e1;
    background: linear-gradient(180deg, #5b4064, #3b2c42); box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 164, 92, .55);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sala-burbuja::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #3b2c42; }
.sala-punto:hover .sala-burbuja, .sala-punto.mostrar .sala-burbuja, .sala-punto:focus-visible .sala-burbuja { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sala-punto[data-punto="gato"] .sala-burbuja { bottom: auto; top: calc(100% + 6px); }
.sala-punto[data-punto="gato"] .sala-burbuja::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #5b4064; }

/* ---------- Cocina: ollas al fuego ---------- */
.cocina-fuego { display: grid; gap: .6rem; margin: .8rem 0 1rem; }
.cocina-olla { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border-radius: 1rem; background: rgba(201, 164, 92, .08); border: 1px solid rgba(201, 164, 92, .3); }
.olla-svg { width: 64px; height: 64px; flex: none; overflow: visible; }
.olla-svg .burbuja { animation: burbuja 1.4s ease-in infinite; transform-box: fill-box; transform-origin: center; }
@keyframes burbuja { 0% { transform: translateY(0) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-7px) scale(1.1); opacity: 0; } }
.olla-svg .olla-vapor path { animation: vaporOlla 2.6s ease-in-out infinite; opacity: 0; }
.olla-svg .olla-vapor path:nth-child(2) { animation-delay: .8s; } .olla-svg .olla-vapor path:nth-child(3) { animation-delay: 1.6s; }
@keyframes vaporOlla { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .6; } 100% { opacity: 0; transform: translateY(-6px); } }
.olla-svg .olla-fuego { transform-box: fill-box; transform-origin: 50% 100%; animation: fuego .5s ease-in-out infinite alternate; }
@keyframes fuego { from { transform: scaleY(.85) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
.cocina-olla-info { flex: 1; min-width: 0; }
.cocina-barra { height: 4px; border-radius: 4px; background: rgba(236, 224, 200, .14); margin: .4rem 0 .25rem; overflow: hidden; }
.cocina-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c9a45c, #f3dca0); transition: width .4s linear; }
.cocina-tiempo { font-size: .74rem; color: #ece0c8; font-variant-numeric: tabular-nums; }
.cocina-frasco { position: relative; width: 26px; height: 32px; flex: none; border-radius: 4px 4px 6px 6px; border: 1.5px solid rgba(236, 224, 200, .6); overflow: hidden; background: rgba(236, 224, 200, .06); }
.cocina-frasco::before { content: ''; position: absolute; left: -2px; right: -2px; top: -1px; height: 5px; background: #efe4cf; z-index: 1; }
.cocina-frasco-dulce { position: absolute; left: 0; right: 0; bottom: 0; height: var(--llenado); background: var(--color); transition: height .4s linear; }

/* Monedas que vuelan a la bolsa */
.moneda-vuela { position: fixed; width: 20px; height: 20px; z-index: 90; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); }
.moneda-vuela .ico { width: 100%; height: 100%; }
.divisa.salto { animation: saltoContador .6s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- Accesorios de Cosecha y Huerto ---------- */
.accesorios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.accesorio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .9rem .8rem 1rem; border-radius: 1.1rem;
    background: radial-gradient(110% 80% at 50% 25%, rgba(201, 164, 92, .12), transparent 65%), rgba(12, 26, 16, .55); border: 1px solid rgba(236, 224, 200, .14); transition: transform .2s, border-color .2s; }
.accesorio:hover { transform: translateY(-2px); border-color: rgba(201, 164, 92, .55); }
.accesorio-vitrina { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, rgba(243, 220, 160, .16), transparent 68%); }
.accesorio-svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); transition: transform .3s; }
.accesorio:hover .accesorio-svg { transform: rotate(-3deg) scale(1.04); }
.accesorio-nombre { font-family: var(--f-titulo, Georgia, serif); font-size: .95rem; color: #f7f0e1; }
.accesorio-desc { font-size: .78rem; line-height: 1.35; color: #b4cdb4; flex: 1; }
.accesorio-tuyo { font-size: .76rem; color: #ece0c8; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(201, 164, 92, .55); }
.accesorio.tuyo { border-color: rgba(201, 164, 92, .45); }
@media (prefers-reduced-motion: reduce) { .olla-svg *, .cocina-barra span, .cocina-frasco-dulce { animation: none !important; transition: none !important; } }

/* ---------- Pie de página: firma y eslogan ---------- */
.pie-marca { padding: 2.2rem 1.5rem 2.4rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.pie-marca::before { content: ''; width: min(14rem, 60%); height: 1px; margin-bottom: .9rem; background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .55), transparent); }
.pie-adorno { position: absolute; top: 1.55rem; left: 50%; transform: translateX(-50%); padding: 0 .6rem; font-size: .7rem; color: #c9a45c; background: #0c1a10; line-height: 1; }
.pie-firma { font-family: var(--f-titulo, 'Playfair Display', Georgia, serif); font-size: 1rem; font-weight: 400; letter-spacing: .04em; color: rgba(247, 240, 225, .82); }
.pie-firma span { font-family: var(--f-texto, Georgia, serif); font-style: italic; font-size: .92em; color: rgba(236, 224, 200, .6); margin: 0 .15em; }
.pie-eslogan { font-family: var(--f-texto, Georgia, serif); font-style: italic; font-size: .86rem; letter-spacing: .03em; color: rgba(225, 192, 122, .62); }
@media (max-width: 767px) { .pie-marca { padding-bottom: 1.4rem; } }

/* Cestas: equipar la que se lleva al paseo */
.cesta-equipada { font-size: .76rem; color: #1d1626; background: #ece0c8; padding: .3rem .75rem; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.inventario-item .cesta-equipada, .inventario-item [data-equipar-cesta] { margin-left: auto; }
.cesta-elegir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .9rem; }
.cesta-elegir > span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #b4cdb4; margin-right: .2rem; }
.cesta-chip { font-size: .8rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(236, 224, 200, .3); color: #ece0c8; background: transparent; transition: background .2s, color .2s; }
.cesta-chip:hover { border-color: rgba(236, 224, 200, .6); }
.cesta-chip.activa { background: #ece0c8; color: #1d1626; border-color: #ece0c8; font-weight: 600; }

/* Burbujas por planta y por mascota (sala y Mi Habitación) */
.habitacion-marco { position: relative; }
.sala-punto.burbuja-abajo .sala-burbuja { bottom: auto; top: calc(100% + 6px); }
.sala-punto.burbuja-abajo .sala-burbuja::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #3b2c42; }
.planta-bebe { transform-box: fill-box; transform-origin: 50% 100%; animation: plantaBebe 1.8s ease .7s; }
@keyframes plantaBebe { 0%, 100% { transform: none; } 35% { transform: scale(1.04, 1.07); } 65% { transform: scale(.99, .98); } }
.hab-mascota.mascota-feliz .hab-mascota-cuerpo { filter: drop-shadow(0 0 6px rgba(255, 220, 170, .55)); }
.habitacion .corazon-sube { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: casitaCorazon 2.3s ease-out forwards; }
.habitacion .ronroneo { opacity: 0; animation: casitaRonroneo 2.4s ease forwards; }
.habitacion .regadera-anim { opacity: 0; transform-box: fill-box; transform-origin: 85% 40%; animation: casitaRegadera 2.3s ease forwards; }
.habitacion .gota-cae { opacity: 0; animation: casitaGota .8s ease-in 3; }
.sala-punto.burbuja-der .sala-burbuja { left: auto; right: 0; transform: translate(0, 6px); }
.sala-punto.burbuja-izq .sala-burbuja { left: 0; transform: translate(0, 6px); }
.sala-punto.burbuja-der:hover .sala-burbuja, .sala-punto.burbuja-der.mostrar .sala-burbuja, .sala-punto.burbuja-der:focus-visible .sala-burbuja,
.sala-punto.burbuja-izq:hover .sala-burbuja, .sala-punto.burbuja-izq.mostrar .sala-burbuja, .sala-punto.burbuja-izq:focus-visible .sala-burbuja { transform: translate(0, 0); }
.sala-punto.burbuja-der .sala-burbuja::after { left: auto; right: 12px; transform: none; }
.sala-punto.burbuja-izq .sala-burbuja::after { left: 12px; transform: none; }
.sala-punto.pausa .sala-burbuja { opacity: 0 !important; }
.escena-pestanas, .sala-acciones { position: relative; z-index: 6; }

/* ================= Mi Habitación: ventana que se abre y cisnes en el lago ================= */
.habitacion .hab-cisne-deriva { animation: habCisneDeriva 9s ease-in-out infinite alternate; }
.habitacion .hab-cisne-deriva.lenta { animation-duration: 14s; }
@keyframes habCisneDeriva { 0% { transform: translate(-3px, 0); } 50% { transform: translate(0, .6px); } 100% { transform: translate(3px, 0); } }
.habitacion .hab-cisne-cuerpo { animation: habCisneFlota 3.4s ease-in-out infinite; }
@keyframes habCisneFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.8px); } }
.habitacion .hab-cisne-onda { transform-box: fill-box; transform-origin: center; animation: habCisneOnda 3.4s ease-in-out infinite; }
@keyframes habCisneOnda { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.14); opacity: .1; } }
.habitacion .hoja-brisa { opacity: 0; transform-box: fill-box; animation: casitaBrisa 4.6s ease-in forwards; }
.habitacion.ventana-abierta .hab-cortina-izq, .habitacion.ventana-abierta .hab-cortina-der { animation-duration: 3.2s; }
.habitacion.ventana-abierta .hab-cortina-der { animation-delay: -1.6s; }
.habitacion .hab-hojas-abiertas { animation: habAparecer .5s ease forwards; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .habitacion .hab-cisne-deriva, .habitacion .hab-cisne-cuerpo, .habitacion .hab-cisne-onda { animation: none; } }

/* ================= Tu cuenta y respaldo · Política de privacidad ================= */
.pie-enlaces { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; font-size: .8rem; color: rgba(236, 224, 200, .45); }
.pie-enlaces a, .pie-enlaces button { color: rgba(236, 224, 200, .7); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 224, 200, .3); }
.pie-enlaces a:hover, .pie-enlaces button:hover { color: #f7f0e1; }
.btn-cuenta { position: relative; }
.btn-cuenta-punto { position: absolute; top: .3rem; right: .3rem; width: .42rem; height: .42rem; border-radius: 50%; background: #9db59a; box-shadow: 0 0 0 2px #0c1a10; display: none; }
.btn-cuenta.con-cuenta .btn-cuenta-punto { display: block; }
.cuenta-panel, .priv-panel { width: min(100%, 32rem); }
.cuenta-cuerpo { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; text-align: left; }
.cuenta-pestanas { display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(12, 26, 16, .6); border: 1px solid rgba(180, 205, 180, .18); }
.cuenta-pestanas button { flex: 1; padding: .5rem; border-radius: 999px; font-size: .86rem; color: #d7e4d7; }
.cuenta-pestanas button.activa { background: #ece0c8; color: #1d1626; font-weight: 600; }
.cuenta-form { display: flex; flex-direction: column; gap: .7rem; }
.cuenta-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .86rem; color: #d7e4d7; }
.cuenta-form label small { color: #9fb39f; font-size: .76rem; }
.cuenta-form input[type="email"], .cuenta-form input[type="password"] { padding: .7rem .85rem; border-radius: .8rem; background: rgba(12, 26, 16, .75); border: 1px solid rgba(180, 205, 180, .28); color: #f7f0e1; font-size: 1rem; }
.cuenta-form input:focus { outline: none; border-color: #ece0c8; box-shadow: 0 0 0 3px rgba(236, 224, 200, .15); }
.cuenta-form .pago-boton { margin-top: .3rem; }
.cuenta-check { flex-direction: row !important; align-items: flex-start; gap: .55rem !important; line-height: 1.35; }
.cuenta-check input { margin-top: .2rem; accent-color: #9db59a; width: 1rem; height: 1rem; flex-shrink: 0; }
.cuenta-check a, .cuenta-aviso a { color: #ece0c8; text-decoration: underline; text-underline-offset: 2px; }
.cuenta-aviso { font-size: .8rem; line-height: 1.45; color: #e8dcc6; background: rgba(201, 164, 92, .1); border: 1px solid rgba(201, 164, 92, .28); border-radius: .8rem; padding: .6rem .75rem; }
.cuenta-nota { font-size: .8rem; line-height: 1.45; color: #b4cdb4; }
.cuenta-sub { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: #c9a45c; margin-bottom: .2rem; }
.cuenta-estado { display: flex; flex-direction: column; gap: .6rem; padding: .85rem 1rem; border-radius: 1rem; background: rgba(12, 26, 16, .5); border: 1px solid rgba(180, 205, 180, .15); }
.cuenta-estado strong { color: #f7f0e1; font-weight: 600; word-break: break-all; }
.cuenta-fila { display: flex; gap: .55rem; flex-wrap: wrap; }
.cuenta-fila .pago-boton { margin-top: 0; flex: 1 1 12rem; white-space: normal; font-size: .9rem; padding: .8rem .9rem; }
.pago-boton.secundario { background: transparent; color: #ece0c8; border: 1px solid rgba(236, 224, 200, .4); box-shadow: none; }
.pago-boton.secundario:hover { background: rgba(236, 224, 200, .08); box-shadow: none; }
.pago-boton.peligro { background: #7a2f3a; color: #fbefe8; box-shadow: none; }
.pago-enlace.peligro { color: #e6a3a0; }
.cuenta-subir { cursor: pointer; text-align: center; }
.cuenta-archivo { padding-top: .8rem; border-top: 1px dashed rgba(180, 205, 180, .2); display: flex; flex-direction: column; gap: .5rem; }
.cuenta-pie { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.cuenta-elegir { display: flex; flex-direction: column; gap: .7rem; color: #e8e4f1; line-height: 1.45; }
.cuenta-elegir .pago-boton { margin-top: 0; flex-direction: column; gap: .15rem; white-space: normal; }
.cuenta-elegir .pago-boton small { font-weight: 400; font-size: .76rem; opacity: .8; }
.cuenta-mensaje { font-size: .86rem; padding: .6rem .8rem; border-radius: .8rem; line-height: 1.4; }
.cuenta-mensaje.ok { background: rgba(157, 181, 154, .16); color: #d6e6d3; border: 1px solid rgba(157, 181, 154, .35); }
.cuenta-mensaje.error { background: rgba(160, 70, 80, .18); color: #f2c6c4; border: 1px solid rgba(220, 120, 120, .35); }
.priv-texto { margin-top: 1rem; text-align: left; color: #e3dccd; font-size: .95rem; line-height: 1.6; }
.priv-texto h3 { font-family: var(--f-titulo, 'Playfair Display', Georgia, serif); font-size: 1.05rem; color: #f7f0e1; margin: 1.2rem 0 .35rem; }
.priv-texto p + p { margin-top: .55rem; }
.priv-texto ul { margin: .4rem 0 .6rem 1.1rem; list-style: '✦  '; }
.priv-texto li { margin-bottom: .45rem; padding-left: .2rem; }
.priv-texto li::marker { color: #c9a45c; font-size: .8em; }
.priv-texto strong { color: #f7f0e1; }
.priv-intro { font-style: italic; color: #ece0c8; }
.priv-firma { margin-top: 1.2rem !important; text-align: center; font-style: italic; color: rgba(225, 192, 122, .8); }
.priv-falta { background: rgba(201, 164, 92, .18); border: 1px dashed rgba(201, 164, 92, .7); border-radius: .3rem; padding: 0 .3rem; color: #f6dfa8; }
/* botones secundarios de la cuenta: contorno crema (por encima del ciruela de los botones principales) */
.cuenta-panel .pago-boton.secundario { background: transparent !important; color: #ece0c8 !important; box-shadow: inset 0 0 0 1px rgba(236, 224, 200, .45) !important; }
.cuenta-panel .pago-boton.secundario:hover { background: rgba(236, 224, 200, .08) !important; }
.cuenta-panel .pago-boton.peligro { background: #7a2f3a !important; box-shadow: none !important; }
.priv-texto a { color: #ece0c8; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(236, 224, 200, .45); }
.cuenta-aviso.fuerte { display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; background: rgba(201, 164, 92, .14); border-color: rgba(201, 164, 92, .5); }
.cuenta-olvido { font-size: .84rem; color: #d7e4d7; border: 1px solid rgba(180, 205, 180, .18); border-radius: .8rem; padding: .55rem .8rem; }
.cuenta-olvido summary { cursor: pointer; color: #ece0c8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 224, 200, .35); }
.cuenta-olvido p { margin-top: .5rem; }
.cuenta-olvido ul, .cuenta-sin ul { margin: .35rem 0 0 1rem; list-style: '✦  '; display: flex; flex-direction: column; gap: .3rem; line-height: 1.4; }
.cuenta-olvido li::marker, .cuenta-sin li::marker { color: #c9a45c; font-size: .8em; }
.cuenta-olvido a { color: #ece0c8; text-decoration: underline; }
.cuenta-sin { font-size: .84rem; color: #d7e4d7; padding-top: .8rem; border-top: 1px dashed rgba(180, 205, 180, .2); }
.cuenta-sin strong { color: #f7f0e1; font-weight: 600; }
.cuenta-sin + .cuenta-archivo { border-top: 0; padding-top: 0; }
.cuenta-sin + .cuenta-archivo .cuenta-sub { display: none; }

/* ================= Sobre mí ================= */
.sobre-seccion { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6rem; padding-bottom: 1rem; }
.sobre-carta, .sobre-taller { position: relative; border-radius: 1.6rem; padding: clamp(1.6rem, 5vw, 3rem) clamp(1.3rem, 5vw, 3.2rem);
    background: radial-gradient(120% 60% at 50% 0%, rgba(232, 228, 241, .08), transparent 60%), linear-gradient(180deg, #16223a 0%, #0f1a2d 100%);
    border: 1px solid rgba(201, 164, 92, .3); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); color: #e8e1d2; }
.sobre-carta::before { content: ''; position: absolute; inset: .7rem; border: 1px solid rgba(201, 164, 92, .18); border-radius: 1.1rem; pointer-events: none; }
.sobre-emblema { display: block; width: 5.2rem; height: 5.2rem; margin: 0 auto .9rem; }
.sobre-eyebrow { text-align: center; font-family: var(--f-especial, 'Cinzel', serif); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: #c9a45c; }
.sobre-titulo { text-align: center; font-family: var(--f-principal, 'Playfair Display', Georgia, serif); font-weight: 400; font-size: clamp(1.9rem, 6vw, 2.7rem); color: #f7f0e1; margin: .35rem 0 1.4rem; line-height: 1.15; }
.sobre-titulo.pequeno { font-style: italic; font-size: clamp(1.25rem, 4.2vw, 1.65rem); }
.sobre-texto { display: flex; flex-direction: column; gap: 1rem; font-size: clamp(1.05rem, 2.6vw, 1.18rem); line-height: 1.72; }
.sobre-texto em { color: #f3dca0; }
.sobre-capitular::first-letter { float: left; font-family: var(--f-principal, 'Playfair Display', Georgia, serif); font-size: 3.4em; line-height: .9; padding: .06em .05em 0 0; color: #e1c07a; }
.sobre-firma { margin-top: 1.6rem; text-align: right; font-family: var(--f-principal, 'Playfair Display', Georgia, serif); font-style: italic; font-size: 1.35rem; color: #e1c07a; }
.sobre-firma::before { content: '— '; color: rgba(225, 192, 122, .55); }
.sobre-meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; margin: 1.5rem 0 .5rem; padding: 0; list-style: none; }
.sobre-meses li { text-align: center; font-family: var(--f-especial, 'Cinzel', serif); font-size: .64rem; letter-spacing: .06em; padding: .55rem 0; border-radius: .6rem; color: rgba(232, 225, 210, .38); border: 1px solid rgba(232, 225, 210, .08); }
.sobre-meses li.abre { color: #1d1626; background: linear-gradient(180deg, #f3e6c8, #e1c07a); border-color: transparent; font-weight: 600; box-shadow: 0 6px 14px rgba(225, 192, 122, .25); }
@media (max-width: 520px) { .sobre-meses { grid-template-columns: repeat(6, 1fr); } }
.sobre-meses-nota { text-align: center; font-size: .86rem; font-style: italic; color: rgba(225, 192, 122, .8); }
.sobre-cierre { margin-top: 1.3rem; text-align: center; font-size: 1.12rem; font-style: italic; line-height: 1.6; color: #f3ead6; }
.sobre-acciones { margin-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.1rem; }
.sobre-boton { display: inline-flex; padding: .85rem 1.5rem; border-radius: 999px; background: var(--cta, #3B2C42); color: #f7f0e1; font-weight: 600; box-shadow: 0 0 0 1px rgba(201, 164, 92, .55), 0 10px 24px rgba(0, 0, 0, .35); text-decoration: none; }
.sobre-boton:hover { filter: brightness(1.15); }
.sobre-enlace { color: #ece0c8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 224, 200, .4); }
.tienda-sobre { display: inline-block; margin-top: .7rem; font-size: .86rem; font-style: italic; color: #e1c07a; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(225, 192, 122, .4); }
.tienda-sobre:hover { color: #f3dca0; }

/* ================= Textos protegidos (Sobre mí y Papelería): no se pueden seleccionar ni copiar ================= */
#seccion-sobre-mi, #seccion-tienda { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#seccion-tienda input, #seccion-tienda textarea { -webkit-user-select: text; user-select: text; }
#seccion-sobre-mi img, #seccion-tienda img { -webkit-user-drag: none; }

/* ================= Tareas: cambiar etiqueta y sub-tareas (desplegable, minimal) ================= */
.tarea-pie-izq { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
button.tarea-tipo { padding: .12rem .45rem .12rem .3rem; border-radius: 999px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
button.tarea-tipo:hover, button.tarea-tipo[aria-expanded="true"] { background: rgba(87, 80, 63, .08); border-color: var(--crema-300, #e2d6bd); }
.tarea-tipo-flecha { font-size: .6rem; opacity: .55; margin-left: .1rem; }
.tarea-tipo-menu { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; padding: .45rem; border-radius: .7rem; background: rgba(87, 80, 63, .06); border: 1px dashed var(--crema-300, #e2d6bd); }
.tarea-tipo-menu button { display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; padding: .25rem .55rem; border-radius: 999px; color: var(--tinta-700, #57503f); border: 1px solid var(--crema-300, #e2d6bd); background: var(--crema-50, #fbf7ef); }
.tarea-tipo-menu button .ico { color: var(--tipo); filter: saturate(1.3) brightness(.75); }
.tarea-tipo-menu button:hover { border-color: var(--tipo); }
.tarea-tipo-menu button.actual { border-color: var(--tipo); box-shadow: inset 0 0 0 1px var(--tipo); font-weight: 600; }
.tarea-sub-toggle { display: inline-flex; align-items: center; gap: .2rem; font-size: .64rem; color: var(--tinta-700, #57503f); padding: .12rem .4rem; border-radius: 999px; opacity: .75; font-variant-numeric: tabular-nums; }
.tarea-sub-toggle:hover, .tarea-sub-toggle.abierto { opacity: 1; background: rgba(87, 80, 63, .08); }
.tarea-sub-flecha { display: inline-block; font-size: .8rem; line-height: 1; transition: transform .2s; }
.tarea-sub-toggle.abierto .tarea-sub-flecha { transform: rotate(90deg); }
.tarea-sub { margin-top: .45rem; padding: .35rem 0 .1rem .55rem; border-left: 1px dashed var(--crema-300, #e2d6bd); animation: subAbrir .2s ease; }
@keyframes subAbrir { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.tarea-sub-lista { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .3rem; }
.tarea-sub-lista li { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--tinta-900, #2e2a22); line-height: 1.35; }
.tarea-sub-lista li.hecha .tarea-sub-texto { text-decoration: line-through; color: #8a8270; }
.tarea-sub-check { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--tinta-700, #57503f); }
.tarea-sub-check svg { width: 100%; height: 100%; }
.tarea-sub-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tarea-sub-borrar { opacity: 0; color: #a0675f; font-size: .9rem; line-height: 1; padding: 0 .2rem; transition: opacity .15s; }
.tarea-sub-lista li:hover .tarea-sub-borrar, .tarea-sub-borrar:focus-visible { opacity: 1; }
@media (hover: none) { .tarea-sub-borrar { opacity: .55; } }
.tarea-sub-form input { width: 100%; font-size: .74rem; padding: .3rem .45rem; border-radius: .5rem; border: 1px solid var(--crema-300, #e2d6bd); background: rgba(255, 255, 255, .55); color: var(--tinta-900, #2e2a22); }
.tarea-sub-form input:focus { outline: none; border-color: var(--tinta-700, #57503f); background: #fff; }
.tarea-sub-form input::placeholder { color: #9a917d; font-style: italic; }

/* Muestra gratuita del journal */
.destacado-muestra { display: inline-flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .7rem 1.1rem; border-radius: 999px; color: #ece0c8; border: 1px solid rgba(236, 224, 200, .45); text-decoration: none; transition: background .2s, border-color .2s; width: fit-content; }
.destacado-muestra:hover { background: rgba(236, 224, 200, .08); border-color: rgba(236, 224, 200, .7); }
.destacado-muestra svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; color: #e1c07a; }
.destacado-muestra span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; }
.destacado-muestra small { font-weight: 400; font-size: .74rem; opacity: .75; }
.destacado-muestras { display: flex; flex-wrap: wrap; gap: 0 .7rem; }
.destacado-descarga { background: rgba(225, 192, 122, .1); border-color: rgba(225, 192, 122, .55); }
.destacado-descarga:hover { background: rgba(225, 192, 122, .18); border-color: rgba(225, 192, 122, .85); }
.muestra-aviso-demo { font-size: .72rem; color: #e1c07a; text-align: center; margin-top: .5rem; }
.muestra-aviso { margin-top: .4rem; font-size: .78rem; font-style: italic; color: #b4cdb4; }
.destacado-cuerpo > p + p { margin-top: .6rem; }

/* ===== Testimonios de la Papelería (se muestran solo si hay testimonios reales en catalogo.json) ===== */
.testimonios { margin: 1.4rem 0 .4rem; padding: clamp(1.2rem, 4vw, 2rem); border-radius: 1.4rem;
    background: radial-gradient(120% 90% at 50% 0%, rgba(91, 64, 100, .45), rgba(34, 23, 42, .75)); border: 1px solid rgba(225, 192, 122, .22); text-align: center; }
.testimonios-eyebrow { font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: #e1c07a; }
.testimonios-titulo { font-family: var(--f-principal, 'Playfair Display', serif); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.7rem); color: #f1ece2; margin: .3rem 0 1.1rem; }
.testimonios-rejilla { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); text-align: left; }
.testimonio { margin: 0; position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem 1.1rem 1rem; border-radius: 1rem;
    background: rgba(241, 236, 226, .05); border: 1px solid rgba(241, 236, 226, .12); }
.testimonio-comillas { width: 1.6rem; height: 1.2rem; color: rgba(225, 192, 122, .7); }
.testimonio blockquote { margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; line-height: 1.5; color: #ece0c8; flex: 1; }
.testimonio figcaption { display: flex; align-items: center; gap: .65rem; }
.testimonio-inicial { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-family: 'Playfair Display', serif;
    color: #22172a; background: linear-gradient(145deg, #ead29a, #c9a45c); }
.testimonio figcaption strong { display: block; font-size: .85rem; font-weight: 600; color: #f1ece2; }
.testimonio figcaption small { display: block; font-size: .72rem; color: rgba(241, 236, 226, .6); }
.testimonios-vacio { max-width: 34rem; margin: 0 auto; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.08rem; line-height: 1.5; color: #ece0c8; }
.testimonio-compartir { max-width: 34rem; margin: 1.1rem auto 0; text-align: left; }
.testimonio-compartir summary { list-style: none; cursor: pointer; width: fit-content; margin: 0 auto; padding: .6rem 1.2rem; border-radius: 999px;
    border: 1px solid rgba(225, 192, 122, .55); color: #f1ece2; background: rgba(225, 192, 122, .1); font-size: .86rem; transition: background .2s; }
.testimonio-compartir summary::-webkit-details-marker { display: none; }
.testimonio-compartir summary:hover { background: rgba(225, 192, 122, .2); }
.testimonio-compartir[open] summary { margin-bottom: 1rem; }
.testimonio-form { display: grid; gap: .8rem; }
.testimonio-form label { display: grid; gap: .3rem; font-size: .82rem; color: #f1ece2; }
.testimonio-form label small { font-size: .72rem; color: rgba(241, 236, 226, .6); }
.testimonio-form input:not([type="checkbox"]), .testimonio-form textarea { width: 100%; padding: .6rem .75rem; border-radius: .7rem; font: inherit; font-size: .9rem;
    color: #f1ece2; background: rgba(15, 10, 20, .45); border: 1px solid rgba(241, 236, 226, .2); }
.testimonio-form textarea { resize: vertical; min-height: 6rem; font-family: 'Cormorant Garamond', serif; font-size: 1.02rem; }
.testimonio-form input:focus, .testimonio-form textarea:focus { outline: 2px solid rgba(225, 192, 122, .6); outline-offset: 1px; }
.testimonio-form .testimonio-autoriza { display: flex; align-items: flex-start; gap: .55rem; font-size: .76rem; line-height: 1.45; color: rgba(241, 236, 226, .8); }
.testimonio-autoriza input { margin-top: .2rem; accent-color: #c9a45c; flex: none; }
.testimonio-autoriza a, .testimonio-correo a { color: #e1c07a; text-decoration: underline; text-underline-offset: 2px; }
.testimonio-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.testimonio-enviar { justify-self: start; padding: .65rem 1.3rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: #f1ece2;
    background: linear-gradient(180deg, #5b4064, #4a3352 55%, #3b2c42); border: 1px solid rgba(225, 192, 122, .35); }
.testimonio-enviar:disabled { opacity: .6; }
.testimonio-estado { font-size: .8rem; color: #f3b4c0; }
.testimonio-estado.ok { color: #e1c07a; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; }
.testimonio-correo { margin-top: .9rem; font-size: .76rem; color: rgba(241, 236, 226, .65); text-align: center; }
.testimonio-form [hidden], .testimonio-form label[hidden] { display: none !important; }

/* ---------- Cada paisaje de la ventana cambia con la hora (nieve, lluvia, primavera, otoño) ---------- */
.casita .p-cielo-noche, .casita .p-cielo-amanecer, .casita .p-cielo-atardecer, .casita .p-estrellas, .casita .p-velo-noche, .casita .p-tinte-amanecer, .casita .p-tinte-atardecer { display: none; }
html[data-momento="noche"] .casita .p-cielo-dia { display: none; }
html[data-momento="noche"] .casita .p-cielo-noche, html[data-momento="noche"] .casita .p-estrellas, html[data-momento="noche"] .casita .p-velo-noche { display: inline; }
html[data-momento="amanecer"] .casita .p-tinte-amanecer, html[data-momento="atardecer"] .casita .p-tinte-atardecer,
html[data-momento="amanecer"] .casita .p-cielo-amanecer, html[data-momento="atardecer"] .casita .p-cielo-atardecer { display: inline; }
html[data-momento="amanecer"] .casita .p-estrellas { display: inline; opacity: .35; }
.casita .p-velo-noche { mix-blend-mode: multiply; }
/* el sol va detrás de los árboles de cada paisaje (el sol y el tinte generales de la sala ya no hacen falta) */
.casita .s-sol, .casita .s-cielo-tinte { display: none !important; }
.casita .p-sol { display: none; }
html[data-momento="dia"] .casita .p-sol-alto, html[data-momento="amanecer"] .casita .p-sol-bajo, html[data-momento="atardecer"] .casita .p-sol-bajo { display: inline; }
.cuenta-texto { margin-top: .2rem; }
.cuenta-texto summary { cursor: pointer; font-size: .78rem; color: #b4cdb4; text-decoration: underline; text-underline-offset: 3px; }
.cuenta-texto[open] { display: flex; flex-direction: column; gap: .5rem; }
.cuenta-texto-caja { width: 100%; min-height: 5.5rem; padding: .55rem .65rem; border-radius: .7rem; border: 1px solid rgba(180, 205, 180, .3);
    background: rgba(12, 26, 16, .55); color: #ece0c8; font: .72rem/1.35 ui-monospace, Menlo, Consolas, monospace; resize: vertical; }