/* ==========================================================================
TIENDA.CSS — catálogo, filtros y carrito, contra DISENOWEB_TIENDA.ai
--------------------------------------------------------------------------
Va LA ÚLTIMA del de tienda.html. Reusa lo que ya existe:
· --morado / --morado-hondo / --grano (estilo.css) → fondo del héroe
· .btn-dona (estilo.css) → botón de checkout
· --nube-chip / .cifra (patrón, no la clase) → NO se usa aquí:
las tarjetas de producto son rectángulos, no flores, así que no aplica
Nuevo: el héroe con mascota extraída, la rejilla de filtros/productos y el
cajón del carrito — piezas que no existían en ninguna otra página.
========================================================================== */
/* La barra de redes en negro ahora se centraliza en paginas.css (que esta
página también carga) — ver el comentario de .social-top ahí. */
/* ========================== 0. CARRITO Y CABECERA ========================== */
/* BUG encontrado: con box-sizing:border-box global (estilo.css), un
padding-top cuenta DENTRO del height:52px fijo de .marca img (estilo.css)
en vez de sumarse aparte — los 18px de padding le comían contenido real a
la imagen (quedaba en 34px de alto real, y su ancho se encogía con ella
por el aspect-ratio automático), por eso el logo de Tienda se veía mucho
más chico que en el resto de páginas pese a compartir el mismo — una silueta lisa, sin el trazo de lápiz
que el resto del sitio ya usa. El hero de Inicio la reemplaza por el mismo
recorte real (img/arte/nube-hero.webp) vía hero.css; aquí se reusa idéntico
patrón en vez de exportar un asset nuevo, porque es la MISMA nube del .ai. */
.tienda-hero .nube-esquina.ne-izq{
aspect-ratio:686 / 342;
background:url('img/arte/nube-hero.webp') left top / 100% 100% no-repeat;
/* Isaías pidió agrandarla sólo en Tienda: de min(330px,34vw) (estilo.css,
compartida con el resto del sitio) a min(430px,44vw) — no se toca la
regla base para no afectar las otras páginas. */
width:min(430px, 44vw);
}
.tienda-hero .nube-esquina.ne-izq svg{ display:none }
.hilo-rojo-hero {
position: absolute;
left: 0;
/* Con el trazo real (FINALES/TIENDA/LINEA FONDO.png) la pieza ya no es una
caja alta de 200px con el dibujo centrado dentro (como el viejo):
es una tira delgada recortada a su propio contenido (~18.7:1), así que
"top" ubica directamente donde queda el hilo, sin necesitar el ajuste en
px que compensaba el alto fijo de antes. Isaías pidió bajarlo más, justo
encima del festón blanco de abajo (.nube-abajo) — no pegado a la mascota
ni al texto. Luego pidió subirlo 5px más (calc(83% - 5px), no un 78%
limpio: es el mismo 83% ya calibrado, sólo con el ajuste fino encima). */
top: calc(83% - 5px);
width: 100%;
height: auto;
/* z-index:3 — antes iba en 1, por DEBAJO de .nube-abajo (z-index:2), así
que donde el hilo pasaba por detrás del festón blanco se veía cortado/
oculto. Isaías pidió que quede POR ENCIMA de esa capa. */
z-index: 3;
pointer-events: none;
}
.tienda-hero-grid{
position:relative; z-index:5;
display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:end; gap:20px;
min-height:300px;
}
/* El letrero horneado (FINALES/TIENDA/LETRERO.png, "TIENDA OFICIAL" + "PTO37"
con blob verde + bajada con resaltador en una sola pieza) se queda para
escritorio/tablet, pero Isaías pidió volver a las piezas de texto real SÓLO
en móvil (≤600px, ver ese @media) — ahí el PNG completo no calzaba con el
grupo mascota+texto del .ai. Las dos versiones del logo viven DENTRO del
mismo h1 (.tienda-letrero-img / .tienda-hero-titulo-movil); "TIENDA
OFICIAL" (.tienda-hero-sub) y la bajada (.tienda-hero-mano) van fuera,
como hermanos — las cuatro quedan display:none por defecto y sólo se
muestran ≤600px, junto con la versión de texto del logo. Nunca se ven las
dos versiones del logo a la vez. */
.tienda-hero-titulo{
position:relative; display:block; margin:0 0 12px; z-index:1; line-height:.85;
font-size:clamp(72px,8.2vw,118px); font-weight:900; letter-spacing:-.02em; color:#fff;
}
.tienda-letrero-img{
display:block; width:100%; max-width:480px; height:auto;
}
.tienda-hero-titulo-movil{ display:none }
.pto-txt-span{
position:relative; z-index:2; color:#fff;
}
/* Blob verde detrás de "37": medido en DISENOWEB_TIENDA.pdf contra el
bounding box de "PTO37" — ancho ≈48%, centro ≈32% a la derecha del centro
del texto, ≈8% de su alto arriba. En móvil queda oculto (ver @media), el
.ai se ve bien sin él a ese tamaño. */
.pto-star-img{
position:absolute; z-index:1; pointer-events:none; object-fit:contain;
top:42%; right:0%; transform:translateY(-50%);
width:46%; height:auto; max-width:none;
}
.tienda-hero-sub{
display:none; font-size:clamp(14px,1.4vw,18px); font-weight:400; letter-spacing:.22em;
text-transform:uppercase; color:#fff; opacity:.95; margin-bottom:4px;
}
.tienda-hero-mano{
display:none; z-index:5;
font-family:'Nerfos', 'Goodkids', cursive, sans-serif;
font-size:clamp(20px,2.4vw,30px); line-height:1.12; letter-spacing:0.04em;
color:#000; margin:0; text-transform:uppercase;
}
.resaltador-sociales{
display:inline-block; background:#ffffff; color:#000000;
padding:2px 14px 4px; border-radius:6px; transform:rotate(-2deg);
box-shadow:0 2px 8px rgba(0,0,0,0.08); font-family:'Nerfos', 'Goodkids', cursive, sans-serif;
border:1.5px solid rgba(0,0,0,0.12); margin-top:4px;
}
/* 510px se quedaba corto contra la referencia (Isaías: "ya le falta poco").
+560px y un poco más de margin-top negativo para que el copete se acerque
más a la barra de nav. margin-bottom más negativo en la misma proporción
para que el bolsito/piernas sigan asomando sobre el catálogo — ya no hay
riesgo de que se corten (overflow:visible arriba, en .tienda-hero). */
.tienda-hero-mascota-wrap{
position:relative; width:100%; max-width:560px; margin-inline:auto;
justify-self:center; margin-top:-65px; margin-bottom:-130px; z-index:10;
}
.tienda-hero-mascota{
width:100%; height:auto; display:block; position:relative; z-index:2;
}
.sombra-pies{
position:absolute; bottom:14px; left:55%; transform:translateX(-50%);
width:210px; height:16px; background:rgba(0,0,0,0.14); border-radius:50%;
filter:blur(3px); z-index:1; pointer-events:none;
}
.tienda-hero .nube-esquina{ z-index:3 }
.tienda-hero .nube-abajo{ position:relative; z-index:2; margin-top:16px }
@media (max-width:900px){
/* Antes esto apilaba todo a una columna (grid-template-columns:1fr) — pero
DISENOWEB_TIENDA.ai SÍ trae una mesa dedicada de 768 (tablet, página 2
del PDF) y ahí la composición es la MISMA de dos columnas que en
escritorio (mascota izquierda, letrero derecha), sólo que más chica —
no la apilada de la mesa de 375. Apilar aquí era una suposición sin
verificar contra esa mesa; se hereda el grid de dos columnas de la regla
base y sólo se ajustan tamaños/huecos para que quepan cómodos en este
ancho. */
.tienda-hero-grid{ gap:14px }
.tienda-hero-mascota-wrap{
max-width:340px; margin-top:-24px; margin-bottom:-40px;
}
.tienda-letrero-img{ max-width:300px }
}
@media (max-width:600px){
/* Isaías pidió reducir aún más el tope (el aire morado arriba, entre el
header y el bloque de texto): +10px→+2px encima de --nav-alto. */
.tienda-hero{ padding-top:calc(var(--nav-alto) + 2px) }
/* 2026-08-24: Isaías pidió el mismo logo PNG de escritorio también en
móvil (antes esta regla apagaba el PNG y mostraba la versión de texto
real ".tienda-hero-titulo-movil" — decisión de una sesión anterior,
ahora revertida explícitamente). El PNG ya trae "TIENDA OFICIAL"
horneado (a diferencia del letrero viejo), así que .tienda-hero-sub
queda apagado igual que en escritorio — mostrarlo duplicaba el rótulo.
El PNG se queda visible a todo ancho; sólo se ajusta el max-width para
que no se desborde en pantallas angostas.
Isaías pidió también quitar "CADA COMPRA APOYA..." (.tienda-hero-mano):
sólo el logo, nada más — se deja la base de estilo.css (display:none)
sin reactivarla aquí, igual que ya pasa en escritorio/tablet.
2026-08-25: Isaías pidió el logo más grande — 260px se veía chico
contra el ancho real de pantalla (.env en móvil deja ~339px de
columna). Sube a 340px, prácticamente el ancho completo de la columna. */
.tienda-letrero-img{ max-width:340px }
/* Logo: en tienda el header también trae el botón de carrito (las otras
páginas no lo tienen), y ambos quedaban pegados uno al otro justo donde
la nube-esquina también empieza a recortarse contra overflow:hidden del
héroe. Se corre el logo un poco a la derecha y se baja la nube para que
no se pierda contra el morado. */
.cabecera .marca{ margin-left:10px }
.tienda-hero .nube-esquina.ne-izq{ top:8px; left:-14px }
/* Mascota: el .ai (DISENOWEB_TIENDA, móvil) la pone a la izquierda, de pie
sobre el festón blanco de abajo, NO apilada y centrada encima de "PTO37"
(que es lo que heredaba del breakpoint de 900px). Se saca del flujo del
grid y se ancla abajo-izquierda; el texto deja de centrarse y le hace
espacio a la derecha.
min-height medido contra la propia página móvil de DISENOWEB_TIENDA.pdf
(viene con mesa 375 incluida, no hay que buscar un archivo aparte): en el
.ai la mascota está pegada al bloque de texto, con la mano casi tocando
"SOCIALES" — un solo grupo compacto, no dos pisos separados. Con
min-height:330px la mascota SÍ quedaba muy por debajo del texto (94px de
aire de más, comprobado a la vez que el resto de la sección se corría
hacia abajo), lejos de esa composición. No se reprodujo un solape real
del texto en ningún ancho probado con esa medida, pero si el reporte del
cliente fue justo por eso —la sección estirada haciendo que la mascota
"no calzara" donde debía— esto lo corrige. Bajado a 284px: ~10px de aire
real contra el texto, verificado en 320/340/360/375/390/414/430px que
nunca se tocan (la caja de la imagen SÍ se solapa un poco con la del
texto en esos anchos, pero es aire transparente del recorte de
mascota-yura.webp, no dibujo — comprobado a ojo en cada ancho). */
/* Isaías comparó contra la referencia real y pidió: tope más compacto
(menos aire morado arriba), el texto más abajo, y la mascota realmente
ENCIMA de la parte blanca (no sólo pisando el borde). min-height baja de
284→230→190 para acortar el morado cada vez más; padding-top en 6px así
el bloque de texto no arranca pegado al header; el propio texto gana un
margin-top para que quede más centrado en el espacio ya acortado. */
.tienda-hero-grid{
display:block; position:relative; text-align:left;
padding-top:6px; min-height:190px;
}
/* bottom bajó de -50px a -95px: -50px dejaba los pies apenas tocando el
festón; -95px los mete de lleno sobre la parte blanca, como pide la
referencia (la mascota queda encima del blanco, no sólo pisándolo). */
.tienda-hero-mascota-wrap{
position:absolute; left:-16px; bottom:-95px; top:auto;
width:58%; max-width:230px; margin:0;
}
.tienda-hero-mascota{ order:0; max-width:none; margin-bottom:0 }
/* Isaías pidió correr el letrero un poco más a la derecha: en algunos
anchos angostos reales un chispazo suelto de la mascota (el racimo de
puntos que sale de su mano levantada) quedaba tocando "SOCIALES."/
"PTO37". 44%→48% le da más aire sin que el texto se vaya a chocar con
el borde derecho (verificado 320-600px).
2026-08-25: el 48% se calibró para el texto real, angosto. El logo PNG
nuevo pide más ancho para verse grande — baja a 26% (verificar que no
choque con el chispazo de la mascota, ver nota arriba). */
.tienda-hero-txt{
margin-left:26%; margin-top:34px;
text-align:left;
}
/* El hilo rojo va por ENCIMA del festón blanco (.nube-abajo, z-index:2 —
mismo criterio que escritorio, ver la declaración base). Isaías pidió
bajarlo más, cerca del corte blanco: top:52% lo dejaba cruzando por la
mitad del texto/mascota; 84% lo pega justo encima del festón (medido
contra el propio alto del hero móvil, que ahora es más compacto tras
bajar min-height). */
.hilo-rojo-hero{
top:84%; z-index:3;
}
}
/* ========================== 2. CATÁLOGO — layout ========================== */
.tienda-catalogo{ padding:56px 0 80px; background:#fff }
.tienda-catalogo-grid{
display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px; align-items:start;
}
/* ---- filtros ---- */
.tienda-filtros-toggle{
display:none; align-items:center; gap:10px; width:100%;
border:0; border-radius:14px; padding:14px 18px; margin-bottom:16px;
background:#F6F3FC; color:var(--negro); font:inherit; font-weight:900;
font-size:14px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
}
.tienda-filtros-toggle .ico-filtrar{ width:18px; height:18px }
.tienda-filtros-panel{ display:grid; gap:26px }
.tienda-buscador{
position:relative; display:block;
}
.tienda-buscador svg{
position:absolute; left:16px; top:50%; transform:translateY(-50%);
width:16px; height:16px; color:#999; pointer-events:none;
}
.tienda-buscador input{
width:100%; font:inherit; font-size:14px;
border:2px solid #E2E2E2; border-radius:24px; padding:12px 18px 12px 42px;
background:#fff; color:var(--negro);
}
.tienda-buscador input:focus{ outline:none; border-color:var(--morado) }
.tienda-filtros-titulo{
font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
margin:0 0 12px;
}
.tienda-categorias{ display:grid; gap:2px }
.tienda-categorias button{
display:block; width:100%; text-align:left; border:0; background:none;
font:inherit; font-size:15px; font-weight:300; color:#444;
padding:8px 4px; border-radius:8px; cursor:pointer;
}
.tienda-categorias button:hover{ background:#F6F3FC }
.tienda-categorias button.activo{ font-weight:900; color:var(--morado-hondo) }
.tienda-precio input[type="range"]{
width:100%; accent-color:var(--morado);
}
.tienda-precio-rango{
display:flex; justify-content:space-between; align-items:center; gap:8px;
margin-top:8px; font-size:12px; color:#888;
}
.tienda-precio-rango b{ font-size:14px; color:var(--negro) }
/* ---- productos ---- */
.tienda-productos-hdr{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-bottom:24px; font-size:14px; font-weight:900; letter-spacing:.04em;
text-transform:uppercase;
}
.tienda-orden select{
font:inherit; font-size:13px; font-weight:300; text-transform:none;
border:2px solid #E2E2E2; border-radius:20px; padding:8px 16px;
background:#fff; color:var(--negro); cursor:pointer;
}
.tienda-grid{
/* minmax(0,1fr), no 1fr a secas: sin el mínimo en 0, una pista de grid no
se encoge por debajo del contenido (el nombre del producto, el precio)
y el grid se desborda del contenedor en vez de ajustar las columnas —
el bug que rompía el layout de 2 columnas en móvil/tablet. */
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
}
.tienda-card{ display:flex; flex-direction:column }
.tienda-card-img{
position:relative; aspect-ratio:1/1.05; border-radius:18px;
background:#F6F3FC; margin-bottom:14px; overflow:hidden; cursor:pointer;
}
.tienda-card-img:focus-visible{ outline:2px solid var(--morado); outline-offset:2px }
/* Foto real de WooCommerce: llena la misma caja lavanda que antes era el
placeholder vacío — si el producto no trae foto, la caja se queda igual
que estaba (fondo plano), sin