/* Química del NOA — estilos compartidos (paleta del tríptico 2026) */
:root{
  --bg: #fbf6ee;
  --bg-panel: #f4e8d6;
  --paper: #ffffff;
  --ink: #3b2230;
  --ink-soft: rgba(59,34,48,0.74);
  --ink-faint: rgba(59,34,48,0.48);
  --plum: #643548;
  --plum-deep: #522744;
  --plum-dark: #3a1b30;
  --gold: #e7ac46;
  --gold-text: #9a6a1c;
  --copper: #a75e2c;
  --copper-deep: #8a4a1f;
  --sand: #d9a565;
  --bone: #fbf6ee;
  --bone-soft: rgba(251,246,238,0.78);
  --line: rgba(100,53,72,0.16);
  --line-soft: rgba(100,53,72,0.08);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--copper); outline-offset:3px;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 16px;} }

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
h1,h2,h3,h4{ font-weight:700; letter-spacing:-0.01em; color:var(--ink); line-height:1.15; }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,238,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand .qn{ height:34px; width:auto; }
.nav-brand .word{ height:14px; width:auto; }
.nav-links{ display:flex; gap:32px; font-size:13px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; }
.nav-links a{ color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent; transition:color 0.2s, border-color 0.2s; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active{ color:var(--plum); border-color:var(--gold); }
.nav-cta{
  font-size:12.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--plum); color:#fff; padding:10px 18px; border-radius:999px;
  transition:background 0.2s; white-space:nowrap;
}
.nav-cta:hover{ background:var(--plum-deep); }
@media (max-width:860px){
  .nav .wrap{ height:auto; flex-wrap:wrap; padding-top:12px; padding-bottom:0; }
  .nav-links{ order:3; width:100%; gap:22px; overflow-x:auto; padding:6px 0 10px; font-size:12px; }
  .nav-brand .word{ display:none; }
}

/* ============ BOTONES ============ */
.btn{
  font-size:13px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  padding:14px 26px; display:inline-block; border-radius:999px;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary{ background:var(--plum); color:#fff; border:1px solid var(--plum); }
.btn-primary:hover{ background:var(--plum-deep); border-color:var(--plum-deep); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--plum); color:var(--plum); }
.btn-ghost:hover{ background:var(--plum); color:#fff; }
.btn-gold{ background:var(--gold); color:var(--plum-dark); border:1px solid var(--gold); }
.btn-gold:hover{ background:#f0bd62; transform:translateY(-1px); }

/* ============ HERO DE SUBPÁGINA ============ */
.page-hero{
  position:relative; overflow:hidden;
  padding:72px 0 96px;
  background:linear-gradient(180deg, var(--bg) 0%, #f6ead6 100%);
}
.page-hero .wrap{ position:relative; z-index:2; display:flex; align-items:center; gap:48px; }
.page-hero .hero-text{ flex:1; }
.page-hero .eyebrow{ color:var(--copper); margin-bottom:16px; display:block; }
.page-hero h1{ font-size:clamp(30px,4.4vw,46px); margin-bottom:18px; max-width:720px; }
.page-hero p{ color:var(--ink-soft); font-size:16.5px; max-width:640px; }
.page-hero .brand-logo{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
.page-hero .brand-logo img{ height:150px; width:auto; }
.page-hero .brand-logo span{ font-weight:700; font-size:20px; letter-spacing:0.08em; color:var(--ink); }
@media (max-width:760px){
  .page-hero .wrap{ flex-direction:column-reverse; align-items:flex-start; gap:28px; }
  .page-hero .brand-logo{ flex-direction:row; }
  .page-hero .brand-logo img{ height:72px; }
}

/* ondas tipo dunas (tríptico) */
.dunes{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:90px; z-index:1; pointer-events:none; }

/* ============ FRANJA DE PILARES ============ */
.pillars{ background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pillars .wrap{ display:grid; grid-template-columns:repeat(3,1fr); }
.pillar{ padding:30px 28px; border-left:1px solid var(--line); }
.pillar:first-child{ border-left:none; }
.pillar h4{ font-size:15px; color:var(--plum); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.06em; }
.pillar p{ font-size:14px; color:var(--ink-soft); }
@media (max-width:760px){
  .pillars .wrap{ grid-template-columns:1fr; }
  .pillar{ border-left:none; border-top:1px solid var(--line); padding:22px 0; }
  .pillar:first-child{ border-top:none; }
}

/* ============ SECCIONES Y TARJETAS ============ */
.cat-section{ padding:56px 0 24px; }
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; border-bottom:1px solid var(--line); padding-bottom:18px; flex-wrap:wrap; }
.cat-head h2{ font-size:clamp(24px,3vw,32px); }
.cat-head p{ color:var(--ink-soft); font-size:14.5px; margin-top:8px; max-width:700px; }
.cat-count{ font-size:12px; font-weight:600; color:var(--copper); letter-spacing:0.08em; text-transform:uppercase; }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:24px; }
.card-grid.two{ grid-template-columns:repeat(2,1fr); }
.card-grid.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .card-grid.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .card-grid{ grid-template-columns:1fr; } }
@media (max-width:700px){ .card-grid.two{ grid-template-columns:1fr; } }
@media (max-width:640px){ .card-grid.four{ grid-template-columns:1fr; } }

.spec-card{ position:relative; background:var(--paper); color:var(--ink); padding:28px 24px 24px; display:flex; flex-direction:column; min-height:250px; }
.spec-card::before{ content:""; position:absolute; top:21px; left:22px; width:9px; height:9px; border-radius:50%; background:var(--plum); }
.spec-code{ font-size:11px; font-weight:500; letter-spacing:0.1em; color:var(--ink-faint); margin-left:20px; margin-bottom:16px; }
.spec-tag{ font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--copper); margin-bottom:8px; }
.spec-card h3{ font-size:19px; margin-bottom:8px; }
.spec-card p.desc{ font-size:13.5px; color:var(--ink-soft); margin-bottom:auto; padding-bottom:16px; }
.spec-meta{ border-top:1px dashed var(--line); padding-top:12px; font-size:12px; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
.spec-meta b{ color:var(--ink); font-weight:600; }

.note-band{ background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
.note-band p{ font-size:14.5px; color:var(--ink-soft); max-width:820px; }
.note-band strong{ color:var(--ink); }

/* ============ CONTACTO ============ */
.contacto{ padding:96px 0 0; }
.contacto-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--plum-deep) 0%, var(--plum) 55%, var(--copper-deep) 130%);
  color:var(--bone);
  padding:64px 56px;
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center;
  border-radius:4px;
}
@media (max-width:1212px){ .contacto-panel{ border-radius:0; } }
@media (max-width:760px){ .contacto-panel{ grid-template-columns:1fr; padding:48px 20px; } }
.contacto-panel h2{ font-size:clamp(24px,3.4vw,34px); margin-bottom:14px; color:var(--bone); }
.contacto-panel p{ color:var(--bone-soft); font-size:15.5px; max-width:460px; }
.contacto-links{ display:flex; flex-direction:column; gap:14px; }
.contacto-item{ display:flex; align-items:center; gap:14px; }
.contacto-item .ico{ flex:0 0 42px; height:42px; border-radius:50%; background:var(--bone); color:var(--plum); display:flex; align-items:center; justify-content:center; }
.contacto-item .ico svg{ width:20px; height:20px; }
.contacto-item .eyebrow{ color:var(--gold); display:block; font-size:10.5px; margin-bottom:2px; }
.contacto-item a, .contacto-item span.val{ font-size:16px; font-weight:500; color:var(--bone); overflow-wrap:anywhere; }
.contacto-item a{ border-bottom:1px solid transparent; transition:border-color 0.2s; }
.contacto-item a:hover{ border-color:var(--gold); }

/* ============ FOOTER ============ */
footer{ padding:40px 0 48px; background:var(--bg); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:12px; letter-spacing:0.03em; color:var(--ink-soft); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ height:26px; width:auto; }

/* símbolo de marca registrada junto al nombre de Select Color */
sup.reg{ font-size:0.72em; font-weight:500; vertical-align:super; line-height:0; margin-left:2px; }

/* nombre de marca Select Color: minúsculas, tipografía redondeada como el logo oficial */
body span.sc-word{ font-family:'Nunito', 'Montserrat', sans-serif; font-weight:800; text-transform:none; letter-spacing:0.01em; font-size:1.25em; }