/* =========================================================
   SOMOSBARATOS - STYLES.CSS
   Diseño profesional para index.html
   Paleta Opción 1: azul petróleo, azul medio, turquesa, gris claro y blanco
   ========================================================= */

:root {
  --color-primary: #233A54;
  --color-primary-dark: #0A1628;
  --color-primary-soft: #E8D9B7;
  --color-secondary: #C39A4A;
  --color-secondary-dark: #8F6928;
  --color-accent: #C39A4A;
  --color-white: #ffffff;
  --color-cream: #DCE3E8;
  --color-light: #E4E9ED;
  --color-border: #B9C4CC;
  --color-text: #142033;
  --color-muted: #5F6B76;
  --color-dark: #050C16;
  --shadow-soft: 0 18px 45px rgba(10, 31, 40, 0.12);
  --shadow-card: 0 14px 34px rgba(10, 31, 40, 0.10);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container: 1180px;
  --font-title: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 61, 76, 0.10);
}

.header-content {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-white);
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 10px 28px rgba(15, 61, 76, 0.25);
}

.brand-text {
  display: grid;
  line-height: 1.1;
}

.brand-text strong {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}

.brand-text small {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--color-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(15, 61, 76, 0.10);
  border-radius: 999px;
  background: var(--color-light);
}

.main-nav a {
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-muted);
  transition: 0.22s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary-dark);
  background: var(--color-white);
  box-shadow: 0 8px 20px rgba(15, 61, 76, 0.09);
}

.header-cta {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 12px 26px rgba(15, 61, 76, 0.22);
  transition: 0.22s ease;
}

.header-cta:hover {
  transform: translateY(-2px);
  background: var(--color-primary-dark);
}

.menu-toggle {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--color-primary);
  display: none;
  place-items: center;
  padding: 12px;
}

.menu-toggle span {
  width: 21px;
  height: 2px;
  background: var(--color-white);
  display: block;
  margin: 3px 0;
  border-radius: 99px;
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 20, 26, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: 0.25s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-panel {
  width: min(88vw, 360px);
  height: 100%;
  margin-left: auto;
  padding: 24px;
  background: var(--color-white);
  transform: translateX(100%);
  transition: 0.25s ease;
  overflow-y: auto;
}

.mobile-menu.open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-head strong {
  font-family: var(--font-title);
  color: var(--color-primary-dark);
}

.mobile-menu-head button {
  border: 0;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
}

.mobile-links {
  display: grid;
  gap: 10px;
  padding-top: 18px;
}

.mobile-links a {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-light);
  font-weight: 800;
  color: var(--color-primary-dark);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 800;
  transition: 0.22s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-white);
  box-shadow: 0 14px 30px rgba(15, 61, 76, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15, 61, 76, 0.30);
}

.btn-secondary {
  color: var(--color-primary-dark);
  background: var(--color-white);
  border: 1px solid rgba(15, 61, 76, 0.16);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  background: var(--color-primary-soft);
}

/* =========================================================
   HERO
   ========================================================= */

.hero-section {
  position: relative;
  padding: 92px 0 80px;
  background:
    radial-gradient(circle at top left, rgba(197, 155, 69, 0.18), transparent 34%),
    linear-gradient(135deg, #f8fbfc 0%, #eef5f7 48%, #ffffff 100%);
  overflow: hidden;
}

.hero-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -180px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: rgba(47, 125, 140, 0.11);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--color-secondary-dark);
  font-weight: 900;
  font-size: 0.77rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 720px;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 5vw, 4.65rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--color-primary-dark);
}

.hero-copy p {
  max-width: 650px;
  margin-top: 22px;
  color: var(--color-muted);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  max-width: 640px;
}

.trust-row div {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(15, 61, 76, 0.10);
  box-shadow: 0 10px 28px rgba(15, 61, 76, 0.07);
}

.trust-row strong,
.trust-row span {
  display: block;
}

.trust-row strong {
  font-family: var(--font-title);
  color: var(--color-primary-dark);
}

.trust-row span {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.hero-card {
  position: relative;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(15, 61, 76, 0.10);
}

.hero-card img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 22px;
  background: var(--color-primary-soft);
  display: block;
}

.hero-card-info {
  position: static;
  width: 100%;
  margin-top: 14px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 61, 76, 0.10);
  box-shadow: 0 12px 24px rgba(13, 27, 34, 0.10);
  box-sizing: border-box;
}

.hero-card-info span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
}

.hero-card-info strong {
  display: block;
  margin-top: 3px;
  font-family: var(--font-title);
  color: var(--color-primary-dark);
  font-size: 1.25rem;
}

.hero-card-info p {
  color: var(--color-muted);
  margin-top: 6px;
  font-size: 0.94rem;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.section {
  padding: 86px 0;
  background: var(--color-white);
}

.section-light {
  background: var(--color-cream);
}

.section-dark {
  background:
    radial-gradient(circle at top right, rgba(197, 155, 69, 0.17), transparent 30%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-dark));
  color: var(--color-white);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-heading h2,
.split-section h2,
.cta-box h2 {
  font-family: var(--font-title);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--color-primary-dark);
}

.section-heading p,
.split-section p,
.cta-box p {
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 1rem;
}

.section-heading.light h2,
.section-heading.light p {
  color: var(--color-white);
}

.section-heading.light p {
  opacity: 0.78;
}

/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.category-card {
  display: grid;
  background: var(--color-white);
  border: 1px solid rgba(15, 61, 76, 0.10);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: 0.24s ease;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(10, 31, 40, 0.14);
}

.category-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-primary-soft);
}

.category-card div {
  padding: 22px;
}

.category-card span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.category-card h3 {
  margin-top: 8px;
  font-family: var(--font-title);
  color: var(--color-primary-dark);
  font-size: 1.25rem;
}

.category-card p {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

/* =========================================================
   SPLIT PROCESS SECTION
   ========================================================= */

.split-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: center;
}

.split-section .btn {
  margin-top: 26px;
}

.steps-box {
  display: grid;
  gap: 16px;
}

.steps-box article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  background: var(--color-light);
  border: 1px solid var(--color-border);
}

.steps-box article span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 900;
  font-family: var(--font-title);
}

.steps-box h3 {
  font-family: var(--font-title);
  color: var(--color-primary-dark);
  font-size: 1.08rem;
}

.steps-box p {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.product-card {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.16);
  transition: 0.24s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.12);
}

.product-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.product-card div {
  padding: 22px;
}

.product-card h3 {
  font-family: var(--font-title);
  color: var(--color-white);
  font-size: 1.18rem;
}

.product-card p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.94rem;
}

.product-card a {
  display: inline-flex;
  margin-top: 16px;
  color: #8AD3CF;
  font-weight: 900;
}

/* =========================================================
   FEATURES
   ========================================================= */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.feature-grid article {
  padding: 24px;
  border-radius: 22px;
  background: var(--color-white);
  border: 1px solid rgba(15, 61, 76, 0.10);
  box-shadow: 0 10px 26px rgba(10, 31, 40, 0.07);
}

.feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 900;
  margin-bottom: 16px;
}

.feature-grid h3 {
  font-family: var(--font-title);
  color: var(--color-primary-dark);
  font-size: 1.05rem;
}

.feature-grid p {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 0.93rem;
}

/* =========================================================
   CTA
   ========================================================= */

.cta-section {
  padding: 70px 0;
  background: var(--color-white);
}

.cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 42px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.cta-box h2,
.cta-box p {
  color: var(--color-white);
}

.cta-box p {
  opacity: 0.82;
  max-width: 640px;
}

.cta-box .eyebrow {
  color: #8AD3CF;
}

.cta-box .btn-primary {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  box-shadow: none;
  min-width: max-content;
}

.cta-box .btn-primary:hover {
  background: #C39A4A;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding: 60px 0 28px;
  background: #050C16;
  color: rgba(255, 255, 255, 0.78);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 36px;
}

.footer-brand .brand-mark {
  background: linear-gradient(135deg, var(--color-secondary), #76C9C4);
  color: var(--color-primary-dark);
}

.footer-brand .brand-text strong {
  color: var(--color-white);
}

.footer-brand .brand-text small {
  color: rgba(255, 255, 255, 0.58);
}

.site-footer p {
  margin-top: 16px;
  max-width: 330px;
  font-size: 0.94rem;
}

.site-footer h3 {
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: 1rem;
  margin-bottom: 16px;
}

.site-footer a:not(.brand):not(.footer-button) {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
  transition: 0.22s ease;
}

.site-footer a:hover {
  color: #8AD3CF;
}

.footer-button {
  display: inline-flex;
  margin-top: 18px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  font-weight: 900;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.58);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .main-nav {
    display: none;
  }

  .header-cta {
    margin-left: auto;
  }

  .menu-toggle {
    display: grid;
  }

  .hero-grid,
  .split-section {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 620px;
  }

  .feature-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .site-header {
    position: sticky;
  }

  .header-content {
    min-height: 70px;
  }

  .brand-text small {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .hero-section {
    padding: 62px 0 58px;
  }

  .hero-copy h1 {
    font-size: clamp(2.3rem, 13vw, 3.4rem);
  }

  .hero-copy p {
    font-size: 1rem;
  }

  .trust-row,
  .category-grid,
  .product-grid,
  .feature-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    display: grid;
  }

  .btn {
    width: 100%;
  }

  .hero-card-info {
    position: static;
    margin-top: 14px;
    box-shadow: none;
    background: var(--color-primary-soft);
  }

  .section {
    padding: 62px 0;
  }

  .category-card,
  .product-card,
  .feature-grid article,
  .steps-box article {
    border-radius: 18px;
  }

  .split-section {
    gap: 32px;
  }

  .steps-box article {
    grid-template-columns: 48px 1fr;
    padding: 18px;
  }

  .steps-box article span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .cta-box {
    display: grid;
    padding: 28px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 460px) {
  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .brand-text strong {
    font-size: 0.98rem;
  }

  .hero-copy h1 {
    letter-spacing: -0.045em;
  }

  .section-heading h2,
  .split-section h2,
  .cta-box h2 {
    font-size: 2rem;
  }
}
/* =========================================================
   ESTILOS ADICIONALES PARA COTIZA.HTML
   Pegar al final de styles.css
   ========================================================= */

.page-hero {
  padding: 76px 0 72px;
}

.quote-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 42px;
  align-items: start;
}

.quote-info h2,
.form-head h2 {
  font-family: var(--font-title);
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--color-primary-dark);
}

.quote-info > p,
.form-head p {
  margin-top: 14px;
  color: var(--color-muted);
}

.quote-checklist {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.quote-checklist article {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--color-white);
  border: 1px solid rgba(15, 61, 76, 0.10);
  box-shadow: 0 10px 26px rgba(10, 31, 40, 0.06);
}

.quote-checklist strong {
  display: block;
  font-family: var(--font-title);
  color: var(--color-primary-dark);
  font-size: 1rem;
}

.quote-checklist span {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

.quote-form {
  padding: 32px;
  border-radius: 28px;
  background: var(--color-white);
  border: 1px solid rgba(15, 61, 76, 0.10);
  box-shadow: var(--shadow-soft);
}

.form-head {
  margin-bottom: 24px;
}

.quote-form label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--color-primary-dark);
  font-weight: 800;
  font-size: 0.92rem;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-light);
  color: var(--color-text);
  padding: 14px 15px;
  outline: none;
  transition: 0.2s ease;
}

.quote-form textarea {
  resize: vertical;
  min-height: 130px;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(47, 125, 140, 0.12);
}

.quote-form .btn {
  width: 100%;
  border: 0;
  margin-top: 6px;
}

.form-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--color-primary-soft);
  color: var(--color-muted);
  font-size: 0.88rem;
}

.form-note strong {
  color: var(--color-primary-dark);
}

.message-box {
  padding: 30px;
  border-radius: 24px;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 30px rgba(10, 31, 40, 0.07);
}

.message-box p {
  color: var(--color-text);
  font-size: 1rem;
}

.message-box p + p {
  margin-top: 8px;
}

.message-box strong {
  font-family: var(--font-title);
  color: var(--color-primary-dark);
}

.catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .quote-layout {
    grid-template-columns: 1fr;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .page-hero {
    padding: 56px 0 54px;
  }

  .quote-form {
    padding: 24px;
    border-radius: 22px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .message-box {
    padding: 22px;
    border-radius: 20px;
  }
}
.feature-row {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

.site-footer {
  padding: 60px 0 30px;
  background: linear-gradient(135deg, #050C16, #0f3d4c);
  color: white;
}

.site-footer p {
  margin-top: 10px;
}

.site-footer a {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,0.7);
}

.site-footer a:hover {
  color: #8AD3CF;
}
/* =========================================================
   FAQ
   ========================================================= */

.faq-list {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.faq-list details {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 10px 26px rgba(10, 31, 40, 0.06);
  transition: 0.2s ease;
}

.faq-list details[open] {
  background: var(--color-light);
  border-color: var(--color-accent);
}

.faq-list summary {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;
}

/* flecha */
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 900;
  color: var(--color-accent);
  transition: 0.2s;
}

.faq-list details[open] summary::after {
  content: "–";
}

/* contenido */
.faq-list p {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* =========================================================
   AJUSTES FINALES WHATSAPP / FOOTER GLOBAL
   ========================================================= */
.footer-cta {
  margin-top: 40px;
}

.site-footer a[href^="https://wa.me"],
.site-footer a[href^="mailto:"] {
  color: #8AD3CF;
  font-weight: 800;
}

.quote-checklist a {
  color: var(--color-primary);
  font-weight: 800;
}

.fabs .fab {
  border: 0;
}

/* =========================================================
   EXPERIENCIA AVANZADA: PRELOADER, PARTICULAS, CURSOR,
   SCROLL REVEAL, TECNOLOGIAS, COTIZADOR, TESTIMONIOS,
   CHATBOT, TERMINAL Y MICROINTERACCIONES
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(47, 125, 140, 0.28), transparent 34%), linear-gradient(135deg, var(--color-primary-dark), var(--color-dark));
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader-card {
  width: min(320px, calc(100% - 42px));
  padding: 30px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  color: var(--color-white);
  text-align: center;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.preloader-logo {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 900;
  animation: pulseLogo 1.35s ease-in-out infinite alternate;
}
.preloader-card strong { display:block; font-family: var(--font-title); font-size:1.35rem; }
.preloader-card small { display:block; margin-top:4px; opacity:.82; }
.preloader-bar { height: 7px; margin-top: 20px; border-radius: 999px; background: rgba(255,255,255,.18); overflow:hidden; }
.preloader-bar span { display:block; width:45%; height:100%; border-radius:inherit; background: var(--color-secondary); animation: loadingBar 1.2s ease-in-out infinite; }
@keyframes pulseLogo { to { transform: translateY(-5px) scale(1.04); } }
@keyframes loadingBar { 0%{ transform: translateX(-120%);} 100%{ transform: translateX(240%);} }

.bg-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 75% 5%, rgba(197,155,69,.10), transparent 30%);
}
.particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(47,125,140,.18);
  animation: floatParticle var(--duration, 12s) linear infinite;
}
@keyframes floatParticle {
  0% { transform: translate3d(0, 110vh, 0) scale(.7); opacity: 0; }
  15%, 82% { opacity: 1; }
  100% { transform: translate3d(var(--drift, 40px), -15vh, 0) scale(1.15); opacity: 0; }
}
.cursor-glow {
  position: fixed;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(47,125,140,.16), transparent 62%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .25s ease;
}
body.cursor-active .cursor-glow { opacity: 1; }

.reveal-section, .category-card, .product-card, .feature-grid article, .steps-box article, .tech-card, .testimonial-card, .terminal-box, .visual-quote-grid {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal-visible, .reveal-visible .category-card, .reveal-visible .product-card, .reveal-visible.feature-grid article, .reveal-visible .steps-box article, .reveal-visible.tech-card, .reveal-visible.testimonial-card, .reveal-visible.terminal-box, .reveal-visible.visual-quote-grid,
.category-card.reveal-visible, .product-card.reveal-visible, .feature-grid article.reveal-visible, .steps-box article.reveal-visible, .tech-card.reveal-visible, .testimonial-card.reveal-visible, .terminal-box.reveal-visible, .visual-quote-grid.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.micro-card, .btn, .header-cta, .category-card, .product-card, .feature-grid article { will-change: transform; }
.micro-card:hover, .category-card:hover, .product-card:hover, .feature-grid article:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 55px rgba(10,31,40,.15);
}
.btn:active, .header-cta:active, .bot-option:active { transform: scale(.97); }

.tech-section { background: linear-gradient(180deg, var(--color-white), var(--color-light)); }
.tech-grid, .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tech-card, .testimonial-card {
  padding: 24px;
  border: 1px solid rgba(15,61,76,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-card);
  transition: .25s ease;
}
.tech-card span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.35rem;
  margin-bottom: 16px;
}
.tech-card h3, .testimonial-card strong { font-family: var(--font-title); color: var(--color-primary-dark); }
.tech-card p, .testimonial-card p, .testimonial-card span { margin-top: 8px; color: var(--color-muted); }
.visual-quote-section { background: var(--color-primary-dark); color: var(--color-white); }
.visual-quote-grid {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 34px;
  align-items: center;
}
.visual-quote-section p { color: rgba(255,255,255,.78); }
.quote-result {
  margin-top: 24px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.09);
}
.quote-result small, .quote-result span { display:block; color: rgba(255,255,255,.72); }
.quote-result strong { display:block; margin:6px 0; font-family:var(--font-title); font-size:2.25rem; color: var(--color-secondary); }
.visual-quote-form {
  padding: 26px;
  border-radius: 26px;
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 25px 70px rgba(0,0,0,.28);
}
.visual-quote-form label { display:grid; gap:8px; margin-bottom:14px; font-weight:800; color:var(--color-primary-dark); }
.visual-quote-form input, .visual-quote-form select {
  width:100%; padding:13px 14px; border:1px solid var(--color-border); border-radius:14px; background: var(--color-light);
}
.visual-quote-form .btn { width:100%; border:0; margin-top:6px; }
.testimonial-card p { font-size: 1rem; font-style: italic; }
.testimonial-card span { display:block; font-size:.9rem; }
.terminal-section { padding-top: 20px; background: linear-gradient(180deg, var(--color-light), var(--color-white)); }
.terminal-box {
  overflow:hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: #050C16;
  color: #d8fff7;
  box-shadow: 0 28px 70px rgba(8,25,33,.24);
}
.terminal-top { display:flex; gap:8px; padding:16px 18px; background: rgba(255,255,255,.06); }
.terminal-top span { width:12px; height:12px; border-radius:50%; background: rgba(255,255,255,.34); }
.terminal-box pre {
  min-height: 190px;
  padding: 24px;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .98rem;
  line-height: 1.75;
}
.chatbot-widget { position: fixed; right: 22px; bottom: 22px; z-index: 80; }
.chatbot-toggle {
  display:flex; align-items:center; gap:9px;
  border:0; border-radius:999px; padding:13px 17px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color:#fff; font-weight:900; box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.chatbot-panel {
  position:absolute; right:0; bottom:64px; width:min(355px, calc(100vw - 34px));
  border-radius:24px; overflow:hidden; background:#fff; color:var(--color-text);
  box-shadow:0 24px 70px rgba(0,0,0,.28); transform:translateY(12px) scale(.96);
  opacity:0; pointer-events:none; transition:.22s ease; border:1px solid rgba(15,61,76,.12);
}
.chatbot-panel.open { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.chatbot-head { display:flex; justify-content:space-between; gap:14px; padding:18px; background:var(--color-primary-dark); color:#fff; }
.chatbot-head small { display:block; opacity:.78; margin-top:2px; }
.chatbot-head button { width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.35rem; }
.chatbot-body { padding:18px; display:grid; gap:10px; }
.bot-message { padding:13px 14px; border-radius:16px; background:var(--color-light); color:var(--color-primary-dark); font-weight:700; }
.bot-option { text-align:left; border:1px solid var(--color-border); border-radius:16px; padding:12px 14px; background:#fff; color:var(--color-text); font-weight:800; transition:.2s ease; }
.bot-option:hover { border-color:var(--color-accent); background:var(--color-primary-soft); }
.chatbot-whatsapp { display:block; margin:0 18px 18px; text-align:center; padding:13px; border-radius:16px; background:#25d366; color:#fff; font-weight:900; }
@media (max-width: 920px) {
  .tech-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .visual-quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tech-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .chatbot-widget { right: 14px; bottom: 14px; }
  .cursor-glow { display:none; }
  .quote-result strong { font-size:1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Tema profesional administrable */
:root{--sb-primary:#0A1628;--sb-secondary:#233A54;--sb-accent:#C39A4A;--sb-accent2:#E0C27A;--sb-background:#DCE3E8;--sb-surface:#FFFFFF;--sb-text:#142033;--sb-muted:#5F6B76;--sb-radius:16px}
body{background:var(--sb-background)!important;color:var(--sb-text)!important}
header,.topbar,.navbar,nav{border-color:color-mix(in srgb,var(--sb-primary) 15%,transparent)}
a{transition:color .2s ease,transform .2s ease,background .2s ease}
button,.btn,[class*="button"]{border-radius:var(--sb-radius)!important}
.card,.product-card,.service-card,.gallery-item,.faq-item{border-radius:var(--sb-radius)!important;background:var(--sb-surface)!important}
.btn-primary,.cta,.whatsapp-float{background:var(--sb-accent)!important;color:#fff!important}

/* =========================================================
   COMPATIBILIDAD PARA PÁGINAS DE DETALLE
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 28px rgba(8,40,51,.08);
}
.navbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header .brand .logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  background: linear-gradient(135deg,var(--color-primary),var(--color-accent));
  position: relative;
  box-shadow: 0 10px 26px rgba(15,61,76,.24);
}
.header .brand .logo::after {
  content: "SB";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
}
.header .brand .title { display: grid; line-height: 1.1; }
.header .brand .title strong { font-family: var(--font-title); color: var(--color-primary-dark); }
.header .brand .title span { color: var(--color-muted); font-size: .78rem; margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  padding: 10px 13px;
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 600;
  font-size: .92rem;
}
.nav-links a:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 700;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(8,40,51,.12); }
.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg,var(--color-primary),var(--color-accent));
  color: #fff;
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  padding: 11px;
}
.burger span { display:block; height:2px; background:var(--color-primary-dark); margin:5px 0; }
.drawer { display:none; position:fixed; inset:0; z-index:100; background:rgba(4,18,24,.55); }
.drawer.open { display:block; }
.drawer-panel { margin-left:auto; width:min(88%,360px); height:100%; background:#fff; padding:24px; box-shadow:-18px 0 50px rgba(0,0,0,.15); }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.drawer-links { display:grid; gap:8px; }
.drawer-links a { padding:13px 15px; border-radius:12px; background:var(--color-light); font-weight:700; }
.section { padding: 72px 0; background: linear-gradient(180deg,#fff,var(--color-light)); }
.card {
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.card-pad { padding:28px; }
.neon-border { border-top:4px solid var(--color-secondary); }
.badge {
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:6px 11px;
  border-radius:999px;
  background:var(--color-primary-soft);
  color:var(--color-primary);
  font-size:.78rem;
  font-weight:700;
}
.sub,.small { color:var(--color-muted); }
.small { font-size:.9rem; }
.grid { display:grid; gap:20px; }
.products { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pcard { overflow:hidden; padding:0; }
.pimg { aspect-ratio: 4 / 3; background:var(--color-light); overflow:hidden; }
.pimg img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.pcard:hover .pimg img { transform:scale(1.04); }
.pmeta { padding:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.pmeta > div:first-child { display:grid; gap:7px; }
.price { text-align:right; display:grid; gap:2px; }
.price strong { color:var(--color-primary); }
.price small { color:var(--color-muted); }
.toolbar { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.site-footer { background:var(--color-dark); color:#e9f0f2; padding:60px 0 22px; }
.site-footer a { color:#d5e3e7; }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.45fr repeat(3,1fr); gap:34px; }
.footer-grid > div { display:grid; align-content:start; gap:10px; }
.footer-grid h3 { color:#fff; margin-bottom:5px; }
.footer-brand { margin-bottom:8px; }
.feature-row { display:flex; flex-wrap:wrap; gap:7px 14px; color:#b8c9ce; font-size:.83rem; }
.footer-cta { margin-top:36px; padding:23px 26px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.footer-bottom { margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; color:#9fb0b5; font-size:.82rem; }
.preloader { position:fixed; inset:0; z-index:999; display:grid; place-items:center; background:#fff; transition:.3s; }
.preloader.hidden { opacity:0; visibility:hidden; }
.preloader-card { text-align:center; display:grid; gap:8px; }
.preloader-logo { width:58px; height:58px; margin:auto; display:grid; place-items:center; border-radius:18px; background:var(--color-primary); color:#fff; font-weight:800; }
.preloader-bar { width:180px; height:5px; border-radius:999px; background:var(--color-border); overflow:hidden; }
.preloader-bar span { display:block; height:100%; width:55%; background:var(--color-secondary); animation:loading 1s infinite alternate; }
@keyframes loading { to { transform:translateX(80%); } }
.lightbox { display:none; position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.82); padding:28px; place-items:center; }
.lightbox.open { display:grid; }
.lightbox .panel { width:min(900px,100%); background:#fff; border-radius:18px; overflow:hidden; }
.lightbox img { max-height:70vh; object-fit:contain; background:#111; }
.lightbox .bar { padding:13px 16px; display:flex; justify-content:space-between; align-items:center; }
.lightbox .x { width:38px; height:38px; border:0; border-radius:50%; }
@media (max-width: 900px) {
  .nav-links { display:none; }
  .burger { display:block; }
  .products,.cols-3,.footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child { grid-column:1/-1; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 26px,var(--container)); }
  .navbar { min-height:70px; }
  .header .brand .title span { display:none; }
  .nav-actions .btn-primary { display:none; }
  .section { padding:42px 0; }
  .card-pad { padding:20px; }
  .products,.cols-3,.footer-grid { grid-template-columns:1fr; }
  .pmeta,.footer-cta,.footer-bottom { align-items:flex-start; flex-direction:column; }
  .price { text-align:left; }
}


/* =========================================================
   AJUSTES FINALES: COLOR, TEXTURA E IMÁGENES SIN RECORTE
   ========================================================= */

body {
  background-color: #E7EFF2;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(0, 169, 214, 0.22), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(211, 155, 36, 0.20), transparent 27%),
    radial-gradient(circle at 82% 82%, rgba(7, 93, 120, 0.17), transparent 30%),
    linear-gradient(145deg, #EFF6F7 0%, #E7EFF2 48%, #DCE3E8 100%);
  background-attachment: fixed;
}

/* Textura geométrica sutil en las áreas claras */
.hero-section,
.section,
.section-light {
  position: relative;
  isolation: isolate;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(7, 93, 120, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 93, 120, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(222, 239, 245, 0.76));
  background-size: 36px 36px, 36px 36px, auto;
}

.section-light {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0, 169, 214, 0.12), transparent 28%),
    radial-gradient(circle at 88% 75%, rgba(211, 155, 36, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(219, 237, 244, 0.94), rgba(239, 247, 249, 0.94));
}

.site-header {
  background: rgba(242, 249, 251, 0.94);
  border-bottom-color: rgba(7, 93, 120, 0.18);
  box-shadow: 0 8px 28px rgba(4, 55, 71, 0.08);
}

.main-nav {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(7, 93, 120, 0.18);
}

.btn-primary,
.header-cta,
.floating-help {
  background: linear-gradient(135deg, #C39A4A 0%, #233A54 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(7, 93, 120, 0.26);
}

.btn-primary:hover,
.header-cta:hover,
.floating-help:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.hero-card,
.product-card,
.gallery-card,
.quote-card,
.form-card,
.info-card,
.feature-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(7, 93, 120, 0.16);
  box-shadow: 0 16px 38px rgba(4, 55, 71, 0.13);
  backdrop-filter: blur(12px);
}

/* La imagen completa siempre visible: sin deformación ni recorte */
img {
  max-width: 100%;
}

.hero-card img,
.hero img,
.hero-image img,
.hero-media img,
.product-card img,
.product-image img,
.gallery img,
.gallery-item img,
.detail-image img,
.product-detail img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

.hero-card img {
  border-radius: 22px;
  background: linear-gradient(135deg, #E8D9B7, #EFF6F7);
}

/* La tarjeta informativa queda debajo y no tapa la imagen */
.hero-card-info {
  position: static;
  width: 100%;
  margin-top: 14px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(7, 93, 120, 0.15);
  box-shadow: 0 12px 24px rgba(4, 55, 71, 0.10);
  box-sizing: border-box;
  transform: none;
}

/* Contenedores de productos y galería mantienen la imagen centrada */
.product-image,
.gallery-item,
.detail-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  .hero-card img,
  .product-card img,
  .product-image img,
  .gallery-item img,
  .detail-image img {
    height: auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   CORRECCIÓN FINAL: HERO GENERAL Y HERO DE CONTACTO
   ========================================================= */

/* Mantiene el diseño original en Inicio y en todas las páginas generales. */
body:not(.contact-page) .hero-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 4.6 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

body:not(.contact-page) .hero-card-info {
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  bottom: 34px !important;
  width: auto !important;
  margin-top: 0 !important;
  padding: 20px !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Contacto: muestra el afiche completo, sin recortarlo ni deformarlo. */
.contact-page .hero-card img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* Contacto: la información se coloca debajo para no tapar el afiche. */
.contact-page .hero-card-info {
  position: static !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 14px !important;
  padding: 20px !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  body:not(.contact-page) .hero-card-info {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }

  .contact-page .hero-card img {
    height: auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   AJUSTE FINAL: SOLO COLOR DEL ENCABEZADO / NAVEGACIÓN
   Mantiene intactos tamaños, espacios, tarjetas e imágenes.
   ========================================================= */
.site-header {
  background: linear-gradient(135deg, #0A1628 0%, #233A54 55%, #233A54 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 30px rgba(3, 39, 52, 0.28) !important;
}

.site-header .brand-text strong,
.site-header .brand-text small,
.site-header .brand,
.site-header .brand * {
  color: #ffffff !important;
}

.site-header .main-nav {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.site-header .main-nav a {
  color: rgba(255, 255, 255, 0.84) !important;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
  color: #0A1628 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.site-header .header-cta {
  background: linear-gradient(135deg, #C39A4A 0%, #8F6928 100%) !important;
  color: #0A1628 !important;
  box-shadow: 0 10px 24px rgba(228, 168, 0, 0.30) !important;
}

.site-header .header-cta:hover {
  background: linear-gradient(135deg, #E0C27A 0%, #C39A4A 100%) !important;
  color: #0A1628 !important;
}

.site-header .menu-toggle {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* =========================================================
   CORRECCIÓN INTEGRAL FINAL — 2026-07
   Mantiene el diseño actual y corrige únicamente distribución,
   contraste, imágenes y tarjetas.
   ========================================================= */

/* HERO: imagen completa y ventana informativa debajo */
.hero-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body .hero-card img,
body:not(.contact-page) .hero-card img,
body.contact-page .hero-card img {
  width: 100% !important;
  height: 520px !important;
  max-height: 520px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: linear-gradient(135deg, #EDF4F5, #F7FAFA) !important;
}

body .hero-card-info,
body:not(.contact-page) .hero-card-info,
body.contact-page .hero-card-info {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 14px !important;
  padding: 18px 20px !important;
  transform: none !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: var(--color-primary-dark) !important;
  border: 1px solid rgba(7, 93, 120, 0.15) !important;
  box-shadow: 0 10px 22px rgba(4, 55, 71, 0.10) !important;
}

.hero-card-info strong,
.hero-card-info span,
.hero-card-info p {
  position: static !important;
}

.hero-card-info strong {
  color: var(--color-primary-dark) !important;
}

.hero-card-info p {
  color: var(--color-muted) !important;
}

/* PRODUCTOS DESTACADOS: tarjetas compactas y textos visibles */
.product-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  background: #ffffff !important;
  color: var(--color-primary-dark) !important;
}

.product-card img {
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  max-height: 260px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: #DCE3E8 !important;
}

.product-card > div {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px 22px 22px !important;
  background: #ffffff !important;
}

.product-card h3 {
  color: var(--color-primary-dark) !important;
  margin: 0 !important;
}

.product-card p {
  color: var(--color-muted) !important;
  margin-top: 8px !important;
}

.product-card a {
  display: inline-flex !important;
  margin-top: 14px !important;
  color: #8F6928 !important;
}

/* COTIZADOR VISUAL: recupera contraste y elimina zonas lavadas */
.visual-quote-section {
  background: linear-gradient(135deg, #0A1628 0%, #233A54 58%, #2B7F92 100%) !important;
  color: #ffffff !important;
}

.visual-quote-section .eyebrow,
.visual-quote-section h2,
.visual-quote-section h3,
.visual-quote-section strong,
.visual-quote-section p,
.visual-quote-section .visual-quote-result,
.visual-quote-section .visual-quote-copy {
  color: #ffffff !important;
}

.visual-quote-section .visual-quote-price,
.visual-quote-section [id*="Price"],
.visual-quote-section [id*="price"] {
  color: #C39A4A !important;
}

.visual-quote-form {
  background: #ffffff !important;
  color: var(--color-primary-dark) !important;
}

.visual-quote-form label,
.visual-quote-form input,
.visual-quote-form select {
  color: var(--color-primary-dark) !important;
}

/* GALERÍA: ancho normal, tarjetas ordenadas e imágenes completas */
.gallery-grid {
  width: min(1180px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: start !important;
}

.gallery-card {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.gallery-card img {
  width: 100% !important;
  height: 280px !important;
  max-height: 280px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: #DCE3E8 !important;
}

.gallery-card > div {
  height: auto !important;
  min-height: 0 !important;
  padding: 18px 20px 22px !important;
}

.gallery-card h3 {
  color: var(--color-primary-dark) !important;
}

.gallery-card p {
  color: var(--color-muted) !important;
}

/* Asegura que el contenido principal nunca quede reducido */
.container {
  width: min(1180px, calc(100% - 40px));
}

@media (max-width: 980px) {
  body .hero-card img,
  body:not(.contact-page) .hero-card img,
  body.contact-page .hero-card img {
    height: 440px !important;
    max-height: 440px !important;
  }

  .gallery-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .container,
  .gallery-grid {
    width: min(100% - 28px, 1180px) !important;
  }

  body .hero-card img,
  body:not(.contact-page) .hero-card img,
  body.contact-page .hero-card img {
    height: auto !important;
    max-height: 420px !important;
  }

  .gallery-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  .product-card img,
  .gallery-card img {
    height: auto !important;
    max-height: 340px !important;
  }
}


/* Botón “Quiero una igual” para placas */
.plate-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: #25d366;
  color: #ffffff !important;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative;
  z-index: 4;
}

.plate-whatsapp-btn:hover,
.plate-whatsapp-btn:focus-visible {
  background: #1fb85a;
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(37, 211, 102, 0.34);
}

.plate-whatsapp-btn span {
  font-size: 1.25rem;
  line-height: 1;
}

.pcard .plate-whatsapp-btn {
  margin-top: 16px;
}

.gallery-card > div .plate-whatsapp-btn {
  margin-top: auto;
}


/* Contador de visitas de la portada */
.visit-counter-section {
  padding: 0 0 34px;
}

.visit-counter {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
  padding: 14px 22px;
  color: #ffffff;
  background: linear-gradient(135deg, #0A1628, #233A54);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(4, 43, 58, .20);
}

.visit-counter-icon {
  font-size: 1.7rem;
}

.visit-counter > div {
  display: flex;
  flex-direction: column;
}

.visit-counter strong {
  font-size: 1.5rem;
  line-height: 1.1;
  color: #ffc21c;
}

.visit-counter > div span {
  font-size: .86rem;
  color: rgba(255, 255, 255, .86);
}


/* ===== Ajustes finales de producción: marca y galerías de 15 imágenes ===== */
.header .brand .logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 12px;
  background: #fff url("assets/logo-placas-invictus.jpeg") center/contain no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.extra-gallery-card .pimg img { object-fit: contain; background: #DCE3E8; }
.extra-gallery-card { min-width: 0; }
@media (max-width: 700px) {
  .header .brand .logo { width: 46px; height: 46px; flex-basis: 46px; }
  .header .brand .title strong { font-size: .82rem; }
}


/* Identidad Placas Invictus y galerías ampliadas */
.site-brand-logo { width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: 10px; padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.footer-brand .site-brand-logo { width: 66px; height: 66px; }
.extra-gallery-card .pimg { background: #EFF6F7; }
.extra-gallery-card .pimg img { width: 100%; height: 270px; object-fit: contain; }
@media (max-width: 760px) { .site-brand-logo { width: 46px; height: 46px; } .brand-text small { display:none; } .extra-gallery-card .pimg img { height: 230px; } }

/* Logo Placas Invictus: visible y protegido de la carga dinámica del CMS */
.site-header .brand .site-brand-logo,
.header .brand .site-brand-logo {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  flex: 0 0 58px !important;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 3px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}
.header .brand { display:flex !important; align-items:center !important; gap:10px !important; }
@media (max-width:760px) {
  .site-header .brand .site-brand-logo,
  .header .brand .site-brand-logo {
    width:46px !important; height:46px !important; min-width:46px !important; flex-basis:46px !important;
  }
}

/* ===== Catálogo jerárquico: producto -> material/tipo -> imágenes ===== */
.product-material-step {
  margin-top: 1.2rem;
  padding: 1.1rem;
  border: 1px solid rgba(7, 56, 75, .14);
  border-radius: 18px;
  background: #f7fbfc;
}
.product-material-step h3,
.gallery-step-heading h3 { margin: 0 0 .35rem; }
.material-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .8rem;
  margin-top: .9rem;
}
.material-option {
  appearance: none;
  width: 100%;
  border: 1px solid rgba(7, 56, 75, .18);
  border-radius: 15px;
  background: #fff;
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.material-option strong { display:block; color:#0A1628; font-size:1rem; margin-bottom:.3rem; }
.material-option span { display:block; font-size:.84rem; line-height:1.4; color:#5c6f77; }
.material-option:hover,
.material-option.active {
  transform: translateY(-2px);
  border-color: #0b8aab;
  box-shadow: 0 10px 24px rgba(7, 56, 75, .12);
}
.material-option.active { outline: 2px solid rgba(11, 138, 171, .16); }
.gallery-step-heading { margin: 1.35rem 0 .75rem; opacity:.72; }
.gallery-step-heading.is-active { opacity:1; }
.product-model-gallery[hidden] { display:none !important; }
.product-model-gallery { scroll-margin-top: 110px; }
.product-model-gallery .pcard[hidden] { display:none !important; }
@media (max-width: 620px) {
  .material-selector-grid { grid-template-columns: 1fr; }
}
.catalog-flow{margin:1.5rem 0 2rem}.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem}.flow-card{display:flex;flex-direction:column;background:#fff;border:1px solid #dbe5e8;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(0,0,0,.06)}.flow-card img{width:100%;height:150px;object-fit:cover;background:#eef3f4}.flow-card strong,.flow-card span{padding:.75rem 1rem 0}.flow-card span{padding-top:0;padding-bottom:1rem;color:#687b83}.flow-choice{min-height:150px;justify-content:center;text-align:center}.flow-choice strong{font-size:1.3rem}.flow-two{grid-template-columns:repeat(2,minmax(220px,1fr))}.flow-back{display:inline-block;margin-bottom:1rem;font-weight:700}.flow-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:1rem}.flow-image-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #dbe5e8;padding-bottom:1rem}.flow-image-card img{width:100%;height:180px;object-fit:cover;background:#eef3f4}.flow-image-card strong{display:block;padding:.7rem 1rem}.flow-image-card a{display:inline-block;margin:0 1rem;background:#18a957;color:#fff;padding:.65rem .9rem;border-radius:10px;text-decoration:none;font-weight:700}@media(max-width:650px){.flow-two{grid-template-columns:1fr}}

/* v1.4 - Jerarquia visual de Galeria/Distribucion + visor de imagenes */
.flow-choice{
  background:linear-gradient(145deg,#EAF6F5,#DDF0EF)!important;
  border:2px solid #C39A4A!important;
  box-shadow:0 14px 34px rgba(5,93,117,.20)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.flow-choice:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(5,93,117,.28)!important;border-color:#8F6928!important}
.flow-choice strong{font-size:1.45rem!important;color:#0A1628}
.flow-choice span{font-weight:600;color:#5F6B76!important}
.flow-image-card img{cursor:zoom-in}
.sb-image-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(5,17,24,.88);display:none;align-items:center;justify-content:center;padding:24px}
.sb-image-lightbox.is-open{display:flex}
.sb-image-lightbox__dialog{position:relative;width:min(1050px,96vw);max-height:94vh;display:flex;flex-direction:column;align-items:center}
.sb-image-lightbox__image{display:block;max-width:100%;max-height:78vh;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 20px 70px rgba(0,0,0,.42)}
.sb-image-lightbox__close,.sb-image-lightbox__nav{position:absolute;border:0;background:#fff;color:#10212a;box-shadow:0 6px 24px rgba(0,0,0,.25);cursor:pointer;font-weight:800}
.sb-image-lightbox__close{right:0;top:-18px;width:44px;height:44px;border-radius:50%;font-size:24px}
.sb-image-lightbox__nav{top:50%;transform:translateY(-50%);width:48px;height:58px;border-radius:14px;font-size:30px}
.sb-image-lightbox__prev{left:-62px}.sb-image-lightbox__next{right:-62px}
.sb-image-lightbox__caption{margin-top:12px;color:#fff;font-weight:700;text-align:center}
@media(max-width:760px){.sb-image-lightbox{padding:14px}.sb-image-lightbox__nav{top:auto;bottom:-58px}.sb-image-lightbox__prev{left:25%}.sb-image-lightbox__next{right:25%}.sb-image-lightbox__image{max-height:72vh}.sb-image-lightbox__caption{margin-bottom:45px}}


/* v1.5: jerarquía comercial, galerías limpias y accesibilidad */
.flow-guidance{margin:.35rem 0 1rem;color:var(--sb-muted)}
.flow-choice{position:relative;background:linear-gradient(145deg,color-mix(in srgb,var(--sb-accent) 12%,#fff),#fff)!important;border:2px solid color-mix(in srgb,var(--sb-accent) 55%,#dbe5e8)!important;box-shadow:0 16px 36px rgba(5,93,117,.18)!important;min-height:175px!important}
.flow-choice-kicker{display:inline-block!important;align-self:center;padding:.35rem .65rem!important;margin-bottom:.15rem;border-radius:999px;background:color-mix(in srgb,var(--sb-accent) 15%,#fff);color:var(--sb-primary)!important;font-size:.75rem;font-weight:900;letter-spacing:.08em}
.flow-card.is-pending{border-style:dashed;background:color-mix(in srgb,var(--sb-background) 75%,#fff)}
.flow-gallery-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.flow-counter{display:inline-flex;padding:.45rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--sb-accent) 12%,#fff);color:var(--sb-primary);font-weight:800;font-size:.9rem}
.flow-image-card{display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(8,40,51,.07);transition:transform .2s ease,box-shadow .2s ease}
.flow-image-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(8,40,51,.12)}
.flow-image-zoom{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:0!important}
.flow-image-description{display:block;padding:0 1rem .8rem;color:var(--sb-muted);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-image-card>a{margin-top:auto!important}
.flow-empty{margin-top:1rem;padding:2rem;border:1px dashed color-mix(in srgb,var(--sb-primary) 30%,#dbe5e8);border-radius:var(--sb-radius);text-align:center;background:color-mix(in srgb,var(--sb-background) 70%,#fff)}
.flow-empty strong,.flow-empty span{display:block}.flow-empty span{margin-top:.4rem;color:var(--sb-muted)}
.sb-image-lightbox__cta{margin-top:12px;padding:.8rem 1rem;border-radius:12px;background:#25d366;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.22)}
@media(max-width:650px){.flow-gallery-head{align-items:flex-start}.flow-images{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.flow-image-card img{height:145px}.flow-image-card strong{padding:.65rem .75rem}.flow-image-description{padding:0 .75rem .65rem}.flow-image-card>a{margin:0 .75rem!important;padding:.6rem .7rem!important;text-align:center;font-size:.88rem}}
@media(max-width:390px){.flow-images{grid-template-columns:1fr}}

/* v1.5.1 - Cupos siempre visibles + fotografías completas sin recorte */
.flow-card img,
.flow-image-card img,
.flow-image-zoom img,
.flow-image-placeholder img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #DCE3E8 !important;
}
.flow-card img { padding: 8px; }
.flow-image-zoom,
.flow-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 220px;
  padding: 8px;
  border: 0;
  background: #DCE3E8;
  overflow: hidden;
}
.flow-image-zoom { cursor: zoom-in; }
.flow-image-zoom img,
.flow-image-placeholder img {
  width: 100%;
  height: 100% !important;
  padding: 0;
}
.flow-image-card.is-empty {
  border-style: dashed;
  background: #fbfdfe;
}
.flow-image-card.is-empty .flow-image-placeholder {
  background: #EAF4F4;
}
.flow-image-pending {
  display: inline-block;
  margin: 0 1rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  background: #EDF1F3;
  color: #5F6B76;
  font-weight: 700;
  text-align: center;
}
/* La vista previa del administrador también respeta la fotografía completa. */
.admin-image-fit-contain,
.preview img {
  object-fit: contain !important;
  object-position: center !important;
  background: #DCE3E8 !important;
}
@media (max-width:650px){
  .flow-image-zoom,
  .flow-image-placeholder { height: 175px; }
}


/* =========================================================
   v1.7 — PREMIUM CORPORATIVO
   Azul noche + grafito + dorado champaña + marfil cálido
   ========================================================= */
:root{
  --sb-premium-navy:#0A1628;
  --sb-premium-navy-2:#14263D;
  --sb-premium-slate:#233A54;
  --sb-premium-gold:#C39A4A;
  --sb-premium-gold-light:#E0C27A;
  --sb-premium-ivory:#FBF8F1;
  --sb-premium-greige:#DCE3E8;
  --sb-premium-panel:#F2F4F5;
  --sb-premium-line:#C5CDD3;
  --sb-premium-text:#142033;
  --sb-premium-muted:#5F6B76;
  --shadow-premium:0 18px 46px rgba(9,15,25,.14);
}
html{background:#07111F}
body{
  color:var(--sb-text,var(--sb-premium-text))!important;
  background-color:var(--sb-background,var(--sb-premium-greige))!important;
  background-image:
    radial-gradient(circle at 8% 8%,rgba(184,146,74,.13),transparent 26%),
    radial-gradient(circle at 92% 18%,rgba(39,54,74,.13),transparent 28%),
    linear-gradient(145deg,#D9E1E6 0%,#EEF1F3 45%,#E1E7EB 100%)!important;
}

/* Cabecera premium oscura */
.site-header{
  background:rgba(16,26,43,.96)!important;
  border-bottom:1px solid rgba(214,188,122,.28)!important;
  box-shadow:0 8px 28px rgba(9,15,25,.18);
}
.brand-text strong{color:#F7F4EC!important}
.brand-text small{color:#CBD2D8!important}
.brand-mark{
  background:linear-gradient(145deg,#E0C27A,#9E7735)!important;
  color:#0A1628!important;
  box-shadow:0 10px 28px rgba(184,146,74,.25)!important;
}
.main-nav{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(214,188,122,.20)!important;
}
.main-nav a{color:#D9E0E5!important}
.main-nav a:hover,.main-nav a.active{
  color:#0A1628!important;
  background:#F2E6C8!important;
  box-shadow:0 7px 20px rgba(0,0,0,.18)!important;
}
.header-cta,.btn-primary,.button-primary{
  background:linear-gradient(135deg,#D0AA5A 0%,#9D7228 100%)!important;
  color:#0A1628!important;
  border:1px solid rgba(255,240,196,.32)!important;
  box-shadow:0 12px 28px rgba(98,70,25,.24)!important;
}
.header-cta:hover,.btn-primary:hover,.button-primary:hover{
  background:linear-gradient(135deg,#E0C27A,#C39A4A)!important;
  transform:translateY(-2px);
}
.menu-toggle{background:linear-gradient(135deg,#C39A4A,#8F6928)!important}
.mobile-menu{background:rgba(4,9,16,.76)!important}
.mobile-menu-panel{background:#F8F6F0!important}
.mobile-menu-head strong{color:#0A1628!important}
.mobile-menu-head button{background:#E8D9B7!important;color:#0A1628!important}
.mobile-links a{background:#FBF8F1!important;border-color:#CBD2D6!important}

/* Hero y grandes bloques */
.hero-section,.page-hero,.hero{
  background:
    radial-gradient(circle at 14% 20%,rgba(214,188,122,.20),transparent 30%),
    radial-gradient(circle at 90% 18%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(135deg,#0A1628 0%,#14263D 55%,#233A54 100%)!important;
  border-bottom:1px solid rgba(184,146,74,.35)!important;
}
.hero-section h1,.hero-section h2,.hero-section .hero-copy h1,.page-hero h1,.hero h1{color:#FFF9EC!important}
.hero-section p,.page-hero p,.hero p{color:#D6D0C5!important}
.hero-section .eyebrow,.page-hero .eyebrow,.hero .eyebrow{color:#E0C27A!important}
.hero-card,.hero-panel{
  background:rgba(252,250,245,.96)!important;
  border:1px solid rgba(214,188,122,.45)!important;
  box-shadow:0 24px 60px rgba(4,9,16,.28)!important;
}

/* Alternancia visible y elegante */
.section{background:linear-gradient(180deg,#E7E2D8 0%,#EFEAE1 100%)!important}
.section-light{background:linear-gradient(135deg,#F5F1E9 0%,#EAE4D9 100%)!important}
.section-dark{
  background:
    radial-gradient(circle at 90% 10%,rgba(184,146,74,.17),transparent 28%),
    linear-gradient(135deg,#0D1625,#14263D 58%,#202F42)!important;
  color:#F5F0E6!important;
}
.section-dark h2,.section-dark h3,.section-dark strong{color:#FFF8E8!important}
.section-dark p,.section-dark span{color:#D1C9BC!important}
.section-heading h2,.page-title h1{color:#0A1628!important}
.section-heading .eyebrow,.eyebrow{color:#9A742F!important}
.section-heading::after{background:linear-gradient(90deg,#C39A4A,#E0C27A)!important}

/* Tarjetas premium */
.product-card,.gallery-card,.info-card,.feature-card,.card,.flow-card,.flow-image-card,.quote-card,.form-card,.faq-item,.service-card{
  background:linear-gradient(180deg,#FFFDF8 0%,#F5F0E7 100%)!important;
  border:1px solid #D6CBB8!important;
  box-shadow:var(--shadow-premium)!important;
}
.product-card,.gallery-card,.flow-card,.flow-image-card{
  border-top:3px solid #C39A4A!important;
}
.product-card:hover,.gallery-card:hover,.flow-card:hover,.flow-image-card:hover{
  border-color:#C39A4A!important;
  box-shadow:0 22px 48px rgba(9,15,25,.19)!important;
}
.product-card h3,.gallery-card h3,.flow-card strong,.flow-image-card strong,.info-card h3{color:#14263D!important}
.product-card p,.gallery-card p,.flow-card span,.info-card p{color:#5F6B76!important}

/* Marcos de imágenes: completos y con aire premium */
.product-card img,.flow-card img,.flow-image-zoom,.flow-image-placeholder,.gallery-item,.product-image,.detail-image{
  background:linear-gradient(135deg,#E1E7EB 0%,#F4F6F7 100%)!important;
}
.flow-image-card.is-empty,.flow-card.is-pending{
  background:linear-gradient(180deg,#E1E7EB,#DCD5C8)!important;
  border-color:#BDB19D!important;
}
.flow-image-card.is-empty .flow-image-placeholder{background:#D7DEE3!important}
.flow-image-pending{
  background:#D7CDBD!important;
  color:#524D45!important;
  border:1px solid #C1B49F!important;
}

/* Galería / distribución como decisiones protagonistas */
.flow-choice{
  background:
    linear-gradient(145deg,rgba(214,188,122,.30),rgba(252,250,245,.98))!important;
  border:2px solid #C39A4A!important;
  box-shadow:0 18px 40px rgba(9,15,25,.16)!important;
}
.flow-choice:hover{
  background:linear-gradient(145deg,#E9DDBF,#FFF9EC)!important;
  border-color:#8F6928!important;
  box-shadow:0 24px 48px rgba(9,15,25,.22)!important;
}
.flow-choice strong{color:#0A1628!important}
.flow-choice span{color:#615B52!important}
.flow-choice-kicker,.flow-counter{
  background:#E8D9B7!important;
  color:#5B421B!important;
  border:1px solid #C8A45E!important;
}

/* Botones secundarios y CTA */
.btn-secondary,.secondary,.outline-btn,.flow-back{
  color:#14263D!important;
  border-color:#9F7A37!important;
}
.flow-image-card>a,.whatsapp-float,.sb-image-lightbox__cta{
  background:#1F8F55!important;
  color:#fff!important;
}

/* Formularios */
input,select,textarea{
  background:#FFFDF8!important;
  color:#142033!important;
  border-color:#CFC4B1!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#C39A4A!important;
  box-shadow:0 0 0 3px rgba(184,146,74,.18)!important;
  outline:none;
}

/* Footer oscuro con acento dorado */
.site-footer,footer{
  background:
    radial-gradient(circle at 80% 0%,rgba(184,146,74,.14),transparent 30%),
    linear-gradient(135deg,#080E18 0%,#0A1628 55%,#14263D 100%)!important;
  border-top:1px solid rgba(214,188,122,.28)!important;
  color:#D9D1C3!important;
}
.site-footer h3,.site-footer strong,footer h3,footer strong{color:#FFF7E6!important}
.site-footer a:hover,footer a:hover{color:#E0C27A!important}

/* Visor */
.sb-image-lightbox{background:rgba(4,8,14,.94)!important}
.sb-image-lightbox__image{background:#F8F3E9!important;border:1px solid rgba(214,188,122,.35)!important}
.sb-image-lightbox__close,.sb-image-lightbox__nav{background:#F5E8C8!important;color:#0A1628!important}

/* Selección de materiales */
.material-option{
  background:linear-gradient(180deg,#FFFDF8,#F3EDE2)!important;
  border-color:#D5CAB7!important;
  box-shadow:0 10px 25px rgba(9,15,25,.08)!important;
}
.material-option strong{color:#0A1628!important}
.material-option span{color:#5F6B76!important}
.material-option:hover,.material-option.active{
  border-color:#C39A4A!important;
  box-shadow:0 15px 32px rgba(9,15,25,.16)!important;
}
.material-option.active{outline:2px solid rgba(184,146,74,.20)!important}

/* Scrollbar sutil premium */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:#DED8CD}
  ::-webkit-scrollbar-thumb{background:#8B7C64;border:3px solid #DED8CD;border-radius:20px}
}

@media(max-width:768px){
  body{background:#DCE3E8!important}
  .site-header{background:rgba(16,26,43,.98)!important}
  .section{background:#EAE5DC!important}
  .section-light{background:#F4F6F7!important}
  .hero-section,.page-hero,.hero{background:linear-gradient(160deg,#0D1625,#1C2D42)!important}
}

/* =========================================================
   v1.7.1 — CONTRASTE GLOBAL PREMIUM
   Corrección final de legibilidad sobre fondos claros/oscuros
   ========================================================= */

/* Texto base en superficies claras */
body{color:#1B2635!important}
.section:not(.section-dark):not(.visual-quote-section) h1,
.section:not(.section-dark):not(.visual-quote-section) h2,
.section:not(.section-dark):not(.visual-quote-section) h3,
.section:not(.section-dark):not(.visual-quote-section) h4,
.section-light h1,.section-light h2,.section-light h3,.section-light h4,
.page-main h1,.page-main h2,.page-main h3{color:#0A1628!important}
.section:not(.section-dark):not(.visual-quote-section) p,
.section:not(.section-dark):not(.visual-quote-section) li,
.section-light p,.section-light li{color:#535B65!important}

/* Secciones oscuras: ningún título puede heredar azul/negro */
.section-dark,
.section-dark .container,
.section-dark .section-heading{color:#F7F1E6!important}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,
.section-dark .section-heading h1,.section-dark .section-heading h2,.section-dark .section-heading h3,
.section-dark strong{color:#FFF9EC!important}
.section-dark p,.section-dark li,.section-dark .section-heading p{color:#D9D3C8!important}
.section-dark .eyebrow,.section-dark .section-heading .eyebrow{color:#E2C77F!important}
.section-dark a:not(.btn):not(.header-cta){color:#E7CD88!important}

/* Cotizador visual: forzar bloque oscuro y texto de alto contraste */
.section.visual-quote-section,
.visual-quote-section{
  background:radial-gradient(circle at 88% 12%,rgba(198,158,75,.18),transparent 30%),linear-gradient(135deg,#0B1422 0%,#14263D 58%,#24384D 100%)!important;
  color:#FFF9EC!important;
}
.visual-quote-section .visual-quote-grid,
.visual-quote-section .section-heading{color:#FFF9EC!important}
.visual-quote-section .eyebrow{color:#E2C77F!important}
.visual-quote-section h1,.visual-quote-section h2,.visual-quote-section h3{color:#FFF9EC!important}
.visual-quote-section p{color:#E0D9CE!important}
.visual-quote-section .quote-result{background:rgba(255,255,255,.08)!important;border-color:rgba(226,199,127,.34)!important}
.visual-quote-section .quote-result small,.visual-quote-section .quote-result span{color:#D8D0C4!important}
.visual-quote-section .quote-result strong{color:#F0D28B!important}
.visual-quote-section .visual-quote-form{background:#FFFDF8!important;color:#0A1628!important;border:1px solid #D9C9A8!important}
.visual-quote-section .visual-quote-form label{color:#14263D!important}
.visual-quote-section .visual-quote-form input,
.visual-quote-section .visual-quote-form select{background:#FBF8F1!important;color:#14263D!important;border-color:#CDBD9E!important}

/* Tarjetas sobre secciones oscuras conservan texto oscuro porque son claras */
.section-dark .product-card,.section-dark .gallery-card,.section-dark .card,
.section-dark .product-card *, .section-dark .gallery-card *, .section-dark .card *{color:#14263D!important}
.section-dark .product-card p,.section-dark .gallery-card p,.section-dark .card p{color:#626A72!important}
.section-dark .product-card .badge,.section-dark .gallery-card .badge{color:#5B421B!important}

/* Tecnología, testimonios y bloques informativos claros */
.tech-card h3,.testimonial-card strong,.feature-card h3,.info-card h3{color:#14263D!important}
.tech-card p,.testimonial-card p,.testimonial-card span,.feature-card p,.info-card p{color:#59616B!important}

/* CTA oscuro / premium */
.cta-section .cta-box{background:linear-gradient(135deg,#0A1628,#22344A)!important;border:1px solid rgba(226,199,127,.32)!important}
.cta-section .cta-box h2,.cta-section .cta-box h3,.cta-section .cta-box strong{color:#FFF9EC!important}
.cta-section .cta-box p{color:#DAD3C7!important}
.cta-section .cta-box .eyebrow{color:#E2C77F!important}

/* Footer: enlaces y textos siempre visibles */
.site-footer,.site-footer p,.site-footer span,footer,footer p,footer span{color:#D8D1C5!important}
.site-footer h2,.site-footer h3,.site-footer h4,.site-footer strong,
footer h2,footer h3,footer h4,footer strong{color:#FFF9EC!important}
.site-footer a,footer a{color:#E7D8B2!important}
.site-footer a:hover,footer a:hover{color:#F3D98F!important}

/* Formularios y campos */
form label{color:#14263D!important}
input,select,textarea{color:#14263D!important}
input::placeholder,textarea::placeholder{color:#747B82!important;opacity:1}

/* Contraste de botones dorados */
.btn-primary,.header-cta,.button-primary{color:#0A1628!important;font-weight:800!important}
.btn-secondary,.outline-btn,.flow-back{color:#14263D!important}

/* Navegación */
.site-header .brand,.site-header .brand-text,.site-header .brand strong{color:#FFF9EC!important}
.site-header .brand span,.site-header .brand-text small{color:#C9D1D8!important}
.nav a{color:#DCE3E8!important}
.nav a.active,.nav a:hover{color:#0A1628!important}

/* Evitar texto apagado en contadores, badges y ayudas */
.small,.helper-text{color:#66707A!important}
.section-dark .small,.visual-quote-section .small{color:#C8D0D6!important}

@media(max-width:768px){
  .section-dark h1,.section-dark h2,.section-dark h3,.visual-quote-section h2{color:#FFF9EC!important}
  .section-dark p,.visual-quote-section p{color:#D7DEE3!important}
}

/* v1.8 - Fotografías completas y consistentes en todo el catálogo */
.flow-card img,.flow-image-card img,.flow-image-zoom img,.flow-image-placeholder img,.category-card img,.product-card img,.gallery-card img{object-fit:contain!important;object-position:center!important;background:#F4F6F7!important}.flow-card img{height:180px!important;padding:8px}.flow-image-zoom,.flow-image-placeholder{height:230px!important;background:#DCE3E8!important}.flow-image-zoom img,.flow-image-placeholder img{height:100%!important;width:100%!important;padding:8px!important}.category-card img{padding:8px!important;background:#F4F6F7!important}@media(max-width:650px){.flow-image-zoom,.flow-image-placeholder{height:180px!important}}

/* =========================================================
   v1.9 — GALERÍAS 3 COLUMNAS + FOTO 98% + ZOOM AVANZADO
   ========================================================= */
/* En todas las galerías de producto: 3 tarjetas por fila en escritorio. */
.flow-images{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}
.flow-image-card{
  width:100% !important;
  min-width:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
/* La fotografía utiliza prácticamente todo el ancho útil de la tarjeta. */
.flow-image-zoom,
.flow-image-placeholder{
  width:98% !important;
  height:330px !important;
  margin:1% auto 0 !important;
  padding:2px !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#DCE3E8 !important;
}
.flow-image-zoom img,
.flow-image-placeholder img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
}
.flow-image-card strong{font-size:1.05rem !important}

/* Visor avanzado: zoom, rueda, arrastre y lupa. */
.sb-image-lightbox__dialog{
  width:min(1180px,97vw) !important;
  max-height:96vh !important;
}
.sb-image-lightbox__viewport{
  position:relative;
  width:100%;
  height:min(76vh,760px);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#0A101B;
  border:1px solid rgba(214,188,122,.35);
  box-shadow:0 20px 70px rgba(0,0,0,.42);
  cursor:zoom-in;
  touch-action:none;
  user-select:none;
}
.sb-image-lightbox__viewport.is-zoomed{cursor:grab}
.sb-image-lightbox__viewport.is-dragging{cursor:grabbing}
.sb-image-lightbox__image{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform-origin:center center;
  will-change:transform;
  transition:transform .12s ease-out;
  pointer-events:none;
}
.sb-image-lightbox__viewport.is-dragging .sb-image-lightbox__image{transition:none}
.sb-image-lightbox__toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.sb-image-lightbox__tool{
  border:1px solid rgba(214,188,122,.5);
  background:#F5E8C8;
  color:#0A1628;
  min-width:44px;
  height:40px;
  border-radius:11px;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.sb-image-lightbox__tool:hover{background:#E0C27A}
.sb-image-lightbox__zoom-value{min-width:64px;text-align:center;color:#fff;font-weight:800}
.sb-image-lightbox__hint{color:#D7DEE3;font-size:.82rem;text-align:center;margin-top:7px}
.sb-image-lightbox__lens{
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  border:4px solid #E0C27A;
  box-shadow:0 10px 38px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.5);
  background-repeat:no-repeat;
  background-color:#fff;
  pointer-events:none;
  display:none;
  z-index:7;
}
.sb-image-lightbox__viewport.lens-active{cursor:crosshair}
.sb-image-lightbox__viewport.lens-active .sb-image-lightbox__lens{display:block}
.sb-image-lightbox__tool.is-active{background:#C39A4A;color:#0A1628}

@media(max-width:980px){
  .flow-images{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px !important}
  .flow-image-zoom,.flow-image-placeholder{height:300px !important}
}
@media(max-width:650px){
  .flow-images{grid-template-columns:1fr !important;gap:16px !important}
  .flow-image-zoom,.flow-image-placeholder{width:98% !important;height:330px !important;margin:1% auto 0 !important}
  .sb-image-lightbox{padding:10px !important}
  .sb-image-lightbox__viewport{height:67vh}
  .sb-image-lightbox__lens{display:none !important}
  .sb-image-lightbox__toolbar{gap:6px}
  .sb-image-lightbox__tool{min-width:42px;padding:0 10px}
  .sb-image-lightbox__hint{font-size:.76rem}
}

/* =========================================================
   v1.9.3 — PREMIUM OCEAN / EMERALD / CHAMPAGNE
   Más llamativo, profesional y con alto contraste.
   ========================================================= */
:root{
  --sb-primary:#071A2B;
  --sb-secondary:#123B5D;
  --sb-accent:#D6A94B;
  --sb-accent2:#1C8B82;
  --sb-background:#E8E1D6;
  --sb-surface:#FFFDF8;
  --sb-text:#14212B;
  --sb-muted:#65707A;
  --sb-radius:16px;
  --sb-v193-navy:#071A2B;
  --sb-v193-blue:#123B5D;
  --sb-v193-teal:#0F766E;
  --sb-v193-teal-bright:#1C8B82;
  --sb-v193-gold:#D6A94B;
  --sb-v193-gold-soft:#EACF8B;
  --sb-v193-ivory:#FFFDF8;
  --sb-v193-sand:#E8E1D6;
  --sb-v193-ink:#14212B;
}
body{background:linear-gradient(145deg,#E4DDD1 0%,#F3EFE8 48%,#DDE6E4 100%)!important;color:var(--sb-v193-ink)!important}
.site-header{background:linear-gradient(100deg,#061521 0%,#0B2437 60%,#123B5D 100%)!important;border-bottom:1px solid rgba(234,207,139,.38)!important;box-shadow:0 10px 30px rgba(3,18,29,.20)!important}
.site-header .nav,.site-header .main-nav{background:rgba(255,255,255,.08)!important;border-color:rgba(234,207,139,.28)!important}
.site-header .nav a,.site-header .main-nav a{color:#E7EEF0!important}
.site-header .nav a:hover,.site-header .nav a.active,.site-header .main-nav a:hover,.site-header .main-nav a.active{background:#FFFDF8!important;color:#071A2B!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important}
.header-cta,.btn-primary,.button-primary{background:linear-gradient(135deg,#E2BC63,#C99730)!important;color:#071A2B!important;border:1px solid #F0D792!important;box-shadow:0 12px 28px rgba(180,132,39,.30)!important}
.header-cta:hover,.btn-primary:hover,.button-primary:hover{background:linear-gradient(135deg,#EACF8B,#D6A94B)!important;transform:translateY(-2px)}
.section{background:#ECE6DC!important}
.section-light{background:#FFFDF8!important}
.section:nth-of-type(even):not(.section-dark):not(.visual-quote-section){background:linear-gradient(135deg,#F8F4EC,#E7EFED)!important}
.section-dark{background:radial-gradient(circle at 85% 15%,rgba(28,139,130,.22),transparent 28%),linear-gradient(135deg,#061521 0%,#0D2B40 52%,#123B5D 100%)!important}
.section-dark .eyebrow{color:#EACF8B!important}
.page-hero,.hero,.hero-section{background:radial-gradient(circle at 82% 18%,rgba(28,139,130,.28),transparent 32%),linear-gradient(135deg,#061521,#0D2B40 58%,#174A61)!important}
.card,.product-card,.gallery-card,.flow-card,.flow-image-card,.category-card,.service-card,.feature-card,.testimonial-card,.info-card{background:#FFFDF8!important;border-color:#D7C8AC!important;box-shadow:0 16px 38px rgba(7,26,43,.12)!important}
.card:hover,.product-card:hover,.gallery-card:hover,.flow-image-card:hover,.category-card:hover{border-color:#D6A94B!important;box-shadow:0 20px 44px rgba(7,26,43,.18)!important}
.badge,.eyebrow,.flow-counter{color:#725315!important}
.badge,.flow-counter{background:#F2E5C4!important;border:1px solid #DCC079!important}
.material-option{background:linear-gradient(145deg,#FFFDF8,#EDF4F2)!important;border-color:#B9CCC8!important}
.material-option:hover,.material-option.active{border-color:#1C8B82!important;box-shadow:0 16px 34px rgba(15,118,110,.18)!important}
.material-option.active{outline:2px solid rgba(28,139,130,.20)!important}
.flow-choice{background:linear-gradient(145deg,#E9F3F1,#FFF9EA)!important;border-color:#D6A94B!important;box-shadow:0 16px 38px rgba(7,26,43,.16)!important}
.flow-choice:hover{border-color:#1C8B82!important;box-shadow:0 20px 46px rgba(15,118,110,.20)!important}
.flow-choice-kicker{background:#DCEDE9!important;color:#0A5D58!important}
.flow-image-zoom,.flow-image-placeholder{background:#E3E9E6!important;border:1px solid #C9D2CE!important}
.flow-image-zoom img,.flow-image-placeholder img{background:#FFFDF8!important}
.visual-quote-section{background:radial-gradient(circle at 84% 16%,rgba(214,169,75,.18),transparent 30%),radial-gradient(circle at 8% 85%,rgba(28,139,130,.20),transparent 33%),linear-gradient(135deg,#061521,#0B2A3D 56%,#123B5D)!important}
.visual-quote-section .visual-quote-form{border:1px solid #DBC183!important;box-shadow:0 18px 46px rgba(0,0,0,.28)!important}
.cta-section .cta-box{background:linear-gradient(135deg,#071A2B,#0F3A4D)!important;border-color:rgba(234,207,139,.45)!important}
.site-footer,footer{background:linear-gradient(135deg,#04111C,#071A2B 50%,#0A2A36)!important;border-top:1px solid rgba(234,207,139,.34)!important}
.site-footer a:hover,footer a:hover{color:#EACF8B!important}
input,select,textarea{background:#FFFDF8!important;border-color:#CDBFAD!important}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(28,139,130,.28)!important;border-color:#1C8B82!important}
.btn-secondary,.outline-btn,.flow-back{border-color:#AFC8C3!important;background:#F1F7F5!important;color:#0D4C48!important}
.btn-secondary:hover,.outline-btn:hover,.flow-back:hover{background:#DCEDE9!important;border-color:#1C8B82!important}
.sb-image-lightbox__tool{background:#F5E8C8!important;border-color:#D6A94B!important}.sb-image-lightbox__tool:hover,.sb-image-lightbox__tool.is-active{background:#1C8B82!important;color:white!important;border-color:#55B7AF!important}.sb-image-lightbox__lens{border-color:#EACF8B!important}
@supports selector(::-webkit-scrollbar){::-webkit-scrollbar-track{background:#DAD4CA}::-webkit-scrollbar-thumb{background:#567A79;border-color:#DAD4CA}}