/* site.css — estilos comunes de las paginas de DiaCroma for Agents.
   Se enlaza en el punto exacto donde estaba la cabecera en cada pagina, para no cambiar el orden de las reglas. */

/* logo corto de DiaCroma (DA, dc_mark_*) recortado a su dibujo; mismo tamano en claro y oscuro */
.dc-brand{display:inline-flex;align-items:center;flex:none;line-height:0}
.dc-mark{--w:54px;display:block;flex:none;width:var(--w);height:calc(var(--w)*282/580);overflow:hidden;opacity:.94;transition:opacity .3s}
.dc-brand:hover .dc-mark{opacity:1}
.dc-mark img{display:block;max-width:none}
.dc-mark--light{width:calc(var(--w)*639/580);height:calc(var(--w)*640/580);margin:calc(var(--w)*-338/580) 0 0 calc(var(--w)*-38/580)}
.dc-mark--dark{display:none;width:100%;height:100%}
html[data-theme="light"] .dc-mark--light{display:none}
html[data-theme="light"] .dc-mark--dark{display:block}
.brandbar .kind-switch{flex:none}
.brandbar .kind-current{font-size:12px;padding:4px 9px}
.brandbar .kind-caret{width:12px;height:12px}
html[data-theme="light"] .kind-menu{background:rgba(255,255,255,.99);border-color:rgba(0,0,0,.14);box-shadow:0 18px 50px rgba(20,20,30,.16)}
html[data-theme="light"] a.kind-item:hover{background:rgba(0,0,0,.05)}
.topnav{display:flex;gap:1px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.topnav a{font-family:'DM Mono',ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.01em;color:var(--ink2);text-decoration:none;padding:7px 7px;border-radius:999px;white-space:nowrap;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.topnav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
html[data-theme="light"] .topnav a:hover{background:rgba(0,0,0,.05)}
.topnav a.on{color:var(--gold2);background:rgba(255,222,107,.10);border-color:rgba(255,222,107,.30)}
.brandbar .brand-tools{display:flex;align-items:center;gap:8px;flex:none}
.brandbar .brand-tool{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);background:transparent;text-decoration:none;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s}
.brandbar .brand-tool svg{width:16px;height:16px;display:block}
.brandbar .brand-tool:hover{color:var(--ink);border-color:var(--gold);background:rgba(255,222,107,.10);transform:translateY(-1px)}
html[data-theme="light"] .brandbar .brand-tool{color:#565E6B;border-color:rgba(0,0,0,.16);background:rgba(255,255,255,.6)}
html[data-theme="light"] .brandbar .brand-tool:hover{color:#1B1E26;border-color:var(--teal);background:rgba(47,92,149,.08)}
.brandbar .brand-tool.lang-toggle{font-family:'DM Mono',ui-monospace,Menlo,monospace;font-weight:500;letter-spacing:.03em}
.brandbar .brand-tool.lang-toggle .lang-code{font-size:12.5px;line-height:1;display:block}
.brandbar .brand-tool.theme-toggle .moon{display:none}
.brandbar .brand-tool.theme-toggle .sun{display:block}
html[data-theme="light"] .brandbar .brand-tool.theme-toggle .sun{display:none}
html[data-theme="light"] .brandbar .brand-tool.theme-toggle .moon{display:block}
@media(max-width:1100px){
.topnav a{font-size:11px;padding:7px 6px}
}
.brand-tools{flex:none}
@media(max-width:1140px){
.topnav{width:100%;order:3;margin:2px auto 0}
.brandbar .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
}

/* ── hero con imagen: sigue el tema claro/oscuro ── */
.hero.hx{--hx-bg:#060608;--hx-lede:#B9C1CE;
  position:relative;text-align:left;padding:0;background:var(--hx-bg);color:var(--ink);
  min-height:clamp(560px,82vh,780px);display:flex;align-items:center;border-bottom:1px solid var(--line);isolation:isolate}
html[data-theme="light"] .hero.hx{--hx-bg:var(--bg);--hx-lede:var(--ink2)}
/* en claro, la foto oscura se invierte (mismos colores, fondo claro) y se funde con el crema; sin esto el fundido sale gris */
html[data-theme="light"] .hx-media img{filter:invert(1) hue-rotate(180deg) saturate(1.3);mix-blend-mode:multiply}
/* foto clara (p. ej. Product): sin inversion en claro; algo atenuada en oscuro */
.hx-media--light img{filter:brightness(.82) saturate(1.05)}
html[data-theme="light"] .hx-media--light img{filter:none;mix-blend-mode:normal}
.hx-media{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:0;margin:0}
.hx-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hx-bg) 0%,color-mix(in srgb,var(--hx-bg) 82%,transparent) 22%,color-mix(in srgb,var(--hx-bg) 25%,transparent) 52%,transparent 75%),linear-gradient(0deg,color-mix(in srgb,var(--hx-bg) 55%,transparent),transparent 30%)}
.hero.hx .wrap{position:relative;z-index:1;width:100%;padding-top:72px;padding-bottom:72px}
.hx-eyebrow{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.hero.hx h1{text-align:left;margin:0;max-width:14ch;color:var(--ink);font-size:clamp(40px,5.6vw,74px);line-height:1.04;letter-spacing:-.01em}
.hero.hx h1 em{font-style:italic;color:var(--gold)}
html[lang="es"] .hero.hx h1{max-width:18ch}
.hero.hx .lede{margin:26px 0 0;max-width:44ch;color:var(--hx-lede);font-size:18px;line-height:1.65}
.hero.hx .cta-row{justify-content:flex-start;margin-top:32px}
.hero.hx .hero-status{margin:22px 0 0;text-align:left}
@media(max-width:820px){
  .hero.hx{display:block;min-height:0}
  .hx-media{position:relative;width:100%;height:clamp(260px,64vw,420px)}
  .hx-media img{object-position:60% 50%}
  .hx-media::after{background:linear-gradient(0deg,var(--hx-bg) 0%,color-mix(in srgb,var(--hx-bg) 20%,transparent) 45%,transparent 70%)}
  .hero.hx .wrap{padding-top:0;padding-bottom:52px;margin-top:-56px}
  .hero.hx h1{font-size:clamp(34px,9.4vw,46px);max-width:none}
  .hero.hx .lede{font-size:16.5px}
}

/* ── imagenes de las tres derivas y franja del comite de compra ── */
:is(.category-card,.declare-card) .cat-img{margin:-20px -20px 18px;aspect-ratio:3/2;overflow:hidden;border-radius:13px 13px 0 0;background:var(--panel2)}
:is(.category-card,.declare-card) .cat-img img{display:block;width:100%;height:100%;object-fit:cover}
.buyers-banner{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1024/470;background:#242228}
.buyers-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;filter:invert(1) hue-rotate(180deg)}
html[data-theme="light"] .buyers-banner{background:#DDDBE1}
html[data-theme="light"] .buyers-banner img{filter:none}
.buyers-banner-text{position:relative;padding:34px 38px 0}
.buyers-banner-text .eyebrow{margin-bottom:12px}
.buyers-banner-text h2.big{margin:0}
@media(max-width:760px){
  .buyers-banner{aspect-ratio:auto;display:flex;flex-direction:column}
  .buyers-banner img{position:static;order:2;height:auto;aspect-ratio:16/8;object-position:50% 52%}
  .buyers-banner-text{padding:24px 22px 4px}
}

/* ── cierre comun: tipografico, sin foto (Overview, Product, Evidence, How to use) ── */
.next-band{padding:104px 0 100px;border-top:1px solid var(--line);background:var(--bg2);position:relative;z-index:1}
.next-band .eyebrow{margin:0 0 18px}
.next-band h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.005em;max-width:20ch;margin:0;color:var(--ink)}
.next-band h2 em{font-style:italic;color:var(--gold)}
.next-rule{display:flex;gap:10px;margin:30px 0}
.next-rule i{display:block;width:56px;height:2px;border-radius:2px;background:var(--teal2)}
.next-rule i+i{background:var(--gold)}
.next-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.next-more{margin:22px 0 0;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.02em;color:var(--ink3)}
.next-more a{color:var(--teal2)}
@media(max-width:620px){.next-band{padding:72px 0 70px}.next-actions .btn{width:100%;text-align:center}}
/* pie comun */
.foot-flex{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}