/* ============================================================
   METRO COLCHONES — Sistema de diseño
   ============================================================ */
:root{
  /* Marca */
  --navy:#104080;
  --navy-700:#0c3268;
  --navy-900:#081f44;
  --blue:#1070b0;
  --sky:#60c0f0;
  --sky-soft:#bfe4f8;

  /* Neutros (azulados) */
  --ink:#0f1b2d;
  --ink-soft:#43536a;
  --muted:#7c8aa0;
  --line:#e4eaf2;
  --line-strong:#d2dbe8;
  --mist:#f2f6fb;
  --mist-2:#e9f0f8;
  --paper:#ffffff;

  /* Acento de utilidad */
  --gold:#e0a83c;        /* ofertas / cuotas */
  --green:#1f9d63;       /* envío / stock */

  /* Tokens ajustables por Tweaks */
  --accent:var(--navy);          /* color de marca principal en CTAs */
  --accent-ink:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --tex-opacity:0.14;            /* intensidad de textura ondulada */
  --section-navy:1;             /* 1 = usa secciones navy */

  --shadow-sm:0 1px 2px rgba(15,27,45,.06), 0 2px 8px rgba(15,27,45,.05);
  --shadow-md:0 4px 14px rgba(15,27,45,.08), 0 12px 32px rgba(15,27,45,.07);
  --shadow-lg:0 18px 50px rgba(16,64,128,.16);

  --maxw:1280px;
  --font-display:"Archivo", system-ui, sans-serif;
  --font-ui:"Hanken Grotesk", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
::selection{background:var(--sky);color:var(--navy-900);}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--ink);}
.display{font-weight:900;letter-spacing:-.03em;}
p{margin:0;}

/* Layout helpers */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 24px;width:100%;}
.section{padding:72px 0;}
.section-tight{padding:48px 0;}
.eyebrow{
  font-family:var(--font-ui);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);
}
.muted{color:var(--muted);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.center{display:flex;align-items:center;justify-content:center;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-ui);font-weight:800;font-size:15px;letter-spacing:.01em;
  padding:13px 24px;border-radius:var(--radius-sm);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s;
  white-space:nowrap;border:2px solid transparent;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px rgba(16,64,128,.24);}
.btn-primary:hover{background:var(--navy-700);box-shadow:0 10px 26px rgba(16,64,128,.3);}
.btn-accent{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(16,112,176,.26);}
.btn-accent:hover{background:#0d5f96;}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--navy);background:var(--mist);}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:var(--mist-2);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-lg{padding:16px 32px;font-size:16px;}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:9px;}
.btn-block{width:100%;white-space:normal;}
.btn-wa{background:#25d366;color:#06311a;}
.btn-wa:hover{background:#1fbd5b;}

/* ---------- Chips / pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-weight:700;font-size:12.5px;letter-spacing:.01em;
  padding:6px 12px;border-radius:999px;background:var(--mist-2);color:var(--navy);
}
.pill-sky{background:var(--sky-soft);color:var(--navy-700);}
.pill-gold{background:#fbeccc;color:#8a6410;}
.pill-green{background:#d7f1e2;color:#0f6b41;}
.pill-navy{background:var(--navy);color:#fff;}

.tag-sale{background:var(--gold);color:#3a2906;font-weight:900;font-size:11.5px;letter-spacing:.04em;padding:5px 10px;border-radius:8px;text-transform:uppercase;}
.tag-new{background:var(--sky);color:var(--navy-900);font-weight:900;font-size:11.5px;letter-spacing:.04em;padding:5px 10px;border-radius:8px;text-transform:uppercase;}

/* ---------- Card base ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);}

/* ---------- Image placeholders ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--mist-2);
  background-image:repeating-linear-gradient(135deg,rgba(16,64,128,.05) 0 10px,transparent 10px 20px);
  display:flex;align-items:center;justify-content:center;
}
.ph-label{
  font-family:"Hanken Grotesk",monospace;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);opacity:.62;text-align:center;padding:8px 12px;
  border:1px dashed rgba(16,112,176,.4);border-radius:8px;background:rgba(255,255,255,.55);
}

/* ---------- Navy section with brand texture ---------- */
.navy-band{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.navy-band::before{
  content:"";position:absolute;inset:0;background-image:url('../img/texture-white.png');
  background-size:cover;background-position:center;opacity:var(--tex-opacity);pointer-events:none;
  mix-blend-mode:screen;
}
.navy-band > *{position:relative;z-index:1;}
.navy-band h1,.navy-band h2,.navy-band h3{color:#fff;}

/* gradient deep navy */
.navy-grad{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%);}

/* ---------- Inputs ---------- */
.field{
  width:100%;padding:13px 14px;border:1.5px solid var(--line-strong);border-radius:10px;
  background:#fff;font-size:15px;transition:border .15s, box-shadow .15s;
}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(96,192,240,.25);}
.field-label{font-weight:700;font-size:13px;color:var(--ink-soft);margin-bottom:6px;display:block;}

/* ---------- Star rating ---------- */
.stars{display:inline-flex;gap:1px;color:var(--gold);}

/* ---------- Utility ---------- */
.hide{display:none !important;}
.divider{height:1px;background:var(--line);border:0;margin:0;}
.skeleton{background:linear-gradient(90deg,var(--mist) 25%,var(--mist-2) 37%,var(--mist) 63%);background-size:400% 100%;animation:sk 1.4s infinite;}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media (max-width:900px){
  .section{padding:52px 0;}
  .wrap,.wrap-wide{padding:0 18px;}
}