/* ==================================================================
   ARCHIVO PRODITAE — full project guide
   ------------------------------------------------------------------
   WHERE THE DOCUMENTATION LIVES: here (the big picture), at the top of
   each part of script.js (how to edit each list and setting), and at
   the top of every .php file (what each backend does). The site is
   edited by hand (Notepad2) or with Claude.

   FILES AND FOLDERS NEXT TO index.html:
     assets/css/styles.css  -> this file (all the styling)
     assets/js/script.js    -> all the interactivity + every editable list
     assets/img/            -> round hero photos, 88x31 button
     assets/img/banners/    -> wide cover banners (see BANNER_IMAGES)
     assets/fonts/          -> every font, self-hosted (see FONTS below)
     sfx/                   -> sound files (list below)
     fotos/                 -> gallery photos (see PHOTOS in script.js)
     muro.php               -> the alley wall's backend (guestbook)
     youtube.php            -> reads your channel's feed, caches it + thumbnails
     mascota.php            -> Huesito, the pet every visitor looks after
     lib/cacert.pem         -> HTTPS certificates, so PHP on Windows can
                               reach YouTube (see lib/README.txt)
     presencia.php          -> live "who's here right now" backend
     contador.php           -> the visit counter's backend
     datos/                 -> where the wall's tags and the visit count
                               get saved (plain text files)

   100% SELF-HOSTED: nothing the page NEEDS loads from Google, a CDN
   or any other outside service — fonts, scripts, images, sounds, the
   guestbook and the visit counter all live in these folders. The one
   exception is optional: the GoatCounter stats script in <head>
   (proditae.goatcounter.com). It only feeds your stats dashboard; if
   that service ever vanishes or an adblocker blocks it, nothing on
   the page changes. The only "outside" things are
   the plain links to your social profiles, which just open in a new
   tab; if one of those services ever disappears, the page itself
   keeps working exactly the same.

   LAYOUT — ORDER OF THE BOXES:
   <main> uses CSS Grid: every 3 consecutive <section class="panel">
   form one row, and the row stretches to the height of its tallest
   box (that's what fixed the old "staircase" look).
     Row 1: Sobre mí · Trabajemos · Mis redes
     Row 2: ¿Invitame algo? · Mis videos (YouTube) · Huesito (shared pet)
     Full width: Galería (grid-column: 1 / -1)
   <footer>, top to bottom:
     signature quote
     ".footer-trio" row: Oráculo · Ofrendas · Encendé una vela
     credits · back-to-index link
     Muro del Callejón (the guestbook)
     ".footer-banners" row: Botonera (88×31 wall) · Botón de sitio
     visit counter
   Moving <section> tags around in the HTML regroups the rows by
   itself — nothing here in the CSS needs to change for that.
   That's the 3-column layout for laptops and desktops. Tablets get 2
   columns and phones 1 (section 18, RESPONSIVE). Each box's personal
   look — fonts, colors, props — lives in section 17, BOX IDENTITIES.

   RANDOM POOLS — all edited in script.js, never in the HTML:
     WHISPER_GREETINGS -> typewriter line above your photo
     HERO_PHOTOS       -> round photo above your name
     BANNER_IMAGES     -> wide cover image at the very top
     MARQUEE_PHRASES   -> scrolling text strip
     TAROT_DECK        -> oracle cards (22 cards, several readings each)
     ORACLE_INTROS     -> the line under the Oráculo title
     ORACLE_WARNINGS   -> the pitonisa judging anyone who draws 3+ cards a day
     PORTRAIT_SECRETS  -> whispers when someone clicks your photo
     RAT_SECRETS       -> whispers when someone clicks the alley rat
     FLYER_SECRETS     -> whispers from the flyers' tear-off tabs (alley)
     NEON_SECRETS      -> whispers when someone clicks the neon sign (alley)
   The one rule for all of them: every line ends with a comma —
   including the last one. If the page suddenly loses ALL its effects
   after you edit a list, a missing comma or quote is almost always
   the reason: press F12 -> "Console" and it points to the exact line.

   HOW MANY PHRASES A LIST NEEDS — the rule we settled on:
     Lists you click through: enough that nobody sees a repeat in 5
     minutes of nonstop use. Phrases = 300 s ÷ seconds per interaction
     (click + read):
       ~6 s  -> 50   your photo, the rat, the neon
       ~9 s  -> 35   the payphone (its messages type themselves out)
       ~12 s -> 25   the ouija (you type, it spells): it has 40 general
                     answers + 36 for cuándo/quién/dónde/por qué
       ~25 s -> 12   the unsent letters (long reads)
     Night-only versions: half (25) — they're only on 2 hours a day.
     Lists that change ONCE PER VISIT and never repeat until all have
     shown (the greeting above your photo, the MSN status): 40 — about
     three months of regular visits before anything repeats.
     Secondary once-per-visit lines (the oracle's intro): 20.
     Automatic events (nobody clicks): phrases = how long they should
     last ÷ the average time between events. The rat's spray grafitis:
     one every ~80 s -> 70 ≈ an hour and a half (and 70 taunts, since
     they come out together). Scrubbing her grafitis off: 50 complaints
     (it's a click), 30 revenge lines (at most twice per round), 20
     truce lines (once per round; rounds take 5+ minutes). The ouija's
     sounds in text: an apparition every 6-12 s at the board, about one
     in four is a sound -> 50 ≈ half an hour before one repeats. The cat:
     50 lines (clicked like any character); the rat's panic 20 (the cat
     only comes every 5-10 min -> over two hours). Wishes: 30 (writing
     one takes ~15 s -> 5 minutes of nonstop wishing). The girl at the corner
     is clicked like the other characters -> 50, same as the rat and the neon.
     Huesito: 24 general + 12 per mood (36 per mood when clicked), and
     10 per action (each action has a 5-minute wait anyway).
     Every random list uses a no-repeat deck, so these numbers hold.

   SOUND (sfx/ folder — while a file is missing, that sound just stays
   silent; nothing breaks):
     sfx/bed.mp3              background ambience (the button top right)
     sfx/click.mp3            a click anywhere on the page
     sfx/egg-hover.mp3        hovering an ofrenda
     sfx/egg-click.mp3        clicking an ofrenda / your photo / the rat,
                              and after painting the wall
     sfx/candle.mp3           lighting ONE candle
     sfx/candles-complete.mp3 lighting the 5th (last) candle
     sfx/secret.mp3           finding a secret (secrets collection)
     sfx/zumbido.mp3          sending an MSN nudge
     sfx/telefono.mp3         picking up the payphone in the alley

   PUBLISHING CHANGES — IMPORTANT, OR VISITORS SEE A BROKEN PAGE:
   Browsers keep a saved copy of styles.css and script.js. If you
   update the site and a returning visitor's browser reuses the OLD
   stylesheet with the NEW page, everything looks broken (text jammed
   together, wrong fonts, missing banner). Two things prevent that:
     1. In index.html, styles.css and script.js are loaded with a
        version tag: "styles.css?v=2026-11-02-c". Every time you change
        styles.css or script.js, change that tag (both of them) — a
        new date, or add -c, -d... to the same one — to
        the browser it's then a brand-new file, so it fetches it.
     2. The .htaccess file next to index.html tells browsers to
        always double-check the page, CSS and JS with the server
        (cheap: if nothing changed, nothing is re-downloaded).
   When checking your own changes, press Ctrl+F5 to skip your cache.

   PUBLIC ACCESS (Tailscale Funnel): the wall and the counter need PHP,
   so Funnel must pass visitors on to Laragon's web server (a port,
   e.g. "tailscale funnel 80") — not serve the folder by itself. Quick
   test: open .../archivo-proditae/muro.php in the browser; you should
   see something like {"ok":true,"entries":[]}. If you see PHP code, or it
   downloads a file, Funnel is serving the folder directly. Behind
   Funnel every visit reaches Laragon from this same computer, so
   muro.php/contador.php read each visitor's real address from the
   X-Forwarded-For header that Tailscale adds (details in muro.php).

   EXTRAS — all in the EXTRAS part at the very end of script.js, each
   with its own settings in CAPITAL_LETTERS (styles: section 19):
     SECRETS / SECRET_REWARD   15 hidden things to find; the tracker is in
                               the footer; finding all 15 shows your
                               reward text and turns your name gold
     MADRUGADA_FROM / _TO      "3 AM mode" hours (visitor's clock). Preview
                               it anytime: add ?madrugada to the address
     KONAMI_CODE / KONAMI_TAPS "modo 2006": ↑↑↓↓←→←→BA, or tap the name 7x
     SCREENSAVER_SECONDS       idle time before the bouncing logo (computers)
     NUDGE_COOLDOWN_SECONDS    the MSN nudge button in Mis redes
     WALKMAN_TRACKS            your songs for the hidden walkman (📼 in
                               Sobre mí); mp3 files go in the "musica" folder
     SPECIAL_VISITS            messages for exact visitor numbers (666...)
     STATUS_MESSAGES / _FIXED  the MSN-style "estado" under your name
     PET_LINES                 what Huesito says (by mood + after each action)
     RAT_GRAFFITI              what the rat sprays on the wall (alley)
     RAT_SPRAY_TAUNTS          what she says while painting over someone's grafiti
     RAT_ERASED_LINES          the rat, when you scrub her grafiti off
     RAT_REVENGE_LINES         the rat, coming back to repaint
     RAT_TRUCE_LINES           the rat, giving up (white flag)
     CAT_LINES                 the cat (the rat's nemesis)
     RAT_CAT_LINES             the rat, running from the cat
     WISH_REPLIES              answers after you burn a wish (candles)
     ALLEY_GIRL_LINES          the girl who walks through the alley
     (preview them from the console, F12: ratSprayNow(), summonAlleyGirl())
     BUTTONS_88                the Botonera's 88×31 buttons (images go in
                               assets/img/botones/) + the scrolling strip
     TITLE_VARIANTS            MSN-style decorated tab titles (rotate)
     PAST_NAMES                your old names/aliases that haunt the
                               screensaver over time
     PRESENCE_LINES            "ahora mismo hay N personas en mi cuarto"
                               (presencia.php counts who's here right now)
     MOON_PHASES               today's real moon in the oracle (?luna=llena
                               previews the full moon)
     PHONE_MESSAGES            the payphone's voicemails in the alley
     OUIJA_ANSWERS             what the ouija spells + the spirit's line
     OUIJA_WHEN / _WHO / _WHERE / _WHY  answers to cuándo/quién/dónde/por qué
     OUIJA_SPIRITS             the six spirits who sign the answers
     OUIJA_SOUNDS              spooky sounds, written out (never audio)
     UNSENT_LETTERS            the envelope pinned among the ofrendas
     SPECIAL_DATES / BIRTHDAY  Día de Muertos, San Valentín, your birthday
                               (preview: ?fecha=muertos / valentin / cumple)
     (magic words: typing one of PAST_NAMES summons it as a ghost;
      typing "proditae" glitches the page — computers only)
   Every random list uses a no-repeat "deck": nothing repeats until all
   its items have come out (see NO-REPEAT PICKERS near the top of
   script.js). The banner breathing settings are in section 20.

   ALLEY WALL (guestbook) — fully local, no accounts, no outside
   service. muro.php saves every tag into datos/muro.txt on your
   own server. It needs PHP, which Laragon already runs. The comment
   at the top of muro.php explains everything: how to delete a tag,
   the anti-spam measures, and the settings you can change.
   VISIT COUNTER — also local: contador.php keeps the total in
   datos/visitas.txt (a single number you can edit by hand). Details
   at the top of contador.php.
     IMPORTANT: datos/ holds your visitors' messages and the count.
     Back it up now and then, and make sure no export or sync tool
     ever overwrites or deletes that
     folder or muro.php.

   STILL PLACEHOLDER — visible text to replace before going public.
   Search the HTML for these exact bits:
     "Estado: [ej. soñando despierta]"     (tag under your name)
     "[Aquí va tu bio"                      (Sobre mí, 1st paragraph)
     "[Segundo párrafo opcional"            (Sobre mí, 2nd paragraph)
     "[Tu signo]" "[Canción / artista]"
     "[Viendo / leyendo / jugando]" "[Un dato random sobre vos]"
     "todo este bloque es texto de muestra" (admin note, visible!)
     "para agregar/sacar fotos no toques"   (admin note under the
                                             gallery, visible!)
     "[tu frase de firma acá]"              (footer quote)
     "Fondo y SFX: [a agregar"              (footer credits)
   And in script.js: the PHOTOS list still points to fotos/01.jpg …
   06.jpg with "[leyenda]" captions (they show "falta esta foto"
   until real files exist).
   ================================================================== */

/* ==================================================================
   FONTS
   ------------------------------------------------------------------
   Every font on this page is self-hosted — nothing loads from Google
   or any other external service. The files live in assets/fonts/.
   This stylesheet lives in assets/css/, so every url() below goes up
   one level ('../') and then into fonts/ — that's what '../fonts/'
   means. (Heads-up from a real bug: an older version kept the fonts
   in a "fonts" folder next to index.html, which these paths could
   never reach, so those fonts silently fell back to generic ones.)
   Files required:
     assets/fonts/eb-garamond-latin-400-normal.woff2
     assets/fonts/eb-garamond-latin-400-italic.woff2
     assets/fonts/eb-garamond-latin-500-italic.woff2
     assets/fonts/space-mono-latin-400-normal.woff2
     assets/fonts/space-mono-latin-700-normal.woff2
     assets/fonts/rubik-bubbles-latin-400-normal.woff2
     assets/fonts/permanent-marker-latin-400-normal.woff2
     assets/fonts/playfair-display-latin-600-normal.woff2
     assets/fonts/playfair-display-latin-500-italic.woff2 (your mantra)
     assets/fonts/righteous-latin-400-normal.woff2       (Mis videos)
     assets/fonts/press-start-2p-latin-400-normal.woff2  (Huesito)
     assets/fonts/sedgwick-ave-latin-400-normal.woff2    (wall grafitis)
     assets/fonts/rubik-spray-paint-latin-400-normal.woff2 (wall grafitis)
     assets/fonts/rock-salt-latin-400-normal.woff2       (wall grafitis)
     assets/fonts/caveat-latin-700-normal.woff2          (Sobre mí)
     assets/fonts/lobster-latin-400-normal.woff2         (Donaciones)
     assets/fonts/vt323-latin-400-normal.woff2           (Botón de sitio)
     assets/fonts/special-elite-latin-400-normal.woff2   (Galería)
     assets/fonts/cinzel-latin-600-normal.woff2          (Oráculo cards)
     assets/fonts/cinzel-latin-700-normal.woff2          (Oráculo title)
     assets/fonts/im-fell-english-latin-400-normal.woff2 (Velas)
     assets/fonts/im-fell-english-latin-400-italic.woff2 (Velas)

   NOTE: assets/fonts/alex-brush-latin-400-normal.woff2 from an earlier
   version is no longer used (the signature moved to Playfair
   Display, section titles moved to Rubik Bubbles). Safe to delete
   from /fonts, or just leave it there — an unused file doesn't
   break anything, it just takes up a little extra space.

   To swap any font later: get the new .woff2 file(s), drop them in
   assets/fonts/, update the matching @font-face src below, and update the
   matching CSS variable (--script / --body / --mono / --marker /
   --signature) further down in section 1. */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-latin-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik Bubbles';
  src: url('../fonts/rubik-bubbles-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Permanent Marker';
  src: url('../fonts/permanent-marker-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* used only for your name (h1.signature) — see --signature in
   section 1 below. Elegant, feminine-leaning serif, picked
   specifically because it stays legible at small sizes too (unlike
   a full script/cursive font, which is what Alex Brush used to be
   here before it got swapped out). */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* titles of the YouTube box ("Mis videos") and Huesito's box */
@font-face {
  font-family: 'Righteous';
  src: url('../fonts/righteous-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* street fonts for the grafitis on the alley wall (section 25) */
@font-face {
  font-family: 'Sedgwick Ave';
  src: url('../fonts/sedgwick-ave-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik Spray Paint';
  src: url('../fonts/rubik-spray-paint-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rock Salt';
  src: url('../fonts/rock-salt-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* italic, only for your mantra in the footer: same family as your name,
   so name + mantra read like one signature */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-latin-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* one title font per box, so each box has its own personality (see
   section 17, BOX IDENTITIES). All chosen to stay readable. */
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lobster';
  src: url('../fonts/lobster-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Special Elite';
  src: url('../fonts/special-elite-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IM Fell English';
  src: url('../fonts/im-fell-english-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IM Fell English';
  src: url('../fonts/im-fell-english-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==================================================================
   1. PALETA Y TIPOGRAFÍAS
   Cambiá estos valores y se actualiza TODA la página, porque el resto
   del CSS usa estas variables en vez de colores/fuentes sueltos.
   ------------------------------------------------------------------
   --magenta / --violet / --cyan   : los tres acentos de color originales
   --bubblegum / --grape           : NUEVOS acentos rosa clarito / uva,
                                      para stickers, tape y detalles Y2K
   --candle                        : el cálido de la vela / intimidad
   --text / --text-muted           : texto principal y secundario
   --script                        : título grande (ahora Rubik Bubbles,
                                      antes Alex Brush — ver "FUENTES"
                                      un poco más arriba)
   --body                          : párrafos de lectura (EB Garamond,
                                      sin cambios)
   --mono                          : contador, tags, cajitas de código
                                      (Space Mono, sin cambios)
   --marker                        : NUEVO, para las etiquetas "//" tipo
                                      diario/scrapbook (Permanent Marker)
   ================================================================== */

:root {
  --void: #0b0a12;
  --void-2: #151220;
  --panel: rgba(20,16,29,0.9);
  --panel-border: rgba(255,255,255,0.09);
  --magenta: #ff2f92;
  --violet: #8b5cf6;
  --cyan: #2fe0d0;
  --candle: #ffb37a;
  --text: #ede9f5;
  --text-muted: #9d93b0;
  --bubblegum: #ff9ed8;
  --grape: #b968ff;
  --script: 'Rubik Bubbles', cursive;
  --body: 'EB Garamond', serif;
  --mono: 'Space Mono', monospace;
  --marker: 'Permanent Marker', cursive;
  --signature: 'Playfair Display', serif;
}

/* ---- BASE RULES ----
   Bootstrap used to supply these and was removed for good (too
   invasive). This is only what the design actually relies on:
   - color-scheme: dark  -> dark scrollbars and form controls
   - line-height 1.5 on body, heading/paragraph/list margins
   - link color, button/form font inheritance
   - [hidden] always hides (several boxes start hidden and appear later) */
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 1rem; }
ol, ul { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; }
b, strong { font-weight: bolder; }
small { font-size: .875em; }
a { color: #6ea8fe; text-decoration: underline; }
a:hover { color: #8bb9fe; }
pre { margin-top: 0; margin-bottom: 1rem; font-size: .875em; }
figure { margin: 0 0 1rem; }
img, svg { vertical-align: middle; }
label { display: inline-block; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button { border-radius: 0; text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
button:focus:not(:focus-visible) { outline: 0; }
::-moz-focus-inner { padding: 0; border-style: none; }
textarea { resize: vertical; }
summary { display: list-item; cursor: pointer; }
iframe { border: 0; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  background: var(--void);
  color: var(--text);
  font-family: var(--body);
  overflow-x: hidden;
  position: relative;
}

/* ==================================================================
   2. ATMÓSFERA — fondo, grano, viñeta, brasas flotantes, luz de cursor
   Todo esto es puramente decorativo y "pointer-events:none", así que
   nunca va a bloquear clics en el contenido real. Podés borrar
   cualquiera de estas capas sin romper nada más.
   ================================================================== */

/* fondo con manchas de color en movimiento lento (reemplaza al video
   de fondo que tenías en Wix — si más adelante querés un <video> real
   de fondo, este div .atmosphere es el que reemplazarías) */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 55% 40% at 50% 8%, rgba(255,179,122,0.10), transparent 60%), radial-gradient(ellipse 60% 40% at 20% 15%, rgba(255,47,146,0.18), transparent 60%), radial-gradient(ellipse 55% 45% at 85% 25%, rgba(47,224,208,0.14), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 90%, rgba(139,92,246,0.18), transparent 60%), linear-gradient(180deg, var(--void) 0%, var(--void-2) 50%, var(--void) 100%);
  background-size: 200% 200%;
  animation: drift 26s ease-in-out infinite alternate;
}

/* textura de grano de película vieja, muy sutil */

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* viñeta que "respira" muy lento: oscurece los bordes de la pantalla
   para que la atención quede en el centro, como si te iluminara una
   sola vela. Si lo sentís muy oscuro, bajá el 0.55 de abajo. */

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  animation: vignetteBreathe 8s ease-in-out infinite;
}

/* brasas/luciérnagas que suben flotando por delante de todo. La
   cantidad se define en el JS (buscá "spawnEmbers"). */

.ember-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.ember {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--candle);
  box-shadow: 0 0 6px var(--candle);
  opacity: 0;
  animation: emberRise linear infinite;
}

/* luz cálida que sigue al cursor, como si sostuvieras una vela.
   Se desactiva sola en celular/tablet y si el usuario pidió menos
   animaciones (ver JS). */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,179,122,0.12), transparent 70%);
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%,-50%);
  will-change: left, top;
}

@keyframes drift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 40%;
  }
}

@keyframes vignetteBreathe {
  0%, 100% {
    opacity: .85;
  }
  50% {
    opacity: 1;
  }
}

@keyframes emberRise {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }
  10% {
    opacity: .85;
  }
  90% {
    opacity: .4;
  }
  100% {
    transform: translate(var(--drift,0px), -110vh);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vignette {
    animation: none;
    opacity: .85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ember {
    display: none;
  }
}

/* ---------- layout general: masonry de 3 columnas ----------
   3 columnas es ahora el estado por defecto — ya no algo que solo
   aparece en pantallas grandes. La única excepción es celulares
   angostos (ver el media query de abajo, <640px): ahí SÍ hace falta
   bajar a 1 columna, no por gusto sino porque hay elementos de ancho
   fijo (la carta de tarot mide 190px, por ejemplo) que directamente
   no entran en una columna de celular si la partimos en 3. Fuera de
   ese caso puntual, siempre son 3.

   Si en algún momento querés ajustar en qué ancho salta a 1 columna,
   el número a tocar es el "640px" del media query de abajo. */
/* ---------- layout general: grid de 3 columnas, filas parejas ----------
   Esto cambió de técnica: antes era CSS multi-column (column-count),
   que hace que cada columna se llene de arriba a abajo POR SU CUENTA
   — por eso quedaba esa "escalera" con cajas de distinta altura
   terminando en cualquier lado. CSS Grid en cambio arma FILAS reales:
   agarra 3 paneles seguidos del HTML, los pone lado a lado, y estira
   todos a la altura del más alto de esa fila (es el comportamiento
   por defecto de grid, "align-items:stretch" — no hace falta pedirlo
   a propósito). Resultado: todas las cajas de una misma fila quedan
   parejas, tal como pediste.

   Como ahora el orden del HTML importa para saber qué cae en la
   misma fila: cada 3 paneles seguidos forman una fila. Si el número
   total de paneles no es múltiplo de 3, la última fila simplemente
   queda con menos cajas (no se estira sola para llenar el hueco,
   pero tampoco rompe nada).

   Para que la Galería ocupe las 3 columnas en vez de una sola, tiene
   su propia regla más abajo (".panel.gallery"). Si en algún momento
   querés que otro panel también sea ancho completo, el mismo truco
   (grid-column: 1 / -1) sirve para cualquiera. */
.content-column {
  max-width: min(1500px, 94vw);
  margin: 0 auto;
  padding: 0 20px 90px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 640px) {
  .content-column {
    /* mismo motivo de siempre: elementos de ancho fijo (la carta de
       tarot, por ejemplo) no entran en una columna angosta de
       celular partida en 3. */
    grid-template-columns: 1fr;
  }
}
.panel.gallery {
  grid-column: 1 / -1;
}

/* las líneas onduladas que antes separaban una sección de la
   siguiente (el "<svg class="flourish">" que se repite en el HTML)
   dejan de tener sentido con las tarjetas en columnas — quedaban
   como una rayita suelta cortando el flujo de una sola columna al
   azar. Cada .panel ya se lee solo como tarjeta (tiene su propio
   borde y fondo), así que directamente se ocultan acá en vez de
   sacarlas una por una del HTML — si en algún momento las querés de
   vuelta, borrar esta regla alcanza. */
.flourish {
  display: none;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 30px 30px;
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  /* con CSS Grid ya no hace falta el truco de inline-block +
     break-inside que usaba multi-column — un panel simplemente ES
     una celda del grid, nunca se puede partir a la mitad. Tampoco
     hace falta margin-bottom: el espacio entre cajas ahora lo pone
     "gap" en .content-column. */
}

.panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* los párrafos de texto corrido (bio, notas, descripciones) NO se
   estiran hasta el borde del panel — un renglón de texto de 400-500px
   ya es cómodo de leer de por sí, pero esto sigue actuando como techo
   de seguridad por si algún panel queda muy ancho en pantallas raras.
   El resto del panel (grillas de fotos, filas de íconos, ofrendas)
   SÍ usa todo el ancho disponible; esta regla solo afecta a <p> que
   cuelgan directo de un .panel. */

.panel > p {
  max-width: 66ch;
}

/* pasa de Space Mono todo-mayúsculas a Permanent Marker (ver
   variable --marker, sección 1) — look "diario/scrapbook" en vez de
   "terminal". Si preferís el look anterior, volvé font-family a
   var(--mono) y descomentá text-transform:uppercase. */

.eyebrow {
  font-family: var(--marker);
  font-size: 15px;
  letter-spacing: .02em;
  /*text-transform: uppercase;*/
  color: var(--cyan);
  margin: 0 0 6px;
}

h2.section-title {
  font-family: var(--script);
  font-size: 34px;
  font-weight: 400;
  color: var(--magenta);
  margin: 0 0 18px;
  text-shadow: 0 0 18px rgba(255,47,146,0.35);
}

p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
  font-style: italic;
  margin: 0 0 14px;
}

p.placeholder-note {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .02em;
}

/* ==================================================================
   3. HERO — retrato circular con brillo de vela + firma + saludo
   ================================================================== */

.hero {
  text-align: center;
  padding: 90px 20px 30px;
  position: relative;
}

/* el saludo que se escribe solo al cargar la página (efecto máquina
   de escribir). El texto se define en el JS, variable whisperText. */

.whisper {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-muted);
  text-align: center;
  min-height: 16px;
  margin-bottom: 10px;
  border-right: 1px solid transparent;
}

.whisper.typing {
  border-right-color: var(--text-muted);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.shrine-frame {
  position: relative;
  width: 188px;
  height: 188px;
  margin: 0 auto 22px;
  cursor: pointer; /* única pista de que se puede tocar — ver "SECRETO DEL RETRATO" en el JS */
}

/* el "brillo de vela": dos capas parpadeando fuera de sincro para que
   se sienta orgánico y no una animación perfecta y robótica */

.shrine-frame::before, .shrine-frame::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,179,122,0.55), transparent 65%);
  filter: blur(20px);
}

.shrine-frame::before {
  inset: -40px;
  animation: flicker-a 2.6s ease-in-out infinite;
}

.shrine-frame::after {
  inset: -55px;
  filter: blur(28px);
  animation: flicker-b 3.7s ease-in-out infinite;
}

@keyframes flicker-a {
  0% {
    opacity: .5;
    transform: scale(.97);
  }
  30% {
    opacity: .85;
    transform: scale(1.03);
  }
  55% {
    opacity: .55;
    transform: scale(.99);
  }
  78% {
    opacity: .8;
    transform: scale(1.02);
  }
  100% {
    opacity: .6;
    transform: scale(1);
  }
}

@keyframes flicker-b {
  0% {
    opacity: .32;
    transform: scale(1);
  }
  40% {
    opacity: .55;
    transform: scale(1.04);
  }
  70% {
    opacity: .38;
    transform: scale(.98);
  }
  100% {
    opacity: .5;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shrine-frame::before, .shrine-frame::after {
    animation: none;
    opacity: .5;
  }
}

/* REEMPLAZAR FOTO: cambiá el contenido de .photo-slot por
   <img src="tu-foto.jpg" alt="tu nombre" style="width:100%;height:100%;
   object-fit:cover;border-radius:50%;"> y listo. */

.photo-slot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  background: var(--void-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
  overflow: hidden;
}

.photo-slot span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-align: center;
  padding: 0 20px;
}

/* la foto de acá adentro puede ser cualquier tamaño/proporción — con
   esto siempre queda recortada y centrada llenando el círculo entero,
   así que no hace falta ajustar nada a mano cada vez que agregás una
   foto nueva al pool (ver HERO_PHOTOS en el JS). */
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* bajado de 56px fijo a un clamp(): Rubik Bubbles es una fuente
   mucho más "ancha" que la Alex Brush script de antes, y un nombre
   largo a 56px se desbordaba o se partía feo en pantallas chicas.
   clamp(mínimo, preferido, máximo) hace que se achique solo en
   mobile sin necesitar otro número aparte en la media query de abajo. */

h1.signature {
  font-family: var(--signature);
  font-size: clamp(28px, 6.5vw, 46px);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 10px 0 4px;
  color: #fff;
  text-shadow: 0 0 22px rgba(139,92,246,0.45);
}

/* the little "[Proditae]" tag under the name. Uses --marker
   (Permanent Marker) so it reads like a handwritten note stuck onto
   the signature rather than plain metadata text. */
.alias {
  font-family: var(--marker);
  font-size: 19px;
  color: var(--magenta);
  letter-spacing: .02em;
  margin-bottom: 18px;
  text-shadow: 0 0 10px rgba(255,47,146,0.3);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.tag-pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.4);
  border-radius: 999px;
  padding: 6px 14px;
}

/* Botón de ambiente sonoro (el equivalente a "los labios" de tu home).
   Es puramente visual: no reproduce audio real todavía. Para conectar
   tu SFX real, mirá el comentario en la sección de JS "SFX TOGGLE". */

.sfx-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s, border-color .3s, box-shadow .3s;
}

.sfx-toggle.active {
  color: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 16px rgba(255,47,146,0.45);
}

.sfx-icon {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 14px;
}

.sfx-icon i {
  width: 2px;
  background: currentColor;
  height: 4px;
  border-radius: 1px;
  display: block;
}

.sfx-toggle.active .sfx-icon i {
  animation: eq .8s ease-in-out infinite;
}

.sfx-toggle.active .sfx-icon i:nth-child(2) {
  animation-delay: .2s;
}

.sfx-toggle.active .sfx-icon i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes eq {
  0%, 100% {
    height: 4px;
  }
  50% {
    height: 12px;
  }
}

/* Pestaña fija para volver al índice del sitio (Archivo Proditae /
   Archivo Amenepop). Ver el comentario largo junto al <a> en el
   HTML sobre la ruta "../index.html" — es importante porque esta
   página y el índice real del sitio se llaman las dos "index.html". */

.index-tab {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 9px 14px;
  transition: color .3s, border-color .3s, box-shadow .3s;
}

.index-tab:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(47,224,208,0.4);
}

/* ==================================================================
   4. CURSOR PERSONALIZADO
   Reemplaza el cursor normal del sistema por una chispita ✦ que
   sigue al mouse, más una ondita de luz cada vez que hacés clic.
   Se activa solo por JS (mirá "CURSOR PERSONALIZADO" en el script):
   si por lo que sea el JS no corre, el cursor normal se queda tal
   cual — nunca desaparece del todo.
   ------------------------------------------------------------------
   Para cambiar la forma: reemplazá el <path> de #cursorDot en el
   HTML por cualquier otro dibujo SVG. Para cambiar el color: tocá
   fill/filter de .cursor-dot .cursor-shape acá abajo.
   ================================================================== */

html.custom-cursor-on, html.custom-cursor-on * {
  cursor: none !important;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s ease, height .2s ease;
  will-change: left, top;
}

.cursor-dot svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cursor-dot .cursor-shape {
  fill: var(--magenta);
  filter: drop-shadow(0 0 6px var(--magenta));
  transition: fill .2s ease, filter .2s ease;
}

.cursor-dot.hovering {
  width: 32px;
  height: 32px;
}

.cursor-dot.hovering .cursor-shape {
  fill: var(--cyan);
  filter: drop-shadow(0 0 9px var(--cyan));
}

/* la ondita cálida que se expande en el punto exacto del clic */

.click-ripple {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--candle);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%) scale(1);
  opacity: .9;
  animation: rippleOut .5s ease-out forwards;
}

@keyframes rippleOut {
  to {
    transform: translate(-50%,-50%) scale(4.5);
    opacity: 0;
  }
}

/* que las ofrendas se vean clickeables incluso antes de que el
   cursor personalizado termine de cargar */

.egg-slot, .corner-egg {
  cursor: pointer;
}

/* ---------- separadores ornamentales ---------- */

/* subido de 220px a 320px para que no se vean como una rayita
   perdida ahora que los paneles de arriba/abajo son más anchos */

.flourish {
  display: block;
  width: 320px;
  height: 26px;
  margin: 34px auto;
  color: rgba(237,233,245,0.35);
}

/* ==================================================================
   5. SOBRE MÍ — bio + datos rápidos
   ================================================================== */

ul.quick-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

ul.quick-facts li b {
  color: var(--cyan);
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ==================================================================
   6. GALERÍA — fotos estilo polaroid
   Esta sección ahora se arma sola por JS a partir de una lista de
   fotos (buscá "PHOTOS =" en el script, sección GALERÍA). No hace
   falta tocar este HTML/CSS para agregar fotos nuevas.
   ================================================================== */

/* antes esto envolvía en filas nuevas hacia abajo sin límite (por
   eso hacía falta el botón "cargar más"). Ahora son SIEMPRE 2 filas
   fijas, y si hay más fotos de las que entran en el ancho de
   pantalla, aparece scroll horizontal solo — no hay límite de
   cuántas fotos puede haber en PHOTOS (ver script.js), todas se
   renderizan de una, simplemente las que no entran quedan "afuera"
   hasta que scrolleás.
   grid-auto-columns es el ancho fijo de cada foto — si querés
   fotos más grandes/chicas, ese es el número a tocar. */
.polaroid-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 160px;
  gap: 26px 20px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 16px;
  scrollbar-color: var(--magenta) var(--void-2);
}
.polaroid-grid::-webkit-scrollbar {
  height: 8px;
}
.polaroid-grid::-webkit-scrollbar-track {
  background: var(--void-2);
  border-radius: 4px;
}
.polaroid-grid::-webkit-scrollbar-thumb {
  background: var(--magenta);
  border-radius: 4px;
}
.polaroid-grid::-webkit-scrollbar-thumb:hover {
  background: var(--violet);
}

.polaroid {
  background: #f2f0ea;
  padding: 10px 10px 30px;
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  transition: transform .35s ease, box-shadow .35s ease;
  transform: rotate(var(--rot, 0deg));
}

.polaroid:hover, .polaroid:focus-visible {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 16px 34px rgba(255,47,146,0.25);
  z-index: 2;
  outline: none;
}

.polaroid .frame {
  aspect-ratio: 1/1;
  background: repeating-linear-gradient(135deg, #1c1a24, #1c1a24 8px, #221f2c 8px, #221f2c 16px);
  border: 1px dashed rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.polaroid .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* si el archivo de la foto todavía no existe (ruta rota), el <img>
   se oculta solo y queda el fondo a rayitas con este aviso en vez de
   un ícono de imagen rota feo */

.frame.img-missing img {
  display: none;
}

.frame.img-missing::after {
  content: 'falta esta foto';
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(237,233,245,0.55);
  padding: 0 10px;
}

.polaroid figcaption {
  font-family: var(--mono);
  font-size: 10px;
  color: #3a3542;
  text-align: center;
  margin-top: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* estilo de botón genérico reutilizable — mismo lenguaje visual que
   la pestaña de índice / el link del footer. Lo usan varios botones
   sueltos por el sitio (copiar código, otra carta, apagar velas);
   ya NO lo usa la galería (que ahora es scroll horizontal, sin
   botón de "cargar más"). */

.load-more-btn {
  display: block;
  margin: 24px auto 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
  transition: color .3s, border-color .3s, box-shadow .3s;
}

.load-more-btn:hover {
  color: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 14px rgba(255,47,146,0.3);
}

.load-more-btn[hidden] {
  display: none;
}

/* ---------- lightbox: vista ampliada al hacer clic en una foto ----------
   max-width de la imagen queda en 500px a propósito: tus fotos son
   nativas de 500×500px, así que mostrarlas más grandes que eso solo
   las volvería borrosas (estás agrandando más allá de su resolución
   real). Si en algún momento subís fotos más grandes, buscá
   "min(500px, 90vw)" acá abajo y subí ese número. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5,4,8,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding: 20px;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img {
  /* 2026-10-19: was min(500px, 90vw) / 70vh (made for 500x500 photos). Now the photo uses up to
     92% of the width and 82% of the height, but only max-width/max-height: a small photo is NOT
     stretched, it keeps its own size. */
  max-width: min(1600px, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  border: 1px solid var(--panel-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  background: #f2f0ea;
}

.lightbox-caption {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  max-width: 80vw;
}

.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}

.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  color: var(--magenta);
  border-color: var(--magenta);
}

.lightbox-close {
  top: 18px;
  right: 18px;
}

.lightbox-prev {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width:600px) {
  .lightbox-prev {
    left: 8px;
  }
}

@media (max-width:600px) {
  .lightbox-next {
    right: 8px;
  }
}

/* ==================================================================
   7. TAROT — carta con frases al azar (buscá "TAROT" en el JS
   para la lista de frases: var TAROT_DECK)
   ================================================================== */

.tarot-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  perspective: 1200px;
}

.tarot-card {
  /* antes era 150x230 — funcionaba con --script en Alex Brush (una
     cursiva finita). Ahora --script es Rubik Bubbles (una fuente
     "burbuja" mucho más ancha por letra), así que a los nombres
     largos ("La Rueda de la Fortuna") no les entraba ni de cerca.
     Agrandé la carta y achiqué el nombre en .tarot-name de acá abajo
     en vez de solo una de las dos cosas, para que quede prolijo y no
     al límite. */
  width: 190px;
  height: 260px;
  cursor: pointer;
}

.tarot-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

.tarot-card.flipped .tarot-inner {
  transform: rotateY(180deg);
}

.tarot-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  text-align: center;
  gap: 10px;
}

.tarot-back {
  background: linear-gradient(135deg, var(--void-2), #201a30);
}

.tarot-back-glyph {
  width: 38px;
  height: 38px;
  fill: var(--violet);
  filter: drop-shadow(0 0 10px var(--violet));
}

.tarot-front {
  background: var(--panel);
  transform: rotateY(180deg);
}

.tarot-name {
  font-family: var(--script);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--magenta);
  margin: 0;
  overflow-wrap: break-word;
}

.tarot-msg {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

/* el botón "otra carta": antes usaba el atributo "hidden" (display:
   none) y recién aparecía después del primer clic. El problema es
   que en un layout de columnas (ver .content-column, sección de
   layout general), cuando la altura de UNA tarjeta cambia después de
   cargar la página, el navegador reacomoda TODA la columna — por eso
   las demás cajas saltaban de lugar apenas tocabas el tarot.
   La solución es reservarle el espacio desde el principio con
   visibility (que sigue ocupando su lugar, solo que invisible) en
   vez de display (que no ocupa nada). Así la altura de la tarjeta de
   tarot es SIEMPRE la misma, tocada o no, y nada más se mueve. */
#tarotRedraw {
  visibility: hidden;
}
#tarotRedraw.is-shown {
  visibility: visible;
}

/* ==================================================================
   8. REDES — botones a redes sociales
   ================================================================== */

.icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 28px;
  margin-top: 10px;
}

.icon-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  width: 76px;
}

.icon-badge .circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--void-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  transition: box-shadow .3s, border-color .3s, transform .3s, color .3s;
}

.icon-badge span.label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.icon-badge:hover .circle {
  transform: translateY(-4px);
  color: #fff;
  border-color: var(--accent, var(--magenta));
  box-shadow: 0 0 18px var(--accent, var(--magenta));
}

/* ==================================================================
   9. BOTÓN 88×31 — botón de sitio estilo webring viejo
   ================================================================== */

.button88-img {
  display: block;
  margin: 16px auto 0;
  image-rendering: pixelated;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  border-radius: 2px;
}

.code-copy-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.code-copy-box {
  width: 100%;
  max-width: 420px;
  background: #050506;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  padding: 10px;
  resize: none;
}

/* ==================================================================
   10. OFRENDAS — easter eggs / clip arts escondidos
   Son casilleros vacíos, pensados para tus gifs sueltos (como los
   que tenías desparramados al pie de tu home). Cada .egg-slot es un
   casillero. Para agregar más, copiá y pegá un bloque .egg-slot
   entero (en el HTML) y cambiá la rotación con --r si querés.
   Para poner contenido real: reemplazá el glifo de adentro por
   <img src="tu-gif.gif" style="width:100%;height:100%;object-fit:contain;">
   ================================================================== */

.offerings-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin-top: 14px;
}

.egg-slot {
  width: 52px;
  height: 52px;
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-muted);
  transform: rotate(var(--r,0deg));
  transition: transform .3s, border-color .3s, color .3s;
  cursor: default;
}

.egg-slot:hover {
  transform: rotate(0deg) scale(1.12);
  border-color: var(--candle);
  color: var(--candle);
}

/* casilleros pequeños "pegados" a la esquina de algunos paneles,
   como stickers. Necesitan que el .panel tenga position:relative
   (ya lo tiene, mirá más arriba en este CSS). Para sacarlos, borrá
   el <div class="corner-egg"> correspondiente en el HTML. */

.corner-egg {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-muted);
  transform: rotate(var(--r,-8deg));
  z-index: 3;
}

/* tooltip que sigue al mouse mientras pasás por una ofrenda, y texto
   que "sube como humo" cuando le hacés clic — ambos muestran la
   frase del atributo data-msg de cada .egg-slot/.corner-egg (ver
   sección OFRENDAS: SONIDO Y TACTO en el JS) */

.offering-tooltip {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  max-width: 220px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%,-130%);
  transition: opacity .2s ease;
}

.offering-tooltip.visible {
  opacity: 1;
}

/* the whispers that float up when you click your photo, an ofrenda or
   the rat. White letters with a THICK black outline (the classic
   meme-caption trick) plus a dark halo, so they read clearly over
   anything — a yellow photo, embers, the brick wall. The outline is
   8 hard shadows, one per direction (up, down, left, right and the 4
   diagonals), which every browser supports. For an even thicker
   outline, change every 2px below to 3px. */
.floating-whisper {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-shadow:
    -2px -2px 0 #000,  0 -2px 0 #000,  2px -2px 0 #000,
    -2px  0   0 #000,                  2px  0   0 #000,
    -2px  2px 0 #000,  0  2px 0 #000,  2px  2px 0 #000,
    0 0 12px rgba(0,0,0,0.95),
    0 0 22px rgba(255,47,146,0.55);
  transform: translate(-50%,-50%);
  width: max-content;              /* as wide as the phrase needs... */
  max-width: min(320px, 86vw);     /* ...but long ones wrap onto 2 lines */
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  animation: whisperRise 3.8s ease-out forwards;
}

@keyframes whisperRise {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) translateY(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) translateY(-70px);
  }
}

/* ==================================================================
   11. VELAS — velas que los visitantes pueden encender
   ================================================================== */

.candle-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.candle {
  position: relative;
  width: 34px;
  height: 70px;
  cursor: pointer;
}

.candle-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 46px;
  background: linear-gradient(180deg,#3a3542,#231f2c);
  border-radius: 3px 3px 1px 1px;
  border: 1px solid rgba(255,255,255,0.08);
}

.candle-wick {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: #0b0a12;
}

.candle-flame {
  position: absolute;
  bottom: 52px;
  left: 50%;
  width: 14px;
  height: 20px;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  background: radial-gradient(circle at 50% 70%, #fff2c4, var(--candle) 55%, transparent 75%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.candle.lit .candle-flame {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  animation: flicker-a 2.4s ease-in-out infinite;
}

.candle-msg {
  min-height: 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--candle);
  margin-top: 14px;
}

/* ==================================================================
   12. CONTADOR — visitas estilo web retro
   Ver comentario largo en la sección de JS "CONTADOR DE VISITAS"
   sobre cómo funciona y sus límites (guarda en el navegador, no es
   un contador global compartido a menos que le agregues un backend).
   ================================================================== */

.counter-wrap {
  text-align: center;
  padding: 14px 0 6px;
  margin-top: 22px;
}

.counter-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.counter-display {
  display: inline-flex;
  gap: 4px;
  background: #050506;
  border: 1px solid rgba(255,47,146,0.35);
  border-radius: 4px;
  padding: 10px 16px;
}

.counter-display span {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255,47,146,0.7);
}

.counter-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ==================================================================
   13. FOOTER
   ================================================================== */

footer {
  text-align: center;
  padding: 50px 20px 80px;
  position: relative;
}

footer .motto {
  font-family: var(--script);
  font-size: 26px;
  color: var(--text);
  margin-bottom: 18px;
}

/* misma técnica de grid que .content-column (ver sección de layout
   general, arriba de todo): 3 columnas, filas parejas. Va acá el
   trío Oráculo/Ofrendas/Velas, que ahora vive en el footer en vez
   del cuerpo principal. text-align vuelve a la izquierda adentro
   (el footer entero es centrado, pero el contenido de estos paneles
   se lee mejor alineado a la izquierda, igual que arriba). */
.footer-trio {
  max-width: min(1500px, 94vw);
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  text-align: left;
}
@media (max-width: 640px) {
  .footer-trio {
    grid-template-columns: 1fr;
  }
}

footer .credits {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .04em;
  line-height: 1.9;
}

footer .credits a {
  color: var(--cyan);
  text-decoration: none;
}

footer .back-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 9px 16px;
  transition: color .3s, border-color .3s;
}

footer .back-link:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* el clamp() de h1.signature ya se encarga de achicarse solo acá,
     así que esta media query no necesita pisarlo con un valor fijo. */

@media (max-width:480px) {
  .panel {
    padding: 26px 20px;
  }
}

@media (max-width:480px) {
  .cursor-glow {
    display: none;
  }
}

/* no tiene sentido en pantallas táctiles */

@media (max-width:480px) {
  .marquee-wrap {
    font-size: 11px;
  }
}

/* ==================================================================
   14. EXTRAS Y2K / SCENE — todo lo nuevo del rediseño "spin diary"
   vive acá abajo, aparte, para no mezclarse con las 13 secciones de
   arriba (que siguen intactas). Si en algún momento querés volver
   para atrás y sacar SOLO lo nuevo, podés borrar esta sección
   entera de acá hasta el final del archivo — nada de arriba depende
   de esto.
   ------------------------------------------------------------------
   Incluye: franja de cuadraditos (checker), cartel tipo blinkie con
   texto corriendo (marquee), stickers sueltos en el hero, y cinta de
   washi tape en las esquinas de las polaroids de la galería.
   ================================================================== */

/* ---------- franja de corazones (antes era un checkerboard) ----------
   Van dos franjas: una arriba de todo (antes del hero) y otra abajo
   de todo (después del footer). Es un SVG chiquito con 2 corazones
   (uno negro, uno rosa/magenta — el mismo #ff2f92 que ya se usa en
   el resto del sitio) repetido en mosaico con background-repeat, no
   son elementos HTML sueltos.
   Para cambiar el color rosa: buscá "%23ff2f92" acá abajo (el %23 es
   el "#" de un color hex, pero codificado porque estamos adentro de
   una URL) y reemplazalo por el hex que quieras, SIN el "#".
   Para sacar la franja entera: borrá los <div class="checker-strip">
   del HTML (buscá "checker-strip"), no hace falta tocar nada acá. */

.checker-strip {
  height: 24px;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='24'%20viewBox='0%200%2056%2024'%3E%3Cpath%20fill='%23000000'%20d='M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5C2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09C13.09,3.81,14.76,3,16.5,3C19.58,3,22,5.42,22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z'/%3E%3Cpath%20fill='%23ff2f92'%20d='M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5C2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09C13.09,3.81,14.76,3,16.5,3C19.58,3,22,5.42,22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z'%20transform='translate(28,0)'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 56px 24px;
  position: relative;
  z-index: 6;
}

/* ---------- blinkie / marquee: cartel con texto corriendo ----------
   Igual concepto que en tu "spin diary": una tira de texto que se
   desliza sola, como los banners de MySpace/Neocities/Fotolog de
   época. El texto se define en el HTML (buscá "marquee-wrap"), así
   que para cambiar la frase no hace falta tocar este CSS. */

.marquee-wrap {
  max-width: min(1140px, 90vw);
  margin: 18px auto 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px dashed var(--grape);
  border-bottom: 1px dashed var(--grape);
  padding: 7px 0;
}

.marquee {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text);
  padding-left: 100%;
  animation: marqueeScroll 24s linear infinite;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-wrap {
    white-space: normal;
    overflow: visible;
    text-align: center;
  }
}

/* ---------- stickers sueltos cerca del hero ----------
   Glifos decorativos posicionados a mano alrededor del retrato, como
   los stickers/clip-arts pegoteados en un perfil viejo. Son
   pointer-events:none (no se pueden clickear, no estorban). Para
   sacar alguno, borrá el <span class="sticker sX"> correspondiente
   en el HTML. Para agregar uno nuevo: copiá un bloque sX de acá
   abajo con otra letra/número y usalo en el HTML. */

.hero {
  overflow: visible;
}

.sticker {
  position: absolute;
  pointer-events: none;
  font-size: 22px;
  opacity: .85;
  filter: drop-shadow(0 0 6px rgba(255,47,146,0.7));
  z-index: 2;
}

.sticker.s1 {
  top: 6px;
  left: 8%;
  color: var(--bubblegum);
  transform: rotate(-16deg);
}

.sticker.s2 {
  top: 70px;
  left: 2%;
  color: var(--grape);
  transform: rotate(10deg);
  font-size: 16px;
}

.sticker.s3 {
  top: 6px;
  right: 8%;
  color: var(--magenta);
  transform: rotate(14deg);
}

.sticker.s4 {
  top: 70px;
  right: 2%;
  color: var(--bubblegum);
  transform: rotate(-12deg);
  font-size: 16px;
}

@media (max-width:600px) {
  .sticker {
    display: none;
  }
}

/* en mobile molestan más de lo que suman */

/* ---------- washi tape en las esquinas de las polaroids ----------
   Se suma a la regla .polaroid que ya existe en la sección 6 (GALERÍA)
   más arriba — no la reemplaza, la extiende. position:relative acá
   es necesario para que la cinta (::before/::after) se pueda anclar
   a la esquina de CADA polaroid en vez de a la página entera. */

.polaroid {
  position: relative;
}

.polaroid::before, .polaroid::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 11px;
  background-image: repeating-linear-gradient(90deg, #000 0 4px, #f2f0ea 4px 8px);
  opacity: .9;
  z-index: 3;
  pointer-events: none;
}

.polaroid::before {
  top: -6px;
  left: -6px;
  transform: rotate(-10deg);
}

.polaroid::after {
  bottom: 22px;
  right: -6px;
  transform: rotate(96deg);
}



/* ==================================================================
   15. REWORK — cover banner, donation pills, donations box, alley wall
   ------------------------------------------------------------------
   Everything added in the big rework lives in this section, so it's
   easy to find (and easy to remove piece by piece if you ever want).
   ================================================================== */

/* ---------- cover banner (top of the page) ----------
   RECOMMENDED SIZE: 1920 x 500 px (about 4:1). SAFE ZONE — where to
   put the important part (a face, text): the upper-middle. The
   bottom ~40% fades into the page and your round photo overlaps its
   center, phones crop the left and right sides, and big monitors trim
   a bit off the top. "center 30%" below is the focal point: lower the
   30% to show more of the TOP of your images, raise it for the middle.
   Images come from BANNER_IMAGES in script.js. With no image, the
   gradient below is what shows. Height scales with the screen width
   between 150px (phones) and 330px (big monitors) — change the
   clamp() numbers to make the strip shorter/taller. */
.cover-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(150px, 24vw, 330px);
  background-color: var(--void-2);
  background-image:
    radial-gradient(ellipse 60% 80% at 18% 30%, rgba(255,47,146,0.38), transparent 60%),
    radial-gradient(ellipse 50% 70% at 82% 35%, rgba(47,224,208,0.22), transparent 60%),
    radial-gradient(ellipse 70% 90% at 50% 105%, rgba(139,92,246,0.4), transparent 65%),
    linear-gradient(180deg, #1b1426, #0b0a12);
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
/* soft fade into the page at the bottom edge, so the banner melts
   into the background instead of ending on a hard line */
.cover-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,10,18,0) 55%, rgba(11,10,18,0.78) 88%, var(--void) 100%);
  pointer-events: none;
}
/* the hero (greeting + photo + name) slides up a little over the
   banner's faded bottom — the same "profile photo over the cover"
   look as Facebook/YouTube */
.hero {
  padding-top: 0;
  margin-top: calc(-1 * clamp(30px, 5vw, 70px));
  z-index: 2;
}
.whisper {
  position: relative;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

/* ---------- contact row: links + pink donation pills ---------- */
.tag-pill a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(139,92,246,0.45);
  text-underline-offset: 3px;
}
.tag-pill a:hover,
.tag-pill a:focus-visible {
  color: var(--magenta);
  text-decoration-color: var(--magenta);
}
.tag-pill--donate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, var(--magenta), #ff6fb5);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 12px rgba(255,47,146,0.4);
  animation: donateGlow 3.2s ease-in-out infinite;
  transition: transform .2s ease, filter .2s ease;
}
.tag-pill--donate + .tag-pill--donate {
  background: linear-gradient(135deg, #ff6fb5, var(--grape));
}
.tag-pill--donate:hover,
.tag-pill--donate:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.1);
  animation: none;
  box-shadow: 0 0 22px rgba(255,47,146,0.75);
  outline: none;
}
@keyframes donateGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,47,146,0.35); }
  50%      { box-shadow: 0 0 20px rgba(255,47,146,0.7); }
}

/* ---------- donations box: eye-catching, not screaming ---------- */
.panel.donations {
  border-color: rgba(255,47,146,0.35);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255,47,146,0.12), transparent 70%),
    var(--panel);
  box-shadow: 0 0 28px rgba(255,47,146,0.1);
}
.panel .donate-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.panel .donate-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.panel .donate-btn--cafecito { background: linear-gradient(135deg, rgba(255,47,146,0.9), rgba(255,111,181,0.8)); }
.panel .donate-btn--patreon  { background: linear-gradient(135deg, rgba(139,92,246,0.9), rgba(185,104,255,0.75)); }
.panel .donate-btn:hover,
.panel .donate-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(255,47,146,0.3);
  outline: none;
}
.donate-icon {
  font-size: 22px;
  line-height: 1;
}
.donate-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.donate-text strong {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.donate-text small {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  opacity: .92;
}
.panel > p.donate-thanks {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* ---------- MURO DEL CALLEJÓN: brick wall + spray-paint tags ----------
   The bricks are a tiny SVG tile repeated across the wall (no image
   file needed). To tint them, change the fill='%23......' colors in
   the url() below (%23 = the "#" of a hex color).
   .wall-tags is the part that scrolls when there are lots of tags —
   change its max-height to show more/less before scrolling kicks in. */
.panel.guestbook {
  text-align: left;
  max-width: min(900px, 94vw);
  margin: 40px auto;
}
.wall-sign {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  margin: 4px 0 16px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.3;
  color: rgba(242,240,234,0.8);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  transform: rotate(-2deg);
}
.wall {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 46px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.75);
  background-color: #120a0f;
  background-image:
    linear-gradient(180deg, rgba(11,10,18,0.3), rgba(11,10,18,0.62)),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%20viewBox='0%200%2080%2040'%3E%3Crect%20width='80'%20height='40'%20fill='%23120a0f'/%3E%3Crect%20x='1'%20y='1'%20width='38'%20height='18'%20fill='%233a2330'/%3E%3Crect%20x='41'%20y='1'%20width='38'%20height='18'%20fill='%2334202b'/%3E%3Crect%20x='0'%20y='21'%20width='19'%20height='18'%20fill='%233f2533'/%3E%3Crect%20x='21'%20y='21'%20width='38'%20height='18'%20fill='%2336212d'/%3E%3Crect%20x='61'%20y='21'%20width='19'%20height='18'%20fill='%233f2533'/%3E%3C/svg%3E");
  background-size: auto, 80px 40px;
}
.wall-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 26px;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 4px;
  scrollbar-color: var(--magenta) transparent;
}
.wall-tags::-webkit-scrollbar { width: 8px; }
.wall-tags::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 4px; }
.wall-tag {
  max-width: 100%;
  transform: rotate(var(--tilt, 0deg));
}
.wall-tag--fresh {
  animation: sprayIn .7s ease-out;
}
@keyframes sprayIn {
  from { opacity: 0; filter: blur(6px); transform: rotate(var(--tilt, 0deg)) scale(1.15); }
  to   { opacity: 1; filter: blur(0);   transform: rotate(var(--tilt, 0deg)) scale(1); }
}
.wall p.wall-tag-msg {
  margin: 0;
  font-family: var(--marker);
  font-style: normal;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink, var(--magenta));
  text-shadow: 0 0 1px var(--ink, var(--magenta)), 0 2px 10px rgba(0,0,0,0.85);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wall p.wall-tag-sig {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(242,240,234,0.62);
}
.wall p.wall-empty {
  margin: 50px 0;
  text-align: center;
  font-family: var(--marker);
  font-style: normal;
  font-size: 18px;
  color: rgba(242,240,234,0.45);
  transform: rotate(-3deg);
}
.wall p.wall-empty[hidden] { display: none; }

/* the rat walks along the bottom edge, forever. It's a real <button>,
   so it also works with the keyboard (Tab to it, press Enter). */
.wall-rat {
  position: absolute;
  bottom: 10px;
  left: -90px;
  padding: 2px 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(242,240,234,0.75);
  background: none;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  animation: ratWalk 28s linear infinite;
}
.wall-rat:hover,
.wall-rat:focus-visible {
  color: var(--candle);
  animation-play-state: paused;
  outline: none;
}
@keyframes ratWalk {
  0%   { left: -90px; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-rat { animation: none; left: 12px; }
  .tag-pill--donate { animation: none; }
}

/* the form under the wall */
.wall-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}
.wall-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.wall-input {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: #050506;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}
.wall-input:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255,47,146,0.2);
}
.wall-textarea {
  min-height: 84px;
  resize: vertical;
}
/* honeypot: invisible to people, bait for spam bots (see muro.php) */
.wall-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.wall-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wall-counter {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}
.load-more-btn.wall-submit {
  margin: 0;
}
.load-more-btn.wall-submit:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.wall-form p.wall-status {
  min-height: 16px;
  margin: 6px 0 0;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.wall-form p.wall-status--ok    { color: var(--cyan); }
.wall-form p.wall-status--error { color: var(--bubblegum); }


/* ==================================================================
   16. ROUND 3 — banner edge fix + the alley's noir dressing
   ================================================================== */

/* BANNER EDGE: instead of painting a solid dark band over the bottom
   of the banner (which left a hard line wherever the page behind it
   wasn't exactly that dark), the banner image ITSELF now fades to
   transparent, dissolving into whatever the background is doing
   there. The stops below control where the fade starts and how soft
   it is: lower the 42% to start fading sooner. */
.cover-banner {
  background-color: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.12) 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.12) 91%, transparent 100%);
}
.cover-banner::after {
  display: none; /* the old solid fade, replaced by the mask above */
}

/* MURO DEL CALLEJÓN: centered heading + intro */
.panel.guestbook > .eyebrow,
.panel.guestbook > .section-title,
.panel.guestbook > p.wall-intro {
  text-align: center;
}
.panel.guestbook > .eyebrow,
.panel.guestbook > p.wall-intro {
  margin-left: auto;
  margin-right: auto;
}

/* the wall's lighting, in layers:
   ::before = a failing sodium streetlamp (warm cone, top left) + the
              pink spill of the neon sign (top right)
   ::after  = rain (two layers of drops, near ones faster/brighter)
   Everything the visitor reads sits above both (z-index 1+). */
.wall {
  isolation: isolate;
}
.wall::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 75% at 14% -8%, rgba(255,186,110,0.26), transparent 70%),
    radial-gradient(ellipse 34% 55% at 90% 8%, rgba(255,47,146,0.16), transparent 72%);
  animation: lampFlicker 11s infinite;
}
@keyframes lampFlicker {
  0%, 44%, 46.5%, 48%, 100% { opacity: 1; }
  45%, 47%                  { opacity: .55; }
}
.wall::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='110'%20height='330'%20viewBox='0%200%20110%20330'%3E%3Cline%20x1='51'%20y1='80'%20x2='45'%20y2='98'%20stroke='rgba(210,222,255,0.42)'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3Cline%20x1='60'%20y1='27'%20x2='54'%20y2='45'%20stroke='rgba(210,222,255,0.42)'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3Cline%20x1='19'%20y1='277'%20x2='13'%20y2='295'%20stroke='rgba(210,222,255,0.42)'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3Cline%20x1='22'%20y1='190'%20x2='16'%20y2='208'%20stroke='rgba(210,222,255,0.42)'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3Cline%20x1='84'%20y1='32'%20x2='78'%20y2='50'%20stroke='rgba(210,222,255,0.42)'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='70'%20height='210'%20viewBox='0%200%2070%20210'%3E%3Cline%20x1='36'%20y1='146'%20x2='32'%20y2='158'%20stroke='rgba(190,205,255,0.26)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cline%20x1='62'%20y1='122'%20x2='58'%20y2='134'%20stroke='rgba(190,205,255,0.26)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cline%20x1='36'%20y1='133'%20x2='32'%20y2='145'%20stroke='rgba(190,205,255,0.26)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cline%20x1='62'%20y1='153'%20x2='58'%20y2='165'%20stroke='rgba(190,205,255,0.26)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cline%20x1='20'%20y1='50'%20x2='16'%20y2='62'%20stroke='rgba(190,205,255,0.26)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cline%20x1='59'%20y1='134'%20x2='55'%20y2='146'%20stroke='rgba(190,205,255,0.26)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 110px 330px, 70px 210px;
  animation: rainFall .75s linear infinite;
}
@keyframes rainFall {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -110px 330px, -70px 210px; }
}
.wall-decor,
.wall-tags,
.wall p.wall-empty {
  position: relative;
  z-index: 1;
}
.wall-rat {
  z-index: 2;
}

/* the strip across the top of the wall: sign, flyers, neon */
.wall-decor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 22px;
  margin-bottom: 22px;
}
.wall-decor .wall-sign {
  margin: 6px 0 0;
}
@media (max-width: 640px) {
  .wall-decor { justify-content: center; }
}

/* flyers taped to the wall (yes, right next to the "no posters" sign) */
.flyer {
  position: relative;
  width: 124px;
  padding: 12px 8px 0;
  color: #1a1614;
  background-color: #e9e1cf;
  background-image: linear-gradient(160deg, transparent 55%, rgba(70,45,20,0.16));
  box-shadow: 0 6px 14px rgba(0,0,0,0.55);
  transform: rotate(var(--tilt, 0deg));
}
.flyer::before { /* the strip of tape holding it up */
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 46px;
  height: 16px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(242,240,234,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.wall .flyer p.flyer-title {
  margin: 0 0 4px;
  font-family: var(--marker);
  font-style: normal;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  color: #8a0f47;
}
.wall .flyer p.flyer-body {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  line-height: 1.35;
  text-align: center;
  color: #2a2522;
}
.flyer-tabs {
  display: flex;
  margin: 0 -8px;
  border-top: 1px dashed rgba(26,22,20,0.45);
}
.flyer-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 3px 0;
  color: #1a1614;
  background: transparent;
  border: 0;
  border-left: 1px dashed rgba(26,22,20,0.45);
  cursor: pointer;
  transition: background .2s ease;
}
.flyer-tab:first-child { border-left: 0; }
.flyer-tab span {
  display: inline-block;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}
.flyer-tab:hover,
.flyer-tab:focus-visible {
  background: rgba(255,47,146,0.14);
  outline: none;
}
.flyer-tab.torn {
  pointer-events: none;
  animation: tabTear .55s ease-in forwards;
}
@keyframes tabTear {
  to { opacity: 0; transform: translateY(28px) rotate(18deg); }
}

/* the neon sign: "HOTEL / alojamiento", with a dying O */
.neon-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 10px 16px 8px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,47,146,0.25);
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(255,47,146,0.18), inset 0 0 12px rgba(255,47,146,0.08);
  cursor: pointer;
  transition: border-color .2s ease;
}
.neon-sign:hover,
.neon-sign:focus-visible {
  border-color: rgba(255,47,146,0.55);
  outline: none;
}
.neon-main {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .28em;
  padding-left: .28em; /* balances the trailing letter-spacing so it stays centered */
  color: #ffe1f1;
  text-shadow: 0 0 2px #fff, 0 0 6px var(--magenta), 0 0 14px var(--magenta), 0 0 28px var(--magenta);
  animation: neonFlicker 6s infinite;
}
.neon-flicker {
  animation: neonDying 4.3s infinite;
}
.neon-sub {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: #d9fffb;
  text-shadow: 0 0 2px #fff, 0 0 6px var(--cyan), 0 0 14px var(--cyan);
  animation: neonFlicker 7.5s infinite reverse;
}
@keyframes neonFlicker {
  0%, 17%, 21%, 24%, 58%, 61%, 100% { opacity: 1; }
  19%, 23%, 59.5%                  { opacity: .45; }
}
@keyframes neonDying {
  0%, 8%, 12%, 38%, 44%, 47%, 83%, 100% { opacity: 1; }
  10%, 40%, 45.5%, 85%, 92%             { opacity: .08; }
}
.neon-sign.neon-buzz .neon-main,
.neon-sign.neon-buzz .neon-sub {
  animation: neonBuzz .8s steps(1, end) 1;
}
@keyframes neonBuzz {
  0%  { opacity: .2; }  12% { opacity: 1; }  24% { opacity: .1; }  36% { opacity: .9; }
  48% { opacity: .15; } 60% { opacity: 1; }  72% { opacity: .3; }  84%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wall::before, .wall::after, .neon-main, .neon-flicker, .neon-sub { animation: none; }
}


/* ==================================================================
   17. BOX IDENTITIES — every box gets its own personality
   ------------------------------------------------------------------
   Same family (dark panels, same palette, same spacing), but each box
   has its own title font, accent color and one "prop", so they're
   easy to tell apart at a glance:
     Sobre mí         -> diary page: handwriting, ruled lines, washi tape
     Trabajemos       -> terminal window: title bar, prompt, blinking cursor
     Mis redes        -> 2000s messenger buddy list, holographic title
     ¿Invitame algo?  -> café sign: warm tones, Lobster lettering
     Botón de sitio   -> web 1.0: pixel font, pixel grid, blinking NEW!
     Galería          -> darkroom: red safelight, film-strip edges
     Oráculo          -> mysticism: gold on indigo, stars, ornate cards
     Ofrendas         -> corkboard: pinned trinkets, marker label
     Encendé una vela -> candlelit chapel: antique type, wax drips
   (Muro del Callejón keeps its own style from sections 15-16.)
   Each block is independent: delete one and that box simply goes back
   to the shared default look.
   ================================================================== */
:root {
  --f-diary: 'Caveat', 'Permanent Marker', cursive;
  --f-cafe: 'Lobster', 'Playfair Display', serif;
  --f-pixel: 'VT323', 'Space Mono', monospace;
  --f-typewriter: 'Special Elite', 'Space Mono', monospace;
  --f-mystic: 'Cinzel', 'Playfair Display', serif;
  --f-antique: 'IM Fell English', 'EB Garamond', serif;
  --gold: #e9c46a;
  --gold-soft: rgba(233,196,106,0.55);
}

/* ---------- SOBRE MÍ: diary page ---------- */
.panel.about {
  border-color: rgba(255,158,216,0.28);
  background:
    linear-gradient(to right, transparent 0 20px, rgba(255,47,146,0.28) 20px 21px, transparent 21px),
    repeating-linear-gradient(to bottom, transparent 0 33px, rgba(255,158,216,0.07) 33px 34px),
    var(--panel);
}
.panel.about::before { /* washi tape */
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 118px;
  height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(255,158,216,0.6) 0 8px, rgba(255,255,255,0.35) 8px 16px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.panel.about .eyebrow {
  font-family: var(--f-diary);
  font-size: 21px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--bubblegum);
}
.panel.about h2.section-title {
  font-family: var(--f-diary);
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  color: #ffd3ec;
  text-shadow: 0 0 16px rgba(255,158,216,0.35);
  transform: rotate(-2deg);
  transform-origin: left center;
  text-decoration: underline wavy rgba(255,47,146,0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

/* ---------- TRABAJEMOS: terminal window ---------- */
.panel.work {
  padding-top: 58px; /* room for the title bar */
  border-color: rgba(47,224,208,0.3);
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #06100e, #070b0d);
  box-shadow: 0 0 24px rgba(47,224,208,0.08), inset 0 0 40px rgba(47,224,208,0.05);
}
.panel.work::before { /* title bar: three window dots + a fake path */
  content: 'proditae@archivo: ~/trabajo';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 64px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(215,251,232,0.55);
  background:
    radial-gradient(circle at 16px 15px, #ff5f57 0 5px, transparent 5.5px),
    radial-gradient(circle at 32px 15px, #febc2e 0 5px, transparent 5.5px),
    radial-gradient(circle at 48px 15px, #28c840 0 5px, transparent 5.5px),
    rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(47,224,208,0.18);
  border-radius: 6px 6px 0 0;
}
.panel.work .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(47,224,208,0.75);
}
.panel.work h2.section-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .02em;
  color: #7dffd9;
  text-shadow: 0 0 10px rgba(47,224,208,0.55);
}
.panel.work h2.section-title::before {
  content: '> ';
  color: rgba(125,255,217,0.55);
}
.panel.work h2.section-title::after { /* blinking block cursor */
  content: '';
  display: inline-block;
  width: .55em;
  height: 1em;
  margin-left: 6px;
  vertical-align: -0.12em;
  background: #7dffd9;
  box-shadow: 0 0 8px rgba(47,224,208,0.8);
  animation: termBlink 1.1s steps(1, end) infinite;
}
@keyframes termBlink {
  50% { opacity: 0; }
}
.panel.work > p {
  font-family: var(--mono);
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.75;
  color: #d7fbe8;
}
.panel.work > p a {
  color: #7dffd9;
  text-decoration-color: rgba(125,255,217,0.5);
}

/* ---------- MIS REDES: messenger buddy list ---------- */
.panel.links {
  border-radius: 16px;
  border-color: rgba(185,104,255,0.35);
  background:
    linear-gradient(160deg, rgba(185,104,255,0.14), rgba(47,224,208,0.06) 55%, transparent),
    var(--panel);
}
.panel.links .eyebrow {
  color: #cfa8ff;
}
.panel.links h2.section-title {
  background: linear-gradient(90deg, #ff9ed8, #b968ff, #2fe0d0, #ff9ed8);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(185,104,255,0.45));
  animation: holoShift 7s linear infinite;
}
@keyframes holoShift {
  to { background-position: 250% 0; }
}
.panel > p.msn-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
  padding: 4px 12px 4px 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: #d9f7d0;
  background: rgba(40,200,64,0.1);
  border: 1px solid rgba(40,200,64,0.35);
  border-radius: 999px;
}
.msn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3ddc5a;
  box-shadow: 0 0 8px #3ddc5a;
  animation: msnPulse 2.4s ease-in-out infinite;
}
@keyframes msnPulse {
  50% { opacity: .45; }
}
.panel.links .icon-badge .circle {
  position: relative;
}
.panel.links .icon-badge .circle::after { /* "online" dot on each contact */
  content: '';
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3ddc5a;
  border: 2px solid var(--void-2);
}

/* ---------- ¿INVITAME ALGO?: café sign ---------- */
.panel.donations {
  border-color: rgba(255,179,122,0.35);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255,179,122,0.13), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,47,146,0.08), transparent 70%),
    var(--panel);
  box-shadow: 0 0 28px rgba(255,179,122,0.08);
}
.panel.donations .eyebrow {
  color: var(--candle);
}
.panel.donations h2.section-title {
  font-family: var(--f-cafe);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  color: #ffe4c9;
  text-shadow: 0 0 2px #fff, 0 0 12px rgba(255,179,122,0.55), 0 0 26px rgba(255,47,146,0.3);
}

/* ---------- BOTÓN DE SITIO: web 1.0 ---------- */
.panel.button88 {
  border: 2px solid transparent;
  border-image: repeating-linear-gradient(45deg, #b968ff 0 6px, #2fe0d0 6px 12px) 2;
  border-radius: 0;
  background:
    linear-gradient(rgba(185,104,255,0.07) 1px, transparent 1px) 0 0 / 10px 10px,
    linear-gradient(90deg, rgba(185,104,255,0.07) 1px, transparent 1px) 0 0 / 10px 10px,
    var(--panel);
}
.panel.button88::after { /* the classic blinking NEW! */
  content: 'NEW!';
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--f-pixel);
  font-size: 24px;
  line-height: 1;
  color: #fff45c;
  text-shadow: 2px 2px 0 #ff2f92;
  transform: rotate(8deg);
  animation: blink90s 1s steps(1, end) infinite;
}
@keyframes blink90s {
  50% { opacity: 0; }
}
.panel.button88 .eyebrow {
  font-family: var(--f-pixel);
  font-size: 21px;
  letter-spacing: .04em;
  text-transform: none;
  color: #9fe8ff;
}
.panel.button88 h2.section-title {
  font-family: var(--f-pixel);
  font-weight: 400;
  font-size: 50px;
  line-height: .95;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 3px 3px 0 var(--grape), 6px 6px 0 rgba(47,224,208,0.45);
}

/* ---------- GALERÍA: darkroom + film strip ---------- */
.panel.gallery {
  padding-top: 46px;
  padding-bottom: 46px;
  border-color: rgba(255,80,80,0.25);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255,40,40,0.16), transparent 70%),
    var(--panel);
}
.panel.gallery::before,
.panel.gallery::after { /* sprocket holes along the top and bottom edges */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background-color: #050506;
  background-image: linear-gradient(90deg, rgba(242,240,234,0.22) 0 10px, transparent 10px);
  background-size: 22px 8px;
  background-position: 6px 6px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.panel.gallery::before { top: 0; border-radius: 6px 6px 0 0; }
.panel.gallery::after { bottom: 0; border-radius: 0 0 6px 6px; }
.panel.gallery .eyebrow {
  font-family: var(--f-typewriter);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: none;
  color: #ff9b9b;
}
.panel.gallery h2.section-title {
  font-family: var(--f-typewriter);
  font-weight: 400;
  font-size: 42px;
  letter-spacing: .06em;
  color: #ffe9e4;
  text-shadow: 0 0 14px rgba(255,60,60,0.45);
}

/* ---------- ORÁCULO: gold on indigo, ornate cards ---------- */
.panel.tarot {
  text-align: center;
  border-color: var(--gold-soft);
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.75), transparent 2px),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,0.6), transparent 2px),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(233,196,106,0.85), transparent 2.5px),
    radial-gradient(1px 1px at 22% 80%, rgba(255,255,255,0.5), transparent 2px),
    radial-gradient(1px 1px at 55% 42%, rgba(255,255,255,0.35), transparent 2px),
    radial-gradient(1.5px 1.5px at 7% 52%, rgba(233,196,106,0.75), transparent 2.5px),
    radial-gradient(1px 1px at 93% 88%, rgba(255,255,255,0.55), transparent 2px),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(139,92,246,0.22), transparent 75%),
    linear-gradient(180deg, #120d26, #0b0918);
  box-shadow: inset 0 0 0 4px rgba(11,9,24,0.9), inset 0 0 0 5px rgba(233,196,106,0.35), 0 0 30px rgba(139,92,246,0.15);
}
.panel.tarot .eyebrow,
.panel.tarot > p.oracle-intro,
.panel.tarot > p.oracle-warning {
  margin-left: auto;
  margin-right: auto;
}
.panel.tarot .eyebrow {
  font-family: var(--f-mystic);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.panel.tarot h2.section-title {
  font-family: var(--f-mystic);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: .16em;
  padding-left: .16em; /* balances the letter-spacing so it stays centered */
  background: linear-gradient(180deg, #fff3cf, #e9c46a 55%, #b8862f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(233,196,106,0.35));
}
.panel.tarot > p.oracle-intro {
  margin-bottom: 20px;
  font-family: var(--body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: #d8cff0;
}
.panel.tarot .tarot-card {
  width: 196px;
  height: 318px;
}
.panel.tarot .tarot-face {
  border-radius: 12px;
  border: 1px solid var(--gold-soft);
  box-shadow: inset 0 0 0 6px #120d26, inset 0 0 0 7px rgba(233,196,106,0.5), 0 10px 30px rgba(0,0,0,0.55);
  padding: 24px 16px 20px;
}
.panel.tarot .tarot-face::before,
.panel.tarot .tarot-face::after { /* star in two corners */
  content: '✦';
  position: absolute;
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
  opacity: .8;
}
.panel.tarot .tarot-face::before { top: 12px; left: 13px; }
.panel.tarot .tarot-face::after { bottom: 12px; right: 13px; }
.panel.tarot .tarot-back {
  color: var(--gold); /* the emblem is drawn in currentColor */
  background:
    repeating-linear-gradient(45deg, rgba(233,196,106,0.07) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(233,196,106,0.07) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 50% 50%, rgba(139,92,246,0.38), transparent 65%),
    linear-gradient(160deg, #1d1440, #0d0a1f);
}
.tarot-back-emblem {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 0 8px rgba(233,196,106,0.45));
}
.panel.tarot .tarot-front {
  justify-content: flex-start;
  gap: 8px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 20%, rgba(233,196,106,0.12), transparent 70%),
    linear-gradient(180deg, #1a1333, #100c22);
}
.panel.tarot .tarot-front p {
  margin: 0;
  font-style: normal;
}
.panel.tarot p.tarot-numeral {
  font-family: var(--f-mystic);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3em;
  padding-left: .3em;
  color: var(--gold);
}
.panel.tarot p.tarot-glyph {
  margin-top: 4px;
  font-size: 34px;
  line-height: 1.2;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(233,196,106,0.55);
}
.panel.tarot p.tarot-name { /* Playfair, NOT Cinzel: the card name must not share the box title's font */
  width: 100%;
  padding-bottom: 10px;
  font-family: var(--signature);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: .02em;
  color: #fff1cc;
  border-bottom: 1px solid rgba(233,196,106,0.35);
}
.panel.tarot p.tarot-msg {
  margin-top: 4px;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.45;
  color: #f1ecff;
}
.panel.tarot .load-more-btn {
  font-family: var(--f-mystic);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--gold);
  border-color: var(--gold-soft);
}
.panel.tarot .load-more-btn:hover,
.panel.tarot .load-more-btn:focus-visible {
  color: #fff1cc;
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(233,196,106,0.35);
}
.panel.tarot > p.oracle-warning {
  min-height: 22px;
  margin-top: 14px;
  font-family: var(--body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: #ffb3c9;
}

/* ---------- OFRENDAS: corkboard ---------- */
.panel.offerings {
  border-color: rgba(200,150,90,0.3);
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.28) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(255,220,170,0.1) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    linear-gradient(160deg, rgba(120,78,40,0.38), rgba(70,42,20,0.38)),
    var(--panel);
}
.panel.offerings .eyebrow {
  color: #f3c58f;
}
.panel.offerings h2.section-title {
  font-family: var(--marker);
  font-weight: 400;
  font-size: 40px;
  color: #fff;
  text-shadow: 3px 3px 0 #8a0f47, 0 0 16px rgba(255,47,146,0.35);
  transform: rotate(-1.5deg);
}
.panel.offerings .egg-slot { /* each trinket pinned with a pushpin */
  position: relative;
  background: rgba(242,240,234,0.08);
  border-color: rgba(242,240,234,0.35);
}
.panel.offerings .egg-slot::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9ed8, #c2185b 70%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}

/* ---------- ENCENDÉ UNA VELA: candlelit chapel ---------- */
.panel.candles {
  padding-top: 42px;
  border-color: rgba(255,179,122,0.3);
  background:
    radial-gradient(ellipse 60% 50% at 50% 65%, rgba(255,179,122,0.14), transparent 70%),
    linear-gradient(180deg, #16101a, #120c14);
}
.panel.candles::before { /* melted wax dripping from the top edge */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  border-radius: 6px 6px 0 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='24'%20viewBox='0%200%20120%2024'%3E%3Cpath%20fill='rgb(240,228,205)'%20d='M0%200%20H120%20V6%20C112%206%20110%2018%20104%2018%20C98%2018%2098%207%2092%207%20C84%207%2084%2012%2076%2012%20C68%2012%2070%206%2060%206%20C52%206%2050%2022%2044%2022%20C38%2022%2038%208%2030%208%20C22%208%2022%2014%2014%2014%20C8%2014%206%206%200%206%20Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 24px;
  opacity: .85;
  pointer-events: none;
}
.panel.candles .eyebrow {
  font-family: var(--f-antique);
  font-style: italic;
  font-size: 17px;
  letter-spacing: .02em;
  text-transform: none;
  color: #f0c89a;
}
.panel.candles h2.section-title {
  font-family: var(--f-antique);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  color: #ffe7c7;
  text-shadow: 0 0 10px rgba(255,179,122,0.6), 0 0 28px rgba(255,120,40,0.35);
  animation: candleGlow 4s ease-in-out infinite;
}
@keyframes candleGlow {
  50% { text-shadow: 0 0 14px rgba(255,179,122,0.85), 0 0 36px rgba(255,120,40,0.5); }
}
.panel.candles > p:not(.candle-msg) {
  font-family: var(--f-antique);
  font-style: normal;
  font-size: 17px;
  line-height: 1.6;
  color: #efe3d3;
}

@media (prefers-reduced-motion: reduce) {
  .panel.work h2.section-title::after, .panel.links h2.section-title, .msn-dot,
  .panel.button88::after, .panel.candles h2.section-title { animation: none; }
}

/* ==================================================================
   18. RESPONSIVE — phones, tablets, laptops, big screens
   ------------------------------------------------------------------
   Columns: 3 on screens 1024px and wider (laptops, desktops, iPad in
   landscape), 2 on tablets (700-1023px), 1 on phones (under 700px).
   "minmax(0, 1fr)" instead of plain "1fr" is what stops a wide thing
   inside a box (like the gallery's photo strip) from stretching the
   whole grid wider than the screen — that bug made the page scroll
   sideways on phones.
   The "Botón de sitio" box spans two columns so no row is left with
   an empty hole; the candles box goes full width on tablets for the
   same reason.
   ================================================================== */
.content-column,
.footer-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel {
  min-width: 0;
}
.content-column > .panel.button88 {
  grid-column: span 2;
}
@media (max-width: 1023px) {
  .content-column,
  .footer-trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-trio > .panel.candles {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .content-column,
  .footer-trio {
    grid-template-columns: minmax(0, 1fr);
  }
  .content-column > .panel.button88,
  .footer-trio > .panel.candles {
    grid-column: auto;
  }
  .panel {
    padding: 26px 20px;
  }
  .panel.work { padding-top: 54px; }
  .panel.gallery { padding-top: 40px; padding-bottom: 40px; }
  .panel.candles { padding-top: 38px; }
  .polaroid-grid { grid-auto-columns: 138px; }
  .panel.about h2.section-title,
  .panel.button88 h2.section-title { font-size: 44px; }
  .panel.donations h2.section-title,
  .panel.gallery h2.section-title,
  .panel.candles h2.section-title { font-size: 36px; }
  .panel.tarot h2.section-title { font-size: 34px; }
}

/* ---------- small polish after checking real screenshots ---------- */
/* oracle card: content centered vertically (it used to sit at the top
   and leave the bottom half of the card empty), bigger symbol */
.panel.tarot .tarot-front {
  justify-content: center;
}
.panel.tarot p.tarot-glyph {
  font-size: 42px;
}
.panel.tarot p.tarot-msg {
  font-size: 16px;
}
/* phones: the 88x31 embed code wraps onto more lines, so its box grows */
@media (max-width: 699px) {
  .code-copy-box {
    height: 7.5em;
  }
}


/* ==================================================================
   19. EXTRAS — secrets, madrugada, modo 2006, screensaver, MSN nudge,
       walkman, special visitors (the JavaScript is in the EXTRAS part
       at the end of script.js)
   ================================================================== */

/* ---------- secrets tracker (footer) ---------- */
.secrets {
  max-width: 440px;
  margin: 22px auto 0;
  text-align: left;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}
.secrets-summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  padding: 8px 16px;
  color: #f3d98b;
  border: 1px dashed rgba(233,196,106,0.45);
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.secrets-summary::-webkit-details-marker { display: none; }
.secrets-summary:hover,
.secrets[open] .secrets-summary {
  border-style: solid;
  box-shadow: 0 0 16px rgba(233,196,106,0.25);
}
.secrets-list {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 14px 16px;
  list-style: none;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}
.secrets-list li {
  display: flex;
  gap: 8px;
  line-height: 1.45;
}
.secrets-list li.found { color: #f3d98b; }
.secrets-list li .secret-mark { flex: 0 0 auto; }
.secrets p.secrets-note {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.secrets-reward-btn {
  padding: 6px 14px;
  font-family: var(--f-mystic);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  cursor: pointer;
}

/* ---------- "secreto encontrado" toast ---------- */
.secret-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 10000;
  max-width: 90vw;
  padding: 10px 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: #fff1cc;
  background: rgba(16,12,30,0.95);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(233,196,106,0.3);
  opacity: 0;
  transform: translate(-50%, 140%);
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.secret-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- the reward card (all secrets found) ---------- */
.secret-reward {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5,4,10,0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.secret-reward.open {
  opacity: 1;
  pointer-events: auto;
}
.secret-reward-card {
  max-width: 440px;
  padding: 32px 28px;
  text-align: center;
  background: linear-gradient(180deg, #1a1333, #100c22);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(233,196,106,0.35), inset 0 0 0 6px #120d26, inset 0 0 0 7px rgba(233,196,106,0.4);
}
.secret-reward-card p.secret-reward-title {
  margin: 0 0 14px;
  font-family: var(--f-mystic);
  font-weight: 700;
  font-style: normal;
  font-size: 26px;
  letter-spacing: .14em;
  color: var(--gold);
}
.secret-reward-card p.secret-reward-text {
  margin: 0 0 22px;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  color: #f1ecff;
}
.secret-reward-card .load-more-btn { margin: 0 auto; }
/* all 15 found: your name turns gold for that visitor, for good */
html.all-secrets h1.signature {
  background: linear-gradient(90deg, #fff3cf, #e9c46a, #fff3cf);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(233,196,106,0.45));
  animation: goldShimmer 4s linear infinite;
}
@keyframes goldShimmer {
  to { background-position: 200% 0; }
}

/* ---------- MADRUGADA: a darker, bluer, rainier night ---------- */
html.madrugada body::before { /* sits between the sky and the content */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, rgba(20,24,70,0.35), rgba(3,4,18,0.7) 75%);
}
html.madrugada .cover-banner { filter: brightness(.72) saturate(.8) hue-rotate(-12deg); }
html.madrugada .whisper { color: #b9c7ff; }
html.madrugada .neon-main {
  text-shadow: 0 0 3px #fff, 0 0 10px var(--magenta), 0 0 24px var(--magenta), 0 0 46px var(--magenta);
  animation-duration: 3s;
}
html.madrugada .wall::after { animation-duration: .45s; }
html.madrugada .wall::before { animation-duration: 4s; }

/* ---------- MODO 2006 ---------- */
html.modo-2006 body::after { /* sparkly wallpaper */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='90'%20viewBox='0%200%2090%2090'%3E%3Cpath%20fill='rgba(255,158,216,0.55)'%20d='M14%2011%20L15.5%2014.5%20L19%2016%20L15.5%2017.5%20L14%2021%20L12.5%2017.5%20L9%2016%20L12.5%2014.5%20Z'/%3E%3Cpath%20fill='rgba(255,255,255,0.5)'%20d='M62%2034.5%20L63.05%2036.95%20L65.5%2038%20L63.05%2039.05%20L62%2041.5%20L60.95%2039.05%20L58.5%2038%20L60.95%2036.95%20Z'/%3E%3Cpath%20fill='rgba(185,104,255,0.55)'%20d='M34%2066%20L35.2%2068.8%20L38%2070%20L35.2%2071.2%20L34%2074%20L32.8%2071.2%20L30%2070%20L32.8%2068.8%20Z'/%3E%3Cpath%20fill='rgba(47,224,208,0.55)'%20d='M80%2075.5%20L80.75%2077.25%20L82.5%2078%20L80.75%2078.75%20L80%2080.5%20L79.25%2078.75%20L77.5%2078%20L79.25%2077.25%20Z'/%3E%3Ccircle%20cx='48'%20cy='12'%20r='1.4'%20fill='rgba(255,255,255,0.6)'/%3E%3Ccircle%20cx='8'%20cy='52'%20r='1.2'%20fill='rgba(255,244,92,0.6)'/%3E%3C/svg%3E");
  background-size: 90px 90px;
  opacity: .55;
  animation: sparkleDrift 12s linear infinite;
}
@keyframes sparkleDrift {
  to { background-position: 90px 90px; }
}
html.modo-2006 h1.signature {
  background: linear-gradient(90deg, #ff2f92, #ff9ed8, #fff45c, #2fe0d0, #b968ff, #ff2f92);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255,47,146,0.6));
  animation: glitterText 3s linear infinite;
}
@keyframes glitterText {
  to { background-position: 300% 0; }
}
.glitter { /* one sparkle of the cursor trail */
  position: fixed;
  z-index: 9996;
  pointer-events: none;
  line-height: 1;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 6px currentColor;
  animation: glitterFall .9s ease-out forwards;
}
@keyframes glitterFall {
  to { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), 30px) rotate(90deg) scale(.4); }
}

/* ---------- SCREENSAVER ---------- */
.screensaver {
  position: fixed;
  inset: 0;
  z-index: 10002;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.screensaver.on {
  opacity: 1;
  pointer-events: auto;
}
.screensaver-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: var(--script);
  font-size: 40px;
  line-height: 1;
  color: #ff2f92;
  text-shadow: 0 0 18px currentColor;
  will-change: transform;
}
.screensaver-logo img {
  width: 44px;
  height: 44px;
}
.screensaver p.screensaver-corner {
  position: absolute;
  left: 50%;
  bottom: 40px;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-style: normal;
  font-size: 16px;
  color: #fff45c;
  opacity: 0;
}
.screensaver p.screensaver-corner.show { animation: cornerFlash 3s ease-out forwards; }
@keyframes cornerFlash {
  0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; }
}

/* ---------- MSN NUDGE ---------- */
.panel.links .msn-nudge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 16px;
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, #6d9cf5, #2f5fc4);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
}
.panel.links .msn-nudge:hover,
.panel.links .msn-nudge:focus-visible {
  filter: brightness(1.12);
  outline: none;
}
.panel > p.msn-status {
  min-height: 16px;
  margin: -8px 0 12px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: #d9f7d0;
}
.zumbido { animation: zumbidoShake .6s linear; }
@keyframes zumbidoShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 3px); }   20% { transform: translate(7px, -4px); }
  30% { transform: translate(-6px, -2px); }  40% { transform: translate(6px, 4px); }
  50% { transform: translate(-5px, 2px); }   60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, 2px); }   80% { transform: translate(3px, -1px); }
  90% { transform: translate(-1px, 1px); }
}

/* ---------- HIDDEN WALKMAN ---------- */
.panel.about .walkman-trigger { /* the cassette peeking out of the diary */
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 4px;
  font-size: 22px;
  line-height: 1;
  background: none;
  border: 0;
  opacity: .55;
  filter: grayscale(.4);
  transform: rotate(-12deg);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
.panel.about .walkman-trigger:hover,
.panel.about .walkman-trigger:focus-visible {
  opacity: 1;
  filter: none;
  transform: rotate(0deg) scale(1.15);
  outline: none;
}
.walkman {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9990;
  width: 250px;
  padding: 12px 14px 14px;
  font-family: var(--mono);
  color: #e8ecff;
  background: linear-gradient(160deg, #3a3f55, #1f2233);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
  opacity: 0;
  transform: translateY(130%);
  pointer-events: none;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.walkman.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.walkman-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.walkman-brand {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffb3c9;
}
.walkman-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  background: #0d0f18;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.walkman-reel {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px dotted #c9cde0;
  background: radial-gradient(circle, #0d0f18 0 5px, #6b708a 5px 7px, #2a2e40 7px);
}
.walkman-tape {
  flex: 1;
  height: 10px;
  background: #4a3a2e;
  border-radius: 3px;
}
.walkman.playing .walkman-reel { animation: reelSpin 1.6s linear infinite; }
@keyframes reelSpin {
  to { transform: rotate(360deg); }
}
.walkman p.walkman-title {
  margin: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: #cfe3ff;
}
.walkman-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.walkman-btn {
  padding: 5px 11px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(180deg, #555b75, #34384c);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  cursor: pointer;
}
.walkman-btn:hover,
.walkman-btn:focus-visible {
  filter: brightness(1.15);
  outline: none;
}
.walkman-close {
  padding: 2px 7px;
  font-size: 11px;
}

/* ---------- SPECIAL VISITORS ---------- */
.counter-wrap p.special-visit {
  max-width: 460px;
  margin: 10px auto 0;
  font-family: var(--f-mystic);
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(233,196,106,0.5);
}
.counter-display.special {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(233,196,106,0.5);
}
.counter-display.special span {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(233,196,106,0.8);
}

@media (prefers-reduced-motion: reduce) {
  .glitter, html.modo-2006 body::after { display: none; }
  .zumbido, .walkman.playing .walkman-reel, html.all-secrets h1.signature, html.modo-2006 h1.signature { animation: none; }
}


/* ==================================================================
   20. BREATHING BANNER, GHOST NAMES, YOUR MANTRA
   ================================================================== */

/* ---------- the banner breathes ----------
   A soft circle around the banner's center opens until the whole
   image shows, then closes back to the starting look. To tune it:
     speed       -> "18s" in the animation line (one full breath)
     smallest    -> the 22vw in the keyframes (vw = % of screen width)
     largest     -> the 125vw (big enough to reveal everything)
     center      -> "at 50% 46%" in the mask (horizontal, vertical)
   The breathing circle is combined with the same bottom fade as
   before, so the banner never gets a hard edge at any point. (The JS
   only adds the "breathing" class in browsers that can animate this
   smoothly; anywhere else the banner just stays still.) */
@property --breath {
  syntax: '<length>';
  inherits: false;
  initial-value: 560px;
}
.cover-banner.breathing {
  -webkit-mask-image:
    radial-gradient(circle var(--breath) at 50% 46%, #000 52%, rgba(0,0,0,0.6) 76%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.12) 91%, transparent 100%);
          mask-image:
    radial-gradient(circle var(--breath) at 50% 46%, #000 52%, rgba(0,0,0,0.6) 76%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.12) 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: bannerBreath 18s ease-in-out infinite;
}
@keyframes bannerBreath {
  0%, 100% { --breath: 22vw; }
  45%, 55% { --breath: 125vw; }
}

/* ---------- ghost names in the screensaver ----------
   "From the past" without going black & white: a pale, faded lavender
   in an old-letter italic, slightly out of focus, with a soft pink/cyan
   double image like a worn-out VHS tape. Each one surfaces, lingers,
   drifts up and dissolves. */
.ghost-name {
  position: absolute;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--f-antique);
  font-style: italic;
  letter-spacing: .08em;
  color: rgb(214,200,230);
  /* the soft, slightly out-of-focus look comes from these shadows, not
     from a blur filter: animating a blur forces the browser to redraw
     every frame, which can stutter on modest computers and phones */
  text-shadow: 2px 0 rgba(255,47,146,0.28), -2px 0 rgba(47,224,208,0.22), 0 0 6px rgba(214,200,230,0.35), 0 0 18px rgba(185,104,255,0.25);
  opacity: 0;
  transform: rotate(var(--tilt, 0deg));
  animation: ghostName 11s ease-in-out forwards;
}
@keyframes ghostName { /* only opacity + movement: cheap for the browser */
  0%   { opacity: 0;   transform: translateY(14px) scale(.97) rotate(var(--tilt, 0deg)); }
  22%  { opacity: .42; }
  50%  { opacity: .3; }
  64%  { opacity: .4; }
  100% { opacity: 0;   transform: translateY(-28px) scale(1.03) rotate(var(--tilt, 0deg)); }
}
.screensaver-logo {
  z-index: 1; /* always in front of the ghosts */
  padding: 26px 32px; /* room for the glow, so it never gets clipped into a box */
}

/* ---------- your mantra: "Nunca o una eternidad" ---------- */
footer .motto {
  margin-bottom: 26px;
  font-family: var(--signature);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: #ffe3f1;
  text-shadow: 0 0 2px rgba(255,255,255,0.55), 0 0 18px rgba(255,47,146,0.42), 0 0 42px rgba(185,104,255,0.28);
  animation: mottoGlow 7s ease-in-out infinite;
}
footer .motto::after { /* a small ornament underneath */
  content: '✦';
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  color: rgba(255,158,216,0.55);
  text-shadow: none;
}
@keyframes mottoGlow {
  50% { text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 24px rgba(255,47,146,0.6), 0 0 56px rgba(185,104,255,0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-banner.breathing, footer .motto { animation: none; }
}


/* ==================================================================
   21. ROUND 8 — presence, developing polaroids, the moon, cursor by
       zone, payphone, ouija, magic words, unsent letters, special
       dates (the JavaScript is in "EXTRAS, ROUND 2" in script.js)
   ================================================================== */

/* ---------- live presence (under the visit counter) ---------- */
.counter-wrap p.presence-line {
  margin: 8px auto 0;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  color: #c9b8ff;
}
.counter-wrap p.presence-line[hidden] { display: none; }

/* ---------- polaroids that develop (change "5s" to tune) ---------- */
.polaroid.undeveloped .frame img {
  filter: brightness(2.4) contrast(.3) saturate(0) sepia(.4);
  opacity: .55;
  transition: filter 5s ease-out, opacity 5s ease-out;
}
.polaroid.undeveloped.developed .frame img {
  filter: none;
  opacity: 1;
}

/* ---------- the real moon (oracle) ---------- */
.panel.tarot > p.oracle-moon {
  margin: -8px auto 18px;
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: #c9c3e6;
}
html.luna-llena .panel.tarot {
  box-shadow: inset 0 0 0 4px rgba(11,9,24,0.9), inset 0 0 0 5px rgba(220,228,255,0.55), 0 0 46px rgba(210,220,255,0.3);
}
html.luna-llena .panel.tarot > p.oracle-moon {
  color: #eef1ff;
  text-shadow: 0 0 12px rgba(220,228,255,0.75);
}

/* ---------- cursor by zone ---------- */
.cursor-dot .cursor-alt { display: none; }
.cursor-dot.zone-wand .cursor-shape,
.cursor-dot.zone-spray .cursor-shape,
.cursor-dot.zone-flame .cursor-shape,
.cursor-dot.zone-sponge .cursor-shape { display: none; }
.cursor-dot.zone-wand .cursor-wand,
.cursor-dot.zone-spray .cursor-spray,
.cursor-dot.zone-flame .cursor-flame,
.cursor-dot.zone-sponge .cursor-sponge { display: inline; }
.cursor-dot.zone-wand,
.cursor-dot.zone-spray,
.cursor-dot.zone-flame,
.cursor-dot.zone-sponge { width: 30px; height: 30px; }
.cursor-dot.zone-wand svg  { filter: drop-shadow(0 0 6px rgba(233,196,106,0.85)); }
.cursor-dot.zone-spray svg { filter: drop-shadow(0 0 6px rgba(255,47,146,0.7)); }
.cursor-dot.zone-flame svg { filter: drop-shadow(0 0 7px rgba(255,179,122,0.9)); }
.cursor-dot.zone-sponge svg { filter: drop-shadow(0 0 6px rgba(255,224,102,0.8)); }

/* ---------- payphone + answering machine (alley) ---------- */
.payphone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  animation: phoneRing 24s ease-in-out infinite; /* rings now and then, to get noticed */
}
.payphone-sign {
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9fe8ff;
  background: #0d2a3a;
  border: 1px solid rgba(159,232,255,0.4);
  border-radius: 2px;
}
.payphone-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 58px;
  padding: 8px 6px 10px;
  background: linear-gradient(180deg, #2c3442, #171c25);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: border-color .2s ease;
}
.payphone-screen {
  padding: 2px 5px;
  font-family: var(--f-pixel);
  font-size: 15px;
  line-height: 1;
  color: #7dffd9;
  background: #051410;
  border: 1px solid rgba(125,255,217,0.35);
  border-radius: 2px;
  animation: blink90s 1.4s steps(1, end) infinite;
}
.payphone-keys {
  width: 34px;
  height: 30px;
  background: radial-gradient(circle, #cfd3e6 0 1.6px, transparent 2px) 0 0 / 11px 10px;
  opacity: .8;
}
.payphone-handset {
  position: absolute;
  left: 3px;
  top: 26px;
  width: 8px;
  height: 42px;
  background: #0b0e14;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  transform-origin: top center;
  transition: transform .3s ease;
}
.payphone.off-hook .payphone-handset { transform: rotate(-38deg) translate(-4px, -4px); }
.payphone.off-hook { animation: none; }
.payphone:hover .payphone-body,
.payphone:focus-visible .payphone-body { border-color: rgba(159,232,255,0.65); }
.payphone:focus-visible { outline: none; }
@keyframes phoneRing {
  0%, 90%, 100% { transform: none; }
  91% { transform: rotate(-4deg); } 92% { transform: rotate(4deg); }
  93% { transform: rotate(-3deg); } 94% { transform: rotate(3deg); } 95% { transform: none; }
}
.voicemail {
  position: relative;
  z-index: 1;
  margin: -6px 0 18px;
  padding: 12px 14px;
  background: rgba(5,6,10,0.9);
  border: 1px solid rgba(159,232,255,0.3);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(47,224,208,0.12);
}
.voicemail[hidden] { display: none; }
.wall .voicemail p.voicemail-head {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9fe8ff;
}
.wall .voicemail p.voicemail-text {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: #e6f7ff;
}
.voicemail-text.static { animation: vmStatic .18s steps(2, end) infinite; }
@keyframes vmStatic {
  50% { opacity: .82; text-shadow: 1px 0 rgba(255,47,146,0.5), -1px 0 rgba(47,224,208,0.5); }
}
.voicemail-hangup {
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ff9b9b;
  background: transparent;
  border: 1px solid rgba(255,155,155,0.4);
  border-radius: 3px;
  cursor: pointer;
}

/* ---------- OUIJA: its own box, full width under the oracle trio ---------- */
.footer-trio > .panel.ouija { grid-column: 1 / -1; }
.panel.ouija {
  text-align: center;
  border-color: rgba(233,196,106,0.35);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(120,70,40,0.18), transparent 70%),
    linear-gradient(180deg, #160f14, #0e0a10);
}
.panel.ouija .eyebrow,
.panel.ouija > p.ouija-intro,
.panel.ouija > p.ouija-answer {
  margin-left: auto;
  margin-right: auto;
}
.panel.ouija .eyebrow {
  font-family: var(--f-antique);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: none;
  color: #e3b98b;
}
.panel.ouija h2.section-title {
  font-family: var(--signature);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .38em;
  padding-left: .38em; /* keeps it centered despite the spacing */
  text-transform: uppercase;
  color: #f1d9a6;
  text-shadow: 0 0 14px rgba(233,196,106,0.35), 0 2px 0 rgba(0,0,0,0.6);
}
.panel.ouija > p.ouija-intro {
  font-family: var(--body);
  font-style: italic;
  font-size: 17px;
  color: #e6d6c3;
}
.ouija-board {
  position: relative;
  max-width: 860px;
  margin: 18px auto;
  padding: 22px 26px 26px;
  border: 2px solid rgba(233,196,106,0.55);
  border-radius: 46% 46% 18px 18px / 26% 26% 18px 18px; /* arched top, like a classic board */
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(233,196,106,0.1), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #3a2618, #24160f);
  box-shadow: inset 0 0 0 6px #24160f, inset 0 0 0 7px rgba(233,196,106,0.35), inset 0 0 40px rgba(0,0,0,0.55), 0 14px 30px rgba(0,0,0,0.5);
  user-select: none;
}
.ouija-top,
.ouija-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mystic);
  font-weight: 600;
  color: #f1d9a6;
}
.ouija-top { padding: 6px 12px 4px; }
.ouija-bottom { justify-content: center; padding-top: 10px; }
.ouija-brand {
  font-family: var(--signature);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: rgba(241,217,166,0.75);
}
.ouija-word {
  padding: 4px 8px;
  font-size: 18px;
  letter-spacing: .12em;
  border-radius: 6px;
  transition: color .2s ease, text-shadow .2s ease;
}
.ouija-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin: 6px 0;
}
.ouija-char {
  min-width: 1.15em;
  font-family: var(--f-mystic);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: #f1d9a6;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  transition: color .2s ease, text-shadow .2s ease;
}
.ouija-row.arc .ouija-char { transform: translateY(var(--lift, 0px)); }
.ouija-row.nums .ouija-char { font-size: 20px; }
.ouija-char.lit,
.ouija-word.lit {
  color: #fff6dd;
  text-shadow: 0 0 10px rgba(255,214,120,0.95), 0 0 22px rgba(255,180,90,0.6);
}
.ouija-planchette {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 58px;
  height: 64px;
  margin: -32px 0 0 -29px; /* so its little window sits right on the letter */
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 50% 46%, transparent 0 12px, rgba(233,196,106,0.95) 12.5px 14px, rgba(60,38,24,0.94) 14.5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(233,196,106,0.6);
  pointer-events: none;
  transition: transform .55s cubic-bezier(.4,.1,.3,1);
}
.ouija-board.shake { animation: zumbidoShake .5s linear; }
.ouija-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}
.ouija-form .wall-input.ouija-input { flex: 1; margin: 0; }
.ouija-form .load-more-btn.ouija-ask { margin: 0; }
.ouija-form .load-more-btn.ouija-ask:disabled { opacity: .45; cursor: not-allowed; }
.panel.ouija > p.ouija-answer {
  min-height: 24px;
  margin-top: 14px;
  font-family: var(--f-mystic);
  font-weight: 600;
  font-style: normal;
  font-size: 17px;
  letter-spacing: .08em;
  color: #f1d9a6;
}

/* ---------- magic words: summoned ghosts + the "proditae" glitch ---------- */
.ghost-name.ghost-summoned {
  position: fixed;
  z-index: 9995;
  animation-name: ghostSummon;
}
@keyframes ghostSummon {
  0%   { opacity: 0;   transform: translateY(16px) scale(.96) rotate(var(--tilt, 0deg)); }
  20%  { opacity: .72; }
  60%  { opacity: .6; }
  100% { opacity: 0;   transform: translateY(-34px) scale(1.04) rotate(var(--tilt, 0deg)); }
}
html.glitch .hero,
html.glitch main,
html.glitch footer { animation: glitchJolt .9s steps(2, end); }
@keyframes glitchJolt {
  0%, 30%, 60%, 100% { transform: none; filter: none; }
  10% { transform: translate(-6px, 2px) skewX(-6deg); filter: hue-rotate(90deg); }
  20% { transform: translate(5px, -3px) skewX(4deg); filter: hue-rotate(-60deg) saturate(2); }
  45% { transform: translate(-3px, 0) skewX(2deg); filter: hue-rotate(40deg); }
}

/* ---------- letters I never sent ---------- */
.panel.offerings .letter-trigger { /* the envelope pinned on the corkboard */
  position: relative;
  width: 64px;
  height: 52px;
  padding: 0;
  font-size: 36px;
  line-height: 1;
  color: #f3e6cc;
  background: none;
  border: 0;
  text-shadow: 0 3px 6px rgba(0,0,0,0.5);
  transform: rotate(6deg);
  cursor: pointer;
  transition: transform .2s ease;
}
.panel.offerings .letter-trigger::before { /* its pushpin */
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9fe8ff, #1c6f8c 70%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.panel.offerings .letter-trigger:hover,
.panel.offerings .letter-trigger:focus-visible {
  transform: rotate(0deg) scale(1.12);
  outline: none;
}
.letter-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5,4,10,0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.letter-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.letter-paper {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 34px 32px 26px;
  text-align: left;
  color: #2b2018;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 30%),
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(120,90,60,0.18) 29px 30px),
    #efe4cf;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 60px rgba(120,80,40,0.25);
  transform: rotate(-1deg);
}
.letter-seal {
  position: absolute;
  top: -18px;
  right: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 18px;
  color: #ffd3e8;
  background: radial-gradient(circle at 35% 35%, #d6336c, #8a0f47 70%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(0,0,0,0.15);
}
.letter-paper p.letter-to,
.letter-paper p.letter-body,
.letter-paper p.letter-from {
  font-family: var(--f-diary);
  font-weight: 700;
  font-style: normal;
}
.letter-paper p.letter-to   { margin: 0 0 12px; font-size: 24px; line-height: 1.2; color: #6b1336; }
.letter-paper p.letter-body { margin: 0 0 14px; font-size: 22px; line-height: 1.36; color: #2b2018; }
.letter-paper p.letter-from { margin: 0 0 18px; text-align: right; font-size: 22px; color: #6b1336; }
.letter-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.letter-actions .load-more-btn {
  margin: 0;
  color: #4a3424;
  background: transparent;
  border-color: rgba(74,52,36,0.45);
}

/* ---------- special dates ---------- */
.papel-picado { /* Día de Muertos garland, right under the hearts */
  position: relative;
  z-index: 6;
  height: 46px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='46'%20viewBox='0%200%20132%2046'%3E%3Cline%20x1='0'%20y1='3'%20x2='132'%20y2='3'%20stroke='rgba(242,240,234,0.6)'%20stroke-width='1.2'/%3E%3Cpath%20fill='%23ff2f92'%20fill-rule='evenodd'%20d='M4%204%20H44%20V30%20L39%2036%20L34%2030%20L29%2036%20L24%2030%20L19%2036%20L14%2030%20L9%2036%20L4%2030%20L4%2030%20Z%20M13%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M21%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M29%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M24%2019%20L28%2023%20L24%2027%20L20%2023%20Z'/%3E%3Cpath%20fill='%23ff9a1f'%20fill-rule='evenodd'%20d='M48%204%20H88%20V30%20L83%2036%20L78%2030%20L73%2036%20L68%2030%20L63%2036%20L58%2030%20L53%2036%20L48%2030%20L48%2030%20Z%20M57%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M65%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M73%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M68%2019%20L72%2023%20L68%2027%20L64%2023%20Z'/%3E%3Cpath%20fill='%23b968ff'%20fill-rule='evenodd'%20d='M92%204%20H132%20V30%20L127%2036%20L122%2030%20L117%2036%20L112%2030%20L107%2036%20L102%2030%20L97%2036%20L92%2030%20L92%2030%20Z%20M101%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M109%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M117%2014%20a3%203%200%201%200%206%200%20a3%203%200%201%200%20-6%200%20Z%20M112%2019%20L116%2023%20L112%2027%20L108%2023%20Z'/%3E%3C/svg%3E") repeat-x 0 0 / 132px 46px;
  pointer-events: none;
  transform-origin: top center;
  animation: papelSway 6s ease-in-out infinite;
}
@keyframes papelSway {
  50% { transform: skewX(1.5deg); }
}
html.fecha-muertos .ember { /* marigold petals instead of embers */
  background: #ff9a1f;
  box-shadow: 0 0 6px #ff9a1f, 0 0 12px rgba(255,120,0,0.6);
}
.love-layer { /* San Valentín: hearts rising behind the boxes */
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.love-heart {
  position: absolute;
  bottom: -30px;
  color: rgba(255,47,146,0.55);
  text-shadow: 0 0 10px rgba(255,47,146,0.5);
  animation: loveRise linear infinite;
}
@keyframes loveRise {
  0%   { opacity: 0;  transform: translateY(0) rotate(-10deg); }
  10%  { opacity: .9; }
  90%  { opacity: .5; }
  100% { opacity: 0;  transform: translateY(-110vh) rotate(14deg); }
}
html.fecha-valentin footer .motto {
  text-shadow: 0 0 3px #fff, 0 0 26px rgba(255,47,146,0.75), 0 0 60px rgba(255,47,146,0.45);
}
html.fecha-valentin footer .motto::after {
  content: '♥';
  color: #ff2f92;
}
.confetti { /* birthday */
  position: fixed;
  top: -14px;
  z-index: 9994;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translate(var(--sway, 0px), 105vh) rotate(var(--spin, 360deg)); }
}

/* ---------- phones ---------- */
@media (max-width: 699px) {
  .ouija-board { padding: 16px 10px 20px; border-radius: 22px; }
  .ouija-row.arc .ouija-char { transform: none; } /* no arc when the letters wrap */
  .ouija-char { font-size: 19px; }
  .ouija-word { font-size: 15px; }
  .ouija-brand { font-size: 15px; }
  .panel.ouija h2.section-title { font-size: 32px; }
  .letter-paper { padding: 30px 22px 22px; }
  .letter-paper p.letter-body { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .payphone, .voicemail-text.static, .papel-picado, .love-heart, .confetti, html.glitch .hero, html.glitch main, html.glitch footer { animation: none; }
  .ouija-planchette { transition: none; }
  .love-layer { display: none; }
}

/* ==================================================================
   22. FOOTER BANNERS — the Botonera (88×31 wall), the compact site
       button box, the scrolling strip, and the MSN-style status
   ================================================================== */
.footer-banners {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 26px;
  max-width: min(1500px, 94vw);
  margin: 40px auto;
  text-align: left;
}
@media (max-width: 1023px) {
  .footer-banners { grid-template-columns: minmax(0, 1fr); }
}

/* the Botonera: a little Windows-98-style window */
.panel.banners {
  padding-top: 50px;
  border-color: rgba(255,47,146,0.45);
  border-radius: 4px;
}
.banners-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 12px;
  font-family: var(--f-pixel);
  font-size: 19px;
  color: #fff;
  background: linear-gradient(90deg, #8a0f47, #ff2f92 45%, #b968ff);
  border-radius: 3px 3px 0 0;
}
.banners-winbtns { display: flex; gap: 4px; }
.banners-winbtns i {
  display: block;
  width: 16px;
  height: 14px;
  background: #d9d4e6;
  border: 1px solid #fff;
  box-shadow: inset -1px -1px 0 #6b6680;
}
.panel.banners .eyebrow {
  font-family: var(--f-pixel);
  font-size: 19px;
  letter-spacing: .03em;
  text-transform: none;
  color: #ff9ed8;
}
.panel.banners h2.section-title {
  font-family: var(--f-pixel);
  font-weight: 400;
  font-size: 46px;
  line-height: .95;
  color: #fff;
  text-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 rgba(185,104,255,0.45);
}
.banner-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: rgba(0,0,0,0.38);
  border: 1px solid var(--panel-border);
}
.b88 {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}
a.b88 { transition: transform .15s ease, filter .15s ease; }
a.b88:hover,
a.b88:focus-visible { transform: translateY(-2px); filter: brightness(1.15); outline: none; }
.b88-empty { /* a free spot, waiting for a button */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-pixel);
  font-size: 15px;
  color: rgba(242,240,234,0.32);
  border: 1px dashed rgba(242,240,234,0.25);
}
.panel.banners > p.banners-note {
  max-width: none;
  margin-top: 12px;
  text-align: center;
}

/* the site-button box, now smaller, next to the Botonera */
.footer-banners .panel.button88 { text-align: center; }
.footer-banners .panel.button88 .eyebrow,
.footer-banners .panel.button88 > p { margin-left: auto; margin-right: auto; }
.footer-banners .panel.button88 h2.section-title { font-size: 36px; }
.footer-banners .panel.button88 > p:not(.placeholder-note) { font-size: 15px; line-height: 1.6; } /* the small note keeps its own size */
.footer-banners .panel.button88 .code-copy-box { font-size: 10px; }
.footer-banners .panel.button88 .load-more-btn { margin-top: 0; }

/* the scrolling strip at the very bottom */
.banner-scroll {
  position: relative;
  overflow: hidden;
  margin: 34px 0 0;
  padding: 6px 0;
  background: rgba(0,0,0,0.45);
  border-top: 1px solid rgba(255,47,146,0.3);
  border-bottom: 1px solid rgba(255,47,146,0.3);
}
.banner-scroll-track {
  display: flex;
  width: max-content;
  animation: bannerScroll var(--scroll-dur, 40s) linear infinite;
}
.banner-scroll-track .b88 {
  flex: 0 0 auto;
  margin-right: 8px; /* margin, not gap: keeps both halves identical for a seamless loop */
}
.banner-scroll:hover .banner-scroll-track { animation-play-state: paused; }
@keyframes bannerScroll {
  to { transform: translateX(-50%); }
}

/* the MSN-style status pill */
.tag-pill.tag-pill--status {
  font-style: italic;
  text-transform: none;
  letter-spacing: .02em;
  color: #d9cff2;
}

@media (prefers-reduced-motion: reduce) {
  .banner-scroll-track { animation: none; }
}


/* ==================================================================
   23. MIS VIDEOS (YouTube TV) + NETWORK ICONS
   ================================================================== */
:root {
  --f-tv: 'Righteous', 'Space Mono', sans-serif;
  --f-pet: 'Press Start 2P', 'VT323', monospace;
}

/* ---------- Mis redes: real platform icons, in the site's neon colors ---------- */
.panel.links .icon-badge .circle {
  color: var(--accent, var(--magenta));
  border-color: rgba(255,255,255,0.12);
}
.panel.links .icon-badge:hover .circle,
.panel.links .icon-badge:focus-visible .circle { color: #fff; }
.net-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
}

/* ---------- MIS VIDEOS: an old CRT television ---------- */
.panel.youtube {
  border-color: rgba(255,80,80,0.35);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,60,60,0.1), transparent 70%),
    var(--panel);
}
.panel.youtube .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ff8a8a;
}
.panel.youtube h2.section-title {
  font-family: var(--f-tv);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 2px 2px 0 #ff2f2f, 4px 4px 0 rgba(255,47,146,0.45);
}
.tv {
  margin-top: 6px;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, #2b2230, #18131c);
  border: 2px solid #3a3040;
  border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.5);
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050506;
  border-radius: 14px / 18px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 0 0 3px #0d0a10;
}
.tv-screen::after { /* scanlines + glass glare */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.1), transparent 50%);
}
.tv-screen.playing::after { display: none; } /* nothing over the real player */
.tv-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #000;
  border: 0;
  cursor: pointer;
}
.tv-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
  transition: filter .3s ease;
}
.tv-play:hover img,
.tv-play:focus-visible img { filter: brightness(1.12) saturate(1.2); }
.tv-play:focus-visible { outline: none; }
.tv-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding-left: 4px;
  font-size: 22px;
  color: #fff;
  background: rgba(255,0,60,0.85);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255,0,60,0.6);
  transform: translate(-50%, -50%);
}
.tv-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 12px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
.tv-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tv-screen.no-signal { /* TV static */
  background:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,0.9) 0 .5px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, rgba(170,170,170,0.8) 0 .5px, transparent 1px 4px),
    #2a2a2e;
  animation: tvNoise .2s steps(3) infinite;
}
@keyframes tvNoise {
  33% { background-position: 4px 7px, -6px 3px, 0 0; }
  66% { background-position: -5px 2px, 3px -6px, 0 0; }
}
.tv-static-text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-family: var(--f-pixel);
  font-style: normal;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  background: rgba(0,0,0,0.35);
}
.tv-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 0;
}
.tv-ch {
  padding: 0 6px;
  font-family: var(--f-pixel);
  font-size: 18px;
  color: #7dffd9;
  background: #051410;
  border-radius: 2px;
}
.tv-led {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: #3a1515;
}
.tv-led.on { background: #ff2f2f; box-shadow: 0 0 8px #ff2f2f; }
.tv-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6b6075, #2b2430 70%);
  border: 1px solid #000;
}
.yt-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.yt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px;
  text-align: left;
  color: var(--text);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.yt-item:hover,
.yt-item:focus-visible { border-color: rgba(255,80,80,0.55); background: rgba(255,60,60,0.08); outline: none; }
.yt-item img {
  flex: 0 0 auto;
  width: 72px;
  height: 41px;
  object-fit: cover;
  border-radius: 3px;
}
.yt-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.yt-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.3;
}
.yt-item-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}
.yt-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.yt-cta { color: #ff8a8a; }
.yt-cta:hover { color: #fff; }


@media (prefers-reduced-motion: reduce) {
  .tv-screen.no-signal { animation: none; }
}


/* ==================================================================
   24. HUESITO — the shared pet, in a 90s virtual-pet egg
   ================================================================== */
.panel.pet {
  text-align: center;
  border-color: rgba(255,158,216,0.4);
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,158,216,0.12), transparent 70%),
    var(--panel);
}
.panel.pet .eyebrow,
.panel.pet > p.pet-intro,
.panel.pet > p.pet-today {
  margin-left: auto;
  margin-right: auto;
}
.panel.pet .eyebrow {
  font-family: var(--f-pet);
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: .03em;
  text-transform: none;
  color: #ff9ed8;
}
.panel.pet h2.section-title {
  font-family: var(--f-pet);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #ffd6ec;
  text-shadow: 3px 3px 0 #ff2f92;
}
.panel.pet > p.pet-intro {
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: #e8dcef;
}
.pet-device { /* the plastic egg */
  position: relative;
  width: min(100%, 270px);
  margin: 10px auto 0;
  padding: 26px 22px 20px;
  border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
  background: radial-gradient(circle at 35% 25%, #ffe3f1, #ff9ed8 55%, #e0679f);
  box-shadow: inset -8px -10px 18px rgba(120,20,70,0.35), inset 6px 8px 14px rgba(255,255,255,0.5), 0 14px 28px rgba(0,0,0,0.5);
}
.pet-screen {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 172px;
  overflow: hidden;
  background: #1b1424;
  border-radius: 14px;
  box-shadow: inset 0 0 0 4px #2b1f36, inset 0 0 22px rgba(0,0,0,0.8);
}
.pet-screen::after { /* LCD lines */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px);
}
.pet-screen p.pet-bubble {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;
  margin: 0;
  padding: 6px 8px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.35;
  color: #1b1424;
  background: #fff4fa;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.pet-screen p.pet-bubble.show {
  opacity: 1;
  transform: none;
}
.pet-sprite {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  margin-bottom: 8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  animation: petBob 2.4s ease-in-out infinite;
}
.pet-sprite svg { display: block; width: 100%; height: 100%; }
.pet-sprite:focus-visible { outline: 2px dashed #ff9ed8; outline-offset: 4px; }
@keyframes petBob { 50% { transform: translateY(-6px); } }
.pet-sprite.state-feliz { animation: petHop .9s ease-in-out infinite; }
@keyframes petHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
.pet-sprite.state-hambre { animation: petShake 1.6s ease-in-out infinite; }
@keyframes petShake { 0%, 60%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-3deg); } 40% { transform: translateX(3px) rotate(3deg); } }
.pet-sprite.state-triste { opacity: .85; animation: petSway 4s ease-in-out infinite; }
@keyframes petSway { 50% { transform: translateY(3px) rotate(-4deg); } }
.pet-sprite.state-durmiendo { animation: petBreathe 4s ease-in-out infinite; }
@keyframes petBreathe { 50% { transform: scale(1.04, .97); } }
.pet-zzz {
  position: absolute;
  right: 18%;
  top: 34%;
  z-index: 2;
  font-family: var(--f-pixel);
  font-size: 20px;
  color: #b9c7ff;
  animation: petZzz 3s ease-in-out infinite;
}
.pet-zzz[hidden] { display: none; }
@keyframes petZzz { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.pet-stats {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 12px 4px 0;
  font-family: var(--f-pet);
  font-size: 7px;
  line-height: 1.6;
  color: #6b1336;
}
.pet-stats b {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: .05em;
  color: #c2185b;
}
.pet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.pet-actions button {
  padding: 6px 9px;
  font-family: var(--mono);
  font-size: 10px;
  color: #fff;
  background: #c2185b;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 0 #7a0e3a;
  cursor: pointer;
}
.pet-actions button:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a0e3a; }
.pet-actions button:disabled { opacity: .5; cursor: not-allowed; }
.panel.pet > p.pet-today {
  min-height: 18px;
  margin-top: 14px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .pet-sprite, .pet-zzz { animation: none; }
}


/* ==================================================================
   25. ALLEY, ROUND 2 — street fonts, the rat's spray can, the girl at
       the corner
   ================================================================== */
/* four street fonts: each visitor gets one (plus a color) for good;
   the rat picks one at random every time it sprays */
.gf-1 { font-family: var(--marker); }
.gf-2 { font-family: 'Sedgwick Ave', var(--marker), cursive; }
.gf-3 { font-family: 'Rubik Spray Paint', var(--marker), sans-serif; }
.gf-4 { font-family: 'Rock Salt', var(--marker), cursive; }
.wall .wall-tag.gf-1 p.wall-tag-msg { font-family: var(--marker); font-size: 21px; }
.wall .wall-tag.gf-2 p.wall-tag-msg { font-family: 'Sedgwick Ave', var(--marker), cursive; font-size: 26px; line-height: 1.15; }
.wall .wall-tag.gf-3 p.wall-tag-msg { font-family: 'Rubik Spray Paint', var(--marker), sans-serif; font-size: 21px; }
.wall .wall-tag.gf-4 p.wall-tag-msg { font-family: 'Rock Salt', var(--marker), cursive; font-size: 16px; line-height: 1.6; }
@media (max-width: 699px) {
  .wall .wall-tag.gf-1 p.wall-tag-msg { font-size: 18px; }
  .wall .wall-tag.gf-2 p.wall-tag-msg { font-size: 22px; }
  .wall .wall-tag.gf-3 p.wall-tag-msg { font-size: 18px; }
  .wall .wall-tag.gf-4 p.wall-tag-msg { font-size: 14px; }
}

/* the rat's spray can + its mist */
.wall-rat.spraying { animation-play-state: paused; }
.wall-rat.spraying::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -3px;
  width: 6px;
  height: 11px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #cfd3e6 0 3px, var(--magenta) 3px);
  transform: rotate(25deg);
}
.wall-rat.spraying::before {
  content: '';
  position: absolute;
  right: -24px;
  top: -18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,47,146,0.6), transparent 70%);
  animation: sprayMist .5s ease-out infinite;
}
@keyframes sprayMist {
  from { opacity: .9; transform: scale(.4); }
  to   { opacity: 0;  transform: scale(1.4) translate(4px, -4px); }
}
.rat-graffiti { /* what the rat painted: behind the visitors' grafitis */
  position: absolute;
  z-index: 0;
  max-width: 70%;
  font-size: clamp(15px, 3.6vw, 22px);
  line-height: 1.15;
  text-align: center;
  color: var(--ink, var(--magenta));
  text-shadow: 0 0 1px var(--ink, var(--magenta)), 0 2px 8px rgba(0,0,0,0.85);
  opacity: .88;
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--tilt, 0deg));
  animation: ratGraffitiIn .8s ease-out;
}
.rat-graffiti.gf-2 { font-size: clamp(18px, 4.2vw, 27px); }
.rat-graffiti.gf-4 { font-size: clamp(12px, 2.8vw, 16px); line-height: 1.6; }
@keyframes ratGraffitiIn {
  from { opacity: 0; filter: blur(5px); transform: translateX(-50%) rotate(var(--tilt, 0deg)) scale(1.2); }
}
.rat-graffiti.fading { animation: ratGraffitiFade 3s ease-in forwards; }
@keyframes ratGraffitiFade {
  to { opacity: 0; filter: blur(3px); }
}

/* the girl at the corner (ascii) */
.alley-girl {
  position: absolute;
  left: 0;
  bottom: 6px;
  z-index: 2;
  display: none;
  padding: 0;
  color: rgba(255,214,236,0.94);
  background: none;
  border: 0;
  text-shadow: 0 0 6px rgba(255,47,146,0.6);
  cursor: pointer;
  will-change: transform;
}
.alley-girl.on { display: block; }
.alley-girl pre {
  margin: 0;
  overflow: visible; /* never scrollbars around her */
  white-space: pre;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.05;
  text-align: left;
}
.alley-girl {
  overflow: visible;
  width: max-content;
}
.alley-girl:focus-visible { outline: 1px dashed rgba(255,214,236,0.6); }
@media (prefers-reduced-motion: reduce) {
  .wall-rat.spraying::before { animation: none; }
  .rat-graffiti, .rat-graffiti.fading { animation: none; }
}

/* the "PROHIBIDO FIJAR CARTELES" sign is a <pre> too: no scrollbars there
   either; on phones it just gets a little smaller so it always fits */
.wall-decor .wall-sign {
  overflow: hidden;
}
@media (max-width: 699px) {
  .wall-decor .wall-sign { font-size: 10px; }
}


/* ==================================================================
   26. THE TERRITORIAL RAT — layers on the wall, back to front:
       visitors' grafitis (1) -> the rat's paint (3) -> the girl
       walking by (4) -> the rat herself (5)
   ================================================================== */
.rat-graffiti { z-index: 3; }
.rat-graffiti.over { /* painted right over someone's grafiti: a rough spray
                        splash behind it so hers reads clearly on top */
  padding: 8px 18px;
  background: radial-gradient(ellipse at center, rgba(11,10,18,0.85) 30%, rgba(11,10,18,0.55) 55%, transparent 72%);
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 1px var(--ink, var(--magenta)), 0 2px 10px rgba(0,0,0,0.9);
  opacity: .97;
}
.alley-girl { z-index: 4; }
.wall-rat { z-index: 5; }


/* ==================================================================
   27. SITE VERSION — the tiny line at the very bottom of the footer
   ================================================================== */
footer p.site-version {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
  color: rgba(157,147,176,0.55);
}


/* ==================================================================
   28. SCRUBBING THE RAT'S GRAFITIS — sponge, soap bubbles, an angry
       rat (#@!%), and her white flag when she gives up
   ================================================================== */
.rat-graffiti {          /* her grafitis are buttons now */
  padding: 0;
  background: none;
  border: 0;
  pointer-events: auto;
  cursor: pointer;
}
.rat-graffiti:hover { filter: brightness(1.15); }
.rat-graffiti:focus-visible { outline: 1px dashed rgba(255,255,255,0.55); outline-offset: 4px; }
.rat-graffiti.wiping {   /* wiped off, left to right */
  pointer-events: none;
  animation: ratGraffitiWipe .9s ease-in forwards;
}
@keyframes ratGraffitiWipe {
  from { clip-path: inset(0 0 0 0);    opacity: 1;  filter: blur(0); }
  to   { clip-path: inset(0 0 0 100%); opacity: .2; filter: blur(3px); }
}
.wipe-bubble {
  position: absolute;
  z-index: 4;
  width: var(--s, 8px);
  height: var(--s, 8px);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0.08) 60%);
  pointer-events: none;
  animation: wipeBubble .9s ease-out forwards;
}
@keyframes wipeBubble {
  from { opacity: 1; transform: translate(0, 0) scale(.4); }
  to   { opacity: 0; transform: translate(var(--dx, 0px), -28px) scale(1.1); }
}
/* the rat, offended: freezes, turns red, curses */
.wall-rat.mad {
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255,60,60,0.8);
  animation-play-state: paused;
}
.wall-rat.mad::before {
  content: '#@!%';
  position: absolute;
  top: -16px;
  left: 50%;
  right: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #ff6b6b;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: grawlix .4s ease-in-out infinite;
}
@keyframes grawlix {
  0%, 100% { transform: translateX(-50%) rotate(-7deg); }
  50%      { transform: translateX(-50%) rotate(7deg) scale(1.12); }
}
/* the rat, giving up: a little white flag */
.wall-rat.truce { color: rgba(242,240,234,0.55); }
.wall-rat.truce::after {
  content: '';
  position: absolute;
  top: -15px;
  right: -12px;
  width: 14px;
  height: 18px;
  border-radius: 0;
  background:
    linear-gradient(#f4f1ea, #f4f1ea) 2px 0 / 11px 8px no-repeat,
    linear-gradient(#cfd3e6, #cfd3e6) 0 0 / 2px 18px no-repeat;
  transform-origin: left bottom;
  animation: flagWave .6s ease-in-out infinite alternate;
}
@keyframes flagWave {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rat-graffiti.wiping { animation: none; opacity: 0; }
  .wipe-bubble, .wall-rat.mad::before, .wall-rat.truce::after { animation: none; }
}


/* ==================================================================
   29. THE OUIJA, HAUNTED — the spirits' answers, apparitions at the
       sides (or inside the wood on small screens), sounds in text
   ================================================================== */
.panel.ouija > p.ouija-answer .ouija-spelled {
  display: block;
  font-family: var(--f-mystic);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .22em;
  color: #f1d9a6;
  text-shadow: 0 0 12px rgba(233,196,106,0.4);
}
.panel.ouija > p.ouija-answer .ouija-says {
  display: block;
  max-width: 620px;
  margin: 8px auto 6px;
  font-family: var(--f-antique);
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: #eadbc8;
}
.panel.ouija > p.ouija-answer .ouija-who {
  display: block;
  font-family: var(--f-antique);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .03em;
  color: #c9a37a;
}
/* the layers where things appear: behind the panel's content, and
   inside the board's wood (behind the letters) */
.panel.ouija > :not(.ouija-haunt) { position: relative; z-index: 1; }
.ouija-haunt,
.ouija-board-haunt {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ouija-board-haunt { border-radius: inherit; }
.ouija-board > .ouija-top,
.ouija-board > .ouija-row,
.ouija-board > .ouija-bottom { position: relative; z-index: 1; }
.ouija-apparition {
  position: absolute;
  opacity: 0;
  color: #e6e0ff;
  will-change: transform, opacity;
}
.ouija-apparition svg {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(.6px) drop-shadow(0 0 10px rgba(205,195,255,0.55));
}
.ouija-apparition.kind-face  { animation: hauntFace 7s ease-in-out forwards; }
.ouija-apparition.kind-ghost { animation: hauntGhost 7s ease-in-out forwards; }
.ouija-apparition.kind-eyes  { color: #ff5d7a; animation: hauntEyes 3.6s ease-in-out forwards; }
.ouija-apparition.kind-hand  { color: #dfe6ff; animation: hauntHand 6s ease-out forwards; }
.ouija-apparition.kind-sound,
.panel.ouija p.ouija-sounds {
  font-family: var(--f-antique);
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  color: #d9cfee;
  text-shadow: 0 0 10px rgba(185,104,255,0.55);
}
.ouija-apparition.kind-sound { animation: hauntSound 5s ease-in-out forwards; }
.ouija-apparition.vanish { animation: hauntVanish .6s ease-in forwards !important; }
@keyframes hauntFace {
  0%   { opacity: 0; transform: scale(.85); filter: blur(6px); }
  30%  { opacity: var(--peak, .7); filter: blur(0); }
  70%  { opacity: var(--peak, .7); }
  100% { opacity: 0; transform: scale(1.08) translateY(-8px); filter: blur(8px); }
}
@keyframes hauntGhost {
  0%   { opacity: 0; transform: translate(0, 20px); }
  25%  { opacity: var(--peak, .75); }
  50%  { transform: translate(10px, -15px); }
  75%  { opacity: var(--peak, .75); transform: translate(-8px, -45px); }
  100% { opacity: 0; transform: translate(0, -70px); }
}
@keyframes hauntEyes {
  0%       { opacity: 0; transform: scaleY(1); }
  15%      { opacity: var(--peak, .9); }
  42%      { transform: scaleY(1); }
  46%      { transform: scaleY(.08); }
  50%      { transform: scaleY(1); }
  78%      { opacity: var(--peak, .9); transform: scaleY(1); }
  82%      { transform: scaleY(.08); }
  86%      { transform: scaleY(1); opacity: var(--peak, .9); }
  100%     { opacity: 0; }
}
@keyframes hauntHand {
  0%   { opacity: 0; transform: scale(1.1); }
  12%  { opacity: var(--peak, .55); transform: scale(1); }
  100% { opacity: 0; transform: scale(1); filter: blur(4px); }
}
@keyframes hauntSound {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  20%  { opacity: 1; filter: blur(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; filter: blur(4px); transform: translateY(-10px); }
}
@keyframes hauntVanish {
  to { opacity: 0; filter: blur(10px); transform: scale(1.2); }
}
/* small screens: the sounds get their own line under the board */
.panel.ouija p.ouija-sounds {
  display: none;
  min-height: 22px;
  margin: -4px auto 6px;
  opacity: 0;
}
.panel.ouija.narrow-haunt p.ouija-sounds { display: block; }
.panel.ouija p.ouija-sounds.on { animation: hauntSound 5s ease-in-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .ouija-apparition, .panel.ouija p.ouija-sounds.on { animation-name: hauntFadeOnly !important; }
}
@keyframes hauntFadeOnly {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: var(--peak, .6); }
}


/* ==================================================================
   30. THE CURSOR ABOVE EVERYTHING · THE WISH UNDER THE CANDLES · THE CAT
   ================================================================== */
/* the custom cursor must sit above every overlay (letters, lightbox,
   walkman, screensaver...) or it disappears behind them */
.cursor-dot { z-index: 2147483647; }

/* the wish: a slip of paper under the candles */
.wish-altar {
  position: relative;
  max-width: 360px;
  margin: 24px auto 0;
  text-align: center;
}
.wish-paper {
  position: relative;
  padding: 16px 18px 14px;
  color: #e8d9c0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(240,226,196,0.11), rgba(240,226,196,0.05));
  border: 1px dashed rgba(255,179,122,0.35);
  border-radius: 4px 6px 5px 3px;
  transition: opacity .6s, border-color .6s, box-shadow .6s;
}
.wish-altar.locked .wish-paper { opacity: .6; }
.wish-altar.ready .wish-paper {
  border-color: rgba(255,179,122,0.7);
  box-shadow: 0 0 18px rgba(255,179,122,0.22), inset 0 0 14px rgba(255,179,122,0.1);
}
.panel.candles .wish-altar p.wish-hint {
  margin: 0;
  font-family: var(--f-antique);
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  color: #d8c4a8;
}
.wish-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffb37a;
}
.wish-text {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  font-family: var(--f-antique);
  font-size: 17px;
  font-style: italic;
  line-height: 1.4;
  color: #f3e6cf;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,179,122,0.3);
  border-radius: 3px;
  resize: none;
}
.wish-text:focus { outline: none; border-color: rgba(255,179,122,0.75); box-shadow: 0 0 10px rgba(255,179,122,0.25); }
.wish-form .load-more-btn.wish-burn { margin: 10px 0 0; }
.panel.candles .wish-altar p.wish-note {
  margin: 8px 0 0;
  font-family: var(--f-antique);
  font-size: 13px;
  font-style: italic;
  color: rgba(216,196,168,0.72);
}
.panel.candles .wish-altar p.wish-reply {
  min-height: 26px;
  margin: 12px 0 0;
  font-family: var(--f-antique);
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
  color: #ffcf9e;
  text-shadow: 0 0 10px rgba(255,179,122,0.45);
}
.wish-paper.burning { pointer-events: none; animation: wishBurn 2.2s ease-in forwards; }
@keyframes wishBurn {
  0%   { clip-path: inset(0 0 0 0); filter: none; }
  15%  { filter: sepia(.6) brightness(1.25); box-shadow: 0 0 28px rgba(255,120,40,0.6); }
  100% { clip-path: inset(0 0 100% 0); filter: sepia(1) brightness(.5); opacity: .3; }
}
.wish-paper.renew { animation: wishRenew 1.2s ease-out; }
@keyframes wishRenew {
  from { opacity: 0; transform: translateY(6px); }
}
.wish-ember {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 6px 2px rgba(255,140,40,0.75);
  pointer-events: none;
  opacity: 0;
  animation: wishEmber 1.8s ease-out forwards;
}
@keyframes wishEmber {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -90px) scale(.3); }
}

/* the cat (ascii, amber), and the rat running for her life */
.alley-cat {
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 4;
  display: none;
  width: max-content;
  padding: 0;
  overflow: visible;
  color: #ffd27a;
  background: none;
  border: 0;
  text-shadow: 0 0 6px rgba(255,179,122,0.55);
  cursor: pointer;
  will-change: transform;
}
.alley-cat.on { display: block; }
.alley-cat pre {
  margin: 0;
  overflow: visible;
  white-space: pre;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.05;
  text-align: left;
}
.alley-cat:focus-visible { outline: 1px dashed rgba(255,210,122,0.6); }
.wall-rat.fleeing { animation: none; }
.wall-rat.fleeing::before {
  content: '!!';
  position: absolute;
  top: -16px;
  left: 50%;
  right: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #ffd27a;
  transform: translateX(-50%);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .wish-paper.burning, .wish-paper.renew, .wish-ember { animation: none; }
}


/* ==================================================================
   RESPONSIVE POLISH  (added 2026-10-06, after the responsive audit)
   ------------------------------------------------------------------
   1) READABILITY: text that is meant to be read had sizes of 7-10px.
      Raised to 10-12px. Purely decorative bits (the alley flyer tabs,
      the payphone sign, the graffiti signatures) are left alone on
      purpose. To go bigger/smaller, change the font-size numbers here.
   2) TOUCH TARGETS: on tablets/phones (or any touch screen) the small
      links and buttons get a bigger tappable area, about 32px tall,
      WITHOUT changing how they look: inline links grow with padding +
      an equal negative margin, buttons get a min-height.
   3) GALLERY SCROLL HINT: the photo strip scrolls sideways on narrow
      screens; the fade on the edge, the "deslizá para ver más" line and
      the one-time nudge come from "GALLERY SCROLL HINT" in script.js.
   Selectors are as specific as the rules they override.
   ================================================================== */

/* ---- 1) readability ---- */
ul.quick-facts > li > b { font-size: 11px; }
a.icon-badge > span.label { font-size: 11px; }
section.panel.pet > p.eyebrow { font-size: 11px; }
div.pet-stats > span { font-size: 10px; }
div.pet-actions > button { font-size: 12px; }
figure.polaroid > figcaption,
figure.polaroid.undeveloped > figcaption { font-size: 11px; }
footer > p.credits,
div.counter-wrap > p.counter-sub,
footer p.site-version { font-size: 11px; }
div.walkman-top > span.walkman-brand { font-size: 11px; }
.wall .flyer p.flyer-body { font-size: 11px; }
form.wall-form > label.wall-label,
span.wall-counter { font-size: 11px; }
.footer-banners .panel.button88 .code-copy-box { font-size: 12px; }

/* ---- 2) touch targets (tablets, phones, any touch screen) ---- */
@media (max-width: 1023px), (pointer: coarse) {
  span.tag-pill > a {
    display: inline-block;
    padding: 8px 0;
    margin: -8px 0;
  }
  div.tag-row > a.tag-pill.tag-pill--donate {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  section.panel.work > p > a,
  section.panel.youtube > a.yt-cta,
  p.placeholder-note > a {
    display: inline-block;
    padding: 8px 0;
    margin: -8px 0;
  }
  button.msn-nudge { min-height: 36px; }
  div.pet-actions > button { min-height: 36px; }
  div.walkman-top > button.walkman-btn.walkman-close {
    min-width: 32px;
    min-height: 32px;
  }
}

/* ---- 3) gallery scroll hint ---- */
/* soft fade on the side(s) that still have photos hidden */
.polaroid-grid.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.polaroid-grid.more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
}
.polaroid-grid.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.polaroid-hint {
  margin: 2px 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--magenta);
  animation: polaroidHintNudge 1.8s ease-in-out infinite;
}
.polaroid-hint[hidden] { display: none; }
@keyframes polaroidHintNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid-hint { animation: none; }
}


/* ==================================================================
   LAYOUT + TEXT TWEAKS  (added 2026-10-15)
   1) The alley wall now sits in the main grid, right above the gallery,
      and spans every column (it used to be a 900px box in the footer).
   2) The bio ("Sobre mi") is written in the diary handwriting (Caveat,
      self-hosted, so it looks the same on every device). Its line-height
      is 34px on purpose: the same spacing as the ruled lines painted
      behind the diary page, so each text line sits on a line.
   3) The credits line at the very bottom of the footer (hearts).
   ================================================================== */

.content-column > .panel.guestbook {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
}

.panel.about .bio-text > p {
  max-width: none;
  margin: 0 0 34px;
  font-family: var(--f-diary);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: .01em;
  color: #f6edf8;
}
.panel.about .bio-text > p:last-child {
  margin-bottom: 0;
}

footer > p.credits {
  max-width: 44ch;
  margin: 34px auto 0;
  font-family: var(--f-diary);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--bubblegum);
  text-shadow: 0 0 12px rgba(255, 158, 216, 0.35);
}
footer > p.credits .heart {
  display: inline-block;
  margin: 0 .2em;
  color: var(--magenta);
}


/* ---- "Sobre mi" as a full-width diary page (2026-10-15, longer bio) ----
   The bio is long now, so the About panel takes the whole row instead of
   one narrow column (which made the whole first row very tall).
   >=1024px (3 columns): the bio runs in 2 text columns.
   Panel order keeps every row full:
     3 columns: About (all) | Trabajemos, Mis redes, Donaciones | Mis videos (2) + Huesito (1)
     2 columns: About (all) | pairs | Huesito (all)
     1 column : everything stacked */
.panel.about {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .panel.about .bio-text {
    columns: 2;
    column-gap: 48px;
  }
  .panel.about .bio-text > p {
    break-inside: avoid;
  }
  .content-column > .panel.youtube {
    grid-column: span 2;
  }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .content-column > .panel.pet {
    grid-column: 1 / -1;
  }
}

/* phones: slightly smaller bio handwriting (the line spacing stays 34px to follow the ruled lines) */
@media (max-width: 480px) {
  .panel.about .bio-text > p {
    font-size: 22px;
  }
}


/* ==================================================================
   BIRTHDAY + MADRUGADA EXPANSION  (2026-10-15)
   Visuals for the two easter eggs; the logic and the texts are in
   script.js ("BIRTHDAY + MADRUGADA EXPANSION"). Everything here only
   exists on the day / at night (it is created by JS), so it never
   touches the normal look. Reduced motion: no balloons, no rising
   animations, no shooting stars (the JS skips them).
   ================================================================== */

/* ---- birthday: confetti burst from a point (balloons, gift) ---- */
.confetti-pop {
  position: fixed;
  z-index: 9994;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  pointer-events: none;
  animation: confettiPop .95s ease-out forwards;
}
@keyframes confettiPop {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to   { transform: translate(var(--dx, 0px), var(--dy, -80px)) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* ---- birthday: bunting across the top (also the days before) ---- */
.bday-bunting {
  position: relative;
  z-index: 6;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='44'%20viewBox='0%200%20160%2044'%3E%3Cline%20x1='0'%20y1='3'%20x2='160'%20y2='3'%20stroke='rgba(242,240,234,0.6)'%20stroke-width='1.2'/%3E%3Cpath%20fill='%23ff2f92'%20d='M4%204%20H36%20L20%2038%20Z'/%3E%3Cpath%20fill='%23b968ff'%20d='M44%204%20H76%20L60%2038%20Z'/%3E%3Cpath%20fill='%232fe0d0'%20d='M84%204%20H116%20L100%2038%20Z'/%3E%3Cpath%20fill='%23ff9ed8'%20d='M124%204%20H156%20L140%2038%20Z'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 44px;
  pointer-events: none;
  transform-origin: top center;
  animation: papelSway 6s ease-in-out infinite;
}

/* ---- birthday: balloons that float up; click one to pop it ---- */
.bday-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
.bday-balloon {
  position: absolute;
  bottom: -110px;
  width: 44px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.55), rgba(255,255,255,0) 38%), var(--b, #ff2f92);
  box-shadow: inset -6px -8px 14px rgba(0,0,0,0.22), 0 0 16px rgba(255,255,255,0.1);
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  animation: balloonRise linear infinite;
}
.bday-balloon::after { /* the string */
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 46px;
  background: rgba(242,240,234,0.5);
  transform: translateX(-50%);
}
@keyframes balloonRise {
  0%   { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
  8%   { opacity: .92; }
  50%  { transform: translate(var(--sway, 20px), -58vh) rotate(4deg); }
  100% { transform: translate(0, -128vh) rotate(-3deg); opacity: .85; }
}

/* ---- birthday: the gift box in the corner ---- */
.bday-gift {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255,158,216,0.45);
  border-radius: 14px;
  background: rgba(11,10,18,0.78);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(255,47,146,0.45));
  animation: giftBob 2.6s ease-in-out infinite;
}
.bday-gift.opened {
  animation: giftOpen .6s ease-out;
}
.bday-gift:focus-visible {
  outline: 2px solid #ff9ed8;
  outline-offset: 4px;
}
@keyframes giftBob {
  50% { transform: translateY(-5px) rotate(-3deg); }
}
@keyframes giftOpen {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1); }
}

/* ---- birthday: the motto gets a cake ---- */
html.fecha-cumple footer .motto {
  text-shadow: 0 0 3px #fff, 0 0 22px rgba(255,158,216,0.7), 0 0 52px rgba(185,104,255,0.45);
}
html.fecha-cumple footer .motto::after {
  content: ' 🎂';
}
html.fecha-cumple .whisper {
  color: #ffd3ec;
}

/* ---- madrugada: little noises at the bottom of the screen ---- */
.night-noise {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 9990;
  max-width: min(88vw, 440px);
  padding: 8px 18px;
  transform: translateX(-50%);
  background: rgba(5,6,20,0.88);
  border: 1px solid rgba(185,199,255,0.4);
  border-radius: 999px;
  color: #b9c7ff;
  font-family: var(--f-diary);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.night-noise.show {
  opacity: 1;
}

/* ---- madrugada: shooting stars ---- */
.shooting-star {
  position: fixed;
  top: var(--y, 12%);
  left: var(--x, 20%);
  z-index: 1;
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
  box-shadow: 0 0 8px rgba(185,199,255,0.9);
  pointer-events: none;
  opacity: 0;
  transform: rotate(28deg);
  animation: shootingStar 1.3s ease-out forwards;
}
@keyframes shootingStar {
  0%   { opacity: 0; transform: translate(0, 0) rotate(28deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(360px, 190px) rotate(28deg); }
}

/* ---- madrugada: the motto under the moon, and the 3:33 glitch ---- */
html.madrugada footer .motto {
  text-shadow: 0 0 3px #fff, 0 0 20px rgba(185,199,255,0.55), 0 0 48px rgba(90,110,255,0.35);
}
html.madrugada footer .motto::after {
  content: ' ☾';
  color: #b9c7ff;
}
html.glitch-333 .neon-main,
html.glitch-333 footer .motto,
html.glitch-333 h1.signature {
  animation: glitch333 .16s steps(2) 40;
}
@keyframes glitch333 {
  0%   { transform: translate(0, 0); text-shadow: 2px 0 #2fe0d0, -2px 0 #ff2f92; }
  50%  { transform: translate(-2px, 1px); text-shadow: -3px 0 #2fe0d0, 3px 0 #ff2f92; }
  100% { transform: translate(2px, -1px); text-shadow: 2px 0 #2fe0d0, -2px 0 #ff2f92; }
}

@media (max-width: 699px) {
  .bday-gift { width: 48px; height: 48px; font-size: 26px; bottom: 12px; right: 12px; }
  .night-noise { bottom: 14px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .bday-bunting, .bday-gift, .bday-balloon { animation: none; }
  .confetti-pop, .shooting-star { display: none; }
  html.glitch-333 .neon-main, html.glitch-333 footer .motto, html.glitch-333 h1.signature { animation: none; }
}


/* ========================================================= */
/* BACKGROUND PLAYLIST + VOL PANEL  (2026-10-15)               */
/* ========================================================= */
/* The logic is in script.js ("SONIDO DE FONDO"). Three pieces:
   1. .volToggle + .volPanel  - "VOL" button next to the index tab; the panel has the
      background-sound switch and the "efectos" slider (adapted from the portal's VOL panel).
   2. .sound-prompt           - the flashy button that asks for the first click (browsers
      only allow sound after one). It disappears for good once clicked.
   3. the existing ♪ button (.sfx-toggle) mirrors the same on/off state. */

.volToggle {
  position: fixed;
  top: 18px;
  left: 128px;
  z-index: 10;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 9px 12px;
  cursor: pointer;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.volToggle:hover,
.volToggle[aria-expanded="true"] {
  color: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 14px rgba(255,47,146,0.4);
}
.volPanel {
  position: fixed;
  top: 62px;
  left: 18px;
  z-index: 11;
  width: 250px;
  max-width: calc(100vw - 36px);
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(11,10,18,.94);
  border: 1px solid rgba(255,47,146,.4);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.volPanel.open { display: flex; }
.volPanel .volRow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
}
.volPanel input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: var(--magenta);
  cursor: pointer;
}
.volPanel .volVal { text-align: right; font-size: 10px; color: var(--text-muted); }
/* the on/off switch of the first row */
.volPanel .volSwitch { grid-template-columns: 96px 44px; position: relative; }
.volPanel .volSwitch input { position: absolute; opacity: 0; width: 44px; height: 24px; right: 0; margin: 0; cursor: pointer; }
.volPanel .volSlider {
  position: relative;
  display: block;
  width: 44px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--panel-border);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.volPanel .volSlider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .25s, background .25s;
}
.volPanel .volSwitch input:checked + .volSlider {
  background: rgba(255,47,146,.25);
  border-color: var(--magenta);
  box-shadow: 0 0 10px rgba(255,47,146,.45);
}
.volPanel .volSwitch input:checked + .volSlider::after { transform: translateX(22px); background: var(--magenta); }
.volPanel .volSwitch input:focus-visible + .volSlider { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* "tocá para activar el sonido" */
.sound-prompt {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content; /* without this, left:50% would shrink the button to half the screen */
  max-width: calc(100vw - 28px);
  padding: 12px 22px 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255,47,146,.9), rgba(139,92,246,.9));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,47,146,.7), 0 0 44px rgba(139,92,246,.45);
  animation: soundPromptPulse 1.8s ease-in-out infinite;
  transition: opacity .5s, transform .5s;
}
.sound-prompt:hover { filter: brightness(1.12); }
.sound-prompt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.sound-prompt .sfx-icon i { animation: eq .8s ease-in-out infinite; }
.sound-prompt .sfx-icon i:nth-child(2) { animation-delay: .2s; }
.sound-prompt .sfx-icon i:nth-child(3) { animation-delay: .4s; }
.sound-prompt-star { display: inline-block; animation: soundPromptStar 2.4s linear infinite; }
.sound-prompt.gone { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); pointer-events: none; animation: none; }
@keyframes soundPromptPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,47,146,.55), 0 0 34px rgba(139,92,246,.3); }
  50%      { box-shadow: 0 0 26px rgba(255,47,146,.95), 0 0 60px rgba(139,92,246,.6); }
}
@keyframes soundPromptStar { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .sound-prompt { font-size: 11px; padding: 10px 16px 10px 14px; gap: 9px; bottom: 14px; }
  .volToggle { left: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-prompt, .sound-prompt-star, .sound-prompt .sfx-icon i { animation: none; }
  .sound-prompt .sfx-icon i { height: 10px; }
}


/* ========================================================= */
/* OFRENDAS: the visitors' corkboard  (2026-10-15)             */
/* ========================================================= */
/* Logic in script.js ("OFRENDAS: the corkboard"), backend in ofrendas.php.
   The panel keeps its cork look (section "OFRENDAS: corkboard" above);
   everything here goes on top of it: the intro, the object picker, the one-line
   form, the board with the visitors' pins and Eva's own pinned trinkets below. */
.offerings-intro {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.offering-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 12px 10px;
  margin: 6px 0 14px;
}
.offering-choice,
.offering-pin {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #f3e6cc;
  background: rgba(242,240,234,0.08);
  border: 1px dashed rgba(242,240,234,0.35);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
.offering-choice::before,
.offering-pin::before { /* the pushpin */
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9ed8, #c2185b 70%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.offering-choice:hover,
.offering-choice:focus-visible {
  transform: scale(1.12) rotate(-4deg);
  border-color: var(--candle);
  outline: none;
}
.offering-choice.selected {
  transform: scale(1.14);
  border: 1px solid var(--magenta);
  background: rgba(255,47,146,0.18);
  box-shadow: 0 0 14px rgba(255,47,146,0.55);
}
.offering-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offering-form .offering-line { margin-bottom: 0; }
.offering-form .offering-submit { align-self: flex-start; margin-top: 0; }
.offering-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
}
.offering-status--ok { color: var(--cyan); }
.offering-status--error { color: var(--bubblegum); }
.offerings-board {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
  justify-content: center;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 18px;
  padding: 14px 6px 8px;
  border-top: 1px dashed rgba(242,240,234,0.25);
}
.offerings-board:empty { display: none; }
.offering-pin {
  transform: rotate(var(--r, 0deg));
  cursor: default;
}
.offering-pin:hover,
.offering-pin:focus-visible {
  transform: rotate(0deg) scale(1.14);
  border-color: var(--candle);
  outline: none;
  cursor: pointer;
}
.offering-pin--fresh { animation: offeringPinDrop .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes offeringPinDrop {
  from { opacity: 0; transform: translateY(-26px) rotate(18deg) scale(1.3); }
  to   { opacity: 1; }
}
.offerings-count {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.offerings-sub {
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f3c58f;
  opacity: .8;
}
@media (prefers-reduced-motion: reduce) {
  .offering-pin--fresh { animation: none; }
  .offering-choice, .offering-pin { transition: none; }
}


/* ========================================================= */
/* DOORS TO THE HIDDEN TERMINAL  (2026-10-15)                  */
/* ========================================================= */
/* Logic in script.js ("THE WAY TO THE HIDDEN TERMINAL"). */
.tv-knob { cursor: pointer; transition: transform .25s ease; }
.tv-zap { /* a flash of static over the TV screen when a knob turns */
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,0.9) 0 .5px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, rgba(170,170,170,0.8) 0 .5px, transparent 1px 4px),
    #2a2a2e;
  animation: tvNoise .1s steps(3) infinite;
}
.terminal-door-wrap { margin: 4px 0 0; text-align: center; line-height: 1; }
.terminal-door {
  font-family: var(--mono);
  text-decoration: none;
}
.terminal-door--foot {
  display: inline-block;
  padding: 12px 22px;
  font-size: 13px;
  color: rgba(157,147,176,0.32);
  animation: terminalBlink 1.3s steps(1) infinite;
}
.terminal-door--foot:hover,
.terminal-door--foot:focus-visible {
  color: var(--cyan);
  animation: none;
  outline: none;
  text-shadow: 0 0 8px rgba(47,224,208,0.6);
}
.terminal-door--foot:hover::before,
.terminal-door--foot:focus-visible::before { content: 'C:\\> '; }
.terminal-door--333 {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9998;
  padding: 8px 14px;
  font-size: 15px;
  color: #7dff9e;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(125,255,158,0.6);
  text-shadow: 0 0 8px rgba(125,255,158,0.7);
  box-shadow: 0 0 16px rgba(125,255,158,0.35);
  animation: terminalBlink .9s steps(1) infinite;
  transition: opacity 1.4s ease;
}
.terminal-door--333:hover { animation: none; background: #7dff9e; color: #000; text-shadow: none; }
.terminal-door--333.fade { opacity: 0; pointer-events: none; }
@keyframes terminalBlink { 50% { opacity: 0.25; } }
body.crt-leaving::after { /* the screen collapses into a line before the terminal opens */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #000;
  animation: terminalLeave .75s ease-in forwards;
}
@keyframes terminalLeave {
  0% { opacity: 0; clip-path: inset(0 0 0 0); }
  55% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; clip-path: inset(49.6% 0 49.6% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .terminal-door--foot, .terminal-door--333 { animation: none; }
  body.crt-leaving::after { animation: none; opacity: 1; }
}


/* ========================================================= */
/* HUESITO'S ID CARD  (2026-10-15)                             */
/* ========================================================= */
/* Logic in script.js ("HUESITO'S ID CARD"). It sits under the device and
   takes the space that was left empty beside the tall "Mis videos" panel. */
.pet-card {
  margin: 18px 6px 4px;
  padding: 12px 14px 14px;
  border: 1px dashed rgba(255,122,184,0.45);
  border-radius: 10px;
  background: rgba(255,122,184,0.06);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.pet-card:empty { display: none; }
.pet-card-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff9ed8;
}
.pet-card-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  margin: 0;
}
.pet-card-facts dt { color: var(--text-muted); }
.pet-card-facts dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.pet-card-label {
  margin: 12px 0 2px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pet-card-thought {
  margin: 0;
  font-family: var(--script, var(--mono));
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: #ffb3c9;
}

/* final responsive pass (2026-10-15): bigger hit area for the TV knobs (the easter egg), invisible */
.tv-knob { position: relative; }
.tv-knob::after { content: ''; position: absolute; inset: -9px; }

/* final responsive pass: the sound button floats above the night noises and the 3:33 door (all three live at the bottom) */
.sound-prompt { bottom: 76px; } /* all widths: the night noises use the bottom edge */
.volPanel { z-index: 22; }


/* ========================================================= */
/* "BORRAR MI PROGRESO" (footer, under the secrets tracker)    */
/* ========================================================= */
/* Logic in script.js ("RESET MY PROGRESS"). A tiny, quiet text button; after a click it asks once. */
.secrets-reset-wrap {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.secrets-reset-wrap [hidden] { display: none; }
.secrets-reset {
  padding: 8px 10px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(157,147,176,0.5);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.secrets-reset:hover,
.secrets-reset:focus-visible {
  color: var(--bubblegum);
  border-bottom-color: var(--bubblegum);
  outline: none;
}
.secrets-reset--yes { color: #ffb3c9; border-bottom-style: solid; }
.secrets-reset-ask { display: inline-block; max-width: 100%; line-height: 1.9; }


/* ==================================================================
   TABLON DEL CALLEJON — the bulletin board (2026-10-20)
   The small wooden board in the alley (#boardOpen, next to the
   "PROHIBIDO FIJAR CARTELES" sign) and the big board that opens over the
   whole screen (#boardView: 3 columns, 2 on phones, 1 on tiny screens).
   Script: "TABLON DEL CALLEJON" in script.js. Backend: tablon.php.
   ================================================================== */

/* ---- the small board ---- */
.wall-decor .board {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 176px;
  margin-top: 2px;
  padding: 8px 8px 6px;
  color: #e9e1cf;
  background: repeating-linear-gradient(90deg, #6a4627 0 7px, #5b3b20 7px 13px, #704c2b 13px 19px);
  border: 3px solid #2c1a0d;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.06);
  transform: rotate(-1.5deg);
  transition: transform .2s ease;
  cursor: pointer;
}
.wall-decor .board:hover,
.wall-decor .board:focus-visible {
  transform: rotate(0deg) scale(1.03);
  outline: none;
}
.wall-decor .board:focus-visible { box-shadow: 0 0 0 2px var(--magenta), 0 8px 18px rgba(0,0,0,0.6); }
.board-plate {
  padding: 1px 12px;
  font-family: var(--marker);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2a1a08;
  background: linear-gradient(#d9b66a, #a98238);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.board-cork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 7px;
  align-content: center;
  width: 100%;
  min-height: 108px;
  padding: 9px 8px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.13) 0 2px, transparent 3px),
    #a97b4f;
  background-size: 14px 14px, 11px 11px, auto;
  border: 2px solid #3b2412;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.45);
}
.board-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 3px;
  background: #ece4d2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transform: rotate(var(--tilt, 0deg));
}
.board-thumb::before,
.board-card::before { /* the pin */
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border-radius: 50%;
  background: #c0182f;
  box-shadow: 0 1px 1px rgba(0,0,0,0.6);
  z-index: 1;
}
.board-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board-thumb.gone { visibility: hidden; }
.board-blank {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  font-family: var(--marker);
  font-size: 16px;
  color: #3b2412;
  opacity: .7;
}
.board-note {
  font-family: var(--body);
  font-style: italic;
  font-size: 10.5px;
  color: #d9c9a6;
  opacity: .85;
}
.board-eyes { /* the pair of eyes that appears when the mouse is over the board */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: rgba(8,5,3,0.55);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.wall-decor .board:hover .board-eyes,
.wall-decor .board:focus-visible .board-eyes { opacity: 1; }

/* ---- the big board ---- */
body.board-open { overflow: hidden; }
.board-view {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 28px);
  background: rgba(5,4,8,0.94);
}
.board-view[hidden], .board-zoom[hidden] { display: none; }
.board-sheet {
  position: relative;
  width: min(1100px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(16px, 3vw, 34px);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 66px),
    repeating-linear-gradient(90deg, #5e3d22 0 9px, #53361d 9px 17px, #664426 17px 26px);
  border: 12px solid #2f1b0e;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), inset 0 0 40px rgba(0,0,0,0.5);
  animation: boardIn .28s ease-out;
}
@keyframes boardIn {
  from { opacity: 0; transform: translateY(14px) scale(.93); }
  to   { opacity: 1; transform: none; }
}
.board-view-title {
  margin: 0 46px 6px 0;
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(22px, 4vw, 34px);
  color: #f1dcb4;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
.board-view-intro {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: #d9c9a6;
}
.board-form {
  position: relative;
  max-width: 560px;
  margin: 0 0 28px;
  padding: 18px 16px 14px;
  color: #1a1614;
  background: #ece4d2;
  box-shadow: 0 8px 18px rgba(0,0,0,0.55);
  transform: rotate(-.6deg);
}
.board-form::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #c0182f;
  box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
.board-form-title {
  margin: 0 0 8px;
  font-family: var(--marker);
  font-size: 19px;
  color: #8a0f47;
}
.board-label {
  display: block;
  margin: 8px 0 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: #3a3128;
}
.board-file,
.board-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: #1a1614;
  background: #fffaf0;
  border: 1px solid #8b7a5c;
  border-radius: 2px;
}
.board-hp { /* honeypot: invisible to people, bots fill it in */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.board-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.board-count {
  font-family: var(--mono);
  font-size: 11px;
  color: #5b5040;
}
.board-status {
  min-height: 1.3em;
  margin: 10px 0 0;
  font-family: var(--marker);
  font-size: 15px;
  line-height: 1.3;
  color: #5a1a3a;
}
.board-status.ok { color: #14532d; }
.board-status.err { color: #9b1c1c; }
.board-empty {
  margin: 30px 0;
  text-align: center;
  font-family: var(--marker);
  font-size: 20px;
  color: #f1dcb4;
}
.board-empty[hidden] { display: none; }
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  padding: 8px 4px 4px;
}
@media (max-width: 699px) { .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }
@media (max-width: 359px) { .board-grid { grid-template-columns: minmax(0, 1fr); } }
.board-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 12px;
  color: #1a1614;
  text-align: left;
  background: #ece4d2;
  border: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.55);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s ease;
  cursor: zoom-in;
}
.board-card::before { top: -7px; width: 13px; height: 13px; margin-left: -6px; box-shadow: 0 2px 2px rgba(0,0,0,0.6); }
.board-card:hover,
.board-card:focus-visible {
  transform: rotate(0deg) scale(1.03);
  z-index: 2;
  outline: none;
}
.board-card:focus-visible { box-shadow: 0 0 0 2px var(--magenta), 0 8px 16px rgba(0,0,0,0.55); }
.board-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #cfc6b2;
}
.board-card-text {
  font-family: var(--marker);
  font-size: 15px;
  line-height: 1.25;
  color: #2a2522;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.board-card.gone { display: none; }
.board-more { display: block; margin: 26px auto 6px; }
.board-more[hidden] { display: none; }
.board-zoom {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: rgba(5,4,8,0.96);
}
.board-zoom-img { background: #1a1614; }
@media (prefers-reduced-motion: reduce) {
  .board-sheet { animation: none; }
  .wall-decor .board, .board-card, .board-eyes { transition: none; }
}

/* the send button sits on a paper note (light) and under the grid (wood): give it its own readable colours */
.board-form .load-more-btn,
.board-more {
  font-family: var(--marker);
  font-size: 15px;
  color: #3b0a24;
  background: #f4d3e3;
  border: 1px solid #8a0f47;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(138,15,71,0.5);
}
.board-form .load-more-btn:hover,
.board-form .load-more-btn:focus-visible,
.board-more:hover,
.board-more:focus-visible { background: #fbe5ef; outline: none; }
.board-form .load-more-btn:disabled { opacity: .6; cursor: wait; }

/* 2026-10-20: WhatsApp links hidden until usernames exist (script.js, WHATSAPP_VISIBLE). .icon-badge / .tag-pill set their own display, so make hidden win. */
[data-whatsapp][hidden] { display: none !important; }


/* ==================================================================
   TABLON — extras (2026-10-20): the red "¡nuevo!" stamp, a new paper dropping onto the board, the rat that tears
   one off, the night ghost paper and the "nuevo" stamp on cards. All motion is off with prefers-reduced-motion.
   ================================================================== */
.board-new {
  position: absolute;
  top: -12px;
  right: -14px;
  z-index: 3;
  padding: 2px 9px;
  font-family: var(--marker);
  font-size: 13px;
  color: #fff;
  background: #c0182f;
  border-radius: 3px;
  transform: rotate(8deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  animation: boardNewPulse 1.6s ease-in-out infinite;
}
.board-new[hidden] { display: none; }
@keyframes boardNewPulse { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
.board-thumb.drop { animation: thumbDrop .75s cubic-bezier(.3,1.5,.5,1) both; }
.board-thumb.pinned-back { animation: thumbDrop .6s ease-out both; }
@keyframes thumbDrop {
  from { opacity: 0; transform: translateY(-46px) rotate(var(--tilt, 0deg)) scale(1.3); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
.board-thumb.torn-off { animation: thumbTear 2.2s ease-in forwards; }
@keyframes thumbTear {
  0%   { transform: rotate(var(--tilt, 0deg)); }
  15%  { transform: rotate(calc(var(--tilt, 0deg) + 6deg)) translateY(-2px); }
  30%  { transform: rotate(calc(var(--tilt, 0deg) - 8deg)) translateY(-3px); }
  100% { transform: translateY(76px) rotate(35deg); opacity: 0; }
}
.board-rat {
  position: absolute;
  left: 14px;
  bottom: -26px;
  z-index: 4;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--cyan);
  white-space: pre;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  animation: ratPeek 2.4s ease-in-out both;
}
@keyframes ratPeek {
  0%   { opacity: 0; transform: translateX(-30px); }
  20%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(50px); }
}
.board-thumb.board-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(226,236,250,0.9);
  animation: ghostFlick 3.4s infinite;
}
@keyframes ghostFlick { 0%, 100% { opacity: .9; } 42% { opacity: .35; } 46% { opacity: .95; } 70% { opacity: .5; } }
.board-ghost-card { cursor: default; background: #dfe9f2; animation: ghostFlick 4.5s infinite; }
.board-ghost-card:hover { transform: rotate(var(--tilt, 0deg)); }
.board-ghost-face {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  font-size: 64px;
  background: linear-gradient(160deg, #c7d6e6, #8fa4bd);
}
.board-card-new {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  padding: 1px 8px;
  font-family: var(--marker);
  font-size: 12px;
  color: #fff;
  background: #c0182f;
  border-radius: 3px;
  transform: rotate(7deg);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
@media (prefers-reduced-motion: reduce) {
  .board-new, .board-thumb.drop, .board-thumb.pinned-back, .board-thumb.torn-off, .board-rat, .board-thumb.board-ghost, .board-ghost-card { animation: none; }
}

/* ---------- LO ULTIMO DEL BLOG (2026-10-20): a full-width strip of 3 cards ---------- */
.panel.latest-blog { grid-column: 1 / -1; }
.panel.latest-blog[hidden] { display: none; }
.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0 14px;
}
@media (max-width: 899px) { .blog-cards { grid-template-columns: minmax(0, 1fr); } }
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  transition: transform .18s ease, border-color .18s ease;
}
.blog-card:hover,
.blog-card:focus-visible { transform: translateY(-3px); border-color: var(--magenta); outline: none; }
.blog-card-date { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--cyan); }
.blog-card-title { font-family: var(--marker); font-size: 19px; line-height: 1.2; color: #f4d3e3; overflow-wrap: anywhere; }
.blog-card-excerpt { font-family: var(--body); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .blog-card { transition: none; } }

/* ---- Huesito's card: clearer rows (2026-10-25) ----
   The facts (nacio / edad / ...) and "pensamiento de hoy" looked like text floating, label and value far apart with nothing between the lines.
   Now every row has a faint dashed line under it and more breathing room; the thought is set apart by its own line above. */
.pet-card { line-height: 1.6; }
.pet-card-facts { gap: 0 14px; }
.pet-card-facts dt,
.pet-card-facts dd { padding: 7px 0; border-bottom: 1px dashed rgba(255,122,184,0.28); }
.pet-card-facts dt:nth-last-of-type(1),
.pet-card-facts dd:nth-last-of-type(1) { border-bottom: 0; }
.pet-card-facts dt { color: #e7a3c8; }
.pet-card-label { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid rgba(255,122,184,0.4); text-align: center; }
.pet-card-thought { padding: 4px 4px 2px; text-align: center; line-height: 1.5; }

/* ---- SHAKE THE PHONE (2026-10-25) — see "SHAKE THE PHONE" in script.js ---- */
main.shake-jiggle { animation: shakeJiggle .6s ease-in-out; }
@keyframes shakeJiggle {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-6px, 3px); }
  26% { transform: translate(6px, -3px); }
  40% { transform: translate(-5px, -2px); }
  54% { transform: translate(5px, 3px); }
  68% { transform: translate(-3px, 1px); }
  82% { transform: translate(3px, -1px); }
}
.shake-drop {
  position: fixed;
  top: -40px;
  z-index: 2147483000;
  pointer-events: none;
  animation: shakeFall 2.4s linear forwards;
}
@keyframes shakeFall {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(112vh) rotate(360deg); opacity: .9; }
}
.shake-toast {
  position: fixed;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483001;
  max-width: min(88vw, 420px);
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(255,122,184,.6);
  border-radius: 10px;
  background: rgba(14,10,18,.94);
  box-shadow: 0 0 16px rgba(255,122,184,.3);
  color: #ffd1e6;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  animation: shakeToast 4.2s ease forwards;
}
@keyframes shakeToast {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  8%, 88% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
  main.shake-jiggle { animation: none; }
  .shake-toast { animation: none; }
}

/* ---- TV box no longer stretched (2026-10-25) ----
   The grid stretches every box of a row to the height of the tallest one (that is on purpose: see "CSS Grid en cambio arma FILAS" above).
   Next to Huesito's box (which is tall) it left the TV box with a big empty hole under "ver el canal completo". On screens with 2+ columns
   where the TV box sits beside Huesito (>= 1024 px) the TV box now ends where its own content ends. The TV and the list keep their size.
   Phones and tablets are not touched (there the TV box is not next to Huesito and there was no hole). To undo: delete this block. */
@media (min-width: 1024px) {
  .content-column > .panel.youtube { align-self: start; }
}

/* ---- video list: long titles must not widen the box (2026-10-25) ----
   The list is a grid whose single column used to size itself to the longest title (they never wrap: nowrap + ellipsis), so on tablets
   a long title like "Domingo por la madrugada..." pushed the rows 100 px out of the box and made the page scroll sideways.
   It only showed up now that 7 rows are listed instead of 3. minmax(0, 1fr) = the column is never wider than the box. */
.yt-list { grid-template-columns: minmax(0, 1fr); }
.yt-item-text { flex: 1 1 auto; }

/* ---- "SUBIR" button (2026-10-26) — see "SUBIR BUTTON" in script.js ---- */
.to-top {
  position: fixed;
  right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 9980;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px 9px 13px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(135deg, #ff6fb5, #c04bff);
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,111,181,0.55), 0 4px 0 #7a1e66;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { filter: brightness(1.12); outline: none; }
.to-top:active { transform: translateY(2px); box-shadow: 0 0 10px rgba(255,111,181,0.5), 0 2px 0 #7a1e66; }
.to-top-heart { font-size: 14px; animation: toTopBeat 1.6s ease-in-out infinite; }
.to-top-arrow { font-size: 15px; font-weight: bold; }
@keyframes toTopBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .to-top-heart { animation: none; }
}

/* ---- walkman: shuffle + repeat buttons (2026-10-26) ---- */
.walkman-controls { gap: 6px; }
.walkman-btn { padding: 5px 9px; }
.walkman-shuffle:not(.on), .walkman-repeat:not(.on) { opacity: .55; }
.walkman-btn.on { color: #ffb3c9; border-color: rgba(255,179,201,0.8); box-shadow: 0 0 6px rgba(255,179,201,0.3); }
.walkman-repeat { position: relative; }
.walkman-repeat.one::after { content: "1"; position: absolute; right: 2px; bottom: 0; font-size: 8px; line-height: 1; color: #fff; }

/* ---- video list: 9 rows on desktop, 7 on tablets and phones (2026-10-26) ----
   script.js lists up to 9; with the TV box next to Huesito's (>= 1024 px) the 2 extra rows fill the space under the list.
   Below 1024 px the box is not next to Huesito, so the last 2 rows are hidden to keep the page the same length as before. */
@media (max-width: 1023px) {
  .yt-list > li:nth-child(n + 8) { display: none; }
}

/* ---- TV + Huesito on medium-width PCs (1024 to 1365 px) (2026-10-26) ----
   In that range the 3-column grid left Huesito in a narrow column (his card broke words and became 2000 px tall) and a big hole under
   the TV box. Now: the TV box takes the whole row with the TV on the left and the list on the right (6 rows), and Huesito's box takes the
   whole next row with the egg on the left and his card on the right. Phones, tablets and screens of 1366 px and more are not touched.
   To undo: delete this block. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .content-column > .panel.youtube {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .panel.youtube > .eyebrow,
  .panel.youtube > h2.section-title { grid-column: 1 / -1; }
  .panel.youtube > .tv { grid-column: 1; grid-row: 3; }
  .panel.youtube > .yt-list { grid-column: 2; grid-row: 3; margin-top: 6px; }
  .panel.youtube > .yt-cta { grid-column: 2; grid-row: 4; justify-self: start; }
  .panel.youtube .yt-list > li:nth-child(n + 7) { display: none; }

  .content-column > .panel.pet {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr; /* the extra height of the card goes to the last row, not between the title, the intro and the egg */
    column-gap: 34px;
    align-items: start;
  }
  .panel.pet > .eyebrow,
  .panel.pet > h2.section-title,
  .panel.pet > p.pet-intro,
  .panel.pet > .pet-device,
  .panel.pet > p.pet-today { grid-column: 1; }
  .panel.pet > .pet-card { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: start; }
}

/* ---- walkman: 6 buttons now (stop added, 2026-10-26): a little tighter so they fit the 250 px box ---- */
.walkman-controls { gap: 4px; }
.walkman-btn { padding: 5px 7px; font-size: 12px; }
@media (pointer: coarse) { .walkman-btn { padding: 9px 8px; min-width: 32px; } } /* fingers: a bigger target (6 x 32 + gaps still fits the box) */

/* ---------- COPYRIGHT LINE (2026-10-27) ----------
   Same look as the portal's footer line: "(c) PRODITAE 2008 - 2026". The text is editable from the configurator (tab Textos de la pagina);
   script.js keeps its LAST four-digit year equal to the current year. */
footer > p.copyright {
  margin: 14px auto 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: #555;
  text-align: center;
}

/* ===================================================================
   HORARIO: COUNTDOWN PILL + GHOST MODE  (2026-11-02)
   Markup is created by script.js (section "HORARIO DE LA WEB"). The pill shows how long until the web sleeps; ghost mode adds
   faint ghosts and a cold tint around midnight (visitor's clock). Delete this block and the JS section to remove the feature.
   =================================================================== */
.horario-pill{
  position:fixed; z-index:9985;
  display:flex; align-items:center; gap:8px;
  max-width:min(320px,60vw);
  padding:6px 13px 6px 10px;
  border:1px solid rgba(190,170,255,.35); border-radius:999px;
  background:rgba(12,10,22,.74);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 0 14px rgba(139,92,246,.28);
  color:#e6e0f5; font:11px/1.25 ui-monospace,Consolas,"Courier New",monospace; letter-spacing:.05em;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  top:12px; left:50%; transform:translateX(-50%);
}
.horario-pill:focus-visible{ outline:2px solid #2fe0d0; outline-offset:2px; }
.horario-luna{ font-size:16px; line-height:1; color:#bfe4ff; text-shadow:0 0 8px rgba(160,210,255,.7); }
.horario-cols{ display:flex; flex-direction:column; min-width:0; }
.horario-t{ font-weight:700; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums; }
.horario-s{ font-size:9.5px; color:#a79fc0; white-space:nowrap; letter-spacing:.04em; }
.horario-corto{ display:none; }
.horario-pill--ultimos{ border-color:rgba(255,47,146,.75); box-shadow:0 0 16px rgba(255,47,146,.5); animation:horario-late 1.6s ease-in-out infinite; }
.horario-pill--ultimos .horario-t{ color:#ff9ed8; }
.horario-pill--dormida{ opacity:.72; border-color:rgba(160,160,190,.3); box-shadow:none; }
@keyframes horario-late{ 50%{ box-shadow:0 0 6px rgba(255,47,146,.18); } }
.horario-burbuja{
  position:fixed; z-index:9985;
  max-width:min(270px,72vw); padding:8px 13px; border-radius:12px;
  background:rgba(12,10,22,.9); border:1px solid rgba(190,170,255,.3);
  color:#e6e0f5; font:12px/1.45 ui-monospace,Consolas,"Courier New",monospace;
  opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s ease; pointer-events:none;
  top:62px; left:50%; transform:translate(-50%,-4px);
}
.horario-burbuja.show{ opacity:1; transform:none; }
.horario-fantasmas{ position:fixed; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.horario-fantasmas::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 110%, rgba(120,170,255,.13), transparent 62%), rgba(60,80,150,.06);
}
.horario-fantasma{
  position:absolute; bottom:-90px; left:var(--x); width:var(--s); color:var(--c); opacity:0;
  animation:horario-sube var(--d) linear var(--r) infinite;
}
.horario-fantasma svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 9px currentColor); }
@keyframes horario-sube{
  0%{ transform:translate(0,0) rotate(-4deg); opacity:0; }
  10%{ opacity:.17; }
  50%{ transform:translate(34px,-55vh) rotate(4deg); }
  90%{ opacity:.12; }
  100%{ transform:translate(-26px,-118vh) rotate(-3deg); opacity:0; }
}
@media (max-width:700px){
  .horario-pill{ padding:4px 10px 4px 8px; font-size:10px; max-width:44vw; }
  .horario-luna{ font-size:14px; }
  .horario-largo{ display:none; }
  .horario-corto{ display:inline; }
  .horario-burbuja{ font-size:11px; max-width:70vw; }
}
@media (prefers-reduced-motion:reduce){
  .horario-pill--ultimos{ animation:none; }
  .horario-fantasma{ animation:none; bottom:auto; top:calc(var(--x) * .8); opacity:.1; }
  .horario-burbuja{ transition:none; }
}
.horario-burbuja.show{ transform:translateX(-50%); }
@media (max-width:700px){
  /* phones: the index tab + VOL sit top-left and the sound button top-right, so the pill goes just left of the sound button */
  .horario-pill{ left:auto; right:66px; transform:none; }
  .horario-burbuja{ left:auto; right:12px; transform:translateY(-4px); }
  .horario-burbuja.show{ transform:none; }
}

/* ---------- MORE SPECIAL DATES (FECHAS_EXTRA / FECHAS_ESPECIALES, 2026-11-02) ---------- */
.fecha-layer, .fechaLayer { position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.fecha-simbolo, .fechaSimbolo {
  position:absolute; bottom:-30px; opacity:0;
  color:var(--fecha-color,#ffb37a); text-shadow:0 0 10px var(--fecha-color,#ffb37a);
  animation:fechaRise linear infinite;
}
.fecha-simbolo.cae, .fechaSimbolo.cae { bottom:auto; top:-30px; animation-name:fechaFall; }
@keyframes fechaRise { 0%{opacity:0;transform:translateY(0) rotate(-10deg)} 10%{opacity:.85} 90%{opacity:.45} 100%{opacity:0;transform:translateY(-110vh) rotate(14deg)} }
@keyframes fechaFall { 0%{opacity:0;transform:translateY(0) rotate(-10deg)} 10%{opacity:.85} 90%{opacity:.45} 100%{opacity:0;transform:translateY(110vh) rotate(14deg)} }
@media (prefers-reduced-motion:reduce){ .fecha-layer, .fechaLayer { display:none; } }html.fecha-extra footer .motto { text-shadow:0 0 3px #fff, 0 0 24px var(--fecha-color,#ffb37a), 0 0 54px var(--fecha-color,#ffb37a); }