@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-alternates-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/montserrat-alternates-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/montserrat-alternates-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/raleway-italic-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/raleway-normal-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* =========================================================
     LÍNEA GRÁFICA: BrandBook Onofre (la misma de oscaronofre.com)
     Montserrat Alternates + Raleway · rosa #FC356A · azul #4312EA
     verde #A0FA82 · negro azulado #132229 · blanco humo #F2F2F2 · crema
     Regla del BrandBook: en fondo claro el acento va en rosa o azul;
     en fondo oscuro, en verde. El degradado rosa→azul solo en el aro
     y en los botones principales.
  ========================================================= */
  :root{
    --crema:#EFEAE2;
    --crema-2:#F7F3EC;
    --blanco:#FFFFFF;
    --humo:#F2F2F2;
    --tinta:#132229;
    --tinta-70:rgba(19,34,41,.74);
    --tinta-50:rgba(19,34,41,.64);
    --tinta-30:rgba(19,34,41,.32);
    --linea:rgba(19,34,41,.14);
    --linea-2:rgba(19,34,41,.08);
    --rosa:#FC356A;
    --azul:#4312EA;
    --verde:#A0FA82;
    --grad:linear-gradient(100deg,#FC356A 0%,#4312EA 100%);
    --grad3:linear-gradient(90deg,#FC356A 0%,#4312EA 55%,#A0FA82 100%);
    --display:"Montserrat Alternates",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
    --texto:"Raleway",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    --maxw:1120px;
    --r:16px;
    --sombra:0 1px 1px rgba(19,34,41,.05),0 6px 18px rgba(19,34,41,.07);
    --sombra-2:0 2px 4px rgba(19,34,41,.06),0 14px 36px rgba(19,34,41,.13),0 30px 60px rgba(19,34,41,.07);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  /* --fijo = alto real de lo que se queda pegado arriba (encabezado + buscador); lo mide el JavaScript.
     Así cada salto a una sección cae 16 px debajo del buscador, en cualquier pantalla.
     scrollbar-gutter: la página no brinca de lado al abrir el lector o una ventana en computadora. */
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--fijo,132px) + 16px);scrollbar-gutter:stable}
  a,button,summary{-webkit-tap-highlight-color:rgba(67,18,234,.14)}
  body{
    min-height:100vh;
    font-family:var(--texto);
    font-variant-numeric:lining-nums;
    font-feature-settings:"lnum" 1;
    color:var(--tinta);
    background:
      radial-gradient(60% 40% at 88% -4%, rgba(67,18,234,.06), transparent 62%),
      radial-gradient(50% 36% at 8% 6%, rgba(252,53,106,.05), transparent 60%),
      var(--crema);
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }
  body.locked{overflow:hidden}
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
  img{max-width:100%;display:block}
  :focus-visible{outline:2px solid var(--azul);outline-offset:3px}
  .suscribe :focus-visible,.eco :focus-visible,.lector-cta :focus-visible{outline-color:var(--verde)}
  .wrap{width:min(var(--maxw),calc(100% - 48px));margin:0 auto}
  .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .defs{position:absolute;width:0;height:0;overflow:hidden}
  .aro{display:block}

  .skip-link{position:absolute;left:-999px;top:10px;background:var(--tinta);color:var(--verde);
    padding:10px 14px;border-radius:10px;z-index:999;font:700 13px var(--display)}
  .skip-link:focus{left:12px}

  /* ===== Encabezado con el logotipo del BrandBook ===== */
  .bar{position:sticky;top:0;z-index:60;background:rgba(239,234,226,.86);
    backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
  .bar.is-scrolled{border-color:var(--linea-2);box-shadow:0 6px 18px rgba(19,34,41,.05)}
  .bar-in{height:60px;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .logo{display:flex;align-items:center;gap:2px;color:var(--tinta)}
  .logo .aro{width:27px;height:27px;flex:0 0 auto}
  .logo-txt{display:flex;flex-direction:column;line-height:1}
  .logo-txt b{font:800 21px/1 var(--display);letter-spacing:-.03em}
  .logo-txt .sub{font:700 8.5px/1 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--tinta-50);margin-top:4px;margin-left:1px}
  .bar-actions{display:flex;align-items:center;gap:12px}
  .nav-text{font:600 13.5px var(--display);color:var(--tinta-70);transition:color .18s ease}
  .nav-text:hover{color:var(--azul)}
  .nav-buscar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blanco);
    box-shadow:var(--sombra);color:var(--tinta);transition:background .18s ease,color .18s ease}
  .nav-buscar svg{width:18px;height:18px}
  .nav-buscar:hover{background:var(--tinta);color:var(--verde)}
  .nav-eco{display:inline-flex;align-items:center;font:700 13px var(--display);color:var(--tinta);border:1.5px solid var(--tinta);
    border-radius:999px;padding:8px 16px;transition:background .18s ease,color .18s ease}
  .nav-eco:hover{background:var(--tinta);color:var(--verde)}

  /* ===== Menú: botón en el encabezado (ya está fijo; no se agrega nada flotante) ===== */
  .nav-menu{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px 0 13px;
    border-radius:999px;background:var(--tinta);color:var(--verde);font:700 13px var(--display);
    transition:background .18s ease,color .18s ease}
  .nav-menu:hover{background:var(--azul);color:var(--blanco)}
  .hamb{position:relative;display:block;width:18px;height:12px;flex:0 0 auto}
  .hamb i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor}
  .hamb i:nth-child(1){top:0}
  .hamb i:nth-child(2){top:5px;right:4px}
  .hamb i:nth-child(3){top:10px}

  /* ===== Menú: el panel ===== */
  .menu-ov{align-items:flex-start;justify-content:flex-end;padding:12px}
  .menu{width:min(410px,100%);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:12px 18px 20px}
  .menu-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 12px;
    border-bottom:1px solid var(--linea-2)}
  .menu .close{position:static}
  .menu-k{margin:16px 0 6px 2px;font:800 11px var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--azul)}
  .menu-lista{list-style:none;display:flex;flex-direction:column;gap:2px}
  .menu-ir{width:100%;min-height:56px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;
    grid-template-areas:"i t f" "i s f";column-gap:13px;row-gap:1px;align-items:center;text-align:left;
    padding:8px 10px;border-radius:14px;color:var(--tinta);transition:background .15s ease}
  .menu-ir.solo{grid-template-areas:"i t f"}
  .menu-ir:hover{background:var(--blanco)}
  .menu-ir[aria-current]{background:var(--blanco);box-shadow:inset 3px 0 0 var(--rosa)}
  .menu-ir::after{content:"→";grid-area:f;font:700 15px var(--texto);color:var(--tinta-30)}
  .mi-ico{grid-area:i;width:38px;height:38px;border-radius:12px;background:var(--tinta);color:var(--verde);
    display:grid;place-items:center;font:800 13px var(--texto)}
  .mi-ico .aro{width:24px;height:24px}
  .mi-ico .punto{width:14px;height:14px;border-radius:50%;background:var(--verde)}
  .mi-ico .cuarto{width:18px;height:18px;background:radial-gradient(circle at 0 100%,var(--verde) 0 70%,transparent 71%)}
  .mi-ico .rueda{width:18px;height:18px;border-radius:50%;
    background:conic-gradient(var(--rosa) 0 33%,var(--azul) 0 66%,var(--verde) 0)}
  .mi-t{grid-area:t;align-self:end;font:700 16px/1.25 var(--texto)}
  .menu-ir.solo .mi-t{align-self:center}
  .mi-s{grid-area:s;align-self:start;font:500 13px/1.3 var(--texto);color:var(--tinta-50)}
  .menu-cta{margin-top:18px;padding:20px 18px;border-radius:18px;background:var(--tinta);text-align:center}
  .menu-cta-t{font:800 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--blanco);text-wrap:balance}
  .menu-cta .btn-sus{width:100%;margin-top:14px}
  .menu-cta-links{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:10px}
  .menu-cta-links a{display:inline-flex;align-items:center;min-height:44px;font:700 14px var(--display);color:var(--verde);
    text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:rgba(160,250,130,.45);text-underline-offset:5px}
  .menu-cta-links a:hover{text-decoration-color:var(--verde)}
  .menu-cta :focus-visible{outline-color:var(--verde)}
  /* computadora (ratón): renglones más compactos para que todo el menú quepa en una pantalla de 800 px */
  @media (min-width:681px) and (pointer:fine){
    .menu{padding:10px 18px 14px}
    .menu-bar{padding-bottom:8px}
    .menu-ir{min-height:50px;padding-top:6px;padding-bottom:6px}
    .menu-k{margin-top:10px}
    .menu-cta{margin-top:14px;padding:16px}
    .menu-cta-links a{min-height:38px}
  }

  /* ===== Portada ===== */
  .hero{position:relative;isolation:isolate;padding:68px 0 30px;text-align:center;max-width:720px;margin:0 auto}
  .hero > *{opacity:0;animation:heroRise .72s cubic-bezier(.2,.7,.3,1) forwards}
  .hero > .patron{animation-delay:.02s}
  .hero > .kicker{animation-delay:.05s}
  .hero > h1{animation-delay:.15s}
  .hero > .hero-sub{animation-delay:.30s}
  .hero > .hero-lib{animation-delay:.42s}
  .hero > .library-note{animation-delay:.54s}
  .hero > .hero-note{animation-delay:.62s}
  .hero > .entry-row{animation-delay:.74s}
  @keyframes heroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* patrón corporativo del BrandBook: cuarto de círculo, círculo, equis y franjas */
  .patron{position:absolute;inset:0;z-index:-1;pointer-events:none}
  .patron i{position:absolute;display:block}
  .p-cuarto{left:-4px;top:30px;width:52px;height:52px;border-radius:0 0 0 0;
    background:radial-gradient(circle at 0 100%,var(--verde) 0 70%,transparent 71%)}
  .p-circulo{right:22px;top:26px;width:22px;height:22px;border-radius:50%;background:var(--azul)}
  .p-equis{left:40px;bottom:120px;width:22px;height:22px;
    background:linear-gradient(45deg,transparent 39%,var(--rosa) 39% 61%,transparent 61%),
               linear-gradient(-45deg,transparent 39%,var(--rosa) 39% 61%,transparent 61%)}
  .p-franjas{right:-2px;bottom:150px;width:34px;height:34px;border-radius:6px;
    background:repeating-linear-gradient(135deg,var(--tinta) 0 3px,transparent 3px 8px)}

  .kicker{display:inline-flex;align-items:center;gap:10px;font:700 11px var(--display);letter-spacing:.3em;
    text-transform:uppercase;color:var(--azul)}
  .kicker::before,.kicker::after{content:"";width:18px;height:2px;border-radius:2px;background:var(--rosa)}
  .hero h1{margin:18px 0 0;line-height:1;font-family:var(--display);color:var(--tinta)}
  .hero h1 .l1{display:block;font-weight:600;font-size:clamp(20px,3vw,28px);letter-spacing:.02em;color:var(--tinta-70)}
  .hero h1 .l2{display:inline-block;margin-top:4px;font-weight:800;
    font-size:clamp(56px,10vw,96px);letter-spacing:-.04em}
  .o-aro{display:inline-block;width:.72em;height:.72em;margin-right:.01em;vertical-align:-.035em}
  .o-aro .aro{width:100%;height:100%}
  .hero h1::after{content:"";display:block;width:56px;height:3px;margin:20px auto 0;border-radius:3px;background:var(--grad)}
  .hero-sub{margin:24px auto 0;max-width:590px;font:500 italic clamp(19px,2.4vw,23px)/1.42 var(--texto);color:var(--tinta)}
  .hero-lib{margin:14px auto 0;max-width:540px;font-size:15.5px;line-height:1.65;color:var(--tinta-70)}

  .library-note{position:relative;overflow:hidden;margin:30px auto 0;max-width:590px;border-radius:var(--r);
    background:var(--blanco);box-shadow:var(--sombra-2);padding:20px 26px 20px 20px;display:flex;gap:16px;
    align-items:center;text-align:left}
  .library-note::before{content:"";position:absolute;right:0;top:0;width:46px;height:46px;
    background:radial-gradient(circle at 100% 0,var(--verde) 0 70%,transparent 71%)}
  .library-note strong{position:relative;z-index:1;flex:0 0 auto;width:48px;height:48px;border-radius:14px;
    background:var(--tinta);display:grid;place-items:center;font:800 15px var(--display);color:var(--verde)}
  .library-note p{position:relative;z-index:1;color:var(--tinta-70);font-size:15px;line-height:1.55;padding-right:18px}
  .library-note em{color:var(--tinta);font-style:italic;font-weight:600}
  .hero-note{margin:18px auto 0;max-width:590px;font:600 12.5px/1.65 var(--display);color:var(--tinta-70);
    letter-spacing:.05em;text-transform:uppercase}
  .hero-note b{color:var(--tinta);font-weight:800}
  .hero-note .mark{color:var(--azul);font-weight:800}

  /* ===== Las 3 puertas ===== */
  .entry-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:30px auto 0}
  .entry-btn,.entry-spin{display:inline-flex;align-items:center;gap:11px;min-height:48px;padding:7px 20px 7px 8px;
    border-radius:999px;background:var(--blanco);box-shadow:var(--sombra);font:700 14px var(--display);color:var(--tinta);
    transition:transform .18s ease,box-shadow .18s ease}
  .entry-btn:hover,.entry-spin:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
  .entry-btn .ico{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:var(--tinta);color:var(--verde);font:800 14px var(--display)}
  .entry-btn .ico-az{font-size:10.5px;letter-spacing:-.02em}
  .entry-spin{border:1.5px solid var(--tinta)}
  .entry-spin .wheel{width:34px;height:34px;border-radius:50%;flex:0 0 auto;position:relative;
    background:conic-gradient(var(--rosa) 0 33.3%,var(--azul) 0 66.6%,var(--verde) 0 100%);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 2px 6px rgba(19,34,41,.18)}
  .entry-spin .wheel::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;
    background:var(--blanco);box-shadow:0 0 0 2px var(--tinta)}
  .entry-spin:hover .wheel,.entry-spin.spinning .wheel{animation:wheelSpin 1s linear infinite}
  @keyframes wheelSpin{to{transform:rotate(360deg)}}

  /* ===== Buscador fijo ===== */
  .antes-buscador{height:0}
  .toolbar{position:sticky;top:60px;z-index:40;margin:34px 0 0;background:rgba(239,234,226,.92);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea-2)}
  .toolbar-in{padding:12px 0;display:flex;flex-direction:column;gap:8px}
  .search-box{display:flex;align-items:center;gap:10px;border:1.5px solid var(--linea);border-radius:999px;
    background:var(--blanco);padding:0 7px 0 18px;box-shadow:var(--sombra);transition:border-color .2s ease,box-shadow .2s ease}
  .search-box:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px rgba(67,18,234,.12)}
  .search-box svg{flex:0 0 auto;color:var(--tinta-50)}
  .search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--tinta);
    font-family:var(--texto);font-size:16px;font-weight:500;padding:13px 0}
  .search-box input::placeholder{color:var(--tinta-50);font-weight:500}
  .search-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
  .search-clear{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:none;place-items:center;
    font-size:18px;color:var(--tinta);background:var(--humo)}
  .search-clear.show{display:grid}
  .search-clear:hover{background:var(--tinta);color:var(--verde)}
  .search-hint{font:500 13.5px var(--texto);color:var(--tinta-70);line-height:1.4;padding-left:18px}
  .search-hint b{color:var(--tinta);font-weight:700}
  .search-hint a{font:700 13px var(--display);color:var(--azul)}

  /* ===== Cuenta y destacados ===== */
  .shelf-head{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
    margin:30px 0 30px;padding:14px 18px;border-radius:14px;background:var(--blanco);box-shadow:var(--sombra)}
  .shelf-head .count{display:inline-flex;align-items:center;gap:10px;font:500 14px var(--texto);color:var(--tinta-70)}
  .count .dot{width:8px;height:8px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 5px rgba(252,53,106,.14)}
  .count b{font:800 20px var(--display);color:var(--tinta)}
  .shelf-head .cadence{font:500 italic 15px var(--texto);color:var(--tinta-70)}
  .jump{font:700 13px var(--display);color:var(--azul)}

  .destacados-head{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin:0 0 22px}
  .destacados-head h2{font:800 24px/1.1 var(--display);letter-spacing:-.025em;color:var(--tinta)}
  .filters{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;min-width:0;max-width:100%}
  .filters::-webkit-scrollbar{display:none}
  .chip{font:600 13px var(--display);color:var(--tinta-70);white-space:nowrap;padding:8px 14px;border-radius:999px;
    border:1.5px solid var(--linea);transition:color .18s ease,background .18s ease,border-color .18s ease}
  .chip:hover{color:var(--tinta);border-color:var(--tinta-30)}
  .chip[aria-pressed="true"]{color:var(--verde);background:var(--tinta);border-color:var(--tinta)}

  .index{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:30px 24px;margin-bottom:10px}
  .tile{position:relative;display:flex;flex-direction:column;gap:12px}
  .tile.hide{display:none}
  .tile-open{position:static;text-align:left;display:flex;flex-direction:column;gap:12px;width:100%}
  .tile-open::after{content:"";position:absolute;inset:0;z-index:1}
  .cover{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--crema-2);
    box-shadow:var(--sombra-2);transition:transform .25s ease,box-shadow .25s ease}
  .cover img{width:100%;height:100%;object-fit:cover}
  .cover::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
    box-shadow:inset 4px 0 0 rgba(0,0,0,.10),inset 0 0 0 1px rgba(19,34,41,.06)}
  .cover-ph{display:none;position:absolute;inset:0;padding:16px;flex-direction:column;justify-content:flex-end;
    background:var(--tinta);color:var(--blanco)}
  .cover-ph span{font:700 16px/1.2 var(--display)}
  .cover-ph small{font:700 10px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin-bottom:8px}
  .cover.noimg img{display:none}
  .cover.noimg .cover-ph{display:flex}
  .tile:hover .cover,.tile:focus-within .cover{transform:translateY(-5px) rotate(-.6deg);
    box-shadow:0 4px 8px rgba(19,34,41,.08),0 24px 44px rgba(19,34,41,.18)}
  .tile-meta{display:flex;flex-direction:column;gap:4px;padding-right:2px}
  .tile-title{font:700 14.5px/1.25 var(--display);color:var(--tinta);display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;transition:color .18s ease}
  .tile:hover .tile-title{color:var(--azul)}
  .tile-author{font:500 12.5px var(--texto);color:var(--tinta-50)}
  .tile-share{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 2px 8px rgba(19,34,41,.2);
    opacity:0;transform:scale(.85);transition:opacity .18s ease,transform .18s ease,background .18s ease}
  .tile-share svg{width:15px;height:15px;color:var(--tinta)}
  .tile:hover .tile-share,.tile:focus-within .tile-share,.tile-share:focus-visible{opacity:1;transform:scale(1)}
  .tile-share:hover{background:var(--blanco)}
  @media (hover:none){.tile-share{opacity:1;transform:none}}

  .empty-shelf{display:none;grid-column:1 / -1;text-align:center;padding:40px 18px;border-radius:var(--r);
    background:var(--blanco);box-shadow:var(--sombra)}
  .empty-shelf.show{display:block}
  .empty-shelf strong{display:block;font:800 22px var(--display);color:var(--tinta);margin-bottom:8px}
  .empty-shelf span{font-size:15px;color:var(--tinta-70)}
  .empty-shelf .reset-link{margin-top:18px;font:700 13px var(--display);color:var(--azul);border-bottom:1.5px solid currentColor;padding-bottom:2px}
  .empty-shelf .empty-pick{display:inline-flex;align-items:center;gap:14px;margin:20px 0 4px;text-align:left;
    border-radius:16px;background:var(--crema-2);padding:12px 18px 12px 12px;box-shadow:var(--sombra);
    transition:transform .18s ease}
  .empty-shelf .empty-pick:hover{transform:translateY(-3px)}
  .empty-pick .ep-cover{position:relative;width:50px;height:75px;border-radius:7px;overflow:hidden;flex:0 0 auto;
    background:var(--tinta);box-shadow:0 5px 14px rgba(19,34,41,.2)}
  .empty-pick .ep-cover img{width:100%;height:100%;object-fit:cover}
  .empty-pick .ep-meta{display:flex;flex-direction:column;gap:3px;max-width:230px}
  .empty-pick .ep-kick{font:700 10px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
  .empty-pick .ep-title{font:700 15px/1.2 var(--display);color:var(--tinta)}
  .empty-pick .ep-author{font-size:12px;color:var(--tinta-50)}
  .empty-pick .ep-go{margin-left:6px;color:var(--rosa);font-size:18px}

  /* ===== Ecosistema (fondo oscuro: acento verde) ===== */
  .eco{position:relative;overflow:hidden;isolation:isolate;margin:40px 0 0;border-radius:24px;background:var(--tinta);
    color:var(--humo);padding:36px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;
    flex-wrap:wrap;box-shadow:var(--sombra-2)}
  .eco::before{content:"";position:absolute;z-index:-1;right:0;top:0;width:92px;height:92px;
    background:radial-gradient(circle at 100% 0,var(--verde) 0 70%,transparent 71%);opacity:.95}
  .eco::after{content:"";position:absolute;z-index:-1;right:110px;bottom:-26px;width:64px;height:64px;border-radius:50%;
    background:var(--azul);opacity:.9}
  .eco-text h2{font:800 clamp(22px,3vw,30px)/1.15 var(--display);letter-spacing:-.02em;color:var(--blanco)}
  .eco-text p{margin-top:10px;font-size:15.5px;color:rgba(242,242,242,.8);max-width:500px;line-height:1.6}
  .eco-text .eco-mentor{margin-top:12px}
  .eco-text .eco-mentor a{font-weight:700;color:var(--verde)}
  .eco-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font:700 14px var(--display);color:var(--blanco);
    background:var(--grad);border-radius:999px;padding:15px 26px;box-shadow:0 12px 28px rgba(67,18,234,.38);
    text-shadow:0 1px 0 rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease}
  .eco-link:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(67,18,234,.45)}

  /* ===== Suscríbete + contador (uno nuevo cada sábado desde 2024, meta 1,000) =====
     Fondo oscuro: el acento va en verde (regla del BrandBook); el degradado solo en el botón principal. */
  .suscribe{position:relative;overflow:hidden;isolation:isolate;margin:30px 0 0;border-radius:24px;background:var(--tinta);
    color:var(--humo);padding:34px 34px 36px;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
    gap:26px 44px;align-items:center;box-shadow:var(--sombra-2)}
  .suscribe::before{content:"";position:absolute;z-index:-1;left:18px;top:16px;width:18px;height:18px;
    background:linear-gradient(45deg,transparent 39%,var(--rosa) 39% 61%,transparent 61%),
               linear-gradient(-45deg,transparent 39%,var(--rosa) 39% 61%,transparent 61%)}
  .suscribe::after{content:"";position:absolute;z-index:-1;right:-8px;bottom:-8px;width:96px;height:96px;border-radius:12px;
    background:repeating-linear-gradient(135deg,rgba(160,250,130,.42) 0 3px,transparent 3px 9px)}
  .cont-k{font:800 11px var(--texto);letter-spacing:.22em;text-transform:uppercase;color:rgba(242,242,242,.74)}
  .cont-cifra{margin-top:4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .cont-num{position:relative;font:800 clamp(60px,9vw,86px)/1 var(--texto);letter-spacing:-.035em;color:var(--verde)}
  .cont-num.contando{color:transparent}
  .cont-num.contando::after{content:attr(data-n);position:absolute;left:0;top:0;color:var(--verde)}
  .cont-de{font:700 18px var(--texto);color:rgba(242,242,242,.82)}
  .cont-barra{display:block;margin-top:16px;height:10px;border-radius:999px;background:rgba(242,242,242,.14);overflow:hidden}
  .cont-barra span{display:block;height:100%;min-width:10px;border-radius:999px;background:var(--verde);transform-origin:left center}
  .contador.anima .cont-barra span{transform:scaleX(0)}
  .contador.anima.ver .cont-barra span{transform:scaleX(1);transition:transform 1.5s cubic-bezier(.2,.7,.3,1)}
  .cont-meta{margin-top:10px;font:600 14px var(--texto);color:rgba(242,242,242,.82)}
  .cont-meta b{font-weight:800;color:var(--humo)}
  .suscribe-k{font:800 11px var(--texto);letter-spacing:.24em;text-transform:uppercase;color:var(--verde)}
  .suscribe h2{margin-top:8px;font:800 clamp(24px,3.4vw,34px)/1.12 var(--display);letter-spacing:-.025em;color:var(--blanco);
    text-wrap:balance}
  .suscribe-acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
  .btn-sus{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:15px 24px;
    background:var(--grad);color:var(--blanco);font:700 14.5px var(--display);box-shadow:0 12px 28px rgba(67,18,234,.42);
    text-shadow:0 1px 0 rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease}
  .btn-sus:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(67,18,234,.5)}
  .btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 20px;
    border:1.5px solid rgba(160,250,130,.7);color:var(--verde);font:700 13.5px var(--display);
    transition:background .18s ease,color .18s ease}
  .btn-sec:hover{background:var(--verde);color:var(--tinta)}

  /* al final de cada resumen, dentro de la pantalla de lectura */
  .lector-cta{max-width:660px;margin:34px auto 0;padding:24px 22px;border-radius:18px;background:var(--tinta);text-align:center}
  .lector-cta-t{font:800 19px/1.3 var(--display);letter-spacing:-.015em;color:var(--blanco);text-wrap:balance}
  .lector-cta-acc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 20px;margin-top:16px}
  .lector-cta-link{font:700 13.5px var(--display);color:var(--verde)}

  /* ===== Títulos de sección ===== */
  .indice-kicker{display:inline-flex;align-items:center;gap:10px;font:700 11px var(--display);letter-spacing:.28em;
    text-transform:uppercase;color:var(--azul);margin-bottom:12px}
  .indice-kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--rosa)}
  .indice-head h2,.faq h2,.quien h2{font:800 clamp(28px,4.4vw,40px)/1.08 var(--display);letter-spacing:-.03em;color:var(--tinta)}

  /* ===== Preguntas frecuentes ===== */
  .faq{margin:72px 0 0;max-width:820px}
  .faq h2{margin-bottom:12px}
  .faq-item{border-bottom:1px solid var(--linea)}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 0}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:50%;
    display:grid;place-items:center;background:var(--blanco);box-shadow:var(--sombra);font:600 19px/1 var(--display);
    color:var(--tinta);transition:transform .2s ease,background .2s ease,color .2s ease}
  .faq-item[open] summary::after{transform:rotate(45deg);background:var(--tinta);color:var(--verde)}
  .faq-item h3{font:700 16.5px/1.35 var(--display);color:var(--tinta)}
  .faq-item summary:hover h3{color:var(--azul)}
  .faq-item p{padding:0 46px 20px 0;font-size:16px;line-height:1.65;color:var(--tinta-70);overflow-wrap:anywhere}
  .faq-fecha{margin-top:14px;font-size:12.5px;color:var(--tinta-50)}

  /* ===== Índice por autor ===== */
  .indice{margin:80px 0 0}
  .indice-intro{margin-top:12px;max-width:640px;font-size:16.5px;line-height:1.6;color:var(--tinta-70)}
  .indice-intro b{color:var(--tinta);font-weight:700}
  .az{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 6px}
  .az a{min-width:42px;height:42px;padding:0 8px;display:inline-grid;place-items:center;border-radius:12px;
    background:var(--blanco);box-shadow:var(--sombra);font:800 14.5px var(--display);color:var(--tinta);
    transition:transform .15s ease,background .15s ease,color .15s ease}
  .az a:hover{background:var(--tinta);color:var(--verde);transform:translateY(-2px)}
  .az a.vacia{opacity:.3;pointer-events:none}
  .indice-vacio{margin-top:26px;font:500 italic 19px var(--texto);color:var(--tinta-70)}
  .letra{margin-top:42px}
  /* rendimiento: el navegador solo dibuja las letras que están en pantalla (antes dibujaba las 20 al cargar
     y en cada cambio de fuente). El alto estimado sale de cuántos libros y autores tiene cada letra. */
  .letra{content-visibility:auto;contain-intrinsic-size:auto calc(60px + var(--n,6) * 98px + var(--a,5) * 52px)}
  .letra-h{display:flex;align-items:center;gap:16px;font:800 48px/1 var(--display);color:var(--rosa);margin-bottom:4px}
  .letra-h::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--linea)}
  .autor{padding:16px 0 8px}
  .autor h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:700 18px/1.25 var(--display);
    letter-spacing:-.01em;color:var(--tinta)}
  .autor h3 small{font:700 11px var(--display);letter-spacing:.03em;color:var(--tinta-70);background:var(--blanco);
    border-radius:999px;padding:3px 10px;box-shadow:var(--sombra)}

  .libro{margin:10px 0 0;border-radius:14px;background:var(--blanco);box-shadow:var(--sombra);
    transition:box-shadow .2s ease,transform .2s ease}
  .libro:hover{box-shadow:var(--sombra-2);transform:translateY(-1px)}
  .libro summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"cv t leer" "cv m leer";column-gap:14px;row-gap:3px;align-items:center;padding:11px 12px 11px 11px;border-radius:14px}
  .libro summary::-webkit-details-marker{display:none}
  .libro summary .cv{grid-area:cv}
  .libro-t{grid-area:t;align-self:end;font:700 15px/1.3 var(--display);color:var(--tinta);transition:color .18s ease}
  .libro-m{grid-area:m;align-self:start;font:500 12.5px var(--texto);color:var(--tinta-50)}
  .libro-au{font-weight:700;color:var(--tinta-70)}
  .libro-leer{grid-area:leer;font:700 12px var(--display);color:var(--tinta);border:1.5px solid var(--linea);
    border-radius:999px;padding:7px 13px;transition:background .18s ease,color .18s ease,border-color .18s ease}
  .libro summary:hover .libro-t{color:var(--azul)}
  .libro summary:hover .libro-leer{background:var(--tinta);border-color:var(--tinta);color:var(--verde)}
  .libro-c{padding:6px 18px 22px;border-top:1px solid var(--linea-2)}

  /* portaditas con el patrón Onofre (decorativas) */
  .cv{--bg:#4312EA;--fg:#A0FA82;position:relative;display:block;width:44px;height:62px;flex:0 0 auto;overflow:hidden;
    border-radius:4px 8px 8px 4px;background-color:var(--bg);background-repeat:no-repeat;
    box-shadow:inset 4px 0 0 rgba(0,0,0,.16),0 4px 10px rgba(19,34,41,.16)}
  .c1{--bg:#4312EA;--fg:#A0FA82}
  .c2{--bg:#132229;--fg:#A0FA82}
  .c3{--bg:#FC356A;--fg:#132229}
  .c4{--bg:#F2F2F2;--fg:#4312EA}
  .c5{--bg:#A0FA82;--fg:#132229}
  .s1{background-image:radial-gradient(circle at 100% 100%,var(--fg) 0 52%,transparent 53%)}
  .s2{background-image:radial-gradient(circle at 50% 36%,var(--fg) 0 30%,transparent 31%)}
  .s3{background-image:linear-gradient(45deg,transparent 40%,var(--fg) 40% 60%,transparent 60%),
                       linear-gradient(-45deg,transparent 40%,var(--fg) 40% 60%,transparent 60%);
      background-size:60% 42%;background-position:50% 30%}
  .s4{background-image:repeating-linear-gradient(135deg,var(--fg) 0 3px,transparent 3px 8px);
      background-size:100% 50%;background-position:0 100%}
  .cv-onofre{display:grid;place-items:center}
  .cv-onofre .aro{width:72%;height:auto}
  .cv-lg{width:78px;height:110px;border-radius:6px 12px 12px 6px}

  /* ===== Texto de cada resumen ===== */
  .libro-txt{max-width:660px;font-size:16.5px;line-height:1.75;color:var(--tinta);overflow-wrap:anywhere}
  .libro-txt p,.libro-txt ul,.libro-txt ol,.libro-txt blockquote{margin-top:16px}
  .libro-txt ul,.libro-txt ol{padding-left:22px}
  .libro-txt li{margin-top:8px}
  .libro-txt li::marker{color:var(--rosa)}
  .libro-txt li p{margin-top:0}
  .libro-txt strong{font-weight:700}
  .libro-txt blockquote{border-left:3px solid var(--rosa);border-radius:0 12px 12px 0;padding:12px 18px;
    background:rgba(252,53,106,.055);color:var(--tinta)}
  .libro-txt blockquote p:first-child,.libro-txt blockquote ul:first-child{margin-top:0}
  .libro-txt h5{margin-top:30px;font:800 13px/1.4 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
  .libro-txt h6{margin-top:20px;font:700 15.5px/1.4 var(--display);color:var(--tinta)}
  .libro-txt a{color:var(--azul);border-bottom:1px solid rgba(67,18,234,.35)}
  .libro-txt .parte{display:inline-block;margin-top:32px;font:800 10.5px var(--display);letter-spacing:.18em;
    text-transform:uppercase;color:var(--verde);background:var(--tinta);border-radius:999px;padding:6px 13px}
  .libro-txt .parte:first-child{margin-top:6px}
  .libro-acc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
  .libro-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 24px;background:var(--grad);
    color:var(--blanco);font:700 14px var(--display);box-shadow:0 10px 24px rgba(67,18,234,.3);
    text-shadow:0 1px 0 rgba(0,0,0,.12);transition:transform .16s ease,box-shadow .16s ease}
  .libro-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(67,18,234,.38)}
  .libro-link{font:700 13px var(--display);color:var(--tinta)}

  /* Enlaces sueltos: subrayado con text-decoration (no con borde) para poder agrandar el área que se toca
     sin que la línea se mueva. En celular cada uno se toca en 44 px de alto sin cambiar cómo se ve. */
  .libro-link,.jump,.search-hint a,.quien-links a,.lector-cta-link,.eco-text .eco-mentor a{
    text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
  .libro-link{text-decoration-color:var(--linea)}
  .libro-link:hover{text-decoration-color:var(--rosa)}
  .lector-cta-link{text-decoration-color:rgba(160,250,130,.5)}
  .lector-cta-link:hover{text-decoration-color:var(--verde)}
  .libro-subs{font:500 13.5px var(--texto);color:var(--tinta-70)}
  .oculto{display:none!important}

  /* ===== Abecedario al costado (como en los contactos del celular) ===== */
  /* centrado en el espacio libre DEBAJO del encabezado y el buscador (antes se metía debajo de ellos
     en celulares chicos y acostados); las letras se encogen solas si la pantalla es baja */
  .riel{position:fixed;z-index:45;right:4px;top:50%;top:calc(50% + var(--fijo,132px) / 2);
    max-height:calc(100dvh - var(--fijo,132px) - 24px);transform:translateY(-50%);display:flex;flex-direction:column;
    align-items:center;gap:1px;padding:8px 3px;border-radius:999px;background:rgba(255,255,255,.88);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(19,34,41,.14);
    touch-action:none;user-select:none;-webkit-user-select:none;transition:opacity .22s ease,transform .22s ease}
  .riel.fuera{opacity:0;pointer-events:none;transform:translate(10px,-50%)}
  .riel[hidden]{display:none}
  .riel a{display:block;min-width:20px;text-align:center;font:800 10.5px/1 var(--display);padding:3.5px 4px;
    border-radius:6px;color:var(--tinta)}
  .riel a{font-size:clamp(8.5px,1.45dvh,10.5px);padding:clamp(1px,.42dvh,3.5px) 4px}
  .riel a.activa{background:var(--tinta);color:var(--verde)}
  .riel a.vacia{opacity:.22}
  .riel-burbuja{position:fixed;z-index:46;right:46px;top:0;width:58px;height:58px;border-radius:50% 50% 10px 50%;
    background:var(--tinta);color:var(--verde);font:800 28px/1 var(--display);display:grid;place-items:center;
    box-shadow:0 10px 26px rgba(19,34,41,.3);opacity:0;pointer-events:none;transition:opacity .15s ease}
  .riel-burbuja.ver{opacity:1}

  /* ===== ¿Quién es Oscar Onofre? ===== */
  .quien{position:relative;overflow:hidden;margin:72px 0 0;border-radius:24px;background:var(--blanco);
    box-shadow:var(--sombra-2);padding:34px 32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 24px;align-items:start}
  .quien-aro{grid-row:span 3;width:68px;height:68px}
  .quien p{margin-top:12px;max-width:640px;font-size:16.5px;line-height:1.7;color:var(--tinta-70);overflow-wrap:anywhere}
  .quien .quien-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
  .quien-links a{font:700 13.5px var(--display);color:var(--azul)}

  /* ===== Pie ===== */
  .footer{position:relative;margin-top:64px;padding:38px 0 42px;display:flex;align-items:center;justify-content:space-between;
    gap:18px;flex-wrap:wrap}
  .footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:6px;
    background:linear-gradient(90deg,var(--rosa) 0 25%,var(--azul) 25% 50%,var(--verde) 50% 75%,var(--tinta) 75% 100%)}
  .footer-brand{font:600 italic 18px/1.45 var(--texto);color:var(--tinta)}
  .footer-links{display:flex;gap:18px;flex-wrap:wrap}
  .footer-links a{font:700 13px var(--display);color:var(--tinta-70)}
  .footer-links a:hover{color:var(--azul)}
  .footer-src{flex-basis:100%;font-size:12.5px;line-height:1.6;color:var(--tinta-50);overflow-wrap:anywhere}
  .footer-src a{color:var(--tinta-70);border-bottom:1px solid var(--linea)}

  /* ===== Ventanas ===== */
  .overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:22px;
    background:rgba(19,34,41,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .overlay.active{display:flex}
  .panel{position:relative;background:var(--crema-2);border-radius:22px;box-shadow:0 30px 80px rgba(19,34,41,.32);
    animation:in .24s ease both}
  @keyframes in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
  .close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--blanco);
    box-shadow:var(--sombra);color:var(--tinta);font-size:22px;line-height:1;display:grid;place-items:center;z-index:3;
    transition:background .18s ease,color .18s ease}
  .close:hover{background:var(--tinta);color:var(--verde)}

  .modal{width:min(700px,100%);max-height:90dvh;overflow:auto;padding:32px}
  .modal-kicker{font:700 10.5px var(--display);text-transform:uppercase;letter-spacing:.22em;color:var(--azul);margin-bottom:10px}
  .modal-title{font:800 clamp(24px,4vw,32px)/1.08 var(--display);letter-spacing:-.025em;color:var(--tinta);padding-right:46px}
  .modal-by{margin-top:10px;font:600 13.5px var(--texto);color:var(--tinta-70)}
  .modal-by .sep{color:var(--tinta-30);margin:0 7px}
  .modal-body{display:grid;grid-template-columns:150px 1fr;gap:24px;margin-top:22px;align-items:start}
  .modal-cover{aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--crema);box-shadow:var(--sombra-2)}
  .modal-cover img{width:100%;height:100%;object-fit:cover}
  .modal-cover.noimg{display:flex;align-items:flex-end;padding:14px;background:var(--tinta)}
  .modal-cover.noimg img{display:none}
  .modal-cover .ph{display:none;font:700 15px/1.2 var(--display);color:var(--blanco)}
  .modal-cover.noimg .ph{display:block}
  .modal-desc{font:500 italic 20px/1.42 var(--texto);color:var(--tinta)}
  .modal-rows{margin:18px 0 0;display:flex;flex-direction:column;gap:14px}
  .row strong{display:block;font:700 10.5px var(--display);text-transform:uppercase;letter-spacing:.16em;color:var(--azul);margin-bottom:5px}
  .row span{font-size:15px;color:var(--tinta-70);line-height:1.55}
  .modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 22px;
    font:700 14px var(--display);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
  .btn svg{width:16px;height:16px}
  .btn-primary{background:var(--grad);color:var(--blanco);box-shadow:0 10px 22px rgba(67,18,234,.28);text-shadow:0 1px 0 rgba(0,0,0,.12)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(67,18,234,.36)}
  .btn-ghost{border:1.5px solid var(--linea);color:var(--tinta);background:var(--blanco)}
  .btn-ghost:hover{border-color:var(--tinta)}

  .mood{width:min(560px,100%);max-height:90dvh;overflow:auto;padding:36px 30px}
  .mood-tag,.r-tag{display:inline-block;font:700 10.5px var(--display);letter-spacing:.2em;text-transform:uppercase;
    color:var(--azul);margin-bottom:12px}
  .mood h2,.roulette h2{font:800 clamp(24px,4vw,32px)/1.1 var(--display);letter-spacing:-.025em;color:var(--tinta)}
  .mood-sub,.r-sub{margin:12px 0 22px;font:500 italic 18px/1.4 var(--texto);color:var(--tinta-70)}
  .mood-list{display:flex;flex-direction:column;gap:10px}
  .mood-opt{display:flex;align-items:center;gap:14px;text-align:left;border-radius:14px;background:var(--blanco);
    box-shadow:var(--sombra);padding:15px 16px;transition:transform .18s ease,box-shadow .18s ease}
  .mood-opt:hover{transform:translateX(4px);box-shadow:var(--sombra-2)}
  .mood-opt .m-ico{font-size:20px;flex:0 0 auto}
  .mood-opt .m-text{font:600 15px/1.3 var(--display);color:var(--tinta)}
  .mood-opt .m-arrow{margin-left:auto;color:var(--rosa);font-size:17px}

  .sheet{width:min(430px,100%);max-height:90dvh;overflow:auto;padding:30px}
  .sheet h3{font:800 21px var(--display);color:var(--tinta);padding-right:44px}
  .sheet-cap{font-size:14.5px;color:var(--tinta-70);margin:10px 0 20px;line-height:1.5}
  .sheet-cap b{color:var(--tinta)}
  .sheet-list{display:flex;flex-direction:column;gap:10px}
  .share-opt{display:flex;align-items:center;gap:13px;border-radius:14px;background:var(--blanco);box-shadow:var(--sombra);
    padding:13px 15px;font:600 15px var(--display);color:var(--tinta);transition:transform .18s ease}
  .share-opt:hover{transform:translateX(4px)}
  .share-opt .s-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
  .share-opt .s-ico svg{width:17px;height:17px;color:#fff}
  .s-wa{background:#25D366}.s-x{background:var(--tinta)}.s-tg{background:#229ED9}
  .s-copy{background:var(--humo)}
  .s-copy svg{color:var(--tinta)!important}

  .roulette{width:min(540px,100%);max-height:90dvh;overflow:auto;padding:34px 28px;text-align:center}
  .roulette-window{position:relative;height:172px;overflow:hidden;border-radius:18px;background:var(--blanco);
    box-shadow:inset 0 0 0 1px var(--linea-2),inset 0 0 40px rgba(19,34,41,.05)}
  .roulette-window::before,.roulette-window::after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:3;pointer-events:none}
  .roulette-window::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
  .roulette-window::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
  .roulette-track{display:flex;gap:14px;padding:23px 0;height:100%;align-items:center;will-change:transform}
  .r-item{flex:0 0 auto;width:84px;border:0;background:none;padding:0;cursor:pointer;border-radius:10px;
    transition:transform .18s ease,opacity .18s ease}
  .r-item:hover,.r-item:focus-visible{transform:translateY(-5px);outline:none}
  .r-item .r-cover{display:block;width:84px;height:126px;border-radius:9px;overflow:hidden;background:var(--tinta);
    box-shadow:0 6px 16px rgba(19,34,41,.22);transition:box-shadow .18s ease}
  .r-item:hover .r-cover,.r-item:focus-visible .r-cover{box-shadow:0 10px 24px rgba(19,34,41,.28),0 0 0 2px rgba(252,53,106,.35)}
  .r-item .r-cover img{width:100%;height:100%;object-fit:cover}
  .roulette-marker{position:absolute;left:50%;top:8px;bottom:8px;width:3px;transform:translateX(-1.5px);z-index:4;
    background:var(--grad);border-radius:3px;box-shadow:0 0 14px rgba(252,53,106,.45)}
  .roulette-marker::before,.roulette-marker::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
    border-left:7px solid transparent;border-right:7px solid transparent}
  .roulette-marker::before{top:-2px;border-top:8px solid var(--rosa)}
  .roulette-marker::after{bottom:-2px;border-bottom:8px solid var(--azul)}
  .roulette-result{margin-top:18px}
  .r-result-kick{display:block;font:600 italic 18px var(--texto);color:var(--tinta);margin-bottom:12px}
  .r-result-card{display:inline-flex;align-items:center;gap:15px;text-align:left;border-radius:16px;background:var(--blanco);
    padding:13px 20px 13px 13px;box-shadow:var(--sombra-2);cursor:pointer;transition:transform .18s ease}
  .r-result-card:hover,.r-result-card:focus-visible{transform:translateY(-3px);outline:none}
  .r-result-card .rc-cover{width:56px;height:84px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:var(--tinta);
    box-shadow:0 5px 14px rgba(19,34,41,.22)}
  .r-result-card .rc-cover img{width:100%;height:100%;object-fit:cover}
  .r-result-card .rc-title{font:700 16px/1.2 var(--display);color:var(--tinta)}
  .r-result-card .rc-author{font:500 12.5px var(--texto);color:var(--tinta-50);margin-top:3px}
  .roulette-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

  /* ===== Pantalla de lectura ===== */
  .lector-ov{justify-content:flex-end;align-items:stretch;padding:0;background:rgba(19,34,41,.42)}
  .lector{width:min(780px,100%);height:100dvh;max-height:100dvh;border-radius:0;display:flex;flex-direction:column;
    background:var(--crema-2);animation:desliza .3s cubic-bezier(.2,.7,.3,1) both}
  @keyframes desliza{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
  .lector-bar{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 18px;
    background:var(--crema-2);border-bottom:1px solid var(--linea-2)}
  .lector-marca{display:flex;align-items:center;gap:8px;margin-right:auto;font:700 13px var(--display);color:var(--tinta-70)}
  .lector-marca .aro{width:22px;height:22px}
  .lector-compartir{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blanco);
    box-shadow:var(--sombra);color:var(--tinta);transition:background .18s ease,color .18s ease}
  .lector-compartir svg{width:17px;height:17px}
  .lector-compartir:hover{background:var(--tinta);color:var(--verde)}
  .lector .close{position:static}
  .lector-avance{position:absolute;left:0;right:0;bottom:-2px;height:3px}
  .lector-avance span{display:block;height:100%;width:0;background:var(--grad3);border-radius:0 3px 3px 0}
  .lector-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:30px 24px 64px}
  .lector-cabeza{max-width:660px;margin:0 auto;display:flex;gap:20px;align-items:flex-end}
  .lector-kicker{font:700 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--azul)}
  .lector-titulo{margin-top:8px;font:800 clamp(25px,4.4vw,36px)/1.1 var(--display);letter-spacing:-.03em;color:var(--tinta)}
  .lector-autor{margin-top:8px;font:600 15.5px var(--texto);color:var(--tinta-70)}
  .lector-cuerpo{max-width:660px;margin:26px auto 0}
  .lector-cuerpo .libro-c{padding:0;border:0}
  .lector-cuerpo .libro-txt{font-size:17.5px;line-height:1.8}
  .lector-nav{max-width:660px;margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .lector-sig{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"cv k" "cv t" "cv a";
    column-gap:12px;row-gap:2px;align-items:center;text-align:left;padding:14px;border-radius:16px;background:var(--blanco);
    box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease}
  .lector-sig:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
  .lector-sig[hidden]{display:none}
  .lector-sig.ant{grid-column:1}
  .lector-sig.sig{grid-column:2}
  .lector-sig .cv{grid-area:cv}
  .ls-k{grid-area:k;font:700 10.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
  .ls-t{grid-area:t;font:700 14.5px/1.25 var(--display);color:var(--tinta)}
  .ls-a{grid-area:a;font:500 12.5px var(--texto);color:var(--tinta-50)}

  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);z-index:200;opacity:0;
    pointer-events:none;background:var(--tinta);color:var(--verde);border-radius:999px;padding:12px 22px;
    font:700 14px var(--display);box-shadow:0 12px 30px rgba(19,34,41,.3);transition:opacity .22s ease,transform .22s ease}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* solo se esconde para animarse si hay JavaScript (clase "js" en <html>); sin él, se ve desde el inicio */
  .reveal{transition:opacity .6s ease,transform .6s ease}
  .js .reveal{opacity:0;transform:translateY(14px)}
  .js .reveal.in{opacity:1;transform:none}

  /* ===== Legibilidad: títulos de libros, autores, letras y etiquetas en Raleway =====
     Montserrat Alternates queda para el logotipo, los títulos de sección y los botones:
     sus mayúsculas alternas (M, N, E, W) confunden en un índice alfabético y en "$100M". */
  .libro-t,.ls-t,.tile-title,.autor h3,.faq-item h3,.empty-pick .ep-title,.r-result-card .rc-title,
  .mood-opt .m-text,.share-opt{font-family:var(--texto)}
  .libro-t{font-weight:700;font-size:15.5px}
  .tile-title{font-weight:700;font-size:15px}
  .autor h3{font-weight:800;font-size:19px;letter-spacing:0}
  .faq-item h3{font-weight:700;font-size:17px}
  .lector-titulo,.modal-title{font-family:var(--texto);font-weight:800;letter-spacing:-.015em}
  .letra-h{font-family:var(--texto);font-weight:800}
  .az a,.riel a,.riel-burbuja{font-family:var(--texto);font-weight:800}
  .kicker,.indice-kicker,.modal-kicker,.mood-tag,.r-tag,.lector-kicker,.ls-k,.row strong,.ep-kick,
  .cover-ph small,.libro-txt .parte,.logo-txt .sub,.hero-note,.libro-txt h5,.libro-txt h6{font-family:var(--texto);font-weight:800}
  .hero-note{font-weight:600}
  .hero-note b,.hero-note .mark{font-weight:800}
  .libro-txt h6{font-weight:700}

  /* ===== Escritorio ===== */
  @media (min-width:900px){
    .letra{columns:2;column-gap:46px;contain-intrinsic-size:auto calc(133px + var(--n,6) * 62px)}
    .letra-h{column-span:all}
    .autor{break-inside:avoid}
  }
  @media (min-width:1200px){
    .riel{right:calc(50% - 604px)}
  }

  /* ===== Celular ===== */
  @media (max-width:1199px){
    .indice .letra{padding-right:30px}   /* espacio para el abecedario, también en tableta acostada */
  }
  @media (max-width:680px){
    .wrap{width:min(100% - 32px,var(--maxw))}
    .hero{padding-top:42px}
    .patron .p-equis,.patron .p-franjas{display:none}
    .p-cuarto{width:40px;height:40px;top:18px}
    .p-circulo{right:6px;top:22px;width:16px;height:16px}
    .entry-row{flex-direction:column;align-items:center}
    .entry-btn,.entry-spin{width:min(330px,100%)}
    .index{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:24px 16px}
    .shelf-head{padding:12px 16px}
    .modal-body{grid-template-columns:112px 1fr;gap:16px}
    .eco{flex-direction:column;align-items:flex-start;padding:30px 22px;border-radius:20px}
    .eco::after{right:24px}
    .eco::before{width:54px;height:54px}
    .eco-text h2{padding-right:34px}
    .suscribe{grid-template-columns:1fr;padding:30px 22px 54px;border-radius:20px;gap:24px}
    .suscribe::before{display:none}
    .suscribe::after{width:46px;height:46px;right:-4px;bottom:-4px}
    .suscribe-acc{flex-direction:column}
    .btn-sus,.btn-sec{width:100%}
    .quien{grid-template-columns:1fr;padding:28px 22px;border-radius:20px}
    .quien-aro{grid-row:auto;width:52px;height:52px;margin-bottom:6px}
    .footer{flex-direction:column;align-items:flex-start;gap:14px}
    .overlay{padding:0;align-items:stretch}
    .panel{border-radius:0;max-height:100dvh;min-height:100dvh;width:100%}
    .modal,.mood,.sheet{padding-top:66px}
    .lector-scroll{padding:24px 18px 56px}
    .lector-cabeza{gap:14px}
    .lector-cuerpo .libro-txt{font-size:17px}
    .lector-nav{grid-template-columns:1fr}
    .lector-sig.ant,.lector-sig.sig{grid-column:1}
    .lector-sig.sig{order:-1}
    .nav-text{display:none}
    .nav-menu{width:44px;height:44px;padding:0}
    .nav-menu-t{display:none}
    .libro-leer{padding:6px 11px}
  }
  @media (max-width:400px){
    .bar-actions{gap:8px}
    .nav-eco{padding-left:13px;padding-right:13px}
  }
  @media (max-width:359px){
    .nav-eco{display:none}   /* en 320 px no cabe: queda dentro del menú ("Entrar al ecosistema") */
  }
  /* Celulares muy angostos (320-380 px): sin la pastilla "Leer" para que el título respire;
     toda la fila sigue abriendo el resumen */
  @media (max-width:380px){
    .libro summary{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"cv t" "cv m"}
    .libro-leer{display:none}
  }
  /* Pantallas bajas (celular acostado): el buscador deja de seguirte para no tapar media pantalla;
     la lupa del encabezado te regresa a él */
  @media (max-height:500px){
    .toolbar{position:relative;top:auto}
  }
  /* ventanas compactas para que quepan completas en un celular acostado ancho
     (en los de menos de 681 px las ventanas ya ocupan toda la pantalla) */
  @media (max-height:500px) and (min-width:681px){
    .overlay:not(.lector-ov){padding-top:12px;padding-bottom:12px}
    .modal,.mood,.roulette,.sheet{max-height:calc(100dvh - 24px)}
    .sheet{padding:20px 24px}
    .sheet-cap{margin:6px 0 12px}
    .sheet-list{gap:8px}
    .share-opt{padding-top:9px;padding-bottom:9px}
  }
  /* Dedo: todo lo que se toca mide al menos 40-44 px de alto, sin cambiar cómo se ve */
  @media (pointer:coarse){
    .chip{padding:11px 15px}
    .tile-share{width:40px;height:40px}
    .nav-buscar{width:44px;height:44px}
    .nav-menu{min-height:44px}
    .nav-eco{min-height:44px}
    .search-clear{width:40px;height:40px}
    .libro-link,.jump,.search-hint a,.quien-links a,.lector-cta-link,.footer-links a,.eco-text .eco-mentor a{
      display:inline-block;padding-block:14px;margin-block:-14px}
  }
  /* En pantallas táctiles no se queda "levantada" la tarjeta que tocaste */
  @media (hover:none){
    .libro:hover,.entry-btn:hover,.entry-spin:hover,.btn-sus:hover,.libro-btn:hover,.eco-link:hover,
    .lector-sig:hover,.az a:hover{transform:none}
    .tile:hover .cover{transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1!important;transform:none!important}
    .hero > *{opacity:1!important;transform:none!important}
    .tile-share{opacity:1;transform:none}
  }

/* Biblioteca Onofre · lectura, autoría y navegación · 27 octubre 2026. */
:root{--crema:#F2F2F2;--crema-2:#FAF9F6;--maxw:1160px}
body{background:var(--crema)}
.bar{background:rgba(242,242,242,.96);border-bottom:1px solid var(--linea)}
.bar-in{height:72px}
.toolbar{top:72px;background:rgba(242,242,242,.97);margin-top:14px}
.toolbar-in{width:100%;padding:14px 0}
.bar-actions{gap:18px}
.logo .aro{width:34px;height:34px}
.logo-txt b{font-size:21px}.logo-txt .sub{font-size:9px;letter-spacing:.08em}
.nav-eco{border-radius:9px;font-size:12px;min-height:44px;padding:9px 13px}
.nav-text{min-height:44px;display:flex;align-items:center}
.hero{max-width:none;display:grid;grid-template-columns:1.12fr 1fr;gap:48px;text-align:left;padding:44px 0 36px;align-items:center}
.hero>*{animation:none;opacity:1;transform:none}
.hero-copy{min-width:0}
.hero-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--azul);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:"";width:23px;height:3px;background:var(--grad)}
.hero h1{font-size:clamp(30px,3.55vw,49px);font-weight:700;letter-spacing:-.055em;line-height:1.13;margin:20px 0 0}
.hero h1 span{display:block;margin-top:9px;color:var(--azul);font-size:1.04em}
.hero h1::after{display:none}
.hero .hero-sub{font-size:17px;font-style:normal;font-weight:500;line-height:1.75;max-width:510px;margin:22px 0 0;color:var(--tinta-70)}
.hero-sub strong{font-weight:700;color:var(--tinta)}
.hero .entry-row{justify-content:flex-start;gap:10px;margin:25px 0 0;align-items:stretch}
.hero .entry-btn,.hero .entry-spin{box-shadow:none;border:1px solid var(--linea);border-radius:10px;padding:11px 14px;min-height:48px;font-size:12px;gap:8px}
.hero .entry-btn:first-child{background:var(--grad);color:#fff;border:0}
.hero .entry-btn .ico{width:25px;height:25px;font-size:15px;border-radius:7px;background:transparent}
.hero .entry-btn:first-child .ico{color:var(--verde)}
.hero .entry-row>a{background:transparent;box-shadow:none;border:0;padding:7px 0;flex-basis:100%;justify-content:flex-start;min-height:35px}
.hero .entry-btn .ico-az{white-space:nowrap;min-width:28px;font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:var(--azul)}
.hero .entry-spin .wheel{width:21px;height:21px}
.hero-credit{font-size:13px;margin-top:25px;color:var(--tinta-70);line-height:1.7}
.hero-credit>a{font-weight:700;color:var(--tinta);text-decoration:underline;text-underline-offset:4px}
.hero-roles{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.hero-roles a{font-weight:600;padding:3px 5px 3px 0;color:var(--azul);min-height:30px;display:inline-flex;align-items:center;gap:9px}
.hero-roles a:not(:last-child)::after{content:"·";color:var(--tinta-30)}
.hero-roles a:hover{text-decoration:underline;text-underline-offset:4px}
.hero-shelf{position:relative;margin:0;background:#EDE8FB;border:1px solid #D9D1EF;border-radius:13px;min-width:0;align-self:center;overflow:hidden}
.shelf-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #D9D1EF;padding:18px 22px;font-size:11px;color:var(--azul);font-weight:700;letter-spacing:.04em}
.shelf-label>span{font-size:10px;color:var(--tinta-70)}
.shelf-intro{font:700 clamp(20px,2vw,28px)/1.3 var(--display);letter-spacing:-.035em;padding:23px 26px 0;max-width:350px}
.hero-books{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:28px 27px 24px;min-height:214px}
.hero-book{display:block;width:29%;min-width:0;transition:transform .2s ease;box-shadow:3px 8px 10px #13222916;transform-origin:bottom}
.hero-book:first-child{transform:rotate(-5deg);margin-bottom:5px}
.hero-book:nth-child(2){transform:rotate(2deg);width:31%;margin-bottom:1px}
.hero-book:last-child{transform:rotate(6deg);margin-bottom:5px}
.hero-book:hover,.hero-book:focus-visible{transform:translateY(-8px)}
.hero-book img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:2px}
.hero-shelf figcaption{background:var(--tinta);color:#fff;padding:19px 23px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.hero-shelf figcaption strong{font:700 27px/1 var(--display);color:var(--verde);display:block;margin-bottom:4px}
.hero-shelf figcaption a{border-bottom:1px solid #ffffff60;padding:8px 0;white-space:nowrap;font-weight:600;font-size:11px}
.hero-shelf figcaption a:focus-visible{outline-color:var(--verde)}
.quick-topics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 23px;font-size:12px}
.quick-topics>span{color:var(--tinta-70);margin-right:3px}
.quick-topics button{padding:9px 12px;min-height:40px;background:#fff;border:1px solid var(--linea);border-radius:8px;font-weight:600}
.quick-topics button:hover,.quick-topics button[aria-pressed=true]{background:var(--azul);color:#fff;border-color:var(--azul)}
.search-box{border-radius:11px;box-shadow:none;min-height:54px}
.shelf-head{background:none;box-shadow:none;border-radius:0;border-block:1px solid var(--linea);padding:15px 0;gap:12px;margin-bottom:28px}
.destacados-head{margin-bottom:19px}
.index{gap:22px 26px}
.tile-open{gap:13px}
.cover{border-radius:5px;width:100%;box-shadow:3px 6px 12px #13222912}
.tile-title{font-size:14px;line-height:1.4}
.tile-author{font-size:12px}
.tile-read{font-size:11px;font-weight:700;color:var(--azul);padding:8px 0;position:relative;z-index:3;align-self:flex-start;min-height:36px}
.tile-read:hover{text-decoration:underline;text-underline-offset:4px}
.suscribe{margin-top:38px;border-radius:13px;box-shadow:none;padding:25px 28px;grid-template-columns:200px minmax(0,1fr);gap:22px}
.suscribe::before,.suscribe::after{display:none}
.cont-cifra{margin-top:6px}.cont-cifra .cont-num{font-size:45px}
.cont-meta{display:none}
.suscribe-txt h2{font-size:21px;max-width:none;line-height:1.4}
.suscribe-acc{margin-top:16px;gap:9px}
.suscribe-acc .btn-sus,.suscribe-acc .btn-sec{font-size:11px;min-height:42px;padding:11px 13px;border-radius:8px}
.family{margin-top:58px;border-top:1px solid var(--linea);padding-top:34px}
.family-top{display:grid;grid-template-columns:.8fr 1fr;gap:50px;align-items:start}
.family-k{font-weight:700;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--azul);margin-bottom:13px;display:flex;gap:9px;align-items:center}
.family-k .aro{width:25px;height:25px}
.family h2{font:700 clamp(25px,3vw,36px)/1.22 var(--display);letter-spacing:-.045em;max-width:450px}
.family-intro{font-size:15px;line-height:1.75;color:var(--tinta-70);padding-top:34px;max-width:490px}
.family-intro strong{color:var(--tinta)}
.family-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:28px;border-bottom:1px solid var(--linea)}
.family-tab{min-height:60px;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;font:700 14px var(--display);padding:12px 16px;border-bottom:3px solid transparent;color:var(--tinta-70)}
.family-tab .role-n{font:700 11px var(--texto);color:var(--azul)}
.family-tab:hover,.family-tab[aria-selected=true]{background:#EDE8FB;border-bottom-color:var(--azul);color:var(--azul)}
.family-panel{display:grid;grid-template-columns:.8fr 1fr;gap:50px;padding:27px 24px;background:#fff;border:1px solid var(--linea);border-top:0;border-radius:0 0 12px 12px;align-items:start;scroll-margin-top:calc(var(--fijo) + 20px)}
.family-panel[hidden]{display:none}
.family-panel h3{font:700 23px/1.3 var(--display);letter-spacing:-.035em;max-width:360px}
.family-panel p{font-size:14px;color:var(--tinta-70);line-height:1.8;margin-top:13px;max-width:420px}
.family-links{display:grid;gap:0;align-self:center}
.family-link{display:grid;grid-template-columns:1fr auto;column-gap:20px;padding:13px 0;border-bottom:1px solid var(--linea);min-height:62px}
.family-link:last-child{border-bottom:0}
.family-link strong{font-size:14px;line-height:1.4}
.family-link small{grid-column:1;color:var(--tinta-70);font-size:12px;line-height:1.6;margin-top:4px}
.family-link .fl-arrow{grid-column:2;grid-row:1/3;align-self:center;color:var(--azul);font-size:21px}
.family-link:hover strong{text-decoration:underline;text-underline-offset:4px}
.js .family:not(.family-ready) .family-tabs{display:none}
.family:not(.family-ready) .family-tabs{display:none}
.family:not(.family-ready) .family-panel{border-top:1px solid var(--linea);margin-top:15px;border-radius:12px}
.family-panel:focus-visible{outline-offset:6px}
.indice{margin-top:58px}.indice-head h2{font-size:clamp(27px,3vw,36px);letter-spacing:-.045em}
.indice-intro{font-size:15px}.az a{min-width:43px;min-height:44px;border-radius:9px;box-shadow:none;border:1px solid var(--linea)}
.libro{box-shadow:none;border:1px solid var(--linea);border-radius:11px}
.libro summary{border-radius:11px}.libro:hover{box-shadow:0 4px 16px #13222909}
.faq{margin-top:62px}.faq-fecha{font-size:11px}
.quien{border:1px solid var(--linea);border-radius:13px;box-shadow:none;gap:6px 24px;margin-top:48px}
.quien p{font-size:15px}.quien h2{font-size:26px;letter-spacing:-.03em}
.reader-next-step{border-top:1px solid var(--linea);padding-top:22px;margin-top:30px}
.reader-next-step>p{font:700 17px/1.4 var(--display);margin:0 0 8px}
.reader-next-step>div{display:flex;gap:10px 22px;flex-wrap:wrap}
.reader-next-step a{font-size:13px;line-height:1.6;color:var(--azul);min-height:42px;padding:9px 0;text-decoration:underline;text-underline-offset:4px}
.footer{gap:22px}.footer-src{line-height:1.7}
.modal-cover img,.r-cover img,.rc-cover img,.ep-cover img{object-fit:cover}
.lector-cabeza>div{min-width:0;width:100%}.lector-titulo,.modal-title{overflow-wrap:anywhere}
[hidden]{display:none!important}
.js .reveal{opacity:1;transform:none}
@media(min-width:900px){.hero-copy{padding-right:0}.hero{gap:6%}.hero-books{padding-inline:32px}}
@media(max-width:900px){
 .hero{gap:30px}.hero h1{font-size:35px}.hero .hero-sub{font-size:15px}
 .hero .entry-row{gap:9px}.hero .entry-btn,.hero .entry-spin{font-size:11px;padding:10px 11px}
 .hero-shelf figcaption{padding:16px}.shelf-intro{font-size:23px;padding:20px 20px 0}
 .hero-books{gap:9px;padding:24px 18px 20px;min-height:174px}
 .family-top,.family-panel{gap:27px;grid-template-columns:1fr 1fr}
 .family-intro{font-size:14px;padding-top:29px}.family-tab{padding:12px 10px;font-size:12px;gap:7px}
}
@media(max-width:680px){
 .bar-in{height:64px;gap:8px}.bar-actions{gap:9px}.toolbar{top:64px;margin-top:4px}
 .logo .aro{width:29px;height:29px}.logo-txt b{font-size:19px}.logo-txt .sub{font-size:8px}
 .nav-text{display:none}.nav-eco{padding:8px 10px;font-size:10px;min-height:40px;white-space:nowrap}.nav-buscar{width:40px;height:40px}
 .hero{grid-template-columns:1fr;padding:29px 0 21px;gap:25px}
 .hero-eyebrow{font-size:9px;letter-spacing:.1em}
 .hero h1{font-size:clamp(29px,7.8vw,49px);line-height:1.13;margin-top:17px}
 .hero h1 span{margin-top:7px}.hero .hero-sub{font-size:15px;line-height:1.75;margin-top:17px}
 .hero .entry-row{flex-direction:row;margin-top:21px;gap:8px}
 .hero .entry-btn,.hero .entry-spin{width:auto;font-size:12px;min-height:50px;flex:1 1 45%;justify-content:center;padding:10px 8px}
 .hero .entry-row>a{flex:1 1 100%;min-height:40px;max-width:none;background:transparent;border:0;padding:3px 0;justify-content:flex-start}
 .hero-credit{margin-top:12px;font-size:12px}
 .hero-shelf{max-width:500px;width:100%;justify-self:center}
 .shelf-label{padding:12px 18px;font-size:10px}
 .shelf-intro{font-size:23px;padding:18px 20px 0;max-width:100%}
 .hero-books{padding:24px 29px 20px;gap:16px;min-height:0;max-width:430px;margin:auto}
 .hero-book{width:26%}.hero-book:nth-child(2){width:28%}
 .hero-shelf figcaption{padding:14px 18px;font-size:11px}.hero-shelf figcaption strong{font-size:23px}
 .hero-shelf figcaption a{font-size:10px}
 .toolbar-in{padding:11px 0}.search-box{min-height:51px}
 .quick-topics{gap:6px;margin-bottom:18px}.quick-topics>span{flex-basis:100%;margin:3px 0}
 .quick-topics button{font-size:11px;padding:8px 9px;min-height:40px}
 .shelf-head{padding:13px 0;gap:7px;flex-wrap:wrap;margin-top:0;margin-bottom:20px}
 .shelf-head .count{font-size:11px}.shelf-head .cadence{font-size:10px}.shelf-head .jump{font-size:10px}
 .destacados-head{align-items:flex-start;gap:12px}.filters{gap:6px}.chip{font-size:10px;padding:8px 10px;min-height:36px}
 .index{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}
 .tile-title{font-size:12px}.tile-author{font-size:11px}.cover{border-radius:4px}
 .suscribe{padding:22px;grid-template-columns:1fr;gap:18px;border-radius:12px;margin-top:26px}
 .contador{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:center}
 .cont-k{grid-column:1;font-size:10px}.cont-cifra{grid-column:2;grid-row:1/3;margin:0;white-space:nowrap;justify-self:end;line-height:1}
 .cont-cifra .cont-num{font-size:38px}.cont-de{font-size:11px}.cont-barra{grid-column:1;margin-top:7px}
 .suscribe-txt h2{font-size:20px}.suscribe-k{display:none}
 .suscribe-acc{flex-direction:row;gap:8px}.suscribe-acc .btn-sus{flex:1 1 100%;width:100%;font-size:12px}
 .suscribe-acc .btn-sec{flex:1 1 43%;width:auto;font-size:10px;padding:10px 7px}
 .family{margin-top:35px;padding-top:27px}.family-top{grid-template-columns:1fr;gap:14px}
 .family h2{font-size:29px}.family-intro{padding-top:0;font-size:14px;max-width:100%}
 .family-tabs{margin-top:20px}.family-tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:66px;font-size:11px;padding:10px 7px}
 .family-tab .role-n{font-size:9px}
 .family-panel{grid-template-columns:1fr;padding:22px 18px;gap:17px}
 .family-panel h3{font-size:23px}.family-panel p{font-size:14px;margin-top:10px;line-height:1.7}
 .family-link{padding:12px 0;min-height:62px}.family-link strong{font-size:13px}.family-link small{font-size:12px}
 .indice{margin-top:37px}.indice-intro{font-size:14px}.az{gap:6px;margin-top:19px}.az a{min-width:39px;padding:0 8px}
 .quien{padding:25px 21px}.quien p{font-size:14px}.quien h2{font-size:25px}
 .faq{margin-top:40px}.reader-next-step>p{font-size:16px}
 .lector-cabeza>.cv{display:none}.lector-titulo{font-size:clamp(23px,6.1vw,29px);line-height:1.18}
}
@media(max-width:359px){.bar-actions{gap:6px}.hero h1{font-size:28px}.hero-eyebrow{font-size:8px}.hero .entry-btn,.hero .entry-spin{font-size:11.5px}.hero-books{gap:12px}.family-tab{font-size:10px;padding-inline:6px}.suscribe{padding:18px}.cont-cifra .cont-num{font-size:33px}.family h2{font-size:26px}}
@media(max-height:500px){.toolbar{position:relative;top:auto}}
@media(prefers-reduced-motion:reduce){.hero-book,.family-tab,.tile{transition:none}}