/* Mimbise — página web. Diseño: boceto 1 + portada del boceto 2. Día 07–19 h (blanco) / Noche 19–07 h (negro). */
@font-face{font-family:Inter;src:url('/fuentes/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root,[data-tema="dia"]{
  --bg:#FFFFFF;--tx:#1C1A17;--tx2:#5B554C;--tx3:#9A9286;--line:#ECE7DF;--line2:#1C1A17;--card:#F7F4EF;
  --btn:#1C1A17;--btntx:#FFFFFF;--barbg:#1C1A17;--bartx:#E9E1D3;--badgebg:rgba(255,255,255,.92);--badgetx:#5B554C;
  --ambar:#9A6B1F;--fbg:#F7F4EF;--ftx:#1C1A17;--sombra:rgba(28,26,23,.08);--velo:rgba(255,255,255,.97);--estudio:#F5F5F7
}
[data-tema="noche"]{
  --bg:#111113;--tx:#F4F1EA;--tx2:#B5AFA5;--tx3:#7C766D;--line:#2A2825;--line2:#F4F1EA;--card:#1A1917;
  --btn:#F4F1EA;--btntx:#111113;--barbg:#0B0B0C;--bartx:#B5AFA5;--badgebg:rgba(17,17,19,.82);--badgetx:#D9D3C8;
  --ambar:#E0B566;--fbg:#0B0B0C;--ftx:#D9D3C8;--sombra:rgba(0,0,0,.4);--velo:rgba(17,17,19,.97);--estudio:#1C1C1E
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;
     transition:background .3s,color .3s;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 56px}
.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:.02em}
.oculto{display:none!important}

/* Barra superior y cabecera */
.top{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:10px 16px;background:var(--barbg);color:var(--bartx)}
[data-tema="noche"] .top{border-bottom:1px solid var(--line)}
header.cab{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
header.cab .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
nav.menu-pc a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-right:34px;transition:color .2s}
nav.menu-pc a:hover,nav.menu-pc a.activo{color:var(--tx)}
.logo img{height:30px}
.logo .l-noche,[data-tema="noche"] .logo .l-dia{display:none}
[data-tema="noche"] .logo .l-noche{display:block}
.iconos{display:flex;gap:22px;justify-content:flex-end;color:var(--tx2)}
.iconos a:hover,.btn-menu:hover{color:var(--tx)}
.ico{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.btn-menu{display:none;background:none;border:0;cursor:pointer;color:var(--tx2);padding:4px 0}

/* Menú del celular */
.cajon{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;padding:22px 24px;
       opacity:0;pointer-events:none;transition:opacity .25s}
.cajon.abierto{opacity:1;pointer-events:auto}
.cajon .cerrar{align-self:flex-end;background:none;border:0;cursor:pointer;color:var(--tx)}
.cajon nav{display:flex;flex-direction:column;gap:6px;margin-top:40px}
.cajon nav a{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;font-weight:300}
.cajon .redes{margin-top:auto;display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--tx2)}
.cajon .redes a{display:flex;align-items:center;gap:10px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
     padding:15px 30px;border-radius:2px;background:var(--btn);color:var(--btntx);border:1px solid var(--btn);cursor:pointer;
     transition:opacity .2s,background .2s,color .2s}
.btn:hover{opacity:.85}
.btn2{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn2:hover{background:var(--tx);color:var(--bg);opacity:1}
.btn .ico{width:15px;height:15px}

/* Portada */
.hero{position:relative;height:680px;overflow:hidden;background:#2a2622}
.hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.hero small{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#E9E4DA}
.hero h1{font-size:80px;line-height:1.02;margin:20px 0 22px;color:#fff}
.hero p{font-size:16px;line-height:1.7;color:#E9E4DA;max-width:460px;margin-bottom:34px}
.hero .btn{background:#fff;color:#1C1A17;border-color:#fff}

/* Secciones */
.sec{padding:88px 0}
.sechead{text-align:center;margin-bottom:34px}
.sechead small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
.sechead h2{font-size:46px;margin-top:10px;line-height:1.1}
.sechead p{color:var(--tx2);font-size:15px;margin-top:10px}
.cats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 44px}
.cats a,.cats button{font-size:13px;padding:9px 20px;border:1px solid var(--line);border-radius:999px;color:var(--tx2);background:none;cursor:pointer;white-space:nowrap;transition:all .2s}
.cats a:hover,.cats button:hover{border-color:var(--tx2);color:var(--tx)}
.cats .on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.cats .n{opacity:.55;margin-left:4px;font-size:11px}

/* Tarjetas */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px}
.card{display:flex;flex-direction:column}
.card .img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--card);border-radius:2px;border:1px solid var(--line)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card .img img{transition:scale .6s ease}
.card:hover .img img{scale:1.04}
/* Foto de estudio (joya sin fondo sobre gris suave, estilo Apple; cambia con día/noche) */
.card .img.estudio,.ficha .foto.estudio{background:var(--estudio);border-color:transparent}
.card .img.estudio img,.ficha .foto.estudio img{object-fit:contain}
.badge{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.06em;padding:5px 10px;border-radius:999px;background:var(--badgebg);color:var(--badgetx)}
.badge.ult{color:var(--ambar)}
.promo{position:absolute;top:12px;right:12px;font-size:11px;letter-spacing:.1em;padding:5px 10px;background:var(--tx);color:var(--bg);border-radius:999px}
.card .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin:16px 0 6px}
.card .nom{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.2;margin-bottom:8px}
.pre{font-size:14px}
.pre s{color:var(--tx3);margin-left:8px;font-size:13px}
.card .lo{margin-top:auto;width:100%;padding:12px;font-size:12px}
.card .pre{margin-bottom:14px}
.vacio{text-align:center;color:var(--tx2);padding:60px 0;font-size:15px}
.centro{text-align:center;margin-top:52px}

/* Beneficios */
.valores{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.valores div{padding:34px 40px;text-align:center;font-size:14px;color:var(--tx2);line-height:1.6}
.valores div+div{border-left:1px solid var(--line)}
.valores b{display:block;font-weight:500;color:var(--tx);font-size:15px;margin-bottom:4px}

/* Catálogo */
.cab-pagina{padding:64px 0 10px;text-align:center}
.cab-pagina h1{font-size:56px;line-height:1.05}
.cab-pagina p{color:var(--tx2);margin-top:10px;font-size:15px}
.herramientas{display:flex;gap:14px;justify-content:center;align-items:center;margin:30px 0 22px;flex-wrap:wrap}
.buscar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:0 18px;height:44px;width:340px;color:var(--tx3)}
.buscar input{border:0;outline:0;background:none;flex:1;font-size:14px;color:var(--tx)}
.buscar:focus-within{border-color:var(--tx2)}
.orden{height:44px;border:1px solid var(--line);border-radius:999px;padding:0 18px;background:var(--bg);font-size:14px;color:var(--tx2);cursor:pointer;outline:0}
.contador{text-align:center;font-size:13px;color:var(--tx3);margin:-20px 0 30px}

/* Ficha de joya */
.migas{font-size:12px;letter-spacing:.08em;color:var(--tx3);padding:28px 0}
.migas a:hover{color:var(--tx)}
.ficha{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start;padding-bottom:40px}
.ficha .foto{position:relative;aspect-ratio:1/1;background:var(--card);border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.ficha .foto img{width:100%;height:100%;object-fit:cover}
.ficha .info{position:sticky;top:120px}
.ficha .cat{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.ficha h1{font-size:50px;line-height:1.05;margin:14px 0 18px}
.ficha .pre{font-size:20px}
.ficha .pre s{font-size:16px}
.ficha .ahorro{display:inline-block;font-size:12px;letter-spacing:.06em;color:var(--ambar);margin-left:10px}
.disp{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);margin:18px 0 26px}
.disp i{width:7px;height:7px;border-radius:50%;background:#3F9D6B}
.disp.ult i{background:var(--ambar)}
.disp.ult{color:var(--ambar)}
.ficha .desc{font-size:15px;line-height:1.8;color:var(--tx2);margin-bottom:32px;white-space:pre-line}
.ficha .acciones{display:flex;gap:12px}
.ficha .acciones .btn{flex:1;padding:17px}
.ficha .acciones .btn2{flex:0 0 auto}
.detalles{margin-top:36px;border-top:1px solid var(--line)}
.detalles div{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--tx2)}
.detalles .ico{color:var(--tx3);flex:0 0 auto;margin-top:1px}
.detalles b{color:var(--tx);font-weight:500}
.aviso-copia{font-size:12px;color:var(--tx3);margin-top:10px;min-height:18px}

/* Nosotros */
.historia{max-width:720px;margin:0 auto;text-align:center}
.historia p{font-size:17px;line-height:1.9;color:var(--tx2);margin-bottom:18px}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.paso{border:1px solid var(--line);padding:34px 30px;border-radius:2px}
.paso .num{font-variant-numeric:lining-nums;font-family:'Cormorant Garamond',Georgia,serif;font-size:46px;font-weight:300;color:var(--tx3);line-height:1}
.paso h3{font-weight:500;font-size:16px;margin:14px 0 8px}
.paso p{font-size:14px;line-height:1.7;color:var(--tx2)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bloque{background:var(--card);padding:38px 40px;border-radius:2px}
.bloque h3{font-size:30px;margin-bottom:16px}
.bloque li{list-style:none;font-size:14px;color:var(--tx2);line-height:1.7;padding:9px 0;border-bottom:1px solid var(--line)}
.bloque li:last-child{border-bottom:0}
.contacto{text-align:center}
.contacto .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* Banda editorial (inicio) */
.editorial{padding:0 0 88px}
.editorial .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
.editorial .fotos{position:relative;padding:0 22% 14% 0}
.editorial .e1{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.editorial .e2{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;border:8px solid var(--bg)}
.editorial small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
.editorial h2{font-size:52px;line-height:1.05;margin:14px 0 18px}
.editorial p{font-size:16px;line-height:1.8;color:var(--tx2);margin-bottom:30px;max-width:420px}

/* Galería (nosotros) */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.galeria img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}

/* Garantía */
.garantia{padding:0 0 88px}
.garantia .sechead p{max-width:560px;margin:12px auto 0;line-height:1.7}
.bloque .nota{font-size:13px;line-height:1.7;color:var(--tx);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
a.sub{text-decoration:underline;text-underline-offset:3px;color:var(--tx)}

/* Pie */
footer.pie{background:var(--fbg);color:var(--ftx);padding:56px 0 40px;margin-top:88px}
footer.pie .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
footer.pie p{font-size:13px;line-height:1.9;opacity:.75}
footer.pie .logo img{height:26px;margin-bottom:18px}
footer.pie .der{text-align:right}
footer.pie a:hover{text-decoration:underline}
.derechos{font-size:11px;opacity:.5;margin-top:26px;letter-spacing:.04em}

/* Botón flotante de WhatsApp */
.flotante{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--btn);color:var(--btntx);
          display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--sombra);z-index:30;transition:transform .2s}
.flotante:hover{transform:scale(1.06)}
.flotante .ico{width:24px;height:24px}

/* ---------- Movimiento ---------- */
/* Paso suave entre páginas (Chrome, Edge, Safari nuevos; los demás cambian normal) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* Aparición suave al bajar (solo si hay JavaScript; sin él todo se ve igual) */
.js .revelar{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .revelar.visible{opacity:1;transform:none}

/* Cabecera inteligente: se esconde al bajar y vuelve al subir */
header.cab{transition:transform .35s ease,box-shadow .35s}
header.cab.escondida{transform:translateY(-100%)}
header.cab.flotando{box-shadow:0 6px 24px var(--sombra)}

/* Volver arriba */
.arriba{position:fixed;right:30px;bottom:90px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
        background:var(--bg);color:var(--tx2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:30;
        opacity:0;transform:translateY(10px);pointer-events:none;transition:all .3s;box-shadow:0 4px 14px var(--sombra)}
.arriba.ver{opacity:1;transform:none;pointer-events:auto}
.arriba:hover{color:var(--tx);border-color:var(--tx2)}

@media (prefers-reduced-motion:reduce){
  .js .revelar{opacity:1;transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Favoritos ---------- */
.card{position:relative}
.corazon{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
         background:var(--badgebg);color:var(--tx2);display:flex;align-items:center;justify-content:center;transition:transform .2s,color .2s}
.corazon:hover{transform:scale(1.08);color:var(--tx)}
.corazon .ico{width:17px;height:17px}
.corazon.on,.btn-fav.on{color:#C2474F}
.corazon.on .ico,.btn-fav.on .ico{fill:currentColor}
.corazon.latido{animation:latido .35s ease}
@keyframes latido{50%{transform:scale(1.25)}}
.promo{top:auto;bottom:12px;left:12px;right:auto}
.ico-fav{position:relative}
.ico-fav .cuenta{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;border-radius:8px;background:var(--tx);color:var(--bg);
                 font-size:10px;line-height:16px;text-align:center;padding:0 4px}
[data-favoritos] .card{display:none}
[data-favoritos] .card.es-fav{display:flex}
.btn-fav .ico{width:16px;height:16px}

/* ---------- Carrusel de destacadas ---------- */
.sec-car{padding-bottom:0}
.sechead.fila{display:flex;justify-content:space-between;align-items:flex-end;text-align:left}
.flechas{display:flex;gap:10px}
.flechas button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;color:var(--tx2);
                display:flex;align-items:center;justify-content:center;transition:all .2s}
.flechas button:hover{border-color:var(--tx);color:var(--tx)}
.flechas button:disabled{opacity:.3;cursor:default}
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*26px)/4);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
          scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.carrusel::-webkit-scrollbar{display:none}
.carrusel .card{scroll-snap-align:start}

/* ---------- Zoom de la foto ---------- */
.ficha .foto{cursor:zoom-in}
.ficha .foto img{transition:transform .25s ease}
.ficha .foto.zoom img{transform:scale(2.1)}
.pista{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:var(--badgebg);color:var(--tx2);
       display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .2s}
.ficha .foto.zoom .pista{opacity:0}
.visor{position:fixed;inset:0;z-index:60;background:rgba(10,10,11,.96);display:flex;align-items:center;justify-content:center;
       opacity:0;pointer-events:none;transition:opacity .25s;overflow:auto}
.visor.abierto{opacity:1;pointer-events:auto}
.visor img{max-width:100%;max-height:100%;object-fit:contain;touch-action:pinch-zoom}
.visor .cerrar{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);
               color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}

/* ---------- Vitrina (estilo Apple: la joya queda fija y se transforma al deslizar) ----------
   web.js pone en cada joya: --e (entra y crece, 0→1), --t (aparece el texto) y --s (sale, 0→1). */
.vitrina{padding-top:88px}
.v-cab{margin-bottom:0}
.v-item{position:relative;height:230vh;--e:0;--t:0;--s:0}
.v-pegado{position:sticky;top:0;height:100vh;height:100svh;max-width:1280px;margin:0 auto;padding:0 56px;
          display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;
          opacity:calc(1 - var(--s));transform:translateY(calc(var(--s) * -6vh))}
.v-item.der .v-foto{order:2}
.v-foto{position:relative;width:100%;max-width:74vh;aspect-ratio:1/1;justify-self:center}
/* La joya aparece de a poco: sube, crece y se endereza, transparente y borrosa al principio.
   Queda 100 % nítida y opaca solo cuando --e llega a 1 (la joya ya está fija en el centro). */
.v-joya{position:absolute;inset:0;will-change:transform;
        transform:translateY(calc((1 - var(--e)) * 18%)) scale(calc(.62 + .38 * var(--e))) rotate(calc((1 - var(--e)) * -12deg))}
.v-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:opacity,filter;
       opacity:calc(var(--e) * var(--e));filter:blur(calc((1 - var(--e)) * 10px))}
.v-foto:not(.estudio) .v-img{object-fit:cover}
.v-brillo{position:absolute;inset:6%;border-radius:50%;opacity:var(--e);transform:scale(calc(.5 + .6 * var(--e)));
          background:radial-gradient(circle,rgba(201,162,92,.26) 0%,rgba(201,162,92,.08) 45%,transparent 68%)}
.v-txt{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 40px))}
.v-txt small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
.v-txt h3{font-size:64px;line-height:1.02;margin:16px 0 18px}
.v-txt p{font-size:16px;line-height:1.75;color:var(--tx2);max-width:440px;margin-bottom:22px;
         display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.v-txt .pre{font-size:20px;margin-bottom:28px}
.v-txt .pre s{font-size:16px}
.v-acciones{display:flex;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){
  .v-item{height:auto;--e:1;--t:1;--s:0}
  .v-pegado{position:static;height:auto;padding-top:40px;padding-bottom:40px}
}

/* ---------- Catálogo: cada joya crece suave mientras entra en pantalla (sigue al dedo) ----------
   Solo en navegadores que lo soportan (Chrome, Edge…); en los demás queda la aparición suave. */
@supports (animation-timeline:view()){
  .con-scroll .grid .card .img{animation:entrar-img linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  .con-scroll .grid .card .img img{animation:acercar linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .con-scroll .grid .card > a > .cat,.con-scroll .grid .card > a > .nom,.con-scroll .grid .card .pre{
    animation:subir-txt linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
}
@keyframes entrar-img{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes acercar{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes subir-txt{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.con-scroll .grid .card *{animation:none!important}}

/* ---------- Barra "Lo quiero" fija (celular) ---------- */
.barra-compra{display:none}

/* Celular */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ficha{grid-template-columns:1fr;gap:30px}
  .ficha .info{position:static}
  .pasos{grid-template-columns:1fr}
}
@media (max-width:700px){
  .wrap{padding:0 18px}
  .top{font-size:10px;letter-spacing:.1em;padding:8px}
  header.cab .wrap{height:60px}
  nav.menu-pc{display:none}
  .btn-menu{display:block}
  .logo img{height:22px}
  .iconos{gap:16px}
  .iconos .solo-pc{display:none}
  .hero{height:560px}
  .hero .txt{justify-content:flex-end;padding-bottom:48px}
  .hero h1{font-size:44px;margin:14px 0}
  .hero p{font-size:14px;margin-bottom:24px}
  .sec{padding:52px 0}
  .sechead h2{font-size:34px}
  .cats{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 26px;padding:0 18px 4px;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats a,.cats button{padding:8px 16px;font-size:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
  .badge,.promo{top:8px;font-size:9.5px;padding:4px 8px}.badge{left:8px}.promo{right:8px}
  .card .cat{font-size:9.5px;margin:10px 0 4px}
  .card .nom{font-size:18px;margin-bottom:5px}
  .card .pre{font-size:13px;margin-bottom:10px}.card .pre s{display:block;margin:2px 0 0}
  .card .lo{padding:10px 6px;font-size:10.5px;letter-spacing:.06em}
  .valores{grid-template-columns:1fr}
  .valores div{padding:20px}
  .valores div+div{border-left:0;border-top:1px solid var(--line)}
  .cab-pagina{padding:40px 0 0}
  .cab-pagina h1{font-size:40px}
  .herramientas{margin:22px 0 18px}
  .buscar{width:100%}
  .orden{width:100%}
  .contador{margin:-8px 0 22px}
  .migas{padding:18px 0}
  .ficha h1{font-size:36px}
  .ficha .acciones{flex-direction:column}
  .dos{grid-template-columns:1fr}
  .editorial{padding-bottom:52px}
  .editorial .wrap{grid-template-columns:1fr;gap:34px}
  .editorial h2{font-size:38px}
  .galeria{grid-template-columns:1fr 1fr;gap:10px}
  .galeria img:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .garantia{padding-bottom:52px}
  .bloque{padding:28px 24px}
  footer.pie{padding:40px 0 34px;margin-top:52px}
  footer.pie .wrap{display:block}
  footer.pie .der{text-align:left;margin-top:20px}
  .flotante{right:16px;bottom:16px;width:50px;height:50px}
  .arriba{right:21px;bottom:78px}
  .corazon{top:6px;right:6px;width:30px;height:30px}
  .corazon .ico{width:15px;height:15px}
  .promo{bottom:8px;left:8px}
  .sechead.fila{align-items:center}
  .sechead.fila h2{font-size:30px}
  .flechas button{width:38px;height:38px}
  .carrusel{grid-auto-columns:62%;gap:12px;margin:0 -18px;padding:0 18px 4px;scroll-padding:0 18px}
  .barra-compra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;align-items:center;justify-content:space-between;gap:14px;
                padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);
                box-shadow:0 -6px 20px var(--sombra);transform:translateY(110%);transition:transform .3s ease}
  .barra-compra.ver{transform:none}
  .barra-compra .nom{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.2;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-compra .pre{font-size:13px;color:var(--tx2)}
  .barra-compra .btn{padding:13px 20px;font-size:12px}
  .flotante,.arriba{transition:all .3s}
  body.con-barra .flotante{bottom:90px}
  body.con-barra .arriba{bottom:152px}
  .ficha .acciones .btn-fav span{display:inline}
  .vitrina{padding-top:52px}
  .v-item{height:210vh}
  .v-pegado{grid-template-columns:1fr;gap:6px;padding:64px 22px 24px;align-content:center}
  .v-item.der .v-foto{order:0}
  .v-foto{max-width:min(78vw,46vh)}
  .v-txt{text-align:center}
  .v-txt h3{font-size:34px;margin:8px 0 8px}
  .v-txt p{font-size:14px;-webkit-line-clamp:2;margin:0 auto 12px}
  .v-txt .pre{font-size:17px;margin-bottom:16px}
  .v-acciones{justify-content:center}
  .v-acciones .btn{padding:13px 20px;font-size:12px}
}