/* ============================================================
   BASE - fuentes, tokens de color, reset, tipografia base.
   Portado del prototipo aprobado (Design System v1.0). Modulo: Home.
   ============================================================ */

/* Fuentes */
  @font-face{font-family:'Anton';src:url(../fonts/anton-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:'Oswald';src:url(../fonts/oswald-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;}
  @font-face{font-family:'Oswald';src:url(../fonts/oswald-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}
  @font-face{font-family:'Barlow';src:url(../fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:'Barlow';src:url(../fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* Tokens de color - paleta de marca (Home) */
  :root{
    --bg:#0d0b08;
    --bg-raised:#18140d;
    --bg-raised-2:#211a10;
    --gold:#c9973f;
    --gold-bright:#e8c979;
    --gold-dim:#6b5427;
    --ink:#ffffff;
    --ink-muted:#a99b82;
    --line:rgba(201,151,63,0.25);
    --maxw:1180px;
    --radius:2px;
  }

/* Tokens de color - variante clara (soporte de tema, no usada activamente hoy).
   El Design System define la capa de marca (Home/Categoria/Producto) como
   SIEMPRE oscura, sin excepcion por preferencia de sistema operativo del
   visitante - por eso el "@media (prefers-color-scheme: light)" que activaba
   esto automaticamente se quita: hacia que toda la paleta cambiara a esta
   variante clara para cualquier visitante con el modo claro activado en su
   sistema, sin que nadie lo pidiera. Se deja el selector manual
   ":root[data-theme=light]" inerte, por si en el futuro se decide agregar un
   selector explicito de tema - hoy nada lo activa. */
  :root[data-theme="light"]{
    --bg:#f7f3ea;
    --bg-raised:#ffffff;
    --bg-raised-2:#efe7d6;
    --ink:#1b160e;
    --ink-muted:#5d5340;
    --line:rgba(120,90,30,0.25);
  }

/* Token de acento - capa transaccional (Personalizador + Checkout) */
  :root{--flow-orange:#f2932b;--flow-orange-dark:#d97f1e;}

/* Reset y elementos base */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);overflow-x:hidden;}
  body{
    font-family:'Barlow',system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  /* Woodmart tiene "legend, h1, h2, h3, h4, h5, h6, .title { color: var(--wd-title-color); }"
     con la misma especificidad que estas reglas - en un empate gana quien
     carga despues, que resulta ser Woodmart. Se usa !important para no
     depender del orden de carga (mismo caso que el fondo del body). */
  h1,h2,h3{font-family:'Anton',system-ui,sans-serif;font-weight:400;line-height:0.98;margin:0;text-wrap:balance;letter-spacing:0.01em;color:var(--ink) !important;}
  h4,h5,h6{margin:0;color:var(--ink) !important;}
  .eyebrow{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:0.18em;font-size:12.5px;color:var(--gold);}
  .label{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* Oculta visualmente pero deja disponible para lectores de pantalla/SEO. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

/* Scroll reveal (accesible: respeta prefers-reduced-motion).
   ".reveal" es el marcador que observa el IntersectionObserver de
   theme.js; cada variante "reveal-*" define su propio punto de partida,
   duracion y curva, para que no todo entre igual. ".reveal-dN" agrega
   una pequena demora extra (para escalonar varios elementos de un mismo
   bloque, ej. texto chico -> titulo -> parrafo -> boton). Livianito: una
   sola transicion CSS por elemento, sin animacion por JS ni recalculo
   continuo en cada scroll. */
  @media (prefers-reduced-motion:no-preference){
    .reveal-up{
      opacity:0;transform:translateY(24px);
      transition:opacity .5s ease-out, transform .6s cubic-bezier(.34,1.56,.64,1);
    }
    .reveal-left{
      opacity:0;transform:translateX(-32px);
      transition:opacity .5s ease-out, transform .6s cubic-bezier(.22,.9,.32,1);
    }
    .reveal-right{
      opacity:0;transform:translateX(32px);
      transition:opacity .5s ease-out, transform .6s cubic-bezier(.22,.9,.32,1);
    }
    .reveal-zoom{
      opacity:0;transform:scale(.92);
      transition:opacity .45s ease-out, transform .5s cubic-bezier(.34,1.56,.64,1);
    }
    .reveal-up.in-view,.reveal-left.in-view,.reveal-right.in-view,.reveal-zoom.in-view{
      opacity:1;transform:none;
    }
    .reveal-d1{transition-delay:.08s;}
    .reveal-d2{transition-delay:.16s;}
    .reveal-d3{transition-delay:.24s;}
    .reveal-d4{transition-delay:.32s;}
  }

/* Marcador de dato pendiente de confirmar */
  .pending{
    border-bottom:1px dashed var(--gold-dim);
    position:relative;
    cursor:help;
  }
  .pending::after{
    content:"dato pendiente de confirmar";
    position:absolute;left:0;bottom:-22px;
    font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold-dim);white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .15s ease;
  }
  .pending:hover::after{opacity:1;}

/* Scrollbar */
  ::-webkit-scrollbar{height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--gold-dim);}