/* Generado por herramientas/compilar.mjs a partir de:
     public/vendor/fuentes.css
     public/tokens/fonts.css
     public/tokens/colors.css
     public/tokens/familias.css
     public/tokens/typography.css
     public/tokens/layout.css
     public/tokens/effects.css
     public/tokens/theme-dark.css
     public/base/reset.css
     public/base/utilities.css
     public/tienda/estilos/raiz.css
     public/tienda/estilos/tinte.css
     public/tienda/estilos/cascaron.css
     public/tienda/estilos/portada.css
     public/tienda/estilos/componentes.css
     public/tienda/estilos/ficha.css
     public/tienda/estilos/anchos.css
     public/tienda/estilos/pedido.css
     public/tienda/estilos/movimiento.css
     public/tienda/estilos/superficies.css
   No lo edites: se sobrescribe en cada build. */

/* ── public/vendor/fuentes.css ─────────────────────────────────────── */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/vendor/clash-display-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/vendor/satoshi-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── public/tokens/fonts.css ─────────────────────────────────────── */


/* ── public/tokens/colors.css ─────────────────────────────────────── */
:root{

  --paper:#FBF6F4;
  --surface:#FFFFFF;
  --sunk:#F3EEEC;
  --hairline:#E4DBD7;
  --border:#D6CBC6;
  --ink:#111111;
  --ink-soft:#6E6663;
  --ink-faint:#766D69;

  --scrim:rgba(17,17,17,.32);

  --nude-50:#FAF3F1;
  --nude-100:#F4E7E3;
  --nude-200:#E2C2B9;
  --nude-300:#CFA79C;
  --nude-400:#B8887B;
  --nude-600:#8A5C4E;

  --nude-sobre-tinta:var(--nude-200);

  --vino-50:#FBF1F2;
  --vino-600:#8A1B2E;
  --vino-700:#6E1524;
  --on-vino:#FFFFFF;

  --ok:#2F6B4F;

  --text-body:var(--ink);
  --text-muted:var(--ink-soft);
  --text-faint:var(--ink-faint);
  --text-nude:var(--nude-600);
  --surface-page:var(--paper);
  --surface-card:var(--surface);
  --surface-sunk:var(--sunk);
  --surface-brand:var(--nude-200);
  --surface-brand-soft:var(--nude-50);
  --on-brand:#111111;
  --rule-soft:var(--hairline);
  --rule-strong:var(--border);
  --accent-line:var(--nude-200);
  --focus-ring:var(--nude-400);
  --acento:var(--vino-600);
  --acento-fuerte:var(--vino-700);
  --acento-soft:var(--vino-50);
  --on-acento:var(--on-vino);
}

/* ── public/tokens/familias.css ─────────────────────────────────────── */
:root{
  --fam-nudes:#E2C2B9;
  --fam-rosas:#D98BA3;
  --fam-rojos:#B4142B;
  --fam-oscuros:#241E2B;
  --fam-pasteles:#D9CFE8;
  --fam-metalizados:#C8A24B;


  --fam:var(--nude-200);


  --velo-nudes:18%;
  --velo-rosas:11%;
  --velo-rojos:5%;
  --velo-oscuros:4%;
  --velo-pasteles:28%;
  --velo-metalizados:8%;


  --mezcla-velo:6%;
  --mezcla-manto:9%;
  --mezcla-filete:34%;
}


:root[data-theme="dark"]{
  --fam-oscuros:#9B93A8;
  --fam-rojos:#E0556A;
  --velo-nudes:6%;
  --velo-rosas:7%;
  --velo-rojos:7%;
  --velo-oscuros:7%;
  --velo-pasteles:5%;
  --velo-metalizados:7%;
  --mezcla-velo:7%;
  --mezcla-manto:13%;
  --mezcla-filete:40%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fam-oscuros:#9B93A8;
    --fam-rojos:#E0556A;
    --velo-nudes:6%;
    --velo-rosas:7%;
    --velo-rojos:7%;
    --velo-oscuros:7%;
    --velo-pasteles:5%;
    --velo-metalizados:7%;
    --mezcla-velo:7%;
    --mezcla-manto:13%;
    --mezcla-filete:40%;
  }
}

/* ── public/tokens/typography.css ─────────────────────────────────────── */
:root{
  --display:"Clash Display", Arial, Helvetica, sans-serif;
  --texto:Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:var(--display);
  --font-body:var(--texto);


  --familia-cifra:var(--texto);


  --peso-titular:600;
  --peso-seccion:500;
  --peso-precio:500;
  --peso-lbl:600;

  --text-base:16px;
  --leading-body:1.6;
  --leading-title:1.2;



  --fs-1:.75rem;
  --fs-2:var(--fs-1);
  --fs-3:var(--fs-1);
  --fs-4:var(--fs-1);
  --fs-5:.8rem;
  --fs-6:.86rem;
  --fs-7:.92rem;
  --fs-8:1rem;
  --fs-9:1.1rem;
  --fs-10:1.25rem;
  --fs-11:1.4rem;
  --fs-12:1.5rem;
  --fs-13:1.75rem;
  --fs-14:2rem;

  --fs-15:2.5rem;
  --fs-16:3.25rem;


  --fs-eyebrow-xs:var(--fs-1);
  --fs-eyebrow:var(--fs-2);
  --fs-label:var(--fs-3);
  --fs-btn-sm:var(--fs-3);
  --fs-btn:var(--fs-4);
  --fs-nav:var(--fs-4);
  --fs-meta:var(--fs-5);
  --fs-count:var(--fs-5);
  --fs-small:var(--fs-6);
  --fs-body:var(--fs-8);
  --fs-card-title:var(--fs-8);
  --fs-price-card:var(--fs-10);

  --fs-section:var(--fs-14);
  --fs-price-ficha:var(--fs-15);


  --track-btn:.13em;
  --track-eyebrow:.16em;
  --track-label:.18em;
  --track-marca-g:.18em;
  --track-marca-i:.42em;

  --track-titular:-.02em;
  --track-seccion:-.01em;
}

/* ── public/tokens/layout.css ─────────────────────────────────────── */
:root{
  --maxw:78rem;
  --radio:2px;
  --radio-boton:999px;

  --gap-grid:1.15rem;
  --gap-grid-movil:.8rem;
  --pad-wrap:1.25rem;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-14:3.5rem;
  --space-16:4rem;

  --dur:.18s;

  --dur-tinte:.45s;
  --ease:ease;

  --sal:cubic-bezier(.22,.72,.24,1);

  --h-barra-top:72px;
  --h-tabs:56px;
}

/* ── public/tokens/effects.css ─────────────────────────────────────── */
:root{
  --shadow:0 1px 2px rgba(17,17,17,.04), 0 10px 30px -18px rgba(17,17,17,.22);
  --shadow-flotante:0 6px 20px -6px rgba(0,0,0,.45);
  --shadow-tono:inset 0 -8px 18px -8px rgba(0,0,0,.35);
  --ring-input:0 0 0 3px var(--nude-100);
}

/* ── public/tokens/theme-dark.css ─────────────────────────────────────── */
:root{color-scheme:light}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}

:root[data-theme="dark"]{
  --paper:#121110;
  --surface:#1A1817;
  --sunk:#221F1E;
  --hairline:#2E2A28;
  --border:#3A3533;
  --ink:#F5F1EF;
  --ink-soft:#A79E9A;
  --ink-faint:#9A918C;
  --scrim:rgba(0,0,0,.62);
  --nude-50:#241D1B;
  --nude-100:#2E2523;
  --nude-200:#E2C2B9;
  --nude-300:#CFA79C;
  --nude-400:#C89A8C;
  --nude-600:#E0B6A8;

  --nude-sobre-tinta:#8A5C4E;
  --ok:#86C4A2;
  --vino-50:#2A1A1E;
  --vino-600:#EE9AA6;
  --vino-700:#F5B3BC;
  --on-vino:#231014;

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121110;--surface:#1A1817;--sunk:#221F1E;--hairline:#2E2A28;--border:#3A3533;
    --ink:#F5F1EF;--ink-soft:#A79E9A;--ink-faint:#9A918C;--scrim:rgba(0,0,0,.62);
    --nude-50:#241D1B;--nude-100:#2E2523;--nude-200:#E2C2B9;--nude-300:#CFA79C;--nude-400:#C89A8C;--nude-600:#E0B6A8;
    --nude-sobre-tinta:#8A5C4E;
    --ok:#86C4A2;--vino-50:#2A1A1E;--vino-600:#EE9AA6;--vino-700:#F5B3BC;--on-vino:#231014;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
  }
}

/* ── public/base/reset.css ─────────────────────────────────────── */
*, *::before, *::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-block:var(--h-barra-top) var(--h-tabs)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--texto);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--nude-600)}}
button{font:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--nude-400);outline-offset:3px;border-radius:var(--radio)}

/* ── public/base/utilities.css ─────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:1.25rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.saltar{position:fixed;left:.75rem;top:.75rem;z-index:70;transform:translateY(-180%);transition:transform var(--dur) var(--sal,ease);background:var(--surface);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radio-boton);padding:.7rem 1.2rem;font-size:var(--fs-btn);font-weight:500;letter-spacing:var(--track-btn);text-transform:uppercase}
.saltar:focus{transform:translateY(0)}

.btn{font-size:var(--fs-btn);font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:.8rem 1.5rem;border-radius:var(--radio-boton);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;white-space:nowrap;transition:background .18s ease, color .18s ease, border-color .18s ease}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-primary{background:var(--ink);color:var(--paper)}

@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--nude-600);color:var(--paper)}}

.btn-lg{padding:.75rem 1.5rem;font-size:var(--fs-5);min-height:3rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--ink);background:var(--nude-50);color:var(--ink)}}

/* ── public/tienda/estilos/raiz.css ─────────────────────────────────────── */
.ap{background:var(--paper);color:var(--ink);font-family:var(--texto);min-height:100%;display:flex;flex-direction:column;position:relative}
.ap *{box-sizing:border-box}
button{color:inherit}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-faint)}
.lbl{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
.display{font-family:var(--display);font-weight:var(--peso-titular);letter-spacing:var(--track-seccion)}

.num{font-family:var(--familia-cifra);font-variant-numeric:tabular-nums}
.precio{font-weight:var(--peso-precio)}
.hr{height:1px;background:var(--hairline);border:0;margin:0}

.h1-hero{margin:0;display:grid;gap:.12em}
.h1-bajada,.h1-golpe{display:flex;flex-wrap:wrap;column-gap:.24em}

.h1-bajada{font-size:clamp(1.3rem,5vw,1.65rem);line-height:1.12;letter-spacing:-.005em;color:var(--ink-soft)}
.h1-golpe{font-size:clamp(2.3rem,9.6vw,3.1rem);line-height:1.02;letter-spacing:-.022em}

.ap.esc .h1-golpe{font-size:clamp(2.6rem,min(5.6vw,9svh),4.6rem);letter-spacing:-.028em}
.ap.esc .h1-bajada{font-size:clamp(1.5rem,min(2.4vw,4svh),2rem)}
.h1-ficha{font-size:var(--fs-12);line-height:1.15}
.ap.esc .h1-ficha{font-size:var(--fs-14)}

.ficha-sola{padding-top:.5rem}
.ficha-sola .h1-ficha{font-size:var(--fs-13)}
.ap.esc .ficha-sola .h1-ficha{font-size:var(--fs-14)}

.ficha-sola>div{border-top:1px solid var(--hairline);padding-top:1.4rem}

/* ── public/tienda/estilos/tinte.css ─────────────────────────────────────── */
.ap,.vista{
  --tinte-velo:color-mix(in oklab, var(--fam) var(--mezcla-velo), var(--paper));
  --tinte-manto:color-mix(in oklab, var(--fam) var(--mezcla-manto), var(--sunk));
  --tinte-filete:color-mix(in oklab, var(--fam) var(--mezcla-filete), var(--hairline));
}

[data-fam="nudes"]{--fam:var(--fam-nudes);--mezcla-velo:var(--velo-nudes)}
[data-fam="rosas"]{--fam:var(--fam-rosas);--mezcla-velo:var(--velo-rosas)}
[data-fam="rojos"]{--fam:var(--fam-rojos);--mezcla-velo:var(--velo-rojos)}
[data-fam="oscuros"]{--fam:var(--fam-oscuros);--mezcla-velo:var(--velo-oscuros)}
[data-fam="pasteles"]{--fam:var(--fam-pasteles);--mezcla-velo:var(--velo-pasteles)}
[data-fam="metalizados"]{--fam:var(--fam-metalizados);--mezcla-velo:var(--velo-metalizados)}

.vista[data-fam]{
  background:var(--tinte-velo);
  transition:background-color var(--dur-tinte) var(--sal);

  --ink-faint:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){.vista[data-fam]{transition:none}}

/* ── public/tienda/estilos/cascaron.css ─────────────────────────────────────── */
.barra-top{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--hairline)}
.barra-top-in{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.75rem;align-items:center;padding:.6rem .9rem}

.barra-top-in>a{display:grid;align-content:center;min-height:44px}
.ico-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer;position:relative;border-radius:var(--radio-boton)}
@media (hover:hover) and (pointer:fine){.ico-btn:hover{color:var(--nude-600)}}
.ico-btn svg{width:20px;height:20px}
.globo{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:var(--fs-2);font-weight:600;display:grid;place-items:center;line-height:1}
.barra-bot{position:sticky;bottom:0;z-index:40;height:var(--h-tabs);background:var(--surface);border-top:1px solid var(--hairline);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}

.tab{border:0;background:transparent;cursor:pointer;padding:.5rem .2rem .6rem;display:grid;justify-items:center;gap:.2rem;color:var(--ink-soft);min-height:56px;position:relative}
.tab svg{width:21px;height:21px}

.tab span{font-size:var(--fs-2);letter-spacing:.02em}
.tab[aria-current="true"]{color:var(--ink)}
.tab[aria-current="true"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--nude-300)}
.vista{flex:1;min-width:0}
.tapa{position:sticky;top:0;height:50px;background:var(--surface);z-index:15;flex:none}
.enmarcado .ap.movil .barra-top{top:50px}
.pad{padding-inline:1rem}
.sec{padding-top:1.75rem}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:0 .85rem}
.sec-h h2{font-family:var(--display);font-weight:var(--peso-seccion);font-size:var(--fs-10);margin:0;line-height:1.2}
.ver-mas{font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--nude-600);background:transparent;border:0;border-bottom:1px solid var(--hairline);padding:0 0 2px;white-space:nowrap;cursor:pointer;font-family:inherit}
@media (hover:hover) and (pointer:fine){.ver-mas:hover{color:var(--ink);border-bottom-color:var(--ink)}}

/* ── public/tienda/estilos/portada.css ─────────────────────────────────────── */
.sec-sub{margin:.1rem 0 .9rem;color:var(--ink-soft);font-size:var(--fs-6);max-width:46ch;white-space:pre-line}

.cierre{display:grid;gap:1rem;padding-bottom:.5rem}
.cierre-foto{display:block;width:100%;height:auto;border-radius:var(--radio)}
.cierre-txt{display:grid;gap:.5rem;align-content:center;color:var(--ink-soft);font-size:var(--fs-5)}
.cierre-txt b{font-weight:500;color:var(--ink);font-size:var(--fs-8)}
.cierre-txt p{margin:0}
.cierre-txt .ver-mas{justify-self:start}


.gr{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;position:relative;text-align:left;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:var(--nude-300);box-shadow:var(--shadow)}}
.card-media{display:block;position:relative}

.card-pie{display:flex;flex-direction:column;gap:.3rem;margin-top:auto;padding-top:.5rem}
.card-pie-b{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0}
.card-pie-b .stock{min-width:0}
.card-accion{flex:none;width:42px;height:42px;border-radius:var(--radio-boton);
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .18s var(--sal)}
@media (hover:hover) and (pointer:fine){.card-accion:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}}
.card-accion:active{transform:scale(.92)}
.card-body{padding:.7rem .75rem .8rem;display:flex;flex-direction:column;gap:.22rem;flex:1}
.card-nom{font-family:var(--display);font-size:var(--fs-7);line-height:1.3;color:var(--ink);

  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;

  min-height:2.6em}

.card-body .eyebrow{font-size:var(--fs-eyebrow);color:var(--ink-faint);

  min-height:1.2em}
.card-precio{font-family:var(--familia-cifra);font-weight:var(--peso-precio);font-size:var(--fs-10);letter-spacing:-.01em;line-height:1.15}

.antes{font-size:var(--fs-4);color:var(--ink-faint);text-decoration:line-through;margin-left:.35rem;font-family:var(--texto);white-space:nowrap}

.precio-oferta{color:var(--acento)}

.card-precio .antes{display:block;margin-left:0}
.foto{aspect-ratio:1;background:var(--nude-50);display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--hairline)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}


.foto.campo-color{--t:var(--tono,var(--nude-200));background:
  radial-gradient(125% 95% at 28% 18%, color-mix(in oklab,#fff 26%, var(--t)) 0%, transparent 62%),
  linear-gradient(158deg, var(--t), color-mix(in oklab,#000 16%, var(--t)));
  background-color:var(--t)}

.campo-velo{position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,#000 15%,transparent),
             inset 0 -34px 44px -32px color-mix(in oklab,#000 26%,transparent)}

.foto.campo-carta{background:var(--nude-50)}
.campo-carta-gr{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);
  gap:9%;width:58%;max-width:9rem}

.dos>.campo-carta .campo-carta-gr{max-width:15rem}
.campo-carta-gr i{display:block;aspect-ratio:1;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,#000 15%,transparent),var(--shadow-tono)}




.foto.campo-marca{background:linear-gradient(135deg,var(--nude-50),var(--nude-100));display:grid;place-items:center}

.campo-placa{width:150px;max-width:92%;height:auto;display:block}

.foto.campo-marca{container-type:inline-size}
@container (max-width:130px){.campo-placa text{display:none}}
.tono-chip{position:absolute;bottom:.45rem;right:.45rem;width:1.15rem;aspect-ratio:1;border-radius:50%;border:2px solid var(--surface);box-shadow:var(--shadow-tono)}




.hero-escena{position:relative;background:var(--nude-50);overflow:hidden;padding:0;aspect-ratio:5/4}

.hero-foto{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

:root[data-theme="dark"] .hero-foto{filter:brightness(.58)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-foto{filter:brightness(.58)}
}

.hero-escena{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 18%);
  mask-image:linear-gradient(to top,transparent 0,#000 18%)}



.rubros{display:flex;gap:.55rem;list-style:none;margin:0;padding:0 0 .3rem;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.rubros::-webkit-scrollbar{display:none}
.rubros li{scroll-snap-align:start}
.rubros li::marker{content:""}

.rubro{display:grid;justify-items:center;gap:.4rem;width:4.25rem;padding:.35rem 0;
  text-decoration:none;color:var(--ink);
  transition:transform .18s var(--sal)}
.rubro-ico{width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--nude-50);color:var(--nude-600);
  transition:background .18s var(--ease),color .18s var(--ease)}
.rubro-ico svg{width:1.45rem;height:1.45rem}

.rubro-nom{font-size:var(--fs-3);line-height:1.25;text-align:center;color:var(--ink-soft)}
.rubro:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--radio)}
@media (hover:hover) and (pointer:fine){
  .rubro:hover{transform:translateY(-3px)}
  .rubro:hover .rubro-ico{background:var(--nude-100);color:var(--nude-600)}
}



.holo{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;isolation:isolate}
.holo::before{content:"";position:absolute;inset:-30%;opacity:0;mix-blend-mode:soft-light;
  background:conic-gradient(from 200deg at 42% 38%,
    color-mix(in oklab,var(--nude-200) 75%,transparent),
    color-mix(in oklab,var(--paper) 70%,transparent),
    color-mix(in oklab,var(--nude-600) 28%,transparent),
    color-mix(in oklab,var(--paper) 60%,transparent),
    color-mix(in oklab,var(--nude-200) 75%,transparent));
  animation:holo-pasa 3.5s var(--ease) .55s both}
@keyframes holo-pasa{
  0%{opacity:0;transform:translate3d(-22%,0,0) rotate(0deg)}
  26%{opacity:.5}
  70%{opacity:.36}
  100%{opacity:0;transform:translate3d(22%,0,0) rotate(9deg)}}
.ap[data-mov="sobrio"] .holo{display:none}
.ap[data-mov="sobrio"] .hero::before{animation:none}

.hero-escena .gloss{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.4) 50%,transparent 64%);transform:translateX(-135%);animation:barrido 1.05s var(--sal) .3s both}
@keyframes barrido{to{transform:translateX(135%)}}


.hero-txt{margin-top:0;padding-block:1.1rem 2rem;display:grid;gap:.9rem;position:relative;z-index:3}
.hero-p{margin:0;color:var(--ink-soft);max-width:36ch;font-size:var(--fs-8);animation:sube-txt .5s var(--sal) .3s both}

.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem;
  padding-top:1.1rem;border-top:1px solid var(--hairline);max-width:36ch;
  animation:sube-txt .5s var(--sal) .5s both}


.ficha-marca{margin:.35rem 0 0;font-size:var(--fs-6);color:var(--ink-soft)}


.orilla{height:clamp(2.5rem,5vw,3.5rem);
  background:linear-gradient(to bottom,var(--nude-50),var(--paper))}


.cinta{position:absolute;top:.45rem;left:.45rem;z-index:2;font-size:var(--fs-1);letter-spacing:.12em;text-transform:uppercase;padding:.22rem .45rem;border-radius:999px;background:var(--acento);color:var(--on-acento)}
.cinta.gris{background:var(--sunk);color:var(--ink-soft)}
.stock{font-size:var(--fs-3);display:flex;align-items:center;gap:.35rem;color:var(--ink-soft)}
.stock i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.stock.ok{color:var(--ok)}.stock.bajo{color:var(--acento)}.stock.no{color:var(--ink-faint)}

.tonos-mini{display:flex;gap:3px;flex-wrap:wrap;padding-top:.15rem;min-height:13px}
.tonos-mini i{width:11px;height:11px;border-radius:50%;border:1px solid color-mix(in oklab,var(--ink) 14%,transparent)}
.tonos-mini u{font-size:var(--fs-2);color:var(--ink-faint);text-decoration:none;align-self:center;margin-left:2px}


.colores{display:flex;gap:.55rem;list-style:none;margin:0;padding:0 0 .3rem;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.colores::-webkit-scrollbar{display:none}
.colores li{scroll-snap-align:start}
.colores li::marker{content:""}
.color{display:grid;justify-items:center;gap:.4rem;width:4.25rem;padding:.35rem 0;
  text-decoration:none;color:var(--ink);
  transition:transform .18s var(--sal)}

.color-disco{width:3.1rem;height:3.1rem;border-radius:50%;background:var(--fam);
  box-shadow:var(--shadow-tono), inset 0 0 0 1px color-mix(in oklab,var(--ink) 28%,transparent);
  transition:transform .18s var(--sal)}
.color-nom{font-size:var(--fs-3);line-height:1.25;text-align:center;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){
  .color:hover .color-disco{transform:scale(1.06)}
}

/* ── public/tienda/estilos/componentes.css ─────────────────────────────────────── */
.rail-caja{position:relative}

.rail-caja::after{content:"";position:absolute;top:0;bottom:.2rem;right:0;width:2.25rem;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface-page))}
.rail{display:flex;gap:.45rem;overflow-x:auto;padding:0 1rem .2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}

.chip{flex:none;border:1px solid var(--border);background:var(--surface);border-radius:var(--radio-boton);padding:.5rem .85rem;font-size:var(--fs-4);color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform .18s var(--sal);min-height:36px}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--ink);color:var(--ink)}}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip b{font-weight:400;color:var(--ink-faint);margin-left:.3rem;font-size:var(--fs-3)}

.chip[aria-pressed="true"] b{color:color-mix(in oklab,var(--paper) 74%,var(--ink))}

.busq{padding-top:1.2rem}
.busq-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0 0}

.busq-conteo{margin:0 0 1rem;font-size:var(--fs-5);color:var(--ink-faint)}

.campo{display:grid;gap:.35rem;margin-bottom:.9rem}
.campo label{display:grid;gap:.35rem}
.campo span{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
.campo input,.campo textarea,.campo select{width:100%;font-family:inherit;font-size:var(--fs-8);padding:.8rem .85rem;border:1px solid var(--border);border-radius:var(--radio);background:var(--surface);color:var(--ink);outline:none;min-height:48px}

.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-faint);opacity:1}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--ink);box-shadow:var(--ring-input)}
.campo em{font-size:var(--fs-4);color:var(--ink-faint);font-style:normal}

.campos-fila{display:grid;gap:.9rem;align-items:start;margin-bottom:.9rem}
.campos-fila .campo{margin-bottom:0}
@media (min-width:460px){.campos-fila{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.busca{position:relative;padding:.7rem 1rem}
.busca-x{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-faint);cursor:pointer;border-radius:var(--radio-boton)}
@media (hover:hover) and (pointer:fine){.busca-x:hover{color:var(--ink);background:var(--nude-100)}}
.busca input{padding-right:2.8rem}
.busca input{width:100%;font-family:inherit;font-size:var(--fs-7);padding:.75rem .9rem .75rem 2.5rem;border:1px solid var(--border);border-radius:var(--radio);background:var(--surface);outline:none;min-height:46px}
.busca input:focus{border-color:var(--ink);box-shadow:var(--ring-input)}
.busca>svg{position:absolute;left:1.75rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-faint);pointer-events:none}

.opt{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--hairline);border-radius:var(--radio);padding:.85rem .9rem;cursor:pointer;background:var(--surface);text-align:left;width:100%;transition:border-color var(--dur) var(--ease)}
.opt[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt s{width:16px;height:16px;border-radius:50%;border:1px solid var(--border);flex:none;margin-top:3px;display:grid;place-items:center;text-decoration:none}
.opt[aria-checked="true"] s{border-color:var(--ink)}
.opt[aria-checked="true"] s::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.opt div{display:grid;gap:.1rem}
.opt b{font-weight:500;font-size:var(--fs-7)}
.opt em{font-style:normal;font-size:var(--fs-5);color:var(--ink-soft)}

.capa{position:absolute;inset:0;z-index:55;pointer-events:none;overflow:hidden;border-radius:48px}
.capa>*{pointer-events:auto}
.capa .velo,.capa .hoja,.capa .toast{position:absolute}

.velo{position:fixed;inset:0;background:var(--scrim);z-index:60;animation:fade .18s ease}

@keyframes toast-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast{position:fixed;left:0;right:0;width:max-content;margin-inline:auto;bottom:5.5rem;z-index:70;background:var(--ink);color:var(--paper);border-radius:var(--radio);padding:.7rem .9rem;font-size:var(--fs-5);display:flex;gap:.9rem;align-items:center;box-shadow:var(--shadow-flotante);max-width:calc(100% - 2rem);pointer-events:none;animation:toast-entra .2s var(--sal) backwards}
.ap[data-mov="sobrio"] .toast{animation-duration:.14s}
.toast button{pointer-events:auto;border:0;background:transparent;color:var(--nude-sobre-tinta);font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap}

.hoja{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-top:1px solid var(--border);border-radius:12px 12px 0 0;max-height:86%;overflow-y:auto;animation:sube .24s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-flotante);padding-bottom:env(safe-area-inset-bottom)}

.hoja-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 1rem .6rem;position:sticky;top:0;background:var(--surface);touch-action:none;cursor:grab;user-select:none}
.hoja-h:active{cursor:grabbing}

.hoja-tirador{position:absolute;top:.55rem;left:50%;transform:translateX(-50%);
  width:2.25rem;height:4px;border-radius:999px;background:var(--nude-300)}

.hoja-vuelve{transition:transform .22s var(--sal)}
.hoja-h b{font-family:var(--display);font-weight:var(--peso-seccion);font-size:var(--fs-9)}
@keyframes sube{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hoja,.velo{animation:none}.hoja-vuelve{transition-duration:.01ms}}

.ap[data-pantalla="checkout"]{--h-tabs:0px}
.accion{position:sticky;bottom:var(--h-tabs);z-index:35;background:var(--surface);border-top:1px solid var(--hairline);padding:.7rem 1rem;display:grid;gap:.6rem;box-shadow:0 -8px 20px -18px rgba(17,17,17,.4)}

.accion .fila{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:.6rem .75rem}
.accion .fila>.btn{width:100%}

.accion .fila>.step button{height:auto;align-self:stretch}

@media (min-width:700px){.accion .fila{grid-template-columns:auto minmax(0,max-content);justify-content:start}}

@media (max-width:460px){.solo-ancho{display:none}}
@media (max-width:360px){.accion .fila{grid-template-columns:minmax(0,1fr)}}

.accion-tono{display:flex;align-items:center;gap:.5rem;margin:0;font-size:var(--fs-7);color:var(--ink)}
.accion-tono s{width:1.1rem;aspect-ratio:1;border-radius:999px;border:1px solid color-mix(in oklab,var(--ink) 28%,transparent);box-shadow:var(--shadow-tono);text-decoration:none;flex:none}

.galeria{display:grid;gap:.55rem}
.galeria-plato{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radio);box-shadow:var(--shadow)}
.galeria-tira{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.galeria-tira::-webkit-scrollbar{display:none}

.galeria-tira>.foto{flex:none;width:100%;scroll-snap-align:center;border-bottom:0}

.galeria-plato img{transition:transform .5s var(--sal)}
@media (hover:hover) and (pointer:fine){.galeria-plato:hover img{transform:scale(1.05)}}

.galeria-conteo{position:absolute;top:.5rem;right:.5rem;z-index:2;pointer-events:none;
  display:flex;gap:.1rem;padding:.2rem .45rem;border-radius:var(--radio-boton);
  font-size:var(--fs-2);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  background:color-mix(in oklab, var(--surface) 82%, transparent);
  color:var(--ink-soft);border:1px solid var(--hairline)}
.galeria-conteo i{font-style:normal;color:var(--ink-faint)}

.galeria-minis{display:flex;gap:.45rem;overflow:auto;scrollbar-width:none}
.galeria-minis::-webkit-scrollbar{display:none}
.galeria-mini{flex:none;width:3.9rem;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);
  filter:grayscale(1);opacity:.62;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease),filter var(--dur) var(--ease)}
.galeria-mini img{width:100%;height:100%;object-fit:cover;display:block}

.galeria-mini[aria-current="true"]{opacity:1;filter:none;border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.galeria-mini:hover{opacity:1;filter:none}}
.galeria-mini:focus-visible{opacity:1;filter:none}

.dos>.foto{border-bottom:0;overflow:hidden;border-radius:var(--radio)}
.dos>.foto img{transition:transform .5s var(--sal)}
@media (hover:hover) and (pointer:fine){.dos>.foto:hover img{transform:scale(1.05)}}

.step{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radio-boton);background:var(--surface)}
.step button{width:44px;height:44px;border:0;background:transparent;cursor:pointer;font-size:var(--fs-8);color:var(--ink);line-height:1;border-radius:inherit;transition:background var(--dur) var(--ease),transform .2s var(--sal)}
@media (hover:hover) and (pointer:fine){.step button:hover:not(:disabled){background:var(--nude-50)}}
.step button:active:not(:disabled){transform:scale(.9)}
.step button:disabled{color:var(--ink-faint);cursor:not-allowed}
.step span{min-width:2.1rem;text-align:center;font-variant-numeric:tabular-nums;font-size:var(--fs-7)}

.miga{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;font-size:var(--fs-4);color:var(--ink-faint);padding-top:.9rem;padding-bottom:.6rem}
.miga a{color:var(--nude-600)}
.tono-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.tono-head .lbl{min-width:0}
.ap.esc .compacta .foto{max-width:none}

.ficha-desc{margin:1.2rem 0 0;color:var(--ink-soft);white-space:pre-line}
.ficha-datos{margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid var(--hairline);display:grid;gap:.5rem}
.ficha-datos div{display:grid;grid-template-columns:7.5rem 1fr;gap:.75rem;font-size:var(--fs-7)}
.ficha-datos dt{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint);padding-top:.18rem}
.ficha-datos dd{margin:0;color:var(--ink-soft)}

@media (max-width:420px){
  .ficha-datos div{grid-template-columns:minmax(0,1fr);gap:.15rem}
}

.sec .ficha-datos{margin:0;padding-top:0;border-top:0}

.ficha-col{padding-top:1.1rem;display:flex;flex-direction:column;align-self:stretch}

.res{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);padding:.9rem 1rem}
.res dl{margin:0;display:grid;gap:.5rem}
.res dl>div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-7)}
.res dt{color:var(--ink-soft)}
.res dd{margin:0;font-variant-numeric:tabular-nums}
.res .total{border-top:1px solid var(--hairline);padding-top:.6rem;margin-top:.2rem;font-family:var(--familia-cifra);font-weight:var(--peso-precio);font-size:var(--fs-9)}
.res .total dt{color:var(--ink)}

.item{display:grid;grid-template-columns:76px 1fr;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--hairline)}
.item .foto{border:1px solid var(--hairline);border-radius:var(--radio)}
.item-top{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start;flex-wrap:wrap}
.quitar{flex:none;border:0;background:transparent;color:var(--ink-faint);font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:.2rem 0;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.quitar:hover{color:var(--nude-600)}}

.aviso{background:var(--nude-50);border-block:1px solid var(--hairline);color:var(--ink-soft);padding:.55rem 1rem;font-size:var(--fs-3);text-align:center;letter-spacing:.06em;text-transform:uppercase}
.nota{background:var(--nude-50);border:1px solid var(--nude-100);border-radius:var(--radio);padding:.8rem .9rem;font-size:var(--fs-5);color:var(--ink-soft)}

.pie{background:var(--sunk);border-top:1px solid var(--hairline);padding:2rem 1rem 2.5rem;display:grid;gap:1.25rem;margin-top:2.5rem}

.franja{grid-column:1/-1;display:grid;gap:1.1rem;list-style:none;margin:0;padding:0 0 1.4rem;border-bottom:1px solid var(--hairline)}
@media (min-width:460px){.franja{grid-template-columns:repeat(2,minmax(0,1fr))}}
.franja li{display:flex;gap:.7rem;align-items:flex-start}
.franja li::marker{content:""}
.franja-ico{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--nude-50);color:var(--nude-600)}
.franja-ico svg{width:1.15rem;height:1.15rem}
.franja-txt{display:grid;gap:.1rem;min-width:0}
.franja-txt b{font-weight:500;color:var(--ink);font-size:var(--fs-6)}
.franja-txt span{color:var(--ink-soft);font-size:var(--fs-4)}

.pie-breve{margin-top:0;padding:1.6rem 1rem 2rem;gap:.75rem;justify-items:center;text-align:center}
.pie-breve p{margin:0;color:var(--ink-soft);font-size:var(--fs-6);max-width:30ch}
.pie-breve-links{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;justify-content:center}
.pie-breve-links a,.pie-breve-links button{display:flex;gap:.4rem;align-items:center;min-height:44px}
.pie a{color:var(--ink-soft);font-size:var(--fs-6)}

.pie-cols a,.pie-cols button{min-height:44px;width:100%;display:flex;align-items:center;gap:.4rem}
.pie-cols{display:grid}

.pie h2{margin:0 0 .5rem;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);font-weight:400}

.miga button,.pie button{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.miga button{color:var(--nude-600)}

.miga a,.miga button{padding-block:.45rem}

@media (pointer:coarse){
  .miga a,.miga button{position:relative}
  .miga a::after,.miga button::after{content:"";position:absolute;inset:0 -9px}
}
.pie button{color:var(--ink-soft);font-size:var(--fs-6)}
@media (hover:hover) and (pointer:fine){.miga button:hover,.pie button:hover{color:var(--nude-600);text-decoration:underline}}

.tonos-gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:.55rem}
.tono{border:1px solid var(--hairline);border-radius:var(--radio);background:var(--surface);padding:.45rem;cursor:pointer;display:grid;gap:.35rem;justify-items:center;text-align:center;transition:border-color var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){.tono:hover{border-color:var(--nude-300)}}
.tono[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.tono-quedan{font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-style:normal;text-decoration:none;line-height:1}

.tono s{width:100%;aspect-ratio:1;border-radius:999px;border:1px solid color-mix(in oklab,var(--ink) 28%,transparent);box-shadow:var(--shadow-tono);text-decoration:none}

.tono span{font-size:var(--fs-2);line-height:1.25;color:var(--ink-soft);max-width:100%;overflow-wrap:break-word}

.tonos-gr.sin-color .tono{padding:.7rem .5rem}
.tonos-gr.sin-color .tono[data-agotado="true"] span{text-decoration:line-through}
.tono[data-agotado="true"]{opacity:.45}
.tono[data-agotado="true"] s{position:relative}
.tono[data-agotado="true"] s::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 47%,color-mix(in oklab,var(--ink) 55%,transparent) 47%,color-mix(in oklab,var(--ink) 55%,transparent) 53%,transparent 53%)}

.rail-prod{display:flex;gap:.7rem;overflow-x:auto;padding:0 1rem .4rem;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:1rem}
.rail-prod::-webkit-scrollbar{display:none}
.rail-prod>*{flex:none;width:9.5rem;scroll-snap-align:start}

.repo{display:grid;gap:0;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio)}
.repo-fila{display:grid;grid-template-columns:40px 1fr auto;gap:.7rem;align-items:center;padding:.7rem .8rem;border-bottom:1px solid var(--hairline);text-align:left}
.repo-fila:last-child{border-bottom:0}
.repo-fila .mini{width:40px;height:40px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--hairline);display:block}
.mini-foto{border-bottom:0;border-radius:0}
.repo-nom{font-size:var(--fs-6);line-height:1.3}
.repo-meta{font-size:var(--fs-3);color:var(--ink-faint)}
.mas{width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radio-boton);background:var(--surface);cursor:pointer;font-size:var(--fs-9);color:var(--ink);display:grid;place-items:center}
@media (hover:hover) and (pointer:fine){.mas:hover{border-color:var(--ink);background:var(--nude-50)}}
.mas[data-en="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.vacio{display:grid;gap:.5rem;justify-items:center;text-align:center;padding:3.5rem 1.5rem;color:var(--ink-soft)}
.vacio-t{font-family:var(--display);font-size:var(--fs-10);line-height:1.2;color:var(--ink)}
.vacio-p{font-size:var(--fs-7);max-width:34ch;margin:0}
.vacio .btn{margin-top:.8rem}

.acc{border-top:1px solid var(--hairline)}
.acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0;border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--fs-7);color:var(--ink);min-height:48px}
.acc>button u{text-decoration:none;color:var(--ink-faint);font-size:var(--fs-9);line-height:1}
.acc-cuerpo{padding:0 0 1rem;font-size:var(--fs-6);color:var(--ink-soft)}

.ficha-sin-datos{margin:1.3rem 0 0;color:var(--ink-soft);font-size:var(--fs-6);line-height:1.55;border-left:1px solid var(--hairline);padding-left:.9rem}

input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--acento)}
.campo-marcado{outline:1px solid var(--acento);outline-offset:8px;border-radius:var(--radio)}
.campo-marcado:focus{outline-color:var(--acento)}

.legal p{margin:0 0 .7rem;line-height:1.6}
.legal p:last-child{margin-bottom:0}

.legal a:not(.btn){color:inherit;text-decoration:underline;text-underline-offset:2px}
.legal-accion{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.legal-nota{flex:1 1 100%;margin:0;font-size:var(--fs-6);color:var(--ink-soft)}

.legal-falta{color:var(--nude-600);font-style:italic}

.legal-legal{font-size:var(--fs-6);color:var(--ink-soft)}

/* ── public/tienda/estilos/ficha.css ─────────────────────────────────────── */
.cap-h{display:block}
.cap-n{
  display:block;
  font-family:var(--display);
  font-size:var(--fs-11);
  font-weight:var(--peso-seccion);
  line-height:1;
  color:var(--ink-soft);
  letter-spacing:var(--track-titular);
  margin-bottom:.35rem;
}

.sec-cap.sec-aparte{border-top-color:var(--tinte-filete)}

@media (min-width:901px){

  .cap-n{font-size:var(--fs-13)}
}

/* ── public/tienda/estilos/anchos.css ─────────────────────────────────────── */
.ap.esc{--marg:max(1.25rem,calc((100% - var(--maxw))/2 + 2rem))}
.ap.esc .pad,.ap.esc .rail,.ap.esc .rail-prod{padding-inline:var(--marg)}

.ap.esc .pad.angosto{padding-inline:min(var(--marg),1.25rem);margin-inline:auto}
.ap.esc .barra-bot{display:none}
.ap.esc .barra-top-in{grid-template-columns:auto 1fr auto auto auto;gap:clamp(.75rem,2.5vw,2rem);padding:.85rem var(--marg)}

.ap.esc .gr,.ap.esc .rail-prod{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.5vw,1.15rem)}
@media (max-width:1000px){.ap.esc .gr,.ap.esc .rail-prod{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ap.esc .rail-prod{display:grid;overflow:visible}
.ap.esc .rail-prod>*{width:auto}
.ap.esc .sec-h h2{font-size:var(--fs-section)}
.ap.esc .card-nom{font-size:var(--fs-8)}
.ap.esc .card-precio{font-size:var(--fs-price-card)}
.ap.esc .compacta{max-width:44rem}

.ap.esc .cierre{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.ap.esc .dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem;align-items:start}

@media (min-width:901px){
  .ap.esc .galeria{--riel:3.6rem;grid-template-columns:var(--riel) minmax(0,1fr);gap:.7rem}
  .ap.esc .galeria-plato{grid-column:2;grid-row:1;align-self:start}
  .ap.esc .galeria-minis{grid-column:1;grid-row:1;flex-direction:column;justify-content:start;overflow:visible}
  .ap.esc .galeria-mini{width:100%;aspect-ratio:auto;flex:1 1 0;min-height:44px;max-height:var(--riel)}
}
.ap.esc .checkout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:start}

.ap.esc .accion{position:static;bottom:auto;border:0;box-shadow:none;padding:0;padding-inline:var(--marg);background:transparent}

.ap.esc .hoja{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(30rem,92vw);border-radius:var(--radio);border:1px solid var(--border);animation:fade .18s ease}
.ap.esc .nav-esc{display:flex;gap:1.4rem;justify-self:center}
.ap.esc .busca-inline{padding:0;width:100%;max-width:34rem;justify-self:center}
.ap.esc .busca-inline>svg{left:.9rem}
.ap.esc .busca-inline .busca-x{right:.3rem}
.ap.esc .busca-inline input{min-height:42px;padding:.6rem 2.6rem .6rem 2.4rem}
.ap.esc .nav-esc button{border:0;background:transparent;cursor:pointer;font-size:var(--fs-nav);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);padding:.4rem 0;border-bottom:1px solid transparent;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.ap.esc .nav-esc button:hover{color:var(--ink)}}
.ap.esc .nav-esc button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--nude-300)}

.ap.esc .pie{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:clamp(1.25rem,3vw,2rem);padding:3rem var(--marg)}
.ap.esc .pie-cats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}

.ap.esc .pie-breve{grid-template-columns:1fr;padding:2rem var(--marg) 2.5rem}
.nav-esc{display:none}

@media (max-width:820px){

  .ap.esc .barra-top-in{grid-template-columns:1fr auto auto auto;grid-template-areas:"marca sw buscar pedido" "nav nav nav nav";row-gap:.4rem}
  .ap.esc .barra-top-in>:first-child{grid-area:marca}
  .ap.esc .nav-esc{grid-area:nav;justify-self:stretch;overflow-x:auto;gap:1.1rem;scrollbar-width:none;padding-bottom:.15rem}
  .ap.esc .nav-esc::-webkit-scrollbar{display:none}
  .ap.esc .nav-esc button{white-space:nowrap}
}

@media (max-width:479px){
  .ap.esc .nav-esc{gap:.62rem}
  .ap.esc .nav-esc button{letter-spacing:.035em}
  .ap.esc .busca-inline{grid-area:nav;max-width:none}
}
@media (max-width:560px){
  .ap.esc{--marg:1rem}
  .ap.esc .gr{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.7rem}
  .ap.esc .barra-top-in{gap:.35rem}
  .ap.esc .pie{padding:2.25rem var(--marg)}
}

@media (max-width:900px){
  .ap.esc .dos{grid-template-columns:minmax(0,1fr);gap:1.5rem}
}

@media (min-width:901px){
  .ap.esc .sec-cap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem;
    align-items:start;padding-inline:var(--marg)}
  .ap.esc .sec-cap>.pad{padding-inline:0}
}

.ficha-alto{display:contents}
@media (min-width:981px){
  .ap.esc .ficha-alto:not(.sola){display:flow-root;padding-inline:var(--marg)}
  .ap.esc .ficha-alto:not(.sola)>.dos{display:contents}
  .ap.esc .ficha-alto:not(.sola)>.dos>.foto,
  .ap.esc .ficha-alto:not(.sola)>.dos>.galeria{float:left;width:calc((100% - 2.5rem)*5/11);margin:0}
  .ap.esc .ficha-alto:not(.sola)>.dos>.ficha-col,
  .ap.esc .ficha-alto:not(.sola)>.accion{margin-left:calc((100% - 2.5rem)*5/11 + 2.5rem);padding-inline:0}
  .ap.esc .ficha-alto:not(.sola)>.accion{margin-top:1.6rem}
  .ap.esc .ficha-sola~.accion{max-width:44rem;margin-inline:auto;padding-inline:min(var(--marg),1.25rem)}
}
@media (max-width:980px){
  .ap.esc .checkout{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .ap.esc .accion{position:sticky;bottom:0;border-top:1px solid var(--hairline);padding:.8rem var(--marg);background:var(--surface)}
}

@media (min-width:480px) and (max-width:899px){

  .hero-escena{aspect-ratio:16/10;max-height:20rem}

  .hero-foto{object-position:50% 50%}
}

@media (min-width:900px){

  .ap.esc .hero{--hueco:10.5rem;
    display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;padding-left:var(--marg);
    height:clamp(26rem,calc(100svh - var(--hueco)),38rem)}

  .ap.esc .hero .hero-escena{grid-area:1/1;justify-self:end;width:62%;height:100%;padding:0;aspect-ratio:auto}

  .ap.esc .rubros{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem;overflow:visible}
  .ap.esc .rubro{width:auto}

  .ap.esc .rubro{gap:.7rem;padding:.6rem 0}
  .ap.esc .rubro-ico{width:5.5rem;height:5.5rem}
  .ap.esc .rubro-ico svg{width:2rem;height:2rem}

  .ap.esc .rubro-nom{font-size:var(--fs-6)}

  .ap.esc .franja{grid-template-columns:repeat(4,1fr);gap:1.4rem}

  .ap.esc .dos>.foto{aspect-ratio:1}

  .ap.esc .hero .hero-escena{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to top,transparent 0,#000 12%);
    mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to top,transparent 0,#000 12%);
    -webkit-mask-composite:source-in;mask-composite:intersect}

  .ap.esc .hero .orilla{position:absolute;left:0;right:0;bottom:0;z-index:0}

  .ap.esc .hero .hero-escena{z-index:1}

  .ap.esc .hero .hero-txt{grid-area:1/1;align-content:center;max-width:min(34rem,calc(38% - 4rem));margin-top:0;
    padding-block:clamp(1.25rem,6svh,4rem);padding-inline:0;gap:1.2rem}

  .ap.esc .hero-p{font-size:var(--fs-10);max-width:56ch}

  .ap.esc .hero-cta{max-width:44ch;padding-top:1.4rem}
  .ap.esc .sec-sub{max-width:72ch}
}

@media (max-width:560px){
  .escenario{padding:0;place-items:stretch}
  .enmarcado{width:100%}
  .enmarcado [data-om-starter="ios-frame"]{width:100%!important;height:100svh!important;border-radius:0!important;box-shadow:none!important}
  .capa{border-radius:0}
}

@media (min-width:561px) and (max-height:940px){
  .escenario{padding-block:1rem}
}

/* ── public/tienda/estilos/pedido.css ─────────────────────────────────────── */
.carro{display:grid;gap:1.4rem;padding-top:1.3rem}
.ap.esc .carro{grid-template-columns:minmax(0,1.55fr) minmax(17rem,.8fr);gap:clamp(1.5rem,3.5vw,3.2rem);align-items:start;padding-top:1.8rem}
.carro-col{min-width:0}
.carro-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--hairline)}
.carro-h h1{margin:0;font-size:var(--fs-12);line-height:1.1}
.ap.esc .carro-h h1{font-size:var(--fs-14)}
.carro-cuenta{font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.carro-lista{margin-top:.2rem}
.carro-fila .item{transition:background .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.carro-fila:hover .item{background:var(--nude-50)}}
.carro-lado{display:grid;gap:1rem;min-width:0}

@media (min-width:981px){.ap.esc .carro-lado{position:sticky;top:7rem}}
.carro-tarjeta{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);padding:1.05rem;display:grid;gap:.9rem;box-shadow:var(--shadow)}
.carro-tarjeta .res{border:0;padding:0;background:transparent}
.carro-detalle{list-style:none;margin:0;padding:.85rem 0 0;border-top:1px solid var(--hairline);display:grid;gap:.45rem;font-size:var(--fs-5);color:var(--ink-soft)}
.carro-detalle li{display:flex;justify-content:space-between;gap:1rem}
.carro-cta{display:grid;gap:.6rem}

.carro-aviso{font-size:var(--fs-7);color:var(--ink)}
.falta{display:grid;gap:.35rem;font-size:var(--fs-7);color:var(--ink);text-align:left}
.falta b{font-weight:500}
.falta ul{margin:0;padding:0;list-style:none;display:grid;gap:.25rem}
.falta li{display:flex;gap:.5rem;line-height:1.35}
.falta li::before{content:"·";color:var(--ink-faint)}
.carro-garantias{list-style:none;margin:0;padding:.85rem 0 0;border-top:1px solid var(--hairline);display:grid;gap:.5rem;font-size:var(--fs-5);color:var(--ink-soft)}
.carro-garantias li{display:flex;gap:.5rem;align-items:flex-start}
.carro-garantias svg{color:var(--nude-400);flex:none;margin-top:3px}
.meta-envio{display:grid;gap:.4rem}
.meta-barra{height:4px;border-radius:999px;background:var(--sunk);overflow:hidden}
.meta-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--nude-300),var(--nude-600));transition:width .75s var(--sal)}
.meta-envio span{font-size:var(--fs-4);color:var(--ink-soft)}
.meta-envio.ok span{color:var(--ok)}
.meta-envio.ok .meta-barra i{background:var(--ok)}

@media (max-width:980px){
  .ap.esc .carro{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .ap.esc .checkout .carro-cta,.ap.esc .checkout .carro-tarjeta>.btn{display:none}
}

.accion-total{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:var(--fs-6)}
.accion-total span{color:var(--ink-soft)}
.accion-total b{font-family:var(--familia-cifra);font-weight:var(--peso-precio);font-size:var(--fs-9)}
.ap.movil .accion-carro .btn,.ap.movil .accion-checkout .btn{width:100%}
.ap.esc .accion-checkout{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.4rem}
.ap.esc .accion-carro{display:none}
.ap.esc .accion-total{justify-content:flex-start}
.ap.esc .accion-carro .btn,.ap.esc .accion-checkout .btn{min-width:16rem;margin-left:auto}

@media (min-width:981px){.ap.esc .accion-checkout{display:none}}

.ap.movil .carro-cta,.ap.movil .carro-tarjeta>.btn{display:none}

.ayuda-wrap{padding-top:1.5rem;max-width:40rem;margin-inline:auto}

.ap.esc .ayuda-wrap{padding-inline:min(var(--marg),1.25rem)}

.acciones-ayuda{display:grid;gap:.6rem;margin-top:2rem}
@media (min-width:720px){
  .acciones-ayuda{grid-auto-flow:column;justify-content:start;gap:.7rem}
}
.contacto-wrap{max-width:36rem}
@media (min-width:900px){.contacto-wrap{max-width:52rem}}
.ayuda-txt{min-width:0}
.ayuda-foto{margin:1.4rem 0 0;overflow:hidden;border-radius:var(--radio);border:1px solid var(--hairline);background:var(--nude-50);aspect-ratio:4/3}
.ayuda-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block;transition:transform 1s var(--sal)}
@media (hover:hover) and (pointer:fine){.ayuda-foto:hover img{transform:scale(1.03)}}
@media (min-width:900px){
  .ayuda-wrap{max-width:56rem}
  .ayuda-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
  .ayuda-dos .ayuda-foto{margin:0;aspect-ratio:4/5;order:2}
  .ayuda-dos~*{max-width:40rem}
}

.sec-aparte{margin-top:1.6rem;padding-top:2.6rem;border-top:1px solid var(--hairline)}

.sugeridos{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--hairline)}
.ap.esc .sec-aparte{margin-top:2.2rem;padding-top:3.2rem}

.vista>.rail-caja:first-child{padding-top:.9rem}
.ap.esc .vista>.rail-caja:first-child{padding-top:1.6rem}

.comprobante{margin-top:1.2rem;border:1px solid var(--border);border-radius:var(--radio);background:var(--surface);padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.comprobante-nro{font-family:var(--familia-cifra);font-weight:var(--peso-precio);font-size:var(--fs-14);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.comprobante-meta{margin:.35rem 0 0;color:var(--ink-faint);font-size:var(--fs-5);font-variant-numeric:tabular-nums}
.comprobante-copiar{flex-shrink:0}

@media (max-width:379px){.comprobante{flex-direction:column;align-items:flex-start;gap:.7rem}}

/* ── public/tienda/estilos/movimiento.css ─────────────────────────────────────── */
@keyframes entra-vista{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes entra-vista-sobrio{from{opacity:0}to{opacity:1}}
.vista{animation:entra-vista .22s var(--sal) backwards}
.ap[data-mov="sobrio"] .vista{animation-name:entra-vista-sobrio;animation-duration:.16s}

@keyframes cambio{from{opacity:.55}to{opacity:1}}
.cambia{animation:cambio .14s var(--ease) backwards}

:where(.rev-on) .rev{opacity:0;transform:translateY(16px);transition:opacity .6s var(--sal),transform .6s var(--sal);transition-delay:calc(var(--i,0)*70ms);will-change:opacity,transform}
.rev.vis{opacity:1;transform:none;will-change:auto}

:where(.rev-on) .rev-esc{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s var(--sal),transform .55s var(--sal);transition-delay:calc(var(--i,0)*70ms)}
.rev-esc.vis{opacity:1;transform:none}

.hero{position:relative;overflow:hidden;background:var(--nude-50);display:grid}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;background:radial-gradient(60% 55% at 78% 18%,var(--nude-100),transparent 70%),radial-gradient(45% 45% at 8% 90%,var(--nude-50),transparent 72%);animation:deriva 24s ease-in-out infinite alternate;pointer-events:none}
.hero>*{position:relative}
@keyframes deriva{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.08)}}

.hero .h1-hero .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero .h1-hero .w i{display:inline-block;font-style:inherit;animation:palabra .6s var(--sal) both}
@keyframes palabra{from{transform:translateY(108%)}to{transform:translateY(0)}}
@keyframes sube-txt{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}

.btn{position:relative;overflow:hidden;isolation:isolate;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .2s var(--sal),box-shadow .25s var(--sal)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--nude-600);transform:translateY(101%);transition:transform .32s var(--sal)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--ink)}}
@media (hover:hover) and (pointer:fine){.btn:hover::after{transform:translateY(0)}}
.btn-ghost::after{background:var(--nude-100)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--ink);background:transparent}}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn:disabled:hover{transform:none;box-shadow:none}}
.btn:disabled::after{display:none}

.card .foto{transition:background .3s var(--ease)}
.card .foto img{transition:transform .5s var(--sal)}
@media (hover:hover) and (pointer:fine){.card:hover .foto img{transform:scale(1.07)}}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px)}}
.card .card-accion,.card .btn{transition:background var(--dur) var(--ease),transform .2s var(--sal)}

.foto img{transition:transform .5s var(--sal),clip-path 1s var(--sal)}

.repo-fila{transition:background var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){.repo-fila:hover{background:var(--nude-50)}}
.repo-fila .mini .foto{transition:transform .35s var(--sal)}
@media (hover:hover) and (pointer:fine){.repo-fila:hover .mini .foto{transform:scale(1.08)}}
.mas{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .2s var(--sal)}
@media (hover:hover) and (pointer:fine){.mas:hover{transform:scale(1.08)}}
.mas:active{transform:scale(.94)}

.chip{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform .2s var(--sal)}
.chip:active{transform:scale(.96)}
.ver-mas{transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tono s{transition:transform .3s var(--sal)}
@media (hover:hover) and (pointer:fine){.tono:hover s{transform:scale(1.06)}}
.ico-btn svg{transition:transform .25s var(--sal)}
.ico-btn:active svg{transform:scale(.9)}
.globo{animation:pop .3s var(--sal)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

.card-accion.pulsado{animation:pop .3s var(--sal)}

@keyframes ok-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ok-entra{animation:ok-entra .24s var(--sal) backwards}

.ok-tilde{animation:ok-disco .26s var(--sal) backwards}
@keyframes ok-disco{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.ok-tilde svg{animation:ok-traza .4s var(--sal) .1s backwards}
@keyframes ok-traza{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ── public/tienda/estilos/superficies.css ─────────────────────────────────────── */
.sentinela{height:1px;flex:none;margin-bottom:-1px}
.barra-top,.barra-bot,.accion{transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
@supports (backdrop-filter:blur(6px)) and (background:color-mix(in oklab,red 50%,transparent)){

  .ap[data-barras="vidrio"] .barra-bot,.ap[data-barras="vidrio"] .accion{background:color-mix(in oklab,var(--surface) 90%,transparent);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}
  .ap[data-barras="vidrio"][data-pegado="true"] .barra-top{background:color-mix(in oklab,var(--surface) 74%,transparent);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);border-bottom-color:color-mix(in oklab,var(--nude-300) 60%,transparent);box-shadow:0 12px 34px -28px rgba(17,17,17,.75)}
  .ap[data-barras="vidrio"][data-pegado="true"] .busca input{background:color-mix(in oklab,var(--surface) 62%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

.ap[data-barras="vidrio"][data-pegado="true"] .barra-top::after{content:"";position:absolute;inset:auto 0 -1px;height:1px;background:linear-gradient(90deg,transparent,var(--nude-300) 22%,var(--nude-300) 78%,transparent);opacity:.9}
.barra-top{position:sticky}

@media (prefers-reduced-motion:reduce){
  .vista,.toast,.cambia,.globo,.ok-tilde,.ok-tilde svg,.ok-entra,
  .card-accion.pulsado{animation:none!important}

  .ok-tilde svg{clip-path:none}
  .rev,.rev-esc{opacity:1;transform:none;transition:none}
  .ayuda-foto:hover img{transform:none}

  .hero::before,.hero-escena .gloss,.hero .h1-hero .w i,
  .holo::before,
  .hero-p,.hero-cta,.globo{animation:none!important}
  .holo{display:none}

  .rubro:hover{transform:none}
  .hero .h1-hero .w{overflow:visible}

  .btn:hover,.btn:active,.card:hover,.card:hover .foto img,
  .repo-fila:hover .mini .foto,.mas:hover,.mas:active,.chip:active,
  .tono:hover s,.ico-btn:active svg,.step button:active:not(:disabled),
  .card-accion:active,.ayuda-foto:hover img{transform:none!important}

  .btn::after{transition:none!important}

  .saltar{transition:none!important}
}

@media (pointer:coarse){

  .sw-tema::after{content:"";position:absolute;inset:-9px -4px}
  .ver-mas,.ap.esc .nav-esc button{position:relative}
  .ver-mas::after{content:"";position:absolute;inset:-13px -6px}
  .ap.esc .nav-esc button::after{content:"";position:absolute;inset:-6px 0}

  .card-accion,.mas,.chip,.quitar,.toast button{position:relative}
  .quitar::after{content:"";position:absolute;inset:-9px -10px}
  .toast button::after{content:"";position:absolute;inset:-11px -8px}
  .busca-x::after{content:"";position:absolute;inset:-5px}
  .card-accion::after,.mas::after{content:"";position:absolute;inset:-2px}
  .chip::after{content:"";position:absolute;inset:-5px 0}
}

@media (max-width:339px){
  .ap.esc .barra-top-in::after{content:"";grid-area:nav;justify-self:end;align-self:stretch;width:2.2rem;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}
}

.sw-tema{position:relative;flex:none;width:52px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radio-boton);background:var(--sunk);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.sw-tema[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.sw-pista{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 6px;color:var(--ink-faint)}
.sw-tema[aria-checked="true"] .sw-pista{color:var(--paper)}
.sw-bolita{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .26s var(--sal,cubic-bezier(.22,.72,.24,1))}
.sw-tema[aria-checked="true"] .sw-bolita{transform:translateX(24px);background:var(--paper)}

.cargando-pantalla{min-height:60vh;display:grid;place-content:center;justify-items:center;
  gap:.9rem;padding:3rem 1.5rem;text-align:center}
.cargando-marca{color:var(--ink-faint);animation:respira 1.8s var(--ease) infinite}
.cargando-t{font-size:var(--fs-9)}
.cargando-p{color:var(--ink-soft);font-size:var(--fs-7);max-width:34ch}
@keyframes respira{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cargando-marca{animation:none;opacity:.7}}

.esq{animation:esq-late 1.2s var(--ease) infinite;pointer-events:none}
@keyframes esq-late{0%,100%{opacity:.72}50%{opacity:1}}

.esq-caja{display:block;background:var(--nude-200)}

.esq-l{display:block;background:var(--nude-200);border-radius:var(--radio);
  width:var(--w,100%);height:var(--alto,.72rem)}

.esq .esq-txt{gap:.5rem}
.esq-btn{display:block;width:10rem;height:2.6rem;background:var(--nude-300);border-radius:var(--radio-boton)}
@media (prefers-reduced-motion:reduce){.esq{animation:none;opacity:.8}}

.mapa-zona{--mapa-400:url("/tienda/img/zona-centro-400.webp");--mapa-800:url("/tienda/img/zona-centro-800.webp");--mapa-1000:url("/tienda/img/zona-centro.webp");display:block;width:100%;aspect-ratio:500/313;border-radius:var(--radio);border:1px solid var(--hairline);background:var(--sunk) center/cover no-repeat;background-image:image-set(var(--mapa-400) 1x,var(--mapa-800) 2x,var(--mapa-1000) 3x)}
@media (min-width:561px){.mapa-zona{background-image:image-set(var(--mapa-800) 1x,var(--mapa-1000) 2x)}}
:root[data-theme="dark"] .mapa-zona{--mapa-400:url("/tienda/img/zona-centro-oscuro-400.webp");--mapa-800:url("/tienda/img/zona-centro-oscuro-800.webp");--mapa-1000:url("/tienda/img/zona-centro-oscuro.webp")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mapa-zona{--mapa-400:url("/tienda/img/zona-centro-oscuro-400.webp");--mapa-800:url("/tienda/img/zona-centro-oscuro-800.webp");--mapa-1000:url("/tienda/img/zona-centro-oscuro.webp")}}

.mapa-marco{position:relative}
.mapa-placa{position:absolute;left:53%;top:30%;translate:-50% -50%;margin:0;padding:.5rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radio);box-shadow:var(--shadow-flotante);font-size:var(--fs-8);font-weight:500;color:var(--ink);white-space:nowrap;pointer-events:none}
.mapa-credito{margin:.4rem 0 0;font-size:var(--fs-4);color:var(--ink-faint)}
.mapa-credito a{color:inherit}