/* Paleta tomada del logo original transparente: azul marino y azul eléctrico. */
:root {
  --trazzo-navy: #001840;
  --trazzo-blue: #0040f8;
  --trazzo-deep: #000d2b;
  --trazzo-ice: #f5f8ff;
  --trazzo-line: #23539a;
  --blue: var(--trazzo-blue);
}

html { background: var(--trazzo-deep); }
body { background: var(--trazzo-deep); color: var(--trazzo-ice); }
main {
  background:
    radial-gradient(ellipse at 75% 9%, rgba(0,64,248,.13), transparent 31%),
    radial-gradient(ellipse at 5% 62%, rgba(0,64,248,.08), transparent 26%),
    var(--trazzo-deep);
}
.scroll-progress { background: var(--trazzo-blue); box-shadow: 0 0 12px rgba(0,64,248,.45); }
.announcement { background: var(--trazzo-navy); border-bottom: 1px solid var(--trazzo-line); color: #e7efff; }
.announcement span { color: #6d91ff; }

/* El logo se usa sin caja, borde, recorte ni alteración cromática. */
.site-header {
  width: 100%; max-width: none; margin: 0; min-height: 105px;
  padding-inline: max(24px, calc((100vw - 1380px)/2));
  background: var(--trazzo-ice); color: var(--trazzo-navy);
  border-bottom: 4px solid var(--trazzo-blue);
}
.brand { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.brand-logo { display: block; width: 95px; height: 95px; object-fit: contain; background: transparent; }
.header-search { background: #fff; border-color: #b9c9e7; color: var(--trazzo-navy); }
.header-search input { color: var(--trazzo-navy); }
.header-search input::placeholder { color: #66799c; }
.header-search button { background: var(--trazzo-blue); }
.quote-trigger, .motion-toggle { background: var(--trazzo-navy); color: #fff; border-color: var(--trazzo-navy); }
.quote-trigger:hover, .motion-toggle:hover { background: #0a2c72; }
.quote-trigger b { background: var(--trazzo-blue); }
.mobile-menu-button { color: var(--trazzo-navy); }
.main-nav { background: var(--trazzo-navy); border-top: 0; border-bottom: 1px solid var(--trazzo-line); }
.nav-inner a { color: #eef3ff; }
.nav-inner .nav-pdf, .nav-inner a:hover { color: #9db7ff; }

/* La portada toma la forma de una pieza TRAZZO: huella, marco y dos azules. */
.campaign-stage {
  border: 2px solid var(--trazzo-blue); border-radius: 12px;
  background: var(--trazzo-navy);
  box-shadow: 0 28px 70px rgba(0,5,24,.5), 0 0 0 1px rgba(111,148,255,.12);
}
.campaign-stage:after { inset: 12px; border: 1px solid rgba(163,188,255,.4); border-radius: 4px; }
.campaign-stage:before {
  background: repeating-radial-gradient(ellipse at 74% 51%, transparent 0 35px, rgba(115,152,255,.075) 36px 38px, transparent 39px 73px);
  opacity: .42; mix-blend-mode: normal;
}
.campaign-caps { background: linear-gradient(112deg, #001337 0%, var(--trazzo-navy) 43%, #053db9 100%); }
.campaign-bags { background: linear-gradient(112deg, #001337, #082964 70%, #0c3c9a); }
.campaign-drink { background: linear-gradient(112deg, #001337, #07327d 70%, #0040f8); }
.campaign-caps h1 em { color: #9eb8ff; text-shadow: none; }
.campaign h2 em { color: #9eb8ff; }
.campaign-caps .campaign-kicker, .campaign-kicker { color: #e4edff; background: rgba(0,24,64,.65); border-color: #688cff; }
.campaign-brand-visual { background: radial-gradient(ellipse at 55% 52%, rgba(0,64,248,.32), transparent 65%); }
.fingerprint-lines i { border-color: rgba(143,172,255,.24); border-left-color: transparent; }
.campaign-caps .campaign-orbit { color: var(--trazzo-navy); background: var(--trazzo-ice); border-color: var(--trazzo-ice); }
.campaign-cta, .campaign-bags .campaign-cta, .campaign-caps .campaign-cta { background: var(--trazzo-ice); color: var(--trazzo-navy); }
.campaign-cta span, .campaign-bags .campaign-cta span { background: var(--trazzo-blue); color: #fff; }
.campaign-progress i { background: #9eb8ff; box-shadow: 0 0 12px rgba(158,184,255,.7); }
.campaign-thumb { background: var(--trazzo-navy); border-color: #214982; color: #fff; }
.campaign-thumb:hover, .campaign-thumb.is-active { border-color: var(--trazzo-blue); box-shadow: 0 12px 32px rgba(0,13,43,.38); }
.campaign-thumb small { color: #a8beff; }
.campaign-thumb.is-active:after { background: var(--trazzo-blue); }

.marquee { background: var(--trazzo-blue); }
.benefit-bar, .benefit-bar>div { border-color: #24477e; }
.benefit-icon { background: #092c76; color: #d7e3ff; }
.eyebrow, .eyebrow.light { color: #99b5ff; }
.collections, .how { background: var(--trazzo-deep); }
.collections .section-heading h2:after, .catalog-heading h2:after { background: var(--trazzo-blue); box-shadow: 0 0 12px rgba(0,64,248,.5); }
.collection-grid .collection-card { border: 1px solid #386bc2; border-radius: 12px; background: var(--trazzo-navy); }
.collection-grid .collection-card:before, .collection-grid .collection-card:first-child:before,
.collection-grid .collection-card:nth-child(2):before, .collection-grid .collection-card:nth-child(3):before {
  background: linear-gradient(90deg, rgba(0,13,43,.96), rgba(0,24,64,.57) 60%, rgba(0,24,64,.12));
}
.collection-grid .collection-card b { border-bottom-color: #9fb9ff; }

.brand-manifesto {
  border: 2px solid var(--trazzo-blue); border-radius: 12px;
  background: var(--trazzo-ice);
}
.brand-manifesto:before { background: repeating-radial-gradient(ellipse at 52% 50%, transparent 0 27px, rgba(0,64,248,.055) 28px 30px, transparent 31px 59px); }
.manifesto-mark { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.manifesto-mark img { width: 100%; height: 100%; padding: 0; background: transparent; border-radius: 0; box-shadow: none; transform: none; }
.manifesto-copy .eyebrow { color: var(--trazzo-blue); }
.manifesto-copy h2, .manifesto-copy h2 em { color: var(--trazzo-navy); }
.manifesto-copy>p:not(.eyebrow) { color: #365179; }
.manifesto-copy>a { color: var(--trazzo-navy); border-color: var(--trazzo-blue); }
.manifesto-words { color: var(--trazzo-navy); }
.manifesto-words span { border-color: #9ab3df; }

.kits-section { background: radial-gradient(circle at 85% 9%, rgba(0,64,248,.13), transparent 35%), var(--trazzo-navy); border-color: #2456a8; }
.kit-card, .kit-card:nth-child(2), .kit-card:nth-child(3) { background: linear-gradient(145deg, #0a347e, #001840 53%, #001132); border-color: #2a5eaf; border-radius: 12px; }
.kit-card:hover { border-color: var(--trazzo-blue); }
.ig-kits { border-color: #2a5eaf; background: #001332; }

.editorial { border: 1px solid #3567be; border-radius: 12px; }
.editorial-copy { background: linear-gradient(135deg, var(--trazzo-navy), #05338d); }
.editorial-copy h2 em { color: #9eb8ff; }
.catalog-section { background: radial-gradient(circle at 98% 0, rgba(0,64,248,.14), transparent 29%), #00132f; }
.catalog-section:before { color: rgba(121,153,255,.07); }
.catalog-source-tabs button, .chip { background: #082458; border-color: #2c5ba4; color: #e8efff; }
.catalog-source-tabs button:hover, .chip:hover { background: #103578; border-color: #779bff; }
.catalog-source-tabs button.active, .chip.active { background: var(--trazzo-blue); border-color: #7494ff; }
.catalog-source-note { background: #092659; border-left-color: var(--trazzo-blue); }
.catalog-search { background: #092453; border-color: #2c5ba4; }
.product-card { background: var(--trazzo-navy); border-color: #285398; border-radius: 12px; }
.product-card:hover { border-color: #7494ff; }
.product-image, .product-card:nth-child(4n+2) .product-image,
.product-card:nth-child(4n+3) .product-image, .product-card:nth-child(4n+4) .product-image { background: #0b2a69; }
.product-info small, .clear-filters { color: #a9c0ff; }
.product-info button { background: #123984; color: #fff; }
.product-info button:hover, .button-outline:hover { background: var(--trazzo-blue); }
.button-outline { border-color: #9eb8ff; }
.steps article { background: var(--trazzo-navy); border-color: #2958a7; border-top-color: var(--trazzo-blue); border-radius: 12px; }
.steps span { color: #9eb8ff; }
.about { background: radial-gradient(circle at 72% 47%, #063cae, var(--trazzo-navy) 52%, #000e2b 85%); border-top-color: #3567be; }
.about:before { background: repeating-radial-gradient(ellipse at 75% 55%, transparent 0 32px, rgba(136,168,255,.11) 33px 35px, transparent 36px 67px); }

/* El cierre coloca el logo original en el eje central de la página. */
footer { background: var(--trazzo-ice); border-top: 5px solid var(--trazzo-blue); }
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 54px 0 36px; border-bottom: 1px solid #b9c9e7; }
.footer-logo-image { display: block; width: 215px; height: 215px; object-fit: contain; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; mix-blend-mode: normal; }
.footer-brand p { margin: -8px 0 0; color: var(--trazzo-navy); font: 800 15px/1.3 Outfit, sans-serif; letter-spacing: .055em; }
.footer-main { grid-template-columns: 1fr 1fr minmax(240px,1.5fr); max-width: 920px; padding: 39px 0 58px; color: var(--trazzo-navy); }
.footer-main strong { color: var(--trazzo-navy); }
.footer-main p, .footer-main a:not(.footer-cta a), .footer-bottom { color: #365179; }
.footer-main a:hover { color: var(--trazzo-blue); }
.footer-cta a { background: var(--trazzo-blue); }
.footer-bottom { border-color: #b9c9e7; }

@media (max-width: 760px) {
  .site-header { min-height: 78px; padding-inline: 15px; background: var(--trazzo-ice); }
  .brand-logo { width: 68px; height: 68px; }
  .mobile-menu-button { color: var(--trazzo-navy); }
  .campaign-stage { border-radius: 9px; }
  .campaign-stage:after { border-radius: 3px; }
  .campaign-caps { background: linear-gradient(180deg, #001336 0%, #052a79 67%, #0040f8); }
  .campaign-caps .campaign-visual:before, .campaign-bags .campaign-visual:before,
  .campaign-drink .campaign-visual:before { background: linear-gradient(180deg, #001840, rgba(0,24,64,.8) 21%, rgba(0,24,64,.08) 65%, transparent); }
  .brand-manifesto { border-radius: 9px; }
  .footer-brand { padding: 40px 0 28px; }
  .footer-logo-image { width: 180px; height: 180px; }
  .footer-main { grid-template-columns: 1fr 1fr; padding: 32px 0 46px; }
  .footer-main>div:first-child { grid-column: auto; }
  .footer-cta { grid-column: 1/-1; }
}
@media (max-width: 420px) {
  .campaign-stage:after { inset: 7px; }
  .footer-logo-image { width: 155px; height: 155px; }
  .footer-brand p { font-size: 13px; }
}