/* ============================================================
   LAIA STUDIO — Estilos
   Paleta: negro carbón, crema, arena, blanco
   ============================================================ */
:root{
  --black:#0d0d0d;
  --ink:#141414;
  --cream:#f4f1ec;
  --cream-2:#efe9e1;
  --sand:#d8cbb8;
  --sand-btn:#cbb79c;
  --white:#ffffff;
  --gray:#8a8a8a;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(0,0,0,.12);
  --maxw:1200px;
  --font-serif:'Cormorant', Georgia, serif;
  --font-head:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Jost', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
svg{width:100%;height:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Logo ---------- */
.brand{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:currentColor;}
.brand__name{font-family:var(--font-serif);font-weight:400;letter-spacing:.34em;text-indent:.34em;}
.brand__sub{display:flex;align-items:center;gap:.5em;font-family:var(--font-head);font-weight:300;letter-spacing:.5em;text-indent:.5em;margin-top:.35em;opacity:.9;}
.brand__line{width:1.4em;height:1px;background:currentColor;opacity:.7;}
.brand__lhr{font-family:var(--font-serif);font-weight:500;letter-spacing:.15em;margin-top:.55em;opacity:.85;}
.brand__lhr span{font-style:normal;}
.brand--md .brand__name{font-size:30px;}
.brand--md .brand__sub{font-size:9px;}
.brand--md .brand__lhr{font-size:15px;}
.brand--sm .brand__name{font-size:21px;}
.brand--sm .brand__sub{font-size:6.5px;}
.brand--sm .brand__lhr{font-size:11px;}
.brand--xs .brand__name{font-size:15px;}
.brand--xs .brand__sub{font-size:5.5px;}

/* ---------- Header ---------- */
.site-header{background:var(--black);color:var(--white);}
.topbar{border-bottom:1px solid var(--line);font-family:var(--font-head);}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;height:38px;font-size:11px;letter-spacing:.14em;}
.topbar__ship{display:inline-flex;align-items:center;gap:8px;color:#cfcac2;}
.topbar__ship svg{width:15px;height:15px;}
.topbar__social{display:flex;gap:18px;}
.topbar__social a{width:16px;height:16px;color:#cfcac2;transition:color .2s;}
.topbar__social a:hover{color:#fff;}

.navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:96px;}
.nav{display:flex;gap:34px;font-family:var(--font-head);font-size:13px;letter-spacing:.16em;}
.nav a{color:#e9e5df;transition:color .2s;}
.nav a:hover{color:#fff;}
.logo-center{justify-self:center;}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:22px;}
.nav-actions button{width:21px;height:21px;color:#e9e5df;position:relative;transition:color .2s;}
.nav-actions button:hover{color:#fff;}
.nav-actions .cart{width:auto;display:flex;align-items:center;gap:7px;}
.nav-actions .cart svg{width:21px;height:21px;}
.cart__count{font-family:var(--font-head);font-size:12px;letter-spacing:.05em;}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;min-height:520px;display:flex;align-items:center;
  background:
    linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(12,12,12,.55) 46%,rgba(20,18,16,.15) 100%),
    linear-gradient(120deg,#3a3630,#26221d 55%,#454039);
  background-size:cover;background-position:center;
}
.hero__overlay{position:absolute;inset:0;background:radial-gradient(120% 120% at 78% 40%,transparent 40%,rgba(0,0,0,.45));}
.hero__inner{position:relative;width:100%;padding-top:70px;padding-bottom:70px;}
.hero__content{max-width:520px;}
.hero__eyebrow{font-family:var(--font-head);font-size:13px;letter-spacing:.35em;color:#d6cfc4;margin-bottom:18px;}
.hero__title{font-family:var(--font-head);font-weight:700;font-size:82px;line-height:.94;letter-spacing:.01em;text-transform:uppercase;}
.hero__text{font-weight:300;font-size:19px;color:#e4ded5;margin:26px 0 34px;line-height:1.55;}
.hero__dots{display:flex;gap:12px;margin-top:44px;}
.hero__dots span{width:34px;height:2px;background:rgba(255,255,255,.3);}
.hero__dots .is-active{background:#fff;}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);
  font-size:13px;letter-spacing:.2em;padding:16px 34px;transition:.22s;text-transform:uppercase;}
.btn--sand{background:var(--sand-btn);color:#1a1712;}
.btn--sand:hover{background:#bda684;}
.btn--dark{background:var(--black);color:#fff;padding:17px 46px;}
.btn--dark:hover{background:#000;letter-spacing:.24em;}

/* ---------- Features ---------- */
.features{background:var(--black);color:#fff;}
.features__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.feature{display:flex;gap:16px;align-items:flex-start;padding:34px 30px;border-left:1px solid var(--line);}
.feature:first-child{border-left:0;}
.feature__icon{width:34px;height:34px;flex:0 0 34px;color:#e9e5df;margin-top:2px;}
.feature h3{font-family:var(--font-head);font-weight:500;font-size:13px;letter-spacing:.13em;margin-bottom:7px;}
.feature p{font-size:12.5px;color:#a7a29a;line-height:1.5;font-weight:300;}

/* ---------- Secciones ---------- */
.section{padding:76px 0;background:var(--cream);}
.section--tight{padding-top:8px;}
.section__head{text-align:center;margin-bottom:40px;}
.section__head h2{font-family:var(--font-head);font-weight:600;font-size:34px;letter-spacing:.06em;color:#181818;}
.section__head p{font-weight:300;color:#7d766c;margin-top:8px;font-size:16px;}
.section__cta{text-align:center;margin-top:44px;}

/* ---------- Colecciones ---------- */
.collections{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.collection{position:relative;aspect-ratio:.78;border-radius:2px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;isolation:isolate;}
.collection__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .4s;}
.collection:hover .collection__img{transform:scale(1.06);}
.collection__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.78));z-index:1;transition:.3s;}
.collection::before{content:"";position:absolute;inset:0;z-index:0;transition:transform .4s;}
.collection:hover::before{transform:scale(1.06);}
.collection--urban::before{background:linear-gradient(135deg,#2c2c2c,#0e0e0e);}
.collection--minimal::before{background:linear-gradient(135deg,#c9b59d,#8a7860);}
.collection--anime::before{background:linear-gradient(135deg,#20242b,#0c0e12);}
.collection--vintage::before{background:linear-gradient(135deg,#4a4f3f,#23261d);}
.collection--graffiti::before{background:linear-gradient(135deg,#4b2f63,#241436);}
.collection__body{position:relative;z-index:2;padding:22px 20px;display:flex;flex-direction:column;gap:6px;}
.collection__name{font-family:var(--font-head);font-weight:600;font-size:22px;letter-spacing:.06em;}
.collection__desc{font-size:12.5px;font-weight:300;color:#e6e1d9;line-height:1.4;}
.collection__more{font-family:var(--font-head);font-size:11px;letter-spacing:.2em;margin-top:6px;position:relative;display:inline-block;}
.collection__more::after{content:"";display:block;height:1px;width:26px;background:#fff;margin-top:4px;transition:width .3s;}
.collection:hover .collection__more::after{width:52px;}

/* ---------- Productos ---------- */
.products{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.product{display:flex;flex-direction:column;}
.product__media{position:relative;aspect-ratio:1;border-radius:2px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product__media--black{background:#161616;color:#f4f1ec;}
.product__media--white{background:#ececec;color:#2a2a2a;}
.product__media--sand{background:#ddd2c1;color:#4a4234;}
.product__mock{opacity:.9;transform:scale(1.1);}
.product__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.badge{position:absolute;top:12px;left:12px;font-family:var(--font-head);font-size:10px;letter-spacing:.14em;padding:5px 11px;border-radius:2px;color:#fff;z-index:2;}
.badge--new{background:#1c1c1c;}
.badge--best{background:#7a6a52;}
.product__media--white .badge--new{background:#1c1c1c;}
.product__info{display:flex;justify-content:space-between;align-items:flex-end;padding-top:14px;}
.product__name{font-family:var(--font-head);font-weight:500;font-size:13.5px;letter-spacing:.08em;color:#1c1c1c;}
.product__price{font-weight:300;color:#6f685e;font-size:14px;margin-top:5px;}
.product__add{width:38px;height:38px;flex:0 0 38px;background:var(--black);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.22s;}
.product__add svg{width:18px;height:18px;}
.product__add:hover{background:#000;transform:translateY(-2px);}

/* ---------- Instagram ---------- */
.ig{background:var(--black);color:#fff;}
.ig__bar{display:flex;justify-content:space-between;align-items:center;height:64px;font-family:var(--font-head);font-size:13px;letter-spacing:.18em;color:#e9e5df;}
.ig__mid{color:#b6b0a7;}
.ig__link{color:#fff;}
.ig__grid{display:grid;grid-template-columns:repeat(6,1fr);}
.ig__cell{aspect-ratio:.86;display:flex;align-items:center;justify-content:center;position:relative;color:rgba(255,255,255,.5);transition:.3s;}
.ig__cell--0{background:#171717;}
.ig__cell--1{background:#20201e;}
.ig__cell--2{background:#111;}
.ig__cell::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:.3s;}
.ig__cell:hover::after{background:rgba(0,0,0,.35);}

/* ---------- Footer ---------- */
.footer{background:var(--cream-2);color:#2b2b2b;padding-top:56px;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr 1.2fr;gap:30px;padding-bottom:44px;}
.footer__brand{color:#1c1c1c;}
.footer__tag{font-family:var(--font-head);font-size:11px;letter-spacing:.3em;color:#8a8378;margin-top:16px;}
.footer__col h4{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.16em;margin-bottom:18px;color:#1c1c1c;}
.footer__col a{display:block;font-size:13.5px;font-weight:300;color:#5f584e;margin-bottom:11px;transition:color .2s;}
.footer__col a:hover{color:#000;}
.footer__social{display:flex;gap:14px;}
.footer__social a{width:20px;height:20px;color:#3a352e;margin:0;}
.footer__news p{font-size:13px;font-weight:300;color:#5f584e;margin-bottom:14px;}
.news{display:flex;border-bottom:1px solid #b7ad9f;}
.news input{flex:1;border:0;background:none;padding:9px 2px;font-family:var(--font-body);font-size:13px;color:#2b2b2b;outline:none;}
.news input::placeholder{color:#9a9184;}
.news button{width:34px;height:34px;color:#2b2b2b;}
.news button svg{width:18px;height:18px;}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;height:60px;border-top:1px solid var(--line-dark);font-size:12px;font-weight:300;color:#7a7266;}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero__title{font-size:64px;}
  .features__grid{grid-template-columns:repeat(2,1fr);}
  .feature:nth-child(3){border-left:0;}
  .collections{grid-template-columns:repeat(3,1fr);}
  .products{grid-template-columns:repeat(3,1fr);}
  .ig__grid{grid-template-columns:repeat(3,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .wrap{padding:0 18px;}
  .navbar{grid-template-columns:1fr auto;height:76px;}
  .nav{display:none;}
  .hero{min-height:440px;}
  .hero__title{font-size:48px;}
  .hero__text{font-size:16px;}
  .features__grid{grid-template-columns:1fr;}
  .feature{border-left:0;border-top:1px solid var(--line);}
  .feature:first-child{border-top:0;}
  .collections,.products{grid-template-columns:repeat(2,1fr);}
  .ig__grid{grid-template-columns:repeat(2,1fr);}
  .ig__bar{flex-direction:column;height:auto;gap:8px;padding:18px 0;text-align:center;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;gap:6px;height:auto;padding:18px 0;text-align:center;}
}

/* ============================================================
   Página de catálogo (/productos)
   ============================================================ */
.catalog-hero{background:var(--cream-2);border-bottom:1px solid var(--line-dark);padding:46px 0 40px;}
.catalog-hero__crumb{font-family:var(--font-head);font-size:12px;letter-spacing:.14em;color:#8a8378;text-transform:uppercase;}
.catalog-hero__crumb a{color:#8a8378;}
.catalog-hero__crumb a:hover{color:#1c1c1c;}
.catalog-hero__title{font-family:var(--font-head);font-weight:600;font-size:38px;letter-spacing:.06em;color:#181818;margin-top:10px;}
.catalog-hero__text{font-weight:300;color:#7d766c;margin-top:8px;font-size:15px;}
.section--catalog{padding-top:44px;}
.products--catalog{grid-template-columns:repeat(4,1fr);gap:24px 18px;}
.catalog-empty{grid-column:1/-1;text-align:center;color:#a49d90;padding:40px 0;}
@media (max-width:1000px){ .products--catalog{grid-template-columns:repeat(3,1fr);} }
@media (max-width:680px){
  .catalog-hero__title{font-size:28px;}
  .products--catalog{grid-template-columns:repeat(2,1fr);}
}