/* Tokens (colores tomados del logo; ajustar solo aquí) */
:root{
  --nude:#E2D3C4; --taupe:#9C8B7C; --cacao:#4F433A; --ivory:#FBF8F4; --sombra:#CDB9A8;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --max:1100px;
}
/* Fuentes: alojarlas en assets/fonts (ver README). Si faltan, se usan las de respaldo. */
@font-face{font-family:"Cormorant Garamond";src:url(../assets/fonts/cormorant-garamond-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url(../assets/fonts/jost-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../assets/fonts/jost-500.woff2) format("woff2");font-weight:500;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--ivory);color:var(--cacao);font:400 1.0625rem/1.65 var(--sans)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cacao);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:.5rem clamp(1rem,4vw,3rem);background:#fff;border-bottom:1px solid var(--nude)}
.brand img{display:block;height:56px;width:auto}
.top nav{display:flex;align-items:center;gap:clamp(.75rem,2.5vw,2rem)}
.top nav a{text-decoration:none;padding:.4rem 0}
.top nav a:hover{text-decoration:underline;text-underline-offset:6px}
.lang{font:500 .9rem var(--sans);background:none;border:1px solid var(--taupe);color:var(--cacao);padding:.3rem .7rem;border-radius:2rem;cursor:pointer}

h1,h2{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0 0 1rem;color:var(--cacao)}
h1{font-size:clamp(2.6rem,7vw,5rem);max-width:13ch}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}

/* Hero: el pliegue diagonal del logo es el elemento memorable */
.hero{display:grid;grid-template-columns:1.2fr 1fr;min-height:72vh;max-width:none;overflow:hidden}
.hero__text{padding:clamp(2.5rem,7vw,6rem) clamp(1.25rem,5vw,4rem);align-self:center;max-width:44rem;justify-self:end}
.hero__text p{max-width:34rem;font-size:1.2rem}
.hero__fold{background:var(--nude);display:flex;flex-direction:column;justify-content:center;
  padding:3rem clamp(1.5rem,5vw,4rem) 3rem 22%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  filter:drop-shadow(-10px 0 14px var(--sombra))}
.fold__title,.fold__note{margin:0;color:var(--cacao)}
.hero__fold ul{list-style:none;margin:.2rem 0;padding:0;font:500 clamp(2rem,4vw,3rem)/1.15 var(--serif)}

.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn{display:inline-block;padding:.85rem 1.5rem;border:1.5px solid var(--cacao);border-radius:2rem;text-decoration:none;font-weight:500}
.btn:hover{background:var(--nude)}
.btn--main{background:var(--cacao);color:var(--ivory)}
.btn--main:hover{background:#3a312a}

.sec{padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,4rem);max-width:var(--max);margin:0 auto}
.sec--tint{max-width:none;background:var(--nude)}
.sec--tint>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.sec p{max-width:40rem}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.empty{grid-column:1/-1;color:var(--taupe);color:#6f6054}

.foot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:2rem clamp(1.25rem,5vw,4rem);
  border-top:1px solid var(--nude);font-size:.95rem}
.foot nav{display:flex;gap:1.25rem}
[hidden]{display:none!important}

@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .hero__text{justify-self:start}
  .hero__fold{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);padding:4.5rem 1.5rem 2.5rem;filter:none}
  .top nav a:not(.lang){display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}