/* Tienda pública. Los colores base llegan desde la configuración del sistema (variables en :root). */
:root{
  --tinta-suave: color-mix(in srgb, var(--texto) 68%, var(--fondo));
  --linea: color-mix(in srgb, var(--primario) 14%, var(--fondo));
  --tinte: color-mix(in srgb, var(--primario) 7%, var(--superficie));
  --tinte-fuerte: color-mix(in srgb, var(--primario) 16%, var(--superficie));
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --radio: 18px;
  --wa: #1FA855;
  --burbuja: #D9FDD3;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 16px/1.55 var(--sans)}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--primario-oscuro)}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--superficie);padding:8px 12px;z-index:50}
.saltar:focus{left:8px}

/* Barra superior */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:10px clamp(16px,4vw,48px);background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--primario-oscuro);font:500 1.45rem/1 var(--serif);letter-spacing:.06em}
.marca img{width:42px;height:42px;object-fit:contain}
.boton-bolsa{display:flex;align-items:center;gap:8px;border:1.5px solid var(--texto);background:transparent;
  border-radius:999px;padding:8px 14px;font-weight:600;cursor:pointer}
.boton-bolsa:hover{background:var(--texto);color:var(--fondo)}
.contador{background:var(--primario);color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.8rem;padding:0 6px}

/* Portada: el logo de la marca es la protagonista */
.portada{display:grid;justify-items:center;text-align:center;gap:clamp(28px,4vw,40px);
  padding:clamp(32px,5vw,56px) clamp(16px,4vw,48px) clamp(24px,4vw,40px);max-width:1320px;margin:0 auto}
.portada-texto{display:grid;justify-items:center;gap:clamp(24px,3.5vw,36px)}
.portada-logo{margin:0;line-height:0}
/* Tamaño contenido: se ve completo junto al botón sin ocupar toda la pantalla */
.portada-logo img{width:clamp(180px,22vw,290px);max-height:44vh;height:auto;object-fit:contain}
.acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 24px;
  font-weight:500;letter-spacing:.02em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .15s,color .15s}
.btn-primario{background:var(--primario);color:#fff}
.btn-primario:hover{background:var(--primario-oscuro)}
.btn-linea{border-color:var(--texto);color:var(--texto);background:transparent}
.btn-linea:hover{background:var(--texto);color:var(--fondo)}
.btn-whatsapp{background:var(--wa);color:#fff;width:100%;padding:14px 20px;font-size:1.05rem}
.btn-whatsapp:hover{background:#178a45}
.btn[disabled]{opacity:.6;cursor:progress}

.portada-promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center;gap:12px;width:100%;text-align:left;margin-top:10px}
.promo-mini{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--superficie);
  border-radius:var(--radio);padding:10px;text-decoration:none;color:inherit;border:1px solid var(--linea)}
.promo-mini img,.promo-mini .sin-img{width:96px;height:96px;border-radius:12px;object-fit:cover;background:var(--tinte-fuerte)}
.promo-mini h3{margin:0;font:500 1.2rem/1.15 var(--serif)}
.promo-mini p{margin:4px 0 0;font-size:.9rem;color:var(--tinta-suave)}
.etiqueta{display:inline-block;background:var(--acento);color:var(--texto);font-weight:700;font-size:.85rem;
  padding:2px 10px;border-radius:999px;margin-bottom:6px}

/* Tienda */
.tienda,.promos{max-width:1320px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,48px)}
.tienda-cabecera{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
h2{font:500 clamp(2rem,4.5vw,3rem)/1.05 var(--serif);margin:0;color:var(--primario-oscuro)}
.buscador{display:flex;align-items:center;gap:8px;background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:999px;padding:0 16px;min-width:min(340px,100%);flex:0 1 340px}
.buscador:focus-within{border-color:var(--primario)}
.buscador input{border:0;background:transparent;padding:11px 0;width:100%;outline:none}

/* Muestras de categoría: como los tonos de un labial */
.muestras{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:thin;scroll-snap-type:x proximity}
.muestra{flex:0 0 auto;display:grid;justify-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0;
  width:84px;scroll-snap-align:start;font-size:.88rem;font-weight:500;color:var(--tinta-suave)}
.muestra .disco{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--tinte-fuerte);
  box-shadow:0 0 0 2px var(--fondo),0 0 0 3px var(--linea);display:grid;place-items:center;
  font:400 1.7rem/1 var(--serif);color:var(--primario-oscuro);transition:box-shadow .15s,transform .15s}
.muestra .disco img{width:100%;height:100%;object-fit:cover}
.muestra span:last-child{text-align:center;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
.muestra:hover .disco{transform:scale(1.04)}
.muestra[aria-pressed="true"]{color:var(--texto);font-weight:700}
/* La categoría elegida lleva un aro oro rosa, como el contorno de la mariposa */
.muestra[aria-pressed="true"] .disco{box-shadow:0 0 0 3px var(--fondo),0 0 0 5px var(--acento)}
.disco.todo{background:var(--superficie)}
.disco.todo img{width:74%;height:74%;object-fit:contain}

.resultado{color:var(--tinta-suave);margin:6px 0 18px;font-size:.95rem}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(12px,2vw,24px)}
.producto{display:flex;flex-direction:column;background:var(--superficie);border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--linea)}
.producto-img{aspect-ratio:1;background:var(--tinte);border:0;padding:0;cursor:zoom-in;display:grid;place-items:center;
  font:400 3rem/1 var(--serif);color:var(--primario)}
.producto-img img{width:100%;height:100%;object-fit:cover}
.producto-info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.producto-marca{font-size:.82rem;color:var(--tinta-suave);margin:0}
.producto h3{font:600 1rem/1.3 var(--sans);margin:0 0 6px}
.producto h3 button{all:unset;cursor:pointer}
.producto h3 button:hover{text-decoration:underline}
.producto-pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.precio{font:600 1.25rem/1 var(--serif);color:var(--primario-oscuro);font-variant-numeric:tabular-nums}
.destacado-marca{position:relative}
.destacado-marca::after{content:"Favorito";position:absolute;top:10px;left:10px;background:var(--superficie);
  color:var(--primario-oscuro);font:600 .75rem/1 var(--sans);padding:5px 9px;border-radius:999px}
.agregar{border:0;background:var(--primario);color:#fff;border-radius:999px;padding:9px 14px;font-weight:600;cursor:pointer;white-space:nowrap}
.agregar:hover{background:var(--primario-oscuro)}
.agotado{font-size:.85rem;color:var(--tinta-suave)}
.paso{display:inline-flex;align-items:center;border:1.5px solid var(--primario);border-radius:999px;overflow:hidden}
.paso button{border:0;background:transparent;width:34px;height:34px;font-size:1.15rem;cursor:pointer;color:var(--primario-oscuro)}
.paso button:hover{background:var(--tinte)}
.paso output{min-width:24px;text-align:center;font-weight:700}
.vacio{grid-column:1/-1;padding:40px 0;color:var(--tinta-suave)}
.vacio button{margin-top:10px}

/* Promociones */
.promos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:22px}
.promo{background:var(--superficie);border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);scroll-margin-top:80px}
.promo:target{box-shadow:0 0 0 3px var(--primario)}
.promo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.promo-cuerpo{padding:16px 18px 18px}
.promo h3{font:500 1.5rem/1.1 var(--serif);margin:0 0 6px}
.promo p{margin:0 0 10px;color:var(--tinta-suave)}
.promo .vigencia{font-size:.85rem}

/* Fidelidad */
.fidelidad{max-width:1320px;margin:24px auto 0;padding:clamp(24px,4vw,44px) clamp(16px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  background:var(--primario-oscuro);color:#fff;border-radius:0}
@media (min-width:1360px){.fidelidad{border-radius:28px}}
.fidelidad h2{color:#fff;margin-bottom:10px}
.fidelidad p{margin:0 0 6px;max-width:52ch}
.fidelidad .pequeno{opacity:.8;font-size:.92rem}
.sellos-demo{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,40px);gap:10px}
.sellos-demo li{width:40px;height:40px;border-radius:50%;border:2px dashed color-mix(in srgb,#fff 55%,transparent)}
.sellos-demo li.lleno{background:var(--acento);border:2px solid var(--acento)}

/* Pie */
.pie{max-width:1320px;margin:0 auto;padding:40px clamp(16px,4vw,48px) 110px;display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;color:var(--tinta-suave);font-size:.95rem}
.pie strong{font:500 1.3rem var(--serif);color:var(--primario-oscuro);letter-spacing:.04em}
.pie p{margin:4px 0 0}
.pie ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}

/* Barra flotante móvil */
.bolsa-flotante{position:fixed;left:12px;right:12px;bottom:12px;z-index:25;display:flex;align-items:center;gap:12px;
  justify-content:space-between;background:var(--texto);color:var(--fondo);border:0;border-radius:999px;
  padding:14px 20px;font-weight:600;cursor:pointer;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--texto) 60%,transparent)}
.bolsa-flotante strong{font:600 1.15rem var(--serif)}
@media (min-width:760px){.bolsa-flotante{display:none!important}}

/* Diálogos */
dialog{border:0;padding:0;color:var(--texto);background:var(--superficie)}
dialog::backdrop{background:color-mix(in srgb,var(--texto) 45%,transparent)}
.cerrar{border:0;background:var(--tinte);width:40px;height:40px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer}
.detalle{width:min(880px,calc(100% - 24px));border-radius:24px;display:none;grid-template-columns:1fr 1fr;position:relative}
.detalle[open]{display:grid}
.detalle .cerrar{position:absolute;top:12px;right:12px;z-index:1}
.detalle-img{background:var(--tinte);aspect-ratio:1;display:grid;place-items:center;font:400 5rem var(--serif);color:var(--primario)}
.detalle-img img{width:100%;height:100%;object-fit:cover}
.detalle-info{padding:36px 28px 28px;display:flex;flex-direction:column;gap:8px}
.detalle-info h3{font:500 2rem/1.1 var(--serif);margin:0;color:var(--primario-oscuro)}
.detalle-marca{margin:0;color:var(--tinta-suave)}
.detalle-precio{font:600 1.6rem var(--serif);color:var(--primario-oscuro);margin:4px 0}
.detalle-desc{white-space:pre-line;color:var(--tinta-suave);margin:0 0 12px}

.bolsa{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(460px,100%);display:none;flex-direction:column}
.bolsa[open]{display:flex;animation:entra .22s ease-out}
@keyframes entra{from{transform:translateX(30px);opacity:0}}
.bolsa-cab{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--linea)}
.bolsa-cab h2{font-size:2rem}
.bolsa-cuerpo{overflow-y:auto;padding:8px 20px 24px;flex:1}
.bolsa-items{list-style:none;margin:0;padding:0}
.bolsa-items li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea)}
.bolsa-items .mini{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--tinte);display:grid;place-items:center;
  font:400 1.4rem var(--serif);color:var(--primario)}
.bolsa-items .nombre{font-weight:600;line-height:1.25}
.bolsa-items .sub{font-size:.88rem;color:var(--tinta-suave)}
.bolsa-items .lado{display:grid;justify-items:end;gap:6px}
.bolsa-vacia{padding:40px 0;text-align:left}
.bolsa-form{display:grid;gap:12px;margin-top:16px}
.bolsa-form label{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.bolsa-form input:not([type=checkbox]),.bolsa-form textarea{border:1.5px solid var(--linea);border-radius:12px;padding:10px 12px;background:var(--fondo);font-weight:400}
.bolsa-form input:focus,.bolsa-form textarea:focus{border-color:var(--primario);outline:none}
.bolsa-form .check{display:flex;align-items:center;gap:8px;font-weight:500}
.bolsa-form .check input{width:18px;height:18px;accent-color:var(--primario)}
.opcional{font-weight:400;color:var(--tinta-suave)}
.total-linea{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0 8px}
.total-linea strong{font:600 1.8rem var(--serif);color:var(--primario-oscuro)}
.vista-mensaje{background:#EFE7DE;border-radius:14px;padding:12px}
.vista-titulo{margin:0 0 8px;font-size:.82rem;color:#6b5f55}
.burbuja{background:var(--burbuja);color:#111b21;border-radius:10px 2px 10px 10px;padding:8px 10px;margin-left:12%;
  font-size:.88rem;white-space:pre-wrap;line-height:1.4;max-height:220px;overflow:auto;position:relative}
.error{color:#B3261E;background:#FDECEA;padding:8px 12px;border-radius:10px;margin:0}

/* Aviso de cookies */
.aviso-cookies{position:fixed;z-index:30;left:12px;right:12px;bottom:12px;max-width:560px;margin-left:auto;
  background:var(--superficie);border:1px solid var(--linea);border-radius:18px;padding:16px 18px;display:flex;
  gap:16px;align-items:center;box-shadow:0 16px 40px -18px color-mix(in srgb,var(--texto) 50%,transparent)}
.aviso-cookies p{margin:0;font-size:.92rem}
.aviso-cookies .btn{flex:0 0 auto}

@media (max-width:900px){
  .portada{grid-template-columns:1fr}
  .detalle[open]{grid-template-columns:1fr;max-height:92dvh;overflow:auto}
  .detalle-img{aspect-ratio:4/3}
}
@media (max-width:620px){
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .producto-info{padding:10px}
  .producto-pie{flex-direction:column;align-items:stretch}
  .agregar{width:100%}
  .paso{justify-content:space-between}
  .fidelidad{grid-template-columns:1fr}
  .sellos-demo{grid-template-columns:repeat(5,32px)}
  .sellos-demo li{width:32px;height:32px}
  .aviso-cookies{flex-direction:column;align-items:stretch;bottom:80px}
  .boton-bolsa span:not(.contador){display:none}
  .bolsa{height:92dvh;margin:auto 0 0;width:100%;max-width:100%;border-radius:22px 22px 0 0}
  @keyframes entra{from{transform:translateY(40px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}