/* Embapel · Azul tinta, blanco papel y naranja. Componentes compartidos. */
:root {
  --brand: #17324d;
  --brand-deep: #10263b;
  --accent: #f47a36;
  --accent-hover: #e66b28;
  --surface: #edf1f3;
  --paper: #fafaf7;
  --ink: #26323b;
  --muted: #586570;
  --line: #d8e0e5;
  --line-dark: var(--brand);
  --cobalt: var(--brand);
  --cobalt-deep: var(--brand-deep);
  --cobalt-pale: var(--surface);
  --heritage: var(--accent);
  --food: var(--surface);
  --food-deep: var(--brand);
  --fashion: var(--brand);
  --fashion-deep: var(--brand-deep);
  --ecommerce: var(--brand);
  --ecommerce-deep: var(--brand-deep);
  --info: var(--brand);
  --focus: var(--brand);
}

h1, h2, h3 { color: var(--brand); }
.site-header { color: var(--brand); background: rgb(250 250 247 / 97%); border-bottom-color: var(--line); }
.site-header .brand-logo { filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(1462%) hue-rotate(169deg) brightness(94%) contrast(92%); }
.site-header .nav-links a[aria-current="page"] { color: var(--brand); text-decoration-color: var(--accent); }
.nav-links a:hover, .text-link:hover { text-decoration-color: var(--accent); }
.account-link, .menu-toggle, .cart-link { color: var(--brand); border-color: var(--line); }
.account-link:hover, .cart-link:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }
.cart-count, .cart-link:hover .cart-count, .cart-link[aria-current="page"] .cart-count { color: var(--brand-deep); background: var(--accent); }
.nav-links a[aria-current="page"]::after { background: var(--accent); }

.btn-primary, .btn-cart { color: var(--brand-deep); background: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-cart:hover { color: var(--brand-deep); background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline { color: var(--brand); border-color: var(--brand); }
.btn-outline:hover, .btn-dark { color: var(--white); background: var(--brand); border-color: var(--brand); }
.btn-light { color: var(--brand); background: var(--white); }
.btn-light:hover { color: var(--brand); background: var(--surface); }
.btn:focus-visible, .btn-cart:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
.field :is(input, textarea, select):focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(23 50 77 / 15%); }

.section-dark, .section-blue, .site-footer, .proof-strip, .brand-close, .packaging-callout, .cta-band,
.order-summary, .checkout-summary, .catalog-demo-note, .access-story, .blog-hero { color: var(--white); background: var(--brand); }
:where(.section-dark, .section-blue, .site-footer, .brand-close, .packaging-callout, .cta-band,
 .order-summary, .checkout-summary, .catalog-demo-note, .access-story, .summary-block, .blog-hero,
 .hero-video-inner, .commerce-step, .transfer-panel) :is(h1, h2, h3) { color: inherit; }
:where(.section-dark, .section-blue, .site-footer, .proof-strip, .brand-close, .packaging-callout,
 .cta-band, .order-summary, .checkout-summary, .access-story, .hero-video-inner, .blog-hero) :focus-visible {
  outline-color: var(--accent);
}
.proof-item strong { color: var(--accent); }
.supports-overview, .directory-intro, .blog-index, .faq-section { background: var(--paper); }
.sector-intro, .pers-config + .section + .section { background: var(--surface); }
.sector-food, .sector-ecommerce, .solution-page-list .solution-food, .solution-page-list .solution-ecommerce { color: var(--ink); background: var(--surface); }
.sector-fashion, .solution-page-list .solution-fashion { color: var(--ink); background: var(--paper); }
.sector-band { border-top: 1px solid var(--line); }
.sector-band::after { color: var(--brand); opacity: .035; }
.sector-copy :is(h2, h3), .sector-link { color: var(--brand); }
.sector-uses a { color: var(--brand); border-color: var(--line); background: var(--white); }
.sector-uses a:hover { background: var(--surface); border-color: var(--brand); }
.sector-media, .sector-fashion .sector-media, .sector-ecommerce .sector-media,
.sector-directory-media, .sector-fashion .sector-directory-media, .sector-ecommerce .sector-directory-media,
.subsector-hero-media { color: var(--brand); background: var(--white); border-color: var(--line); }
.sector-fashion .production-reserve small, .sector-ecommerce .production-reserve small,
.design-catalog-hero.sector-ecommerce .production-reserve small { color: var(--muted); }
.category-panel, .design-card { border-color: var(--line); }
.category-panel:hover .category-panel-media,
.category-panel:nth-child(2):hover .category-panel-media,
.category-panel:nth-child(3):hover .category-panel-media { color: var(--brand); background: var(--surface); }
.category-panel:nth-child(2):hover .category-panel-media small,
.category-panel:nth-child(3):hover .category-panel-media small { color: var(--muted); }
.category-panel-action { color: var(--brand); border-color: var(--accent); }
.solution-product-card { border-color: var(--line); }
.solution-product-card:hover { border-color: var(--brand); }
.solution-gallery-actions .btn { color: var(--brand-deep); background: var(--accent); border-color: var(--accent); }
.solution-gallery-actions .btn:hover { color: var(--brand-deep); background: var(--accent-hover); border-color: var(--accent-hover); }

.empty-state, .commerce-empty, .solution-empty .shell { color: var(--brand); border-color: var(--line); background: var(--surface); }
.demo-banner, .demo-form-note, .blog-demo-label, .faq-pending { color: var(--brand); background: var(--surface); border-color: var(--line); }
.summary-block:nth-child(2) { color: var(--brand); background: var(--surface); }
.status-chip { color: var(--brand); background: var(--surface); }
.pers-tag-best, .pers-opt.is-active, .pers-qty-preset.is-active { color: var(--brand); background: var(--surface); }
.pers-opt.is-active small { color: var(--brand); }
.pers-opt.is-active, .pers-qty-preset.is-active { border-color: var(--brand); }
.pers-upload:hover { background: var(--surface); }
.pers-canvas, .pers-thumb, .pers-qty button { background: var(--surface); }
.pers-qty button:hover { background: var(--line); }
.hero-overlay { background: linear-gradient(100deg, rgb(16 38 59 / 88%), rgb(16 38 59 / 64%) 55%, rgb(16 38 59 / 36%)); }
.hero-video-inner .display { color: var(--white); }
.site-footer .brand-logo, .brand-close-grid > img { filter: brightness(0) invert(1); }
.footer-col a:hover, .footer-social a:hover { color: var(--white); text-decoration-color: var(--accent); border-color: var(--accent); }
.footer-social a:hover { background: var(--brand-deep); }
.complete-order.is-loading::before { border-color: rgb(16 38 59 / 30%); border-top-color: var(--brand-deep); }
.cta-band .btn-light, .packaging-callout .btn-light { color: var(--brand-deep); background: var(--accent); border-color: var(--accent); }
.cta-band .btn-light:hover, .packaging-callout .btn-light:hover { color: var(--brand-deep); background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-whatsapp { color: var(--brand); background: transparent; border-color: var(--brand); }
.btn-whatsapp:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }
:is(.brand-close, .packaging-callout, .cta-band, .section-dark, .section-blue, .hero-video-inner) .btn-whatsapp {
  color: var(--white); background: transparent; border-color: rgb(255 255 255 / 65%);
}
:is(.brand-close, .packaging-callout, .cta-band, .section-dark, .section-blue, .hero-video-inner) .btn-whatsapp:hover {
  color: var(--brand); background: var(--white); border-color: var(--white);
}

@media (max-width: 920px) {
  .nav-links { color: var(--brand); background: var(--paper); }
  .sector-menu-food, .sector-menu-fashion, .sector-menu-ecommerce { color: var(--brand); background: var(--surface); }
  .sector-menu-item > .nav-menu-row > a:hover,
  .sector-menu-item > .nav-menu-row > a:focus-visible,
  .sector-menu-item > .nav-menu-row > .submenu-toggle:hover { background: var(--white); }
}