/* ============================================================
   BODEGA DE MUEBLES SANTA CATARINA
   Concepto: "El hogar cobra vida"
   Sistema de diseño · Anton + Montserrat · cálido cinematográfico
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* color */
  --paper:#faf7f2;
  --paper-2:#f3ece1;
  --cream:#efe6d8;
  --sand:#e6dac6;
  --sand-2:#d8c8ae;
  --cafe:#372514;
  --cafe-soft:#54402b;
  --espresso:#23160c;
  --ink:#1c140d;
  --naranja:#ffa43a;
  --naranja-deep:#ef8b1c;
  --azul:#0090f8;
  --muted:#8d7c66;
  --line:rgba(55,37,20,.12);
  --line-strong:rgba(55,37,20,.22);
  --on-dark-muted:rgba(250,247,242,.62);

  /* type */
  --font-display:'Anton',-apple-system,sans-serif;
  --font-sans:'Montserrat',-apple-system,'Segoe UI',sans-serif;

  /* shadow */
  --sh-sm:0 2px 8px rgba(35,22,12,.06), 0 1px 2px rgba(35,22,12,.05);
  --sh-md:0 18px 40px -20px rgba(35,22,12,.28), 0 6px 14px -8px rgba(35,22,12,.18);
  --sh-lg:0 50px 90px -40px rgba(35,22,12,.45), 0 20px 40px -24px rgba(35,22,12,.30);
  --sh-glow:0 30px 70px -30px rgba(255,164,58,.45);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* layout */
  --pad:clamp(20px,5vw,80px);
  --maxw:1480px;
  --radius:22px;
  --radius-lg:34px;
  --nav-h:74px;
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--naranja);color:var(--espresso)}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}

/* ---------- TYPE ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.eyebrow{
  font-size:clamp(11px,1vw,13px);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--naranja-deep);
}
.eyebrow--light{color:var(--naranja)}

/* ---------- UTILITIES ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(70px,10vw,150px)}
.dark-zone{background:var(--cafe);color:var(--paper)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--muted);font-weight:400;line-height:1.7;max-width:54ch}
.dark-zone .lead{color:var(--on-dark-muted)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;border-radius:100px;
  transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-out), background .35s var(--ease-soft), color .35s;
  will-change:transform;
}
.btn svg{width:18px;height:18px}
.btn--solid{background:var(--cafe);color:var(--paper)}
.btn--solid:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.btn--accent{background:var(--naranja);color:var(--espresso)}
.btn--accent:hover{transform:translateY(-3px);box-shadow:var(--sh-glow)}
.btn--ghost{background:rgba(250,247,242,.08);color:var(--paper);border:1px solid rgba(250,247,242,.28);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(250,247,242,.16);transform:translateY(-3px)}
.btn--outline{border:1.5px solid var(--line-strong);color:var(--cafe)}
.btn--outline:hover{background:var(--cafe);color:var(--paper);transform:translateY(-3px)}
.btn--lg{padding:18px 34px;font-size:16px}

.link-underline{position:relative;font-weight:600;display:inline-flex;align-items:center;gap:.5em}
.link-underline::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}
.link-underline svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.link-underline:hover svg{transform:translateX(4px)}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal="blur"]{filter:blur(14px)}
[data-reveal="blur"].in{filter:blur(0)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal="scale"].in{transform:none}
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
}

/* ---------- MPA · transición entre páginas reales ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
}

/* ---------- TARJETA como enlace real ---------- */
.pcard__link{display:block;color:inherit;text-decoration:none}

/* ---------- Subpáginas (categoría, producto, búsqueda…) ----- */
body.is-subpage .subpage-wrap{padding-top:var(--nav-h)}