@import url("https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css");

/* ==========================================================================
   IDENTIDAD EDITORIAL DE MARCA — GERRY VILLARREAL
   Paleta cromática oficial (guía de marca, lámina 04)
   ========================================================================== */
:root {
  /* --- Paleta base --- */
  --obsidiana:     #0F0F12;
  --marfil:        #F3EFE6;
  --grafito:       #2B2B31;
  --bronce:        #8A6B47;
  --vino:          #4A1F28;
  --azul-nocturno: #1A2230;

  /* --- Derivados de sistema --- */
  --bronce-claro:  #BBA17C;
  --bronce-hover:  #9C7A52;
  --bronce-solido: #82633F;  /* relleno de botón: marfil encima da 4.8:1 (AA) */
  --marfil-suave:  #CFC7BB;
  --marca-soft:    #BBA17C;  /* bronce claro blindado: no lo toca la campaña */

  /* --- Tokens de aplicación --- */
  --bg:        var(--obsidiana);
  --surface:   #15151A;
  --surface-2: var(--azul-nocturno);
  --text:      var(--marfil);
  --muted:     #9C9488;
  --accent:       var(--bronce);
  --accent-soft:  var(--bronce-claro);
  --line: rgba(243,239,230,.14);

  /* Triples RGB para transparencias: rgb(var(--accent-rgb) / .3) */
  --accent-rgb:      138 107 71;    /* bronce apagado */
  --accent-soft-rgb: 187 161 124;   /* bronce claro   */
  --structural-rgb:  26 34 48;      /* azul nocturno  */

  /* Alias de compatibilidad: el sistema antiguo apuntaba a morado/cian.
     Ahora resuelven a bronce para no romper reglas heredadas. */
  --purple:       var(--bronce);
  --purple-light: var(--bronce-claro);
  --cyan:         var(--bronce);

  /* --- Tipografía sobria (guía: alto contraste, sin ornamento) --- */
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   SISTEMA DE UNIVERSOS — la campaña viste, la marca permanece
   --------------------------------------------------------------------------
   Cada obra trae su paleta. Estos tokens NO se aplican solos: solo los
   consumen las superficies declaradas en «Superficie de campaña», más abajo.
   El selector es [data-universo] y no body[data-universo] a propósito: así
   cualquier elemento puede declarar un universo. Lo usa el carrusel de libros,
   donde el fondo debe seguir a la portada visible y no a la campaña del sitio.
   El chasis (nav, monograma, footer) nunca los ve, por construcción.
   Contraste verificado sobre obsidiana: --u-soft >= 8:1 para etiquetas,
   --u-accent >= 3:1 para filetes, marfil sobre --u-solid >= 4.9:1.
   ========================================================================== */
body {
  --u-accent:      var(--bronce);
  --u-soft:        var(--bronce-claro);
  --u-solid:       var(--bronce-solido);
  --u-surface:     #15151A;
  --u-accent-rgb:      138 107 71;
  --u-soft-rgb:        187 161 124;
  --u-structural-rgb:  26 34 48;
}

/* El Paciente 85 · thriller psicológico — vino oscuro */
[data-universo="paciente85"] {
  --u-accent: #9C4250; --u-soft: #D69AA0; --u-solid: #6E2C36; --u-surface: #2A1419;
  --u-accent-rgb: 156 66 80; --u-soft-rgb: 214 154 160; --u-structural-rgb: 74 31 40;
}
/* El Oráculo de Vidrio · tech thriller — azul de vidrio */
[data-universo="oraculo"] {
  --u-accent: #3E7E93; --u-soft: #8FC4D6; --u-solid: #31687A; --u-surface: #12242B;
  --u-accent-rgb: 62 126 147; --u-soft-rgb: 143 196 214; --u-structural-rgb: 18 36 43;
}
/* W0nd3rl4nd Protocol · cyberpunk — el neón original */
[data-universo="wonderland"] {
  --u-accent: #28D8C4; --u-soft: #B69CFF; --u-solid: #7C3AED; --u-surface: #171624;
  --u-accent-rgb: 40 216 196; --u-soft-rgb: 182 156 255; --u-structural-rgb: 124 58 237;
}
/* La Casa de los 100 Acres · gótico — musgo y luz de vela */
[data-universo="casa"] {
  --u-accent: #6E7A4E; --u-soft: #B9C48E; --u-solid: #59633E; --u-surface: #1B1F16;
  --u-accent-rgb: 110 122 78; --u-soft-rgb: 185 196 142; --u-structural-rgb: 27 31 22;
}
/* Sueños de Silicio · especulativa — violeta frío */
[data-universo="suenos"] {
  --u-accent: #7A6BC4; --u-soft: #B3A8E8; --u-solid: #61539F; --u-surface: #1A1728;
  --u-accent-rgb: 122 107 196; --u-soft-rgb: 179 168 232; --u-structural-rgb: 26 23 40;
}

/* --------------------------------------------------------------------------
   SUPERFICIE DE CAMPAÑA
   Los únicos lugares donde el universo sustituye al bronce. Todo lo demás
   —nav, footer, botones de sistema, tarjetas de ruta— hereda la marca.
   -------------------------------------------------------------------------- */
.hero,
.launch,
.work-shell,
.campaign-scope {
  --accent:        var(--u-accent);
  --accent-soft:   var(--u-soft);
  --bronce-claro:  var(--u-soft);
  --bronce-solido: var(--u-solid);
  --cyan:          var(--u-accent);
  --purple:        var(--u-solid);
  --purple-light:  var(--u-soft);
  --accent-rgb:      var(--u-accent-rgb);
  --accent-soft-rgb: var(--u-soft-rgb);
  --structural-rgb:  var(--u-structural-rgb);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display:none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.7; }
/* Retícula editorial: hairline marfil casi imperceptible, sin color de neón.
   Guía de marca: "sin texturas agresivas". */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(243,239,230,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(243,239,230,.02) 1px,transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(to bottom,#000,transparent 80%); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.container { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; padding: .75rem 1rem; background: var(--cyan); color: #0F0F12; }
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   CURSOR DE MIRA
   Vive en todo el sitio. En el sistema editorial es un retículo de bronce a
   un pixel, sin halo ni estela luminosa: la guía prohíbe el brillo, no el
   cursor. Dentro de los universos sci-fi recupera su neón y su resplandor.
   Solo en punteros de precisión; en táctil no existe.
   ========================================================================== */
.aim-cursor, .aim-dot { display: none; }

@media (pointer: fine) {
  body, a, button { cursor: none; }

  .aim-cursor {
    display: block; position: fixed; left: 0; top: 0;
    width: 38px; height: 38px; z-index: 1000;
    pointer-events: none; transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease, opacity .2s ease;
  }
  .aim-cursor i {
    position: absolute; width: 10px; height: 10px;
    border-color: rgb(var(--accent-soft-rgb) / .85);
    border-style: solid;
  }
  .aim-cursor i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
  .aim-cursor i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
  .aim-cursor i:nth-child(3){right:0;bottom:0;border-width:0 1px 1px 0}
  .aim-cursor i:nth-child(4){left:0;bottom:0;border-width:0 0 1px 1px}

  /* Marcas de mira: dos filetes finos a los lados */
  .aim-cursor::before, .aim-cursor::after {
    content: ""; position: absolute;
    background: rgb(var(--accent-rgb) / .6);
  }
  .aim-cursor::before { width: 7px; height: 1px; top: 50%; left: -11px; }
  .aim-cursor::after  { width: 1px; height: 7px; left: 50%; top: -11px; }

  .aim-dot {
    display: block; position: fixed; left: 0; top: 0;
    width: 5px; height: 5px; z-index: 1001;
    background: var(--marfil);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* Sobre un elemento interactivo el retículo se abre y se afirma. */
  .aim-cursor.targeting { width: 50px; height: 50px; }
  .aim-cursor.targeting i { border-color: var(--marfil); }

  /* --- El cursor dentro de una obra toma su universo ---------------------
     Solo en las páginas de obra, donde la página entera es ese universo. En
     el inicio la campaña viste el hero y el lanzamiento, no el chasis: ahí
     el cursor se queda en bronce, igual que la navegación.
     El cursor cuelga de <body>, fuera de la superficie de campaña, así que
     lee los tokens del universo (--u-*) y no los de marca.
     Para el rombo se usa el tono claro: el acento puro de algunos universos
     queda demasiado apagado para un puntero de 5 px. */
  body.work-page[data-universo] .aim-cursor i { border-color: rgb(var(--u-soft-rgb) / .9); }
  body.work-page[data-universo] .aim-cursor::before,
  body.work-page[data-universo] .aim-cursor::after { background: rgb(var(--u-accent-rgb) / .75); }
  body.work-page[data-universo] .aim-dot { background: var(--u-soft); }
  body.work-page[data-universo] .aim-cursor.targeting i { border-color: var(--marfil); }

  /* --- Universos sci-fi: además, el neón y su resplandor ----------------- */
  body.work-page[data-universo="wonderland"] .aim-cursor,
  body.work-page[data-universo="suenos"] .aim-cursor {
    filter: drop-shadow(0 0 7px rgb(var(--u-accent-rgb) / .45));
    transition: width .18s, height .18s, filter .18s;
  }
  body.work-page[data-universo="wonderland"] .aim-cursor i,
  body.work-page[data-universo="suenos"] .aim-cursor i {
    border-color: rgb(var(--u-accent-rgb) / .9);
  }
  body.work-page[data-universo="wonderland"] .aim-cursor::before,
  body.work-page[data-universo="wonderland"] .aim-cursor::after,
  body.work-page[data-universo="suenos"] .aim-cursor::before,
  body.work-page[data-universo="suenos"] .aim-cursor::after {
    background: rgb(var(--u-soft-rgb) / .5);
  }
  body.work-page[data-universo="wonderland"] .aim-dot,
  body.work-page[data-universo="suenos"] .aim-dot {
    background: var(--u-accent);
    border: 1px solid #F7F3EC;
    box-shadow: 0 0 9px var(--u-accent);
  }
  body.work-page[data-universo="wonderland"] .aim-cursor.targeting,
  body.work-page[data-universo="suenos"] .aim-cursor.targeting {
    filter: drop-shadow(0 0 10px rgb(var(--u-soft-rgb) / .8));
  }
  body.work-page[data-universo="wonderland"] .aim-cursor.targeting i,
  body.work-page[data-universo="suenos"] .aim-cursor.targeting i {
    border-color: rgb(var(--u-soft-rgb) / 1);
  }

  /* Quien pida menos movimiento no recibe cursor personalizado. */
  @media (prefers-reduced-motion: reduce) {
    body, a, button { cursor: auto; }
    .aim-cursor, .aim-dot { display: none; }
  }
}

.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(15,15,18,.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-inner { min-height: 74px; display: flex; align-items: center; gap: 2rem; }
.brand { margin-right:auto; text-decoration:none; display:flex; align-items:center; gap:.75rem; color:var(--text); }
.brand-emblem { position:relative; width:46px; height:42px; flex:0 0 46px; display:block; background:linear-gradient(var(--cyan),var(--cyan)) left top/10px 1px no-repeat,linear-gradient(var(--cyan),var(--cyan)) left top/1px 10px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) right bottom/10px 1px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) right bottom/1px 10px no-repeat; }
.brand-emblem b,.brand-emblem em { position:absolute; font-family:var(--serif); font-size:2.05rem; line-height:1; font-weight:900; font-style:normal; }
.brand-emblem b { left:7px; top:3px; color:var(--text); }
.brand-emblem em { right:5px; bottom:2px; color:var(--cyan); font-style:italic; mix-blend-mode:screen; }
.brand-emblem i { position:absolute; width:4px; height:4px; left:50%; top:50%; background:var(--cyan); border:1px solid #F7F3EC; transform:translate(-50%,-50%) rotate(45deg); }
.brand-wordmark { display:flex; flex-direction:column; line-height:1; }
.brand-wordmark strong { font-family:var(--serif); font-size:.86rem; letter-spacing:.055em; white-space:nowrap; }
.brand-wordmark small { margin-top:.32rem; color:var(--muted); font-size:.48rem; text-transform:uppercase; letter-spacing:.16em; white-space:nowrap; }
.brand:hover .brand-emblem { }
.nav-links { list-style: none; display: flex; align-items: center; gap: 1.55rem; margin: 0; padding: 0; }
.nav-links a { color: var(--muted); text-decoration: none; text-transform: uppercase; font-size: .68rem; letter-spacing: .13em; font-weight: 700; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"] { position:relative; }
.nav-links a[aria-current="page"]::before { content:""; position:absolute; left:50%; top:-13px; width:5px; height:5px; background:var(--cyan); border:1px solid #F7F3EC; transform:translateX(-50%) rotate(45deg); }
.nav-links a[aria-current="page"]::after { content:""; position:absolute; inset:-9px -12px; pointer-events:none; background:linear-gradient(var(--purple-light),var(--purple-light)) left top/8px 1px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) left top/1px 8px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) right top/8px 1px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) right top/1px 8px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) left bottom/8px 1px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) left bottom/1px 8px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) right bottom/8px 1px no-repeat,linear-gradient(var(--purple-light),var(--purple-light)) right bottom/1px 8px no-repeat; opacity:.78; }
.nav-cta { padding: .65rem .95rem; border: 1px solid rgb(var(--accent-rgb) / .45); color: var(--cyan) !important; }
.nav-toggle { display: none; background: none; color: var(--text); border: 1px solid var(--line); padding: .55rem .7rem; }
.mobile-home-link { display:none; }

.hero { min-height: 72vh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 7rem 0 6rem; }
.hero::after { content: ""; position: absolute; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle,rgb(var(--structural-rgb) / .2),transparent 68%); right: -180px; top: -230px; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; }
.eyebrow, .kicker { color: var(--cyan); font-size: .7rem; text-transform: uppercase; letter-spacing: .23em; font-weight: 700; }
.display { font-family: var(--serif); font-weight: 900; font-size: clamp(3.5rem, 9vw, 8rem); line-height: .9; letter-spacing: -.04em; margin: 1.3rem 0 1.8rem; }
.display em, .page-title em, .section-title em { color: var(--purple-light); font-style: italic; }
.hero-copy, .page-lead { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 58ch; }
.hero-aside { border-left: 1px solid var(--line); padding-left: 2rem; }
.hero-aside strong { display: block; font-family: var(--serif); font-size: 1.65rem; line-height: 1.2; margin: .65rem 0; }
.hero-art { position:relative; min-height:470px; perspective:1000px; }
.hero-cover { position:absolute; width:210px; aspect-ratio:2/3; object-fit:cover; border:1px solid rgba(255,255,255,.15); box-shadow:0 28px 70px rgba(0,0,0,.65); }
.hero-cover:nth-of-type(1){right:16%;top:2%;z-index:3;transform:rotate(3deg)}
.hero-cover:nth-of-type(2){left:5%;top:20%;z-index:2;transform:rotate(-9deg) scale(.88);filter:saturate(.75) brightness(.72)}
.hero-cover:nth-of-type(3){right:0;bottom:0;z-index:1;transform:rotate(11deg) scale(.78);filter:saturate(.65) brightness(.58)}
.hero-scan { position:absolute; inset:8% 0 5% 3%; border:1px solid rgb(var(--accent-rgb) / .18); background:linear-gradient(transparent 48%,rgb(var(--accent-rgb) / .14) 50%,transparent 52%); background-size:100% 28px; clip-path:polygon(0 0,92% 0,100% 12%,100% 100%,8% 100%,0 88%); }
.hero-aside.art-caption { position:absolute; right:0; bottom:1rem; z-index:5; width:270px; background:rgba(15,15,18,.86); backdrop-filter:blur(10px); padding:1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.25rem; text-decoration: none; border: 1px solid var(--purple); background: var(--purple); color: white; text-transform: uppercase; letter-spacing: .11em; font-size: .7rem; font-weight: 700; }
.button:hover { background: #9C7A52; transform: translateY(-2px); }
.button.ghost { background: transparent; border-color: var(--line); color: var(--purple-light); }

.section { padding: 6.5rem 0; border-top: 1px solid var(--line); position: relative; }
.lost-page { position:relative; min-height:calc(100dvh - 74px); display:grid; align-items:center; overflow:hidden; background:radial-gradient(circle at 68% 42%,rgb(var(--structural-rgb) / .18),transparent 28%); }
.lost-signal { position:absolute; right:3%; font:900 clamp(12rem,35vw,38rem)/1 var(--serif); color:rgb(var(--accent-soft-rgb) / .035); }
.privacy-copy { max-width:850px; }.privacy-copy h2{font:700 clamp(1.6rem,3vw,2.5rem)/1.1 var(--serif);margin:2.4rem 0 .7rem}.privacy-copy p{color:var(--muted);max-width:70ch}.privacy-copy a{color:var(--cyan)}
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.section-title, .page-title { font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 4.7rem); line-height: 1; margin: .65rem 0; }
.section-intro { color: var(--muted); max-width: 54ch; }
.text-link { color: var(--cyan); text-decoration: none; white-space: nowrap; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }

.route-grid { display:grid; grid-template-columns:repeat(12,1fr); column-gap:1.65rem; row-gap:2.35rem; padding:1rem 0 1.5rem; }
.route-card { min-height:270px; padding:2rem; background:radial-gradient(circle at 8% 5%,rgb(var(--accent-rgb) / .045),transparent 28%),linear-gradient(145deg,rgba(25,24,38,.98),rgba(14,14,23,.98)); border:1px solid rgb(var(--accent-soft-rgb) / .17); border-radius:26px 0 26px 0; text-decoration:none; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; transform:translateZ(0); box-shadow:inset 1px 1px 0 rgba(255,255,255,.045), inset -1px -1px 0 rgb(var(--structural-rgb) / .1), 0 18px 55px rgba(0,0,0,.36); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s; }
.route-card:nth-child(1), .route-card:nth-child(4) { grid-column: span 7; }
.route-card:nth-child(2), .route-card:nth-child(3) { grid-column: span 5; }
.route-card::after { content: attr(data-number); position: absolute; right: 1rem; bottom: -2.5rem; color: rgb(var(--accent-soft-rgb) / .05); font: 900 9rem/1 var(--serif); }
.route-card:hover { border-color:rgb(var(--accent-rgb) / .34); transform:translateY(-5px); background:radial-gradient(circle at 8% 5%,rgb(var(--accent-rgb) / .075),transparent 30%),linear-gradient(145deg,rgba(27,26,42,.99),rgba(14,14,24,.99)); box-shadow:inset 1px 1px 0 rgb(var(--accent-rgb) / .1), inset -1px -1px 0 rgb(var(--structural-rgb) / .16), 0 28px 65px rgba(0,0,0,.5); }
.route-card h3 { font-family: var(--serif); font-size: clamp(1.8rem,3vw,3rem); margin: .6rem 0; }
.route-card p { color: var(--muted); max-width: 45ch; }
.route-arrow { color: var(--cyan); font-size: 1.4rem; }
.route-icon { width:76px; height:76px; display:grid; place-items:center; color:var(--cyan); margin:-.4rem 0 .5rem -.5rem; position:relative; }
.route-icon::before { content:""; position:absolute; inset:12px; border-radius:50%; background:radial-gradient(circle,rgb(var(--accent-rgb) / .14),transparent 70%); filter:blur(7px); transition:transform .35s,opacity .35s; }
.route-icon svg { width:62px; height:62px; overflow:visible; }
.glyph-main,.glyph-fine,.glyph-accent { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.glyph-main { stroke:currentColor; stroke-width:1.5; }
.glyph-fine { stroke:rgb(var(--accent-soft-rgb) / .72); stroke-width:1; }
.glyph-accent { stroke:#F7F3EC; stroke-width:1; }
.glyph-node { fill:var(--cyan); stroke:#F7F3EC; stroke-width:.7; }
.route-card:hover .route-icon::before { transform:scale(1.35); opacity:1; }
.route-card:hover .page-left { transform:translateX(-2px) rotate(-2deg); transform-origin:30px 50px; }
.route-card:hover .page-right { transform:translateX(2px) rotate(2deg); transform-origin:34px 50px; }
.page-left,.page-right,.shard,.shard-side,.threshold,.signal-wave,.path-node { transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .35s; }
.route-card:hover .path-node { transform:scale(1.45); transform-origin:32px 34px; }
.route-card:hover .glyph-paths .glyph-main { stroke-dasharray:5 3; }
.route-card:hover .shard { transform:translateY(5px); }
.route-card:hover .shard-side { transform:translateY(3px); opacity:.65; }
.route-card:hover .threshold { transform:translateY(2px) scaleX(1.06); transform-origin:32px 52px; }
.route-card:hover .wave-one { transform:scale(1.08); transform-origin:32px 32px; }
.route-card:hover .wave-two { transform:scale(1.14); transform-origin:32px 32px; opacity:.55; }
.route-card.has-image { padding-right:min(38%,250px); }
.route-card.has-image .route-image { position:absolute; right:0; top:0; bottom:0; width:34%; height:100%; object-fit:cover; opacity:.58; filter:saturate(.8) contrast(1.08); mask-image:linear-gradient(to right,transparent,#000 45%); }

.launch { background: radial-gradient(circle at 80% 20%,rgb(var(--accent-rgb) / .1),transparent 30%),var(--surface); }
.launch-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; }
.launch-date { border: 1px solid rgb(var(--accent-rgb) / .25); padding: 2rem; position:relative; overflow:hidden; min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; }
.launch-date img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(.7) contrast(1.08); }
.launch-date::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 5%,rgba(15,15,18,.25) 42%,rgba(15,15,18,.96)); }
.launch-date > :not(img) { position:relative; z-index:1; }
.launch-date strong { display: block; font-family: var(--serif); font-size: 4rem; color: var(--cyan); line-height: 1; }

.page-hero { padding: 7rem 0 4rem; position: relative; overflow:hidden; min-height:390px; display:flex; align-items:center; }
.page-hero::before { content:""; position:absolute; right:0; top:0; bottom:0; width:42%; background-position:center; background-size:cover; opacity:.26; filter:saturate(.65) contrast(1.15); mask-image:linear-gradient(to right,transparent,#000 45%); }
body:has(a[aria-current="page"][href="libros.html"]) .page-hero::before { background-image:url("../images/covers/oraculo.webp"); }
body:has(a[aria-current="page"][href="experiencias.html"]) .page-hero::before { background-image:url("../images/wallpapers/previews/el-paciente-85.jpg"); }
body:has(a[aria-current="page"][href="descargas.html"]) .page-hero::before { background-image:url("../images/wallpapers/previews/suenos-de-silicio-2.jpg"); }
body:has(a[aria-current="page"][href="eventos.html"]) .page-hero::before { background-image:url("../images/wallpapers/previews/la-operadora-del-turno-nocturno.jpg"); }
body:has(a[aria-current="page"][href="autor.html"]) .page-hero::before { background-image:url("../images/author/foto.jpg"); background-position:center 28%; }
.page-hero .container { position:relative; z-index:1; }
.page-hero .page-lead { margin-top: 1.4rem; }
.catalog-grid, .experience-grid, .event-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.book-card, .feature-card, .event-card { background: var(--surface); border: 1px solid var(--line); }
.book-card { display: grid; grid-template-columns: 180px 1fr; min-height: 300px; }
.book-card img { width: 100%; height: 100%; object-fit: cover; }
.book-copy, .feature-copy, .event-copy { padding: 1.6rem; }
.book-card h2, .feature-card h2, .event-card h2 { font-family: var(--serif); line-height: 1.1; margin: .4rem 0 .8rem; }
.catalog-grid.book-carousel { display:block; position:relative; perspective:1400px; overflow:hidden; border-radius:32px 0 32px 0; }
.catalog-grid.book-carousel .book-card.reveal { position:absolute; inset:0; display:grid; grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr); min-height:560px; overflow:hidden; border-radius:32px 0 32px 0; background:radial-gradient(circle at 16% 28%,rgb(var(--accent-rgb) / .09),transparent 31%),linear-gradient(135deg,rgba(26,25,40,.98),rgba(10,10,17,.99)); border:1px solid rgb(var(--accent-soft-rgb) / .18); box-shadow:inset 1px 1px rgba(255,255,255,.045),0 34px 80px rgba(0,0,0,.46); opacity:0; pointer-events:none; transform:translateX(7%) rotateY(-3deg) scale(.97); transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1); }
.book-carousel .book-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 53%,rgb(var(--accent-soft-rgb) / .035) 53.2%,transparent 54%); }
.catalog-grid.book-carousel .book-card.reveal.is-active { position:relative; opacity:1; pointer-events:auto; transform:none; }
.book-object { position:relative; display:grid; place-items:center; min-height:560px; padding:3rem; background:radial-gradient(circle at 50% 45%,rgb(var(--accent-rgb) / .12),transparent 42%),linear-gradient(90deg,rgba(5,5,10,.8),rgba(14,14,23,.2)); perspective:1100px; }
.book-object::before { content:""; position:absolute; width:68%; height:13%; left:18%; bottom:8%; border-radius:50%; background:rgba(0,0,0,.75); filter:blur(18px); transform:rotate(-4deg); }
.book-object > img { position:relative; z-index:2; width:min(270px,78%); max-height:440px; aspect-ratio:2/3; object-fit:cover; border:1px solid rgba(255,255,255,.2); transform:rotateY(-10deg) rotateZ(-1.5deg); transform-origin:right center; box-shadow:-8px 5px 0 #0A0A0D, -22px 32px 52px rgba(0,0,0,.62); transition:transform .45s,box-shadow .45s; }
.book-card.is-active:hover .book-object > img { transform:rotateY(-4deg) rotateZ(-.5deg) translateY(-5px); box-shadow:-5px 3px 0 #0A0A0D, -26px 42px 65px rgba(0,0,0,.7); }
.book-spine { position:absolute; z-index:3; width:7px; height:69%; left:calc(50% - min(135px,39%) - 3px); top:15%; background:linear-gradient(90deg,#08080A,rgba(255,255,255,.18),#0C0C10); transform:rotate(-1.5deg); opacity:.8; }
.book-reflection { position:absolute; z-index:3; width:38%; height:1px; bottom:10%; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.3; }
.book-carousel .book-copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:4rem clamp(2rem,5vw,5rem); }
.book-carousel .book-copy::before { content:"EXPEDIENTE EDITORIAL"; color:rgb(var(--accent-soft-rgb) / .38); letter-spacing:.25em; font-size:.54rem; margin-bottom:1.4rem; }
.book-carousel .book-copy h2 { max-width:13ch; font-size:clamp(2.5rem,5vw,5.5rem); margin:.6rem 0 1.2rem; }
.book-carousel .book-copy > .muted { max-width:50ch; font-size:1.02rem; }
.book-index { position:absolute; right:2rem; top:1.6rem; color:rgb(var(--accent-soft-rgb) / .28); font-family:var(--serif); font-size:1rem; letter-spacing:.15em; }
.book-facts { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.35rem 0 .2rem; }
.book-facts span { padding:.38rem .65rem; border:1px solid rgb(var(--accent-rgb) / .2); color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.56rem; border-radius:10px 0 10px 0; background:rgb(var(--accent-rgb) / .035); }
.book-carousel-nav { display:grid; grid-template-columns:54px minmax(0,1fr) 54px; gap:.8rem; align-items:stretch; margin-top:1.4rem; }
.book-step,.book-tab { color:var(--text); border:1px solid var(--line); background:rgba(21,21,26,.92); }
.book-step { font-size:1.2rem; transition:border-color .25s,color .25s,transform .25s; }
.book-step:hover { color:var(--cyan); border-color:rgb(var(--accent-rgb) / .38); transform:translateY(-2px); }
.book-rail { display:grid; grid-template-columns:repeat(5,1fr); gap:.65rem; }
.book-tab { min-width:0; padding:.55rem; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:.65rem; text-align:left; cursor:pointer; border-radius:12px 0 12px 0; opacity:.58; transition:opacity .25s,border-color .25s,transform .25s,background .25s; }
.book-tab img { width:38px; height:54px; object-fit:cover; }
.book-tab span { overflow:hidden; color:var(--muted); font-size:.56rem; line-height:1.25; text-overflow:ellipsis; }
.book-tab b { display:block; color:var(--cyan); letter-spacing:.12em; font-size:.5rem; margin-bottom:.25rem; }
.book-tab.is-active { opacity:1; border-color:rgb(var(--accent-rgb) / .36); background:linear-gradient(145deg,rgb(var(--accent-rgb) / .08),rgb(var(--structural-rgb) / .07)); transform:translateY(-3px); }
.meta { color: var(--cyan); text-transform: uppercase; font-size: .65rem; letter-spacing: .15em; }
.muted { color: var(--muted); }
.mini-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.mini-links a { text-decoration: none; border: 1px solid var(--line); color: var(--purple-light); padding: .5rem .7rem; font-size: .7rem; }

.feature-card { min-height: 340px; position: relative; overflow: hidden; }
.feature-card.large { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
.feature-visual { min-height: 300px; background: radial-gradient(circle at center,rgb(var(--structural-rgb) / .22),transparent 60%),#0C0C10; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(4rem,10vw,9rem); color: rgb(var(--accent-soft-rgb) / .35); position:relative; overflow:hidden; }
.feature-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; filter:saturate(.7) contrast(1.1); }
.feature-visual span { position:relative; z-index:1; text-shadow:0 0 35px #000; }
body:has(a[aria-current="page"][href="experiencias.html"]) .feature-visual { background:linear-gradient(rgba(8,8,13,.18),rgba(8,8,13,.72)),url("../images/wallpapers/previews/el-paciente-85.jpg") center/cover; text-shadow:0 0 35px #000; }
.audio-experience { border-radius:28px 0 28px 0; box-shadow:inset 1px 1px rgba(255,255,255,.04),0 28px 65px rgba(0,0,0,.4); }
body:has(a[aria-current="page"][href="experiencias.html"]) .audio-experience .feature-visual { background:#0C0C10; }
.audio-experience .feature-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,10,.12),rgba(5,6,10,.66)),radial-gradient(circle at 50% 45%,transparent,rgba(4,5,9,.6)); }
.audio-experience .feature-visual img { opacity:.72; filter:saturate(.72) contrast(1.15) brightness(.75); }
body:has(a[aria-current="page"][href="experiencias.html"]) .juego-experience .feature-visual { background:#0C0C10; }
/* El tarot trae su propia atmósfera: la casa bajo la luna, no el fondo común
   de la página de experiencias. */
body:has(a[aria-current="page"][href="experiencias.html"]) .tarot-experience .feature-visual { background:#0C0C10; }
.tarot-experience .feature-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,10,.12),rgba(5,6,10,.62)),radial-gradient(circle at 50% 45%,transparent,rgba(4,5,9,.55)); }
.tarot-experience .feature-visual img { opacity:.7; filter:saturate(.8) contrast(1.08); }
.tarot-experience .feature-visual span { color:rgb(var(--accent-soft-rgb) / .5); font-size:clamp(3rem,7vw,6.5rem); letter-spacing:.06em; }
.juego-experience .feature-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,10,.1),rgba(5,6,10,.62)),radial-gradient(circle at 50% 45%,transparent,rgba(4,5,9,.55)); }
.juego-experience .feature-visual img { opacity:.8; filter:saturate(.85) contrast(1.05); }
.juego-experience .feature-visual span { color:rgb(var(--accent-rgb) / .55); }
.audio-sigil { width:112px; height:112px; display:grid; place-items:center; border:1px solid rgb(var(--accent-rgb) / .5); border-radius:50%; color:var(--cyan); background:rgba(5,8,13,.7);  }
.audio-sigil::before,.audio-sigil::after { content:""; position:absolute; border:1px solid rgb(var(--accent-soft-rgb) / .24); border-radius:50%; animation:signalPulse 2.8s ease-out infinite; }
.audio-sigil::before { inset:-18px; }
.audio-sigil::after { inset:-38px; animation-delay:.8s; }
.audio-sigil i { font-size:2.5rem; }
.audio-sigil b { position:absolute; bottom:16px; font-size:.5rem; letter-spacing:.2em; }
.sound-wave { position:absolute; z-index:2; left:8%; right:8%; bottom:2rem; height:38px; display:flex; align-items:center; justify-content:center; gap:7px; }
.sound-wave i { width:2px; height:18%; background:var(--cyan); animation:waveMeter 1.2s ease-in-out infinite alternate; }
.sound-wave i:nth-child(2),.sound-wave i:nth-child(6){height:45%;animation-delay:.2s}.sound-wave i:nth-child(3),.sound-wave i:nth-child(5){height:78%;animation-delay:.4s}.sound-wave i:nth-child(4){height:100%;animation-delay:.6s}
.audio-status { color:var(--purple-light); border-color:rgb(var(--accent-soft-rgb) / .3); background:rgb(var(--structural-rgb) / .06); }
.podcast-player { position:relative; margin-top:1.25rem; padding-top:1.8rem; border-top:1px solid rgb(var(--accent-rgb) / .14); }
.podcast-player::before { content:""; position:absolute; left:0; top:-1px; width:90px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.player-label { position:absolute; left:0; top:.25rem; display:flex; align-items:center; gap:.45rem; color:var(--cyan); font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.player-label i { font-size:.9rem; }
.podcast-player iframe { display:block; width:100%; border:0; border-radius:14px 0 14px 0; background:#121212; box-shadow:0 16px 36px rgba(0,0,0,.28); }
.platform-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1.6rem; }
.platform-link { min-height:72px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:.7rem; padding:.75rem 1rem; color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:15px 0 15px 0; background:rgba(10,10,17,.62); transition:transform .25s,border-color .25s,background .25s; }
.platform-link > i { font-size:1.5rem; }
.platform-link span { line-height:1.15; font-size:.78rem; font-weight:700; }
.platform-link small { display:block; color:var(--muted); font-size:.52rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.28rem; }
.platform-link > b { color:var(--purple-light); font-weight:400; }
.platform-link.youtube > i { color:#ff4965; }.platform-link.spotify > i { color:#1ed760; }
.platform-link:hover { transform:translateY(-3px); background:rgba(24,23,37,.9); }.platform-link.youtube:hover{border-color:rgba(255,73,101,.4)}.platform-link.spotify:hover{border-color:rgba(30,215,96,.4)}
.share-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:1.25rem; }
.share-tools > span { width:100%; color:var(--muted); font-size:.52rem; text-transform:uppercase; letter-spacing:.14em; }
.share-tools button { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border:1px solid var(--line); background:rgba(12,12,20,.7); color:var(--purple-light); font-size:.62rem; cursor:pointer; }
.share-tools button:hover { border-color:rgb(var(--accent-rgb) / .35); color:var(--cyan); }
.share-tools button b { font-weight:600; }.share-tools em{color:var(--cyan);font-size:.58rem;font-style:normal}
.experience-grid .empty-note { grid-column:1 / -1; }
@keyframes signalPulse { 0%{transform:scale(.78);opacity:0}35%{opacity:.65}100%{transform:scale(1.18);opacity:0} }
@keyframes waveMeter { from{transform:scaleY(.45);opacity:.45}to{transform:scaleY(1);opacity:1} }

.event-card { display:grid; grid-template-columns:145px 1fr; position:relative; min-height:390px; overflow:hidden; border-radius:28px 0 28px 0; background:radial-gradient(circle at 8% 6%,rgb(var(--accent-rgb) / .055),transparent 28%),linear-gradient(145deg,rgba(25,24,39,.98),rgba(12,12,20,.98)); border:1px solid rgb(var(--accent-soft-rgb) / .16); box-shadow:inset 1px 1px rgba(255,255,255,.04),0 24px 60px rgba(0,0,0,.34); transition:transform .3s,border-color .3s,box-shadow .3s; }
.event-card::before { content:""; position:absolute; right:0; top:0; bottom:0; width:48%; background-position:center; background-size:cover; opacity:.1; filter:saturate(.65) contrast(1.1); mask-image:linear-gradient(to right,transparent,#000 60%); transition:opacity .35s,transform .45s; }
.event-card.event-confirmed::before { background-image:url("../images/wallpapers/previews/el-paciente-85.jpg"); }
.event-card.event-open::before { background-image:url("../images/wallpapers/previews/microfono-de-medianoche-2.jpg"); }
.event-card.event-archive { grid-column:1 / -1; }
.archive-head { grid-column:1 / -1; padding:3rem 0 .6rem; border-top:1px solid var(--line); }
.archive-head h2 { margin:.35rem 0; font:700 clamp(1.8rem,3vw,3rem)/1.1 var(--serif); }
.event-card.event-archive::before { background-image:url("https://i.ytimg.com/vi/DeRNcMe-meU/hqdefault.jpg"); width:55%; opacity:.16; }
.event-status.watched { color:#BBA17C; border-color:rgb(var(--accent-soft-rgb) / .3); background:rgb(var(--accent-soft-rgb) / .055); }
.event-card:hover { transform:translateY(-5px); border-color:rgb(var(--accent-rgb) / .3); box-shadow:inset 1px 1px rgb(var(--accent-rgb) / .08), 0 34px 75px rgba(0,0,0,.46); }
.event-card:hover::before { opacity:.18; transform:scale(1.03); }
.event-date { position:relative; z-index:1; padding:1.5rem; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg,rgb(var(--accent-rgb) / .035),rgb(var(--structural-rgb) / .025)); }
.event-date::after { content:""; position:absolute; right:-1px; top:18%; height:64%; width:1px; background:linear-gradient(transparent,var(--cyan),transparent); opacity:.35; }
.event-date strong { font:900 4rem/1 var(--serif); color:var(--text); }
.event-status { display:inline-flex; width:fit-content; margin-bottom:.7rem; padding:.38rem .65rem; border:1px solid rgb(var(--accent-rgb) / .32); border-radius:10px 0 10px 0; background:rgb(var(--accent-rgb) / .035); color:var(--cyan); font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; }
.event-status.pending { color: var(--purple-light); border-color: rgb(var(--accent-soft-rgb) / .3); }
.event-copy { position:relative; z-index:1; padding:2rem; }
.event-copy h2 { max-width:75%; font-size:clamp(1.65rem,2.4vw,2.3rem); margin:.65rem 0 1rem; }
.event-copy > .muted { max-width:48ch; }
.event-glyph { position:absolute; right:1.4rem; top:1.4rem; width:66px; height:66px; display:grid; place-items:center; border:1px solid rgb(var(--accent-rgb) / .22); border-radius:19px 0 19px 0; color:var(--cyan); background:linear-gradient(145deg,rgb(var(--accent-rgb) / .07),rgb(var(--structural-rgb) / .06)); box-shadow:inset 1px 1px rgba(255,255,255,.05),0 15px 30px rgba(0,0,0,.25); }
.event-glyph i { font-size:1.55rem; }
.event-glyph b { position:absolute; right:5px; bottom:3px; color:rgb(var(--accent-soft-rgb) / .45); font-size:.48rem; letter-spacing:.08em; }
.event-copy .mini-links a { display:inline-flex; align-items:center; min-height:42px; padding:.6rem .85rem; border-radius:12px 0 12px 0; color:var(--text); background:rgb(var(--structural-rgb) / .08); }
.event-copy .mini-links a::after { content:"→"; margin-left:.55rem; color:var(--cyan); transition:transform .2s; }
.event-copy .mini-links a:hover { border-color:rgb(var(--accent-rgb) / .32); }
.event-copy .mini-links a:hover::after { transform:translateX(3px); }
.empty-note { padding: 2.5rem; border: 1px dashed var(--line); color: var(--muted); }

.download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.device-switch { display:flex; width:fit-content; gap:.35rem; margin-bottom:1rem; padding:.3rem; background:rgba(21,21,26,.86); border:1px solid var(--line); border-radius:18px 0 18px 0; }
.device-button { border:0; background:transparent; color:var(--muted); padding:.7rem 1rem; text-transform:uppercase; letter-spacing:.11em; font-size:.67rem; }
.device-button.active { background:var(--purple); color:#fff; border-radius:12px 0 12px 0; box-shadow:0 8px 24px rgb(var(--structural-rgb) / .22); }
.download-grid[data-device="mobile"] { grid-template-columns:repeat(4,1fr); }
.wallpaper { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.wallpaper-preview { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: var(--surface-2); }
.wallpaper.mobile .wallpaper-preview { aspect-ratio:9/16; }
.wallpaper-copy { padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wallpaper-copy h2 { font-family: var(--serif); font-size: 1rem; margin: 0; }
.download-link { color: var(--cyan); font-size: .65rem; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; }
.filter-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filter-row.is-hidden { display:none !important; }
.filter { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: .55rem .8rem; }
.filter.active { color: var(--cyan); border-color: var(--cyan); }
.filter[data-filter="archivo"] { display:none; }

.author-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:start; }
.author-photo { position:sticky; top:105px; padding:.85rem; min-height:640px; overflow:hidden; border:1px solid rgb(var(--accent-rgb) / .18); border-radius:34px 0 34px 0; background:linear-gradient(145deg,rgb(var(--accent-rgb) / .07),rgb(var(--structural-rgb) / .06)); box-shadow:inset 1px 1px rgba(255,255,255,.05),0 30px 70px rgba(0,0,0,.42); }
.author-photo::before { content:"ARCHIVO / RETRATO 01"; position:absolute; left:1.45rem; top:1.35rem; z-index:3; padding:.4rem .6rem; color:var(--cyan); background:rgba(8,8,14,.78); border-left:1px solid var(--cyan); font-size:.55rem; letter-spacing:.17em; }
.author-photo::after { content:""; position:absolute; inset:.85rem; z-index:2; pointer-events:none; border-radius:24px 0 24px 0; background:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,rgb(var(--accent-rgb) / .035) 18px); box-shadow:inset 0 -110px 90px -65px rgba(8,8,14,.85); }
.author-photo img { position:absolute; inset:.85rem; width:calc(100% - 1.7rem); height:calc(100% - 1.7rem); object-fit:cover; object-position:center top; border-radius:24px 0 24px 0; filter:saturate(.72) contrast(1.05); }
.author-copy { position:relative; padding:2.4rem; overflow:hidden; border-radius:30px 0 30px 0; background:radial-gradient(circle at 90% 5%,rgb(var(--structural-rgb) / .1),transparent 28%),linear-gradient(145deg,rgba(20,19,31,.78),rgba(15,15,18,.55)); border:1px solid rgb(var(--accent-soft-rgb) / .1); box-shadow:inset 1px 1px rgba(255,255,255,.035),0 28px 70px rgba(0,0,0,.28); }
.author-copy::after { content:"GV / BIO"; position:absolute; top:1.1rem; right:1.4rem; color:rgb(var(--accent-soft-rgb) / .09); font:900 1.2rem/1 var(--serif); letter-spacing:.08em; }
.author-copy > p { color:var(--muted); font-size:1.05rem; max-width:64ch; }
.author-copy .actions { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.author-copy .actions .button { position:relative; justify-content:flex-start; min-height:72px; padding:.9rem 1rem; border-radius:18px 0 18px 0; overflow:hidden; background:linear-gradient(145deg,rgba(27,26,43,.96),rgba(12,12,21,.96)); border:1px solid var(--line); color:var(--text); box-shadow:inset 1px 1px rgba(255,255,255,.04); }
.author-copy .actions .button::after { content:"→"; position:absolute; right:1rem; color:var(--cyan); font-size:1rem; transition:transform .25s; }
.author-copy .actions .button:hover { border-color:rgb(var(--accent-rgb) / .32); transform:translateY(-3px); box-shadow:0 15px 35px rgba(0,0,0,.28), inset 1px 1px rgb(var(--accent-rgb) / .08); }
.author-copy .actions .button:hover::after { transform:translateX(3px); }
.contact-action-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; margin-right:.2rem; border:1px solid rgb(var(--accent-rgb) / .24); border-radius:12px 0 12px 0; color:var(--cyan); font-size:1.25rem; background:rgb(var(--accent-rgb) / .035); }
.contact-action-copy { display:flex; flex-direction:column; align-items:flex-start; gap:.22rem; padding-right:1.5rem; }
.contact-action-copy strong { font-size:.68rem; letter-spacing:.11em; }
.contact-action-copy small { color:var(--muted); font-size:.56rem; letter-spacing:.02em; text-transform:none; }
.author-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:2rem 0; }
.author-stats div { padding:1rem; border-top:1px solid rgb(var(--accent-rgb) / .22); background:linear-gradient(180deg,rgb(var(--accent-rgb) / .035),transparent); }
.author-stats strong { display:block; color:var(--text); font:900 1.8rem/1 var(--serif); }
.author-stats span { display:block; margin-top:.55rem; color:var(--muted); text-transform:uppercase; letter-spacing:.11em; font-size:.55rem; }
.link-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:2.2rem; }
.link-list a { position:relative; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:.8rem; min-height:76px; padding:.8rem 1rem; overflow:hidden; border:1px solid var(--line); border-radius:16px 0 16px 0; text-decoration:none; background:linear-gradient(145deg,rgba(24,23,37,.9),rgba(11,11,19,.92)); transition:transform .25s,border-color .25s,background .25s; }
.link-list a:hover { transform:translateY(-3px); border-color:rgb(var(--accent-rgb) / .3); background:linear-gradient(145deg,rgba(28,27,43,.96),rgba(12,12,21,.96)); }
.network-mark { width:42px; height:42px; display:grid; place-items:center; color:var(--cyan); border:1px solid rgb(var(--accent-rgb) / .24); border-radius:12px 0 12px 0; font-size:.65rem; font-weight:800; letter-spacing:.04em; box-shadow:inset 1px 1px rgba(255,255,255,.05); }
.network-mark i { font-size:1.3rem; font-weight:400; }
.network-copy { display:flex; flex-direction:column; min-width:0; }
.network-copy strong { color:var(--text); font-size:.8rem; }
.network-copy small { margin-top:.25rem; color:var(--muted); font-size:.58rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.network-arrow { color:var(--purple-light); transition:transform .25s,color .25s; }
.link-list a:hover .network-arrow { color:var(--cyan); transform:translate(2px,-2px); }

.newsletter { text-align: center; background: linear-gradient(135deg,rgb(var(--structural-rgb) / .14),rgb(var(--accent-rgb) / .06)); }
.newsletter .section-intro { margin-inline: auto; }
.newsletter-note { display:flex; align-items:center; justify-content:center; gap:.45rem; margin:1rem auto 0; color:var(--muted); font-size:.6rem; }
.newsletter-note i { color:var(--cyan); }
.site-footer { position:relative; overflow:hidden; border-top:1px solid rgb(var(--accent-rgb) / .16); padding:4rem 0 1.6rem; color:var(--muted); background:radial-gradient(circle at 9% 20%,rgb(var(--structural-rgb) / .11),transparent 29%),radial-gradient(circle at 92% 70%,rgb(var(--accent-rgb) / .065),transparent 27%),#0C0C10; }
.site-footer::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.25; background:linear-gradient(rgb(var(--accent-rgb) / .04) 1px,transparent 1px); background-size:100% 19px; mask-image:linear-gradient(to right,#000,transparent 62%); }
.site-footer::after { content:"GV / END"; position:absolute; right:-1rem; bottom:-2.6rem; color:rgb(var(--accent-soft-rgb) / .035); font:900 clamp(5rem,11vw,10rem)/1 var(--serif); letter-spacing:-.06em; pointer-events:none; }
.footer-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:2.5rem 4rem; }
.footer-identity { display:flex; align-items:center; gap:1.35rem; }
.footer-identity strong { display:block; margin-top:.45rem; color:var(--text); font-family:var(--serif); font-size:clamp(1.55rem,2.8vw,2.5rem); line-height:1.05; }
.footer-sigil { position:relative; width:74px; height:74px; flex:0 0 74px; border-radius:22px 0 22px 0; border:1px solid rgb(var(--accent-rgb) / .26); background:linear-gradient(145deg,rgb(var(--accent-rgb) / .08),rgb(var(--structural-rgb) / .08)); box-shadow:inset 1px 1px rgba(255,255,255,.05),0 18px 38px rgba(0,0,0,.35); }
.footer-sigil b,.footer-sigil em { position:absolute; font:900 2.65rem/1 var(--serif); font-style:normal; }
.footer-sigil b { left:13px; top:10px; color:var(--text); }
.footer-sigil em { right:10px; bottom:9px; color:var(--cyan); font-style:italic; }
.footer-sigil i { position:absolute; left:50%; top:50%; width:5px; height:5px; background:var(--cyan); border:1px solid #F7F3EC; transform:translate(-50%,-50%) rotate(45deg); }
.footer-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem 1.5rem; padding-left:2rem; border-left:1px solid var(--line); }
.footer-nav a { position:relative; color:var(--muted); text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-size:.63rem; padding:.3rem 0; }
.footer-nav a::after { content:"→"; color:var(--cyan); margin-left:.45rem; opacity:0; transition:opacity .2s,transform .2s; display:inline-block; }
.footer-nav a:hover { color:var(--text); }
.footer-nav a:hover::after { opacity:1; transform:translateX(3px); }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:1rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:.66rem; letter-spacing:.06em; }
.footer-bottom a { color:var(--cyan); text-decoration:none; text-transform:uppercase; letter-spacing:.1em; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s,transform .6s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 850px) {
  .nav-toggle { display: block; }
  .mobile-home-link { display:list-item; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 74px; padding: 1.5rem; flex-direction: column; align-items: stretch; background: rgba(15,15,18,.98); border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .hero-grid, .launch-grid, .author-grid { grid-template-columns: 1fr; }
  .author-photo { position:relative; top:auto; min-height:540px; }
  .hero-art { min-height:400px; }
  .hero-aside { border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
  .route-card:nth-child(n), .feature-card.large { grid-column: span 12; }
  .route-grid { row-gap:1.7rem; padding:.5rem 0 1rem; }
  .catalog-grid, .experience-grid, .event-grid { grid-template-columns: 1fr; }
  .catalog-grid.book-carousel .book-card.reveal { grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); }
  .book-carousel .book-copy { padding:3rem 2rem; }
  .book-rail { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:.2rem 0 .55rem; }
  .book-tab { flex:0 0 150px; scroll-snap-align:start; }
  .feature-card.large { display:block; grid-column:1 / -1; min-width:0; }
  .feature-copy,.platform-actions,.platform-link { min-width:0; }
  .download-grid { grid-template-columns: repeat(2,1fr); }
  .download-grid[data-device="mobile"] { grid-template-columns:repeat(3,1fr); }
  .footer-inner { grid-template-columns:1fr; }
  .footer-nav { padding:1.25rem 0 0; border-left:0; border-top:1px solid var(--line); }
}

@media (max-width: 560px) {
  .container { width: min(100% - 2rem,1160px); }
  .hero { padding: 5rem 0 4rem; min-height: auto; }
  .section, .page-hero { padding: 4rem 0; }
  .display { font-size: clamp(3.2rem,19vw,5.4rem); }
  .hero-art { min-height:0; padding:2.25rem 0 0; display:flex; flex-direction:column; align-items:center; }
  .hero-scan { inset:4rem 0 7.5rem; }
  .hero-cover { width:145px; }
  .hero-cover:nth-of-type(1) { position:relative; right:auto; top:auto; width:min(62vw,210px); transform:rotate(2deg); z-index:3; }
  .hero-cover:nth-of-type(2) { left:0; top:27%; width:42%; transform:rotate(-8deg) scale(.86); opacity:.68; }
  .hero-cover:nth-of-type(3) { right:0; bottom:18%; width:40%; transform:rotate(8deg) scale(.8); opacity:.42; }
  .hero-aside.art-caption { position:relative; right:auto; bottom:auto; width:calc(100% - 1.5rem); margin:-2rem 0 0 auto; padding:1.35rem 1.45rem; border-top:1px solid rgb(var(--accent-rgb) / .24); border-left:1px solid rgb(var(--accent-soft-rgb) / .14); box-shadow:0 22px 48px rgba(0,0,0,.48); }
  .route-card.has-image { padding-right:2rem; }
  .route-card.has-image .route-image { width:45%; opacity:.2; }
  .section-head, .footer-inner { align-items: flex-start; flex-direction: column; }
  .route-card:nth-child(n) { grid-column: span 12; min-height: 230px; }
  .book-card { grid-template-columns: 110px 1fr; }
  .catalog-grid.book-carousel .book-card.reveal { grid-template-columns:1fr; min-height:0; border-radius:25px 0 25px 0; }
  .book-object { min-height:400px; padding:2.2rem 1rem 1.2rem; }
  .book-object > img { width:min(195px,62vw); max-height:310px; }
  .book-spine { display:none; }
  .book-carousel .book-copy { padding:2.2rem 1.4rem 2rem; }
  .book-carousel .book-copy h2 { max-width:100%; font-size:clamp(2.25rem,12vw,3.6rem); }
  .book-carousel .book-copy > .muted { font-size:.9rem; }
  .book-index { right:1.25rem; top:1rem; }
  .book-carousel-nav { grid-template-columns:44px minmax(0,1fr) 44px; gap:.45rem; }
  .book-tab { flex-basis:118px; grid-template-columns:30px minmax(0,1fr); padding:.42rem; }
  .book-tab img { width:30px; height:44px; }
  .book-copy { padding: 1.1rem; }
  .event-card { grid-template-columns: 1fr; }
  .event-date { min-height:130px; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:end; }
  .event-date::after { left:15%; right:auto; top:auto; bottom:-1px; width:70%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); }
  .event-copy h2 { max-width:68%; }
  .download-grid, .link-list { grid-template-columns: 1fr; }
  .author-photo { min-height:430px; }
  .platform-actions { grid-template-columns:1fr; }
  .author-copy { padding:1.35rem; border-radius:22px 0 22px 0; }
  .author-stats { gap:.4rem; }
  .author-stats div { padding:.8rem .55rem; }
  .author-copy .actions { grid-template-columns:1fr; }
  .download-grid[data-device="mobile"] { grid-template-columns:repeat(2,1fr); }
  .site-footer { padding-top:3rem; }
  .footer-identity { align-items:flex-start; }
  .footer-sigil { width:60px; height:60px; flex-basis:60px; border-radius:18px 0 18px 0; }
  .footer-sigil b,.footer-sigil em { font-size:2.05rem; }
  .footer-nav { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; }
}

/* ==========================================================================
   CAPA DE MARCA — aplicación de la identidad editorial
   Referencia: guía "Identidad editorial de marca · Gerry Villarreal"
   Reglas respetadas: alto contraste, proporción intacta, aire alrededor
   del símbolo, sin sombras ni brillos decorativos.
   ========================================================================== */

/* --- Firma de navegación: monograma GV + nombre ------------------------- */
.brand { gap: 0; align-items: center; }

.brand-mark {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: block;
  /* El monograma se pinta por máscara: una sola silueta sirve para todos los
     fondos y colores, sin duplicar assets. */
  background-color: var(--marfil);
  -webkit-mask-image: url("../images/brand/gv-monogram-mask.svg");
          mask-image: url("../images/brand/gv-monogram-mask.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  transition: background-color .25s ease;
}
.brand:hover .brand-mark { background-color: var(--bronce-claro); }

/* Aire de respeto + filete bronce que separa símbolo de nombre (lockup oficial) */
.brand-lockup {
  display: flex; flex-direction: column; justify-content: center;
  margin-left: 1rem; padding-left: 1rem;
  border-left: 1px solid rgb(var(--accent-rgb) / .55);
  line-height: 1;
}
.brand-lockup strong {
  font-family: var(--serif);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; color: var(--marfil);
}
.brand-lockup small {
  margin-top: .4rem;
  font-size: .5rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  white-space: nowrap; color: var(--bronce-claro);
}

/* --- Botones: bronce sólido + marfil, según la lámina de aplicación web -- */
.button {
  background: var(--bronce-solido); border-color: var(--bronce-solido);
  color: var(--marfil); border-radius: 0;
}
.button:hover { background: var(--bronce-hover); border-color: var(--bronce-hover); transform: none; }
.button.ghost {
  background: transparent;
  border-color: rgb(var(--accent-rgb) / .5);
  color: var(--bronce-claro);
}
.button.ghost:hover { background: transparent; border-color: var(--bronce); color: var(--marfil); }

/* --- Jerarquía tipográfica: bronce para etiquetas, marfil para títulos --- */
/* Etiquetas de 11px: bronce claro (7.75:1). El bronce apagado puro da 3.9:1,
   insuficiente para texto pequeño — la guía prioriza legibilidad sobre drama. */
.eyebrow, .kicker { color: var(--bronce-claro); letter-spacing: .26em; }
.display em, .page-title em, .section-title em { color: var(--bronce-claro); }
.hero-copy, .page-lead, .section-intro { color: var(--marfil-suave); }
.text-link { color: var(--bronce-claro); }
.text-link:hover { color: var(--marfil); }

/* --- Nodo de página activa: rombo bronce sin halo --------------------- */
.nav-links a[aria-current="page"]::before { background: var(--bronce); border-color: var(--bronce-claro); }
.nav-cta { border-color: rgb(var(--accent-rgb) / .5); color: var(--bronce-claro) !important; border-radius: 0; }
.nav-cta:hover { border-color: var(--bronce); color: var(--marfil) !important; }

/* --- Vino oscuro y azul nocturno como acentos de jerarquía ------------- */
.launch { background: var(--surface); }
.launch-date { border-color: rgb(var(--accent-rgb) / .3); }
.launch-date strong { color: var(--bronce-claro); }

/* --- Tarjetas: filete limpio, sin degradado de neón ------------------- */
.route-card { border-radius: 0; border-color: rgba(243,239,230,.12); }
.route-card:hover { border-color: rgb(var(--accent-rgb) / .45); }
.route-card::after { color: rgb(var(--accent-soft-rgb) / .06); }
.route-arrow { color: var(--bronce); }
.route-icon { color: var(--bronce); }
.glyph-fine  { stroke: rgb(var(--accent-soft-rgb) / .7); }
.glyph-accent { stroke: var(--marfil); }
.glyph-node  { fill: var(--bronce); stroke: var(--marfil); }

.hero-scan { border-color: rgb(var(--accent-rgb) / .18); background: linear-gradient(transparent 48%, rgb(var(--accent-rgb) / .1) 50%, transparent 52%); background-size: 100% 28px; }
.hero-aside.art-caption { background: rgba(15,15,18,.9); border-radius: 0; }

.skip-link { background: var(--marfil); color: var(--obsidiana); }
:focus-visible { outline-color: var(--bronce-claro); }

/* --- Footer: sello de cierre ------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); }

@media (max-width: 620px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-lockup { margin-left: .7rem; padding-left: .7rem; }
  .brand-lockup strong { font-size: .7rem; letter-spacing: .14em; }
  .brand-lockup small { font-size: .44rem; letter-spacing: .28em; }
}

/* --- Sello de cierre y marca de agua del footer ------------------------ */
/* El monograma sustituye al lockup tipográfico improvisado: es el símbolo
   oficial y funciona como sello (guía, lámina 09 · aplicación editorial). */
.footer-sigil {
  border-radius: 0;
  border: 1px solid rgb(var(--accent-rgb) / .3);
  background: none;
  box-shadow: none;
  display: grid; place-items: center;
}
.footer-sigil::before {
  content: ""; width: 60%; height: 60%;
  background-color: var(--marfil);
  -webkit-mask-image: url("../images/brand/gv-monogram-mask.svg");
          mask-image: url("../images/brand/gv-monogram-mask.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.footer-sigil b, .footer-sigil i, .footer-sigil em { display: none; }

/* Marca de agua: el símbolo, no un texto decorativo. */
.site-footer::after {
  content: ""; right: -3rem; bottom: -4rem;
  width: clamp(200px, 26vw, 340px); aspect-ratio: 1;
  background-color: rgb(var(--accent-soft-rgb) / .05);
  -webkit-mask-image: url("../images/brand/gv-monogram-mask.svg");
          mask-image: url("../images/brand/gv-monogram-mask.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.site-footer { background: #0C0C10; }
.site-footer::before { display: none; }

@media (max-width: 620px) { .footer-sigil { border-radius: 0; } }

/* ==========================================================================
   FASES DE CAMPAÑA
   data-fase="preventa"  → hay una obra con ventana de preventa abierta hoy
   data-fase="publicado" → no hay preventa; viste la última obra lanzada
   La diferencia es de intensidad, no de paleta: la preventa se nota.
   ========================================================================== */

/* El hero toma un lavado del universo activo. Sutil en publicado, presente
   en preventa. Es el único cambio de fondo fuera de la sección de lanzamiento. */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 90% 70% at 78% 8%, rgb(var(--structural-rgb) / .30), transparent 62%);
  opacity: .55; transition: opacity .4s ease;
}
body[data-fase="preventa"] .hero::before { opacity: 1; }
.hero > * { position: relative; z-index: 1; }
.hero::after { display: none; }  /* el halo morado original */

.launch { background: var(--u-surface); }
body[data-fase="preventa"] .launch { border-top-color: rgb(var(--accent-rgb) / .35); }

/* Distintivo de preventa: solo aparece cuando la ventana está abierta. */
.campaign-flag {
  display: none;
  align-items: center; gap: .6rem;
  margin-bottom: 1.4rem;
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .24em;
  color: var(--u-soft);
}
body[data-fase="preventa"] .campaign-flag { display: inline-flex; }
.campaign-flag::before {
  content: ""; width: 6px; height: 6px;
  background: var(--u-accent);
  transform: rotate(45deg);
}
.campaign-flag em { font-style: normal; color: var(--marfil-suave); letter-spacing: .1em; }

/* La ficha de lanzamiento se enciende durante la preventa. */
body[data-fase="preventa"] .launch-date { border-color: rgb(var(--accent-rgb) / .45); }
body[data-fase="publicado"] .launch-date { border-color: rgba(243,239,230,.12); }

/* Página de obra: el backdrop del universo, ya presente, se tiñe con su color. */
.work-page .work-status { border-color: rgb(var(--u-accent-rgb) / .45); color: var(--u-soft); }

/* --------------------------------------------------------------------------
   LÍMITES DE LA CAMPAÑA
   El nombre del autor no es campaña. Aunque viva dentro del hero, se queda
   en la marca: es lo único que se repite en los cinco universos.
   -------------------------------------------------------------------------- */
.hero .display { color: var(--marfil); }
.hero .display em { color: var(--marca-soft); }

/* --------------------------------------------------------------------------
   INTENSIDAD POR FASE
   Preventa a plena saturación; obra ya publicada, el mismo universo servido
   al 45%. La diferencia debe leerse de un vistazo, o la preventa no es evento.
   -------------------------------------------------------------------------- */
body[data-fase="publicado"] .launch {
  background: color-mix(in srgb, var(--u-surface) 45%, var(--obsidiana));
}
body[data-fase="publicado"] .hero::before { opacity: .28; }
body[data-fase="preventa"]  .hero::before { opacity: 1; }

/* ==========================================================================
   FRANJA DE CUENTA REGRESIVA
   Aparece bajo la navegación solo mientras hay preventa abierta. Es contenido
   de campaña, no chasis: por eso lleva el color del universo activo.
   Los números tictaquean, así que van con aria-hidden y la barra entera
   declara su propósito en un aria-label. Un lector de pantalla que oiga los
   segundos cambiar cada segundo no está siendo informado, está siendo agredido.
   ========================================================================== */
.countdown-bar {
  --accent:        var(--u-accent);
  --accent-soft:   var(--u-soft);
  --bronce-solido: var(--u-solid);
  --accent-rgb:      var(--u-accent-rgb);
  --accent-soft-rgb: var(--u-soft-rgb);

  /* Pegada justo debajo de la navegación.
     --nav-h la mide campana.js y la mantiene al día al cambiar el tamaño de la
     ventana; el 74px es el respaldo si el JS no corre.
     Antes decía top:10%, y un porcentaje en un elemento sticky se resuelve
     contra la altura del contenedor —el body entero—, no contra la ventana:
     en una página larga eso son cientos de píxeles y la franja se quedaba
     flotando a media pantalla.
     z-index 95 y no 100: la navegación usa 100 y la franja va después en el
     DOM, así que con el mismo valor le pasaba por encima y la tapaba. */
  position: sticky;
  top: var(--nav-h, 74px);
  z-index: 95;

  border-bottom: 1px solid rgb(var(--accent-rgb) / .32);
  background: color-mix(in srgb, var(--u-surface) 82%, var(--obsidiana));
  backdrop-filter: blur(14px);
}

/* --- Modo compacto -------------------------------------------------------
   Al bajar, la franja se reduce a lo esencial: el título de la obra y el botón
   de reservar. Se retiran la portada, el rótulo y el reloj.

   Nota de diseño: el reloj es lo que le da urgencia a una cuenta regresiva, y
   al ocultarlo el modo compacto deja de ser un contador y pasa a ser un CTA
   permanente. Es una decisión deliberada —ocupa la mitad de alto y no compite
   con el contenido— y la cuenta completa sigue disponible arriba y en la
   sección de lanzamiento. Si quisieras recuperar la urgencia sin recuperar el
   tamaño, basta con mostrar solo los días (ver el bloque comentado abajo).

   Lo enciende campana.js según la posición de scroll (umbral de 100px). */
.countdown-bar,
.countdown-inner,
.countdown-cover,
.countdown-id span,
.countdown-id strong,
.countdown-clock,
.countdown-cta {
  transition: all .28s cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .countdown-bar, .countdown-inner, .countdown-cover, .countdown-id span,
  .countdown-id strong, .countdown-clock, .countdown-cta { transition: none; }
}

.countdown-bar.is-compact .countdown-inner { min-height: 0; padding-block: .28rem; gap: 1rem; }

/* La portada, el rótulo y el reloj salen. Se colapsan en lugar de
   display:none para que la transición tenga algo que animar. */
.countdown-bar.is-compact .countdown-cover {
  width: 0; flex-basis: 0; opacity: 0; margin: 0; border-width: 0;
}
.countdown-bar.is-compact .countdown-id span { font-size: 0; opacity: 0; margin: 0; }
.countdown-bar.is-compact .countdown-clock {
  /* max-height además de max-width: escondido a lo ancho, el reloj seguía
     imponiendo su altura natural (~50px) al renglón flex y la franja no
     bajaba de 60px por más que se apretara el resto. */
  opacity: 0; max-width: 0; max-height: 0; overflow: hidden; pointer-events: none;
}

/* El título queda, y el botón se va al extremo derecho ocupando el hueco que
   dejó el reloj. */
.countdown-bar.is-compact .countdown-id { margin-right: auto; }
.countdown-bar.is-compact .countdown-id strong { font-size: .85rem; }
.countdown-bar.is-compact .countdown-cta { margin-left: 0; padding: .4rem .9rem; font-size: .55rem; }

/* Variante «solo días»: descomenta estas tres reglas y comenta la de
   .countdown-clock de arriba para conservar la urgencia en un ancho mínimo.
   .countdown-bar.is-compact .countdown-clock { opacity: 1; max-width: none; }
   .countdown-bar.is-compact .countdown-unit:not(:first-child) { display: none; }
   .countdown-bar.is-compact .countdown-unit b { font-size: 1rem; }
*/

/* En pantallas angostas la franja normal envuelve en dos filas (el CTA ocupa
   una entera). En compacto se fuerza una sola fila: título a la izquierda,
   botón a la derecha. */
@media (max-width: 900px) {
  .countdown-bar.is-compact .countdown-inner { flex-wrap: nowrap; min-height: 42px; }
  .countdown-bar.is-compact .countdown-cta {
    order: 0; width: auto; padding: .42rem .8rem; font-size: .54rem;
  }
  .countdown-bar.is-compact .countdown-id strong { font-size: .76rem; }
}


.countdown-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 76px; padding-block: .7rem;
}
.countdown-cover {
  width: 44px; flex: 0 0 44px;
  aspect-ratio: 2/3; object-fit: cover;
  border: 1px solid rgb(var(--accent-rgb) / .35);
}
.countdown-id { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.countdown-id strong {
  font-family: var(--serif); font-size: 1rem; line-height: 1.1;
  color: var(--marfil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.countdown-id span {
  font-size: .56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .24em;
  color: var(--u-soft);
}

.countdown-clock { margin-left: auto; display: flex; align-items: flex-start; gap: 0; }
.countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 1.15rem;
  border-left: 1px solid rgba(243,239,230,.1);
}
.countdown-unit:first-child { border-left: 0; }
.countdown-unit b {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.85rem; line-height: 1;
  color: var(--marfil);
  /* Ancho tabular: los dígitos no se empujan al cambiar cada segundo. */
  font-variant-numeric: tabular-nums;
}
.countdown-unit i {
  margin-top: .4rem; font-style: normal;
  font-size: .5rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--u-soft);
}

.countdown-cta {
  flex: 0 0 auto;
  padding: .7rem 1.1rem;
  border: 1px solid var(--u-accent);
  background: var(--u-solid); color: var(--marfil);
  text-decoration: none;
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  transition: background .25s ease;
}
.countdown-cta:hover { background: var(--u-accent); }

@media (max-width: 900px) {
  .countdown-inner { flex-wrap: wrap; gap: .9rem 1.2rem; min-height: 0; }
  .countdown-clock { margin-left: auto; }
  .countdown-unit { padding: 0 .8rem; }
  .countdown-unit b { font-size: 1.5rem; }
  .countdown-cta { order: 5; width: 100%; text-align: center; }
}
@media (max-width: 560px) {
  .countdown-cover { width: 36px; flex-basis: 36px; }
  .countdown-id strong { font-size: .88rem; }
  .countdown-unit { padding: 0 .6rem; }
  .countdown-unit b { font-size: 1.28rem; }
  .countdown-unit i { font-size: .44rem; letter-spacing: .14em; }
}

/* ==========================================================================
   VOTACIÓN DE PROYECTOS EN PUERTA
   Chasis de marca: la votación no pertenece a ninguna campaña, así que va en
   bronce. Es lo contrario del lanzamiento — mira al futuro, no a la obra
   que está saliendo ahora.
   ========================================================================== */
.vote-section { background: var(--surface); }

/* --- Opciones ---------------------------------------------------------- */
/* La leyenda vive fuera del recuadro: dentro de la rejilla dejaba una franja
   del color de las líneas sobre la primera opción. */
.vote-options { border: 0; margin: 0; padding: 0; }
.vote-legend { padding: 0 0 .9rem; font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em; color: var(--bronce-claro); }
.vote-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }

.vote-option {
  position: relative; display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.4rem 1.6rem; background: var(--bg); cursor: pointer;
  transition: background .2s ease;
}
.vote-option:hover { background: #17171C; }
/* El input real se mantiene enfocable: se oculta a la vista, no al teclado. */
.vote-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.vote-mark {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: .45rem;
  border: 1px solid rgb(var(--accent-rgb) / .6);
  transform: rotate(45deg);
  transition: background .2s ease, border-color .2s ease;
}
.vote-option input:checked ~ .vote-mark { background: var(--bronce); border-color: var(--bronce-claro); }
.vote-option input:focus-visible ~ .vote-mark { outline: 2px solid var(--bronce-claro); outline-offset: 3px; }
.vote-option:has(input:checked) { background: #1A1A20; }

.vote-body { display: grid; gap: .3rem; }
.vote-num { font-family: var(--serif); font-size: .8rem; color: var(--bronce); letter-spacing: .05em; }
.vote-body strong { font-family: var(--serif); font-size: 1.28rem; font-weight: 700; color: var(--marfil); line-height: 1.15; }
.vote-body em { font-style: normal; font-size: .55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; color: var(--bronce-claro); }
.vote-teaser { color: var(--marfil-suave); font-size: .92rem; max-width: 60ch; }

/* --- Correo y consentimiento ------------------------------------------ */
.vote-gate { margin-top: 2rem; display: grid; gap: 1.1rem; max-width: 520px; }
.vote-field { display: grid; gap: .5rem; }
.vote-field > span { font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--bronce-claro); }
.vote-field input {
  padding: .85rem 1rem; background: var(--bg); color: var(--marfil);
  border: 1px solid var(--line); border-radius: 0; font-size: .95rem;
}
.vote-field input::placeholder { color: #6E675D; }
.vote-field input:focus-visible { outline: 2px solid var(--bronce-claro); outline-offset: 2px; border-color: transparent; }

.vote-consent { display: flex; align-items: flex-start; gap: .8rem;
  color: var(--marfil-suave); font-size: .88rem; cursor: pointer; }
.vote-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .18rem;
  accent-color: var(--bronce); }
.vote-gate .button { justify-self: start; }
.vote-gate .button:disabled { opacity: .5; cursor: progress; }

.vote-msg { margin: 0; min-height: 1.2em; font-size: .86rem; color: var(--bronce-claro); }
.vote-msg.is-error { color: #D69AA0; }
.vote-legal { margin: 0; font-size: .74rem; color: #8B8378; max-width: 52ch; }
.vote-legal a { color: var(--bronce-claro); }

/* --- Resultados -------------------------------------------------------- */
.vote-results { display: grid; gap: 1.6rem; }
.vote-thanks { margin: 0; font-family: var(--serif); font-size: 1.3rem; color: var(--marfil); }
.vote-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.vote-bar { display: grid; gap: .5rem; }
.vote-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.vote-bar-top strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--marfil-suave); }
.vote-bar.is-mine .vote-bar-top strong { color: var(--marfil); }
.vote-pct { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--bronce-claro); }
.vote-track { display: block; height: 6px; background: rgba(243,239,230,.08); }
.vote-fill { display: block; height: 100%; background: rgb(var(--accent-rgb) / .55);
  transition: width .6s cubic-bezier(.2,.8,.2,1); }
.vote-bar.is-mine .vote-fill { background: var(--bronce-claro); }
.vote-yours { font-size: .54rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--bronce-claro); }
.vote-total { margin: 0; font-size: .76rem; letter-spacing: .06em; color: #8B8378; }

@media (max-width: 620px) {
  .vote-option { padding: 1.15rem 1.1rem; gap: .85rem; }
  .vote-body strong { font-size: 1.1rem; }
  .vote-gate { max-width: none; }
}


/* --- Evento ya ocurrido --------------------------------------------------
   Lo pone site.js comparando la fecha de la obra con hoy. Una tarjeta de
   lanzamiento no puede seguir diciendo «Confirmado» una semana después de
   que el libro salió. */
.event-card.event-past { opacity: .86; }
.event-card.event-past .event-status {
  color: var(--muted);
  border-color: rgba(243,239,230,.18);
}
.event-card.event-past .event-date strong { color: var(--marfil-suave); }

/* ==========================================================================
   EN EL TALLER — proyectos en proceso
   --------------------------------------------------------------------------
   Chasis de marca, no superficie de campaña: esta página no pertenece a
   ningún universo, así que se queda en bronce a propósito. Si algún día un
   proyecto del taller merece su propia paleta, se le pone [data-universo] a
   la tarjeta y se añade .taller-card a la lista de «Superficie de campaña».

   Las etiquetas usan --marca-soft (bronce claro blindado, 7.75:1 sobre
   obsidiana). El bronce apagado puro da 3.9:1 y estas etiquetas son de 11px.
   ========================================================================== */
.taller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem;
}
.taller-card {
  display: flex; flex-direction: column;
  padding: 1.9rem 1.7rem 1.5rem;
  background: radial-gradient(circle at 12% 8%, rgb(var(--accent-rgb) / .05), transparent 34%),
              linear-gradient(160deg, rgba(25,24,39,.96), rgba(13,13,21,.98));
  border: 1px solid rgb(var(--accent-soft-rgb) / .16);
  border-radius: 24px 0 24px 0;
  box-shadow: inset 1px 1px rgba(255,255,255,.04), 0 22px 55px rgba(0,0,0,.32);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.taller-card:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--accent-rgb) / .34);
  box-shadow: inset 1px 1px rgb(var(--accent-rgb) / .07), 0 30px 68px rgba(0,0,0,.44);
}
.taller-card .meta { margin: 0; color: var(--marca-soft); }
.taller-card h2 {
  margin: .5rem 0 .8rem;
  font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.1;
}
/* El cuerpo (premisa + sinopsis) es lo que crece. Así el riel, la fecha y el
   voto se quedan al fondo y alineados entre tarjetas, aunque las premisas
   midan distinto y aunque a un proyecto le falte la etapa y no dibuje riel.
   Un flex:1 en la premisa sola no sirve: empujaba la sinopsis lejos del texto
   al que pertenece. */
.taller-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; }
.taller-card .muted { margin: 0 0 1.1rem; }
.taller-etapa { color: var(--marca-soft); border-color: rgb(var(--accent-soft-rgb) / .34); }

/* --- Sinopsis completa desplegable --------------------------------------
   <details> nativo. El voto solo significa algo si quien vota pudo leer de
   que va la historia, y una premisa de tres lineas no alcanza para eso. */
.taller-sinopsis { margin: 0 0 1.4rem; }
.taller-sinopsis > summary {
  display: inline-flex; align-items: center; gap: .45rem;
  width: fit-content; padding: .1rem 0;
  color: var(--marca-soft); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; list-style: none;
}
.taller-sinopsis > summary::-webkit-details-marker { display: none; }
.taller-sinopsis > summary::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .25s;
}
.taller-sinopsis[open] > summary::after { transform: rotate(180deg); }
.taller-sinopsis > summary:hover { color: var(--marfil); }
.taller-sinopsis-cuerpo {
  margin-top: 1rem; padding-left: 1rem;
  border-left: 1px solid rgb(var(--accent-rgb) / .3);
}
.taller-sinopsis-cuerpo p {
  margin: 0 0 .85rem; color: var(--marfil-suave);
  font-size: .88rem; line-height: 1.65;
}
.taller-sinopsis-cuerpo p:last-child { margin-bottom: 0; }

/* --- Riel de etapas ------------------------------------------------------
   Seis tramos discretos, no una barra de porcentaje. Un porcentaje finge una
   precisión que no existe; un tramo con nombre no puede estar mal. */
.taller-riel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 5px; height: 4px;
}
.taller-riel i { background: rgba(243,239,230,.09); }
.taller-riel i.is-hecho { background: rgb(var(--accent-rgb) / .6); }
.taller-riel i.is-actual {
  background: var(--marca-soft);
  box-shadow: 0 0 10px rgb(var(--accent-soft-rgb) / .45);
}
.taller-nota {
  margin: .8rem 0 0;
  color: var(--marca-soft); font-size: .72rem; letter-spacing: .02em;
}
.taller-nota + .taller-fecha { margin-top: .35rem; }
.taller-fecha {
  margin: .85rem 0 0;
  color: var(--muted); font-size: .58rem;
  text-transform: uppercase; letter-spacing: .14em;
}

/* --- Leyenda de las seis etapas ------------------------------------------ */
.taller-leyenda {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem 1.6rem;
  margin: 2.6rem 0 0; padding: 1.9rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none; counter-reset: etapa;
}
.taller-leyenda li { counter-increment: etapa; display: grid; gap: .2rem; }
.taller-leyenda b {
  color: var(--marfil); font-size: .78rem;
  letter-spacing: .04em;
}
.taller-leyenda b::before {
  content: counter(etapa, decimal-leading-zero) " · ";
  color: var(--marca-soft); font-weight: 400;
}
.taller-leyenda span { color: var(--muted); font-size: .74rem; line-height: 1.5; }

/* --- Bloque de consulta / newsletter ------------------------------------- */
.taller-consulta {
  position: relative;
  margin-top: 3.2rem; padding: 2.6rem 2.2rem;
  border: 1px solid rgb(var(--accent-rgb) / .24);
  border-radius: 28px 0 28px 0;
  background: linear-gradient(150deg, rgb(var(--structural-rgb) / .3), rgba(13,13,21,.95));
}
.taller-consulta::before {
  content: ""; position: absolute; left: 2.2rem; top: -1px;
  width: 110px; height: 1px;
  background: linear-gradient(90deg, var(--marca-soft), transparent);
}
.taller-consulta h2 {
  margin: .5rem 0 .9rem;
  font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.05;
}
.taller-consulta .muted { max-width: 58ch; }
.taller-consulta .actions { margin-top: 1.8rem; }
/* En pantalla ancha la copia y los botones se reparten el panel: si todo se
   alinea a la izquierda, la mitad derecha queda vacia y el bloque se lee
   como un error de maquetacion. */
@media (min-width: 900px) {
  .taller-consulta {
    display: grid; align-items: center; gap: 3rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, .8fr);
  }
  .taller-consulta .actions {
    margin-top: 0; flex-direction: column; align-items: stretch;
  }
  .taller-consulta .actions .button { justify-content: center; }
}
.taller-grid .empty-note { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .taller-leyenda { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .taller-leyenda { grid-template-columns: 1fr; }
  .taller-consulta { padding: 2rem 1.4rem; }
  .taller-consulta::before { left: 1.4rem; }
  .taller-card { padding: 1.6rem 1.4rem 1.3rem; }
}

/* Fondo del encabezado del taller. Es decorativo (26% de opacidad, con
   máscara): cámbialo por la imagen que quieras sin tocar nada más. */
body:has(a[aria-current="page"][href="taller.html"]) .page-hero::before {
  background-image: url("../images/wallpapers/previews/symphonia-draconis-3.jpg");
}

/* --- Corrección de contraste en las etiquetas de estado -------------------
   .event-status venía en var(--cyan) = bronce apagado: 3.9:1 sobre la
   tarjeta, y el texto es de 9-11px. --accent-soft da 7.75:1 fuera de campaña
   y >=8:1 dentro (los --u-soft están verificados). Aplica a eventos,
   experiencias y taller. Las variantes .watched, .pending y .audio-status
   fijan su propio color y son más específicas: no cambian. */
.event-status { color: var(--accent-soft); }

/* ==========================================================================
   VOTOS DEL TALLER
   --------------------------------------------------------------------------
   El botón es el elemento con más peso de la tarjeta después del título: si
   no se ve como algo en lo que se puede picar, nadie vota. Estado votado =
   relleno bronce sólido (marfil encima da 4.8:1), no votado = contorno.
   ========================================================================== */
.voto {
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid rgb(var(--accent-rgb) / .16);
}
.voto-boton {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .8rem 1rem;
  border: 1px solid rgb(var(--accent-rgb) / .5);
  background: transparent; color: var(--marca-soft);
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.voto-boton:hover:not(:disabled) {
  background: rgb(var(--accent-rgb) / .12);
  border-color: var(--bronce); color: var(--marfil);
}
.voto-boton:disabled { opacity: .55; cursor: progress; }

/* La marca es un triángulo: apunta hacia arriba, que es lo que hace el voto. */
.voto-marca {
  flex: 0 0 auto; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
  transition: transform .25s;
}
.voto-boton:hover .voto-marca { transform: translateY(-2px); }

.voto.es-mio .voto-boton {
  background: var(--bronce-solido); border-color: var(--bronce-solido);
  color: var(--marfil);
}
.voto.es-mio .voto-boton:hover { background: var(--bronce-hover); border-color: var(--bronce-hover); }

.voto-resultado { margin-top: .9rem; }
.voto-pista { height: 5px; background: rgba(243,239,230,.08); }
.voto-relleno {
  display: block; height: 100%; width: 0;
  background: rgb(var(--accent-rgb) / .55);
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.voto.es-mio .voto-relleno { background: var(--marca-soft); }
.voto-cifra {
  margin: .55rem 0 0;
  color: var(--marfil-suave); font-size: .68rem;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}

/* --- Pie de la rejilla: error y "ver resultados" ------------------------- */
.voto-pie { display: grid; justify-items: start; gap: .8rem; margin-top: 1.4rem; }
.voto-nota { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.voto-error { color: #E0A2A8; }
.voto-ver {
  padding: 0; border: 0; background: none;
  color: var(--marca-soft); font-size: .78rem;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.voto-ver:hover { color: var(--marfil); }

/* --- Bloque de agradecimiento + suscripción opcional -------------------- */
.voto-gracias {
  margin-top: 2rem; padding: 1.9rem 1.8rem;
  border: 1px solid rgb(var(--accent-soft-rgb) / .22);
  border-radius: 22px 0 22px 0;
  background: linear-gradient(150deg, rgb(var(--structural-rgb) / .34), rgba(13,13,21,.94));
}
.voto-gracias h3 {
  margin: .35rem 0 .6rem;
  font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.15;
}
.voto-gracias h3 span { color: var(--marca-soft); }
.voto-forma { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.voto-etiqueta { margin: 0 0 .9rem; color: var(--marfil-suave); font-size: .86rem; }
.voto-etiqueta strong { color: var(--marca-soft); }
.voto-campo { display: flex; flex-wrap: wrap; gap: .6rem; }
.voto-campo input {
  flex: 1 1 240px; min-width: 0; padding: .8rem .9rem;
  border: 1px solid var(--line); background: rgba(8,8,13,.75);
  color: var(--marfil); font-size: .9rem;
}
.voto-campo input::placeholder { color: #8B8378; }
.voto-campo input:focus-visible { border-color: var(--bronce); outline-offset: 2px; }
.voto-campo .button { flex: 0 0 auto; }
.voto-aviso { margin: .7rem 0 0; color: #E0A2A8; font-size: .78rem; }
.voto-forma .voto-nota { margin-top: .9rem; }

/* Etiqueta para lectores de pantalla: fuera de la vista, no display:none,
   porque display:none la esconde también del lector. */
.voto-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 620px) {
  .voto-gracias { padding: 1.5rem 1.3rem; }
  .voto-campo .button { width: 100%; }
}