/* ==========================================================================
   Somnia Concept — tokens.css
   Variables de diseño (paleta real del tema), reset y tipografía.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* Fondos */
  --color-bg-main:#ffffff;
  --color-bg-soft:#f6f6f4;
  --color-bg-card:#ffffff;
  --color-bg-gray:#e9e9e9;

  /* Texto */
  --color-text-main:#6d7587;
  --color-text-muted:#a0a0a0;
  --color-heading:#183f91;

  /* Marca / acento */
  --color-primary:#183f91;
  --color-primary-soft:#eaf0fb;
  --color-accent:#ffce52;
  --color-accent-soft:#fff6df;

  /* Botones */
  --color-button-bg:#183f91;
  --color-button-text:#ffffff;
  --color-button-hover:#12317a;

  /* UI ecommerce */
  --color-border:#e9e9e9;
  --color-border-strong:#dcdce0;
  --color-sale:#f03e3e;
  --color-badge-bg:#ffce52;
  --color-badge-text:#183f91;
  --color-star:#ffce52;

  /* Radios */
  --radius-button:6px;
  --radius-card:12px;
  --radius-badge:6px;
  --radius-pill:999px;

  /* Sombras */
  --shadow-sm:0 2px 8px rgba(24,63,145,.06);
  --shadow-md:0 10px 30px rgba(24,63,145,.10);
  --shadow-lg:0 24px 60px rgba(24,63,145,.14);

  /* Layout */
  --container:1280px;
  --container-wide:1440px;
  --gutter:24px;
  --section-y:90px;

  /* Tipografía */
  --font-base:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-body:16px;
  --lh-body:1.65;

  /* Transiciones */
  --t-fast:.18s ease;
  --t:.28s ease;
}

/* --------- Reset --------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text-main);
  background:var(--color-bg-main);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;font-size:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .4em;
  font-family:var(--font-base);
  color:var(--color-heading);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.4rem,4.4vw,3.5rem);}
h2{font-size:clamp(1.9rem,3.2vw,2.65rem);}
h3{font-size:clamp(1.5rem,2.4vw,1.9rem);}
h4{font-size:1.3rem;}
h5{font-size:1.1rem;}
p{margin:0 0 1em;}

/* --------- Utilidades --------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--wide{max-width:var(--container-wide);}
.section{padding-block:var(--section-y);}
.section--soft{background:var(--color-bg-soft);}
.text-center{text-align:center;}
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--color-primary);
  margin-bottom:.8rem;
}
.muted{color:var(--color-text-muted);}
.lead{font-size:1.08rem;color:var(--color-text-main);}
.section-head{max-width:640px;margin:0 auto 48px;}
.section-head.text-center{margin-inline:auto;}

/* Placeholder para assets faltantes — bloque sólido con la paleta */
.placeholder-img{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;
  background:linear-gradient(135deg,var(--color-primary-soft),#fff);
  color:var(--color-primary);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--color-border);
}

.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;
}
[hidden]{display:none !important;}