/* ==========================================================================
   CHAMÁN EDICIONES · Sistema de diseño «Prisma»
   prisma.css — tokens, reset, tipografía y componentes
   ==========================================================================
   Blanco como base, coral como acento de la casa y el color del lomo de cada
   colección como código de identificación en toda la interfaz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base */
  --bl:      #FFFFFF;
  --gr:      #F7F8F9;
  --gr2:     #F2F4F6;
  --ti:      #101418;
  --ti2:     #2A3038;
  --dim:     #69707A;
  --linea:   #EAECEF;
  --linea2:  #DDE1E6;
  --oscuro:  #22262B;

  /* Acento de la casa — verde, emparentado con el petróleo de Narrativa
     pero más vivo, para que no se confunda con el color de la colección.
     Contraste con blanco 4,5:1 → cumple WCAG AA en botones. */
  --ac:      #0A8560;
  --ac2:     #076B4D;
  --ac-sv:   #EDF8F3;

  /* Colecciones — «real» es la franja del lomo del libro físico,
     «vivo» es la versión saturada que se usa en pantalla.            */
  --fuego-real:  #857658;  --fuego:  #A98A22;
  --senda-real:  #015C62;  --senda:  #007D87;
  --trance-real: #2A2B29;  --trance: #55634E;
  --escena-real: #752230;  --escena: #A32C3E;

  /* Semánticos */
  --ok:   #1F9254;
  --avis: #B7791F;
  --err:  #C0392B;

  /* Tipografía */
  --f: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t--2: .68rem;
  --t--1: .79rem;
  --t-0:  .875rem;
  --t-1:  clamp(.95rem, .92rem + .12vw, 1.05rem);
  --t-2:  clamp(1.1rem, 1.02rem + .32vw, 1.35rem);
  --t-3:  clamp(1.3rem, 1.14rem + .64vw, 1.8rem);
  --t-4:  clamp(1.6rem, 1.3rem + 1.2vw, 2.5rem);
  --t-5:  clamp(1.9rem, 1.4rem + 2.1vw, 3.4rem);
  --t-6:  clamp(2.2rem, 1.5rem + 3vw, 3.9rem);

  /* Espaciado */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;

  /* Layout */
  --ancho: 1340px;
  --ancho-lg: 1560px;
  --ancho-sm: 780px;
  --gut: clamp(1rem, 3vw, 2.2rem);
  --cab: 61px;

  /* Formas */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-pill: 100px;

  --sh-1: 0 2px 5px rgba(16,20,24,.07), 0 8px 20px rgba(16,20,24,.06);
  --sh-2: 0 4px 10px rgba(16,20,24,.09), 0 16px 34px rgba(16,20,24,.11);
  --sh-3: 0 8px 18px rgba(16,20,24,.12), 0 30px 60px rgba(16,20,24,.16);

  --ease: cubic-bezier(.2,.75,.2,1);
  --dur:  .28s;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cab) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  min-height: 100vh;
  background: var(--bl);
  color: var(--ti);
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--ac); color: #fff; }
hr { border: 0; border-top: 1px solid var(--linea); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap    { width:100%; max-width: var(--ancho);    margin-inline:auto; padding-inline: var(--gut); }
.wrap-lg { width:100%; max-width: var(--ancho-lg); margin-inline:auto; padding-inline: var(--gut); }
.wrap-sm { width:100%; max-width: var(--ancho-sm); margin-inline:auto; padding-inline: var(--gut); }

.sec       { padding-block: clamp(2rem, 4vw, 3.4rem); }
.sec--sm   { padding-block: clamp(1.4rem, 2.6vw, 2.2rem); }
.sec--gr   { background: var(--gr); }
.sec--osc  { background: var(--oscuro); color: #fff; }
.sec--top0 { padding-top: 0; }

.grid  { display: grid; gap: var(--s5); }
.g-2   { grid-template-columns: repeat(auto-fit, minmax(min(100%,20rem),1fr)); }
.g-3   { grid-template-columns: repeat(auto-fill, minmax(min(100%,16rem),1fr)); }
.g-4   { grid-template-columns: repeat(auto-fill, minmax(min(100%,12rem),1fr)); }
.cluster { display:flex; flex-wrap:wrap; gap: var(--s3); align-items:center; }

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */
.t6{font-size:var(--t-6)} .t5{font-size:var(--t-5)} .t4{font-size:var(--t-4)}
.t3{font-size:var(--t-3)} .t2{font-size:var(--t-2)} .t1{font-size:var(--t-1);font-weight:400;letter-spacing:0}
.mn {
  font-size: var(--t--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.dim  { color: var(--dim); }
.lead { font-size: var(--t-1); color: var(--dim); max-width: 56ch; }
.sm   { font-size: var(--t--1); }

/* Cabecera de sección: punto de color + título + enlace a la derecha */
.sh {
  display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; margin-bottom: var(--s5);
}
.sh__pt {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--c, var(--ac));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--ac)) 18%, transparent);
}
.sh h2 { font-size: var(--t-3); }
.sh .g { font-size: var(--t--1); color: var(--dim); font-weight: 600; }
.sh .go { margin-left: auto; font-size: var(--t-0); font-weight: 700; color: var(--c, var(--ac)); }
.sh .go:hover { text-decoration: underline; }
.sh--c { justify-content: center; text-align: center; }
.sh--c h2 { width: 100%; }

/* Prosa */
.prosa { font-size: var(--t-1); line-height: 1.72; color: var(--ti2); max-width: 68ch; }
.prosa > * + * { margin-top: 1.05em; }
.prosa h2 { font-size: var(--t-3); color: var(--ti); margin-top: 2em; }
.prosa h3 { font-size: var(--t-2); color: var(--ti); margin-top: 1.6em; }
.prosa a  { color: var(--ac); text-decoration: underline; text-underline-offset: .16em; }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li + li { margin-top: .35em; }
.prosa strong { font-weight: 700; color: var(--ti); }
.prosa blockquote {
  border-left: 4px solid var(--ac);
  padding-left: 1.2em; font-size: var(--t-2); font-weight: 600; color: var(--ti);
}

/* --------------------------------------------------------------------------
   5. Botones y enlaces
   -------------------------------------------------------------------------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--r-pill);
  padding: .68rem 1.5rem;
  font-weight: 700; font-size: var(--t-0);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .12s var(--ease);
  cursor: pointer; text-align: center;
}
.bt:active { transform: translateY(1px); }
.bt[disabled], .bt[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.bt--p   { background: var(--ac); color:#fff; }
.bt--p:hover { background: var(--ac2); }
/* En la ficha de libro, el botón de compra toma el color de la colección */
.prod .bt--p { background: var(--c, var(--ac)); border-color: var(--c, var(--ac)); }
.prod .bt--p:hover { background: var(--c, var(--ac)); filter: brightness(.92); }
.bt--d   { background: var(--ti); color:#fff; }
.bt--d:hover { background: var(--ac); }
.bt--o   { border-color: var(--linea2); }
.bt--o:hover { border-color: var(--ti); }
.bt--osc { border-color: rgba(255,255,255,.32); color:#fff; }
.bt--osc:hover { background:#fff; color: var(--oscuro); }
.bt--sm  { padding: .42rem 1rem; font-size: var(--t--1); }
.bt--lg  { padding: .85rem 1.9rem; font-size: var(--t-1); }
.bt--bl  { width: 100%; }

.link { display:inline-flex; align-items:center; gap:.35rem; font-weight:700;
        color: var(--ac); transition: gap var(--dur) var(--ease); }
.link:hover { gap: .6rem; text-decoration: underline; }

.mas { display:flex; justify-content:center; margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   6. Cabecera
   -------------------------------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cab__in { display:flex; align-items:center; gap: var(--s5); padding-block: .8rem; }

.logo { display:flex; align-items:center; gap:.55rem; white-space:nowrap; flex:none; }
.logo__pts { display:flex; gap:3px; }
.logo__pts i { width:9px; height:9px; border-radius:50%; }
.logo__n { font-size:1.02rem; font-weight:800; letter-spacing:-.04em; }

.nav { display:flex; gap:1.25rem; margin-left:auto; font-size: var(--t-0); font-weight:600; }
.nav__a { position:relative; padding-block:.25rem; transition: color var(--dur) var(--ease); }
.nav__a:hover, .nav__a[aria-current="page"], .nav__a[aria-expanded="true"] { color: var(--ac); }
.nav__a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-.15rem; height:2px;
  background: var(--ac); border-radius:2px;
}
.nav__car { width:10px; height:10px; opacity:.55; transition: transform var(--dur) var(--ease); }
.nav__a[aria-expanded="true"] .nav__car { transform: rotate(180deg); }

.cab__ac { display:flex; align-items:center; gap:.45rem; flex:none; }
.pil {
  border:1px solid var(--linea2); border-radius: var(--r-pill);
  padding:.38rem .95rem; font-size: var(--t--1); font-weight:600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  display:inline-flex; align-items:center; gap:.4rem;
}
.pil:hover { border-color: var(--ti); }
.pil--d { background: var(--ti); color:#fff; border-color: var(--ti); }
.pil--d:hover { background: var(--ac); border-color: var(--ac); }
.pil svg { width:15px; height:15px; }
.cuenta-n { font-variant-numeric: tabular-nums; }

.burger { display:none; width:38px; height:38px; place-items:center; border-radius:50%; }
.burger:hover { background: var(--gr2); }
.burger svg { width:20px; height:20px; }
@media (max-width: 1080px) {
  .nav, .pil--busca, .pil--cuenta { display:none; }
  .burger { display:grid; }
}

/* Mega-menú de colecciones */
.mega {
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--linea);
  box-shadow: var(--sh-2);
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mega.on { opacity:1; visibility:visible; transform:none; }
.mega__in { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); padding-block: var(--s6); }
@media (max-width: 900px) { .mega__in { grid-template-columns: 1fr; gap: var(--s5); } }
.mega h3 { font-size: var(--t--2); letter-spacing:.12em; text-transform:uppercase;
           color: var(--dim); font-weight:700; margin-bottom: var(--s4); }
.mega__cols { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width: 560px) { .mega__cols { grid-template-columns:1fr; } }
.mega__col {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; border-radius: var(--r-sm);
  border:1px solid color-mix(in srgb, var(--c) 22%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mega__col:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.mega__col i { width:10px; height:10px; border-radius:50%; background: var(--c); flex:none; }
.mega__col b { font-size: var(--t-0); font-weight:700; color: var(--c); }
.mega__col span { font-size: var(--t--1); color: var(--dim); display:block; }
.mega__col .n { margin-left:auto; font-size: var(--t--1); color: var(--dim); font-weight:700; }
.mega__lista { list-style:none; padding:0; display:grid; gap:.3rem; }
.mega__lista a { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0;
                 font-size: var(--t-0); color: var(--ti2); }
.mega__lista a:hover { color: var(--ac); }
.mega__lista .n { font-size: var(--t--1); color: var(--dim); }

/* --------------------------------------------------------------------------
   7. Panel lateral (menú móvil, cesta) y buscador
   -------------------------------------------------------------------------- */
.panel { position:fixed; inset:0; z-index:95; visibility:hidden; pointer-events:none; }
.panel.on { visibility:visible; pointer-events:auto; }
.panel__scrim { position:absolute; inset:0; background: rgba(16,20,24,.45);
                opacity:0; transition: opacity .3s var(--ease); }
.panel.on .panel__scrim { opacity:1; }
.panel__box {
  position:absolute; top:0; right:0; bottom:0; width:min(430px,92vw);
  background:#fff; display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .36s var(--ease);
}
.panel--izq .panel__box { right:auto; left:0; transform: translateX(-100%); }
.panel.on .panel__box { transform:none; }
.panel__cab { display:flex; align-items:center; justify-content:space-between;
              padding: var(--s5); border-bottom:1px solid var(--linea); }
.panel__cuerpo { flex:1; overflow-y:auto; padding: var(--s5); }
.panel__pie { padding: var(--s5); border-top:1px solid var(--linea); background: var(--gr);
              display:grid; gap: var(--s3); }
.cerrar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; }
.cerrar:hover { background: var(--gr2); }
.cerrar svg { width:18px; height:18px; }

.menu-lista { list-style:none; padding:0; display:grid; }
.menu-lista > li { border-bottom:1px solid var(--linea); }
.menu-lista a, .menu-lista > li > button {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:.9rem 0; font-size: var(--t-2); font-weight:700; text-align:left;
}
.menu-sub { list-style:none; padding:0 0 .7rem .8rem; display:none; }
.menu-sub.on { display:grid; }
.menu-sub a { font-size: var(--t-0); font-weight:600; padding:.4rem 0; color: var(--dim); }
.menu-sub a i { width:9px; height:9px; border-radius:50%; background: var(--c); margin-right:.5rem;
                display:inline-block; }

/* Buscador */
.busca { position:fixed; inset:0; z-index:96; visibility:hidden; pointer-events:none; }
.busca.on { visibility:visible; pointer-events:auto; }
.busca__scrim { position:absolute; inset:0; background: rgba(16,20,24,.5);
                backdrop-filter: blur(3px); opacity:0; transition:.28s; }
.busca.on .busca__scrim { opacity:1; }
.busca__box { position:relative; background:#fff; border-bottom:1px solid var(--linea);
              transform: translateY(-100%); transition: transform .36s var(--ease);
              max-height:88vh; overflow-y:auto; }
.busca.on .busca__box { transform:none; }
.busca__form { display:flex; align-items:center; gap: var(--s4); padding-block: var(--s6); }
.busca__in {
  flex:1; border:0; border-bottom:2px solid var(--linea2); background:none;
  padding:.5rem 0; font-size: var(--t-4); font-weight:800; letter-spacing:-.03em;
}
.busca__in:focus { outline:none; border-color: var(--ac); }
.busca__res { padding-bottom: var(--s6); display:grid; gap:2px; }
.hit { display:flex; align-items:center; gap: var(--s4); padding:.6rem .7rem;
       border-radius: var(--r-sm); transition: background .18s; }
.hit:hover { background: var(--gr); }
.hit img { width:42px; aspect-ratio:2/3; object-fit:cover; border-radius:3px; flex:none; }
.hit b { font-size: var(--t-0); font-weight:700; display:block; }
.hit span { font-size: var(--t--1); color: var(--dim); }
.hit .pr { margin-left:auto; font-weight:700; font-size: var(--t-0); }
.busca__vacio { padding-block: var(--s6); color: var(--dim); }

/* --------------------------------------------------------------------------
   8. Tarjeta de libro
   -------------------------------------------------------------------------- */
.bk { display:flex; flex-direction:column; position:relative; }
.bk__cover { position:relative; }
.bk__im {
  position:relative; aspect-ratio:2/3; overflow:hidden;
  border-radius: var(--r-sm); background: var(--gr2);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk:hover .bk__im { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--sh-2); }
.bk__im img { width:100%; height:100%; object-fit:cover; }
/* franja de colección — el lomo, trasladado a la web */
.bk__fr { position:absolute; left:0; right:0; top:0; height:6px; background: var(--c); z-index:2; }
.bk__flags { position:absolute; top:.6rem; left:.5rem; right:.5rem; z-index:3;
             display:flex; gap:.3rem; flex-wrap:wrap; }
.bk__quick { position:absolute; left:.5rem; right:.5rem; bottom:.5rem; z-index:3;
             opacity:0; transform: translateY(6px);
             transition: opacity .24s var(--ease), transform .24s var(--ease); }
.bk:hover .bk__quick, .bk:focus-within .bk__quick { opacity:1; transform: translateY(-6px); }
@media (hover:none) { .bk__quick { opacity:1; transform:none; } }
.bk__quick .bt { width:100%; background: rgba(255,255,255,.95); color: var(--ti);
                 backdrop-filter: blur(6px); border-color: var(--linea2); }
.bk__quick .bt:hover { background: var(--c, var(--ac)); color:#fff; border-color: var(--c, var(--ac)); }
/* Pegatina de descuento web: discreta, abajo-derecha de la portada */
.bk__desc { position:absolute; right:.5rem; bottom:.55rem; z-index:2;
            background:#C0392B; color:#fff; font-size:.6rem; font-weight:700; line-height:1;
            letter-spacing:.02em; padding:.28rem .5rem; border-radius:6px;
            box-shadow:0 3px 10px rgba(192,57,43,.32); transition:opacity .2s var(--ease); }
.bk:hover .bk__desc, .bk:focus-within .bk__desc { opacity:0; }

.bk__t { font-size: var(--t-0); font-weight:700; line-height:1.24; margin-top:.65rem;
         display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bk:hover .bk__t { color: var(--c); }
.bk__a { font-size: var(--t--1); color: var(--dim); }
.bk__et { display:inline-flex; align-items:center; gap:.35rem; margin-top:.35rem;
          font-size: var(--t--2); font-weight:700; letter-spacing:.04em;
          text-transform:uppercase; color: var(--c); }
.bk__et i { width:9px; height:9px; border-radius:50%; background: var(--c); flex:none; }
.bk__pr { font-size: var(--t-0); font-weight:700; margin-top:.35rem; }
.bk__pr s { color: var(--dim); font-weight:400; margin-right:.35rem; font-size: var(--t--1); }
.bk__sin { display:none; font-size: var(--t--1); color: var(--dim); margin-top:.4rem; }

/* variante horizontal */
.bk--row { flex-direction:row; gap: var(--s4); align-items:flex-start; }
.bk--row .bk__im { width:82px; flex:none; }
.bk--row > div { flex:1; }
.bk--row .bk__t { margin-top:0; }

/* estante horizontal */
.estante {
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(min(58vw,10.5rem),1fr);
  gap: var(--s5); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom: var(--s4); margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width:none;
}
.estante::-webkit-scrollbar { display:none; }
.estante > * { scroll-snap-align:start; }

/* --------------------------------------------------------------------------
   9. Fila de seis cubiertas (patrón principal del catálogo)
   -------------------------------------------------------------------------- */
.fila { display:grid; grid-template-columns: repeat(6,1fr); gap: clamp(.8rem,1.5vw,1.4rem); }
@media (max-width:1040px){ .fila { grid-template-columns: repeat(4,1fr); } }
@media (max-width:640px) { .fila { grid-template-columns: repeat(2,1fr); } }

/* --------------------------------------------------------------------------
   10. Etiquetas, distintivos y pastillas de colección
   -------------------------------------------------------------------------- */
.tag {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--linea2); border-radius: var(--r-pill);
  padding:.28rem .8rem; font-size: var(--t--2); font-weight:700;
  letter-spacing:.03em; white-space:nowrap;
  transition: all var(--dur) var(--ease);
}
.tag i { width:9px; height:9px; border-radius:50%; background: var(--c); flex:none; }
a.tag:hover, button.tag:hover { border-color: var(--ti); }
.tag[aria-pressed="true"], .tag.on { background: var(--ti); color:#fff; border-color: var(--ti); }
.tag--ac { background: var(--ac); color:#fff; border-color: var(--ac); }

.dist {
  display:inline-block; padding:.2rem .6rem; border-radius: var(--r-sm);
  font-size: var(--t--2); font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background: var(--ac); color:#fff;
}
.dist--ok  { background: var(--ok); }
.dist--av  { background: var(--avis); color:#fff; }
.dist--ti  { background: var(--ti); }
/* etiquetas comerciales, cada una con su tono */
.dist--nov { background: #0A8560; }   /* novedad — verde casa */
.dist--of  { background: #C0392B; }   /* oferta — rojo */
.dist--bs  { background: #B5850F; }   /* más vendido — dorado */
.dist--rec { background: #007D87; }   /* recomendado — petróleo */
.dist--ed  { background: #55634E; }   /* edición (2ª, 3ª…) — grafito verde */
.dist--web { background: #A98A22; }   /* descuento online — oro */

/* pastilla de colección */
.pas {
  border-radius: var(--r); padding:1.35rem 1.2rem;
  display:flex; flex-direction:column; min-height:11.5rem;
  border:1px solid color-mix(in srgb, var(--c) 25%, transparent);
  background: color-mix(in srgb, var(--c) 10%, #fff);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pas:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.pas b { font-size: var(--t-1); font-weight:800; letter-spacing:-.03em; line-height:1.15; color: var(--c); }
.pas span { font-size: var(--t--1); color: var(--dim); margin-top:.15rem; }
.pas em { font-style:normal; font-size:2.1rem; font-weight:800; letter-spacing:-.05em;
          margin-top:auto; color: var(--c); }
.pas__fl { display:flex; gap:3px; margin-bottom:.85rem; }
.pas__fl i { height:7px; flex:1; border-radius:4px; background: var(--c); opacity:.3; }
.pas__fl i:first-child { opacity:1; }
.pas__fl i:nth-child(2) { opacity:.62; }

/* --------------------------------------------------------------------------
   11. Formularios
   -------------------------------------------------------------------------- */
.campo { display:grid; gap:.35rem; }
.campo > label { font-size: var(--t--2); font-weight:700; letter-spacing:.06em;
                 text-transform:uppercase; color: var(--dim); }
.in, .sel, .ta {
  width:100%; background:#fff; border:1px solid var(--linea2);
  border-radius: var(--r-sm); padding:.65rem .9rem; font-size: var(--t-0);
  transition: border-color var(--dur) var(--ease);
}
.in:focus, .sel:focus, .ta:focus { outline:none; border-color: var(--ti); }
.in::placeholder, .ta::placeholder { color: var(--dim); }
.ta { min-height:8rem; resize:vertical; line-height:1.6; }
.sel { appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 1rem top 55%, right .68rem top 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.2rem; }
.in--pill, .sel--pill { border-radius: var(--r-pill); }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size: var(--t--1); color: var(--ti2); }
.check input { margin-top:.25em; accent-color: var(--ac); width:1rem; height:1rem; flex:none; }

.nl-form { display:flex; gap:.5rem; flex-wrap:wrap; }
.nl-form .in { flex:1; min-width:13rem; }

/* --------------------------------------------------------------------------
   12. Cajas, paneles y tablas
   -------------------------------------------------------------------------- */
.caja { border:1px solid var(--linea); border-radius: var(--r); padding: var(--s5); background:#fff; }
.caja--gr { background: var(--gr); border-color: transparent; }
.caja--ac { border-color: var(--ac); background: var(--ac-sv); }
.caja--c  { border-color: color-mix(in srgb, var(--c) 30%, transparent);
            background: color-mix(in srgb, var(--c) 7%, #fff); }

.cifras { background: var(--ac); color:#fff; border-radius: var(--r-lg);
          padding: clamp(1.4rem,3vw,2.2rem); display:grid;
          grid-template-columns: repeat(4,1fr); gap:1rem; text-align:center; }
@media (max-width:640px){ .cifras { grid-template-columns:1fr 1fr; gap:1.4rem; } }
.cifras b { display:block; font-size: clamp(1.7rem,3.6vw,2.8rem); font-weight:800;
            letter-spacing:-.04em; line-height:1; }
.cifras span { font-size: var(--t--1); opacity:.92; font-weight:600; }

.ficha { width:100%; border-collapse:collapse; font-size: var(--t--1); }
.ficha th, .ficha td { padding:.6rem 0; border-bottom:1px solid var(--linea); text-align:left; vertical-align:top; }
.ficha th { font-weight:700; color: var(--dim); width:42%; font-size: var(--t--2);
            letter-spacing:.05em; text-transform:uppercase; }
.ficha td { color: var(--ti2); }

/* Acordeón */
.acor { border-top:1px solid var(--linea); }
.acor__it { border-bottom:1px solid var(--linea); }
.acor__bt { display:flex; align-items:center; justify-content:space-between; gap:1rem;
            width:100%; padding:1rem 0; font-size: var(--t-1); font-weight:700; text-align:left; }
.acor__bt:hover { color: var(--ac); }
.acor__ic { width:14px; height:14px; position:relative; flex:none; }
.acor__ic::before, .acor__ic::after { content:""; position:absolute; inset:0; margin:auto; background:currentColor; }
.acor__ic::before { width:100%; height:2px; }
.acor__ic::after  { width:2px; height:100%; transition: transform .26s var(--ease); }
.acor__bt[aria-expanded="true"] .acor__ic::after { transform: scaleY(0); }
.acor__pn { display:grid; grid-template-rows:0fr; transition: grid-template-rows .3s var(--ease); }
.acor__pn[data-open="true"] { grid-template-rows:1fr; }
.acor__pn > div { overflow:hidden; }
.acor__pn .in-pn { padding-bottom:1.1rem; color: var(--ti2); max-width:64ch; }

/* Migas y paginación */
.migas { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; list-style:none; padding:0;
         font-size: var(--t--1); color: var(--dim); font-weight:600; }
.migas li + li::before { content:"›"; margin-right:.4rem; opacity:.6; }
.migas a:hover { color: var(--ac); }

.pag { display:flex; gap:.3rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.pag button {
  min-width:38px; height:38px; padding-inline:.6rem;
  display:grid; place-items:center; border:1px solid var(--linea2);
  border-radius: var(--r-pill); font-size: var(--t--1); font-weight:700;
  transition: all var(--dur) var(--ease);
}
.pag button:hover:not([disabled]) { border-color: var(--ti); }
.pag [aria-current="page"] { background: var(--ti); color:#fff; border-color: var(--ti); }
.pag [disabled] { opacity:.35; cursor:not-allowed; }

/* Vacío */
.vacio { text-align:center; padding: var(--s9) var(--s4); display:grid; gap: var(--s4); place-items:center; }

/* --------------------------------------------------------------------------
   13. Autores (banda oscura)
   -------------------------------------------------------------------------- */
.autores { background: var(--oscuro); color:#fff; }
.autores h2 { color:#fff; }
.aut-grid { display:grid; grid-template-columns: repeat(6,1fr); gap: clamp(.9rem,1.8vw,1.6rem); }
@media (max-width:1000px){ .aut-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px) { .aut-grid { grid-template-columns: repeat(2,1fr); } }
.aut { text-align:center; color:#fff; }
.aut__ph { position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
           background:#2E343A; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.aut__ph img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);
               transition: filter .3s var(--ease); }
.aut:hover .aut__ph { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--c, var(--ac)); }
.aut:hover .aut__ph img { filter:none; }
.aut__n { display:block; font-size: var(--t-0); font-weight:700; margin-top:.6rem; line-height:1.2; }
.aut__k { display:block; font-size: var(--t--1); color: rgba(255,255,255,.55); margin-top:.1rem; }

/* --------------------------------------------------------------------------
   14. Noticias
   -------------------------------------------------------------------------- */
.posts { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
@media (max-width:900px){ .posts { grid-template-columns:1fr; } }
.post { border:1px solid var(--linea); border-radius: var(--r); overflow:hidden; background:#fff;
        display:flex; flex-direction:column;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color:transparent; }
.post__im { aspect-ratio:16/10; background: var(--gr2); overflow:hidden; position:relative; }
.post__im img { width:100%; height:100%; object-fit:cover; transition: transform .45s var(--ease); }
.post:hover .post__im img { transform: scale(1.04); }
.post__im::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background: var(--c); }
.post__bd { padding:.95rem 1.05rem 1.15rem; display:grid; gap:.2rem; }
.post__f  { font-size: var(--t--1); color: var(--dim); font-weight:600; }
.post__c  { font-size: var(--t--2); font-weight:800; letter-spacing:.05em;
            text-transform:uppercase; color: var(--c); }
.post__t  { font-size: var(--t-1); font-weight:700; line-height:1.3; margin-top:.15rem; }

/* lista de noticias */
.lista-n { list-style:none; padding:0; border-top:1px solid var(--linea); }
.lista-n li { border-bottom:1px solid var(--linea); }
.lista-n a { display:grid; grid-template-columns:6rem 1fr auto; gap:1rem; padding:.75rem 0;
             align-items:baseline; transition: padding-left var(--dur) var(--ease); }
.lista-n a:hover { padding-left:.5rem; }
.lista-n a:hover .t { color: var(--ac); }
.lista-n .t { font-size: var(--t-0); font-weight:700; line-height:1.3; }
.lista-n .f, .lista-n .c { font-size: var(--t--2); color: var(--dim); font-weight:700;
                           letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:640px){ .lista-n a { grid-template-columns:1fr; gap:.15rem; } .lista-n .c { display:none; } }

/* --------------------------------------------------------------------------
   15. Pie
   -------------------------------------------------------------------------- */
.pie { border-top:1px solid var(--linea); padding-block: clamp(2rem,4vw,3rem) 1.4rem;
       margin-top: clamp(2rem,4vw,3rem); font-size: var(--t-0); }
.pie__g { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap: var(--s6); }
@media (max-width:860px){ .pie__g { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pie__g { grid-template-columns:1fr; } }
.pie h4 { font-size: var(--t--2); letter-spacing:.13em; text-transform:uppercase;
          color: var(--dim); font-weight:700; margin-bottom:.7rem; }
.pie ul { list-style:none; padding:0; display:grid; gap:.35rem; color: var(--dim); }
.pie ul i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.45rem; }
.pie ul a:hover { color: var(--ac); }
.pie__bot { margin-top: var(--s6); padding-top:1rem; border-top:1px solid var(--linea);
            display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
            font-size: var(--t--1); color: var(--dim); }
.redes { display:flex; gap:.4rem; margin-top: var(--s4); }
.redes a { width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
           border:1px solid var(--linea2); color: var(--dim); transition: all var(--dur) var(--ease); }
.redes a:hover { background: var(--ac); border-color: var(--ac); color:#fff; }
.redes svg { width:16px; height:16px; }

/* --------------------------------------------------------------------------
   16. Avisos, cookies y barra de prototipo
   -------------------------------------------------------------------------- */
.avisos { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:120;
          display:grid; gap:.5rem; width:min(420px, calc(100vw - 2rem)); }
.aviso { display:flex; align-items:center; gap:.7rem; padding:.8rem 1.1rem;
         background: var(--ti); color:#fff; border-radius: var(--r-pill);
         box-shadow: var(--sh-3); font-size: var(--t--1); font-weight:600;
         animation: sube .3s var(--ease); }
.aviso svg { width:16px; height:16px; flex:none; color: var(--ac); }
.aviso.fuera { animation: baja .26s var(--ease) forwards; }
@keyframes sube { from { opacity:0; transform: translateY(12px); } }
@keyframes baja { to   { opacity:0; transform: translateY(10px); } }

.cookies { position:fixed; bottom:1rem; left:1rem; z-index:110;
           width:min(420px, calc(100vw - 2rem)); background:#fff;
           border:1px solid var(--linea2); border-radius: var(--r);
           box-shadow: var(--sh-3); padding: var(--s5); display:grid; gap: var(--s4);
           animation: sube .35s var(--ease); }

.demobar { position:fixed; bottom:0; left:0; right:0; z-index:130;
           background: var(--ti); color:#fff; font-size: var(--t--2); font-weight:700;
           letter-spacing:.04em; padding:.5rem var(--gut);
           display:flex; align-items:center; justify-content:center; gap:.8rem; text-align:center; }
.demobar b { color: var(--ac); }
.demobar button { color:inherit; opacity:.6; font-size:1rem; line-height:1; }
.demobar button:hover { opacity:1; }

/* --------------------------------------------------------------------------
   16 bis. Notas del prototipo
   Anotaciones internas sobre la propuesta. Ocultas por defecto para que la
   web se vea como se verá de verdad; se muestran con el interruptor de la
   barra inferior.
   -------------------------------------------------------------------------- */
.nota-proto { display: none !important; }
body.ver-notas .nota-proto { display: revert !important; }
body.ver-notas .nota-proto:is(p, div, li) {
  border-left: 3px solid var(--avis);
  background: #FFF9EC;
  padding: .55rem .8rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: #7A5B12;
}
body.ver-notas .nota-proto::before {
  content: "NOTA DE LA PROPUESTA · ";
  font-size: var(--t--2);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--avis);
}
.demobar__sw {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-pill);
  padding: .12rem .7rem; font-size: var(--t--2); font-weight: 700;
  color: #fff; opacity: .8; transition: all .2s var(--ease);
}
.demobar__sw:hover { opacity: 1; border-color: #fff; }
.demobar__sw[aria-pressed="true"] { background: var(--avis); border-color: var(--avis); color: #17150F; opacity: 1; }

/* --------------------------------------------------------------------------
   17. Utilidades
   -------------------------------------------------------------------------- */
.oculto-vis { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
              overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.saltar { position:absolute; top:0; left:0; transform: translateY(-120%); z-index:200;
          background: var(--ti); color:#fff; padding:.8rem 1.3rem; border-radius:0 0 var(--r-sm) 0;
          transition: transform .2s var(--ease); }
.saltar:focus { transform:none; }
[hidden] { display:none !important; }
.centro { text-align:center; }
.no-scroll { overflow:hidden; }

.m0{margin:0} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)} .mt7{margin-top:var(--s7)} .mt8{margin-top:var(--s8)}
.mb4{margin-bottom:var(--s4)} .mb5{margin-bottom:var(--s5)} .mb6{margin-bottom:var(--s6)}

.rev { opacity:0; transform: translateY(14px);
       transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rev.vis { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rev { opacity:1; transform:none; } }