/*
 * Capa visual Zolaris Shop
 * Mantiene el catálogo actual y lo integra a la identidad de zolaris.com.co.
 */
:root {
  --zolaris-navy: #0b2b46;
  --zolaris-deep: #071c2d;
  --zolaris-blue: #16476e;
  --zolaris-yellow: #f7a600;
  --zolaris-gold: #fdcb58;
  --zolaris-sky: #eaf2f7;
  --zolaris-slate: #6e8191;
  --ink: var(--zolaris-navy);
  --navy: var(--zolaris-navy);
  --yellow: var(--zolaris-yellow);
  --muted: var(--zolaris-slate);
  --line: #d9e4ec;
  --paper: #f4f7fa;
}

html { background: var(--zolaris-deep); }
body {
  background: var(--paper);
  color: var(--zolaris-navy);
  font-family: Manrope, Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 82% 0%, rgba(247, 166, 0, .11), transparent 25rem),
    linear-gradient(180deg, var(--zolaris-deep) 0 8rem, var(--paper) 8rem);
}

/* La cabecera replica el lenguaje de navegación de la página principal. */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: none !important;
  height: 88px;
  padding: 0 clamp(20px, 5vw, 80px);
  background: rgba(7, 28, 45, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 10px 28px rgba(2, 15, 28, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand { gap: 14px; }
.brand img {
  width: 152px;
  max-height: 45px;
  object-fit: contain;
  object-position: left center;
}
.brand span {
  padding-left: 14px;
  border-left-color: rgba(255,255,255,.32);
  color: var(--zolaris-gold);
  font-weight: 800;
  letter-spacing: 3px;
}
header nav {
  gap: clamp(13px, 1.8vw, 28px);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
}
header nav a { position: relative; padding: 8px 0; }
header nav a:hover {
  color: var(--zolaris-gold);
  text-decoration: none;
}
header nav a:hover::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: 1px;
  background: var(--zolaris-yellow);
}
.bag {
  border: 1px solid rgba(253,203,88,.76);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #fff;
  padding: 9px 14px 9px 17px;
  font-size: 12px;
  font-weight: 800;
}
.bag:hover { background: rgba(247,166,0,.14); }
.bag span {
  width: 22px;
  height: 22px;
  margin-left: 7px;
  background: var(--zolaris-yellow);
  color: var(--zolaris-navy);
  font-weight: 800;
}

/* El hero mantiene la composición de producto, con el azul y amarillo de Zolaris. */
.hero {
  max-width: 1440px;
  margin: 25px auto 0;
  min-height: 548px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 15%, rgba(247,166,0,.16), transparent 23rem),
    linear-gradient(135deg, #0f395b, var(--zolaris-deep) 72%);
  box-shadow: 0 28px 65px rgba(3,21,37,.22);
}
.hero-copy { padding: 66px clamp(30px, 6vw, 88px) 34px; }
.hero .eyebrow,
.spotlight-copy > .eyebrow,
.edge-dark .eyebrow { color: var(--zolaris-gold); }
.hero-copy h1 {
  color: #fff;
  letter-spacing: -5px;
  font-weight: 700;
}
.hero-copy h1 em { color: var(--zolaris-gold); }
.hero-copy > p:not(.eyebrow) { color: #c5d5e3; }
.button,
.button.yellow {
  border-radius: 7px;
  background: var(--zolaris-yellow);
  color: var(--zolaris-deep);
  box-shadow: 0 10px 24px rgba(247,166,0,.16);
  font-weight: 800;
}
.button:hover { background: var(--zolaris-gold); }
.hero-bottom {
  color: #c5d5e3;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-product {
  margin: 16px 16px 16px 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 64% 35%, #fff, transparent 37%),
    linear-gradient(145deg, #eef5f9, #b9cede);
}
.stage-top { color: #3d6078; font-weight: 800; }
.hero-caption { color: var(--zolaris-navy); }
.hero-caption strong { font-weight: 800; }
.round-link { border-color: #9bb2c4; }
.round-link:hover { border-color: var(--zolaris-yellow); color: var(--zolaris-yellow); }

.benefits {
  max-width: 1440px;
  margin: 0 auto;
  padding: 25px clamp(20px, 5vw, 78px);
  background: var(--zolaris-navy);
  border: 0;
  color: #fff;
}
.benefits > div { color: #eef6fc; }
.benefits b {
  background: rgba(247,166,0,.16);
  color: var(--zolaris-gold);
  font-weight: 800;
}

/* Catálogo claro para que el producto siga siendo fácil de leer. */
.catalog {
  background: #f4f7fa;
  padding-top: 74px;
}
.section-heading .eyebrow,
.collection-intro .eyebrow,
.project-proof .eyebrow,
.how .eyebrow,
.edge-teaser:not(.edge-dark) .eyebrow {
  color: #d88300;
  font-weight: 800;
}
.section-heading h2,
.collection-intro h2,
.project-proof h2,
.how h2,
.faq h2 { color: var(--zolaris-navy); font-weight: 800; }
.search {
  border-color: #a5bbc9;
  color: var(--zolaris-navy);
}
.search input { color: var(--zolaris-navy); }
#tabs { border-color: #ccdce6; }
#tabs button {
  border-color: #cbdbe6;
  color: var(--zolaris-navy);
  font-weight: 700;
}
#tabs button[aria-pressed="true"] {
  background: var(--zolaris-navy);
  border-color: var(--zolaris-navy);
  color: #fff;
  box-shadow: inset 0 -3px var(--zolaris-yellow);
}
.catalog-controls {
  background: #e9f1f6;
  border-color: #cfdee8;
}
.catalog-controls select {
  border-color: #b9cedc;
  background: #fff;
}
.card {
  border: 1px solid #d7e3eb;
  border-top: 3px solid var(--zolaris-navy);
  background: #fff;
  box-shadow: 0 9px 24px rgba(11,43,70,.055);
}
.card:hover {
  box-shadow: 0 18px 36px rgba(11,43,70,.14);
  border-top-color: var(--zolaris-yellow);
}
.product-image { background: #edf4f8; }
.card h3, .card-price strong { color: var(--zolaris-navy); }
.card .card-actions button {
  background: var(--zolaris-navy);
  color: #fff;
}
.card .card-actions button:hover { background: var(--zolaris-blue); }
.card .card-actions button span { color: var(--zolaris-gold); }
.card-stock::before { background: var(--zolaris-yellow); }
.pagination button:hover:not(:disabled) {
  background: var(--zolaris-navy);
  color: #fff;
  border-color: var(--zolaris-navy);
}

/* Las secciones comerciales vuelven a la misma secuencia azul / blanco de la web. */
.collection-intro,
.collection-grid {
  background: var(--zolaris-navy);
}
.collection-intro { padding-top: 78px; }
.collection-intro h2 { color: #fff; }
.collection-grid { padding-bottom: 78px; }
.collection-tile {
  background: #eef5f9;
  border: 1px solid rgba(255,255,255,.17);
}
.collection-tile .eyebrow { color: #c97900; }
.collection-tile h3 { color: var(--zolaris-navy); font-weight: 800; }
.collection-tile p { color: #426178; }
.collection-tile a { color: var(--zolaris-navy); font-weight: 800; }
.collection-tile.dark {
  background:
    radial-gradient(circle at 88% 18%, rgba(247,166,0,.22), transparent 16rem),
    #123f63;
}
.collection-tile.dark h3,
.collection-tile.dark p,
.collection-tile.dark a { color: #fff; }
.collection-tile.dark .eyebrow { color: var(--zolaris-gold); }

.spotlight {
  margin-top: 0;
  margin-bottom: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(247,166,0,.14), transparent 23rem),
    var(--zolaris-deep);
}
.spotlight-art {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, #edf5f9, #c3d6e3);
}
.spotlight-copy h2 { color: #fff; font-weight: 800; }
.spotlight-copy > p:not(.eyebrow) { color: #c5d5e3; }
.spotlight-copy > .fine { color: #9db5c7; }

.solutions { background: #eaf2f7; }
.solution { border: 1px solid rgba(11,43,70,.08); }
.solution.dark {
  background:
    radial-gradient(circle at 85% 12%, rgba(247,166,0,.18), transparent 18rem),
    var(--zolaris-navy);
}
.solution.dark h3,
.solution.dark p { color: #fff; }
.solution.dark .eyebrow { color: var(--zolaris-gold); }
.solution.light { background: #fff; }
.solution.sand { background: #f8edd8; }
.solution h3 { color: var(--zolaris-navy); font-weight: 800; }
.solution p { color: #46657a; }
.solution .text-button { color: var(--zolaris-navy); }

.real-project {
  background:
    radial-gradient(circle at 80% 20%, rgba(247,166,0,.18), transparent 26rem),
    var(--zolaris-deep);
}
.real-project h2 { color: #fff; font-weight: 800; }
.real-project p { color: #c5d5e3; }
.real-project .eyebrow { color: var(--zolaris-gold); }
.project-proof { background: var(--zolaris-deep); color: #fff; }
.project-proof h2 { color: #fff; }
.project-proof .project-intro { color: #c5d5e3; }
.project-proof .real-project { border: 1px solid rgba(255,255,255,.13); }

.how {
  background: #fff;
  border-bottom: 0;
}
.how li { border-color: #d9e4ec; }
.how li > span { color: #d88300; font-weight: 800; }
.how h3 { color: var(--zolaris-navy); font-weight: 800; }
.how > div > p:last-child,
.how li p { color: #526f82; }
.faq { background: #edf4f8; max-width: none; padding-left: 5%; padding-right: 5%; }
.faq > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.faq details { border-color: #cbdbe5; }
.faq summary { color: var(--zolaris-navy); font-weight: 800; }
.faq details p { color: #526f82; }

.edge-teaser:not(.edge-dark) { background: #fff; }
.edge-teaser.edge-dark {
  background:
    radial-gradient(circle at 78% 10%, rgba(247,166,0,.19), transparent 26rem),
    var(--zolaris-deep);
}
.edge-dark h2 { color: #fff; font-weight: 800; }
.edge-dark > p:not(.eyebrow) { color: #c5d5e3; }
.future-grid article {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.03);
}
.future-grid h3 { color: #fff; }
.future-grid p { color: #c5d5e3; }

footer {
  max-width: none !important;
  padding: 44px clamp(20px, 5vw, 80px);
  background: #061624;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #c5d5e3;
}
footer .brand img { width: 142px; }
footer .brand span { color: var(--zolaris-gold); }
footer p { color: #fff; }
footer a { color: var(--zolaris-gold); font-weight: 800; }

/* Fichas y cotización siguen siendo muy legibles. */
dialog { color: var(--zolaris-navy); }
dialog::backdrop { background: rgba(4,18,30,.87); }
.close { color: var(--zolaris-navy); }
form input, form textarea { border-color: #b8cbd8; }
#toast { background: var(--zolaris-navy); border: 1px solid rgba(253,203,88,.5); }

@media (max-width: 1000px) {
  header { height: 78px; }
  header nav { gap: 11px; font-size: 10px; }
  .brand img { width: 136px; }
  .hero { margin: 15px 2.5% 0; }
}
@media (max-width: 900px) {
  header nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-product { margin: 0 12px 12px; min-height: 370px; }
  .hero-copy { padding: 48px 8% 28px; }
  .hero-bottom { margin-top: 28px; }
}
@media (max-width: 600px) {
  header { height: 70px; padding: 0 5%; }
  .brand img { width: 116px; }
  .brand span { font-size: 9px; letter-spacing: 1.7px; padding-left: 8px; }
  .bag { padding: 7px 9px; font-size: 10px; }
  .bag span { width: 19px; height: 19px; margin-left: 3px; }
  .hero { margin-top: 10px; border-radius: 10px; }
  .hero-copy { padding: 38px 28px 25px; }
  .hero-copy h1 { font-size: clamp(54px, 18vw, 72px); letter-spacing: -4px; }
  .hero-product { min-height: 330px; }
  .benefits { padding: 22px 6%; }
  .collection-intro { padding-top: 54px; }
  .collection-grid { padding-bottom: 54px; }
  .spotlight { margin-left: 0; margin-right: 0; }
  .faq { padding-left: 6%; padding-right: 6%; }
}