/* ═══════════════════════════════════════════════════════════
PRINCE CLUB — CAPA "FORMAL" (reunión con la clienta, 09/09)
Fondo blanco · celeste como segundo color · tipografía formal
Estructura inspirada en libreriaaguilar.com.ar
Se carga DESPUÉS de tienda.css: para revertir, borra el : una sola
de 8:3 recortada a 375 px dejaría fuera medio diseño. */
.promos--con-arte .promo-slide{aspect-ratio:3/2;}
}
/* ═══════════════════════════════════════════════════════════
21. SUBSECCIONES
Fila que solo aparece dentro de Juvenil y Liquidaciones.
Se distingue de los chips de sección: más pequeña y en celeste,
para que se lea como "estás dentro de", no como otro nivel igual.
═══════════════════════════════════════════════════════════ */
.sub-chips{
display:flex;flex-wrap:wrap;gap:7px;
margin:-1rem 0 1.6rem;padding:.75rem 0 0;
border-top:1px solid var(--border);
}
.sub-chips[hidden]{display:none;}
.sub-chip{
border:1px solid var(--sky);background:var(--sky-light);color:var(--sky-dark);
border-radius:var(--radius-pill);cursor:pointer;
font-family:var(--sans);font-size:.74rem;font-weight:600;
letter-spacing:.02em;padding:6px 15px;
transition:background .2s,color .2s;
}
.sub-chip:hover{background:var(--sky);color:#fff;}
.sub-chip.active{background:var(--sky-dark);border-color:var(--sky-dark);color:#fff;}
@media(max-width:768px){
.sub-chips{margin:-.6rem 0 1.2rem;gap:6px;}
.sub-chip{font-size:.7rem;padding:7px 13px;}
}
/* ═══════════════════════════════════════════════════════════
22. REESTRUCTURACIÓN — bocetos de la clienta (11/09)
═══════════════════════════════════════════════════════════ */
/* ── Accesos directos bajo el buscador (boceto 1/3) ───────── */
.accesos{
max-width:1400px;margin:0 auto;padding:.9rem 2.5rem;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
border-bottom:1px solid var(--border);
}
.accesos-link{
display:inline-flex;align-items:center;gap:8px;text-decoration:none;
font-family:var(--sans);font-size:.78rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
border-bottom:1px solid transparent;padding-bottom:2px;
}
.accesos-link:hover{border-bottom-color:var(--ink);}
.accesos-btn{
text-decoration:none;background:var(--sky);color:#fff;
border-radius:var(--radius-pill);padding:10px 22px;
font-family:var(--sans);font-size:.76rem;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;
transition:background .2s;
}
.accesos-btn:hover{background:var(--sky-dark);}
/* ── Cabecera común de las secciones nuevas ───────────────── */
.fila-sec,.cats-sec{max-width:1400px;margin:0 auto;padding:3.5rem 2.5rem 0;}
.fila-sec[hidden],.cats-sec[hidden]{display:none;}
.fila-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:1rem;flex-wrap:wrap;
border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1.6rem;
}
.fila-titulo{
font-family:var(--serif);font-size:2.1rem;font-weight:500;
color:var(--ink);line-height:1.1;margin:0;
}
.fila-sub{font-size:.85rem;color:var(--muted);margin:.25rem 0 0;}
.fila-ver{
flex:0 0 auto;cursor:pointer;background:none;border:1px solid var(--border-dark);
border-radius:var(--radius-pill);padding:9px 20px;
font-family:var(--sans);font-size:.74rem;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
transition:background .2s,border-color .2s,color .2s;
}
.fila-ver:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
/* ── Fila deslizable de libros (boceto 2/3) ───────────────────
scroll-snap nativo otra vez: se arrastra con el dedo sin gestos. */
.fila-track{
display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
padding-bottom:1.2rem;
scrollbar-width:thin;scrollbar-color:var(--border-dark) transparent;
}
.fila-track::-webkit-scrollbar{height:6px;}
.fila-track::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:3px;}
.fila-card{
flex:0 0 180px;scroll-snap-align:start;cursor:pointer;
background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);
overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.fila-card:hover{border-color:var(--sky);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.fila-cover{
aspect-ratio:2/3;background:#fff;padding:12px 12px 8px;
display:flex;align-items:center;justify-content:center;
border-bottom:1px solid var(--border);
}
.fila-cover img{width:100%;height:100%;object-fit:contain;display:block;}
.fila-sinportada{font-size:2rem;opacity:.35;}
.fila-info{padding:.75rem .85rem .9rem;}
.fila-t{
font-family:var(--serif);font-size:1.02rem;font-weight:500;
line-height:1.22;color:var(--ink);margin:0 0 3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fila-a{font-size:.72rem;color:var(--muted);margin:0 0 6px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fila-p{font-size:1.02rem;font-weight:700;color:var(--ink);margin:0;}
.fila-p s{font-size:.75rem;font-weight:500;color:var(--muted2);margin-left:4px;}
/* ── Franja de 5 beneficios (boceto 2/3) ──────────────────────
Título en negrita y explicación en tono suave, como lo anotó
la clienta al margen del dibujo. */
.benef{max-width:1400px;margin:3rem auto 0;padding:0 2.5rem;}
.benef-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
background:var(--border);border:1px solid var(--border);border-radius:var(--radius-card);
overflow:hidden;
}
.benef-item{
background:#fff;padding:1.2rem 1.1rem;
display:flex;align-items:flex-start;gap:11px;
}
.benef-ico{font-size:1.5rem;line-height:1;flex:0 0 auto;}
.benef-item strong{
display:block;font-family:var(--sans);font-size:.82rem;font-weight:700;
color:var(--ink);margin-bottom:3px;
}
.benef-item span{display:block;font-size:.76rem;line-height:1.45;color:var(--muted);}
/* ── Mosaico de categorías (boceto 3/3) ───────────────────── */
.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;}
.cat-tile{
cursor:pointer;text-align:left;background:#fff;
border:1px solid var(--border);border-radius:var(--radius-card);
padding:1.1rem 1rem;
display:flex;flex-direction:column;gap:5px;
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.cat-tile:hover{border-color:var(--sky);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.cat-tile-ico{font-size:1.6rem;line-height:1;}
.cat-tile-n{font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--ink);line-height:1.2;}
.cat-tile-c{font-size:.72rem;font-weight:600;color:var(--sky-dark);letter-spacing:.04em;}
/* ── Beneficios, bloque explicado (boceto 3/3, punto 4) ───── */
.benef2{background:var(--paper2);border-top:1px solid var(--border);margin-top:4rem;}
.benef2-inner{max-width:1400px;margin:0 auto;padding:3.5rem 2.5rem;}
.benef2-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:1.6rem;margin-top:1.8rem;
}
.benef2-item h3{
font-family:var(--serif);font-size:1.25rem;font-weight:600;
color:var(--ink);margin:0 0 .4rem;
}
.benef2-item p{font-size:.86rem;line-height:1.65;color:var(--ink2);margin:0;}
/* ── Preguntas frecuentes (boceto 3/3, punto 5) ───────────── */
.faq-sec{background:#fff;border-top:1px solid var(--border);}
.faq-inner{max-width:900px;margin:0 auto;padding:3.5rem 2.5rem;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-of-type{border-top:1px solid var(--border);margin-top:1.8rem;}
.faq-item summary{
list-style:none;cursor:pointer;user-select:none;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:1.05rem .2rem;
font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
content:"+";flex:0 0 auto;font-size:1.3rem;font-weight:400;
color:var(--sky-dark);line-height:1;
}
.faq-item[open] summary::after{content:"\2212";}
.faq-item summary:hover{color:var(--sky-dark);}
.faq-item p{
margin:0;padding:0 .2rem 1.2rem;
font-size:.87rem;line-height:1.7;color:var(--ink2);
}
.faq-item a{color:var(--sky-dark);font-weight:600;}
/* ── Móvil ────────────────────────────────────────────────── */
@media(max-width:768px){
.accesos{padding:.7rem 1rem;gap:.6rem;}
.accesos-link{font-size:.68rem;letter-spacing:.04em;}
.accesos-btn{padding:9px 15px;font-size:.68rem;letter-spacing:.04em;}
.fila-sec,.cats-sec{padding:2.4rem 1rem 0;}
.fila-titulo{font-size:1.6rem;}
.fila-head{padding-bottom:.8rem;margin-bottom:1.1rem;}
.fila-ver{padding:8px 15px;font-size:.68rem;}
/* La fila se sale del margen a propósito: así se ve que hay más
libros a la derecha y se entiende que se arrastra. */
.fila-track{margin:0 -1rem;padding:0 1rem 1rem;gap:11px;}
/* Dos por pantalla y el resto deslizando. Con 142px entraban dos y
media: la tercera cortada no se lee y hace la fila mas ruidosa.
El calc reparte el ancho justo menos el hueco del medio. */
.fila-card{flex-basis:calc(50% - 6px);}
.fila-track{scroll-snap-type:x mandatory;}
.fila-t{font-size:.9rem;}
.benef{margin-top:2.2rem;padding:0 1rem;}
.benef-grid{grid-template-columns:1fr 1fr;}
.benef-item{padding:.9rem .8rem;gap:8px;flex-direction:column;}
.benef-ico{font-size:1.3rem;}
.benef-item strong{font-size:.76rem;}
.benef-item span{font-size:.7rem;}
.cats-grid{grid-template-columns:1fr 1fr;gap:9px;}
.cat-tile{padding:.9rem .8rem;}
.cat-tile-n{font-size:1rem;}
.benef2{margin-top:2.6rem;}
.benef2-inner,.faq-inner{padding:2.4rem 1rem;}
.benef2-grid{gap:1.2rem;margin-top:1.3rem;}
.faq-item summary{font-size:.88rem;padding:.95rem .1rem;}
}
/* ── 23. FUERA EL HERO ───────────────────────────────────
El boceto 1/3 no lo tiene: despues del buscador y los accesos
viene directo el carrusel, y su diapositiva 1/6 dice justo lo
mismo que decia el hero ("Tus libros favoritos a precios
increibles"). Eran 832 px de mensaje repetido antes de llegar
a los libros. Para recuperarlo, borra esta regla. */
.hero{display:none !important;}
/* ── 24. FUERA LA BANDA DORADA DE SHALOM ─────────────────
Es de la paleta antigua (negro y ambar) y dice lo mismo que ya
sale en la barrita de arriba, en la diapositiva 5/6 del carrusel
y en la franja de beneficios: tres veces el mismo envio. El
boceto no la incluye. Para recuperarla, borra esta regla. */
.envios-band{display:none !important;}
/* ═══════════════════════════════════════════════════════════
25. CABECERA COMPACTA (como libreriaaguilar.com.ar)
Fila 1: logo · buscador · cuenta y carrito
Fila 2: enlaces · envíos y compramos libros
Antes el buscador y los accesos ocupaban una franja propia
cada uno: eran ~139 px de alto solo en cabecera.
═══════════════════════════════════════════════════════════ */
nav{
display:flex !important;
align-items:center;
flex-wrap:wrap;
gap:1.4rem;
height:auto !important;
padding:.85rem 2.5rem;
}
.nav-logo{flex:0 0 auto;margin:0;}
.nav-right{flex:0 0 auto;margin-left:auto;}
/* El buscador deja de ser una franja y pasa a ser la columna
elástica del medio. */
.navsearch{
position:static !important;
flex:1 1 320px;min-width:0;
background:none;border:none;padding:0;
display:flex;justify-content:center;
}
.navsearch-box{max-width:560px;}
/* ── Segunda fila ─────────────────────────────────────────── */
.navrow2{
position:sticky;top:0;z-index:99;
background:#fff;border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
gap:1.5rem;flex-wrap:wrap;
padding:.55rem 2.5rem;
}
.navrow2 .nav-left{
display:flex;align-items:center;gap:1.5rem;
flex-wrap:wrap;position:static;padding:0;
}
/* Los accesos ya no son una franja: van al extremo derecho. */
.navrow2 .accesos{
max-width:none;margin:0;padding:0;border:none;
flex:0 0 auto;gap:1.4rem;
}
/* La barra de progreso vivía pegada al nav; ahora la fila 2 es la
que queda arriba al desplazarse. */
@media(min-width:769px){
nav{position:relative;}
.navrow2{top:0;}
}
/* ── Móvil ────────────────────────────────────────────────────
Como Aguilar: arriba hamburguesa, logo y carrito; el buscador se
pasa solo a su renglón porque el nav envuelve. */
@media(max-width:768px){
nav{
padding:.6rem 1rem;gap:.7rem;row-gap:.7rem;
}
.nav-logo{order:2;margin:0 auto;}
.nav-right{order:3;margin-left:0;}
.navsearch{order:4;flex:1 1 100%;}
.navsearch-box{max-width:none;}
/* La hamburguesa a la izquierda del todo, como en el boceto */
.hamburger-btn{order:1;flex:0 0 auto;}
nav{justify-content:space-between;}
.nav-logo{order:2;margin:0;}
.navrow2{
padding:.5rem 1rem;gap:.6rem;
/* Los enlaces se arrastran de lado en vez de apilarse */
flex-wrap:nowrap;overflow-x:auto;
scrollbar-width:none;
}
.navrow2::-webkit-scrollbar{display:none;}
.navrow2 .nav-left{flex-wrap:nowrap;gap:1.1rem;}
.navrow2 .nav-left a{white-space:nowrap;}
.navrow2 .accesos{flex-wrap:nowrap;gap:.8rem;}
.accesos-link{white-space:nowrap;}
.accesos-btn{white-space:nowrap;}
}
/* ═══════════════════════════════════════════════════════════
26. ICONOS (Lucide, incrustados en el HTML)
Los emoji se veían distintos en cada sistema: un camión en
iPhone, en Android y en Windows son tres dibujos diferentes,
así que la tienda no se veía igual según con qué entrara el
cliente. Estos son el mismo trazo en todas partes y toman el
color del texto.
Se quitaron además los decorativos —nav, chips, menú— porque
lo minimalista es no ponerlos, no ponerlos más bonitos.
═══════════════════════════════════════════════════════════ */
.ic{
width:1.05em;height:1.05em;
flex:0 0 auto;vertical-align:-0.16em;
pointer-events:none;
/* Los del sprite llevan solo los trazos: fill y stroke viven
en el original, que no se copia. Sin esto los iconos se
rellenan de negro y salen como manchas. */
fill:none;
stroke:currentColor;
stroke-width:1.75; /* más fino que el 2 de Lucide: pega con la serif */
stroke-linecap:round;
stroke-linejoin:round;
}
.benef-ico{width:26px;height:26px;stroke-width:1.5;color:var(--sky-dark);}
.navsearch-ico{width:17px;height:17px;color:var(--muted);stroke-width:2;}
.cart-btn .ic,.wl-btn .ic{width:19px;height:19px;}
.wl-btn{color:var(--ink);}
.wl-btn:hover{color:var(--sky-dark);}
/* Sin emoji, los chips y el menú se leen como texto: se compensa
un poco el espaciado que antes daba el icono. */
.cat-chip{letter-spacing:.01em;}
.mobile-menu a{letter-spacing:.01em;}
@media(max-width:768px){
.benef-ico{width:22px;height:22px;}
}
/* ═══════════════════════════════════════════════════════════
27. WHATSAPP CON SU TEXTO · fuera el asistente
El boceto 1/3 pide "chatear con nosotros" al lado del boton
verde, y la clienta pidio quitar el "¿Te ayudo a elegir?".
Ya no se cargan asistente.js ni asistente.css.
═══════════════════════════════════════════════════════════ */
.wa-fab{
width:auto;height:auto;border-radius:var(--radius-pill);
gap:9px;padding:12px 20px 12px 15px;
font-family:var(--sans);
}
.wa-fab svg{width:24px;height:24px;flex:0 0 24px;}
.wa-fab-txt{
color:#fff;font-size:.84rem;font-weight:700;
letter-spacing:.01em;white-space:nowrap;
}
.wa-fab:hover{transform:translateY(-2px);}
@media(max-width:768px){
/* En el celular el texto se come media pantalla sobre el catálogo:
queda solo el círculo, que es lo que todo el mundo reconoce. */
.wa-fab{
bottom:1.1rem;right:1.1rem;
width:54px;height:54px;padding:0;border-radius:50%;
justify-content:center;
}
.wa-fab-txt{display:none;}
.wa-fab svg{width:28px;height:28px;flex:0 0 28px;}
}
/* ── Modal de Envíos y retiros ───────────────────────────── */
.env-zonas{
display:grid;gap:10px;margin:.8rem 0 1.4rem;
}
.env-zona{
border:1px solid var(--border);border-left:3px solid var(--sky);
border-radius:var(--radius-sm);padding:.7rem .9rem;background:var(--paper2);
}
.env-hora{
font-family:var(--sans);font-size:.76rem;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;color:var(--sky-dark);
margin-bottom:3px;
}
.env-distritos{font-size:.82rem;line-height:1.55;color:var(--ink2);}
.env-pie{
margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--border);
font-size:.85rem;color:var(--muted);
}
.env-pie a{color:var(--sky-dark);font-weight:700;}
/* ── 28. VALORES Y PRINCIPIOS ─────────────────────────────────────
Reutiliza la rejilla de .benef2: lo unico propio es el numero, que
ordena la lectura sin gastar un icono mas. El bloque va sobre papel
blanco para que no queden dos bandas del mismo tono seguidas. */
.valores-sec{background:var(--paper);margin-top:0;}
.valores-sec .benef2-item{position:relative;padding-top:.4rem;}
.val-num{
display:block;
font-family:var(--serif);
font-size:1.5rem;
line-height:1;
color:var(--sky);
margin-bottom:.5rem;
letter-spacing:.02em;
}
.valores-sec .benef2-item strong{color:var(--ink);font-weight:700;}
/* ── 29. CAJA LECTORA ─────────────────────────────────────────────
Punto 8 de la hoja. Es una sola llamada, no una rejilla: centrada y
estrecha para que se lea de un vistazo. El numero de libros manda,
por eso va en serif grande. */
.caja-sec{background:var(--paper2);border-top:1px solid var(--border);}
.caja-inner{
max-width:640px;margin:0 auto;padding:3.2rem 2rem;text-align:center;
}
.caja-tag{
font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--sky-dark);margin:0 0 .5rem;
}
.caja-sec .fila-titulo{margin-bottom:1.1rem;}
.caja-num{
font-family:var(--serif);font-size:1.35rem;line-height:1.35;
color:var(--ink);margin:0 0 .6rem;
}
.caja-num strong{font-size:2.1rem;color:var(--sky-dark);}
.caja-p{
font-size:.88rem;line-height:1.7;color:var(--ink2);
margin:0 auto 1.4rem;max-width:46ch;
}
.caja-btn{
font-family:var(--sans);font-size:.85rem;font-weight:700;
padding:.75rem 1.6rem;border:none;border-radius:999px;cursor:pointer;
background:var(--sky-dark);color:#fff;
transition:background .15s ease;
}
.caja-btn:hover{background:var(--sky);}
@media (max-width:600px){
.caja-inner{padding:2.4rem 1.3rem;}
.caja-num strong{font-size:1.8rem;}
}
/* ── 30. AVISO DE LO QUE NO SE PUBLICA ────────────────────────────
Dentro del apartado de estados. Va con el amarillo de aviso y no con
el celeste de marca: es un limite, no una categoria mas, y no debe
leerse como si fuera un cuarto estado. */
.estados-aviso{
margin-top:1.1rem;padding:.75rem .95rem;
background:var(--gold-light);
border-left:3px solid var(--gold-dark);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-size:.82rem;line-height:1.6;color:var(--ink2);
}
.estados-aviso strong{color:var(--ink);}
.estados-item em{font-style:italic;color:var(--muted);}
/* ── 31. LOS CUATRO PASOS DE LA CAJA LECTORA ──────────────────────
Lista numerada de verdad (), no cuatro cajas sueltas: el orden
importa, es un proceso. El numero se dibuja con un contador para que
no haya que escribirlo a mano en el HTML. */
.caja-pasos{
list-style:none;counter-reset:paso;
margin:2.2rem 0 0;padding:0;text-align:left;
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:1.5rem 1.8rem;
}
.caja-pasos li{counter-increment:paso;position:relative;padding-top:2.1rem;}
.caja-pasos li::before{
content:counter(paso);
position:absolute;top:0;left:0;
width:1.7rem;height:1.7rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--sky-dark);color:#fff;
font-family:var(--sans);font-size:.78rem;font-weight:700;
}
.caja-pasos h3{
font-family:var(--serif);font-size:1.08rem;font-weight:600;
color:var(--ink);margin:0 0 .3rem;
}
.caja-pasos p{font-size:.84rem;line-height:1.6;color:var(--ink2);margin:0;}
.caja-pasos strong{color:var(--ink);}
@media (max-width:600px){
.caja-pasos{gap:1.3rem;margin-top:1.8rem;}
}
/* ── 32. TABLA FOXING vs HONGO ────────────────────────────────────
Cinco filas comparando dos cosas que se confunden. En movil no cabe
de ninguna manera, asi que se desliza dentro de su propia caja: la
pagina nunca se mueve en horizontal. */
.faq-tabla-wrap{
overflow-x:auto;margin:.9rem 0 1rem;
-webkit-overflow-scrolling:touch;
border:1px solid var(--border);border-radius:var(--radius-sm);
}
.faq-tabla{
border-collapse:collapse;width:100%;min-width:520px;
font-size:.82rem;line-height:1.55;
}
.faq-tabla th,.faq-tabla td{
padding:.6rem .8rem;text-align:left;vertical-align:top;
border-bottom:1px solid var(--border);
}
.faq-tabla thead th{
background:var(--paper2);color:var(--ink);
font-family:var(--serif);font-size:.95rem;font-weight:600;
border-bottom:2px solid var(--border);
}
/* El nombre coloquial, debajo y mas discreto que el tecnico */
.faq-tabla thead th span{
display:block;font-family:var(--sans);font-size:.68rem;font-weight:400;
color:var(--muted);text-transform:none;letter-spacing:0;
}
.faq-tabla tbody th{
width:5.5rem;color:var(--sky-dark);font-weight:700;font-size:.76rem;
text-transform:uppercase;letter-spacing:.06em;
}
.faq-tabla tbody tr:last-child th,
.faq-tabla tbody tr:last-child td{border-bottom:none;}
.faq-tabla td strong{color:var(--ink);}
/* ── 33. LO QUE NO SE COMPRA ──────────────────────────────────────
Decirlo tan claro como lo que si se compra ahorra fotos inutiles y
un "no" despues de haberlas hecho. Los chips van en gris y tachados
con una linea, para que se distingan de un vistazo de los de arriba. */
.vendenos-no-title{margin-top:1.8rem;}
.vendenos-chips-no span{
background:transparent;
border:1px dashed var(--border);
color:var(--muted);
text-decoration:line-through;
text-decoration-color:var(--border);
}
.vendenos-pie{
margin-top:.9rem;font-size:.82rem;color:var(--muted);
}
/* ── 34. PIE ──────────────────────────────────────────────────────
Estructura de Aguilar: datos de la tienda, plegables, y el boletin.
En escritorio las tres columnas; en movil una debajo de otra, que es
como se lee un pie en el telefono. */
.pie-top{
max-width:1400px;margin:0 auto;padding:3rem 2.5rem 2rem;
display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:2.5rem 3rem;
}
.pie-marca h2{
font-family:var(--serif);font-size:1.5rem;font-weight:600;
margin:0 0 1rem;color:inherit;
}
.pie-marca h2 em{font-style:italic;}
.pie-dato{font-size:.85rem;line-height:1.6;margin:0 0 .45rem;opacity:.82;}
.pie-dato a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.pie-redes{display:flex;gap:.7rem;margin-top:1.2rem;}
.pie-redes a{
width:2.2rem;height:2.2rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1px solid currentColor;opacity:.7;color:inherit;
transition:opacity .15s ease;
}
.pie-redes a:hover{opacity:1;}
.pie-redes .ic{width:1.05em;height:1.05em;}
/* Plegables */
.pie-acc{border-bottom:1px solid rgba(255,255,255,.18);}
.pie-acc summary{
list-style:none;cursor:pointer;padding:.85rem 0;
font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
display:flex;align-items:center;justify-content:space-between;
}
.pie-acc summary::-webkit-details-marker{display:none;}
.pie-acc summary::after{content:'+';font-size:1.1rem;font-weight:400;opacity:.7;}
.pie-acc[open] summary::after{content:'\2013';}
.pie-acc-body{display:flex;flex-direction:column;gap:.5rem;padding:0 0 1rem;}
.pie-acc-body a{
font-size:.85rem;color:inherit;opacity:.78;text-decoration:none;
}
.pie-acc-body a:hover{opacity:1;text-decoration:underline;}
/* Boletin */
.pie-boletin h3{
font-family:var(--sans);font-size:.78rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem;
}
.pie-boletin > p{font-size:.85rem;line-height:1.6;margin:0 0 1rem;opacity:.82;}
.pie-form{display:flex;gap:0;max-width:340px;}
.pie-form input{
flex:1;min-width:0;padding:.7rem .9rem;font-family:var(--sans);font-size:.85rem;
border:1px solid rgba(255,255,255,.35);border-right:none;
border-radius:var(--radius-sm) 0 0 var(--radius-sm);
background:rgba(255,255,255,.08);color:inherit;
}
.pie-form input::placeholder{color:inherit;opacity:.55;}
.pie-form button{
padding:.7rem 1.3rem;border:none;cursor:pointer;
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
background:var(--sky);color:#fff;
font-family:var(--sans);font-size:.78rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
}
.pie-form button:hover{background:var(--sky-dark);}
.pie-form button:disabled{opacity:.6;cursor:default;}
.pie-consent{
display:flex;gap:.5rem;align-items:flex-start;
margin-top:.7rem;max-width:340px;cursor:pointer;
font-size:.74rem;line-height:1.5;opacity:.72;
}
.pie-consent input{margin-top:.15rem;flex:0 0 auto;cursor:pointer;}
.pie-bol-msg{margin:.7rem 0 0;font-size:.8rem;font-weight:600;max-width:340px;}
.pie-bol-err{color:#FFC9C0;}
@media (max-width:900px){
.pie-top{grid-template-columns:1fr;gap:1.8rem;padding:2.5rem 1.4rem 1.5rem;}
.pie-form,.pie-consent,.pie-bol-msg{max-width:none;}
}
/* ── 35. TEXTO QUE NO SE VEIA ─────────────────────────────────────
Dos sitios con el texto del mismo color que su fondo.
.about: el bloque 501 de arriba lo pasa a fondo blanco, pero sus
textos venian de tienda.css en BLANCO, porque alli el fondo era
coral. Resultado: blanco sobre blanco desde el rediseño. Se veia
solo el , que es crema.
footer: pone background-color pero nunca color, asi que heredaba
--ink del body sobre un fondo --ink. Antes no se notaba porque cada
hijo del pie traia su color puesto a mano. */
.about .a-h2{color:var(--ink);}
.about .a-h2 em{color:var(--sky-dark);}
.about .a-p{color:var(--ink2);}
.about .a-soc a{color:var(--sky-dark);}
/* El corazon era crema sobre coral; sobre blanco no se veia */
.about .ab-heart path,
.about .ab-heart text{stroke:var(--sky-light);fill:var(--sky-light);}
.about .ab-heart path{fill:none;}
footer{color:var(--paper);}
/* ── 36. BUSCADOR: LA LUPA A LA DERECHA ───────────────────────────
Antes habia lupa a la izquierda Y un boton que decia "Buscar": dos
cosas para lo mismo. Queda solo el boton, con la lupa dentro, que es
donde la busca el dedo. Redondo, porque ya no hay palabra que encajar.
El aria-label lo sigue anunciando a quien use lector de pantalla. */
.navsearch-box{padding-left:18px;}
.navsearch-btn{
width:40px;height:40px;padding:0;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
}
.navsearch-btn .ic{width:18px;height:18px;stroke-width:2;color:#fff;}
@media(max-width:768px){
.navsearch-box{padding-left:15px;}
.navsearch-btn{width:36px;height:36px;padding:0;}
.navsearch-btn .ic{width:16px;height:16px;}
}
/* ── 37. ESTADO DEL EJEMPLAR EN LA FICHA ──────────────────────────
Debajo de la portada. La columna izquierda se quedaba a medias
mientras la derecha crecia con la sinopsis; ahora ese hueco cuenta
como esta el ejemplar, que es lo que decide la compra en un libro de
segundo uso. Cuando se suban fotos y video, van aqui. */
.bdl-estado-panel{
margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem;
}
.bdl-ep-label{
font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);margin:0 0 .3rem;
}
.bdl-ep-nombre{
font-family:var(--serif);font-size:1.12rem;font-weight:600;
color:var(--ink);margin:0 0 .35rem;
}
.bdl-ep-desc{font-size:.8rem;line-height:1.6;color:var(--ink2);margin:0;}
/* El sitio donde luego ira el video de verdad */
.bdl-ep-video{
display:block;text-decoration:none;
padding:.8rem .9rem;border-radius:var(--radius-sm);
background:#fff;border:1px dashed var(--sky);
transition:background .15s ease;
}
.bdl-ep-video:hover{background:var(--sky-light);}
.bdl-ep-video-t{
display:block;font-size:.85rem;font-weight:700;color:var(--sky-dark);
margin-bottom:.15rem;
}
.bdl-ep-video-d{display:block;font-size:.76rem;line-height:1.5;color:var(--ink2);}
.bdl-ep-notas{
list-style:none;margin:0;padding:.9rem 0 0;
border-top:1px solid var(--border);
display:flex;flex-direction:column;gap:.45rem;
}
.bdl-ep-notas li{
position:relative;padding-left:1rem;
font-size:.76rem;line-height:1.5;color:var(--ink2);
}
.bdl-ep-notas li::before{
content:'';position:absolute;left:0;top:.5em;
width:5px;height:5px;border-radius:50%;background:var(--sky);
}
.bdl-ep-notas strong{color:var(--ink);}
@media(max-width:768px){
.bdl-estado-panel{max-width:270px;margin:1.4rem auto 0;}
}
/* ── 38. LA PORTADA LLENA SU MARCO ────────────────────────────────
El marco estaba clavado a aspect-ratio 2/3 con object-fit:contain y
6px de relleno. Como casi ninguna portada mide exactamente 2:3, la
imagen quedaba encajada dentro dejando franjas blancas, sobre todo
abajo.
Ahora manda la imagen: alto automatico, asi que el marco toma la
forma exacta de la portada. Llena del todo sin recortar nada y sin
estirarla, que es lo que habria pasado con object-fit:cover. */
.bdl-main-wrap{aspect-ratio:auto;min-height:0;}
.bdl-main-img{
width:100%;height:auto !important;display:block;
padding:0;
/* contain y no fill: si por lo que sea la altura acabara saliendo de
otra regla, contain deja franjas -- feo pero honesto -- mientras que
fill estira la portada. Una portada estirada se nota y queda barata. */
object-fit:contain;
}
/* El hueco de cuando no hay portada si necesita forma propia: no tiene
imagen de la que sacarla. */
.bdl-main-ph{aspect-ratio:2/3;height:auto;}
/* ── 39. CUANDO EL CATALOGO NO CARGA ──────────────────────────────
Antes se quedaba en "Cargando catalogo..." para siempre. Ahora, a los
12 segundos, dice lo que pasa y ofrece salida. */
.loading-falla{padding:3rem 1.5rem;text-align:center;}
.loading-falla p{margin:0 0 .5rem;color:var(--ink2);font-size:.9rem;line-height:1.6;}
.loading-falla strong{color:var(--ink);font-size:1rem;}
.btn-reintentar{
margin-top:1rem;padding:.7rem 1.8rem;border:none;cursor:pointer;
border-radius:var(--radius-pill);background:var(--sky-dark);color:#fff;
font-family:var(--sans);font-size:.85rem;font-weight:700;
}
.btn-reintentar:hover{background:var(--sky);}
.loading-falla-wa{margin-top:1.2rem!important;font-size:.82rem!important;}
.loading-falla-wa a{color:var(--sky-dark);font-weight:700;}
/* ── 40. DISTINTIVO DE PACK ───────────────────────────────────────
Una saga de diez tomos y un tomo suelto se veian igual dentro del
universo. Con el ejemplo de la clienta -- diez tomos de Harry Potter
juntos, mas el tomo 9 repetido dos veces por separado -- salian tres
tarjetas identicas a distinto precio, que parece un error. */
.pack-tag{
position:absolute;left:0;bottom:0;z-index:3;
background:var(--ink);color:#fff;
font-family:var(--sans);font-size:.56rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
padding:4px 9px;border-radius:0 var(--radius-sm) 0 0;
}
/* ── 41. ULTIMA UNIDAD ────────────────────────────────────────────
Antes esto ocupaba la cinta y tapaba el estado del libro en el 95%
de las fichas. Ahora va aparte, discreto, y solo cuando de verdad
queda una: un aviso que sale siempre no avisa de nada. */
.ult-uno{
position:absolute;right:0;top:2.1rem;z-index:3;
background:var(--low-stock,#B8860B);color:#fff;
font-family:var(--sans);font-size:.54rem;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;
padding:3px 8px;border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}
/* ── 42. LOS NUEVE MOTIVOS ────────────────────────────────────────
Eran nueve bloques de texto en cuatro columnas: uno se quedaba solo
en la ultima fila y, sin nada que cortara, la seccion se leia como un
muro. Con tres columnas caben 3x3 justos. El icono no decora: da
donde descansar la vista al saltar de un motivo al siguiente. */
.porque-grid{
grid-template-columns:repeat(3,1fr);
gap:2.2rem 2.6rem;
margin-top:2.4rem;
}
.porque-grid .benef2-item{
padding-left:3.1rem;position:relative;min-height:2.4rem;
}
.porque-ico{
position:absolute;left:0;top:.1rem;
width:1.55rem;height:1.55rem;
color:var(--sky-dark);stroke-width:1.5;
}
/* Una linea fina bajo cada fila ordena la lectura sin encerrar nada
en cajas, que con nueve elementos pesaria demasiado. */
.porque-grid .benef2-item::after{
content:'';position:absolute;left:0;right:-1.3rem;bottom:-1.1rem;
height:1px;background:var(--border);
}
.porque-grid .benef2-item:nth-last-child(-n+3)::after{content:none;}
.porque-grid h3{margin-bottom:.35rem;}
.porque-grid p{font-size:.845rem;}
@media(max-width:1000px){
.porque-grid{grid-template-columns:repeat(2,1fr);gap:1.9rem 2.2rem;}
.porque-grid .benef2-item:nth-last-child(-n+3)::after{content:'';}
.porque-grid .benef2-item:nth-last-child(-n+2)::after{content:none;}
}
@media(max-width:620px){
.porque-grid{grid-template-columns:1fr;gap:1.6rem;}
.porque-grid .benef2-item{padding-left:2.7rem;}
.porque-grid .benef2-item::after{right:0;bottom:-.8rem;}
.porque-grid .benef2-item:nth-last-child(-n+2)::after{content:'';}
.porque-grid .benef2-item:last-child::after{content:none;}
}
/* ── 43. CAJA LECTORA: QUE OCUPE LO QUE TIENE ─────────────────────
La seccion vivia en 640px dentro de una pagina de 1400: media
pantalla en blanco a cada lado, y los cuatro pasos en 2x2 dejando el
resto vacio. Ahora ocupa el ancho de las demas secciones y los pasos
van en una sola fila: son un proceso -- compra, guarda, acumula,
recibe -- y en fila se leen como tal. */
.caja-inner{max-width:1180px;padding:3.4rem 2.5rem 3.8rem;}
/* El texto de arriba sigue estrecho: una linea larga no se lee. */
.caja-tag,.caja-sec .fila-titulo{max-width:none;}
.caja-cuerpo{max-width:620px;margin:0 auto;}
.caja-num{margin-bottom:.5rem;}
.caja-pasos{
grid-template-columns:repeat(4,1fr);
gap:2rem 2.2rem;
margin-top:3rem;
padding-top:2.4rem;
border-top:1px solid var(--border);
}
/* Una linea que une los pasos: deja ver que es una secuencia y no
cuatro avisos sueltos. Se corta antes del ultimo. */
.caja-pasos li::after{
content:'';position:absolute;top:.85rem;left:2.3rem;right:-2.2rem;
height:1px;background:var(--border);
}
.caja-pasos li:last-child::after{content:none;}
@media(max-width:1000px){
.caja-pasos{grid-template-columns:repeat(2,1fr);gap:1.8rem 2rem;}
.caja-pasos li:nth-child(2n)::after{content:none;}
}
@media(max-width:600px){
.caja-inner{padding:2.6rem 1.3rem 3rem;}
.caja-pasos{grid-template-columns:1fr;gap:1.5rem;margin-top:2.2rem;padding-top:1.8rem;}
.caja-pasos li::after{content:none;}
}
/* ── 44. PREGUNTAS FRECUENTES EN DOS COLUMNAS ─────────────────────
Diez desplegables en una columna de 900px dentro de una pagina de
1400: una lista larga y delgada con media pantalla vacia al lado.
Ahora el titulo se va a un lado y las preguntas al otro, y el hueco
que sobraba lo ocupa lo unico que falta cuando no encuentras tu
duda: el WhatsApp. */
.faq-inner{
max-width:1180px;
display:grid;grid-template-columns:320px 1fr;
gap:3.5rem;align-items:start;
}
/* Se queda a la vista mientras se recorren las preguntas. */
.faq-aside{position:sticky;top:6.5rem;}
.faq-aside .fila-sub{margin-bottom:0;}
.faq-ayuda{
margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--border);
}
.faq-ayuda p{
margin:0 0 .9rem;font-size:.88rem;line-height:1.6;color:var(--ink2);
font-weight:600;
}
.faq-ayuda-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.7rem 1.2rem;border-radius:var(--radius-pill);
background:var(--sky-dark);color:#fff;text-decoration:none;
font-family:var(--sans);font-size:.83rem;font-weight:700;
transition:background .15s ease;
}
.faq-ayuda-btn:hover{background:var(--sky);}
.faq-ayuda-btn .ic{width:1.05em;height:1.05em;color:#fff;}
.faq-ayuda-pie{
margin-top:.8rem!important;font-size:.78rem!important;
font-weight:400!important;color:var(--muted)!important;
}
/* El borde de arriba lo ponia el primer desplegable contando desde el
titulo; ahora la lista empieza sola, sin ese margen heredado. */
.faq-lista .faq-item:first-of-type{margin-top:0;}
@media(max-width:900px){
.faq-inner{grid-template-columns:1fr;gap:1.5rem;}
.faq-aside{position:static;}
.faq-ayuda{margin-top:1.4rem;padding-top:1.2rem;}
.faq-lista .faq-item:first-of-type{margin-top:.6rem;}
}
/* Una celda de rejilla no baja de lo que mide su contenido a menos que
se le diga. La tabla de foxing tiene min-width:520px, asi que estiraba
la columna a 522px dentro de una pantalla de 375 y se llevaba por
delante el ancho de la pagina. Con min-width:0 la columna manda y la
tabla se desliza dentro de su propia caja, que es lo que toca. */
.faq-lista,.faq-aside{min-width:0;}
/* ── 45. AGENCIA DE SHALOM ────────────────────────────────────────
Dos pasos, departamento y agencia. Son 476: en una sola lista no se
puede elegir, y menos en el movil. */
#shalom-caja{
margin-top:.7rem;padding:.9rem;
background:var(--paper2);border:1px solid var(--border);
border-radius:var(--radius-sm);
}
.shalom-lbl{
display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin:0 0 .35rem;
}
#shalom-caja select{
width:100%;padding:.6rem .8rem;margin-bottom:.7rem;
border:1.5px solid var(--border);border-radius:var(--radius-sm);
font-family:var(--sans);font-size:.88rem;background:#fff;color:var(--ink);
cursor:pointer;outline:none;
}
#shalom-caja select:focus{border-color:var(--sky);}
.shalom-nota,.shalom-cargando{
margin:0;font-size:.78rem;line-height:1.5;color:var(--ink2);
}
.shalom-cargando{color:var(--muted);font-style:italic;}
/* ── 46. CORAZON DE LISTA DE DESEOS ───────────────────────────────
Era un emoji: cada telefono lo dibuja distinto y el blanco casi no
se veia sobre las portadas claras. Ahora es el mismo icono de trazo
que el resto del sitio, y al activarse se rellena. */
.card-wl .ic-wl{
width:17px;height:17px;
stroke:var(--ink2);fill:none;stroke-width:1.9;
transition:stroke .15s ease,fill .15s ease;
}
.card-wl:hover .ic-wl{stroke:var(--sky-dark);}
/* Contorno y relleno del mismo color: si no, queda un borde oscuro con
el centro celeste y parece a medio pintar. */
.card-wl.activo .ic-wl{stroke:var(--sky-dark);fill:var(--sky-dark);}
.card-wl.activo{background:var(--sky-light,#E8F4F9);}
.card-wl{background:rgba(255,255,255,.92);}
/* ── 47. "ULTIMA UNIDAD" SIN CHOCAR CON EL CORAZON ────────────────
Los dos vivian arriba a la derecha y el corazon tapaba el aviso.
El aviso se va abajo a la izquierda: ahi no hay nada, y ademas cae
pegado al titulo, que es donde se mira antes de decidir. */
.ult-uno{
top:auto;right:auto;
bottom:8px;left:0;
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
/* ── LIBROS DENTRO DE UN UNIVERSO ─────────────────────────────────
Las tarjetas de libro dentro de un universo llevan la clase
`univ-card`, que en el diseño anterior las pintaba oscuras: texto
blanco sobre fondo oscuro. El rediseño dejó las tarjetas blancas
pero ese texto siguió siendo blanco — blanco sobre blanco, media
tarjeta en blanco y el precio invisible.
Se usa `.card.univ-card` para tocar SOLO las tarjetas de libro: los
mosaicos de categoría llevan `univ-card` a secas y siguen oscuros.
───────────────────────────────────────────────────────────────── */
.card.univ-card{background:#fff;backdrop-filter:none;}
.card.univ-card:hover{background:#fff;}
.card.univ-card .icat{color:var(--muted);}
.card.univ-card .ititle{color:var(--ink);}
.card.univ-card .iauthor{color:var(--muted);}
.card.univ-card .iprice{color:var(--ink);}
.card.univ-card .ifoot{border-top:1px solid var(--border);}
/* La altura fija de 220px aplastaba la portada a 25px al cambiar el
relleno: se deja mandar a la proporción, como en el resto del sitio. */
.card.univ-card .cover{height:auto;}
/* ── ¿QUIÉNES SOMOS? ──────────────────────────────────────────────
Dos problemas que se retroalimentaban: la columna de texto era
estrecha (440px de medida dentro de media pantalla), así que el
mismo texto ocupaba el doble de alto; y el lateral decorativo se
estiraba para igualar esa altura, quedando medio vacío.
Se le da al texto la anchura que le corresponde y el lateral deja
de tener que estirarse. Mismo contenido, la mitad de alto.
───────────────────────────────────────────────────────────────── */
.about{grid-template-columns:1.25fr 1fr;align-items:stretch;}
.about-t{padding:4.2rem 3.5rem;gap:0;}
.a-h2{font-size:2.5rem;line-height:1.14;margin-bottom:1.4rem;}
/* La medida manda sobre el largo: a 440px estas dos párrafos hacían
una columna larguísima. 62 caracteres por línea es lo que se lee
cómodo, y aquí caben sin tocar una sola palabra del texto. */
/* 620px son unas 70 letras por linea: por debajo el texto se estira a lo
alto, por encima el ojo pierde el renglon al volver a la izquierda. */
.a-p{max-width:620px;font-size:.95rem;line-height:1.7;margin-bottom:1rem;}
.about-t .a-soc{margin-top:1.6rem;}
/* El lateral: más bajo y con las piezas recogidas hacia el centro,
que antes se iban a las esquinas dejando un hueco en medio. */
.about-v{min-height:0;padding:2.5rem 2rem;}
.about .ab-polaroid{top:2.2rem;left:8%;}
.about .ab-quote{top:1.6rem;right:6%;}
/* Los libros suben para dejar sitio a las cifras: los dos iban al centro
abajo y el 3K+ caia justo encima del dibujo. */
.about .ab-books{width:200px;height:225px;bottom:3.6rem;}
@keyframes abFloatAlto{0%,100%{transform:translateX(-50%) translateY(0);}
50%{transform:translateX(-50%) translateY(-8px);}}
/* Los números estaban en blanco sobre un fondo que el rediseño pasó a
claro: se leían como un fantasma. Y en la esquina, sin relación con
nada. Ahora van abajo, juntos, y se leen. */
.about .a-stats{
position:absolute;bottom:.9rem;left:0;right:0;z-index:4;
display:flex;justify-content:center;gap:2.6rem;
}
.about .a-stat{margin:0;text-align:center;}
.about .a-num{color:var(--ink);font-size:2.3rem;}
.about .a-lbl{color:var(--muted);}
@media(max-width:900px){
.about{grid-template-columns:1fr;}
.about-t{padding:3rem 1.4rem 2rem;}
.a-h2{font-size:1.85rem;}
.about .a-stats{position:static;padding:1.4rem 0 .4rem;}
}
/* ── AVISO DE ÚLTIMA UNIDAD, YA DENTRO DE LA FICHA ────────────────
Salió de la portada —donde tapaba el estado del ejemplar— y bajó a
donde de verdad importa: junto al precio, cuando ya estás decidiendo.
───────────────────────────────────────────────────────────────── */
.bdl-ultima{
display:inline-flex;align-items:center;gap:6px;
margin-top:.55rem;padding:6px 12px;border-radius:var(--radius-pill);
background:#FDF0E6;border:1px solid #E9A178;color:#9A4A1E;
font-family:var(--sans);font-size:.78rem;font-weight:700;
}
/* ── ¿QUÉ ES EL FOXING? ───────────────────────────────────────────
La duda nace leyendo el estado, con el libro delante. Mandar al
cliente al pie de página es perderlo.
───────────────────────────────────────────────────────────────── */
.bdl-ep-quees{
display:inline-block;margin-top:.5rem;padding:0;border:0;background:none;
color:var(--sky-dark);font-family:var(--sans);font-size:.8rem;font-weight:700;
text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.bdl-ep-quees em{font-style:italic;}
.bdl-ep-quees:hover{color:var(--ink);}
.foxing-pop{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(22,34,61,.55);
}
.foxing-caja{
position:relative;max-width:420px;width:100%;
background:#fff;border-radius:var(--radius-card);
padding:1.6rem 1.5rem 1.4rem;
box-shadow:0 18px 50px rgba(0,0,0,.3);
font-family:var(--sans);color:var(--ink2);font-size:.9rem;line-height:1.6;
max-height:80vh;overflow-y:auto;
}
.foxing-tit{
font-family:var(--serif);font-size:1.3rem;font-weight:500;
color:var(--ink);margin:0 0 .7rem;padding-right:2rem;
}
.foxing-caja p{margin:0 0 .7rem;}
.foxing-caja strong{color:var(--ink);}
.foxing-nota{font-size:.82rem;color:var(--muted);margin-bottom:0;}
.foxing-x{
position:absolute;top:10px;right:10px;
width:32px;height:32px;border-radius:50%;
border:1px solid var(--border);background:#fff;color:var(--ink2);
font-size:.9rem;line-height:1;cursor:pointer;
}
.foxing-x:hover{background:var(--sky-light);border-color:var(--sky);}
/* ── FILTROS DE NOVEDADES ─────────────────────────────────────────
Se arman con lo que hay esta semana, no con la lista completa: una
categoría sin novedades deja al cliente ante una fila vacía.
───────────────────────────────────────────────────────────────── */
#nov-filtros:empty{display:none;}
.nov-filtros{
display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
margin:0 0 1.1rem;
}
.nov-f{display:flex;flex-direction:column;gap:5px;}
.nov-f span{
font-family:var(--sans);font-size:.62rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.nov-f select{
min-width:150px;max-width:230px;padding:8px 12px;
border:1.5px solid var(--border);border-radius:8px;background:#fff;
font-family:var(--sans);font-size:.82rem;color:var(--ink);cursor:pointer;
}
.nov-f select:focus{outline:none;border-color:var(--sky);}
.nov-limpiar{
padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);
background:#fff;font-family:var(--sans);font-size:.76rem;font-weight:600;
color:var(--ink2);cursor:pointer;
}
.nov-limpiar:hover{background:var(--sky-light);border-color:var(--sky);}
.nov-vacio{
font-family:var(--sans);font-size:.88rem;color:var(--muted);
padding:1.6rem 0;margin:0;
}
@media(max-width:768px){
.nov-filtros{gap:10px;}
.nov-f select{min-width:0;width:100%;}
.nov-f{flex:1 1 140px;}
}
/* ── CATEGORÍAS: LENGÜETA FIJA + PANEL ────────────────────────────
Una sola cosa donde antes había dos: la lengüeta del banner (que solo
servía en la portada) y la franja de chips del catálogo. La franja se
esconde pero sigue en el HTML — es la que sabe qué categorías hay y
cuáles se quedaron sin libros, y el panel la lee. Una sola fuente.
───────────────────────────────────────────────────────────────── */
.cat-chips{display:none;}
/* Y la seccion entera de categorias de la portada: es la misma lista una
tercera vez. La lengüeta la tiene siempre a mano, en cualquier punto
de la pagina, asi que la franja aqui solo alargaba el recorrido. */
#categorias{display:none;}
.cats-tab{
position:fixed;left:0;top:50%;transform:translateY(-50%);
z-index:900;display:flex;align-items:center;justify-content:center;
writing-mode:vertical-rl;
background:#D64541;color:#fff;border:0;
font-family:var(--sans);font-size:.7rem;font-weight:700;
letter-spacing:.17em;text-transform:uppercase;
padding:22px 9px;border-radius:0 13px 13px 0;
box-shadow:0 4px 16px rgba(0,0,0,.28);cursor:pointer;
transition:padding-right .18s ease,background .18s ease;
}
.cats-tab .cats-tab-txt{transform:rotate(180deg);}
.cats-tab:hover,.cats-tab:focus-visible{background:#BE3733;padding-right:16px;}
.cats-tab:focus-visible{outline:2px solid #fff;outline-offset:-4px;}
.cats-panel{
position:fixed;inset:0;z-index:1200;
background:rgba(22,34,61,.55);
display:flex;align-items:stretch;justify-content:flex-start;
}
.cats-panel[hidden]{display:none;}
.cats-panel-caja{
width:min(380px,88vw);background:#fff;
display:flex;flex-direction:column;
box-shadow:0 0 40px rgba(0,0,0,.28);
}
.cats-panel-head{
display:flex;align-items:center;justify-content:space-between;
padding:1.3rem 1.3rem 1rem;border-bottom:1px solid var(--border);
}
.cats-panel-head h2{
margin:0;font-family:var(--serif);font-size:1.45rem;font-weight:500;color:var(--ink);
}
.cats-panel-x{
width:34px;height:34px;border-radius:50%;
border:1px solid var(--border);background:#fff;color:var(--ink2);
font-size:.9rem;line-height:1;cursor:pointer;flex:0 0 auto;
}
.cats-panel-x:hover{background:var(--sky-light);border-color:var(--sky);}
.cats-panel-lista{
flex:1;overflow-y:auto;padding:1rem 1.3rem 2rem;
display:flex;flex-direction:column;gap:2px;
}
.cats-item{
display:flex;align-items:center;justify-content:space-between;gap:8px;
width:100%;text-align:left;padding:11px 12px;border:0;border-radius:8px;
background:none;color:var(--ink);cursor:pointer;
font-family:var(--sans);font-size:.92rem;
}
.cats-item:hover{background:var(--sky-light);}
.cats-item.activo{background:var(--sky-light);font-weight:700;color:var(--sky-dark);}
/* La flecha del padre, como en Aguilar: solo avisa que hay hijos debajo. */
.cats-flecha{color:var(--ink2);opacity:.55;font-size:1.1rem;line-height:1;}
/* "< Volver" sube al piso de arriba. Separada del resto con una linea,
para que no se confunda con un hijo mas de la lista. */
.cats-item-volver{
color:var(--sky-dark);font-weight:600;
border-bottom:1px solid var(--border);border-radius:0;margin-bottom:4px;padding-bottom:13px;
}
/* "Todo " es el mismo filtro que ya aplicó el padre, sin recortar
por hijo -- la primera fila del piso de abajo, como "Ver todos" en
Aguilar dentro de cada categoria. */
.cats-item-todo{font-weight:700;}
@media(max-width:768px){
/* Por debajo del botón de WhatsApp, que va abajo a la derecha: así el
pulgar no tiene que elegir entre dos cosas en la misma esquina. */
.cats-tab{font-size:.62rem;letter-spacing:.13em;padding:16px 7px;}
}
/* La lengüeta de categorías es fija y pasa por encima del banner: la flecha
de "anterior" se aparta para que no queden una sobre otra. */
.promo-prev{left:58px;}
/* ── ESTADO DEL EJEMPLAR EN LA TARJETA ────────────────────────────
Sitio fijo abajo a la izquierda, el mismo en todas las tarjetas. La
esquina de arriba queda para lo que cambia (novedad, oferta, agotado);
el estado no cambia nunca y hay que poder compararlo de un vistazo
entre una copia y otra del mismo título.
───────────────────────────────────────────────────────────────── */
.card-estado{
position:absolute;left:0;bottom:8px;z-index:3;
padding:5px 10px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-family:var(--sans);font-size:.62rem;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;
color:#fff;background:var(--ink);
box-shadow:0 2px 8px rgba(0,0,0,.18);
max-width:calc(100% - 16px);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Cada estado con su color, los mismos que ya usa el resto del sitio. */
.card-estado.rn {background:#2F7D4F;} /* Nuevo */
.card-estado.rcn{background:var(--sky-dark,#2B7A99);}
.card-estado.rb {background:#5B6B8C;}
.card-estado.rr {background:#9A7B4F;}
/* ── COMPRAR SIN ENTRAR EN LA FICHA ───────────────────────────────
Antes solo existía en la capa que aparece al pasar el ratón, y en un
móvil eso no ocurre nunca: desde el teléfono no había forma de añadir
al carrito sin abrir el libro.
───────────────────────────────────────────────────────────────── */
.card-add{
display:block;width:calc(100% - 1.7rem);margin:0 .85rem .9rem;
padding:10px 12px;border:1px solid var(--ink);border-radius:var(--radius-pill);
background:var(--ink);color:#fff;cursor:pointer;
font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.03em;
transition:background .18s ease,border-color .18s ease;
}
.card-add:hover{background:var(--sky-dark);border-color:var(--sky-dark);}
.card-add:active{transform:none;}
.card .info{display:flex;flex-direction:column;}
/* El hueco lo absorbe el BOTON, no el precio. Con `margin-top:auto` en el
pie, un título corto dejaba un vacío enorme entre el autor y el precio
solo para que los botones de la fila quedaran a la misma altura: el
precio se iba al fondo de la tarjeta y parecía de otro libro. Ahora el
precio va pegado al autor y es el botón el que baja. */
.card .ifoot{margin-top:.55rem;}
.card-add{margin-top:auto;}
@media(max-width:768px){
.card-estado{font-size:.55rem;padding:4px 8px;}
.card-add{font-size:.72rem;padding:9px 10px;margin:0 .6rem .7rem;width:calc(100% - 1.2rem);}
}
/* ── UN SOLO MENÚ, EN TODAS LAS PANTALLAS ─────────────────────────
La fila de enlaces (CATÁLOGO · VÉNDENOS · RESEÑAS…) y el menú de las
tres rayas decían exactamente lo mismo, cada uno en su tamaño de
pantalla. Ahora manda el de las rayas también en escritorio: una sola
lista que mantener y una cabecera que no compite con el catálogo.
───────────────────────────────────────────────────────────────── */
.hamburger-btn{display:flex !important;}
.navrow2 .nav-left{display:none;}
/* La segunda fila se queda solo con los dos accesos, alineados a la
derecha: sin los enlaces, centrarlos dejaría la fila coja. */
.navrow2{justify-content:flex-end;}
/* El menú por encima de la lengüeta de categorías: con z-index 99 contra
900, la lengüeta se comía "Universos" y "Nosotros". */
.mobile-menu{z-index:1000;}
body:has(.mobile-menu.open) .cats-tab{display:none;}
/* ── SECCIONES PLEGABLES DE LA PORTADA ────────────────────────────
Ocho bloques largos seguidos hacían una home interminable. Se usa
, que pliega de serie: sin librería, con teclado, y Ctrl+F
del navegador sigue encontrando lo de dentro.
───────────────────────────────────────────────────────────────── */
.sec-plegable{border-bottom:1px solid var(--border);}
.sec-plegable > .sec-plegable-t{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
max-width:1400px;margin:0 auto;padding:1.5rem 2.5rem;
font-family:var(--serif);font-size:1.55rem;font-weight:500;color:var(--ink);
}
.sec-plegable > .sec-plegable-t::-webkit-details-marker{display:none;}
/* La flecha se dibuja aquí: el triángulo del navegador cambia de forma en
cada uno y no se puede alinear con el resto de la página. */
.sec-plegable > .sec-plegable-t::after{
content:'';flex:0 0 auto;width:11px;height:11px;
border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
transform:rotate(45deg) translate(-3px,-3px);
transition:transform .2s ease;
}
.sec-plegable[open] > .sec-plegable-t::after{transform:rotate(-135deg) translate(-3px,-3px);}
.sec-plegable > .sec-plegable-t:hover{background:var(--sky-light);}
.sec-plegable > .sec-plegable-t:focus-visible{outline:2px solid var(--sky);outline-offset:-3px;}
/* Una sección oculta (la caja lectora, hasta que hay libros acumulados) no
debe dejar su título suelto en la página. */
.sec-plegable:has(> [hidden]){display:none;}
/* Dentro ya no hace falta el aire de una sección suelta ni su propio
título: el del desplegable ya lo dice. */
.sec-plegable > section,
.sec-plegable > div{border-top:none;}
@media(max-width:768px){
.sec-plegable > .sec-plegable-t{padding:1.15rem 1rem;font-size:1.2rem;}
}
/* La segunda fila se queda sin contenido: uno de sus dos enlaces subió a la
cabecera y el otro entró al menú. Una fila entera para dos cosas no se
sostiene cuando el resto de la navegación vive en las tres rayas. */
.navrow2{display:none;}
.nav-envios{
border:1px solid var(--border-dark);border-radius:var(--radius-pill);
background:#fff;color:var(--ink);cursor:pointer;
font-family:var(--sans);font-size:.78rem;font-weight:600;
padding:9px 16px;white-space:nowrap;
}
.nav-envios:hover{background:var(--sky-light);border-color:var(--sky);}
/* En el móvil la cabecera ya va justa: el envío se consulta desde el pie y
desde el carrito, que es donde de verdad hace falta saberlo. */
/* Por debajo de 1200 la cabecera ya va con el buscador a tope y esto la
parte en cuatro filas. El envio se consulta desde el pie y desde el
carrito, que es donde de verdad hace falta saberlo. */
@media(max-width:1200px){ .nav-envios{display:none;} }
/* "Compramos libros" es la otra mitad del negocio, no un enlace más. */
.mobile-menu a.mm-destacado{color:var(--sky-dark);font-weight:800;}
/* La lengüeta de categorías es fija y cruza por encima de los títulos
plegables: ocupa 33px del canto y el título empezaba en 40 (en móvil, en
16: encima). Se le reserva el sitio en vez de confiar en que quepa. */
.sec-plegable > .sec-plegable-t{padding-left:64px;}
@media(max-width:768px){
.sec-plegable > .sec-plegable-t{padding-left:52px;}
}
/* La portada no lleva estas secciones: se llega a ellas desde el menú, y
aparecen solo cuando se piden. Plegadas seguían siendo ocho renglones
que hay que pasar, y son las mismas que ya están en las tres rayas. */
.sec-plegable{display:none;}
.sec-plegable.mostrada{display:block;}
/* ── AVISO DE ÚLTIMA UNIDAD, DENTRO DE LA CAJA DEL PRECIO ─────────
Debajo de la raya parecía otra cosa; pegado al precio se lee como lo
que es: una condición de esa compra.
───────────────────────────────────────────────────────────────── */
.bdl-price-row{flex-wrap:wrap;}
.bdl-price-row .bdl-ultima{flex:0 0 100%;margin-top:.5rem;}
/* ── ¿QUÉ ES EL FOXING?, EN LA CABECERA ───────────────────────────
La duda llega mirando el libro, no leyendo la letra pequeña.
───────────────────────────────────────────────────────────────── */
.bdl-ayuda{
position:absolute;top:14px;right:62px;z-index:6;
width:36px;height:36px;border-radius:50%;
border:1px solid var(--border);background:#fff;color:var(--sky-dark);
font-family:var(--serif);font-size:1.15rem;font-weight:700;line-height:1;
cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.bdl-ayuda:hover{background:var(--sky-light);border-color:var(--sky);}
/* ── CONSENTIMIENTO DE DATOS ──────────────────────────────────────
Ley 29733: se dice para qué se usan y la persona lo acepta. Sin marcar
de antemano — una casilla premarcada no es un consentimiento.
───────────────────────────────────────────────────────────────── */
.fld-consent{
display:flex;gap:10px;align-items:flex-start;
margin:0 0 1rem;padding:12px 14px;
background:var(--paper,#FAF7F2);border:1px solid var(--border);border-radius:10px;
font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--ink2);
cursor:pointer;
}
.fld-consent input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;cursor:pointer;accent-color:var(--sky-dark);}
.fld-consent a{color:var(--sky-dark);font-weight:700;}
/* ── BUSCADOR DE AUTOR EN NOVEDADES ───────────────────────────────
Con forma de buscador, como el de la cabecera: en una caja con lupa se
escribe, y eso ya lo sabe cualquiera.
───────────────────────────────────────────────────────────────── */
.nov-buscador{position:relative;display:block;}
.nov-buscador .nov-autor{
width:100%;min-width:220px;
padding:9px 40px 9px 16px;
border:1.5px solid var(--border);border-radius:var(--radius-pill);
background:#fff;font-family:var(--sans);font-size:.85rem;color:var(--ink);
}
.nov-buscador .nov-autor:focus{outline:none;border-color:var(--sky);}
.nov-lupa{
position:absolute;right:13px;top:50%;transform:translateY(-50%);
width:16px;height:16px;stroke:var(--muted);fill:none;pointer-events:none;
}
@media(max-width:768px){ .nov-buscador .nov-autor{min-width:0;} }
/* ── AVISO DE PREGUNTAS FRECUENTES ────────────────────────────────
Bajo el de WhatsApp. Va cambiando de frase porque una sola fija se
vuelve parte del decorado y deja de leerse.
───────────────────────────────────────────────────────────────── */
/* El de WhatsApp arriba y el de preguntas debajo: escribirle a alguien
es lo que mas se pulsa, y lo mas pulsado va donde llega el pulgar. */
.faq-fab{
position:fixed;right:20px;bottom:20px;z-index:899;
display:flex;align-items:center;gap:8px;
padding:11px 18px;border:1px solid var(--border);border-radius:var(--radius-pill);
background:#fff;color:var(--ink);cursor:pointer;
font-family:var(--sans);font-size:.8rem;font-weight:700;
box-shadow:0 4px 16px rgba(0,0,0,.14);
}
.faq-fab::before{content:'?';
display:flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:50%;flex:0 0 auto;
background:var(--sky-dark);color:#fff;font-size:.72rem;font-weight:800;}
.faq-fab:hover{background:var(--sky-light);border-color:var(--sky);}
.faq-fab-txt{transition:opacity .22s ease;white-space:nowrap;}
@media(max-width:600px){
.faq-fab{right:14px;bottom:16px;padding:9px 14px;font-size:.72rem;}
}
/* ── SECCIONES EN VENTANA ─────────────────────────────────────────
Revelarlas en su sitio hacía crecer la portada por abajo: cada visita
al menú añadía un bloque y el pie se alejaba. Ahora se abren encima y
se cierran, y la portada no cambia de largo nunca.
───────────────────────────────────────────────────────────────── */
.sec-ventana{
position:fixed;inset:0;z-index:1300;
background:rgba(22,34,61,.55);
display:flex;align-items:center;justify-content:center;
padding:24px 16px;
}
.sec-ventana-caja{
background:#fff;border-radius:var(--radius-card);
width:min(980px,100%);max-height:90vh;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.sec-ventana-head{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);
flex:0 0 auto;
}
.sec-ventana-head h2{
margin:0;font-family:var(--serif);font-size:1.45rem;font-weight:500;color:var(--ink);
}
/* Era un circulo de 36 px: el texto "Volver al inicio" no cabia dentro y
se salia. Pastilla, con sitio para la frase y 44 px de alto para el dedo. */
.sec-ventana-x{
min-height:44px;padding:0 16px;border-radius:999px;flex:0 0 auto;
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
border:1px solid var(--border);background:#fff;color:var(--ink2);
font-family:inherit;font-size:.8rem;font-weight:600;line-height:1;cursor:pointer;
}
.sec-ventana-x:hover{background:var(--sky-light);border-color:var(--sky);}
.sec-ventana-cuerpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Dentro de la ventana la sección ya no necesita sus márgenes de página
entera ni el alto mínimo que tenía para llenar la pantalla. */
.sec-ventana-cuerpo > *{
min-height:0 !important;border-top:none !important;border-bottom:none !important;
}
.sec-ventana-cuerpo .about{grid-template-columns:1fr;}
.sec-ventana-cuerpo .about-v{display:none;}
@media(max-width:768px){
.sec-ventana{padding:0;}
.sec-ventana-caja{width:100%;max-height:100vh;height:100vh;border-radius:0;}
.sec-ventana-head{padding:.9rem 1rem;}
.sec-ventana-head h2{font-size:1.15rem;}
}
/* ── ENVÍOS Y RETIROS EN TARJETAS ─────────────────────────────────
El mismo contenido, pero comparable: antes eran seis títulos y catorce
párrafos en una columna, y había que leerlos enteros para saber si
llegaba a tu distrito. Elegir cómo lo recibes es una comparación.
───────────────────────────────────────────────────────────────── */
.env-cards{
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:16px;margin-bottom:1.4rem;
}
.env-card{
background:var(--paper,#FAF7F2);border:1px solid var(--border);
border-radius:var(--radius-card);padding:1.4rem 1.3rem;
font-family:var(--sans);font-size:.85rem;line-height:1.6;color:var(--ink2);
}
.env-ico{font-size:1.7rem;line-height:1;margin-bottom:.7rem;}
.env-card h3{
margin:0 0 .7rem;font-family:var(--sans);font-size:.78rem;font-weight:800;
letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.env-card p{margin:0 0 .6rem;}
.env-card strong{color:var(--ink);}
.env-dir{color:var(--ink);font-weight:600;}
.env-precio{font-family:var(--serif);font-size:1.6rem;color:var(--ink);margin:0 0 .5rem !important;}
.env-gratis{
display:inline-block;padding:3px 11px;border-radius:var(--radius-pill);
background:#E6F4EA;color:#256B3F;font-size:.72rem;font-weight:800;
letter-spacing:.05em;text-transform:uppercase;margin-bottom:.7rem !important;
}
.env-maps{
display:inline-block;padding:7px 14px;border-radius:var(--radius-pill);
border:1px solid var(--sky);background:#fff;color:var(--sky-dark);
font-size:.76rem;font-weight:700;text-decoration:none;
}
.env-maps:hover{background:var(--sky-light);}
.env-sep{border-top:1px dashed var(--border-dark);margin:1rem 0 .9rem;}
.env-nota{font-size:.8rem;color:var(--muted);}
.env-puntos{margin:0;padding-left:1.1rem;font-size:.8rem;}
.env-puntos li{margin-bottom:.4rem;}
.env-zonas{display:flex;flex-direction:column;gap:8px;}
.env-zona{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;}
.env-hora{font-size:.74rem;font-weight:800;color:var(--ink);margin-bottom:2px;}
.env-distritos{font-size:.72rem;color:var(--muted);line-height:1.45;}
.env-comun{
border-top:1px solid var(--border);padding-top:1.1rem;
font-family:var(--sans);font-size:.83rem;color:var(--ink2);
}
.env-comun .env-pie{margin-bottom:0;}
@media(max-width:700px){
.env-cards{grid-template-columns:1fr;}
}
/* ── BENEFICIOS, FORMATO AGUILAR ──────────────────────────────────
Icono arriba, título en versalitas y la explicación debajo, todo
centrado. Antes el icono iba al lado y el texto a la izquierda: se
leía como una lista de opciones, no como los motivos para comprar.
───────────────────────────────────────────────────────────────── */
.benef-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:0;border:none;background:transparent;
}
.benef-item{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:10px;padding:2rem 1.2rem;
background:transparent;border:none;
font-family:var(--sans);
}
/* Los que llevan a algún sitio son botones: que se note que se pulsan. */
button.benef-item{cursor:pointer;border-radius:var(--radius-card);transition:background .18s ease;}
button.benef-item:hover{background:#fff;}
.benef-item .benef-ico{
width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.3;
}
.benef-item strong{
font-family:var(--sans);font-size:.82rem;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
line-height:1.4;
}
.benef-item span{
font-size:.83rem;line-height:1.55;color:var(--muted);max-width:30ch;
}
@media(max-width:768px){
.benef-grid{grid-template-columns:1fr;}
.benef-item{padding:1.5rem 1rem;}
.benef-item span{max-width:34ch;}
}
/* WhatsApp sube por encima del aviso de preguntas: lo que más se pulsa va
donde llega el pulgar sin estirarlo. */
.wa-fab{bottom:78px !important;}
@media(max-width:600px){ .wa-fab{bottom:70px !important;right:14px !important;} }
/* La ventana de Envíos necesita ancho para sus tres columnas: a 680 px
entraban dos y la tercera caía debajo. */
#legal-envios .legal-box{max-width:1080px;}
/* Iconos de línea, como el resto del sitio. Los emoji los dibuja cada
teléfono a su manera y ninguno se parece al dibujo de al lado. */
.env-ico{
width:30px;height:30px;stroke:var(--sky-dark);fill:none;stroke-width:1.4;
display:block;margin-bottom:.7rem;
}
/* ── AZUL DE MARCA: PANTONE 14-4313 AQUAMARINE ───────────────────
El azul marino se comía casi toda la página. Pasa a ser el color de
marca el aguamarina de la clienta.
Lo que NO cambia es el texto: aguamarina sobre blanco da un contraste
de 1,9 a 1, y hace falta 4,5 para leer un párrafo. El color va donde
se ve —fondos, cintas, botones, detalles—, y las letras siguen
oscuras. Un sitio bonito que no se lee no sirve de nada.
───────────────────────────────────────────────────────────────── */
:root{
--aqua:#A3C6D8;
--aqua-claro:#EAF3F8;
--aqua-hondo:#5E93AE;
/* El celeste del sistema pasa a ser el de marca */
--sky:#A3C6D8;
--sky-light:#EAF3F8;
/* Para texto y bordes hace falta bajarlo: el claro no contrasta */
--sky-dark:#3F7C94;
}
/* El banner deja de ser marino */
.promos,.promo-slide{background:linear-gradient(160deg,#5E93AE 0%,#2F5F79 100%);}
/* Botones sólidos: el marino cerrado se sustituye por el aguamarina hondo */
.btn-gold,.card-add,.bdl-btn-cart{background:var(--aqua-hondo);border-color:var(--aqua-hondo);}
.btn-gold:hover,.card-add:hover,.bdl-btn-cart:hover{background:#4C7E98;border-color:#4C7E98;}
.cart-btn{background:var(--aqua-hondo);}
.card-estado{background:var(--aqua-hondo);}
.cats-item.activo{background:var(--aqua-claro);color:var(--sky-dark);}
/* La franja de arriba y el pie, en el azul de marca. Se usa el aguamarina
hondo, no el claro: los dos llevan texto blanco encima y el claro lo
dejaría ilegible. Es el mismo azul que los mosaicos de categoría, así
que la página abre y cierra con el mismo color. */
/* Se usa #2F5F79 y no el aguamarina claro: el pie y la franja llevan
texto blanco pequeno encima (RUC, direccion, el aviso legal). Sobre el
tono claro el blanco da 3,35 de contraste y hacen falta 4,5; este da
6,92 y sigue siendo el mismo azul de familia. */
.marquee{background:#2F5F79 !important;}
/* La franja de arriba es .adbar, no .marquee: son dos cosas distintas
y la que se ve es esta. */
.adbar{background:#2F5F79 !important;}
footer{background-color:#2F5F79 !important;border-top:1px solid #5E93AE !important;}
/* ── WHATSAPP SIEMPRE ALCANZABLE ──────────────────────────────────
Al abrir un libro, la ficha se ponía por encima y el botón quedaba
tapado: justo cuando el cliente tiene una duda concreta sobre ese
ejemplar es cuando más falta le hace escribir.
───────────────────────────────────────────────────────────────── */
.wa-fab{z-index:1500 !important;}
.faq-fab{z-index:1499;}
/* ── EL UNIVERSO, EN TONO PRINCE ──────────────────────────────────
El velo era negro y dejaba todos los universos iguales de oscuros.
Ahora tiñe del azul de marca: el fondo que suba la clienta se sigue
viendo debajo, pero la pantalla pertenece al sitio.
───────────────────────────────────────────────────────────────── */
.univ-bg::after{
background:linear-gradient(to bottom,
rgba(47,95,121,.62) 0%,
rgba(47,95,121,.76) 38%,
rgba(28,62,82,.90) 100%) !important;
}
/* Sin fondo propio, el universo se queda en el azul de marca y no en negro. */
.univ-bg{background-color:#2F5F79;}
/* ── ESTADO DEL EJEMPLAR EN NOVEDADES ─────────────────────────────
Estaba solo en las tarjetas del catálogo. En segunda mano el estado
es el dato con el que se decide, y la fila de Novedades es lo
primero que ve quien entra.
───────────────────────────────────────────────────────────────── */
.fila-cover{position:relative;}
.fila-estado{
position:absolute;left:0;bottom:8px;z-index:3;
padding:4px 9px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-family:var(--sans);font-size:.55rem;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:#fff;
background:var(--aqua-hondo);
max-width:calc(100% - 12px);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.fila-estado.rn {background:#2F7D4F;}
.fila-estado.rcn{background:#3F7C94;}
.fila-estado.rb {background:#5B6B8C;}
.fila-estado.rr {background:#9A7B4F;}
/* El cuadro de zonas son cinco franjas con cuarenta distritos: aplastaba la
tarjeta del delivery. Se abre solo si te interesa tu distrito. */
.env-zonas-plega{margin-top:.2rem;}
.env-zonas-plega > summary{
list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;border:1px solid var(--sky);border-radius:var(--radius-pill);
background:#fff;color:var(--sky-dark);
font-family:var(--sans);font-size:.76rem;font-weight:700;
}
.env-zonas-plega > summary::-webkit-details-marker{display:none;}
.env-zonas-plega > summary::after{content:'▾';font-size:.7rem;}
.env-zonas-plega[open] > summary::after{content:'▴';}
.env-zonas-plega > summary:hover{background:var(--sky-light);}
.env-zonas-plega .env-zonas{margin-top:.8rem;}
/* Con cuatro tarjetas caben dos por fila en pantallas medianas. */
.env-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
/* Los dos accesos que la clienta quiere siempre a mano. En escritorio ya
están con su texto; aquí van como icono, que es lo que cabe. */
.nav-ico-btn{
display:none;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;flex:0 0 auto;
border:1px solid var(--border);background:#fff;color:var(--ink);
cursor:pointer;text-decoration:none;
}
.nav-ico-btn .ic{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.6;}
.nav-ico-btn:hover{background:var(--sky-light);border-color:var(--sky);}
@media(max-width:1200px){ .nav-ico-btn{display:inline-flex;} }
@media(max-width:420px){ .nav-ico-btn{width:36px;height:36px;} }
/* El bloque de contacto de "Compramos libros", con el mismo aire que el de
temáticas: son las dos preguntas de la hoja, no un paso y un pie. */
.vendenos-contacto{
max-width:720px;margin:2.4rem auto 0;text-align:center;
}
.vendenos-contacto .vendenos-accept-title{margin-bottom:.8rem;}
/* ── LA CABECERA SE QUEDA AL BAJAR ────────────────────────────────
Con 2.000 libros, volver arriba para buscar otra cosa era todo el
recorrido de vuelta. La barra de búsqueda y el carrito se quedan a la
vista, como en la librería Aguilar.
───────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:1200;background:#fff;
box-shadow:0 1px 0 var(--border);}
/* La franja de avisos sí se va: es de leer una vez, no de tener delante. */
@media(max-width:768px){
nav{box-shadow:0 2px 12px rgba(0,0,0,.07);}
}
/* El menú desplegable cuelga justo debajo de la cabecera fija. */
.mobile-menu{top:auto;}
/* `overflow-x:hidden` en body y html convierte al body en el contenedor de
scroll, y eso deja sin efecto el `position:sticky` de la cabecera.
`clip` recorta igual de bien pero no crea ese contenedor, así que la
cabecera vuelve a quedarse arriba. */
html,body{overflow-x:clip;}
/* Guardar en favoritos desde la ficha. Antes solo se podía desde la
tarjeta: quien entraba a leer la sinopsis y decidía que no era para hoy
tenía que cerrar y buscar la tarjeta otra vez — y no lo hace. */
.bdl-btn-wl{
display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
padding:13px 18px;border:1px solid var(--border-dark);border-radius:var(--radius-pill);
background:#fff;color:var(--ink);cursor:pointer;
font-family:var(--sans);font-size:.82rem;font-weight:600;
}
.bdl-btn-wl .ic{width:17px;height:17px;stroke:var(--ink2);fill:none;stroke-width:1.9;}
.bdl-btn-wl:hover{background:var(--sky-light);border-color:var(--sky);}
.bdl-btn-wl.activo{background:var(--sky-light);border-color:var(--sky);color:var(--sky-dark);}
.bdl-btn-wl.activo .ic{stroke:var(--sky-dark);fill:var(--sky-dark);}
/* ── LAS TARJETAS DE ENVÍO, CON FONDO ─────────────────────────────
Estaban puestas en `--paper`, que en esta paleta es blanco puro: quedaban
blancas sobre blanco y solo las separaba un borde finísimo. Con fondo
propio cada forma de envío se lee como un bloque aparte, como en Aguilar.
───────────────────────────────────────────────────────────────── */
.env-card{
background:#EDF4F8 !important;
border:1px solid #D6E5EE !important;
}
/* El cuadro de zonas va DENTRO de una tarjeta: en blanco se distingue del
fondo de su tarjeta, que es lo que hace que se lea como algo anidado. */
.env-zona{background:#fff;border-color:#D6E5EE;}
.env-zonas-plega > summary{background:#fff;}
/* La franja de abajo (embalaje y WhatsApp) vale para todas, así que se
queda sin fondo: no es una opción más. */
.env-comun{border-top-color:#D6E5EE;}
/* ── VOLVER, CON SU NOMBRE ────────────────────────────────────────
Una ✕ gris en un círculo pequeño no se lee como salida en un móvil: la
clienta abrió una sección y no encontró "ninguna señal, ningún puntito"
para regresar. Ahora pone Volver, con flecha, y se ve.
───────────────────────────────────────────────────────────────── */
.sec-ventana-x,
.legal-close{
display:inline-flex !important;align-items:center;gap:7px;
width:auto !important;height:auto !important;border-radius:var(--radius-pill) !important;
padding:9px 16px !important;
border:1px solid var(--sky) !important;background:var(--sky-light) !important;
color:var(--sky-dark) !important;
font-family:var(--sans) !important;font-size:.78rem !important;font-weight:700 !important;
cursor:pointer;white-space:nowrap;
}
.sec-ventana-x:hover,.legal-close:hover{background:var(--sky) !important;color:#fff !important;}
/* En las ventanas legales la ✕ va suelta arriba a la derecha: se le pone
el texto por CSS para no tocar los seis bloques uno por uno. */
.legal-close{font-size:0 !important;}
.legal-close::after{content:'← Volver';font-size:.78rem;}
/* ── EL CARRITO Y EL PAGO, POR ENCIMA DE LA CABECERA ──────────────
La cabecera fija (z-index 1200) se quedaba delante del carrito y del
formulario de pago: en el móvil tapaba media pantalla justo en el paso
de comprar, que es el peor sitio para perder espacio.
───────────────────────────────────────────────────────────────── */
.drawer{z-index:1400 !important;}
.back{z-index:1390 !important;}
.mdl-bg{z-index:1450 !important;}
/* La cabecera NO se aparta: se queda fija también durante la compra, y lo
que cede es el contenido. El buscador y el carrito siguen a mano. */
.drawer{top:var(--nav-h,0px) !important;}
/* El formulario es mas alto que la pantalla del movil: centrado se le comia
la cabecera y el boton de pagar. Arriba y con scroll propio. */
.mdl-bg{padding-top:calc(var(--nav-h,0px) + 12px);align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;}
nav{z-index:1500;}
/* La lengüeta de categorías tampoco pinta nada durante la compra. */
body:has(.drawer.open) .cats-tab,
body:has(.mdl-bg.open) .cats-tab,
body:has(.bdl-bg.open) .cats-tab,
body:has(.drawer.open) .faq-fab,
body:has(.mdl-bg.open) .faq-fab,
body:has(.bdl-bg.open) .faq-fab{display:none;}
/* Durante la compra, el botón de WhatsApp se aparta: estaba justo encima de
"Proceder al pago". Quien ya tiene el carrito abierto no necesita que le
ofrezcan escribir — necesita poder pulsar el botón de pagar. */
body:has(.drawer.open) .wa-fab,
body:has(.mdl-bg.open) .wa-fab{display:none !important;}
/* En la ficha del libro el globo de WhatsApp se sentaba sobre el precio y
sobre "Ultima unidad disponible". Dentro ya hay su propio boton de
consultar por WhatsApp, asi que no se pierde nada. */
@media(max-width:768px){
body:has(.bdl-bg.open) .wa-fab{display:none !important;}
}
/* ═════════════════════════════════════════════════════════════════
ARREGLOS DE MÓVIL — medidos en un teléfono de 375×812
═════════════════════════════════════════════════════════════════ */
/* 1. EL MENÚ SE CORTABA POR ABAJO.
Cuelga de la cabecera (y≈237) y mide 685 px: el final quedaba a 922,
fuera de una pantalla de 812. "Iniciar sesión", "Mis pedidos" y
"Carrito" no se veían, y con overflow:visible tampoco se podía bajar
a ellos. Ahora se queda dentro de la pantalla y rueda. */
.mobile-menu{
max-height:calc(100dvh - var(--nav-h,72px));
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
/* 2. LA PORTADA DEL LIBRO ERA MÁS ALTA QUE EL TELÉFONO.
849 px de foto en una pantalla de 812: para llegar a "Comprar ahora"
había que bajar 547 px. Quien ya decidió comprar no debería tener que
buscar el botón. */
@media(max-width:768px){
/* Solo la IMAGEN. La caja lleva dentro el panel de estado (395 px); al
caparla a ella, ese panel se salia y se pintaba sobre el titulo y el
precio. La portada sola pasa de ~700 px a 422 y eso ya basta. */
.bdl-gallery img{max-height:52svh;object-fit:contain;}
/* La cabecera tapaba la ✕ de cerrar la ficha: la ficha empezaba a 66 px
y la cabecera llega a 237. Igual que en el carrito, cede el contenido. */
/* El hueco de la cabecera ya lo pone `top:var(--nav-h)` cuando hay algo
abierto encima. Este padding lo sumaba otra vez: la ficha empezaba en
335 con 205 px de nada arriba, y parecia que se abria ya bajada. */
.bdl-bg{padding-top:10px;}
/* 3. iOS AMPLIABA LA PÁGINA AL TOCAR CUALQUIER CAMPO.
Safari hace zoom automático en los campos de menos de 16 px y no
vuelve atrás: la tienda se quedaba enorme y descuadrada. Es la razón
de que el buscador "rompiera" la página en el teléfono. */
input,select,textarea{font-size:16px !important;}
/* 4. Los puntos del carrusel medían 8 px de alto: imposible acertar
con el dedo. Se agranda la zona sensible sin tocar el dibujo. */
.promo-dot{position:relative;}
.promo-dot::after{content:'';position:absolute;inset:-14px -8px;}
}
/* 5. EL SELLO DE reCAPTCHA SE SENTABA ENCIMA DE "¿TIENES ALGUNA DUDA?"
Mide 256×60 y Google lo ancla en la misma esquina que el botón de
WhatsApp y el de preguntas: tres cosas en el mismo sitio.
Google permite ocultarlo si el aviso legal aparece a la vista; está
en el pie de página. */
.grecaptcha-badge{visibility:hidden;}
/* ═════════════════════════════════════════════════════════════════
CABECERA DEL MÓVIL AL ESTILO AGUILAR
Tres cosas arriba —rayitas, logo, carrito— y el buscador debajo.
Nada más. Antes había además el login, "Envíos y retiros", dos
iconos y los favoritos: tres renglones y 237 px de cabecera, casi
un tercio de la pantalla, fija todo el rato.
Lo que se va no se pierde: envíos, favoritos, mis pedidos e iniciar
sesión están en el menú de las rayitas.
═════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
nav{padding:.5rem .9rem;row-gap:.45rem;align-items:center;}
/* Se van SOLO al bajar, o cuando hay algo abierto encima: arriba del
todo se ve la cabecera entera. En el menú siguen estando siempre. */
nav.scrolled .nav-ico-btn,
nav.scrolled .nav-envios,
nav.scrolled .wl-btn,
nav.scrolled .nav-pedidos-btn,
nav.scrolled #nav-auth-area,
body:has(.bdl-bg.open) nav .nav-ico-btn,
body:has(.bdl-bg.open) nav .nav-envios,
body:has(.bdl-bg.open) nav .wl-btn,
body:has(.bdl-bg.open) nav .nav-pedidos-btn,
body:has(.bdl-bg.open) nav #nav-auth-area,
body:has(#sec-ventana) nav .nav-ico-btn,
body:has(#sec-ventana) nav .nav-envios,
body:has(#sec-ventana) nav .wl-btn,
body:has(#sec-ventana) nav .nav-pedidos-btn,
body:has(#sec-ventana) nav #nav-auth-area,
body:has(.mdl-bg.open) nav .nav-ico-btn,
body:has(.mdl-bg.open) nav .nav-envios,
body:has(.mdl-bg.open) nav .wl-btn,
body:has(.mdl-bg.open) nav .nav-pedidos-btn,
body:has(.mdl-bg.open) nav #nav-auth-area,
body:has(.drawer.open) nav .nav-ico-btn,
body:has(.drawer.open) nav .nav-envios,
body:has(.drawer.open) nav .wl-btn,
body:has(.drawer.open) nav .nav-pedidos-btn,
body:has(.drawer.open) nav #nav-auth-area{display:none !important;}
/* Arriba del todo caben, pero apretados: sin etiquetas largas */
nav .nav-envios{font-size:.66rem;padding:7px 10px;}
/* El logo, centrado y a su tamaño: es lo que ancla la marca */
.nav-logo{order:2;margin:0 auto;}
.nav-logo img{height:56px;}
.hamburger-btn{order:1;}
.nav-right{order:3;gap:0;}
.navsearch{order:4;flex:1 1 100%;padding:0;}
/* El carrito con su globo de cantidad, como el de Aguilar */
nav .cart-btn{
min-width:44px;min-height:44px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
background:none;border:none;position:relative;
/* El color venia en blanco porque el boton tenia fondo oscuro: al
quitarle el fondo, el icono quedaba blanco sobre blanco y solo se
veia el globito del numero. */
color:var(--ink);
}
nav .cart-btn .ic{width:24px;height:24px;color:var(--ink);stroke:currentColor;fill:none;}
nav .cart-btn .cart-n{
position:absolute;top:1px;right:1px;
min-width:17px;height:17px;padding:0 4px;
display:flex;align-items:center;justify-content:center;
background:var(--sky-dark);color:#fff;
border-radius:999px;font-size:.62rem;font-weight:700;line-height:1;
}
}
/* ── LA CABECERA NO SE VA NUNCA ───────────────────────────────────────
La ficha del libro y las ventanas del menu congelan el cuerpo de la
pagina. La cabecera va pegada a ese flujo congelado, asi que se
quedaba donde estuviera el scroll: medido a -2965 px en Preguntas y a
-5441 en la ficha de un libro. Mientras haya algo abierto encima, pasa
a fija arriba y lo de abajo le deja su sitio. */
body:has(.bdl-bg.open) nav,
body:has(#sec-ventana) nav,
body:has(.mdl-bg.open) nav,
body:has(.drawer.open) nav,
body:has(.mobile-menu.open) nav{
position:fixed;top:0;left:0;right:0;
}
body:has(.bdl-bg.open) .bdl-bg,
body:has(#sec-ventana) #sec-ventana{
top:var(--nav-h,0px);
}
/* La franja de avisos se va mientras haya algo abierto. Si no, la cabecera
al pasar a fija saltaba 38 px hacia arriba y se le montaba encima. Y de
todas formas, quien esta mirando un libro no necesita los anuncios. */
body:has(.bdl-bg.open) .adbar,
body:has(#sec-ventana) .adbar,
body:has(.mdl-bg.open) .adbar,
body:has(.drawer.open) .adbar{display:none;}
/* El menu por encima de todo: se abria con z-index 1000 y la cortina del
carrito va con 1390, asi que quedaba detras y parecia que no abria. */
.mobile-menu{z-index:1600 !important;}
/* ═════════════════════════════════════════════════════════════════
AVISO DE COOKIES — apagado hoy, listo para el día del píxel
Los dos botones son el mismo botón con distinto fondo: mismo tamaño,
misma letra, misma zona. Si rechazar costara más que aceptar, el
consentimiento no sería libre y no valdría.
═════════════════════════════════════════════════════════════════ */
.ck-aviso{
position:fixed;left:0;right:0;bottom:0;z-index:1700;
background:#fff;border-top:1px solid var(--border);
box-shadow:0 -4px 24px rgba(22,34,61,.10);
padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom,0px));
}
.ck-caja{
max-width:1100px;margin:0 auto;
display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
}
.ck-txt{flex:1 1 380px;min-width:0;}
.ck-txt strong{display:block;font-size:.95rem;margin-bottom:.25rem;color:var(--ink);}
.ck-txt p{margin:0;font-size:.82rem;line-height:1.6;color:var(--muted);}
.ck-txt a{color:var(--sky-dark);text-decoration:underline;}
.ck-btns{display:flex;gap:.6rem;flex:0 0 auto;}
.ck-btn{
flex:1 1 auto;min-height:44px;padding:11px 20px;
border:1px solid var(--sky-dark);border-radius:999px;
background:#fff;color:var(--sky-dark);
font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
white-space:nowrap;
}
.ck-btn--si{background:var(--sky-dark);color:#fff;}
.ck-btn:hover{filter:brightness(.95);}
@media(max-width:768px){
.ck-caja{gap:.9rem;}
.ck-btns{width:100%;}
.ck-btn{flex:1 1 0;padding:11px 12px;}
/* Encima del botón de WhatsApp, que vive en la misma esquina */
.ck-aviso:not([hidden]) ~ .wa-fab,
body:has(.ck-aviso:not([hidden])) .wa-fab,
body:has(.ck-aviso:not([hidden])) .faq-fab{display:none !important;}
}
.fbot-ck a{color:inherit;text-decoration:underline;}
/* ═════════════════════════════════════════════════════════════════
LOS DOS BOTONES FLOTANTES — preguntas arriba, WhatsApp debajo
Lo pidió la clienta en este orden y con razón: primero que miren si
la respuesta ya está escrita, y solo si no la encuentran, que nos
escriban. Al revés, el chat se lleva las veinte preguntas de siempre.
═════════════════════════════════════════════════════════════════ */
.faq-fab{bottom:auto;}
@media(min-width:0px){
.faq-fab{position:fixed;right:20px;bottom:80px;z-index:1499;}
.wa-fab{bottom:20px !important;right:20px !important;z-index:1500 !important;}
}
/* El texto también en el celular: un círculo verde no dice a dónde lleva,
y la clienta quiere que se lea "Chatea con nosotros". */
@media(max-width:768px){
.wa-fab{
width:auto;height:auto;padding:10px 16px 10px 12px;border-radius:var(--radius-pill);
gap:8px;justify-content:flex-start;
right:14px !important;bottom:14px !important;
}
.wa-fab svg{width:20px;height:20px;flex:0 0 20px;}
.wa-fab-txt{display:inline;font-size:.78rem;}
.faq-fab{right:14px;bottom:70px;padding:9px 14px;font-size:.72rem;}
}
/* Sitio por debajo del último párrafo: los dos botones ocupan la esquina
y se comían la última línea de cada texto. Ahora siempre se puede
subir por encima de ellos. */
.sec-ventana-cuerpo{padding-bottom:130px;}
@media(max-width:768px){
.bdl-bg .bdl{padding-bottom:120px;}
footer{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));}
}
/* ═════════════════════════════════════════════════════════════════
FICHA: EL DETALLE DEL USO, PLEGADO
Estaba abierto entre la foto y el título: lo primero que leías tras
la portada eran cuatro párrafos sobre el desgaste de las esquinas, y
el género, el título y el precio quedaban debajo de todo eso. Ahora
va al final y solo se abre si el cliente quiere.
═════════════════════════════════════════════════════════════════ */
.bdl-detalles{
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
margin:1.4rem 0 .4rem;
}
.bdl-detalles > summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:10px;
min-height:52px;padding:.7rem 0;
font-family:var(--sans);font-size:.85rem;font-weight:700;color:var(--ink);
}
.bdl-detalles > summary::-webkit-details-marker{display:none;}
.bdl-detalles > summary::after{
content:'';flex:0 0 auto;width:8px;height:8px;margin-right:4px;
border-right:2px solid var(--sky-dark);border-bottom:2px solid var(--sky-dark);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
}
.bdl-detalles[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.bdl-detalles > summary:hover{color:var(--sky-dark);}
/* Dentro ya no necesita su marco: el se lo pone */
.bdl-detalles .bdl-estado-panel{border:none;padding:0 0 1.2rem;background:none;}
/* ═════════════════════════════════════════════════════════════════
ENTRAR A LA CUENTA
El formulario salía DETRÁS de las ventanas del menú: z-index 500
contra 1300. Al pulsar "Entra para abrir la tuya" desde Caja lectora
no pasaba nada, y la ventana aparecía al cerrar el módulo — que es
justo lo que reportó la clienta.
═════════════════════════════════════════════════════════════════ */
.auth-bg{z-index:1650 !important;align-items:flex-start !important;}
.auth-bg{padding-top:calc(var(--nav-h,0px) + 14px) !important;overflow-y:auto;}
/* Ver la contraseña mientras se escribe */
.auth-pass{position:relative;display:flex;align-items:center;}
.auth-pass input{flex:1;padding-right:86px;}
.auth-ojo{
position:absolute;right:8px;
min-height:36px;padding:0 12px;border-radius:999px;
border:1px solid var(--border);background:#fff;color:var(--sky-dark);
font-family:var(--sans);font-size:.72rem;font-weight:700;cursor:pointer;
}
.auth-ojo:hover{background:var(--sky-light);border-color:var(--sky);}
/* ═════════════════════════════════════════════════════════════════
ENVÍOS Y COMPRAMOS LIBROS, CON SU NOMBRE
La clienta los quiere a la vista arriba, como en Aguilar. Dos iconos
sueltos —un camión y una caja— no dicen a dónde llevan; ya avisó de
que no quería iconos genéricos. Llevan el texto mientras la página
está arriba del todo; al bajar, la cabecera se encoge y quedan el
logo, el carrito y el buscador.
═════════════════════════════════════════════════════════════════ */
.nav-ico-txt{display:none;}
@media(max-width:768px){
nav:not(.scrolled) .nav-ico-btn{
width:auto;height:auto;min-height:38px;padding:0 13px;
border-radius:var(--radius-pill);gap:7px;
order:5;flex:0 0 auto;
}
nav:not(.scrolled) .nav-ico-txt{
display:inline;white-space:nowrap;
font-family:var(--sans);font-size:.72rem;font-weight:700;
letter-spacing:.02em;color:var(--ink);
}
/* "Compramos libros" es lo que la clienta quiere empujar: va en color */
nav:not(.scrolled) .nav-ico-btn--vender{
background:var(--sky-dark);border-color:var(--sky-dark);
}
nav:not(.scrolled) .nav-ico-btn--vender .nav-ico-txt{color:#fff;}
nav:not(.scrolled) .nav-ico-btn--vender .ic{stroke:#fff;}
/* Su propio renglón, debajo del buscador, como en Aguilar. En UNA fila:
con flex-wrap se partían en dos renglones descuadrados —el corazón y
"Envíos" arriba, "Compramos libros" solo y centrado debajo—. */
nav:not(.scrolled) .navsearch{order:4;}
} /* <- cierra el @media de la linea 2811. Faltaba: dejaba
atrapadas dentro ~540 lineas, o sea todo lo que hay debajo de
aqui solo se aplicaba por debajo de 768 px. Entre ellas el
"← Volver" de las ventanas, el boton redondo de WhatsApp y el
tamano del precio del delivery, que son para todas las pantallas.
Se nota que era global porque justo debajo hay OTRO @media de 768
anidado, que sobraria si el de fuera ya lo fuese. */
/* ═════════════════════════════════════════════════════════════════
EL BOTÓN DE WHATSAPP, COMO AGUILAR
Con el texto medía 184 px —media pantalla— y por muy bien colocado
que estuviera siempre tapaba alguna línea. La clienta prefiere el
círculo verde de siempre, que todo el mundo reconoce.
═════════════════════════════════════════════════════════════════ */
.wa-fab{
width:56px !important;height:56px !important;
padding:0 !important;border-radius:50% !important;
justify-content:center !important;gap:0 !important;
}
.wa-fab .wa-fab-txt{display:none !important;}
.wa-fab svg{width:28px;height:28px;flex:0 0 28px;}
@media(max-width:768px){
.wa-fab{width:52px !important;height:52px !important;}
.wa-fab svg{width:26px;height:26px;flex:0 0 26px;}
}
/* La tarifa, que es lo que la gente busca primero */
/* .env-card p la pisaba: dos clases ganan a una, y la tarifa se quedaba
en 14 px, del tamano del texto corriente. Es el dato que la gente
busca primero en esta tarjeta. */
.env-card .env-precio{font-size:1.9rem !important;font-weight:800;color:var(--sky-dark);margin:.2rem 0 .6rem !important;line-height:1.1;}
/* El enlace de Maps ahora es : que se siga viendo igual */
button.env-maps{font-family:inherit;cursor:pointer;}
/* ═════════════════════════════════════════════════════════════════
EL MISMO «← VOLVER» EN TODAS LAS VENTANAS
La clienta dio por bueno el de Envíos y pidió el mismo en las demás.
Una ✕ suelta obliga a adivinar qué cierra; la pastilla dice a dónde
te lleva y se pulsa con el dedo sin apuntar.
═════════════════════════════════════════════════════════════════ */
.bdl-close,
.cats-panel-x{
display:inline-flex !important;align-items:center;gap:7px;
width:auto !important;height:auto !important;min-height:44px;
border-radius:var(--radius-pill) !important;padding:9px 16px !important;
border:1px solid var(--sky) !important;background:var(--sky-light) !important;
color:var(--sky-dark) !important;
font-family:var(--sans) !important;font-size:0 !important;font-weight:700 !important;
cursor:pointer;white-space:nowrap;
}
.bdl-close::after,
.cats-panel-x::after{content:'← Volver';font-size:.78rem;}
.bdl-close:hover,
.cats-panel-x:hover{background:var(--sky) !important;color:#fff !important;}
/* El «?» se apartaba 62 px del borde, que era el ancho de la ✕ redonda.
Con la pastilla «← Volver», que mide 92, se le montaba encima. */
.bdl-ayuda{right:auto !important;left:14px !important;}
.bdl-close{top:14px !important;right:14px !important;}
/* El «← Volver» del menú, igual que el de Envíos */
.mm-volver{
align-self:flex-start;margin:0 0 .6rem;
display:inline-flex;align-items:center;gap:7px;min-height:44px;
padding:9px 16px;border-radius:var(--radius-pill);
border:1px solid var(--sky);background:var(--sky-light);color:var(--sky-dark);
font-family:var(--sans);font-size:.78rem;font-weight:700;cursor:pointer;
}
.mm-volver:hover{background:var(--sky);color:#fff;}
/* ═════════════════════════════════════════════════════════════════
LOS DOS FLOTANTES, IGUALES Y SIEMPRE PUESTOS
Al de preguntas le había puesto que se escondiera al mover la página
y que se encogiera a los ocho segundos. Eran parches para que el de
WhatsApp —que entonces llevaba texto y medía media pantalla— dejara
de tapar párrafos. Con los dos hechos círculos eso ya no hace falta,
y un botón que aparece y desaparece solo parece roto.
═════════════════════════════════════════════════════════════════ */
.faq-fab{
width:52px;height:52px;padding:0;gap:0;font-size:0;
border-radius:50%;justify-content:center;
right:20px;bottom:84px;
}
.faq-fab .faq-fab-txt{display:none;}
.faq-fab::before{width:24px;height:24px;font-size:.95rem;}
.wa-fab{right:20px !important;bottom:20px !important;}
@media(max-width:768px){
.faq-fab{width:52px;height:52px;right:14px;bottom:78px;padding:0;}
.wa-fab{right:14px !important;bottom:14px !important;}
}
/* ═════════════════════════════════════════════════════════════════
EL LOGO OFICIAL
Es horizontal —mascota y nombre juntos—, así que va ancho y bajo,
como el de Aguilar. El cuadrado se veía diminuto y la marca no se
leía; este ocupa lo mismo de alto y dice quién eres.
═════════════════════════════════════════════════════════════════ */
/* Medido en el propio Aguilar a 369 px de ancho: su logo ocupa unos 122 px
de ancho en la cabecera. El nuestro es mas cuadrado --lleva la mascota
encima del nombre-- asi que se manda por ANCHO, no por alto: igualando la
altura se veia la mitad de grande que el suyo. */
.nav-logo img{height:auto !important;width:122px;max-width:34vw;display:block;}
@media(max-width:768px){
.nav-logo img{width:118px;}
}
/* ═════════════════════════════════════════════════════════════════
LA VENTANA SE SALÍA POR ARRIBA Y SE METÍA BAJO LA CABECERA
`.sec-ventana` centraba su caja verticalmente. Cuando la caja es más
alta que el hueco disponible —casi siempre, con estos textos— centrar
la empuja FUERA por arriba: medido, la ventana empieza en 118 y su
cabecera acababa en 59, detrás del buscador. Por eso el «← Volver» no
se veía: estaba puesto, pero tapado.
Pegada arriba y nunca más alta que su hueco.
═════════════════════════════════════════════════════════════════ */
.sec-ventana{align-items:flex-start !important;}
.sec-ventana-caja{max-height:100% !important;}
@media(max-width:768px){
/* height:100vh era de cuando la ventana ocupaba la pantalla entera;
ahora empieza bajo la cabecera y esa altura la desbordaba. */
.sec-ventana-caja{height:auto !important;}
}
/* ═════════════════════════════════════════════════════════════════
LA FILA DE ABAJO NO CABÍA
Con el logo ya grande, `.nav-right` medía 390 px en una pantalla de
369 y «Compramos libros» se salía por el borde. El carrito no pinta
nada en esa fila: va arriba, junto al logo, que es donde lo busca
todo el mundo. Así abajo quedan solo los dos botones y entran.
═════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
nav{position:sticky;}
nav .cart-btn[aria-label="Abrir carrito"]{
position:absolute !important;right:12px !important;top:10px !important;
order:0 !important;margin:0 !important;
}
nav:not(.scrolled) .nav-right{
width:100%;justify-content:center;gap:.45rem;flex-wrap:nowrap;
/* Sin hueco reservado: el carrito ya no esta en esta fila, subio con el
logo. Reservarlo aqui apretaba los dos botones y cortaba
"Compramos libros" por la mitad. */
}
nav:not(.scrolled) .wl-btn{flex:0 0 auto;}
nav:not(.scrolled) .nav-ico-btn{min-width:0;flex:0 1 auto;overflow:hidden;}
nav:not(.scrolled) .nav-ico-txt{font-size:.7rem;overflow:visible;text-overflow:clip;}
}
/* ═════════════════════════════════════════════════════════════════
TEXTO DEMASIADO PEQUEÑO EN EL TELÉFONO
Medido en la web: la cinta del estado salía a 8,3 px y la categoría
de cada tarjeta a 8,5. En una pantalla de teléfono eso no se lee, y
justo el estado del ejemplar es de lo que más insiste la clienta —
no sirve de nada enseñarlo si hay que acercar el ojo.
═════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
.ribbon,
.card-estado,
.fila-estado{font-size:10.5px !important;letter-spacing:.04em;}
.icat{font-size:10.5px !important;letter-spacing:.06em;}
.iauthor{font-size:11.5px !important;}
.estados-tag{font-size:11px !important;}
.promo-etiqueta{font-size:11px !important;}
}
/* ═════════════════════════════════════════════════════════════════
EL PIE: DOS TEXTOS QUE NO SE LEÍAN
Medido con la fórmula de contraste WCAG sobre el fondo real:
«Libro de Reclamaciones» 1,36:1 ❌ (mínimo exigible 4,5)
botón «Enviar» 1,81:1 ❌
Los enlaces del pie salían en el azul por defecto del navegador
(#0000EE) sobre el azul oscuro del pie: nadie los había vestido. Y
ese enlace no es decorativo — el Libro de Reclamaciones es
obligatorio por Indecopi, y uno que no se ve es como no tenerlo.
═════════════════════════════════════════════════════════════════ */
.fbot a,
.fbot-recaptcha a,
footer .pie-acc-body a[href^="http"]{
color:#fff !important;text-decoration:underline;
}
.fbot a:hover,.fbot-recaptcha a:hover{color:var(--aqua) !important;}
/* El de preferencias iba al 40 % de opacidad: se leía peor que el resto */
.fbot-ck a{color:rgba(255,255,255,.92) !important;}
/* El botón del boletín: blanco sobre aqua claro daba 1,81:1. Con el aqua
hondo pasa de 4,5 y sigue siendo el mismo color de marca. */
#bol-btn{
background:var(--sky-dark) !important;color:#fff !important;
border:1px solid var(--sky-dark) !important;font-weight:700;
}
#bol-btn:hover{background:#35708a !important;}
/* El aviso del formulario de reseñas: error en rojo, acierto en azul.
Antes el color iba en línea y lo pisaba la hoja, así que los errores
salían del color del acierto. */
.resena-msg--mal{color:#B4232A !important;}
.resena-msg--bien{color:var(--sky-dark) !important;}
/* ══════════════════════════════════════════════════════════════════
LOS AVISOS, POR ENCIMA DE TODO
══════════════════════════════════════════════════════════════════
El toast nacia con z-index:500 y el checkout esta en 1450, asi que
TODOS los avisos del momento de pagar salian por debajo del propio
formulario: invisibles. Y ahi es justo donde importan --"tarjeta
rechazada", "falta el telefono", "ya no queda stock"--. El cliente
pulsaba Pagar, no pasaba nada visible, y volvia a pulsar.
Ademas venia con white-space:nowrap. El mensaje de Culqi por una
tarjeta rechazada son 78 caracteres: en un movil de 375px se salia
de la pantalla aunque se viera.
Se queda por debajo del cartel de mantenimiento a proposito: si la
tienda esta cerrada, no hay nada que avisar por encima. */
.toast{
z-index:1750 !important; /* nav 1500 · mdl 1450 · menu 1600 · cookies 1700 */
white-space:normal !important;
/* Ancho FIJO, no max-width: con left:50% el hueco disponible es solo
la mitad derecha de la pantalla, asi que un max-width nunca se
alcanza y el aviso sale en una columna de 170px. */
width:min(92vw,420px);
right:auto;
text-align:center;
line-height:1.5;
/* Encima de la barra de gestos del movil, no debajo. */
bottom:calc(2rem + env(safe-area-inset-bottom,0px)) !important;
}
/* ══════════════════════════════════════════════════════════════════
EL ARTE DEL BANNER, ENTERO EN EL MOVIL
══════════════════════════════════════════════════════════════════
El hueco esta en 3/2 y el arte de movil que mando la clienta es
1350x1080, o sea 5/4. Con object-fit:cover eso recorta unos 50px por
arriba y por abajo --en un movil de 375px, el 17% del diseno--. Y el
arte lleva el texto dibujado dentro: lo que se recorta no vuelve.
El de escritorio (1800x675, 8/3) se queda como estaba: ahi el 3/2 ya
recorta a proposito para no comerse media pantalla de alto.
ponytail: un ratio fijo. Si algun dia manda el arte en otra
proporcion, es cambiar este numero. */
@media (max-width:768px){
.promo-slide--arte{ aspect-ratio:5/4 !important; }
}
/* ══════════════════════════════════════════════════════════════════
LA CUENTA, AL LADO DEL CARRITO EN EL MOVIL
══════════════════════════════════════════════════════════════════
tienda.css esconde #nav-auth-area por debajo de 768px, asi que en el
telefono --que es por donde entra casi todo el mundo-- para iniciar
sesion habia que abrir las tres rayitas y buscarlo. Como en Buscalibre:
el muneco al lado del carrito, siempre a la vista.
Solo el icono: la etiqueta se esconde, que ahi no cabe. Por eso el
boton lleva aria-label -- sin texto visible, quien navega con lector de
pantalla se quedaria con un boton mudo. */
@media (max-width:768px){
/* El carrito no va en el flujo: esta en absolute, top:10 right:12. Para
ponerse a su lado hay que hacer lo mismo, corrido un boton a la
izquierda (44 de ancho + 4 de aire). Con `order` no bastaba: el
carrito no participa de ese orden. */
#nav-auth-area{
display:flex !important;
align-items:center;
position:absolute; top:10px; right:58px;
/* Ajustado al icono y nada mas: con el relleno de serie median 56px
y se metian 17px en la caja del logo, que no se toca --la clienta
lo quiere del tamano de la libreria Aguilar--. */
width:38px; justify-content:flex-end;
}
#nav-auth-area .nav-auth-txt,
#nav-auth-area .nav-user-name{ display:none; }
#nav-auth-area .cart-btn{
padding:0; width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
background:none; border:none;
}
#nav-auth-area .cart-btn .ic{ width:24px; height:24px; }
/* Ya dentro, el avatar con la inicial hace de icono. */
#nav-auth-area .nav-user{ cursor:pointer; }
#nav-auth-area .nav-avatar{ width:30px; height:30px; font-size:.82rem; }
}
/* ══════════════════════════════════════════════════════════════════
EL LOGO, EN EL CENTRO DE VERDAD
══════════════════════════════════════════════════════════════════
El logo iba en el flujo normal y el carrito en absolute, asi que lo
unico que lo empujaba era el ancho de la hamburguesa: quedaba 29px
corrido a la derecha en un movil de 375. Se centra respecto a la
pantalla, como el carrito, y ya no depende de lo que tenga al lado.
Queda holgura por los dos lados: la hamburguesa acaba en 62 y el logo
empieza en 129; el boton de cuenta empieza en 279 y el logo acaba en
247. */
@media (max-width:768px){
/* Margenes automaticos, NO position:absolute. Sacarlo del flujo colapsa
la altura del nav y el logo se come la fila de los chips; y ademas el
translateX(-50%) lo pisa otra regla que deja transform:none.
Con auto a los dos lados, el hueco libre se reparte igual y queda
centrado sin depender de lo que mida la hamburguesa. */
.nav-logo{ margin-left:auto; margin-right:auto; padding-right:59px; }
/* Los 48px salen de una cuenta, no de probar a ojo: la hamburguesa
ocupa hasta los 62px por la izquierda, mientras la cuenta y el
carrito van en absolute y no reservan NADA por la derecha. Los
margenes automaticos reparten el hueco entre 62 y el borde, asi
que el logo se iba 30px a la derecha. Reservando 59 a la derecha,
el centro del logo cae en W/2 -- y la cuenta sale igual para
cualquier ancho de movil, porque los dos extremos son fijos en px. */
}
/* ══════════════════════════════════════════════════════════════════
TANDA DE LA CLIENTA — 20 de septiembre
══════════════════════════════════════════════════════════════════ */
/* ── Novedades, como en la libreria Aguilar ────────────────────────
El titulo manda y el subtitulo va debajo, no al lado. El boton se
fue al pie de la fila: arriba competia con el titulo y en el movil
empujaba los filtros fuera de sitio. */
.fila-head--solo{ display:block; }
.fila-titulo{ font-size:1.6rem; line-height:1.15; }
.fila-sub{ margin-top:.25rem; font-size:.92rem; }
@media(max-width:768px){
.fila-titulo{ font-size:1.45rem; }
.fila-sub{ font-size:.88rem; }
}
.fila-pie{ display:flex; justify-content:center; margin-top:1.1rem; }
.fila-ver--abajo{ padding:.72rem 1.4rem; font-size:.84rem; letter-spacing:.06em; }
/* En el movil se ven DOS libros por pantalla y el resto se desliza a
mano, igual que Aguilar. Antes cabian tres y medio y ninguno se leia. */
@media(max-width:768px){
#novedades .fila-track{
display:flex; gap:12px;
overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
#novedades .fila-track::-webkit-scrollbar{ display:none; }
#novedades .fila-track > *{
flex:0 0 calc((100% - 12px) / 2);
scroll-snap-align:start;
}
}
/* Los filtros de novedades, alineados entre si: el select y el buscador
tenian alturas distintas y la etiqueta de uno caia mas abajo que la
del otro. */
#nov-filtros{
display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
margin:0 0 1rem;
}
#nov-filtros > *{ flex:1 1 180px; min-width:0; }
#nov-filtros label{ display:block; margin-bottom:4px; line-height:1.2; }
#nov-filtros select,
#nov-filtros input{ width:100%; height:42px; box-sizing:border-box; }
/* ── El bloque de garantias, delimitado ────────────────────────────
Flotaba sobre el blanco de la pagina y no se leia como un bloque.
Un tono suave basta; una caja con borde pesaria de mas. */
.benef{
/* Tono explicito, no var(--paper): esa variable ya es blanco en esta
paleta y el bloque seguia sin distinguirse del fondo de la pagina. */
background:#F7F4EF;
border-top:1px solid var(--border, #EFE7DC);
border-bottom:1px solid var(--border, #EFE7DC);
padding-block:2.2rem;
}
/* ── Envios y retiros, a la izquierda y algo mayor ─────────────────
La clienta lo pidio alineado a la izquierda y mas legible. El
corazon de favoritos sale de esa linea: es otra cosa. */
.nav-ico-btn .nav-ico-txt{
font-size:.86rem;
letter-spacing:.01em;
text-align:left;
}
@media(max-width:768px){
.nav-ico-btn{ justify-content:flex-start; }
.nav-ico-btn .nav-ico-txt{ font-size:.82rem; }
/* El corazon, fuera de la fila de los dos accesos. */
.wl-btn{ order:-1; }
}
/* ── Los tres horarios del pie ─────────────────────────────────────
Tres lineas, porque son tres cosas distintas: la web no cierra, el
WhatsApp tiene horas y al almacen solo se entra con cita. */
.pie-horarios{ margin:.7rem 0 .2rem; display:grid; gap:.45rem; }
.pie-horario-fila{ display:grid; gap:1px; font-size:.82rem; line-height:1.45; }
.pie-horario-fila strong{
font-weight:700;
display:flex; align-items:center; gap:7px;
}
.pie-horario-fila .ic{ width:1em; height:1em; opacity:.9; }
.pie-horario-fila span{ opacity:.85; }
/* ── Que los iconos flotantes no tapen el texto ────────────────────
La clienta lo ha señalado tres veces. Los FAB ocupan de x=309 a 361
en una pantalla de 375 y el texto del bloque va centrado a todo el
ancho: su mitad derecha caia justo debajo.
No se esconden los FAB --ella pidio expresamente que esten SIEMPRE,
los dos-- asi que se estrecha el texto. 250px centrados en 375 van de
62 a 312, y el FAB empieza en 309: con el relleno lateral del propio
item queda holgura. Es la unica solucion que respeta las dos cosas. */
@media(max-width:768px){
.benef-item span,
.benef-item strong{
max-width:250px;
margin-inline:auto;
}
}
/* El final de la pagina, por encima de los iconos flotantes.
Un FAB fijo tapa lo que pasa por debajo mientras scroleas: eso es
inherente y se resuelve solo al seguir bajando. Lo que NO se resuelve
solo es el ULTIMO parrafo -- ahi ya no queda pagina que mover y el
icono se queda encima para siempre. Esa era la queja real.
Dos FAB de 52 + 32 de separacion + 20 de margen = 156. */
@media(max-width:768px){
footer{ padding-bottom:calc(156px + env(safe-area-inset-bottom,0px)) !important; }
}
/* ── Las colecciones, en color de Prince ───────────────────────────
El fondo lo pone getUnivTheme() en linea, y por defecto devuelve
#1A1A2A: un negro azulado que no es de la marca. La clienta pidio
"colores de Prince, no negro, por ahora".
Va con !important porque el color viaja en el atributo style de cada
tarjeta: una regla normal no lo alcanza. Es el azul profundo de la
marca (--ink), que deja el texto blanco con contraste de sobra.
Cuando se quieran colores por coleccion, el sitio de cambiarlo es
UNIV_THEMES en tienda.js, no esto. */
.univ-card{
background:var(--ink) !important;
border-color:rgba(255,255,255,.12) !important;
}
/* La tarifa plana, justo bajo el precio del delivery. */
.env-plana{
margin:-2px 0 .7rem;
font-size:.82rem;
font-weight:700;
color:var(--sky-dark);
}
/* ══════════════════════════════════════════════════════════════════
UNIVERSOS: AZUL DE PRINCE, NO NEGRO
══════════════════════════════════════════════════════════════════
La tarjeta ya estaba corregida, pero el negro venia de otro sitio: el
velo que cubre TODA la pantalla del universo era negro puro
--rgba(0,0,0,.42) a .78-- y la barra de arriba tambien. En un movil,
con la ilustracion de fondo apagada por ese velo, la pantalla entera
se lee como negra por mucho que las tarjetas sean azules.
Se cambia el negro por el azul profundo de la marca (22,34,61) con las
MISMAS opacidades: la ilustracion sigue viendose y el texto blanco
mantiene su contraste, pero el tono ya es de Prince.
Las tarjetas suben a #22335C: #16223D daba 15.8:1 de contraste pero a
ojo seguia pareciendo negro. Este sigue en 12.4:1 --de sobra para AA--
y se lee como azul. */
.univ-bg::after{
background:linear-gradient(to bottom,
rgba(22,34,61,.42) 0%,
rgba(22,34,61,.60) 38%,
rgba(22,34,61,.80) 100%) !important;
}
.univ-nav{ background:rgba(22,34,61,.45) !important; }
.univ-card{ background:#22335C !important; }
/* El velo de detras de los paneles, del mismo tono. */
#back.back{ background:rgba(22,34,61,.62) !important; }
/* ══════════════════════════════════════════════════════════════════
LAS TARJETAS DE UNIVERSOS, EN CLARO
══════════════════════════════════════════════════════════════════
Daniel lo dijo dos veces: "sigo viendolos oscuros". Y tenia razon
aunque ya fueran azules -- el problema no era el tono, era que son
los UNICOS bloques oscuros de una tienda entera en claro. Cantaban.
Ahora van en azul palido de la marca con el texto en tinta. El texto
y los colores vienen en atributos `style` desde tienda.js, asi que
hace falta !important y llegar a los hijos por posicion: no tienen
clase propia. Si algun dia se les pone clase, esto se simplifica.
Contraste comprobado: tinta #16223D sobre #E8F4F9 da 13.9:1. */
.univ-card{
/* La MISMA tarjeta que un libro del catalogo: blanco, borde #E4E9F0 y
texto en tinta. No un color aparte.
Se probaron antes tres tonos --azul profundo, pastel y azul medio--
y todos fallaban por lo mismo: eran el unico bloque de la tienda con
color propio, asi que cantaban. La respuesta era no darles color.
Si alguien vuelve a tocarlo: los valores salen de .card, que es la
tarjeta de libro. Cambiar los dos a la vez o ninguno. */
background:#FFFFFF !important;
border:1px solid #E4E9F0 !important;
box-shadow:0 2px 10px rgba(22,34,61,.05);
}
/* El velo oscuro sobre los lomos, fuera: sobre fondo claro sobra. */
.univ-card > div:first-child{ background:transparent !important; }
.univ-card > div:first-child > div{ background:linear-gradient(to bottom,transparent 65%,rgba(22,34,61,.10)) !important; }
/* El cuerpo: separador y textos en tinta.
Ojo con la estructura, que me equivoque una vez: la tarjeta tiene TRES
hijos --portadas, cuerpo, y un "Ver ->" suelto al final-- asi que el
cuerpo es el hijo 2, no el ultimo. Y hay dos variantes, categorias y
colecciones, con textos distintos.
Por eso primero va una red que tine TODO de tinta, y despues se matizan
la etiqueta y el enlace. Sin esa red, cualquier variante que no encaje
en los nth-child se queda con el texto blanco sobre fondo claro, o sea
invisible. Ya paso. */
.univ-card, .univ-card *{ color:var(--ink, #16223D) !important; }
.univ-card > div:nth-child(2){ border-top:1px solid #E4E9F0 !important; }
/* La etiqueta y el "Ver ->" iban en #1E5B73, que servia cuando el fondo
era palido. Sobre el azul medio dan 2.24:1 -- ilegibles. Van en tinta,
que da 4.71:1, con la etiqueta algo mas tenue por jerarquia. */
.univ-card > div:nth-child(2) > div:nth-child(1){ color:var(--rust-ink, #1E5B73) !important; }
.univ-card > div:nth-child(2) > div:nth-child(2){ color:var(--ink, #16223D) !important; }
.univ-card > div:nth-child(3){ color:var(--ink, #16223D) !important; font-weight:700; }
/* ── EL PANEL DE CATEGORÍAS, DEBAJO DE LA CABECERA ────────────────
La cabecera es sticky con z-index 1500 (se subió a propósito para
que siga a mano durante la compra). El panel abría con `inset:0`
y z-index 1200, así que la cabecera se le ponía delante y le tapaba
su propio título y la ✕ de cerrar. Sin haber bajado nada la
cabecera mide 235 px: se comía el título y las tres primeras
categorías. Al hacer scroll se encoge, y por eso solo se veía mal
arriba del todo.
Se le da el MISMO trato que al carrito (.drawer): empezar debajo de
la cabecera en vez de pelearse con ella por el z-index. Así el
buscador y el carrito siguen accesibles con el panel abierto. */
/* Se resolvio subiendolo por encima de la cabecera, no apartandolo:
`--nav-h` solo se calcula en movil, asi que en escritorio el panel
seguia empezando en 0 y tapado. Es ademas lo que ya hace el menu de
las tres rayas (z-index 1600), que es su hermano: los dos son
paneles de navegacion a pantalla completa con su propio cierre. */
.cats-panel{z-index:1600;}
/* Y los botones flotantes tampoco pintan nada con el panel abierto:
se quedaban encima de la lista. Es la misma regla que ya existe
para el carrito y la ficha, con el panel añadido. */
body:has(.cats-panel:not([hidden])) .wa-fab,
body:has(.cats-panel:not([hidden])) .faq-fab,
body:has(.cats-panel:not([hidden])) .cats-tab{display:none;}
/* ══════════════════════════════════════════════════════════════════
TANDA DEL 22 DE SEPTIEMBRE
══════════════════════════════════════════════════════════════════ */
/* ── EL CORAZÓN, ARRIBA CON EL CARRITO ────────────────────────────
Estaba en la segunda fila, junto a "Envíos" y "Compramos libros".
La clienta lo quiere donde la gente ya lo busca: pegado al carrito,
como en Buscalibre.
Las tres cuentas van en absolute y ninguna reserva sitio en el
flujo, así que hay que apartar el logo a mano — igual que ya se
hacía con dos. El corazón mide 44 y se le deja 4 de aire:
carrito a 12
cuenta a 12 + 44 + 2 = 58 (ya estaba)
corazón a 58 + 38 + 6 = 102
Y el logo reserva 102 + 44 = 146 menos los 62 que ocupa la
hamburguesa por la izquierda... pero como los márgenes automáticos
reparten desde 62, basta con subir su padding a 103 para que el
centro del logo siga cayendo en W/2. */
@media (max-width:768px){
nav:not(.scrolled) .wl-btn{
position:absolute !important;
top:10px !important; right:102px !important;
order:0 !important; margin:0 !important;
width:44px;height:44px;
}
/* El logo, centrado en el hueco que de verdad queda libre (de los 62
de la hamburguesa a los 229 donde empieza el corazon). Centrarlo en
la ventana entera ya no cabe: con tres iconos a la derecha se
montaria encima del corazon. La cuenta sale de despejar
218,5 - P/2 = centro deseado
que es la misma con la que salian los 59 de antes. */
.nav-logo{ padding-right:146px; }
}
/* ── EL ENCABEZADO, EN CREMA ──────────────────────────────────────
Pedido de la clienta: el mismo fondo que la tarjeta de "Envíos a
todo el país" (#F7F4EF), en vez del blanco. Se aplica también a la
segunda fila y a la barra de avisos, que son parte del encabezado:
dejarlas blancas partiría la cabecera en dos tonos. */
nav,
nav:not(.scrolled),
.navrow2{ background:#F7F4EF; }
/* El buscador va DENTRO del encabezado: en blanco sobre el crema se
sigue leyendo como un campo donde escribir, que es lo que es. */
nav .navsearch input{ background:#fff; }
/* El corazon se metio a la derecha del logo con position:absolute, y
para que no lo pisara se subio el padding-right de .nav-logo de 102
a 146. Esos 44 px extra —el ancho justo del boton— dejaron el logo
descentrado esa misma cantidad hacia la izquierda.
Se compensa moviendo solo la imagen, no la caja: tocar el padding o
sacar el logo del flujo hace que la fila se parta en dos o que la
cabecera pierda 32 px de alto (probado). Un translate no cambia
nada del reparto, y la asimetria es constante —hamburguesa fija a
la izquierda, 146 px fijos a la derecha— asi que el mismo desfase
vale a cualquier anchura: medido en 375 y en 610 px, centro exacto.
Ver assets/test_css.js. */
@media (max-width:768px){
nav:not(.scrolled) .nav-logo img{ transform:translateX(44px); }
}
/* Al bajar, el logo saltaba 49 px hacia la izquierda y el fondo de la
cabecera pasaba de crema a casi blanco: dos cambios a la vez, que es
lo que se nota como un "tirón".
El salto es el mismo defecto que arriba con otro numero: encogida,
la cabecera se queda con el hueco de la derecha reservado aunque los
iconos ya no esten. Medido en 375 y en 610 px: 49 px en ambas. */
@media (max-width:768px){
/* Mismo desplazamiento que arriba: al volver los dos accesos, la
cabecera encogida recupera la misma geometria que la desplegada.
Medido en 375 px: centro del logo en 188, centro de la cabecera
en 188. */
nav.scrolled .nav-logo img{ transform:translateX(44px); }
/* Y los dos accesos, centrados. Viven dentro de .nav-right, que se
encogia a su tamano y los dejaba pegados a la izquierda. */
nav.scrolled .nav-right{ width:100%; justify-content:center; }
}
/* Y el fondo, el mismo crema en los dos estados. */
nav.scrolled{ background:#F7F4EF; }
/* Los dos accesos de arriba, al tamaño que pidio la clienta: como los
de Aguilar, que ocupan el ancho y se leen de lejos. Se reparten la
fila a partes iguales en vez de encogerse a su texto. */
@media (max-width:768px){
nav:not(.scrolled) .nav-ico-btn{
min-height:46px; padding:0 18px; flex:1 1 0; justify-content:center;
}
nav:not(.scrolled) .nav-ico-btn .nav-ico-txt{ font-size:.86rem; }
nav:not(.scrolled) .nav-ico-btn .ic{ width:21px;height:21px; }
}
/* ── El aviso de preguntas, otra vez con su frase ──────────────────
Se habia hecho circulo como el de WhatsApp. La clienta lo quiere
como estaba: la pastilla con "¿Tienes alguna pregunta?" y "Haz clic
aqui" alternandose, que es lo que hace que se lea.
Solo el de preguntas. El de WhatsApp sigue redondo: el que llevaba
texto y medía media pantalla era ese. Se queda encima del suyo
(bottom 84) para no pisarlo. */
.faq-fab{
width:auto; height:auto; padding:11px 18px; gap:8px; font-size:.8rem;
border-radius:var(--radius-pill); justify-content:center;
right:20px; bottom:84px;
}
.faq-fab .faq-fab-txt{ display:inline; }
.faq-fab::before{ width:20px;height:20px;font-size:.72rem; }
@media (max-width:768px){
.faq-fab{ width:auto;height:auto;right:14px;bottom:78px;padding:9px 14px;font-size:.72rem; }
}
/* El lema y los datos legales del pie, como en la hoja de la clienta:
"Tienda virtual 100 %" debajo del nombre, y el RUC y la ubicacion en
letra chica —son el dato legal, no un reclamo—. */
.pie-lema{
font-family:var(--sans); font-size:.78rem; font-weight:700;
letter-spacing:.08em; text-transform:uppercase;
margin:0 0 .7rem; opacity:.7;
}
.pie-mini{ font-size:.74rem; line-height:1.5; margin:0 0 .25rem; opacity:.62; }
.pie-mini a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.pie-mini + .pie-horarios{ margin-top:1rem; }
/* ── SOLO LOS PRODUCTOS ───────────────────────────────────────────
Al elegir una categoría o buscar, la página se queda con la
cabecera, el catálogo y el pie — como en Aguilar. Antes había que
bajar media pantalla para llegar a los resultados, pasando por tres
carruseles que no tenían nada que ver con lo que habías pedido.
Se esconden con el atributo `hidden` desde el JS; esto solo cuida el
espacio que dejan y el botón de volver. */
body.solo-catalogo [hidden]{display:none !important;}
body.solo-catalogo #catalogo{padding-top:1rem;}
#volver-portada{
display:inline-flex;align-items:center;gap:6px;
margin:0 0 1rem;padding:9px 16px;
border:1.5px solid var(--border);border-radius:var(--radius-pill);
background:#fff;color:var(--ink);cursor:pointer;
font-family:var(--sans);font-size:.82rem;font-weight:700;
}
#volver-portada:hover{border-color:var(--sky);background:var(--sky-light);}
#volver-portada[hidden]{display:none !important;}
/* ── LOS DOS ACCESOS, TAMBIÉN AL BAJAR ────────────────────────────
Se escondían al scrollear para ganar alto. La clienta los quiere
siempre visibles: "Envíos y retiros" y "Vende tus libros" son los
dos sitios a los que manda a la gente por WhatsApp todo el día, y
tenerlos solo arriba del todo obliga a volver a subir.
Al bajar salen más pequeños, en su propio renglón, para no comerse
la cabecera encogida. El corazón y la cuenta sí siguen ocultos: esos
están en el menú. */
@media (max-width:768px){
nav.scrolled .nav-ico-btn{
display:inline-flex !important;
width:auto;height:auto;min-height:34px;padding:0 12px;
border-radius:var(--radius-pill);gap:6px;
order:5;flex:1 1 0;justify-content:center;
}
nav.scrolled .nav-ico-txt{
display:inline !important;white-space:nowrap;
font-family:var(--sans);font-size:.74rem;font-weight:700;
letter-spacing:.02em;color:var(--ink);
}
nav.scrolled .nav-ico-btn--vender{
background:var(--sky-dark);border-color:var(--sky-dark);
}
nav.scrolled .nav-ico-btn--vender .nav-ico-txt{color:#fff;}
nav.scrolled .nav-ico-btn--vender .ic{stroke:#fff;}
nav.scrolled .nav-ico-btn .ic{width:17px;height:17px;}
}
/* El acceso a envíos y retiros dentro del carrito: es justo donde
surge la pregunta —"¿cuánto me cuesta que me llegue?"— y antes había
que cerrarlo e irse a buscarlo al pie. */
.dr-envios{
width:100%;margin-bottom:.55rem;padding:11px;
display:flex;align-items:center;justify-content:center;gap:7px;
border:1.5px dashed var(--border);border-radius:var(--radius-sm);
background:var(--paper);color:var(--ink);cursor:pointer;
font-family:var(--sans);font-size:.8rem;font-weight:700;
}
.dr-envios:hover{border-color:var(--sky);background:var(--sky-light);}
.dr-envios .ic{width:17px;height:17px;stroke:var(--sky-dark);fill:none;}
/* Lo que falta para poder cobrar, pegado al botón de pagar. Antes era
un aviso flotante abajo del todo: en el iPhone, con la barra de
Safari encima, no se veía — pulsabas "Pagar" y no pasaba nada. */
.pago-aviso{
margin:0 0 .9rem;padding:12px 14px;
border:1.5px solid var(--rust);border-radius:var(--radius-sm);
background:#FFF0ED;color:#8A2B1B;
font-family:var(--sans);font-size:.84rem;line-height:1.5;
}
.pago-aviso[hidden]{display:none !important;}
.pago-aviso strong{display:block;margin-bottom:5px;}
.pago-aviso ul{margin:0;padding-left:1.1rem;display:grid;gap:3px;}
/* ── QUE SE LEA ───────────────────────────────────────────────────
La clienta, probando en el iPhone: "el color de los campos un
poquito más oscuro, casi no leo" y "las opciones un poquito más
negrito". El gris de los textos escritos estaba por debajo del
contraste mínimo que se recomienda para texto pequeño. */
.mdl input, .mdl select, .mdl textarea,
#mi input, #mi select, #mi textarea,
.auth-fld input, .auth-fld select{
color:var(--ink) !important;
font-weight:600;
}
/* El texto de ayuda bajo los campos, y el que estaba casi blanco. */
#mi .fld > div[style*="var(--muted)"],
#mi small, .mdl small{ color:#5B5550 !important; }
/* Las etiquetas de cada campo, un punto más marcadas. */
#mi label, .mdl label, .auth-fld label{ color:#3A3530; font-weight:700; }
/* Las dos opciones de "¿cómo quieres recibir tus libros?" y las formas
de pago: más peso, que es lo que se está eligiendo. */
.pays .pay{ font-weight:700; color:var(--ink); }
.pays .pay small{ color:#5B5550; }
/* La Caja lectora, en el amarillo de la casa cuando está elegida: es
la que la clienta quiere empujar y se distingue de un vistazo. */
.pays .pay[data-metodo="acumular"].act{
background:var(--gold, #E9B949);
border-color:var(--gold, #E9B949);
color:var(--ink);
}
.pays .pay[data-metodo="acumular"].act small{ color:#4A3B12; }
/* ── Ventana al elegir cómo recibir ───────────────────────────────
Va por encima del checkout (z 3000) porque nace desde dentro de él.
Anclada abajo en el móvil: es donde está el pulgar y donde el
cliente acaba de tocar. */
.modo-pop{position:fixed;inset:0;z-index:3000;background:rgba(30,26,22,.45);
display:flex;align-items:flex-end;justify-content:center;padding:0;}
.modo-caja{position:relative;background:#fff;width:100%;max-width:420px;
border-radius:18px 18px 0 0;padding:1.4rem 1.3rem 1.2rem;
max-height:88vh;overflow-y:auto;animation:modoSube .22s ease-out;}
@keyframes modoSube{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.modo-x{position:absolute;top:10px;right:12px;background:none;border:none;
font-size:1.05rem;line-height:1;cursor:pointer;color:var(--muted);padding:6px;}
.modo-tit{font-family:var(--serif);font-size:1.12rem;font-weight:700;
color:var(--ink);margin:0 28px .5rem 0;}
.modo-txt{font-size:.86rem;line-height:1.55;color:var(--ink);margin:0 0 .9rem;}
.modo-res{background:var(--paper);border-radius:10px;padding:.7rem .85rem;margin-bottom:.9rem;}
.modo-res>div{display:flex;justify-content:space-between;align-items:baseline;font-size:.92rem;}
.modo-res strong{font-size:1.02rem;}
.modo-res small{display:block;margin-top:.3rem;font-size:.74rem;color:var(--muted);}
.modo-falta{border-left:3px solid var(--gold);padding-left:.75rem;margin-bottom:1rem;}
.modo-falta span{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);font-weight:700;}
.modo-falta ul{margin:.35rem 0 0;padding-left:1.1rem;font-size:.85rem;line-height:1.7;}
.modo-listo{background:#F0FDF4;color:#166534;border-radius:10px;padding:.6rem .8rem;
font-size:.85rem;font-weight:600;margin-bottom:1rem;}
.modo-ok{width:100%;padding:14px;border:none;border-radius:10px;background:var(--ink);
color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:700;cursor:pointer;
letter-spacing:.03em;min-height:48px;}
@media(min-width:620px){
.modo-pop{align-items:center;padding:1rem;}
.modo-caja{border-radius:16px;}
}
/* ── Cabecera de categoría y filtros ──────────────────────────────
Como en Aguilar: al entrar en una categoría se dice en cuál estás y
cuántos productos hay, y los filtros van plegados para no empujar
los libros fuera de la pantalla en un móvil. */
.cat-cabecera{margin:0 0 .9rem;}
.cat-miga{font-size:.74rem;color:var(--muted);display:flex;gap:6px;align-items:center;
margin-bottom:.15rem;text-transform:uppercase;letter-spacing:.07em;}
.cat-miga a{color:var(--muted);text-decoration:none;}
.cat-miga a:hover{color:var(--rust);text-decoration:underline;}
.cat-miga strong{color:var(--ink);font-weight:700;}
.cat-cabecera-fila{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.cat-cabecera-fila h2{font-family:var(--serif);font-size:clamp(1.35rem,4.5vw,2rem);
margin:0;line-height:1.15;}
.cat-cuenta{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.cat-barra[hidden]{display:none !important;}
.cat-barra{display:flex;align-items:stretch;gap:0;border-top:1px solid var(--border);
border-bottom:1px solid var(--border);margin:0 0 1.1rem;}
.cat-barra-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
background:none;border:none;border-right:1px solid var(--border);padding:13px 10px;
font-family:var(--sans);font-size:.86rem;color:var(--ink);cursor:pointer;min-height:48px;}
.cat-barra-btn:hover{background:var(--paper);}
.cat-barra-n[hidden]{display:none !important;}
.cat-barra-n{background:var(--rust);color:#fff;border-radius:20px;font-size:.7rem;
font-weight:700;min-width:19px;height:19px;display:inline-flex;align-items:center;
justify-content:center;padding:0 5px;}
.cat-barra-orden{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
padding:6px 10px;font-size:.8rem;color:var(--muted);}
.cat-barra-orden select{border:none;background:none;font-family:var(--sans);
font-size:.84rem;font-weight:700;color:var(--ink);cursor:pointer;max-width:58%;
min-height:44px;}
/* ── VENTANA DE FILTROS ───────────────────────────────────────────
Como en Aguilar: se abre encima, eliges, y al cerrar vuelves a los
libros con lo elegido puesto. Antes el panel se desplegaba DENTRO
de la página y empujaba los libros media pantalla hacia abajo — en
un móvil se veían los filtros y ni un solo libro, que es justo lo
que señaló la clienta. */
/* OJO con la especificidad: hay una regla de los fondos de seccion
.catalog[style*="background-image"] > * { position: relative }
que pone RELATIVE a todos los hijos del catalogo para que queden por
encima de la imagen de fondo. La ventana es hija del catalogo, asi
que esa regla le ganaba y la ventana se quedaba dentro del flujo,
empujando los libros -- exactamente el problema que venia a
resolver. Se gana repitiendo el selector, no con !important: asi la
regla sigue siendo legible y no se lleva por delante nada mas. */
/* El atributo `hidden` NO basta: esta regla declara display:flex y
gana, asi que la ventana salia abierta desde que carga la pagina.
Es el mismo fallo que ya paso con .filters -- cualquier elemento con
`hidden` al que el CSS le de un display necesita esta pareja. */
.pf-bg[hidden]{display:none !important;}
.pf-bg.pf-bg{position:fixed;inset:0;z-index:1700;background:rgba(30,26,22,.45);
display:flex;align-items:flex-end;justify-content:center;}
.pf-hoja{background:#fff;width:100%;max-width:460px;max-height:88vh;
border-radius:18px 18px 0 0;display:flex;flex-direction:column;
animation:pfSube .22s ease-out;}
@keyframes pfSube{from{transform:translateY(26px);opacity:.6}to{transform:none;opacity:1}}
.pf-cab{display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.2rem .8rem;border-bottom:1px solid var(--border);flex:0 0 auto;}
.pf-cab strong{font-family:var(--serif);font-size:1.05rem;}
.pf-x{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;
color:var(--muted);padding:8px;min-width:40px;min-height:40px;}
.pf-cuerpo{padding:1.1rem 1.2rem;overflow-y:auto;display:grid;gap:1rem;flex:1 1 auto;}
.pf-pie{display:flex;align-items:center;gap:12px;padding:.9rem 1.2rem;
padding-bottom:calc(.9rem + env(safe-area-inset-bottom, 0px));
border-top:1px solid var(--border);flex:0 0 auto;background:#fff;}
.pf-aplicar{flex:1;padding:14px;border:none;border-radius:10px;background:var(--ink);
color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:700;cursor:pointer;
min-height:48px;}
.pf-aplicar:disabled{opacity:.45;cursor:not-allowed;}
.pf-limpiar{background:none;border:none;padding:8px 0;font-family:var(--sans);
font-size:.84rem;color:var(--rust);cursor:pointer;text-decoration:underline;
min-height:44px;white-space:nowrap;}
.pf-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
color:var(--muted);font-weight:700;margin-bottom:.35rem;}
.pf-cuerpo input,.pf-cuerpo select{width:100%;padding:10px 12px;
border:1.5px solid var(--border);border-radius:8px;font-family:var(--sans);
font-size:.88rem;background:#fff;color:var(--ink);min-height:44px;}
.pf-rango{display:flex;align-items:center;gap:8px;}
.pf-rango input{flex:1;min-width:0;}
.pf-rango span{color:var(--muted);}
.pf-rango button{flex:0 0 auto;padding:10px 16px;border:1.5px solid var(--ink);
background:var(--ink);color:#fff;border-radius:8px;font-family:var(--sans);
font-size:.82rem;font-weight:700;cursor:pointer;min-height:44px;}
@media(min-width:620px){
.pf-bg{align-items:center;padding:1rem;}
.pf-hoja{border-radius:16px;}
}
/* ── Lo elegido, encima de los libros ─────────────────────────────
"Usado ✕" y "Borrar filtros", como al cerrar la ventana de Aguilar.
Sin esto el cliente filtra, cierra, ve 12 libros donde había 600 y
no sabe por qué ni cómo deshacer solo una cosa. */
.pf-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 1rem;}
.pf-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
border:1.5px solid var(--ink);border-radius:20px;background:#fff;color:var(--ink);
font-family:var(--sans);font-size:.8rem;font-weight:600;cursor:pointer;
min-height:36px;}
.pf-chip:hover{background:var(--paper);}
.pf-chip span[aria-hidden]{font-size:.72rem;opacity:.7;}
.pf-borrar{background:none;border:none;padding:6px 4px;font-family:var(--sans);
font-size:.8rem;color:var(--rust);cursor:pointer;text-decoration:underline;
min-height:36px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* ── Flechas del carrusel de novedades ───────────────────────────
En el móvil se arrastra con el dedo; en escritorio no hay nada que
diga que la fila sigue a la derecha. Centradas bajo la fila, como
en Aguilar. */
.fila-nav{display:flex;justify-content:center;gap:18px;margin:.9rem 0 .2rem;}
.fila-flecha{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);
background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:border-color .15s,color .15s;}
.fila-flecha:hover{border-color:var(--ink);}
.fila-flecha:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}
/* ── Preguntas y WhatsApp: SIEMPRE a la vista ─────────────────────
Se escondían con la ficha, el carrito y el checkout abiertos, y por
buenas razones: el globo caía justo encima de "Proceder al pago" y
sobre el precio del libro. Pero es exactamente cuando el cliente
tiene la duda —"¿está en buen estado?", "¿me llega a Comas?"— y
desde que se quitó el "Consultar por WhatsApp" de la ficha, ahí no
le queda ninguna forma de preguntar.
Así que no se esconden: se apartan. Se quedan en su esquina de
siempre pero SUBIDOS, por encima del botón de pagar, y reducidos a
su icono: el globo con texto mide 202 px y contra el borde se corta.
Van al final de la hoja para ganar a las reglas de antes. */
body:has(.drawer.open) .wa-fab,
body:has(.mdl-bg.open) .wa-fab,
body:has(.bdl-bg.open) .wa-fab,
body:has(.drawer.open) .faq-fab,
body:has(.mdl-bg.open) .faq-fab,
body:has(.bdl-bg.open) .faq-fab{
display:flex !important;
top:auto !important;
right:14px !important;
width:44px !important;height:44px !important;
padding:0 !important;gap:0 !important;
border-radius:50% !important;
justify-content:center !important;
z-index:1600 !important;
box-shadow:0 3px 12px rgba(0,0,0,.22);
}
/* El texto fuera: se salía del círculo y quedaba cortado contra el borde. */
body:has(.drawer.open) .faq-fab .faq-fab-txt,
body:has(.mdl-bg.open) .faq-fab .faq-fab-txt,
body:has(.bdl-bg.open) .faq-fab .faq-fab-txt,
body:has(.drawer.open) .wa-fab .wa-fab-txt,
body:has(.mdl-bg.open) .wa-fab .wa-fab-txt,
body:has(.bdl-bg.open) .wa-fab .wa-fab-txt{display:none !important;}
/* Por encima del botón de pagar, que es lo que tapaban. */
body:has(.drawer.open) .wa-fab,
body:has(.mdl-bg.open) .wa-fab,
body:has(.bdl-bg.open) .wa-fab{
bottom:calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
}
body:has(.drawer.open) .faq-fab,
body:has(.mdl-bg.open) .faq-fab,
body:has(.bdl-bg.open) .faq-fab{
bottom:calc(env(safe-area-inset-bottom, 0px) + 148px) !important;
}
body:has(.drawer.open) .wa-fab svg,
body:has(.mdl-bg.open) .wa-fab svg,
body:has(.bdl-bg.open) .wa-fab svg{width:23px;height:23px;flex:0 0 23px;}
/* La barra de filtros vieja: oculta de verdad.
Llevaba el atributo `hidden`, pero `.filters{display:flex}` le gana —
el atributo solo vale si nadie declara un display— así que seguía a la
vista y el catálogo mostraba los mismos filtros DOS veces.
No se borra del HTML porque fil() sigue leyendo #si, #cf y #pf. */
.filters[hidden]{display:none !important;}
/* ── Aviso del Libro de Reclamaciones ─────────────────────────────
Indecopi obliga a exhibirlo en la página de inicio y a mantener el
enlace permanentemente. Vivía en un recuadro blanco colgando por
debajo del pie: cumplía, pero se veía como un trozo pegado que no
era de la página. Ahora va DENTRO del pie, con sus colores, como
una fila más — y sigue estando a la vista sin desplegar nada. */
.aviso-lr{display:flex;align-items:flex-start;gap:12px;
max-width:1200px;margin:0 auto;padding:16px 0 14px;
border-top:1px solid rgba(255,255,255,.14);
color:inherit;text-decoration:none;font-size:.78rem;line-height:1.55;
opacity:.82;transition:opacity .15s;}
.aviso-lr:hover{opacity:1;}
.aviso-lr .ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px;}
.aviso-lr strong{font-weight:700;letter-spacing:.01em;}
@media(max-width:860px){.aviso-lr{padding-left:20px;padding-right:20px;}}
@media(max-width:600px){.aviso-lr{font-size:.74rem;gap:10px;}}
/* ── La cabecera de categoría, libre de la lengüeta ───────────────
La lengüeta roja de Categorías es fija y ocupa los primeros 28 px
de la pantalla. La cabecera empezaba en el 16, así que la lengüeta
se comía la primera letra: "iteratura · Clásicos". Se ve en una
captura y no se ve midiendo, que es como se encontró. */
.cat-cabecera{padding-left:34px;}
@media(min-width:900px){ .cat-cabecera{padding-left:0;} }
/* ── Fotos de la librería (como el Instagram de Aguilar) ─────────── */
.fotos-sec{padding:2.4rem 0 1.6rem;max-width:1200px;margin:0 auto;}
.fotos-cab{display:flex;align-items:center;justify-content:center;gap:.6rem;
color:inherit;text-decoration:none;margin:0 16px 1.2rem;text-align:center;}
.fotos-cab .ic{width:28px;height:28px;flex:0 0 auto;}
.fotos-cab:hover .fila-titulo{text-decoration:underline;}
.fotos-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,340px);gap:16px;
overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 6px;scrollbar-width:none;}
.fotos-track::-webkit-scrollbar{display:none;} /* se arrastra con el dedo o con las flechas */
.fotos-item{display:block;scroll-snap-align:start;border-radius:10px;overflow:hidden;aspect-ratio:1/1;background:#eee;}
.fotos-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.fotos-item:hover img{transform:scale(1.03);}
/* ── Reseñas: las capturas de WhatsApp de los clientes ──────────── */
.resenas-fotos{display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,300px);gap:14px;
align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px;
scrollbar-width:none;margin-bottom:.4rem;}
.resenas-fotos::-webkit-scrollbar{display:none;}
.resena-foto{margin:0;scroll-snap-align:start;border-radius:12px;overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,.08);background:#fff;}
.resena-foto img{width:100%;height:auto;display:block;}
.resenas-nav{margin-bottom:1.6rem;}
.resenas-grid[hidden]{display:none !important;}
/* Mis favoritos: con pocos libros la caja no llega abajo; se estira */
@media(max-width:768px){ .wl-ventana .sec-ventana-caja{height:100% !important;} }
/* Checkout: letras más notorias (pedido de la clienta, 28/09).
Las etiquetas en gris claro y 0.65rem no se leían en el celular. */
.mdl .fld label{font-size:0.74rem;font-weight:700;color:var(--ink);}
.mdl .mdl-resumen-title{font-size:0.72rem;font-weight:700;color:var(--ink);}
.mdl .mdl-resumen-item{font-size:0.9rem;}
.mdl .mdl-resumen-item span:first-child{color:var(--ink);}
.mdl p,.mdl small,.mdl [id^="dir-"],.mdl .fecha-prevista{color:var(--ink);font-weight:500;}
.mdl div[style*="color:var(--muted)"]{color:var(--ink) !important;font-size:0.78rem !important;}
#mis-datos .fld label{font-size:0.74rem;font-weight:700;color:var(--ink);}
/* Pie: nombre, "Tienda virtual 100 %", RUC y dirección juntos (clienta, 29/09). */
.pie-marca h2{ margin-bottom:.15rem; }
.pie-lema{ margin-bottom:.4rem; }
.pie-mini{ margin-bottom:.05rem; }
.pie-mini + .pie-horarios{ margin-top:.6rem; }
.pie-contactos{ margin-top:.6rem; }
/* Dentro de un universo la barra de la tienda (z 1500) quedaba encima de su
cabecera cuando la página estaba arriba del todo, y tapaba Carrito / Salir.
Solo se aparta la barra; lo demás (ficha, carrito) sigue igual. (30/09) */
body:has(.univ-screen.active) > nav,
body:has(.univ-screen.active) .adbar{visibility:hidden;}
/* Dentro de un universo la barra de la tienda está oculta: la ficha del libro
(y las demás ventanas) empiezan arriba del todo, sin el hueco de la barra,
que dejaba ver el universo por detrás. (01/10) */
body:has(.univ-screen.active) .bdl-bg,
body:has(.univ-screen.active) .mdl-bg,
body:has(.univ-screen.active) .drawer,
body:has(.univ-screen.active) #sec-ventana{top:0 !important;}
/* Dentro de un universo solo se ve el universo: la pestaña de categorías y el
botón de preguntas quedaban flotando encima de los libros. (01/10) */
body:has(.univ-screen.active) .cats-tab,
body:has(.univ-screen.active) .faq-fab{display:none !important;}
/* Hueco del carrusel mientras llega tienda.js: mismo alto que tendra (8:3 / 5:4 en celular), para que la pagina no salte (04/10). */
.promos-track:empty{aspect-ratio:8/3;background:#efe9e1;}
@media (max-width:768px){.promos-track:empty{aspect-ratio:5/4;}}
/* Sin desenfoque en la cabecera fija: el celular lo recalculaba en cada
movimiento del scroll (congelados, 13/10). Es casi opaca: no se notaba. */
nav, .card-wl{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }