/* ============================================================
   YADSTAM — rediseño editorial · preview
   Un solo mundo visual: pergamino, tinta, aire.
   ============================================================ */
@font-face{
  font-family:'Omstam';
  src:url('/assets/fonts/OmstamV4-Regular.ttf') format('truetype');
  font-display:swap;
}
:root{
  --ivory:#f2ede1;
  --cream:#faf7ef;
  --ink:#1a1611;
  --ink-soft:#57503f;
  --ink-faint:#8d8471;
  --sand:#a98c4f;
  --line:#ddd4c0;
  --line-soft:#e9e2d2;
  --font-he:'Heebo',system-ui,sans-serif;
  --font-lat:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --font-stam:'Omstam','Heebo',serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  /* radios: pastilla para lo clickeable, curva generosa para marcos */
  --r-pill:999px;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-he);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
::selection{background:var(--sand);color:var(--cream)}

/* ---------- hover dorado universal ----------
   El mismo acento dorado del menu superior aplica a TODO lo clickeable:
   subrayado que crece + texto que vira a --sand. */
main a,footer a,.langs a{position:relative}
main a:hover,footer a:hover,.langs a:hover{color:var(--sand)}
main a:hover h3,main a:hover .price{color:var(--sand)}
button:not(.letters button):hover{color:var(--sand)}
.cta{border-color:currentColor}
.cta:hover{border-color:var(--sand)!important;background:var(--sand)!important;color:var(--cream)!important}
footer a::after,.langs a::after,#contact .ways a .v::after{
  content:"";position:absolute;bottom:-2px;inset-inline-end:0;width:0;height:1px;
  background:var(--sand);transition:width .35s var(--ease);
}
footer a:hover::after,.langs a:hover::after{width:100%}

/* ---------- utilidades tipográficas ---------- */
.label{
  font-family:var(--font-lat);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-faint);
  direction:ltr;
  display:inline-flex;
  align-items:center;
  gap:1rem;
}
.label::after{content:"";width:48px;height:1px;background:var(--line)}
.display{
  font-weight:200;
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
}
/* Titulos de seccion en la letra Omstam real (fallback Heebo para signos
   que la fuente no cubre). line-height extra para no recortar los taguim. */
h2.display,#hero h1,#craft h2,#contact h2{
  font-family:var(--font-stam);
  font-weight:400;
  line-height:1.22;
}
.num{
  font-family:var(--font-lat);
  font-weight:300;
  font-variant-numeric:tabular-nums;
  direction:ltr;
  unicode-bidi:isolate;
}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============ INTRO ============ */
#intro{
  position:fixed;inset:0;z-index:100;
  background:var(--ivory);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.2rem;text-align:center;padding:2rem;
  transition:opacity .8s var(--ease),visibility .8s;
}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro .brand-lat{
  font-family:var(--font-lat);font-weight:300;
  font-size:clamp(2.6rem,9vw,7.5rem);
  letter-spacing:.28em;text-indent:.28em;
  direction:ltr;line-height:1;
}
#intro .brand-he{
  font-weight:200;font-size:clamp(1.6rem,4.5vw,3.2rem);
  letter-spacing:.14em;color:var(--ink-soft);
}
#intro .tag{
  font-weight:300;font-size:clamp(1rem,2vw,1.3rem);
  color:var(--ink-soft);letter-spacing:.06em;
}
#intro .pillars{
  font-size:.86rem;letter-spacing:.5em;color:var(--ink-faint);
  margin-top:.6rem;
}
#enterBtn{
  margin-top:2.4rem;border-radius:var(--r-pill);
  font-family:var(--font-lat);font-size:.8rem;font-weight:500;
  letter-spacing:.35em;text-transform:uppercase;
  padding:1.1rem 3.4rem;border:1px solid var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease);
  direction:ltr;
}
#enterBtn:hover,#enterBtn:focus-visible{background:var(--ink);color:var(--ivory)}
#intro .hint{font-family:var(--font-lat);font-size:.66rem;letter-spacing:.2em;color:var(--ink-faint);direction:ltr;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  #intro>*{animation:introUp 1s var(--ease) backwards}
  #intro>*:nth-child(2){animation-delay:.12s}
  #intro>*:nth-child(3){animation-delay:.24s}
  #intro>*:nth-child(4){animation-delay:.36s}
  #intro>*:nth-child(5){animation-delay:.48s}
  #intro>*:nth-child(6){animation-delay:.6s}
}
@keyframes introUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============ NAV ============ */
header{
  position:fixed;top:0;right:0;left:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem clamp(1.2rem,4vw,3.4rem);
  mix-blend-mode:normal;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
header.solid{background:rgba(242,237,225,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-soft)}
.logo{
  font-family:var(--font-lat);font-weight:500;font-size:.95rem;
  letter-spacing:.3em;direction:ltr;
}
nav.desktop{display:flex;gap:2.2rem;align-items:center}
nav.desktop a{
  font-size:.92rem;font-weight:400;position:relative;padding:.2rem 0;
}
nav.desktop a::after{
  content:"";position:absolute;bottom:0;inset-inline-end:0;width:0;height:1px;
  background:var(--sand);transition:width .35s var(--ease);
}
nav.desktop a:hover::after{width:100%}
.langs{display:flex;gap:.9rem;font-family:var(--font-lat);font-size:.72rem;letter-spacing:.14em;direction:ltr}
.langs a{color:var(--ink-faint)}
.langs a.on{color:var(--ink);border-bottom:1px solid var(--sand)}
#menuBtn{display:none;font-family:var(--font-lat);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;direction:ltr}
#mobileMenu{
  position:fixed;inset:0;z-index:90;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--ink);color:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;padding:3rem;gap:.4rem;
  transform:translateY(-100%);transition:transform .55s var(--ease);
}
#mobileMenu.open{transform:none}
#mobileMenu a{font-size:clamp(2rem,8vw,3.2rem);font-weight:200;line-height:1.5;letter-spacing:.02em}
#mobileMenu a:hover{color:var(--sand)}
#mobileMenu .close{position:absolute;top:1.4rem;inset-inline-start:1.6rem;font-family:var(--font-lat);letter-spacing:.3em;font-size:.72rem;text-transform:uppercase}
#mobileMenu .langs{margin-top:2.6rem}
#mobileMenu .langs a{color:#9a9282}
#mobileMenu .langs a.on{color:var(--ivory);border-color:var(--sand)}
@media (max-width:880px){nav.desktop,header .langs{display:none}#menuBtn{display:block}}

/* ============ HERO ============ */
#hero{
  position:relative;min-height:100svh;border-radius:0 0 var(--r-lg) var(--r-lg);
  display:grid;grid-template-rows:1fr auto;
  padding:0;overflow:hidden;background:var(--ink);
}
#hero .bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.78;
}
@media (prefers-reduced-motion:no-preference){
  #hero .bg{animation:heroZoom 26s var(--ease) infinite alternate}
}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
#hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,22,17,.62) 0%,rgba(26,22,17,.34) 38%,rgba(26,22,17,.86) 100%);
}
#hero .inner{
  position:relative;z-index:2;grid-row:2;
  padding:0 clamp(1.2rem,4vw,3.4rem) clamp(2.4rem,6vh,4.5rem);
  color:var(--ivory);
}
#hero h1{
  font-size:clamp(2.6rem,8.5vw,7.2rem);
  font-weight:200;line-height:1.06;letter-spacing:-.01em;
  max-width:14ch;text-wrap:balance;
}
#hero p{
  margin-top:1.4rem;max-width:52ch;font-size:clamp(1rem,1.6vw,1.2rem);
  font-weight:300;color:#e9e2d2;
}
#hero .label{color:#b6ad99;margin-bottom:1.2rem}
#hero .label::after{background:#6f6858}
.scrollcue{
  position:absolute;bottom:2.4rem;left:clamp(1.2rem,4vw,3.4rem);z-index:2;
  font-family:var(--font-lat);font-size:.64rem;letter-spacing:.3em;
  color:#b6ad99;text-transform:uppercase;direction:ltr;
  display:flex;align-items:center;gap:.8rem;
}
.scrollcue::after{content:"";width:1px;height:44px;background:#b6ad99;opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .scrollcue::after{animation:cue 2.2s var(--ease) infinite}
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ secciones base ============ */
section.block{padding:clamp(4.5rem,12vh,9rem) clamp(1.2rem,4vw,3.4rem)}
.sec-head{display:flex;flex-direction:column;gap:1.6rem;margin-bottom:clamp(2.4rem,6vh,4.5rem)}
.sec-head h2{font-size:clamp(2.4rem,7vw,5.6rem)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2.2rem)}

/* ============ 01 STAM ============ */
.stam-item{
  grid-column:span 12;
  border-top:1px solid var(--line);
  padding:2.2rem 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1rem;
  transition:padding .4s var(--ease);
}
.stam-item h3{font-size:clamp(1.9rem,5vw,3.6rem);font-weight:200;transition:color .3s}
.stam-item .sub{color:var(--ink-soft);font-size:1.02rem;max-width:40ch}
.stam-item .arrow{font-family:var(--font-lat);font-size:1.6rem;color:var(--ink-faint);transition:transform .35s var(--ease),color .35s;direction:ltr}
.stam-item:hover h3{color:var(--sand)}
.stam-item:hover .arrow{transform:translateX(-8px);color:var(--sand)}
[dir="ltr"] .stam-item:hover .arrow{transform:translateX(8px)}
.stam-item:last-child{border-bottom:1px solid var(--line)}

/* ============ 02 KLAF ============ */
#klaf{background:var(--cream)}
#klaf .grid12{align-items:center}
#klaf .photo{grid-column:span 7;overflow:hidden;border-radius:var(--r-lg)}
#klaf .photo img{width:100%;height:min(72vh,640px);object-fit:cover;transition:transform 1.2s var(--ease)}
#klaf .photo:hover img{transform:scale(1.04)}
#klaf .txt{grid-column:span 5;display:flex;flex-direction:column;gap:1.4rem}
#klaf .txt h2{font-size:clamp(2.6rem,6vw,4.8rem)}
#klaf ul{list-style:none;display:flex;flex-direction:column}
#klaf li{
  border-top:1px solid var(--line);padding:1rem 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:1.05rem;
}
#klaf li:last-child{border-bottom:1px solid var(--line)}
#klaf li .to{font-family:var(--font-lat);font-size:.7rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;direction:ltr}
#klaf li:hover .to{color:var(--sand)}
@media (max-width:880px){#klaf .photo,#klaf .txt{grid-column:span 12}}

/* ============ 03 LETTERS ============ */
#ktav{position:relative}
.letters{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.7rem;
}
.letters button{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;
  font-family:var(--font-stam);font-size:clamp(2rem,4.5vw,3.4rem);
  color:var(--ink);background:transparent;
  transition:background .3s var(--ease),color .3s var(--ease),font-size .3s var(--ease);
}
.letters button:hover,.letters button:focus-visible{background:var(--sand);color:var(--cream)}
#letterStage{
  margin-top:clamp(2rem,5vh,3.6rem);border-radius:var(--r-lg);
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(1.6rem,5vw,4rem);
  min-height:clamp(200px,36vh,340px);
  border:1px solid var(--line);padding:clamp(1.4rem,4vw,3rem);
  background:var(--cream);
}
#letterStage .glyph{
  font-family:var(--font-stam);
  font-size:clamp(7rem,22vh,15rem);line-height:1;
  color:var(--ink);
}
#letterStage .meta h3{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:300}
#letterStage .meta p{color:var(--ink-soft);max-width:46ch;margin-top:.6rem}
#letterStage .meta .label{margin-bottom:.8rem}
@media (max-width:640px){#letterStage{grid-template-columns:1fr;text-align:center}#letterStage .glyph{margin:0 auto}}

/* ============ 04 CURSO ============ */
#kurs{background:var(--ink);color:var(--ivory)}
#kurs .label{color:#9a9282}
#kurs .label::after{background:#3d382e}
#kurs h2{font-size:clamp(2.4rem,6.5vw,5.4rem);color:var(--ivory)}
#kurs .grid12{align-items:start;margin-top:clamp(2.4rem,6vh,4rem)}
#kurs .photo{grid-column:span 6;overflow:hidden;border-radius:var(--r-lg)}
#kurs .photo img{width:100%;height:min(70vh,560px);object-fit:cover;filter:saturate(.85);transition:transform 1.2s var(--ease)}
#kurs .photo:hover img{transform:scale(1.04)}
#kurs .info{grid-column:span 6;display:flex;flex-direction:column;gap:2rem}
#kurs .prices{display:flex;gap:clamp(1.6rem,5vw,4rem)}
#kurs .price .num{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:300;color:var(--ivory)}
#kurs .price .cap{font-size:.85rem;color:#9a9282;margin-top:.3rem}
#kurs ul{list-style:none;display:flex;flex-direction:column}
#kurs li{border-top:1px solid #3d382e;padding:.85rem 0;font-size:1.02rem;color:#e9e2d2;display:flex;gap:1rem;align-items:baseline}
#kurs li::before{content:"—";color:var(--sand);font-family:var(--font-lat)}
#kurs li:last-child{border-bottom:1px solid #3d382e}
.cta{
  align-self:flex-start;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:1rem;
  border:1px solid currentColor;padding:1rem 2.4rem;
  font-size:.95rem;font-weight:400;letter-spacing:.06em;
  transition:background .35s var(--ease),color .35s var(--ease);
}
#kurs .cta:hover{background:var(--ivory);color:var(--ink)}
@media (max-width:880px){#kurs .photo,#kurs .info{grid-column:span 12}}

/* ============ 05 STORE ============ */
.shop-row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;
  gap:clamp(1rem,3vw,2.6rem);align-items:center;
  border-top:1px solid var(--line);padding:1.6rem 0;
  transition:background .3s var(--ease);
}
.shop-row:last-of-type{border-bottom:1px solid var(--line)}
.shop-row{border-radius:var(--r-md)}
.shop-row:hover{background:var(--cream)}
.shop-row .thumb{overflow:hidden;border-radius:var(--r-md);width:clamp(90px,14vw,150px);aspect-ratio:1;background:var(--cream)}
.shop-row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shop-row:hover .thumb img{transform:scale(1.07)}
.shop-row h3{font-size:clamp(1.2rem,2.6vw,1.9rem);font-weight:300}
.shop-row .cat{font-size:.82rem;color:var(--ink-faint);margin-top:.25rem}
.shop-row .price{font-family:var(--font-lat);font-size:clamp(1.3rem,3vw,2.1rem);font-weight:300;direction:ltr;white-space:nowrap}
.shop-row .price small{font-size:.6em;color:var(--ink-faint)}
.shop-cta{margin-top:2.6rem}
.shop-cta .cta:hover{background:var(--ink);color:var(--ivory)}

/* ============ 06 SELECTED ============ */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.6rem}
.filters button{
  font-size:.9rem;padding:.55rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink-soft);transition:all .3s var(--ease);
}
.filters button.on,.filters button:hover{border-color:var(--ink);color:var(--ink);background:var(--cream)}
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2rem)}
.work{
  grid-column:span 6;position:relative;display:block;
}
.work img{border-radius:var(--r-lg)}
.work.wide{grid-column:span 12}
.work img{width:100%;height:clamp(260px,44vh,460px);object-fit:cover;transition:transform 1s var(--ease)}
.work:hover img{transform:scale(1.045)}
.work .meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 0 0;
}
.work .meta h3{font-size:1.25rem;font-weight:400}
.work .meta .cat{font-family:var(--font-lat);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);direction:ltr}
.work .meta .arrow{font-family:var(--font-lat);color:var(--ink-faint);transition:transform .3s var(--ease),color .3s;direction:ltr}
.work:hover .arrow{transform:translateX(-6px);color:var(--sand)}
[dir="ltr"] .work:hover .arrow{transform:translateX(6px)}
.work.hide{display:none}
@media (max-width:760px){.work{grid-column:span 12}}

/* ============ 08 CRAFT ============ */
#craft{
  position:relative;background:var(--ink);color:var(--ivory);
  margin:0 clamp(1.2rem,4vw,3.4rem);border-radius:var(--r-lg);overflow:hidden;
  min-height:92svh;display:flex;align-items:center;overflow:hidden;
}
#craft img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;filter:saturate(.7);
}
#craft .inner{position:relative;z-index:2;padding:clamp(4rem,10vh,7rem) clamp(1.2rem,4vw,3.4rem)}
#craft h2{font-size:clamp(3rem,10vw,8.5rem);font-weight:200;line-height:1.08}
#craft .fine{margin-top:2rem;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:300;color:#cfc6b2;letter-spacing:.04em}

/* ============ 09 ABOUT ============ */
#about .grid12{align-items:baseline}
#about h2{grid-column:span 5;font-size:clamp(2.6rem,7vw,5.4rem)}
#about .txt{grid-column:span 7;display:flex;flex-direction:column;gap:1.2rem;font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--ink-soft);max-width:60ch}
@media (max-width:880px){#about h2,#about .txt{grid-column:span 12}}

/* ============ 10 CONTACT ============ */
#contact{background:var(--cream);border-top:1px solid var(--line)}
#contact h2{font-size:clamp(3.2rem,12vw,9rem);font-weight:200;line-height:1.05}
#contact .ways{
  margin-top:clamp(2.4rem,6vh,4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
#contact .ways a{
  background:var(--cream);padding:1.9rem 1.7rem;
  display:flex;flex-direction:column;gap:.5rem;
  transition:background .3s var(--ease);
}
#contact .ways a:hover{background:var(--ivory)}
#contact .ways .k{font-family:var(--font-lat);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);direction:ltr}
#contact .ways .v{font-size:1.15rem;font-weight:400;direction:ltr;text-align:start}
/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line);background:var(--cream);
  padding:clamp(2.6rem,7vh,4.5rem) clamp(1.2rem,4vw,3.4rem) 1.6rem;
}
.f-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem,4vw,3.5rem);margin-bottom:2.6rem;
}
.f-col h4{
  font-family:var(--font-lat);font-size:.66rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:1.1rem;direction:ltr;
}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.f-col a{font-size:.98rem;display:inline-block}
.f-brand .logo{font-size:1.1rem}
.f-brand .he{font-family:var(--font-stam);font-size:1.5rem;margin-top:.4rem}
.f-brand p{color:var(--ink-soft);font-size:.92rem;max-width:30ch;margin-top:.9rem}
.f-contact li{color:var(--ink-soft);font-size:.95rem}
.f-contact .ltr{direction:ltr;unicode-bidi:isolate;text-align:start;display:inline-block}
.f-bottom{
  border-top:1px solid var(--line-soft);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
}
.f-bottom .socials{display:flex;gap:1.6rem;font-family:var(--font-lat);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;direction:ltr}
.f-bottom .tiny{font-size:.8rem;color:var(--ink-faint)}
@media (max-width:880px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f-grid{grid-template-columns:1fr}}

/* ============ WHATSAPP FLOTANTE ============ */
#waBtn{
  position:fixed;bottom:1.6rem;inset-inline-end:1.6rem;z-index:70;
  width:56px;height:56px;border-radius:50%;
  background:var(--ink);color:var(--ivory);
  border:2px solid var(--ivory);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(26,22,17,.28);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
#waBtn svg{width:28px;height:28px;fill:currentColor}
#waBtn:hover{background:var(--sand);color:var(--cream);transform:scale(1.07)}

/* ============ tienda reforzada ============ */
.shop-cats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.shop-cats a{
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.6rem 1.5rem;font-size:.95rem;
  transition:border-color .3s,color .3s;
}
.shop-cats a:hover{border-color:var(--sand)}
.shop-banner{
  margin-top:3rem;border-radius:var(--r-lg);background:var(--ink);color:var(--ivory);
  padding:clamp(2.2rem,6vh,3.6rem) clamp(1.4rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;
}
.shop-banner h3{font-family:var(--font-stam);font-size:clamp(1.8rem,4.5vw,3rem);font-weight:400}
.shop-banner p{color:#cfc6b2;margin-top:.4rem}
.shop-banner .cta{color:var(--ivory)}

/* ============ logo unificado ============ */
.logo{display:inline-flex;align-items:center;gap:.7rem}
.logo img{height:34px;width:auto;display:block}
#intro .intro-logo{height:clamp(72px,11vw,110px);width:auto;margin-bottom:.4rem}
.f-brand .logo img{height:40px}

/* ============ pagina de tienda ============ */
.page-head{
  padding:clamp(7rem,16vh,10rem) clamp(1.2rem,4vw,3.4rem) clamp(2rem,5vh,3rem);
}
.page-head h1{font-family:var(--font-stam);font-weight:400;font-size:clamp(3rem,9vw,6.5rem);line-height:1.22}
.page-head p{color:var(--ink-soft);max-width:52ch;margin-top:.8rem}
.prod-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  margin:0 clamp(1.2rem,4vw,3.4rem) clamp(4rem,10vh,7rem);
}
.prod{
  background:var(--ivory);padding:1.4rem;display:flex;flex-direction:column;gap:1rem;
  transition:background .3s var(--ease);
}
.prod:hover{background:var(--cream)}
.prod .ph{aspect-ratio:1;overflow:hidden;border-radius:var(--r-md);background:var(--cream)}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prod:hover .ph img{transform:scale(1.06)}
.prod h3{font-size:1.05rem;font-weight:400;line-height:1.4;flex:1}
.prod .foot{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.prod .price{font-family:var(--font-lat);font-size:1.25rem;font-weight:300;direction:ltr;white-space:nowrap}
.prod .price .from{font-family:var(--font-he);font-size:.72rem;color:var(--ink-faint)}
.prod .cat{font-size:.76rem;color:var(--ink-faint)}
.prod:hover h3,.prod:hover .price{color:var(--sand)}
.shop-filters{
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding:0 clamp(1.2rem,4vw,3.4rem) 2rem;
}
.shop-filters button{
  font-size:.92rem;padding:.6rem 1.6rem;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink-soft);transition:all .3s var(--ease);
}
.shop-filters button.on,.shop-filters button:hover{border-color:var(--sand);color:var(--sand);background:var(--cream)}
.prod-count{
  padding:0 clamp(1.2rem,4vw,3.4rem) 1.2rem;
  font-family:var(--font-lat);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
}

/* ============ teaser letras 3D ============ */
.ktav-3d{
  margin-top:clamp(1.6rem,4vh,2.6rem);
  display:flex;align-items:center;gap:clamp(1.2rem,4vw,2.8rem);
  background:var(--ink);color:var(--ivory);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,4vw,2.4rem) clamp(1.4rem,4vw,2.8rem);
  transition:background .4s var(--ease);
}
.ktav-3d:hover{background:#241e17}
.ktav-3d .glyph3d{
  font-family:var(--font-stam);font-size:clamp(3.4rem,9vw,6rem);line-height:1;
  color:var(--sand);flex:none;
  transition:transform .6s var(--ease);
  transform-style:preserve-3d;
}
.ktav-3d:hover .glyph3d{transform:rotateY(28deg) rotateX(8deg)}
.ktav-3d .txt{display:flex;flex-direction:column;gap:.35rem;flex:1}
.ktav-3d .label{color:#9a9282}
.ktav-3d .label::after{background:#3d382e}
.ktav-3d strong{font-family:var(--font-stam);font-weight:400;font-size:clamp(1.3rem,3.4vw,2.1rem);line-height:1.3}
.ktav-3d .sub{color:#cfc6b2;font-size:.98rem}
.ktav-3d .arrow{font-family:var(--font-lat);font-size:1.6rem;color:var(--sand);direction:ltr;transition:transform .35s var(--ease)}
.ktav-3d:hover .arrow{transform:translateX(-8px)}
[dir="ltr"] .ktav-3d:hover .arrow{transform:translateX(8px)}
.ktav-3d:hover strong{color:var(--sand)}
@media (max-width:560px){
  .ktav-3d{flex-wrap:wrap}
  .ktav-3d .arrow{display:none}
}

/* ---- header sobre el hero: texto claro hasta que aparece el fondo solido ----
   El menu hereda --ink (oscuro), pensado para el fondo marfil del resto de la
   pagina; sobre el hero velado quedaba ilegible. */
header:not(.solid){color:var(--ivory)}
header:not(.solid) .langs a{color:#b6ad99}
header:not(.solid) .langs a.on{color:var(--ivory)}
header:not(.solid) nav.desktop a:hover,
header:not(.solid) .langs a:hover{color:var(--sand)}

/* ---- intro: barra de progreso de 3s, sin boton ---- */
.intro-bar{
  width:min(220px,50vw);height:1px;background:var(--line);
  margin-top:2.6rem;overflow:hidden;
}
.intro-bar span{
  display:block;height:100%;width:100%;background:var(--sand);
  transform-origin:right;
}
@media (prefers-reduced-motion:no-preference){
  .intro-bar span{animation:introFill 3s linear forwards}
}
@keyframes introFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- letras: el nombre vive dentro del medallon ---- */
.letters button{flex-direction:column;gap:.1rem;line-height:1}
.letters button .g{font-size:1em;transition:transform .3s var(--ease)}
.letters button .nm{
  font-family:var(--font-he);font-size:.62rem;font-weight:400;
  letter-spacing:.06em;opacity:0;max-height:0;
  transition:opacity .3s var(--ease),max-height .3s var(--ease);
}
.letters button:hover .g,.letters button:focus-visible .g{transform:translateY(-.06em) scale(.92)}
.letters button:hover .nm,.letters button:focus-visible .nm{opacity:.85;max-height:1.4em}

/* ============================================================
   Capa de unificacion sobre styles.css / app.js
   app.js genera las tarjetas, el carrito y el footer con clases
   propias; aca se les da el lenguaje visual nuevo sin tocar el JS.
   ============================================================ */

/* --- cabecera de las paginas con app.js --- */
.yad-head{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1rem clamp(1.2rem,4vw,3.4rem);
  background:rgba(242,237,225,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.yad-head .desktop{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.yad-head .desktop a{font-size:.95rem;position:relative;padding:.2rem 0;color:var(--ink)}
.yad-head .desktop a::after{
  content:"";position:absolute;bottom:0;inset-inline-end:0;width:0;height:1px;
  background:var(--sand);transition:width .35s var(--ease);
}
.yad-head .desktop a:hover::after,.yad-head .desktop a.on::after{width:100%}
.yad-head .desktop a:hover,.yad-head .desktop a.on{color:var(--sand)}
.yad-head .langs button{
  font-family:var(--font-lat);font-size:.72rem;letter-spacing:.14em;
  color:var(--ink-faint);padding:0;
}
.yad-head .langs button:hover{color:var(--sand)}
.yad-head .cart-button{
  border:1px solid var(--ink);border-radius:var(--r-pill);
  padding:.55rem 1.4rem;font-size:.9rem;background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.yad-head .cart-button:hover{background:var(--ink);color:var(--ivory)}
@media (max-width:900px){
  .yad-head .desktop{display:none}
  .yad-head{gap:.8rem}
}

/* --- grilla y tarjetas de producto que emite app.js --- */
body[data-page="shop"]{background:var(--ivory);color:var(--ink);font-family:var(--font-he)}
.shop-layout{max-width:none;padding:0}
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin:0 0 clamp(3rem,8vh,5rem);
}
.product-card{
  background:var(--ivory);border:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden;
  transition:background .3s var(--ease);
}
.product-card:hover{background:var(--cream);transform:none;box-shadow:none}
.product-card>a{display:block;padding:1.4rem 1.4rem 0}
.product-card img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);
  background:var(--cream);transition:transform .8s var(--ease);
}
.product-card:hover img{transform:scale(1.05)}
.product-body{padding:1.1rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.product-card .product-meta{font-size:.76rem;color:var(--ink-faint);letter-spacing:.02em}
.product-card h3{font-size:1.05rem;font-weight:400;line-height:1.45;margin:0;flex:1}
.product-card h3 a{color:var(--ink)}
.product-card:hover h3 a{color:var(--sand)}
.product-card .price{
  font-family:var(--font-lat);font-size:1.25rem;font-weight:300;
  color:var(--ink);direction:ltr;text-align:start;
}
/* Insignia "bestseller" y estrellas fijas: aparecian identicas en todos los
   productos, sin reseñas reales detras. Se ocultan por honestidad y porque
   no encajan con el tono editorial. */
.product-card .product-badge,.product-card .product-stars,.shop-trust-strip{display:none}
.product-actions{display:flex;align-items:center;gap:.7rem;margin-top:.4rem;flex-wrap:wrap}
.product-actions button[data-add-cart]{
  border:1px solid var(--ink);border-radius:var(--r-pill);background:transparent;
  color:var(--ink);padding:.55rem 1.4rem;font-size:.9rem;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.product-actions button[data-add-cart]:hover{background:var(--ink);color:var(--ivory)}
.product-actions .wishlist-button{border:0;color:var(--ink-faint);font-size:1.1rem}
.product-actions .wishlist-button:hover{color:var(--sand)}
.product-actions>a{font-size:.86rem;color:var(--ink-faint)}
.product-actions>a:hover{color:var(--sand)}

/* --- filtros por categoria con foto --- */
.visual-categories{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(.8rem,2vw,1.4rem);
  padding:0 clamp(1.2rem,4vw,3.4rem) clamp(2rem,5vh,3rem);
}
.visual-categories button{
  position:relative;border:0;padding:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--cream);
}
.visual-categories img{width:100%;height:clamp(150px,22vh,210px);object-fit:cover;transition:transform .9s var(--ease)}
.visual-categories button:hover img{transform:scale(1.05)}
.visual-categories button>span{
  position:absolute;inset:auto 0 0 0;padding:1rem 1.2rem;
  background:linear-gradient(180deg,transparent,rgba(26,22,17,.82));
  color:var(--ivory);font-size:1.1rem;text-align:start;
}

/* La tienda tiene solo dos categorias, asi que siempre van una al lado de la
   otra. Con auto-fit el telefono las apilaba y la segunda quedaba debajo del
   pliegue: parecia que no existia. */
.visual-categories-two{grid-template-columns:1fr 1fr}
/* styles.css le pone min-height 245px al boton, pero la foto de yad.css mide
   186px: sobraban 59px de crema vacia arriba de cada tarjeta. */
.visual-categories-two button{min-height:0}
.visual-categories-two img{height:auto;aspect-ratio:4/3}
@media (max-width:560px){
  .visual-categories button>span{padding:.7rem .8rem;font-size:.95rem}
}

/* El estado activo venia de styles.css como border-color, pero aca el boton
   tiene border:0, asi que el ancho quedaba en 0 y el dorado no se dibujaba
   nunca: se podia filtrar sin ver cual categoria estaba elegida. El outline
   no depende del border ni corre el layout. */
.visual-categories button.is-active{
  outline:2px solid var(--sand);outline-offset:-2px;
}
.visual-categories button.is-active>span{
  background:linear-gradient(180deg,transparent,rgba(169,140,79,.92));
}

/* --- footer que inyecta app.js (multi-idioma) --- */
.site-footer{
  background:var(--cream);border-top:1px solid var(--line);color:var(--ink);
  padding:clamp(2.6rem,7vh,4rem) clamp(1.2rem,4vw,3.4rem) 2rem;
}
.site-footer .footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:clamp(1.6rem,4vw,3rem);max-width:1200px;margin:0 auto;
}
.site-footer h2{font-family:var(--font-stam);font-weight:400;font-size:1.7rem;line-height:1.3;color:var(--ink)}
.site-footer h3{
  font-family:var(--font-lat);font-size:.66rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem;
}
.site-footer p{color:var(--ink-soft);font-size:.92rem;max-width:32ch}
.site-footer a{display:block;color:var(--ink);font-size:.96rem;padding:.28rem 0;transition:color .3s var(--ease)}
.site-footer a:hover{color:var(--sand)}
.site-footer span{display:block;color:var(--ink-soft);font-size:.9rem;padding:.28rem 0}
.footer-social{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.footer-social-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem}

/* --- carrito --- */
.cart-drawer{background:var(--cream);color:var(--ink);border-inline-start:1px solid var(--line)}
.cart-drawer h2,.cart-drawer h3{font-family:var(--font-stam);font-weight:400}
.cart-drawer button{border-radius:var(--r-pill)}

/* styles.css pinta la cabecera en oscuro y deja el texto en marfil; aca se
   fuerza la tinta porque el fondo nuevo es claro. */
.yad-head,.yad-head .logo{color:var(--ink)}
.yad-head .logo{font-family:var(--font-lat);font-weight:500;font-size:.95rem;letter-spacing:.3em;direction:ltr}
.yad-head [data-cart-count]{
  background:var(--sand);color:var(--cream);border-radius:var(--r-pill);
  min-width:1.4em;height:1.4em;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-family:var(--font-lat);
}

/* styles.css centra la tarjeta y le pone caja a la categoria: se alinea al
   inicio (editorial) y se limpia la caja. */
.product-card,.product-body{text-align:start}
.product-card .product-meta{
  background:none;border:0;padding:0;border-radius:0;
  font-family:var(--font-lat);letter-spacing:.16em;text-transform:uppercase;
  font-size:.64rem;
}
.product-actions{justify-content:flex-start}


/* ---- paginas LTR (/en/, /es/) ----
   Omstam solo tiene glifos hebreos: en latin caeria a un fallback generico.
   Cormorant Garamond mantiene el aire editorial y de manuscrito. */
[dir="ltr"] h2.display,[dir="ltr"] #hero h1,[dir="ltr"] #craft h2,
[dir="ltr"] #contact h2,[dir="ltr"] .page-head h1,[dir="ltr"] .shop-banner h3,
[dir="ltr"] .ktav-3d strong,[dir="ltr"] .f-brand .he,[dir="ltr"] .site-footer h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;letter-spacing:0;line-height:1.15;
}
/* La marca y las letras del alfabeto siguen en Omstam aunque la pagina sea LTR */
[dir="ltr"] .letters button,[dir="ltr"] .ktav-3d .glyph3d{
  font-family:var(--font-stam);
}

/* --- ficha de producto --- */
body[data-page="product"]{background:var(--ivory);color:var(--ink);font-family:var(--font-he)}
.product-page{max-width:1180px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1.2rem,4vw,3.4rem) clamp(4rem,10vh,6rem)}
.breadcrumb{font-size:.82rem;color:var(--ink-faint);margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.breadcrumb a{color:var(--ink-faint)}
.breadcrumb a:hover{color:var(--sand)}
.product-detail{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,5vw,4rem);align-items:start;
}
@media (max-width:820px){.product-detail{grid-template-columns:1fr}}
.product-gallery,.product-info{background:none;border:0;box-shadow:none;padding:0}
.product-main-image{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--cream);
}
.product-main-image img{width:100%;height:auto;display:block}
.product-info .eyebrow{
  font-family:var(--font-lat);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-faint);
}
.product-info h1{
  font-family:var(--font-stam);font-weight:400;line-height:1.22;
  font-size:clamp(1.9rem,4.5vw,3.2rem);margin:.6rem 0 1.2rem;color:var(--ink);
}
[dir="ltr"] .product-info h1{font-family:'Cormorant Garamond',Georgia,serif}
.product-info .product-meta{
  display:inline-block;background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.4rem 1.1rem;font-size:.8rem;color:var(--ink-soft);
}
.product-page-price{
  font-family:var(--font-lat);font-weight:300;font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--ink);direction:ltr;text-align:start;margin:1.2rem 0;
}
.product-actions.large button,.product-actions.large a{
  border-radius:var(--r-pill);padding:.85rem 2rem;font-size:1rem;
}
.product-description-section,.product-specs{
  border-top:1px solid var(--line);margin-top:clamp(2.4rem,6vh,4rem);padding-top:clamp(1.6rem,4vh,2.4rem);
  background:none;box-shadow:none;
}
.product-description-section h2,.product-specs h2{
  font-family:var(--font-stam);font-weight:400;font-size:1.5rem;margin-bottom:1rem;
}
[dir="ltr"] .product-description-section h2,[dir="ltr"] .product-specs h2{font-family:'Cormorant Garamond',Georgia,serif}
.product-description-section p,.product-specs li,.product-specs td{color:var(--ink-soft);line-height:1.75}