:root{
  /* paleta manual de marca La Cocotier (pg.2) */
  --ink:#1c1c1c; --paper:#ffffff; --cream:#e7dec4; --blush:#e7b5be;
  --card:#dfe9f2; --quick:#fbc717; --navy:#273e7f; --green:#2f4c2c;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"Courier Prime","Courier New",monospace;
  --script:"Tangerine",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--sans)}

/* header (walkthrough Figma: utility bar → moneda/iconos → logo → nav) */
.util{background:var(--navy);color:#fff;font-size:12px;letter-spacing:.06em;
      display:flex;justify-content:center;gap:26px;padding:10px 16px}
.util a:hover{text-decoration:underline}
header{border-bottom:1px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:50}
.head-row{display:flex;align-items:center;justify-content:space-between;padding:12px 28px 0}
.currency{border:1px solid #bbb;font-size:10.5px;letter-spacing:.1em;padding:3px 10px;color:#555}
.head-icons{display:flex;gap:20px;font-size:16px;align-items:center}
.cart-btn{position:relative;cursor:pointer;background:none;border:none;font-size:16px}
.cart-badge{position:absolute;top:-8px;right:-10px;background:var(--navy);color:#fff;font-size:9.5px;
            min-width:16px;height:16px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.cart-badge[hidden]{display:none!important}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px}
.logo-wrap .casita{height:52px;width:auto}
.logo-wrap .wordmark{height:64px;width:auto}
@media(max-width:880px){.logo-wrap .casita{height:40px}.logo-wrap .wordmark{height:48px}}
nav.main{display:flex;justify-content:space-between;padding:16px 8vw 14px;
         font-size:12px;letter-spacing:.18em;text-transform:uppercase}
nav.main a{padding-bottom:2px}
nav.main a:hover,nav.main a.active{border-bottom:1px solid var(--ink)}

/* botones */
.btn{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:11px 34px;
     font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:transparent;cursor:pointer;transition:.18s;text-align:center}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* home */
.hero{background:var(--cream);display:grid;grid-template-columns:1fr 1fr;min-height:64vh}
.hero-art{position:relative;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:9vh 8vw}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.hero h1{font-size:clamp(26px,3.4vw,44px);font-weight:500;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}
.wholesale{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
           text-align:center;padding:14px 20px;font-size:13px}
.wholesale u{text-underline-offset:3px}
.letter-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:6vw;padding:10vh 8vw;align-items:start}
.letter{font-family:var(--mono);font-size:14.5px;line-height:1.75;white-space:pre-line}
.newsletter{border-left:1px solid #d8d8d8;padding-left:4vw;display:flex;flex-direction:column;gap:22px}
.newsletter h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.field{border:0;border-bottom:1px solid var(--ink);padding:8px 2px;font-family:var(--mono);font-size:13px;width:100%;background:transparent;outline:none}
.checks{display:flex;gap:26px;font-size:12.5px}
.checks label{display:flex;gap:7px;align-items:center;cursor:pointer}
.checks input{accent-color:var(--ink)}
.fine{font-size:11.5px;color:#555}

.sourced{margin:0 8vw 9vh;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
         display:grid;grid-template-columns:1fr 1fr}
.sourced>div{padding:28px 20px;text-align:center}
.sourced>div:first-child{border-right:2px solid var(--ink)}
.script{font-family:var(--script);font-size:44px;line-height:1}
.coords{font-family:var(--mono);font-size:14px;display:flex;align-items:center;justify-content:center;height:100%}

.about-band{background:var(--blush);display:flex;align-items:center;min-height:40vh;position:relative;overflow:hidden}
.about-inner{padding:8vh 8vw;max-width:620px;position:relative;z-index:2}
.about-inner h2{font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:.05em;margin-bottom:22px;text-transform:uppercase}
.about-inner p{font-family:var(--mono);font-size:13px;line-height:1.85}
.about-band .bg-photo{position:absolute;right:0;top:0;bottom:0;width:46%;object-fit:cover;object-position:center 30%;
                      -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.about-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;padding:8vh 8vw}
.about-cols h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:14px;border-bottom:1px solid var(--ink);padding-bottom:10px}
.about-cols p{font-size:13px;line-height:1.8;color:#222}
.founder{background:var(--cream);padding:9vh 8vw;text-align:center}
.founder .script{font-size:52px;margin-bottom:26px;display:block}
.founder p{font-family:var(--mono);font-size:14px;line-height:1.9;max-width:640px;margin:0 auto;white-space:pre-line}

section.block{padding:8vh 8vw}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);
          padding-bottom:12px;margin-bottom:40px}
.sec-head h2{font-size:13px;letter-spacing:.26em;font-weight:500;text-transform:uppercase}
.sec-head span,.sec-head a{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.sec-head a{border-bottom:1px solid var(--ink);padding-bottom:1px}

.col-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.col-card{background:var(--cream);aspect-ratio:4/3;display:flex;align-items:flex-end;padding:26px;position:relative;overflow:hidden}
.col-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.3s}
.col-card:hover img{transform:scale(1.03)}
.col-card .tag{background:var(--paper);padding:10px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:2}

/* tienda: sort + grid (Figma SHOP) */
.shop-layout{display:grid;grid-template-columns:1fr 180px;gap:40px;padding:6vh 8vw}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{cursor:pointer}
.thumb{background:var(--card);aspect-ratio:4/5;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}
.card:hover .thumb img{transform:scale(1.04)}
.quick{position:absolute;left:0;right:0;bottom:0;background:var(--quick);padding:11px;text-align:center;
       font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:.22s}
.card:hover .quick{opacity:1}
.meta{padding-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:12px}
.meta .name{letter-spacing:.12em;text-transform:uppercase}
.meta .price{font-family:var(--mono);white-space:nowrap}
.sort{position:sticky;top:150px;align-self:start;text-align:right}
.sort h3{font-size:14px;letter-spacing:.14em;font-weight:600;margin-bottom:12px;text-transform:uppercase}
.sort button{display:block;width:100%;text-align:right;background:none;border:none;cursor:pointer;
             font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:5px 0;color:#333}
.sort button.sel{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* producto */
.crumb{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#666;padding:26px 8vw 0}
.prod-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;padding:4vh 8vw 8vh}
.prod-gallery .main{background:var(--card);aspect-ratio:4/5}
.prod-gallery .main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:8px;padding:12px 0;justify-content:flex-start}
.thumbs img{width:62px;height:62px;object-fit:cover;border:1px solid transparent;cursor:pointer;background:var(--card)}
.thumbs img.sel{border-color:var(--ink)}
.prod-info{display:flex;flex-direction:column;gap:22px;padding-top:1vh}
.prod-info h1{font-size:22px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.prod-price{font-family:var(--mono);font-size:17px}
.prod-desc{font-family:var(--mono);font-size:13px;line-height:1.8;color:#222}
.size-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.sizes button{border:1px solid var(--ink);font-size:11px;padding:7px 11px;background:#fff;border-radius:2px;cursor:pointer}
.sizes button.sel{background:var(--ink);color:#fff}
.made-note{font-size:11.5px;color:#555;border-top:1px solid #ddd;padding-top:14px;font-family:var(--mono)}
.related{padding:0 8vw 8vh}

/* campana */
.campaign{display:grid;grid-template-columns:1.5fr 1fr;background:var(--cream)}
.camp-art{aspect-ratio:4/3;position:relative;overflow:hidden}
.camp-art img{width:100%;height:100%;object-fit:cover}
.camp-copy{background:var(--paper);padding:6vh 4vw;display:flex;flex-direction:column;gap:24px;justify-content:center}
.camp-copy h3{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.camp-copy p{font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#222}
.camp-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6vh 8vw}
.camp-mosaic img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--card)}

/* carrito (pagina) */
.cart-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:6vw;padding:6vh 8vw;align-items:start}
.citem{display:grid;grid-template-columns:88px 1fr auto;gap:18px;padding:18px 0;border-bottom:1px solid #e5e5e5;align-items:center}
.citem img{width:88px;height:104px;object-fit:cover;background:var(--card)}
.citem .n{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.citem .s{font-size:11.5px;color:#666;font-family:var(--mono);margin-top:3px}
.qty{display:flex;align-items:center;gap:8px;margin-top:10px}
.qty button{width:24px;height:24px;border:1px solid var(--ink);background:#fff;cursor:pointer;font-size:13px;line-height:1}
.qty span{font-family:var(--mono);font-size:13px}
.citem .p{font-family:var(--mono);font-size:13px;text-align:right}
.rm{background:none;border:none;font-size:10.5px;color:#999;cursor:pointer;text-decoration:underline;margin-top:6px}
.summary{border:1px solid var(--ink);padding:28px;display:flex;flex-direction:column;gap:16px;position:sticky;top:160px}
.summary h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:12px}
.srow{display:flex;justify-content:space-between;font-size:13px}
.srow.total{border-top:1px solid var(--ink);padding-top:14px;letter-spacing:.12em;text-transform:uppercase}
.srow b{font-family:var(--mono);font-size:15px}
.empty-cart{text-align:center;padding:80px 20px;font-family:var(--mono);font-size:13px;color:#666}

/* banderines del manual (patrón triangular) */
.bunting{height:56px;background:
  linear-gradient(135deg, var(--cream) 0, var(--cream) 100%);
  position:relative;overflow:hidden}
.bunting svg{width:100%;height:100%;display:block}

/* filtros tienda */
.sort .group{margin-bottom:26px}
.filter-note{font-family:var(--mono);font-size:11.5px;color:#666;margin-top:8px}

/* footer */
footer{border-top:1px solid var(--ink);margin-top:4vh}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:7vh 8vw}
.foot-grid h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:#333}
.foot-grid li a:hover{text-decoration:underline}
.foot-brand img{height:40px;width:auto}
.foot-brand p{font-family:var(--mono);font-size:12.5px;max-width:300px;line-height:1.7;margin-top:16px}
.foot-sourced{border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;margin:0 8vw 6vh}
.foot-sourced>div{padding:22px;text-align:center}
.foot-sourced>div:first-child{border-right:2px solid var(--ink)}
.copyright{text-align:center;font-family:var(--mono);font-size:11px;padding:0 0 30px;color:#555}

/* drawer + toast */
.overlay{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:90;opacity:0;pointer-events:none;transition:.2s}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--paper);z-index:95;
        border-left:1px solid var(--ink);transform:translateX(102%);transition:.25s;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--ink)}
.drawer-head h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.drawer-head button{background:none;border:none;font-size:17px;cursor:pointer}
.drawer-items{flex:1;overflow-y:auto;padding:10px 22px}
.drawer-items .citem{grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0}
.drawer-items .citem img{width:64px;height:76px}
.drawer-foot{border-top:1px solid var(--ink);padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;
       padding:12px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;z-index:99;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:880px){
  .hero,.letter-wrap,.col-grid,.campaign,.foot-grid,.about-cols,.prod-layout,.cart-layout{grid-template-columns:1fr}
  .newsletter{border-left:0;padding-left:0}
  .grid,.grid.g4{grid-template-columns:repeat(2,1fr)}
  .shop-layout{grid-template-columns:1fr;}
  .sort{position:static;text-align:left;order:-1}
  .sort button{text-align:left}
  .camp-mosaic{grid-template-columns:repeat(2,1fr)}
  nav.main{gap:4vw;padding:16px 5vw 14px;flex-wrap:wrap;justify-content:center}
}