/* Casa Verde — Dirección B (Galería) · sistema compartido */
:root{
  --ink:#1D1D1B; --paper:#FFFFFF; --warm:#F6F3EC;
  --green:#4D8444; --indigo:#332E71; --plum:#97567A; --sky:#96B1D3; --sand:#FFDF8D;
  --disp:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --text:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--text);color:var(--ink);background:var(--warm);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.disp{font-family:var(--disp);font-weight:900;letter-spacing:-0.03em;line-height:0.92;}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;}
.dot{color:var(--green);}

/* column-line veil */
.lined{position:relative;}
.lined::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to right, transparent 0, transparent calc(100%/6 - 1px), var(--ln,rgba(0,0,0,.10)) calc(100%/6 - 1px), var(--ln,rgba(0,0,0,.10)) calc(100%/6));}
.lined > *{position:relative;z-index:1;}
.frame{max-width:1360px;margin:0 auto;padding:clamp(56px,8vh,120px) clamp(20px,4vw,56px);}
.frame.tight{padding-top:clamp(36px,5vh,64px);padding-bottom:clamp(36px,5vh,64px);}

/* NAV */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px clamp(20px,4vw,56px);background:rgba(246,243,236,.88);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.12);}
nav .wm{display:flex;align-items:center;line-height:0;}
nav .wm img{height:44px;width:auto;display:block;}
@media(max-width:600px){ nav .wm img{height:36px;} }
nav .idx{display:flex;gap:clamp(12px,2vw,26px);align-items:center;}
nav .idx a{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;color:#54503f;}
nav .idx a:hover,nav .idx a[aria-current="page"]{color:var(--ink);}
nav .idx a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--green);}
nav .idx a .n{color:var(--green);margin-right:4px;}
nav .wa{border:1px solid var(--ink);border-radius:999px;padding:7px 13px;color:var(--ink)!important;}
@media(max-width:760px){ nav .idx a:not(.wa){display:none;} }

.btn{font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;padding:13px 20px;border-radius:999px;
  border:1px solid currentColor;transition:all .18s ease;display:inline-block;cursor:pointer;}
.btn.solid{background:var(--green);border-color:var(--green);color:#fff;}
.btn.solid:hover{background:#3C6E36;}
.btn.lg{padding:16px 26px;font-size:13px;}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid currentColor;padding-bottom:16px;margin-bottom:clamp(30px,4vh,56px);}
.sec-head h2{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4vw,60px);letter-spacing:-0.03em;}
.sec-head .eyebrow{opacity:.6;}

/* HERO (home) */
.hero{background:var(--sky);--ln:rgba(27,27,25,.13);}
.hero .top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(27,27,25,.25);padding-bottom:16px;}
.hero h1{font-family:var(--disp);font-weight:900;letter-spacing:-0.035em;line-height:0.9;font-size:clamp(52px,10vw,158px);margin:.28em 0 .12em;}
.hero .meta{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:end;margin-top:8px;}
.hero .meta p{max-width:42ch;font-size:clamp(16px,1.4vw,20px);line-height:1.55;}
.hero .meta .r{justify-self:end;text-align:right;display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(34px,5vh,64px);}
.gal .cell{aspect-ratio:4/5;overflow:hidden;background:#0002;}
.gal .cell img{width:100%;height:100%;object-fit:cover;}
@media(max-width:760px){ .hero .meta{grid-template-columns:1fr;} .hero .meta .r{justify-self:start;text-align:left;align-items:flex-start;} }

/* PRODUCT CARDS (dark gallery wall) */
.productos{background:var(--ink);color:#fff;--ln:rgba(255,255,255,.10);}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,46px);}
.card{display:block;color:inherit;}
.card figure{aspect-ratio:4/5;overflow:hidden;background:#222;margin-bottom:16px;}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover figure img{transform:scale(1.04);}
.card .cap{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.28);padding-top:12px;}
.card .cap .nm{font-family:var(--disp);font-weight:900;font-size:clamp(22px,2vw,30px);letter-spacing:-0.02em;}
.card .cap .lk{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;opacity:.7;white-space:nowrap;transition:opacity .15s;}
.card:hover .cap .lk{opacity:1;}
.card .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;color:#b9b4a6;margin-top:9px;}
.card .desc{margin-top:12px;font-size:15px;line-height:1.5;color:#d8d4c8;max-width:34ch;}
@media(max-width:860px){ .cards{grid-template-columns:1fr;max-width:460px;} .gal{grid-template-columns:1fr;max-width:460px;} }

/* MATERIAL */
.material{background:var(--green);color:#fff;--ln:rgba(255,255,255,.12);}
.material .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;}
.material h2{font-family:var(--disp);font-weight:900;letter-spacing:-0.03em;line-height:0.92;font-size:clamp(40px,5.6vw,96px);}
.material .body p{font-size:clamp(16px,1.4vw,20px);line-height:1.6;max-width:40ch;}
.material .specs{margin-top:26px;border-top:1px solid rgba(255,255,255,.35);}
.material .specs .r{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.35);font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;}
.material .specs .r b{font-weight:600;}
.material .specs .r span{opacity:.75;}
@media(max-width:760px){ .material .row{grid-template-columns:1fr;} }

/* MOCCA */
.mocca{background:var(--plum);color:#fff;--ln:rgba(255,255,255,.11);}
.mocca .card2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;border-top:1px solid rgba(255,255,255,.3);padding-top:clamp(28px,4vh,52px);}
.mocca figure{aspect-ratio:16/11;overflow:hidden;background:#0003;}
.mocca figure img{width:100%;height:100%;object-fit:cover;}
.mocca h2{font-family:var(--disp);font-weight:900;letter-spacing:-0.03em;line-height:0.94;font-size:clamp(34px,4.4vw,72px);margin:.2em 0;}
.mocca p{font-size:clamp(15px,1.3vw,19px);line-height:1.55;max-width:34ch;opacity:.94;}
.mocca img.silo{width:64px;height:auto;margin-bottom:8px;}
@media(max-width:760px){ .mocca .card2{grid-template-columns:1fr;} .mocca figure{order:-1;} }

/* TALLER */
.taller{background:var(--sand);color:var(--ink);--ln:rgba(27,27,25,.12);}
.taller .row{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center;}
.taller figure{aspect-ratio:16/10;overflow:hidden;background:#0002;}
.taller figure img{width:100%;height:100%;object-fit:cover;}
.taller h2{font-family:var(--disp);font-weight:900;letter-spacing:-0.03em;line-height:0.94;font-size:clamp(34px,4.6vw,80px);}
.taller p{margin-top:18px;font-size:clamp(16px,1.4vw,20px);line-height:1.6;max-width:40ch;}
@media(max-width:760px){ .taller .row{grid-template-columns:1fr;} .taller figure{order:-1;} }

/* CONTACTO + FOOTER */
.contacto{background:var(--ink);color:#fff;--ln:rgba(255,255,255,.08);}
.contacto .sec-head{margin-bottom:clamp(20px,3vh,40px);}
.contacto h2{font-family:var(--disp);font-weight:900;letter-spacing:-0.035em;line-height:0.86;font-size:clamp(58px,12vw,210px);}
.contacto .ways{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
.contacto img.silo{width:54px;height:auto;margin-bottom:14px;}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:clamp(50px,8vh,100px);padding-top:24px;border-top:1px solid rgba(255,255,255,.2);}
.foot .wm{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-0.03em;}
.foot .meta{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:#8c887f;text-align:right;line-height:1.8;}
.foot a:hover{color:#fff;}

/* ===== CATÁLOGO page ===== */
.pagehead{background:var(--warm);--ln:rgba(27,27,25,.10);border-bottom:1px solid rgba(0,0,0,.12);}
.pagehead .frame{padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(30px,4vh,52px);}
.pagehead .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#8a8268;margin-bottom:18px;}
.pagehead h1{font-family:var(--disp);font-weight:900;letter-spacing:-0.035em;line-height:0.9;font-size:clamp(48px,9vw,140px);}
.pagehead p{margin-top:18px;max-width:46ch;font-size:clamp(16px,1.4vw,20px);line-height:1.55;}
.catalogo{background:var(--warm);}
.catalogo .cards .card .cap{border-color:rgba(0,0,0,.2);}
.catalogo .cards .card .cap .nm{color:var(--ink);}
.catalogo .cards .card .cap .lk{color:var(--green);opacity:1;}
.catalogo .cards .card .sub{color:#8a8268;}
.catalogo .cards .card .desc{color:#4a463b;}
.catalogo .cards .card .mocca-seal{font-family:var(--mono);font-size:10.5px;letter-spacing:0.03em;line-height:1.5;text-transform:none;margin-top:10px;color:var(--green);max-width:34ch;}
.catalogo .cards .card .mocca-seal .soft{color:#8a8268;}

/* ===== PRODUCTO page ===== */
.phero{--ln:rgba(27,27,25,.10);border-bottom:1px solid rgba(0,0,0,.12);}
.phero.green{background:var(--green);color:#fff;--ln:rgba(255,255,255,.14);}
.phero.plum{background:var(--plum);color:#fff;--ln:rgba(255,255,255,.14);}
.phero.indigo{background:var(--indigo);color:#fff;--ln:rgba(255,255,255,.14);}
.phero .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;opacity:.8;margin-bottom:22px;}
.phero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,70px);align-items:center;}
.phero h1{font-family:var(--disp);font-weight:900;letter-spacing:-0.035em;line-height:0.9;font-size:clamp(50px,8vw,128px);}
.phero .tagline{margin-top:18px;font-size:clamp(17px,1.6vw,23px);line-height:1.45;max-width:30ch;opacity:.95;}
.phero figure{aspect-ratio:4/5;overflow:hidden;background:#0003;}
.phero figure img{width:100%;height:100%;object-fit:cover;}
@media(max-width:860px){ .phero .grid{grid-template-columns:1fr;} .phero figure{order:-1;} }

.pbody{background:var(--warm);}
.pbody .split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
.pbody .lede{font-size:clamp(18px,1.8vw,26px);line-height:1.5;font-weight:500;max-width:24ch;}
.pbody .copy p{font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:#3a352b;margin-bottom:14px;max-width:52ch;}
.pbody .facts{border-top:1.5px solid var(--ink);margin-top:6px;}
.pbody .facts .r{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.18);
  font-family:var(--mono);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;}
.pbody .facts .r b{font-weight:600;}
.pbody .facts .r span{color:#7c745f;text-align:right;}
.pbody .cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;}
.pbody .copy .close{font-family:var(--disp);font-weight:800;letter-spacing:-0.01em;
  font-size:clamp(19px,1.7vw,27px);line-height:1.16;color:var(--ink);margin-top:22px;max-width:30ch;}
@media(max-width:760px){ .pbody .split{grid-template-columns:1fr;} }

/* photo gallery */
.pgal{background:var(--ink);color:#fff;--ln:rgba(255,255,255,.08);}
.pgal .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px);}
.pgal .grid figure{overflow:hidden;background:#222;}
.pgal .grid figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.pgal .grid figure:hover img{transform:scale(1.05);}
.pgal .g-tall{grid-column:span 5;aspect-ratio:4/5;}
.pgal .g-wide{grid-column:span 7;aspect-ratio:7/5;}
.pgal .g-third{grid-column:span 4;aspect-ratio:1/1;}
.pgal .g-half{grid-column:span 6;aspect-ratio:3/2;}
.pgal .g-pair{grid-column:span 6;aspect-ratio:4/5;}
@media(max-width:760px){ .pgal .grid{grid-template-columns:1fr;} .pgal .grid figure{grid-column:auto!important;aspect-ratio:4/3!important;} }

/* ===== CUENTA (comparativa) ===== */
.cuenta{background:var(--warm);--ln:rgba(27,27,25,.10);}
.cuenta .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:start;}
.cuenta .rows{list-style:none;border-top:1.5px solid var(--ink);}
.cuenta .rows li{position:relative;padding:15px 0 15px 26px;border-bottom:1px solid rgba(0,0,0,.16);
  font-size:clamp(15px,1.25vw,19px);line-height:1.5;color:#3a352b;}
.cuenta .rows li::before{content:"";position:absolute;left:0;top:calc(.75em + 2px);width:9px;height:9px;background:var(--green);}
.cuenta .rows li b{font-weight:700;color:var(--ink);}
.cuenta .note{background:var(--ink);color:#fff;border-radius:8px;padding:clamp(28px,3vw,42px);
  display:flex;flex-direction:column;gap:16px;position:sticky;top:84px;}
.cuenta .note .k{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sand);}
.cuenta .note p{font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:#d8d4c8;}
@media(max-width:760px){ .cuenta .grid{grid-template-columns:1fr;gap:28px;} .cuenta .note{position:static;} }

/* related */
.related{background:var(--warm);}.related .cards .card .cap .nm{color:var(--ink);}
.related .cards .card .cap{border-color:rgba(0,0,0,.2);}
.related .cards .card .cap .lk{color:var(--green);opacity:1;}

/* ===== PRODUCTO — ficha detalle (carrusel + panel) ===== */
.pdetail{background:var(--warm);--ln:rgba(27,27,25,.10);border-bottom:1px solid rgba(0,0,0,.12);}
.pdetail .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#8a8268;margin-bottom:22px;}
.pdetail .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,64px);align-items:start;}

/* carrusel */
.pcar{outline:none;}
.pcar-main{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ece7db;cursor:zoom-in;touch-action:pan-y;}
.pcar-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.pcar-slide{min-width:100%;height:100%;}
.pcar-slide img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.pcar-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.86);color:var(--ink);border:none;cursor:pointer;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2;}
.pcar-nav:hover{background:#fff;}
.pcar-nav.prev{left:12px;} .pcar-nav.next{right:12px;}
.pcar-zoom{position:absolute;bottom:12px;right:12px;z-index:2;border:none;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  background:rgba(27,26,26,.62);color:#fff;padding:8px 12px;border-radius:999px;backdrop-filter:blur(3px);}
.pcar-zoom:hover{background:rgba(27,26,26,.85);}
.pcar-count{position:absolute;bottom:14px;left:14px;z-index:2;font-family:var(--mono);font-size:11px;
  letter-spacing:0.1em;color:#fff;background:rgba(27,26,26,.5);padding:5px 10px;border-radius:999px;}
.pcar-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.pcar-thumb{width:72px;height:72px;padding:0;border:1px solid transparent;background:#ece7db;cursor:pointer;overflow:hidden;opacity:.55;transition:opacity .15s,border-color .15s;}
.pcar-thumb img{width:100%;height:100%;object-fit:cover;}
.pcar-thumb:hover{opacity:.85;}
.pcar-thumb[aria-current="true"]{opacity:1;border-color:var(--ink);}

/* panel */
.ppanel{position:sticky;top:88px;}
.ppanel .eyebrow{color:#8a8268;}
.ppanel h1{font-family:var(--disp);font-weight:900;letter-spacing:-0.035em;line-height:0.9;font-size:clamp(40px,5vw,74px);margin:.14em 0 0;}
.ppanel .tagline{margin-top:14px;font-size:clamp(16px,1.4vw,20px);line-height:1.45;color:#3a352b;max-width:32ch;}
.ppanel .price{margin-top:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.ppanel .price .now{font-family:var(--disp);font-weight:900;letter-spacing:-0.02em;font-size:clamp(26px,2.6vw,38px);}
.ppanel .price .tag{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);}
.ppanel .price .hint{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:#8a8268;margin-top:2px;}
.ppanel .block{margin-top:26px;padding-top:20px;border-top:1px solid rgba(0,0,0,.18);}
.ppanel .block .k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#8a8268;display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;}
.ppanel .block .k .val{color:var(--ink);}
.pcolors{display:flex;gap:12px;}
.pcolor{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.28);cursor:pointer;padding:0;transition:box-shadow .15s;}
.pcolor[aria-current="true"]{box-shadow:0 0 0 2px var(--warm),0 0 0 4px var(--ink);}
.pfacts{border-top:1px solid rgba(0,0,0,.18);}
.pfacts .r{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.14);
  font-family:var(--mono);font-size:12px;letter-spacing:0.03em;text-transform:uppercase;}
.pfacts .r b{font-weight:600;}
.pfacts .r span{color:#7c745f;text-align:right;}
.ppanel .cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;}
.ppanel .cta .btn.solid{padding:15px 26px;}
@media(max-width:860px){ .pdetail .grid{grid-template-columns:1fr;gap:26px;} .ppanel{position:static;} }

/* lightbox */
.pcar-lb{position:fixed;inset:0;z-index:200;background:rgba(20,19,17,.93);display:flex;align-items:center;justify-content:center;
  animation:pcarfade .2s ease;}
@keyframes pcarfade{from{opacity:0;}to{opacity:1;}}
.pcar-lb-stage{max-width:92vw;max-height:86vh;overflow:hidden;cursor:zoom-in;display:flex;}
.pcar-lb-stage.zoomed{cursor:zoom-out;}
.pcar-lb-stage img{max-width:92vw;max-height:86vh;object-fit:contain;transition:transform .25s ease;user-select:none;}
.pcar-lb-close{position:fixed;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;z-index:2;}
.pcar-lb-close:hover{background:rgba(255,255,255,.28);}
.pcar-lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;z-index:2;}
.pcar-lb-nav:hover{background:rgba(255,255,255,.26);}
.pcar-lb-nav.prev{left:24px;} .pcar-lb-nav.next{right:24px;}
.pcar-lb-count{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:12px;
  letter-spacing:0.1em;color:#fff;opacity:.8;z-index:2;}
@media(max-width:600px){ .pcar-lb-nav{width:42px;height:42px;font-size:22px;} .pcar-lb-nav.prev{left:8px;} .pcar-lb-nav.next{right:8px;} }