:root{
  --oliva:#3F5233;
  --oliva-osc:#2F3E26;
  --terracota:#B8683F;
  --bambu:#D9C3A0;
  --bambu-claro:color-mix(in srgb, var(--bambu) 45%, var(--crema));
  --crema:#F5EFE6;
  --blanco:#FFFCF7;
  --texto:#2B3324;
  --suave:#6B6A5C;
  --linea:#E6DCCB;
  --titulo:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cuerpo:"Josefin Sans", "Segoe UI", system-ui, sans-serif;
  --radio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--texto);font-family:var(--cuerpo);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titulo);font-weight:600;line-height:1.1;margin:0;color:var(--oliva)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.95rem 1.6rem .8rem;font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s}
.btn-verde{background:var(--oliva);color:var(--crema)}
.btn-verde:hover{background:var(--oliva-osc)}
.btn-linea{background:transparent;color:var(--oliva);border-color:var(--oliva)}
.btn-linea:hover{background:var(--oliva);color:var(--crema)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ancho{width:100%}

/* Barra superior */
.barra{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--crema) 94%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.barra-in{max-width:1180px;margin:auto;padding:.8rem 1.25rem;display:flex;align-items:center;gap:1.5rem}
.logo img{height:42px;width:auto}
.menu{margin-left:auto;display:flex;gap:1.6rem}
.menu a{text-decoration:none;font-size:.95rem;padding-top:3px}
.menu a:hover{color:var(--terracota)}
.btn-bolsa{position:relative;display:flex;align-items:center;gap:.45rem;background:var(--blanco);border:1px solid var(--linea);border-radius:999px;padding:.55rem 1rem .45rem;color:var(--oliva)}
.btn-bolsa span{padding-top:2px;font-size:.92rem}
.contador{position:absolute;top:-6px;right:-6px;background:var(--terracota);color:#fff;font-size:.72rem;min-width:21px;height:21px;border-radius:99px;display:grid;place-items:center;padding:3px 5px 0}
@media (max-width:640px){.menu{display:none}.btn-bolsa{margin-left:auto}.btn-bolsa span{display:none}.logo img{height:34px}}

/* Portada con alacena */
.portada{max-width:1180px;margin:auto;padding:4.5rem 1.25rem 3.5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.portada h1{font-size:clamp(2.6rem,5.4vw,4.4rem);letter-spacing:-.01em;max-width:13ch}
.portada p{max-width:42ch;color:var(--suave);margin:1.4rem 0 2rem}
.alacena{background:var(--blanco);border:1px solid var(--linea);border-radius:22px;padding:2rem 2rem .5rem;display:grid;gap:0}
.repisa{display:flex;align-items:flex-end;justify-content:center;gap:1.1rem;height:120px;border-bottom:10px solid var(--bambu);border-radius:0 0 3px 3px;margin-bottom:1.5rem;box-shadow:0 6px 0 -3px #c7ae86}
.frasco{position:relative;width:52px;background:linear-gradient(90deg,rgba(217,195,160,.25),rgba(255,255,255,.7) 40%,rgba(217,195,160,.3));border:2px solid #cdbb9d;border-radius:10px 10px 8px 8px}
.frasco::before{content:"";position:absolute;left:4px;right:4px;top:-12px;height:12px;background:#b99a6b;border-radius:4px 4px 0 0}
.frasco::after{content:"";position:absolute;left:50%;top:-4px;width:18px;height:8px;transform:translateX(-50%);border:2px solid var(--terracota);border-radius:50%;opacity:.8}
.f1{height:70px}.f2{height:92px;width:44px}.f3{height:58px;width:60px}.f4{height:80px}.f5{height:96px;width:40px}.f6{height:64px}
.f2{background-image:linear-gradient(to top,#e7d6b6 55%,transparent 55%)}
.f3{background-image:linear-gradient(to top,#c9a57a 40%,transparent 40%)}
.f5{background-image:linear-gradient(to top,#8a9a6e 35%,transparent 35%)}
.olla{position:relative;width:110px;height:64px;background:var(--oliva);border-radius:6px 6px 26px 26px}
.olla::before{content:"";position:absolute;left:-6px;right:-6px;top:-8px;height:8px;background:var(--oliva-osc);border-radius:6px}
.olla::after{content:"";position:absolute;left:50%;top:-16px;width:22px;height:8px;transform:translateX(-50%);background:var(--bambu);border-radius:4px 4px 0 0}
.taza{position:relative;width:46px;height:48px;background:var(--terracota);border-radius:4px 4px 16px 16px;margin-right:12px}
.taza::after{content:"";position:absolute;right:-14px;top:10px;width:16px;height:20px;border:4px solid var(--terracota);border-left:0;border-radius:0 12px 12px 0}
@media (max-width:860px){.portada{grid-template-columns:1fr;padding-top:2.5rem;gap:2rem}.alacena{padding:1.4rem 1rem .2rem}.repisa{height:104px;gap:.7rem}}
@media (prefers-reduced-motion:no-preference){
  .repisa{animation:aparece .7s cubic-bezier(.2,.7,.2,1) both}
  .repisa:nth-child(2){animation-delay:.12s}.repisa:nth-child(3){animation-delay:.24s}
  @keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* Tienda */
.tienda{max-width:1180px;margin:auto;padding:3rem 1.25rem 4rem}
.tienda-cabeza{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tienda h2,.envios h2{font-size:clamp(2rem,3.6vw,2.8rem)}
.buscador input{width:min(320px,80vw);padding:.75rem 1.1rem .6rem;border:1px solid var(--linea);border-radius:999px;background:var(--blanco);font:inherit;font-size:.95rem;color:var(--texto)}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0 2rem}
.filtro{border:1px solid var(--linea);background:transparent;border-radius:999px;padding:.5rem 1rem .35rem;font-size:.9rem;color:var(--texto)}
.filtro[aria-selected="true"]{background:var(--oliva);border-color:var(--oliva);color:var(--crema)}
.aviso{background:var(--bambu-claro);border-radius:10px;padding:.8rem 1rem .65rem;font-size:.92rem}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.4rem 1.6rem}
.cargando,.vacio{grid-column:1/-1;color:var(--suave);text-align:center;padding:3rem 0}

.producto{display:flex;flex-direction:column}
.producto-foto{position:relative;aspect-ratio:1;background:var(--blanco);border-radius:var(--radio);overflow:hidden;border:0;padding:0;width:100%;border-bottom:6px solid var(--bambu)}
.producto-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.producto-foto:hover img{transform:scale(1.03)}
.sello{position:absolute;top:.7rem;left:.7rem;background:var(--terracota);color:#fff;font-size:.75rem;border-radius:99px;padding:.3rem .7rem .15rem}
.sello.agotado{background:var(--suave)}
.producto h3{font-size:1.4rem;margin:.9rem 0 .15rem}
.producto h3 button{all:unset;cursor:pointer}
.producto h3 button:focus-visible{outline:2px solid var(--terracota)}
.precio{font-family:var(--titulo);font-weight:600;font-size:1.35rem;color:var(--terracota);margin:0}
.precio s{color:var(--suave);font-size:.85em;font-weight:500;margin-left:.4rem}
.producto .btn{margin-top:.9rem;padding:.7rem 1rem .55rem}
.sin-foto{width:100%;height:100%;display:grid;place-items:center;background:var(--bambu-claro)}
.sin-foto img{width:38%;height:auto;opacity:.55;object-fit:contain}

/* Envíos */
.envios{background:var(--oliva);color:var(--crema);padding:4rem 1.25rem}
.envios h2{color:var(--crema);max-width:1180px;margin:0 auto 2rem}
.envios-lista{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.envios-lista h3{color:var(--bambu);font-size:1.5rem;margin-bottom:.4rem}
.envios-lista p{margin:0;opacity:.9;max-width:36ch}

/* Pie */
.pie{background:var(--oliva-osc);color:var(--crema);text-align:center;padding:3rem 1.25rem 2rem}
.pie-logo{width:170px;height:auto;margin:0 auto 1.5rem}
.pie-datos{display:flex;justify-content:center;gap:1.5rem}
.pie-datos a{text-decoration:none;border-bottom:1px solid var(--bambu);padding-bottom:2px}
.pie-legal{font-size:.8rem;opacity:.6;margin-top:2rem}

.whats-flotante{position:fixed;right:1.1rem;bottom:1.1rem;z-index:15;width:58px;height:58px;border-radius:50%;background:var(--oliva);color:var(--crema);display:grid;place-items:center;box-shadow:0 4px 14px rgba(47,62,38,.3)}

/* Diálogos */
dialog{border:0;padding:0;background:var(--crema);color:var(--texto)}
dialog::backdrop{background:rgba(43,51,36,.5)}
.cerrar{background:none;border:0;font-size:2rem;line-height:1;color:var(--oliva);width:44px;height:44px}
.ficha{width:min(920px,94vw);border-radius:20px;max-height:92vh}
.ficha>.cerrar{position:absolute;right:.5rem;top:.5rem;z-index:2}
.ficha-in{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.5rem}
.ficha-foto{aspect-ratio:1;border-radius:var(--radio);overflow:hidden;background:var(--blanco)}
.ficha-foto img{width:100%;height:100%;object-fit:cover}
.miniaturas{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.miniaturas button{width:62px;height:62px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--blanco)}
.miniaturas button[aria-current="true"]{border-color:var(--oliva)}
.miniaturas img{width:100%;height:100%;object-fit:cover}
.ficha-cat{color:var(--suave);font-size:.9rem;margin:.6rem 0 .2rem}
.ficha h3{font-size:2.2rem;margin-bottom:.5rem;padding-right:2rem}
.ficha .precio{font-size:1.7rem}
.ficha-desc{white-space:pre-line;color:var(--texto);margin:1rem 0 1.4rem}
.ficha-info .btn{margin-top:.6rem}
.cantidad{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:999px;background:var(--blanco);margin-bottom:.6rem}
.cantidad button{width:42px;height:42px;border:0;background:none;font-size:1.3rem;color:var(--oliva)}
.cantidad output{min-width:2ch;text-align:center;padding-top:3px}
@media (max-width:720px){.ficha-in{grid-template-columns:1fr;padding:1rem;gap:1rem}.ficha h3{font-size:1.8rem}}

.bolsa{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(440px,100vw);display:none;flex-direction:column}
.bolsa[open]{display:flex}
.bolsa-cabeza{display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem 1rem 1.4rem;border-bottom:1px solid var(--linea)}
.bolsa-cabeza h3{font-size:1.8rem}
.bolsa-cuerpo{overflow-y:auto;padding:1rem 1.4rem 2rem;flex:1}
.bolsa-lista{list-style:none;padding:0;margin:0}
.item{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--linea)}
.item-foto{width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--bambu-claro)}
.item-foto img{width:100%;height:100%;object-fit:cover}
.item-nombre{font-family:var(--titulo);font-weight:600;font-size:1.15rem;line-height:1.15;color:var(--oliva)}
.item-precio{font-size:.9rem;color:var(--suave)}
.item .cantidad{margin:0;transform:scale(.85);transform-origin:right}
.item-quitar{grid-column:2;justify-self:start;background:none;border:0;padding:0;font-size:.82rem;color:var(--terracota);text-decoration:underline}
.bolsa-vacia{color:var(--suave);padding:2rem 0}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:1.2rem 0 0;font-size:1.05rem}
.total strong{font-family:var(--titulo);font-size:1.8rem;color:var(--terracota)}
.nota{font-size:.85rem;color:var(--suave);margin:.2rem 0 1.4rem}
.bolsa h4{font-size:1.4rem;margin-bottom:.8rem}
form label{display:block;font-size:.88rem;margin-bottom:.8rem;color:var(--suave)}
form input{display:block;width:100%;margin-top:.3rem;padding:.75rem .9rem .6rem;border:1px solid var(--linea);border-radius:10px;background:var(--blanco);font:inherit;color:var(--texto)}
form input[aria-invalid="true"]{border-color:var(--terracota)}
.opc{opacity:.7}
.error{color:var(--terracota);font-size:.88rem}

.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);background:var(--oliva);color:var(--crema);padding:.8rem 1.3rem .65rem;border-radius:999px;font-size:.92rem;transition:transform .3s;z-index:30;pointer-events:none;max-width:90vw}
.toast.ver{transform:translate(-50%,0)}

/* Ajustes */
.contador[hidden],.toast:empty{display:none}
.envios h2,.envios-lista{max-width:calc(1180px - 2.5rem)}
.producto-foto .sin-foto img,.ficha-foto .sin-foto img,.item-foto .sin-foto img{width:38%;height:auto;object-fit:contain}
@media (max-width:560px){
  .grilla{grid-template-columns:1fr 1fr;gap:1.8rem .9rem}
  .producto h3{font-size:1.12rem;margin-top:.7rem}
  .precio{font-size:1.15rem}
  .precio s{display:block;margin:0}
  .producto .btn{font-size:.85rem;padding:.6rem .5rem .45rem}
  .sello{font-size:.68rem;top:.5rem;left:.5rem}
  .alacena{max-width:420px}
  .repisa{height:92px;transform-origin:bottom}
  .frasco{width:42px}.olla{width:88px;height:52px}
}
.producto .precio{margin-bottom:.9rem}
.producto .btn{margin-top:auto}
.portada-imagen{border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--bambu-claro)}
.portada-imagen img{width:100%;height:100%;object-fit:cover}
.portada-imagen[hidden],.alacena[hidden]{display:none}