/* ==========================================================================
   CHAMÁN EDICIONES · Sistema «Prisma»
   paginas.css — composiciones específicas de cada página
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Portada
   -------------------------------------------------------------------------- */
.port { padding-block: clamp(2rem,5vw,4rem) clamp(1.4rem,3vw,2.4rem); }
.port__in { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:900px){ .port__in { grid-template-columns:1fr; } }
.port h1 { font-size:var(--t-6); line-height:1.02; letter-spacing:-.045em; }
/* cada género con el color de SU colección */
.g-poesia    { color: var(--fuego); }
.g-narrativa { color: var(--senda); }
.g-ensayo    { color: var(--trance); }
.g-teatro    { color: var(--escena); }
.port__p { color:var(--dim); margin-top:1rem; max-width:50ch; font-size:var(--t-1); }
.port__ac { display:flex; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap; }

.abanico { position:relative; display:grid; place-items:center; min-height:clamp(15rem,26vw,21rem); }
.abanico a { position:absolute; width:clamp(96px,11vw,152px); aspect-ratio:2/3;
             border-radius:4px; overflow:hidden; box-shadow:var(--sh-3);
             transition:transform .5s var(--ease); }
.abanico img { width:100%; height:100%; object-fit:cover; }
.abanico a:nth-child(1){ transform:translateX(-58%) rotate(-9deg); }
.abanico a:nth-child(2){ transform:translateY(-6%) rotate(1deg); z-index:3; }
.abanico a:nth-child(3){ transform:translateX(58%) rotate(9deg); }
.abanico:hover a:nth-child(1){ transform:translateX(-72%) rotate(-13deg); }
.abanico:hover a:nth-child(3){ transform:translateX(72%) rotate(13deg); }
.abanico a:hover { z-index:5; }

.pastillas { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:860px){ .pastillas { grid-template-columns:1fr 1fr; } }

/* --------------------------------------------------------------------------
   2. Cabecera de página interior
   -------------------------------------------------------------------------- */
.cabpag { border-bottom:1px solid var(--linea); padding-block:clamp(1.4rem,3vw,2.4rem); }
.cabpag h1 { font-size:var(--t-5); margin-top:.7rem; }
.cabpag__p { margin-top:.7rem; max-width:60ch; color:var(--dim); font-size:var(--t-1); }
.cabpag--c { background:color-mix(in srgb, var(--c) 8%, #fff); border-bottom-color:transparent; }
.cabpag--c h1 { color:var(--c); }

/* --------------------------------------------------------------------------
   3. Catálogo con filtros
   -------------------------------------------------------------------------- */
.cat { display:grid; grid-template-columns:246px 1fr; gap:clamp(1.5rem,3vw,2.6rem); align-items:start; }
@media (max-width:1000px){ .cat { grid-template-columns:1fr; } }

.filtros { position:sticky; top:calc(var(--cab) + 1.2rem); display:grid; gap:var(--s4); }
@media (max-width:1000px){
  .filtros { position:fixed; inset:0; z-index:90; background:#fff; padding:var(--s5);
             overflow-y:auto; align-content:start; transform:translateX(-100%);
             transition:transform .32s var(--ease); }
  .filtros.on { transform:none; }
  .filtros__x { display:grid !important; }
}
.filtros__x { display:none; }
.fgrupo { border-bottom:1px solid var(--linea); padding-bottom:var(--s4); }
.fgrupo h3 { font-size:var(--t--2); letter-spacing:.12em; text-transform:uppercase;
             color:var(--dim); font-weight:700; margin-bottom:var(--s3); }
.fops { display:grid; gap:.3rem; }
.fop { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
       font-size:var(--t--1); color:var(--ti2); padding:.15rem 0; cursor:pointer; }
.fop label { display:flex; align-items:center; gap:.5rem; cursor:pointer; flex:1; }
.fop input { accent-color:var(--ac); width:.95rem; height:.95rem; }
.fop i { width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.fop .n { font-size:var(--t--2); color:var(--dim); font-weight:700; }
.fop:hover { color:var(--ti); }

.barra { display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; justify-content:space-between;
         padding-bottom:var(--s4); margin-bottom:var(--s5); border-bottom:1px solid var(--linea); }
.barra__n { font-size:var(--t--1); color:var(--dim); font-weight:700; }
.barra__r { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.vista { display:flex; border:1px solid var(--linea2); border-radius:var(--r-pill); overflow:hidden; }
.vista button { padding:.4rem .7rem; color:var(--dim); display:grid; place-items:center; }
.vista button[aria-pressed="true"] { background:var(--ti); color:#fff; }
.vista svg { width:15px; height:15px; }
.activos { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--s4); }

.cat__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));
             gap:clamp(1.2rem,2vw,1.8rem) clamp(.7rem,1.2vw,1.2rem); }
.cat__grid[data-vista="lista"] { grid-template-columns:1fr; gap:var(--s4); }
.cat__grid[data-vista="lista"] .bk { flex-direction:row; gap:var(--s5);
                                     padding-bottom:var(--s4); border-bottom:1px solid var(--linea); }
.cat__grid[data-vista="lista"] .bk__cover { width:104px; flex:none; }
.cat__grid[data-vista="lista"] .bk__im { width:104px; flex:none; }
.cat__grid[data-vista="lista"] .bk > div:last-child { flex:1; }
.cat__grid[data-vista="lista"] .bk__t { margin-top:0; -webkit-line-clamp:3; }
.cat__grid[data-vista="lista"] .bk__sin { display:block; }
.cat__grid[data-vista="lista"] .bk__quick { display:none; }

/* --------------------------------------------------------------------------
   4. Ficha de libro
   -------------------------------------------------------------------------- */
.prod { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,4rem); align-items:start; }
@media (max-width:900px){ .prod { grid-template-columns:1fr; } }
.prod__gal { position:sticky; top:calc(var(--cab) + 1.6rem); display:grid; gap:var(--s4);
             justify-items:center; }
@media (max-width:900px){ .prod__gal { position:static; } }
.prod__cv { position:relative; width:min(100%,380px); aspect-ratio:2/3; border-radius:var(--r-sm);
            overflow:hidden; box-shadow:var(--sh-3); }
.prod__cv img { width:100%; height:100%; object-fit:cover; }
.prod__cv .fr { position:absolute; left:0; right:0; top:0; height:8px; background:var(--c); z-index:2; }

.prod__inf { display:grid; gap:var(--s4); align-content:start; }
.prod__col { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--t--1);
             font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c); }
.prod__col i { width:11px; height:11px; border-radius:50%; background:var(--c); }
.prod__t { font-size:var(--t-4); line-height:1.06; }
.prod__a { font-size:var(--t-1); color:var(--ti2); }
.prod__a a { color:var(--ac); font-weight:700; }
.prod__pr { display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.prod__pr .now { font-size:var(--t-3); font-weight:800; letter-spacing:-.03em; }
.prod__pr .was { color:var(--dim); text-decoration:line-through; }
.prod__cmp { display:flex; gap:.6rem; flex-wrap:wrap; }
.prod__cmp .bt--p { flex:1; min-width:12rem; }
.prod__st { display:flex; align-items:center; gap:.5rem; font-size:var(--t--1);
            font-weight:700; color:var(--ok); }
.prod__st::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.prod__st[data-st="out"] { color:var(--dim); }
.prod__vent { display:grid; gap:.5rem; font-size:var(--t--1); color:var(--dim);
              border-top:1px solid var(--linea); padding-top:var(--s4); list-style:none; }
.prod__vent li { display:flex; gap:.6rem; align-items:flex-start; }
.prod__vent svg { width:16px; height:16px; flex:none; margin-top:.15em; color:var(--c); }

.poema { border:1px solid var(--linea2); border-left:5px solid var(--c);
         border-radius:var(--r-sm); padding:var(--s5); background:var(--gr); }

/* --------------------------------------------------------------------------
   5. Colecciones y autores
   -------------------------------------------------------------------------- */
.colfila { display:grid; grid-template-columns:1fr 1.45fr; gap:clamp(1.5rem,4vw,3.5rem);
           align-items:center; padding-block:clamp(2rem,4vw,3.4rem); border-bottom:1px solid var(--linea); }
@media (max-width:900px){ .colfila { grid-template-columns:1fr; gap:var(--s5); } }
.colfila__cv { display:flex; }
.colfila__cv a { width:22%; aspect-ratio:2/3; border-radius:4px; overflow:hidden;
                 box-shadow:var(--sh-2); transition:transform .35s var(--ease); }
.colfila__cv a:not(:first-child) { margin-left:-4%; }
.colfila__cv a:hover { transform:translateY(-10px); z-index:3; }
.colfila__cv img { width:100%; height:100%; object-fit:cover; }

.autor-hero { display:grid; grid-template-columns:220px 1fr; gap:clamp(1.5rem,3vw,2.6rem); align-items:start; }
@media (max-width:700px){ .autor-hero { grid-template-columns:1fr; } }
.autor-hero__ph { width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover;
                  background:var(--gr2); filter:grayscale(1);
                  transition:filter .45s var(--ease), box-shadow .45s var(--ease); cursor:pointer; }
.autor-hero__ph:hover, .autor-hero__ph:focus-visible {
  filter:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); }
.autor-hero h1 { font-size:var(--t-5); }

.aut-indice { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));
              gap:2rem 1.2rem; }
.aut-indice .aut { color:var(--ti); }
.aut-indice .aut__ph { background:var(--gr2); }
.aut-indice .aut__k { color:var(--dim); }

/* --------------------------------------------------------------------------
   6. Revista y artículo
   -------------------------------------------------------------------------- */
.post-dest { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:860px){ .post-dest { grid-template-columns:1fr; } }
.post-dest__im { aspect-ratio:4/3; overflow:hidden; border-radius:var(--r); background:var(--gr2); }
.post-dest__im img { width:100%; height:100%; object-fit:cover; }
.post-dest h2 { font-size:var(--t-4); }

.art-cab { max-width:70ch; margin-inline:auto; text-align:center; }
.art-cab h1 { font-size:var(--t-5); margin-top:.7rem; }
.art-im { aspect-ratio:21/9; overflow:hidden; border-radius:var(--r); margin-block:var(--s6);
          background:var(--gr2); }
.art-im img { width:100%; height:100%; object-fit:cover; }
.art-cuerpo { max-width:66ch; margin-inline:auto; }

/* --------------------------------------------------------------------------
   7. Agenda
   -------------------------------------------------------------------------- */
.evento { display:grid; grid-template-columns:82px 1fr auto; gap:var(--s5); align-items:center;
          padding-block:var(--s4); border-bottom:1px solid var(--linea); }
@media (max-width:700px){ .evento { grid-template-columns:66px 1fr; } .evento__cta { grid-column:2; justify-self:start; } }
.evento__f { display:grid; place-items:center; aspect-ratio:1; border-radius:var(--r-sm);
             background:color-mix(in srgb, var(--c) 12%, #fff);
             border:1px solid color-mix(in srgb, var(--c) 30%, transparent); text-align:center; line-height:1; }
.evento__d { font-size:var(--t-3); font-weight:800; letter-spacing:-.04em; color:var(--c); }
.evento__m { font-size:var(--t--2); font-weight:700; letter-spacing:.08em;
             text-transform:uppercase; color:var(--dim); margin-top:.25rem; }
.evento__t { font-size:var(--t-1); font-weight:700; line-height:1.2; }
.evento.pasado { opacity:.55; }

/* --------------------------------------------------------------------------
   8. Cesta y pedido
   -------------------------------------------------------------------------- */
.checkout { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:900px){ .checkout { grid-template-columns:1fr; } }
/* Columna derecha: «Tu cesta» arriba + Resumen (fijo) debajo */
.col-pedido { display:grid; gap:1.4rem; align-items:start; }
.cesta-lat .bk--row { padding-bottom:1rem; }
.cesta-lat .bk__im { width:78px !important; }
.resumen { position:sticky; top:calc(var(--cab) + 1.6rem); border:1px solid var(--linea2);
           border-radius:var(--r); background:var(--gr); padding:var(--s5); display:grid; gap:var(--s4); }
@media (max-width:900px){
  .resumen { position:static; }
  /* En móvil: primero la cesta+resumen, luego el formulario */
  .checkout > div:first-child { order:2; }
  .checkout > .col-pedido { order:1; }
}
.res-lista { display:grid; gap:var(--s3); max-height:18rem; overflow-y:auto; }
.res-fila { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
            font-size:var(--t--1); }
.res-total { font-size:var(--t-2); font-weight:800; letter-spacing:-.03em; }
.pasos { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
         font-size:var(--t--2); font-weight:700; letter-spacing:.08em;
         text-transform:uppercase; color:var(--dim); }
.pasos .on { color:var(--ac); }
.cantidad { display:inline-flex; align-items:center; border:1px solid var(--linea2); border-radius:var(--r-pill); }
.cantidad button { width:28px; height:28px; display:grid; place-items:center; color:var(--dim); }
.cantidad button:hover { color:var(--ac); }
.cantidad span { min-width:26px; text-align:center; font-size:var(--t--1); font-weight:700; }

.opcion { display:flex; gap:.7rem; align-items:flex-start; border:1px solid var(--linea2);
          border-radius:var(--r-sm); padding:.85rem 1rem; cursor:pointer;
          transition:border-color var(--dur) var(--ease); }
.opcion:hover { border-color:var(--ti); }
.opcion input { margin-top:.25em; accent-color:var(--ac); }
.opcion b { font-weight:700; }
.opcion span { display:block; font-size:var(--t--1); color:var(--dim); }

/* Fila de pago con logos a la derecha (aire tipo pasarela moderna) */
.opcion--pago { align-items:center; }
.opcion--pago .opcion__txt { flex:1; color:var(--ti); font-size:var(--t--1); }
.opcion__logos { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end;
                 gap:.35rem; align-items:center; flex-shrink:0; max-width:46%; }
.paylogo { height:26px; width:auto; display:block; }
.pg { font-style:normal; font-weight:800; font-size:.62rem; letter-spacing:.02em; line-height:1;
      padding:.4em .55em; border-radius:5px; border:1px solid var(--linea2); color:#333; background:#fff;
      white-space:nowrap; }
.pg--visa  { color:#1a1f71; border-color:#c9cede; }
.pg--mc    { color:#eb001b; border-color:#f3c9cd; }
.pg--ap    { color:#000; border-color:#ccc; }
.pg--gp    { color:#4285f4; border-color:#c9d9f7; }
.pg--bizum { color:#fff; background:#00c1c1; border-color:#00c1c1; text-transform:lowercase; letter-spacing:.05em; }

/* --------------------------------------------------------------------------
   9. Cuenta
   -------------------------------------------------------------------------- */
.cuenta { display:grid; grid-template-columns:210px 1fr; gap:clamp(1.5rem,3vw,2.6rem); align-items:start; }
@media (max-width:800px){ .cuenta { grid-template-columns:1fr; } }
.cuenta__nav { display:grid; gap:.15rem; }
.cuenta__nav a { padding:.6rem .9rem; border-radius:var(--r-pill); font-size:var(--t--1);
                 font-weight:600; color:var(--ti2); }
.cuenta__nav a:hover { background:var(--gr); }
.cuenta__nav a[aria-current="page"] { background:var(--ti); color:#fff; }
.pedido { border:1px solid var(--linea); border-radius:var(--r); padding:var(--s5); display:grid; gap:var(--s4); }
.pedido__c { display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
             align-items:center; border-bottom:1px solid var(--linea); padding-bottom:var(--s4); }

/* --------------------------------------------------------------------------
   10. B2B, prensa, manuscritos
   -------------------------------------------------------------------------- */
.dividido { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width:860px){ .dividido { grid-template-columns:1fr; } }

.descarga { display:flex; align-items:center; gap:var(--s4); padding:.85rem 1.1rem;
            border:1px solid var(--linea2); border-radius:var(--r-sm); background:#fff;
            transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.descarga:hover { border-color:var(--ac); transform:translateX(3px); }
.descarga svg { width:20px; height:20px; flex:none; color:var(--ac); }
.descarga b { display:block; font-weight:700; font-size:var(--t-0); }
.descarga span { font-size:var(--t--2); color:var(--dim); font-weight:700;
                 letter-spacing:.06em; text-transform:uppercase; }

.pasos-num { counter-reset:p; display:grid; gap:var(--s4); }
.paso { display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; }
.paso::before { counter-increment:p; content:counter(p,decimal-leading-zero);
                font-size:var(--t--1); font-weight:800; color:var(--ac);
                border:1px solid var(--linea2); border-radius:50%;
                width:2.3rem; height:2.3rem; display:grid; place-items:center; }
.paso h3 { font-size:var(--t-1); margin-bottom:.2rem; }
.paso p { font-size:var(--t--1); color:var(--dim); }

.soltar { border:1.5px dashed var(--linea2); border-radius:var(--r); padding:var(--s7) var(--s5);
          text-align:center; display:grid; gap:var(--s3); place-items:center; color:var(--dim);
          cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.soltar:hover, .soltar.encima { border-color:var(--ac); background:var(--ac-sv); color:var(--ti2); }
.soltar svg { width:26px; height:26px; color:var(--ac); }

.mapa { aspect-ratio:16/9; border-radius:var(--r); border:1px solid var(--linea);
        background:repeating-linear-gradient(45deg,var(--gr) 0 12px,var(--gr2) 12px 24px);
        display:grid; place-items:center; color:var(--dim); font-size:var(--t--1);
        text-align:center; padding:var(--s5); }

.dist-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
@media (max-width:1000px){ .dist-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .dist-grid { grid-template-columns:1fr; } }
.dist-c { background:var(--gr); border-radius:var(--r-sm); padding:.85rem 1rem;
          font-size:var(--t--1); color:var(--dim); line-height:1.4; }
.dist-c b { display:block; color:var(--ti); font-weight:700; font-size:var(--t-0); margin-bottom:.15rem; }

/* --------------------------------------------------------------------------
   11. Club de suscripción
   -------------------------------------------------------------------------- */
.planes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--s4); }
.plan { position:relative; display:grid; gap:var(--s4); align-content:start;
        border:1px solid var(--linea2); border-radius:var(--r); padding:var(--s6); background:#fff;
        transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.plan:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
.plan--dest { border:2px solid var(--ac); }
.plan__fl { position:absolute; top:-.7rem; left:var(--s6); }
.plan__pr { font-size:var(--t-4); font-weight:800; letter-spacing:-.04em; line-height:1; }
.plan__pr small { font-size:var(--t--1); color:var(--dim); font-weight:600; letter-spacing:0; }
.plan__f { list-style:none; padding:0; display:grid; gap:.55rem; font-size:var(--t--1); color:var(--ti2); }
.plan__f li { display:flex; gap:.55rem; align-items:flex-start; }
.plan__f svg { width:15px; height:15px; flex:none; margin-top:.25em; color:var(--ac); }

/* --------------------------------------------------------------------------
   12. Error y guía interna
   -------------------------------------------------------------------------- */
.error { min-height:60vh; display:grid; place-items:center; text-align:center; }
.error__n { font-size:clamp(4.5rem,16vw,11rem); font-weight:800; letter-spacing:-.06em;
            line-height:.85; color:var(--ac); }

.guia { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)); gap:var(--s4); }
.guia a { border:1px solid var(--linea); border-radius:var(--r); padding:var(--s4) var(--s5);
          display:grid; gap:.25rem; background:#fff;
          transition:all var(--dur) var(--ease); }
.guia a:hover { border-color:var(--ac); transform:translateY(-3px); box-shadow:var(--sh-1); }
.guia .n { font-size:var(--t--2); font-weight:800; letter-spacing:.1em; color:var(--ac); }
.guia .t { font-size:var(--t-1); font-weight:700; }
.guia .d { font-size:var(--t--1); color:var(--dim); }