/* ============================================================
KRAMBA — hoja de estilo (v2, reescrita limpia el 27-ago-2026)
------------------------------------------------------------
Sale de las maquetas aprobadas por Jael. Referencia: Sézane.
El diseño es neutro; la ropa pone el color.
REGLAS QUE COSTARON CARO (no las rompas):
1. El bloque del CELULAR va AL FINAL. Lo último escrito manda:
un bloque añadido después ya rompió la ficha en el teléfono.
2. La cabecera tiene ALTURA FIJA (--alto-cabecera) y todo lo
demás se cuelga de esa variable. Antes declaraba 59px pero
medía 83 (el logo la hizo crecer) y tapaba las cabezas de
las modelos en la portada.
3. Los huecos que enseñan personas: o miden 3:5 como la foto,
o recortan SOLO POR ABAJO (object-position 50% 0). Cortar
por arriba corta cabezas. Ya pasó dos veces.
4. Nada de zoom al pasar el mouse (Jael: "no es profesional").
============================================================ */
:root{
--papel:#FCFAF6;
--marfil:#F4F0E7;
--tinta:#22392C;
--verde:#2F6349;
--suave:#87968C;
--oro:#B98A44;
--rosa:#F080A0; /* del logo. Con cuentagotas. */
--linea:#E6E0D3;
--serif:'Cormorant Garamond',Cambria,Georgia,'Times New Roman',serif;
--nav:'Bahnschrift SemiCondensed','Bahnschrift','Arial Narrow',
'Helvetica Neue Condensed',Arial,sans-serif;
--sans:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
--alto-cabecera:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{background:var(--papel);font-family:var(--sans);color:var(--tinta)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;
padding:12px 18px;z-index:200;font-family:var(--nav);letter-spacing:.1em}
.saltar:focus{left:0}
/* el contenido de toda pagina arranca DEBAJO de la cabecera */
main.con-cabecera{padding-top:var(--alto-cabecera)}
/* ================= CABECERA =================
Altura FIJA. Se ve arriba del todo y desaparece al bajar
(y no vuelve hasta que subes casi al principio). */
.head{
position:fixed;top:0;left:0;right:0;z-index:60;
height:var(--alto-cabecera);
display:flex;align-items:center;gap:38px;padding:0 34px;
background:var(--papel);box-shadow:0 1px 0 rgba(34,57,44,.08);
transform:translateY(0);
transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.head.escondida{transform:translateY(-102%)}
.marca{display:flex;align-items:center}
.marca .logo{width:auto;height:34px;object-fit:contain;display:block}
.marca .logo--blanco{display:none}
.head nav{display:flex;gap:28px;flex:1;align-self:stretch;align-items:stretch}
.head nav>div{position:relative;display:flex;align-items:center}
.head nav>div>a{
font-family:var(--nav);font-size:15px;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;color:var(--tinta);transition:color .3s ease;
padding:14px 0;display:inline-block;border-bottom:1.5px solid transparent;
}
.head nav>div:hover>a{color:var(--verde);border-bottom-color:var(--verde)}
.util{display:flex;gap:20px;align-items:center}
.util a,.util button{font-family:var(--nav);font-size:13px;font-weight:700;
letter-spacing:.10em;text-transform:uppercase;color:var(--tinta);
background:none;border:none;cursor:pointer}
.util a:hover,.util button:hover{color:var(--verde)}
.cuenta-fav{font-variant-numeric:tabular-nums}
.cuenta-fav:empty{display:none}
/* ---- paneles desplegables ---- */
.mega{
position:fixed;left:0;right:0;top:var(--alto-cabecera);
background:var(--papel);border-top:1px solid #ECE6D8;
box-shadow:0 30px 50px rgba(34,57,44,.12);
padding:38px 0 42px 90px;display:none;
}
.head nav>div:hover .mega{display:flex;gap:56px;align-items:flex-start}
.mega h4{font-family:var(--nav);font-size:14px;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;color:var(--tinta);margin-bottom:20px;white-space:nowrap}
.head nav .mega a{display:block;font-family:var(--serif);font-size:17px;color:var(--tinta);
padding:6px 0;min-width:150px;letter-spacing:.01em;text-transform:none;
font-weight:400;border:none}
.head nav .mega a:hover{color:var(--verde)}
.head nav .mega a.dest{color:var(--oro);font-style:italic}
.mega .sep{height:12px}
.mega .tarjetas{display:grid;grid-template-columns:repeat(2,220px);gap:20px;
margin-left:auto;margin-right:90px}
.mega .tarjetas.tres{grid-template-columns:repeat(3,190px)}
.mega .tarjeta .im{aspect-ratio:3/5;overflow:hidden;background:var(--marfil);position:relative}
.mega .tarjeta .im>img{position:absolute;inset:0;object-position:50% 0}
.mega .tarjeta .tt{font-family:var(--nav);font-size:14px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--tinta);margin-top:11px}
.mega .tarjeta .st{font-family:var(--serif);font-size:14px;color:#6B7F73;margin-top:3px}
/* ================= MENU DEL CELULAR ================= */
.hamb{display:none;gap:14px;font-size:20px;color:var(--tinta);line-height:1;
background:none;border:none;cursor:pointer}
.menufondo{position:fixed;inset:0;background:rgba(20,35,26,.42);z-index:90;
opacity:0;pointer-events:none;transition:opacity .3s ease}
.menufondo.abierto{opacity:1;pointer-events:auto}
.menumovil{
position:fixed;top:0;left:0;bottom:0;width:min(86vw,380px);z-index:100;
background:var(--papel);transform:translateX(-100%);
transition:transform .34s cubic-bezier(.22,1,.36,1);
display:flex;flex-direction:column;overflow-y:auto;
}
.menumovil.abierto{transform:translateX(0)}
.menumovil .mcab{display:flex;align-items:center;justify-content:space-between;
padding:18px 20px;border-bottom:1px solid var(--linea)}
.menumovil .mcab .marca .logo{height:22px}
.menumovil .cerrar{background:none;border:none;font-size:26px;line-height:1;
color:var(--tinta);cursor:pointer;padding:0 4px}
.menumovil details{border-bottom:1px solid var(--linea)}
.menumovil summary{list-style:none;cursor:pointer;padding:18px 20px;
display:flex;justify-content:space-between;align-items:center;
font-family:var(--nav);font-size:15px;font-weight:700;
letter-spacing:.10em;text-transform:uppercase}
.menumovil summary::-webkit-details-marker{display:none}
.menumovil summary::after{content:"›";font-family:var(--serif);font-size:22px;
color:var(--suave);transition:transform .25s ease}
.menumovil details[open] summary::after{transform:rotate(90deg)}
.menumovil .mlista{padding:0 20px 18px}
.menumovil .mlista a{display:block;padding:9px 0;font-family:var(--serif);font-size:17px}
.menumovil .mlista a:hover{color:var(--verde)}
.menumovil .mpie{margin-top:auto;padding:24px 20px;border-top:1px solid var(--linea)}
.menumovil .mpie a{display:block;padding:8px 0;font-family:var(--nav);font-size:13px;
font-weight:700;letter-spacing:.10em;text-transform:uppercase}
/* ================= BARRA DE SECCION (estilo Sézane) =================
Pegajosa arriba del todo. Cuando la cabecera se esconde al bajar,
queda ella sola: el nombre de la seccion y las demas en pequeño. */
.subnav{
position:sticky;top:0;z-index:50;
background:var(--papel);border-bottom:1px solid var(--linea);
display:flex;align-items:center;gap:26px;
padding:0 34px;height:52px;overflow-x:auto;scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav .actual{font-family:var(--nav);font-size:14px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
margin-right:8px}
.subnav a{font-family:var(--serif);font-size:15.5px;color:var(--tinta);
white-space:nowrap;padding:3px 0;border-bottom:1.5px solid transparent}
.subnav a:hover{color:var(--verde)}
.subnav a.aqui{border-bottom-color:var(--tinta)}
.subnav a.dest{color:var(--oro);font-style:italic}
/* ================= PORTADA ================= */
/* mosaico de 8: pegado, sin ningun espacio (a Jael le molesta mucho) */
.mosaico{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.celda{position:relative;overflow:hidden;aspect-ratio:3/5;min-width:0;display:block}
.celda>img{position:absolute;inset:0;object-position:50% 0}
.celda .vel{position:absolute;inset:0;background:rgba(20,35,26,.12);transition:background .4s ease}
.celda:hover .vel{background:rgba(20,35,26,.28)}
.celda .nom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--nav);font-size:30px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.38);
text-align:center;padding:0 8px}
/* dos bandas grandes: recortan SOLO por abajo */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.duo .pieza{position:relative;aspect-ratio:3/4;overflow:hidden;min-width:0;display:block}
.duo .pieza>img{position:absolute;inset:0;object-position:50% 0}
.duo .vel{position:absolute;inset:0;
background:linear-gradient(0deg,rgba(20,35,26,.34) 0%,rgba(20,35,26,0) 45%)}
.duo .tx{position:absolute;left:34px;bottom:38px;color:#fff}
.duo .tt{font-family:var(--nav);font-size:48px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;line-height:1.05}
.duo .st{font-family:var(--nav);font-size:23px;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;margin-top:14px;opacity:.94}
/* nuestra historia: bajo (1:1) y recorta solo por abajo */
.archivo{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
/* Cuatro por linea, con la misma forma que las casillas del mosaico de
arriba (3:5). Cuando eran dos se dejaron cuadradas porque salian
larguisimas; con cuatro ya no hace falta. */
.archivo .im{aspect-ratio:3/5;overflow:hidden;position:relative;min-width:0}
.archivo .im>img{position:absolute;inset:0;object-position:50% 0}
.archivo .rotulo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--nav);font-size:44px;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.42);
cursor:pointer;transition:letter-spacing .5s ease}
.archivo:hover .rotulo{letter-spacing:.16em}
/* ================= CABEZA DE SECCION ================= */
.cabcat{text-align:center;padding:34px 24px 6px}
.cabcat h1{font-family:var(--serif);font-weight:400;font-size:52px;
letter-spacing:.10em;text-transform:uppercase;line-height:1.1}
.cabcat .d{font-family:var(--serif);font-size:16px;color:#5C6F63;margin-top:8px}
/* la fila de familias, centrada */
.familias{display:flex;gap:18px;
padding:24px 34px 8px;overflow-x:auto;scrollbar-width:none;
/* "center" a secas recorta por los DOS lados cuando la fila no cabe,
y no deja llegar al principio: "Ver todo" quedaba fuera de la
pantalla. "safe center" centra solo si cabe; si no, empieza por el
principio. La primera linea es el respaldo para navegadores que no
entiendan "safe". */
justify-content:flex-start;
justify-content:safe center}
.familias::-webkit-scrollbar{display:none}
.fam{flex:0 0 150px;background:none;border:none;padding:0;cursor:pointer;text-align:center}
.fam-foto{position:relative;overflow:hidden;background:var(--marfil);aspect-ratio:3/5;
margin-bottom:10px}
.fam-foto>img{position:absolute;inset:0;object-position:50% 0}
.fam-foto.entera{background:#fff}
.fam-foto.entera>img{object-fit:contain}
.fam span{font-family:var(--serif);font-size:15.5px;color:var(--tinta);
border-bottom:1.5px solid transparent;padding-bottom:2px;display:inline-block}
.fam:hover span{border-bottom-color:var(--suave)}
.fam.act span{border-bottom-color:var(--tinta)}
/* ================= FILTROS (a la izquierda, sin cajas) ================= */
.barrafiltros{display:flex;gap:26px;align-items:center;padding:18px 44px 6px}
.fbtn{background:none;border:none;padding:4px 0;cursor:pointer;
font-family:var(--nav);font-size:12.5px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--tinta);
border-bottom:1.5px solid transparent;white-space:nowrap}
.fbtn:hover{border-bottom-color:var(--suave)}
.fbtn.on{border-bottom-color:var(--tinta)}
select.fbtn{appearance:none;-webkit-appearance:none;background:transparent}
.cuentaprendas{margin-left:auto;font-family:var(--serif);font-size:14px;color:var(--suave)}
.grupofiltro{position:relative}
.desplegable{position:absolute;top:calc(100% + 10px);left:0;z-index:45;background:var(--papel);
border:1px solid var(--linea);box-shadow:0 20px 40px rgba(34,57,44,.13);
padding:14px;min-width:230px;display:none}
.desplegable.abierto{display:block}
.desplegable label{display:flex;align-items:center;gap:9px;padding:7px 4px;cursor:pointer;
font-family:var(--serif);font-size:15px}
.desplegable label:hover{color:var(--verde)}
.desplegable .bolita{width:13px;height:13px;border-radius:50%;
border:1px solid #D8D0BF;flex:0 0 13px}
/* ================= TARJETA DE PRENDA ================= */
.rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
.rejilla-catalogo{padding:22px 44px 0}
.prod{position:relative;display:block}
.prod .foto{position:relative;overflow:hidden;background:var(--marfil);aspect-ratio:3/5}
.prod .foto--entera{background:#fff}
.laminas{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth}
.laminas::-webkit-scrollbar{display:none}
.lamina{flex:0 0 100%;scroll-snap-align:center;position:relative;height:100%;overflow:hidden}
.lamina>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lamina--entera{background:#fff}
.lamina--entera>img{object-fit:contain}
/* flechas: solo con mouse, y solo al pasar por encima */
.flechita{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
background:rgba(252,250,246,.9);color:var(--tinta);
font-size:20px;line-height:1;padding:0;display:none;
align-items:center;justify-content:center;
opacity:0;transition:opacity .25s ease,background .25s ease}
.flechita:hover{background:#fff}
.flechita.ant{left:8px} .flechita.sig{right:8px}
/* puntitos: solo en el celular */
.puntos{position:absolute;left:0;right:0;bottom:10px;z-index:4;
display:flex;justify-content:center;gap:6px;pointer-events:none}
.punto{width:6px;height:6px;border-radius:50%;background:rgba(252,250,246,.55);
box-shadow:0 0 3px rgba(20,35,26,.35);transition:background .25s ease,width .25s ease}
.punto.act{background:var(--papel);width:16px;border-radius:3px}
@media (hover:hover){
.flechita{display:flex}
.prod:hover .flechita{opacity:1}
.flechita:focus-visible{opacity:1}
.puntos{display:none}
/* En la computadora la foto SOLO cambia con las flechas: deslizar con dos
dedos en el tactil se quedaba a medias entre foto y foto (Jael lo vio). */
.laminas{overflow-x:hidden}
}
.prod .etq{position:absolute;top:0;left:0;z-index:2;background:var(--papel);color:var(--tinta);
font-family:var(--nav);font-size:10.5px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;padding:6px 11px}
.prod .etq--rebaja{background:var(--tinta);color:var(--papel);
font-size:11.5px;letter-spacing:.10em}
.prod .nom{margin-top:13px;font-size:13px;letter-spacing:.04em}
.prod .pre{margin-top:4px;font-family:var(--serif);font-size:17px;color:var(--verde)}
.prod .pre s{color:#A89A8E;font-size:14px;margin-right:8px}
.prod .bolitas{display:flex;gap:6px;margin-top:7px;align-items:center}
.prod .bolita{width:11px;height:11px;border-radius:50%;border:1px solid #D8D0BF}
.prod .bolitas span.txt{font-size:11px;color:var(--suave);letter-spacing:.02em}
.corazon{position:absolute;top:8px;right:8px;z-index:3;width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
background:rgba(252,250,246,.86);border:none;border-radius:50%;
cursor:pointer;font-size:15px;line-height:1;color:var(--tinta);
transition:background .25s ease}
.corazon:hover{background:#fff}
.corazon.on{color:var(--rosa)}
.rapida{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(255,255,255,.94);
padding:13px 10px 15px;text-align:center;opacity:0;transform:translateY(8px);
transition:opacity .3s ease,transform .3s ease;pointer-events:none}
@media (hover:hover){
.prod:hover .rapida{opacity:1;transform:translateY(0);pointer-events:auto}
}
.rapida .r1{font-family:var(--nav);font-size:11px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--tinta);margin-bottom:9px}
.rapida .rt{display:flex;justify-content:center;gap:14px;font-family:var(--nav);
font-size:13px;font-weight:700}
.rapida .rt button{background:none;border:none;cursor:pointer;padding:2px 6px}
.rapida .rt button:hover{color:var(--verde);border-bottom:1.5px solid var(--verde)}
.mas{display:block;margin:56px auto 0;background:transparent;border:1px solid var(--tinta);
padding:16px 46px;cursor:pointer;font-family:var(--nav);font-size:13px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase}
.mas:hover{background:var(--tinta);color:#fff}
.vacio{padding:80px 44px;text-align:center;font-family:var(--serif);font-size:19px;color:var(--suave)}
/* ================= LA TIENDA (todas las secciones) ================= */
.tienda-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:36px 22px;padding:26px 44px 0}
.tsec{display:block;text-align:center}
.tsec .im{position:relative;overflow:hidden;background:var(--marfil);aspect-ratio:3/5}
.tsec .im>img{position:absolute;inset:0;object-position:50% 0}
.tsec span{display:inline-block;margin-top:13px;font-family:var(--serif);font-size:18px;
border-bottom:1.5px solid transparent;padding-bottom:2px}
.tsec small{display:block;margin-top:3px;font-family:var(--serif);font-size:13.5px;
color:var(--suave)}
.tsec:hover span{border-bottom-color:var(--tinta)}
/* ================= MIGA ================= */
.miga{padding:22px 44px 16px;font-family:var(--nav);font-size:11.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.miga a:hover{color:var(--verde)}
.miga .aqui{border-bottom:1.5px solid var(--tinta);padding-bottom:2px}
/* ================= FICHA DE PRENDA =================
Como Sézane: columna de fotos que se recorre a la izquierda,
panel fijo con la informacion a la derecha. Sin huecos muertos. */
.ficha{display:grid;grid-template-columns:minmax(0,7fr) minmax(360px,5fr);
gap:0 64px;align-items:start;padding:0 56px 40px 44px}
.galeria{display:flex;gap:14px;align-items:flex-start}
.minis{display:flex;flex-direction:column;gap:10px;width:84px;
max-height:1040px;overflow-y:auto;scrollbar-width:none}
.minis::-webkit-scrollbar{display:none}
.mini{position:relative;overflow:hidden;background:var(--marfil);aspect-ratio:3/5;
width:100%;flex:0 0 auto;border:1.5px solid transparent;padding:0;cursor:pointer}
.mini>img{position:absolute;inset:0}
.mini.entera{background:#fff}
.mini.entera>img{object-fit:contain}
.mini.act{border-color:var(--tinta)}
.mini:hover{border-color:var(--suave)}
/* la foto grande: un marco 3:5 de alto fijo; se cambia con las flechas o
las miniaturas, y tocarla la abre a pantalla completa */
.principal{position:relative;flex:1;aspect-ratio:3/5;overflow:hidden}
.pila{height:100%}
.pila-foto{position:relative;overflow:hidden;background:var(--marfil);border:none;
padding:0;display:none;width:100%;height:100%;cursor:zoom-in}
.pila-foto.act{display:block}
.pila-foto>img{position:absolute;inset:0}
.pila-foto.entera{background:#fff}
.pila-foto.entera>img{object-fit:contain}
.gal-flecha{position:absolute;top:min(50%,44vh);transform:translateY(-50%);z-index:5;
background:none;border:none;cursor:pointer;font-size:30px;line-height:1;
color:var(--tinta);padding:14px 10px;opacity:.65;transition:opacity .2s ease}
.gal-flecha:hover{opacity:1}
.gal-flecha.ant{left:2px} .gal-flecha.sig{right:2px}
.principal .puntos{display:none}
.info{position:sticky;top:34px;padding-top:8px;max-width:560px}
.tipo{font-family:var(--nav);font-size:12px;font-weight:700;letter-spacing:.26em;
text-transform:uppercase;color:var(--verde)}
.ficha h1{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.2;
margin:10px 0 12px;text-transform:uppercase;letter-spacing:.06em}
.precio{font-family:var(--serif);font-size:24px;color:var(--tinta);margin-bottom:26px}
.precio s{color:#A89A8E;font-size:19px;margin-right:10px}
.lab{font-family:var(--nav);font-size:12px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;margin-bottom:12px}
.lab .valor{font-weight:400;font-family:var(--serif);text-transform:none;
letter-spacing:0;font-size:14px;color:var(--suave)}
.colores{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.col-op{width:34px;height:34px;border-radius:50%;border:1px solid #D8D0BF;cursor:pointer;
position:relative;padding:0}
.col-op.act::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--tinta);
border-radius:50%}
.tallas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.talla{border:1px solid #D8D0BF;background:#fff;padding:15px 0;text-align:center;
font-family:var(--nav);font-size:14px;font-weight:700;letter-spacing:.08em;cursor:pointer}
.talla:hover{border-color:var(--tinta)}
.talla.act{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.nota-talla{font-family:var(--serif);font-size:13.5px;color:var(--oro);margin:10px 0 24px}
.btn{display:block;width:100%;background:var(--tinta);color:#fff;border:none;padding:19px;
font-family:var(--nav);font-size:15px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;cursor:pointer;text-align:center}
.btn:hover{background:var(--verde)}
.btn-fav{display:block;width:100%;margin-top:12px;background:transparent;border:1px solid #D8D0BF;
padding:15px;text-align:center;font-family:var(--nav);font-size:13px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.btn-fav:hover{border-color:var(--tinta)}
.btn-fav.on{border-color:var(--rosa);color:var(--verde)}
.envio{margin:22px 0 6px;font-family:var(--serif);font-size:14px;color:#5C6F63;line-height:1.9}
.envio b{color:var(--tinta);font-weight:600}
.acordeon{margin-top:26px;border-top:1px solid #E3DCCB}
.acordeon details{border-bottom:1px solid #E3DCCB}
.acordeon summary{list-style:none;cursor:pointer;padding:18px 2px;display:flex;
justify-content:space-between;align-items:center;font-family:var(--nav);
font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";font-family:var(--serif);font-size:22px;
font-weight:400;color:var(--suave)}
.acordeon details[open] summary::after{content:"–"}
.acordeon .cont{padding:0 2px 20px;font-family:var(--serif);font-size:15px;
line-height:1.85;color:#5C6F63}
.acordeon .cont ul{margin-left:18px}
/* barra fija de abajo en la ficha */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
box-shadow:0 -6px 24px rgba(34,57,44,.10);border-top:1px solid #EAE4D6;
display:flex;align-items:center;gap:22px;padding:12px 44px;
transform:translateY(110%);transition:transform .35s ease}
.barra.visible{transform:translateY(0)}
.barra .bimg{width:44px;height:56px;overflow:hidden;background:var(--marfil);position:relative}
.barra .bimg>img{position:absolute;inset:0}
.barra .bnom{font-family:var(--serif);font-size:17px}
.barra .bpre{font-family:var(--serif);font-size:17px;color:var(--verde);margin-left:auto}
.barra .btn{width:auto;padding:13px 34px;font-size:13px}
/* visor a pantalla completa */
.visor{position:fixed;inset:0;z-index:150;background:rgba(252,250,246,.98);
display:none;align-items:center;justify-content:center}
.visor.abierto{display:flex}
.visor img{max-width:94vw;max-height:94vh;width:auto;height:auto;object-fit:contain}
.visor .cerrar{position:absolute;top:20px;right:26px;background:none;border:none;
font-size:34px;cursor:pointer;color:var(--tinta);line-height:1}
.visor .flecha{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;
font-size:44px;cursor:pointer;color:var(--tinta);padding:10px 18px;line-height:1}
.visor .ant{left:10px} .visor .sig{right:10px}
/* ================= COMPRA EL LOOK ================= */
/* DOS looks por línea, en tarjeta vertical.
Antes iba uno por línea, con la foto a un lado y los nombres al otro: como
la foto es 3:5 (alta) y los nombres ocupan poco, quedaba un vacío enorme
al lado. En tarjeta el texto va DEBAJO de su foto y no sobra nada. */
/* DOS looks por línea, cada uno con la foto a la izquierda y las prendas al
lado. El texto va CENTRADO a la altura de la foto: como la foto es 3:5
(alta) y los nombres ocupan poco, dejarlo arriba abría un vacío enorme
debajo. Centrado, el hueco se reparte y se lee como una ficha. */
.looks{padding:20px 44px 0;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 44px;align-items:start}
.look{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);
gap:0 24px;align-items:center}
.look-foto{position:relative;overflow:hidden;background:var(--marfil);aspect-ratio:3/5;
display:block}
.look-foto>img{position:absolute;inset:0;object-position:50% 0}
.look-foto.entera{background:#fff;aspect-ratio:3/4}
.look-foto.entera>img{object-fit:contain}
.look-info h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:8px 0 22px}
.look-piezas{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.look-pieza{display:flex;gap:14px;align-items:center}
.look-mini{width:64px;flex:0 0 64px;aspect-ratio:3/5;overflow:hidden;
background:var(--marfil);position:relative}
.look-mini>img{position:absolute;inset:0;object-position:50% 0}
.look-mini.entera{background:#fff}
.look-mini.entera>img{object-fit:contain}
.look-pieza .nom{font-size:13px;letter-spacing:.04em}
.look-pieza .pre{font-family:var(--serif);font-size:16px;color:var(--verde);margin-top:2px}
.look-pieza:hover .nom{color:var(--verde)}
.look-total{font-family:var(--nav);font-size:13px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:14px 0;border-top:1px solid var(--linea);
border-bottom:1px solid var(--linea);margin-bottom:20px}
.look-info .btn{width:auto;display:inline-block;padding:17px 40px}
/* ================= SECCIONES GENERICAS ================= */
.sec{padding:86px 44px 0}
.cab{text-align:center;margin-bottom:42px}
.cab .ojo{font-family:var(--nav);font-size:12px;font-weight:700;letter-spacing:.30em;
text-transform:uppercase;color:var(--verde);margin-bottom:12px}
.cab h2{font-family:var(--serif);font-size:34px;font-weight:400}
/* ---- Talla unica ----
En rebajas casi todo viene en una sola talla. Ensenar tres botones y que
dos no sirvan es peor que no ensenar ninguno: aqui se avisa y punto. */
.talla-unica{display:flex;align-items:center;gap:12px;margin-bottom:8px;
border:1px solid var(--linea);background:#fff;padding:14px 18px}
.tu-etq{font-family:var(--nav);font-size:11.5px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.tu-valor{font-family:var(--serif);font-size:22px;color:var(--tinta);
line-height:1;margin-left:auto;padding-left:14px}
.tallas--dos{grid-template-columns:repeat(2,1fr)}
/* ================= PIE ================= */
.pie{padding:54px 60px 48px;text-align:center;border-top:1px solid var(--linea);margin-top:90px}
.pie .marca2 img{width:auto;height:76px;object-fit:contain;margin:0 auto 44px}
.pie .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;
max-width:1150px;margin:0 auto;text-align:center}
.pie h5{font-family:var(--nav);font-size:15px;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;margin-bottom:22px}
.pie .cols a{display:block;font-family:var(--serif);font-size:16px;color:#4C6558;padding:7px 0}
.pie .cols a:hover{color:var(--tinta)}
.news{max-width:560px;margin:64px auto 0}
.news h5{font-family:var(--nav);font-size:16px;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;margin-bottom:14px}
.news p{font-family:var(--serif);font-size:16px;color:#5C6F63;line-height:1.7;margin-bottom:26px}
.fin{margin-top:56px;font-size:11px;color:var(--suave);letter-spacing:.08em;line-height:1.9}
/* ============================================================
CELULAR — SIEMPRE AL FINAL DEL ARCHIVO
============================================================ */
@media (max-width:749px){
:root{--alto-cabecera:60px}
.head{padding:0 16px;gap:12px}
.head nav{display:none}
.hamb{display:flex}
.marca{flex:1;justify-content:center}
.marca .logo{height:24px}
.util{gap:14px}
.subnav{padding:0 16px;height:46px;gap:18px}
.subnav .actual{display:none}
.mosaico{grid-template-columns:repeat(6,minmax(0,1fr))}
.celda{grid-column:span 2;aspect-ratio:10/19}
.celda:nth-child(4),.celda:nth-child(5){grid-column:span 3;aspect-ratio:10/21}
.celda:nth-child(9),.celda:nth-child(10){grid-column:span 2;aspect-ratio:10/19}
.celda .nom{font-size:15px;letter-spacing:.06em}
/* OJO: aqui habia una regla que agrandaba "la casilla 4 y la 5" contando
por su sitio EN EL CODIGO. Como en el telefono las casillas se reordenan
visualmente, esa regla agrandaba Pantalones y Conjuntos en vez de Nuevo
y Vestidos. El tamano se decide mas abajo, por seccion. */
.duo{grid-template-columns:1fr}
.duo .pieza{aspect-ratio:4/5}
.duo .tx{left:18px;bottom:20px}
.duo .tt{font-size:28px}
.duo .st{font-size:15px;margin-top:8px}
.archivo{grid-template-columns:1fr}
.archivo .im{aspect-ratio:4/5}
.archivo .rotulo{font-size:26px}
.cabcat{padding:24px 16px 2px}
.cabcat h1{font-size:30px;letter-spacing:.08em}
.cabcat .d{font-size:14.5px}
.familias{justify-content:flex-start;padding:18px 16px 6px;gap:12px}
.fam{flex:0 0 116px}
.barrafiltros{padding:14px 16px 4px;gap:18px;overflow-x:auto;scrollbar-width:none}
.barrafiltros::-webkit-scrollbar{display:none}
.cuentaprendas{display:none}
.rejilla-catalogo{padding:16px 12px 0}
.rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
.prod .nom{font-size:12px}
.prod .pre{font-size:15px}
.tienda-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;padding:20px 16px 0}
.miga{padding:16px 16px 8px;font-size:12.5px}
/* ficha en el telefono: las fotos se deslizan en horizontal, con puntitos */
.ficha{grid-template-columns:1fr;gap:0;padding:0 0 30px;max-width:none;
justify-content:stretch}
.galeria{display:block}
.minis,.gal-flecha{display:none}
.principal{height:auto;aspect-ratio:auto;overflow:visible}
.pila{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-snap-stop:always;scrollbar-width:none;height:auto}
.pila::-webkit-scrollbar{display:none}
.pila-foto{display:block;flex:0 0 100%;scroll-snap-align:center;cursor:default;
aspect-ratio:3/5;height:auto}
.pila-foto.entera{aspect-ratio:3/4}
.principal .puntos{display:flex;bottom:14px}
.info{position:static;padding:26px 18px 0;max-width:none}
.ficha h1{font-size:27px}
.precio{font-size:21px;margin-bottom:22px}
.barra{padding:10px 14px;gap:12px}
.barra .bnom{font-size:14px;max-width:110px;line-height:1.2}
.barra .bpre{font-size:15px}
.barra .btn{padding:12px 18px;font-size:11px;letter-spacing:.10em}
.looks{padding:16px 16px 0;gap:46px}
.look{grid-template-columns:1fr;gap:18px}
.looks{grid-template-columns:1fr;gap:44px;padding:16px 16px 0}
.look-foto{max-height:none}
.look-info h2{font-size:25px;margin:6px 0 18px}
.look-info .btn{width:100%;padding:16px}
.sec{padding:64px 16px 0}
.pie{padding:44px 0 36px;margin-top:70px}
.pie .marca2 img{height:52px;margin-bottom:34px}
.pie .cols{grid-template-columns:repeat(2,1fr);gap:26px 12px;padding:0 16px}
.pie h5{margin-bottom:12px}
.news{margin-top:48px;padding:0 22px}
.fin{margin-top:44px;padding:0 22px}
}
/* ---- "Mi talla" (solo en Rebajas) ----
130 de 141 prendas de rebaja vienen en UNA sola talla: si eres M, el 70%
de lo que ves no lo puedes comprar. Por eso la talla va arriba y grande,
antes que cualquier otro filtro. En las secciones normales no se pone:
alli todo viene en S, M y L y no filtraria nada. */
.mitalla{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 44px 24px}
.mt-lab{font-family:var(--nav);font-size:12px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--tinta);margin-right:6px}
.mt-btn{background:#fff;border:1px solid #D8D0BF;padding:11px 20px;cursor:pointer;
font-family:var(--nav);font-size:14px;font-weight:700;letter-spacing:.10em;
color:var(--tinta);display:inline-flex;align-items:baseline;gap:7px}
.mt-btn em{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--suave)}
.mt-btn:hover{border-color:var(--tinta)}
.mt-btn.act{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.mt-btn.act em{color:rgba(252,250,246,.7)}
.mt-todas{font-size:12px;letter-spacing:.12em}
.mt-nota{font-family:var(--serif);font-size:13.5px;color:var(--suave);margin-left:8px}
@media (max-width:749px){
.mitalla{padding:2px 16px 18px;gap:8px}
.mt-btn{padding:10px 15px;font-size:13px}
.mt-nota{display:none}
}
/* Una talla sin prendas en el filtro actual: se apaga en vez de mentir. */
.mt-btn.mt-vacia{opacity:.4}
.mt-btn.mt-vacia:hover{border-color:#D8D0BF}
/* ---- Flechas de la fila de secciones ----
Sin una señal, nadie adivina que hay más secciones a la derecha. Van
discretas, del color de la tinta, y solo aparecen si la fila no cabe.
El degradado del borde es la segunda pista: se ve que algo sigue. */
.familias-caja{position:relative}
.fam-flecha{
position:absolute;top:calc(50% - 22px);transform:translateY(-50%);z-index:6;
width:38px;height:38px;border:1px solid var(--linea);border-radius:50%;
background:var(--papel);color:var(--tinta);cursor:pointer;padding:0;
font-size:22px;line-height:1;display:none;align-items:center;justify-content:center;
box-shadow:0 2px 12px rgba(34,57,44,.10);transition:border-color .2s ease}
.fam-flecha:hover{border-color:var(--tinta)}
.fam-flecha.ant{left:8px} .fam-flecha.sig{right:8px}
.familias-caja.hay-mas .fam-flecha.sig,
.familias-caja.hay-antes .fam-flecha.ant{display:flex}
/* el degradado que insinúa que sigue habiendo */
.familias-caja::before,.familias-caja::after{
content:"";position:absolute;top:0;bottom:26px;width:52px;z-index:5;
pointer-events:none;opacity:0;transition:opacity .25s ease}
.familias-caja::before{left:0;background:linear-gradient(90deg,var(--papel),transparent)}
.familias-caja::after{right:0;background:linear-gradient(270deg,var(--papel),transparent)}
.familias-caja.hay-antes::before,.familias-caja.hay-mas::after{opacity:1}
@media (max-width:749px){
/* en el teléfono se desliza con el dedo: basta el degradado */
.fam-flecha{display:none!important}
.familias-caja::before,.familias-caja::after{width:32px;bottom:20px}
}
/* ---- Nada de "scroll-behavior:smooth" en las filas que mueve el guion ----
Se probo y NO es de fiar: con smooth puesto, incluso asignar scrollLeft a
mano dejaba la fila donde estaba. Las flechas parecian rotas.
Sin smooth, el salto es seco pero SIEMPRE llega donde debe, que es lo que
importa. Las que mueve el dedo (celular) no se ven afectadas. */
.familias,.laminas,.pila{scroll-behavior:auto}
/* ============================================================
ARREGLOS DE TELÉFONO — 31-ago-2026
============================================================ */
/* Estas dos existen en las dos pantallas; el bloque de abajo decide
cuál se ve en cada una. */
.solo-movil{display:none}
@media (max-width:749px){
/* ---- El logo, centrado DE VERDAD ----
Estaba en un hueco flexible entre el ☰ (a la izquierda) y los iconos
(a la derecha), que no miden lo mismo: el centro del hueco no es el
centro de la pantalla. Ahora se coloca por encima, centrado sobre el
ancho completo. */
/* Se le da EL MISMO ancho al hueco de la izquierda (☰) y al de la derecha
(los iconos). Así el logo, que va en medio, cae en el centro exacto de
la pantalla.
Se probó con posición absoluta y salió peor: el logo se iba fuera de la
pantalla porque perdía su ancho de referencia. */
.hamb{flex:1 1 0;justify-content:flex-start}
.util{flex:1 1 0;justify-content:flex-end;margin-left:0}
.marca{flex:0 0 auto;text-align:center}
/* ---- "WhatsApp" pesaba demasiado ----
La palabra entera competía con el logo. En el teléfono se queda el icono.
Es un dibujo (SVG), no un símbolo de texto: el "✆" se dibujaba distinto
en cada aparato y quedaba feo. */
.util .ws-txt{display:none}
.util .ws-ico{display:block}
.util .u-fav{font-size:17px}
/* ---- "Nuestra historia": una sola foto ----
Cuatro en una pantalla de teléfono no se ven. */
.archivo{grid-template-columns:1fr}
.archivo .solo-compu{display:none}
.archivo .solo-movil{display:block}
.archivo .im{aspect-ratio:4/5}
/* ---- El mosaico: Nuevo y Vestidos en las dos casillas grandes ----
Las casillas 4 y 5 son las anchas. Se reordena por sección, no por
posición, para no depender del orden en que estén escritas. */
.celda[data-sec="pantalones"]{order:1}
.celda[data-sec="conjuntos"]{order:2}
.celda[data-sec="blusas"]{order:3}
.celda[data-sec="nuevo"]{order:4}
.celda[data-sec="vestidos"]{order:5}
.celda[data-sec="faldas"]{order:6}
.celda[data-sec="accesorios"]{order:7}
.celda[data-sec="rebajas"]{order:8}
/* las grandes son las de Nuevo y Vestidos, no las que toquen por posición */
.celda{grid-column:span 2;aspect-ratio:10/19}
.celda:nth-child(4),.celda:nth-child(5){grid-column:span 2;aspect-ratio:10/19}
.celda[data-sec="nuevo"],.celda[data-sec="vestidos"]{
grid-column:span 3;aspect-ratio:10/21}
.celda .nom{font-size:15px;letter-spacing:.06em}
.celda[data-sec="nuevo"] .nom,.celda[data-sec="vestidos"] .nom{font-size:19px}
}
/* El icono de WhatsApp solo se ve en el teléfono; en computadora va la palabra. */
.ws-ico{display:none}
.u-ws{display:inline-flex;align-items:center}
/* ---- Compra el look: foto grande y los NOMBRES al lado ----
Jael no quiere miniaturas de cada prenda: la foto del look manda, y al
lado solo se lee qué lleva puesto y cuánto cuesta. */
.look-piezas{display:flex;flex-direction:column;gap:0;margin:18px 0 22px}
/* En una columna estrecha el nombre y el precio no caben en la misma línea:
el precio va debajo. */
.look-linea{display:block;padding:12px 0;border-bottom:1px solid var(--linea)}
.look-linea:first-child{border-top:1px solid var(--linea)}
.ll-nom{font-family:var(--serif);font-size:19px;color:var(--tinta)}
.ll-pre{font-family:var(--serif);font-size:17px;color:var(--verde);white-space:nowrap}
.look-linea:hover .ll-nom{color:var(--verde)}
.look-total{font-family:var(--nav);font-size:12.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--suave);margin-bottom:22px}
@media (max-width:749px){
.ll-nom{font-size:17px}
.ll-pre{font-size:15px}
.look-piezas{margin:14px 0 18px}
}
/* La información del look, ya debajo de su foto */
.look-info{padding-top:16px;max-width:none}
.look-info .tipo{margin-bottom:2px}
.look .look-piezas{margin:10px 0 16px}
.look .look-total{margin-bottom:16px}
.look .btn{width:100%;padding:16px}
/* La ficha del look, ya al lado de su foto y en columna estrecha */
.look-info{padding-top:0;max-width:none}
.look-info .tipo{margin-bottom:14px}
.look .look-piezas{margin:0 0 16px}
.ll-nom{display:block;font-size:17px;line-height:1.25}
.ll-pre{display:block;font-size:15px;margin-top:3px}
.look .look-total{font-size:11.5px;letter-spacing:.12em;margin-bottom:16px}
.look .btn{width:100%;padding:15px;font-size:12px;letter-spacing:.12em}
@media (max-width:1100px){
/* con la ventana a medias, dos por línea aprieta demasiado: uno */
.looks{grid-template-columns:1fr;gap:48px}
.look{grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:0 40px}
}
@media (max-width:749px){
.look{grid-template-columns:1fr;gap:0}
.look-info{padding-top:16px}
.ll-nom{font-size:18px}
.look-linea{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.ll-pre{margin-top:0}
}
/* ---- Los looks en zigzag ----
Fila 1: foto | texto. Fila 2: texto | foto. Fila 3 como la 1...
Quién va del revés lo decide el guion contando SOLO los looks visibles:
si se calculara con CSS (nth-child), al filtrar por mini-sección los
escondidos seguirían contando y el zigzag saldría descuadrado.
Solo se aplica cuando van dos por línea; con uno por línea no tiene
sentido y la foto vuelve arriba. */
@media (min-width:1101px){
.look.espejo .look-foto{order:2}
.look.espejo .look-info{order:1}
}
@media (max-width:749px){
/* ---- Los rótulos de las casillas pequeñas ----
"PANTALONES" y "CONJUNTOS" son largos y llenaban la casilla de borde a
borde: pierde el aire y deja de verse elegante. Se bajan de tamaño y se
les deja margen a los lados. Los de las dos casillas grandes no cambian. */
.celda .nom{font-size:12.5px;letter-spacing:.05em;padding:0 12px;line-height:1.25}
.celda[data-sec="nuevo"] .nom,
.celda[data-sec="vestidos"] .nom{font-size:19px;letter-spacing:.06em;padding:0 8px}
}
/* Las fotos que no son del color elegido se esconden.
!important porque .pila-foto.act las enciende con la misma fuerza. */
.pila-foto.fuera,.mini.fuera{display:none!important}
/* ---- Las flechitas de las tarjetas, centradas de verdad ----
Los caracteres ‹ y › no ocupan el mismo hueco a izquierda y derecha dentro
de su propia letra, así que centrar la CAJA no centra el DIBUJO: la flecha
quedaba pegada a un lado del círculo. Se corrige empujando el glifo. */
.flechita{font-family:var(--serif);font-size:24px;font-weight:400;
padding-bottom:3px}
.flechita.ant{padding-right:3px}
.flechita.sig{padding-left:3px}
.fam-flecha{font-family:var(--serif);font-size:26px;font-weight:400;padding-bottom:3px}
.fam-flecha.ant{padding-right:3px}
.fam-flecha.sig{padding-left:3px}
/* ============================================================
BUSCADOR
============================================================ */
.u-buscar,.sub-buscar{background:none;border:none;cursor:pointer;color:var(--tinta);
display:flex;align-items:center;padding:4px}
.u-buscar:hover,.sub-buscar:hover{color:var(--verde)}
.sub-buscar{display:none} /* en computadora basta la de la cabecera */
.buscador{position:fixed;inset:0;z-index:200;background:rgba(20,35,26,.45);
display:none;padding:0 20px}
.buscador.abierto{display:block}
.b-caja{background:var(--papel);max-width:760px;margin:0 auto;
max-height:82vh;display:flex;flex-direction:column;
box-shadow:0 30px 60px rgba(20,35,26,.28)}
.b-fila{display:flex;align-items:center;gap:14px;padding:20px 24px;
border-bottom:1px solid var(--linea)}
.b-lupa{color:var(--suave);flex:0 0 auto}
#b-texto{flex:1;border:none;background:none;outline:none;
font-family:var(--serif);font-size:21px;color:var(--tinta);padding:4px 0}
#b-texto::placeholder{color:var(--suave)}
.b-cerrar{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;
color:var(--tinta);padding:0 4px}
.b-aviso{padding:14px 24px;font-family:var(--nav);font-size:11.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.b-resultados{overflow-y:auto;padding:0 12px 16px}
.b-item{display:flex;align-items:center;gap:16px;padding:10px 12px}
.b-item:hover{background:var(--marfil)}
.b-foto{width:56px;flex:0 0 56px;aspect-ratio:3/5;overflow:hidden;
background:var(--marfil);position:relative}
.b-foto>img{position:absolute;inset:0;object-position:50% 12%}
.b-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.b-nom{font-family:var(--serif);font-size:17px;color:var(--tinta)}
.b-sec{font-family:var(--nav);font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--suave)}
.b-pre{font-family:var(--serif);font-size:15px;color:var(--verde)}
.b-mas{padding:14px 24px;font-family:var(--serif);font-size:14px;color:var(--suave)}
@media (max-width:749px){
/* En el teléfono la cabecera se esconde al bajar, así que la lupa se
repite en la barra de secciones, que sí se queda pegada arriba. */
.u-buscar{display:none}
.sub-buscar{display:flex;margin-left:auto;flex:0 0 auto;
position:sticky;right:0;background:var(--papel);padding-left:10px}
.buscador{padding:0}
.b-caja{max-height:100vh;height:100vh;max-width:none}
.b-fila{padding:16px}
#b-texto{font-size:18px}
.b-aviso{padding:12px 16px}
.b-resultados{padding:0 4px 16px}
}
/* ---- La X de borrar del buscador ----
La que pinta el navegador por defecto sale azul y grande. Se sustituye por
una cruz gris del mismo tamaño y color que la de cerrar, al lado. */
#b-texto::-webkit-search-cancel-button{
-webkit-appearance:none;appearance:none;
width:13px;height:13px;cursor:pointer;opacity:.55;
background-color:var(--suave);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
#b-texto::-webkit-search-cancel-button:hover{opacity:1}
.b-cerrar{color:var(--suave);font-size:24px}
.b-cerrar:hover{color:var(--tinta)}
/* ---- La bolita de color ----
Cuando la prenda es de dos tonos, la bolita va partida en diagonal; con
tres, en tercios. Cuando es un estampado, se rellena con un trozo de la
foto de la tela: sacar "el color medio" de un estampado daba grises. */
.bolita{width:13px;height:13px;border-radius:50%;border:1px solid rgba(34,57,44,.18);
display:inline-block;flex:0 0 13px;background-size:cover;
background-position:50% 30%}
.bolita--tela{background-repeat:no-repeat;
/* se acerca a la tela: a tamano normal se veria la foto entera */
background-size:300%}
.desplegable .bolita{width:14px;height:14px;flex:0 0 14px}
/* ---- La bolita, como las de Exótica ----
14px y borde fino verdoso. El tono sale de la tabla exacta de Exótica
(cada nombre con SU color), no del color medio de la familia: así
"celeste" es celeste y no azul marino. */
.bolita{width:14px;height:14px;flex:0 0 14px;
border:1px solid rgba(36,64,47,.30)}
.prod .bolitas{gap:7px;margin-top:8px}
.prod .bolitas span.txt{font-size:11.5px;color:var(--suave);letter-spacing:.02em}