/* ══════════════════════════════════════════════════════════════════════
   CLARO / OSCURO EN TODO EL SITIO · los colores
   ----------------------------------------------------------------------
   Lo prende assets/theme.js poniendo html[data-sxt]. En claro no cambia
   nada: todo lo de acá cuelga de html[data-sxt="dark"] salvo el botón.

   Los tonos son los del home (SXT_VARS en index.html):
     claro  fondo #ffffff · alt #f5f7f8 · superficie #ffffff · borde #e3e6e8
            tinta #1c2829 · texto #3d4f54 · apagado #66797f
     oscuro fondo #121212 · alt #191919 · superficie #1e1e1e · borde #454545
            tinta #ffffff · texto #c9cbcd · apagado #909298
   (4-nov: los grises de texto y apagado subieron de contraste en los dos
   temas, a pedido de Manuela. Las bajadas bajo un titular van en "texto",
   no en "apagado".)
   El acento indigo #606ff7 es el mismo en los dos.

   Primero se pisan VARIABLES (las de landing.css, las del blog y las de
   los legales); las reglas por elemento son sólo para colores escritos a
   mano en cada página.

   Las pantallas del producto (el kit .sy y los mockups dibujados en claro)
   se oscurecen con invert + hue-rotate, como en el home, y las fotos y
   videos de adentro se vuelven a invertir para que queden como son. Las
   fotos de verdad nunca se invierten.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --sx-bg:#ffffff;--sx-alt:#f5f7f8;--sx-surface:#ffffff;--sx-border:#e3e6e8;
  --sx-ink:#1c2829;--sx-text:#3d4f54;--sx-mute:#66797f;--sx-tint:#eef0fe;--sx-tink:#414bd0;
}
html[data-sxt="dark"]{
  color-scheme:dark;
  --sx-bg:#121212;--sx-alt:#191919;--sx-surface:#1e1e1e;--sx-border:#454545;
  --sx-ink:#d8d8da;--sx-text:#c9cbcd;--sx-mute:#909298;--sx-tint:#1d2249;--sx-tink:#b0b5fc;

  /* landing.css */
  --ink:#d8d8da; --ink-2:#c9cbcd;
  --paper:#191919; --paper-2:#1e1e1e;
  --line:#454545;
  --muted:#c9cbcd; --muted-2:#909298;
  --accent-ink:#8891fa;
  --indigo-ink:#b0b5fc; --indigo-bd:#3a4180; --indigo-bg:#1d2249;
  --teal-bg:#0f2a2e; --teal-bd:#1d4a50;
  --amber-bg:#2e2410; --amber-bd:#5a4418;
  --signal-ink:#4dd0e1; --amber-ink:#ffc163;
  --white:#121212;
  --syt-border-color:#454545; --syt-font-color:#c9cbcd;
  --syt-neutral-25:#191919; --syt-neutral-50:#1e1e1e; --syt-neutral-100:#262626;
  --shadow-soft:0 40px 80px -40px rgba(0,0,0,.7), 0 8px 24px -16px rgba(0,0,0,.5);

  /* blog, posts y legales (su <style> propio) */
  --bg:#121212; --ink2:#c9cbcd; --ink3:#c9cbcd; --faded:#909298;
  --border:#454545; --accent2:#b0b5fc; --soft:#1d2249;
}
/* claro: los mismos roles con más contraste que el original */
html:not([data-sxt="dark"]){
  --muted:#3d4f54; --muted-2:#66797f;   /* landing.css */
  --ink3:#3d4f54; --faded:#66797f;      /* blog, posts y legales */
}
html:not([data-sxt="dark"]) .hnav a,
html:not([data-sxt="dark"]) .lang-btn,
html:not([data-sxt="dark"]) .hnav-lang button{color:#3d4f54}
html:not([data-sxt="dark"]) .hnav a:hover{color:#1c2829}
html:not([data-sxt="dark"]) .lang-chev{color:#66797f}
html:not([data-sxt="dark"]) .ucm span{color:#3d4f54}
html:not([data-sxt="dark"]) .hnav .ucm a>.uci{fill:#66797f}
html:not([data-sxt="dark"]) :is(.ucm .ucm-g,.ucm-h){color:#66797f!important}
html:not([data-sxt="dark"]) .site-header span[role="button"]{color:#3d4f54!important}
html:not([data-sxt="dark"]) :is(.pains li,.faq details p){color:#3d4f54}
html:not([data-sxt="dark"]) .sb{color:#3d4f54}
html:not([data-sxt="dark"]) .sb-k{color:#66797f}
html:not([data-sxt="dark"]) .faq summary::after{border-color:#66797f}

html[data-sxt="dark"],html[data-sxt="dark"] body{background:#121212}
html[data-sxt="dark"] body{color:#c9cbcd}

/* ── el botón ───────────────────────────────────────────────────────── */
.sxt-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid #d6dde1;background:transparent;
  color:#3d4f54;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  flex:none;padding:0;margin-right:-6px;transition:background-color .2s ease,color .2s ease;
}
.sxt-btn:hover{background:#dbe2e8;color:#1c2829}
.sxt-btn svg{width:15px;height:15px;fill:currentColor;display:block}
.sxt-btn .sxt-sun{display:none}
html[data-sxt="dark"] .sxt-btn{border-color:#454545;color:#c9cbcd}
html[data-sxt="dark"] .sxt-btn:hover{background:#262626;color:#fff}
html[data-sxt="dark"] .sxt-btn .sxt-sun{display:block}
html[data-sxt="dark"] .sxt-btn .sxt-moon{display:none}

/* Los colores de oscuro salen de los tokens del producto (brand/sytex-ui/tokens/sytex-tokens.css,
   [data-theme-family='dark']): canvas #121212, superficie #1e1e1e, borde #454545, texto #c9cbcd,
   apagado #909298 y los titulares en #d8d8da, no en blanco puro. */
/* ══ EL HEADER ═════════════════════════════════════════════════════════ */
html[data-sxt="dark"] .site-header,
html[data-sxt="dark"] .site-header.stuck,
html[data-sxt="dark"] .site-header.solid,
html[data-sxt="dark"] .site-header.nav-open{background:rgba(18,18,18,.72);border-bottom-color:#333;-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px)}
html[data-sxt="dark"] .site-header.nav-open{background:rgba(18,18,18,.94)}
html[data-sxt="dark"] .site-header .logo:hover{background:#262626}
html[data-sxt="dark"] .site-header .logo::after{color:#ffffff}
html[data-sxt="dark"] .hnav a{color:#c9cbcd}
html[data-sxt="dark"] .hnav a:hover{color:#d8d8da;background:#2a2a2a}
html[data-sxt="dark"] .hnav a:active,
html[data-sxt="dark"] .hnav > a[aria-current],
html[data-sxt="dark"] .hnav:has(.ucm a[aria-current]) > .uc-trigger,
html[data-sxt="dark"] .hnav:has(> .uc-trigger:hover) > .uc-trigger,
html[data-sxt="dark"] .hnav:has(> .uc-trigger:focus-visible) > .uc-trigger,
html[data-sxt="dark"] .hnav:has(> .ucm:hover) > .uc-trigger,
html[data-sxt="dark"] .hnav:has(> .ucm:focus-within) > .uc-trigger{background:#2a2a2a;color:#d8d8da}
html[data-sxt="dark"] .lang-btn{color:#c9cbcd}
html[data-sxt="dark"] .lang-btn:hover{color:#fff;background:#262626}

html[data-sxt="dark"] .lang-chev{color:#909298}
html[data-sxt="dark"] .lang-menu{background:#1e1e1e;border-color:#454545;box-shadow:0 8px 24px rgba(0,0,0,.5)}
html[data-sxt="dark"] .lang-menu button{color:#c9cbcd}
html[data-sxt="dark"] .lang-menu button:hover{background:#1d2249;color:#b0b5fc}
html[data-sxt="dark"] .burger span{background:#ffffff}

/* el desplegable de Use cases */
html[data-sxt="dark"] .ucm{background:#1e1e1e;border-color:#454545;box-shadow:0 26px 54px -18px rgba(0,0,0,.7)}
html[data-sxt="dark"] .hnav .ucm a b{color:#e6e7e8!important}
html[data-sxt="dark"] .hnav .ucm a>.uci{fill:#909298}
html[data-sxt="dark"] .hnav .ucm a::after{border-color:#5a5d63}
html[data-sxt="dark"] .hnav .ucm a:hover,
html[data-sxt="dark"] .hnav .ucm a[aria-current]{background:#1d2249!important}
html[data-sxt="dark"] .hnav .ucm a:hover b,
html[data-sxt="dark"] .hnav .ucm a[aria-current] b{color:#b0b5fc!important}
html[data-sxt="dark"] .hnav .ucm a:hover>.uci,
html[data-sxt="dark"] .hnav .ucm a[aria-current]>.uci{fill:#8891fa}
html[data-sxt="dark"] .ucm .ucm-g,html[data-sxt="dark"] .ucm-h{color:#909298}
html[data-sxt="dark"] .ucm .ucm-sep{border-top-color:#454545}

/* el panel del burger */
@media (max-width:900px){
  html[data-sxt="dark"] .hnav{background:#191919;border-bottom-color:#454545}
  html[data-sxt="dark"] .hnav a{border-bottom-color:#262626}
  html[data-sxt="dark"] .hnav a:hover{background:transparent}
  html[data-sxt="dark"] .hnav > a[aria-current],
  html[data-sxt="dark"] .hnav:has(.ucm a[aria-current]) > .uc-trigger{background:transparent;color:#fff}
  html[data-sxt="dark"] .ucm{background:transparent;box-shadow:none}
  html[data-sxt="dark"] .hnav .ucm .ucm-g{color:#909298!important}
  html[data-sxt="dark"] .hnav .ucm a{background:#1e1e1e!important;border-color:#454545!important}
  html[data-sxt="dark"] .hnav .ucm a>.uci{background:#1d2249;fill:#8891fa!important}
  html[data-sxt="dark"] .hnav .ucm a b{color:#ffffff!important}
  html[data-sxt="dark"] .hnav .ucm a[aria-current]{border-color:#3a4180!important;background:#1d2249!important}
  html[data-sxt="dark"] .hnav-lang button{color:#c9cbcd;background:#1e1e1e;border-color:#454545}
  html[data-sxt="dark"] .hnav-lang button:hover{border-color:#606ff7;color:#b0b5fc}
}
/* En el teléfono el header no tiene lugar para todo: el botón queda, sin
   margen negativo. */
@media (max-width:900px){ .sxt-btn{margin-right:0} }

/* ══ EL PIE ════════════════════════════════════════════════════════════
   En los dos temas: fondo alt y una línea arriba en el color de borde, para
   que se lea como pie. Antes era una banda gris petróleo con texto claro. */
html .site-footer{
  --onDark:var(--sx-text); --onDark-2:var(--sx-mute); --syt-neutral-400:var(--sx-border);
  background:var(--sx-alt);color:var(--sx-mute);border-top:1px solid var(--sx-border);
}
html .site-footer .ftag{color:var(--sx-text)}
html .site-footer :is(.fcol a,.fsocial a,.foot-bottom .cr a){color:var(--sx-text)}
html .site-footer :is(.fcol a:hover,.fsocial a:hover,.foot-bottom .cr a:hover){color:var(--sx-ink)}
html .site-footer .fsocial a:hover{border-color:#606ff7}
html .site-footer .badge{color:var(--sx-text)}

/* el pie de los legales: todo con estilo inline, de ahí el !important */
footer[data-screen-label="footer"]{background:var(--sx-alt)!important;border-top:1px solid var(--sx-border)!important}
footer[data-screen-label="footer"] :is([style*="#9fb4b3"],p[style*="#8aa3a2"]){color:var(--sx-text)!important}
footer[data-screen-label="footer"] [style*="#6f8584"]{color:var(--sx-mute)!important}
footer[data-screen-label="footer"] a:hover{color:var(--sx-ink)!important}
footer[data-screen-label="footer"] a[aria-label]{background:transparent!important;border-color:var(--sx-border)!important}
footer[data-screen-label="footer"] [style*="border-top:1px solid rgba(255,255,255"]{border-top-color:var(--sx-border)!important}
/* las cinco columnas no tenían versión de teléfono: a 375 px el pie medía
   677 y la página scrolleaba de costado */
@media (max-width:860px){footer[data-screen-label="footer"] [style*="grid-template-columns:1.6fr"]{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){footer[data-screen-label="footer"] [style*="grid-template-columns:1.6fr"]{grid-template-columns:1fr!important}}

/* ══ LAS PANTALLAS DEL PRODUCTO ════════════════════════════════════════
   El kit .sy trae sus propias variables (claras) y no se toca: se invierte
   entero. El :not(.sy .sy) evita invertir dos veces una pantalla anidada. */
html[data-sxt="dark"] .sy:not(.sy .sy){filter:invert(.92) hue-rotate(180deg) drop-shadow(0 24px 40px rgba(0,0,0,.45));box-shadow:none!important}
/* (la sombra propia se invertiría y quedaría un halo blanco: se cambia por
   un drop-shadow que va DESPUÉS del invert en el filtro, o sea oscuro) */
html[data-sxt="dark"] .sy:not(.sy .sy) :is(img,video,picture,[style*="background-image"]){filter:invert(1) hue-rotate(180deg)}

/* ══ LANDINGS: colores escritos a mano en landing.css ══════════════════ */
/* En oscuro --ink pasa a ser blanco (es la tinta del texto), pero varias
   piezas lo usan de FONDO: el hero, el cierre (.end) y section.dark. Ahí
   adentro se le devuelve un valor oscuro. El hero es una foto con velo:
   queda igual que en claro. El cierre y las bandas oscuras pasan al gris
   del tema. */
html[data-sxt="dark"] .hero{--ink:#2d3c3e}
html[data-sxt="dark"] :is(.end,section.dark,.on-dark:not(.hero)){--ink:#191919}
html[data-sxt="dark"] :is(.end,section.dark,.on-dark:not(.hero)) :is(h1,h2,h3){color:#fff}
html[data-sxt="dark"] section.story{background:#191919;border-block-color:#454545}
html[data-sxt="dark"] .sb{color:#c9cbcd}
html[data-sxt="dark"] .sb-k{color:#909298}
html[data-sxt="dark"] .sb.is-sx .sb-k{color:#b0b5fc}
html[data-sxt="dark"] .sb.is-sx .sb-t{color:#fff}
html[data-sxt="dark"] .pains li{color:#c9cbcd}
html[data-sxt="dark"] .faq{background:#121212;border-top-color:#454545}
html[data-sxt="dark"] .faq details{border-bottom-color:#454545}
html[data-sxt="dark"] .faq summary{color:#fff}
html[data-sxt="dark"] .faq summary:hover{color:#8891fa}
html[data-sxt="dark"] .faq details p{color:#c9cbcd}
html[data-sxt="dark"] .beat-who .av,
html[data-sxt="dark"] .beat-who .rl{background:#262626;color:#c9cbcd}
html[data-sxt="dark"] .beat-who .nm{color:#fff}

/* ══ BLOG, POSTS Y LEGALES ═════════════════════════════════════════════ */
html[data-sxt="dark"] .card{background:#1e1e1e}
html[data-sxt="dark"] .card:hover{box-shadow:0 24px 48px -12px rgba(0,0,0,.7),0 8px 16px rgba(0,0,0,.4)}
html[data-sxt="dark"] footer.foot{background:#191919}
html[data-sxt="dark"] .article .body :is(table,th,td){border-color:#454545}
html[data-sxt="dark"] .article .body :is(code,pre){background:#1e1e1e;color:#e6e7e8;border-color:#454545}

/* las tarjetas de "lo que resuelve" (.sv-*) y la cadena (.beat-who, .ch-tabs) */
html[data-sxt="dark"] .sv-c{background:#1e1e1e;border-color:#454545}
html[data-sxt="dark"] .sv-p{color:#fff}
html[data-sxt="dark"] .sv-s,html[data-sxt="dark"] .sv-k li{color:#c9cbcd}
html[data-sxt="dark"] .sv-star{background:linear-gradient(160deg,#1d2249,#1e1e1e 70%);border-color:#3a4180}
html[data-sxt="dark"] .sv-star .sv-s{border-top-color:#3a4180;color:#c9cbcd}
html[data-sxt="dark"] .sv-ft{background:#1e1e1e;border-color:#3a4180;color:#b0b5fc}
html[data-sxt="dark"] .beat-who[data-k="team"] :is(.av,.rl){background:#1d2249;color:#b0b5fc}
html[data-sxt="dark"] .beat-who[data-k="con"] :is(.av,.rl){background:#2e2410;color:#ffc163}
html[data-sxt="dark"] .beat-who[data-k="tech"] :is(.av,.rl){background:#13281a;color:#81c784}
html[data-sxt="dark"] .beat-who[data-k="ai"] :is(.av,.rl){background:#0f2a2e;color:#4dd0e1}
html[data-sxt="dark"] .beat-who[data-k="cli"] :is(.av,.rl){background:#262626;color:#c9cbcd}
html[data-sxt="dark"] .cz-dots i{background:#444}
html[data-sxt="dark"] .cz-dots i.on{background:#606ff7}
html[data-sxt="dark"] .ch-tabs{background:var(--paper-2)}
html[data-sxt="dark"] .ch-tabs button{background:#1e1e1e;border-color:#454545;color:#c9cbcd}
html[data-sxt="dark"] .ch-tabs button.on{background:#606ff7;border-color:#606ff7;color:#fff}

/* la cinta de clientes: los logos en blanco, como en el home (.sxp-logo) */
html[data-sxt="dark"] .flogo-img,
html[data-sxt="dark"] .flogo-img.is-light{filter:brightness(0) invert(1);opacity:.62}
html[data-sxt="dark"] .flogo-img,html[data-sxt="dark"] .hero .logos img{transition:filter .2s ease,opacity .2s ease}
/* al pasar el mouse, el logo en su color (Manuela, 4-nov) */
.flogo-img:hover,.flogo-img.is-light:hover,.hero .logos img:hover,
html[data-sxt="dark"] .flogo-img:hover,
html[data-sxt="dark"] .flogo-img.is-light:hover{filter:none!important;opacity:1!important}

/* ══ POR PÁGINA: colores escritos a mano en el <style> de cada landing ══
   Las tarjetas de texto pasan a superficie oscura; los dibujos claros que
   imitan el producto (chips de estado, mini-pantallas, el tablero de
   proyecto) se invierten como las pantallas. */

/* /contractor-management: las seis tarjetas del tablero */
html[data-sxt="dark"] .cs-t{color:#fff}
html[data-sxt="dark"] .cs{background:#1e1e1e;border-color:#454545}
html[data-sxt="dark"] .cs-h{color:#fff}
html[data-sxt="dark"] .cs p{color:#c9cbcd}
html[data-sxt="dark"] .cs-go{color:#b0b5fc}
html[data-sxt="dark"] :is(.cs-i,.cs-m){filter:invert(.92) hue-rotate(180deg)}

/* /mining: la fila de tres momentos */
html[data-sxt="dark"] section.p6{background:#191919}
html[data-sxt="dark"] .p6-c{background:#1e1e1e;border-color:#454545}
html[data-sxt="dark"] .p6-c.is-sx{border-color:#3a4180;box-shadow:0 0 0 4px rgba(96,111,247,.12)}
html[data-sxt="dark"] .p6-c small{color:#909298}
html[data-sxt="dark"] .p6-c.is-sx small{color:#b0b5fc}
html[data-sxt="dark"] .p6-ar{color:#5a5d63}

/* /oil-and-gas: la línea de cinco pasos */
html[data-sxt="dark"] .cd-line::before{background:#454545}
html[data-sxt="dark"] .cd-ic{background:#1e1e1e;border-color:#454545}
html[data-sxt="dark"] .cd-i{fill:#b0b5fc}
html[data-sxt="dark"] .cd-ph{background:#1e1e1e}
@keyframes cdOnDark{0%{background:#1d2249;border-color:#606ff7;box-shadow:0 0 0 6px rgba(96,111,247,.2);transform:translateY(-2px)}18%{background:#1d2249;border-color:#606ff7;transform:translateY(-2px)}22%,100%{background:#1e1e1e;border-color:#454545;box-shadow:none;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html[data-sxt="dark"] .cd-ic{animation-name:cdOnDark!important}
}

/* /materials: tarjetas, pasos y el tablero de proyecto */
html[data-sxt="dark"] :is(.fork-c,.cu-step,.mt-pts.mt-lead article,.ind-c){background:#1e1e1e;border-color:#454545}
html[data-sxt="dark"] .fork-c:hover{border-color:#3a4180;box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}
html[data-sxt="dark"] :is(.fork-c .k,.fork-c .go,.ind-c .go,.ind-c .uci){color:#b0b5fc}
html[data-sxt="dark"] .fork-c.own .k{color:#4dd0e1}
html[data-sxt="dark"] :is(.cu-step .n,.cu-step .doc){filter:invert(.92) hue-rotate(180deg)}
html[data-sxt="dark"] .pj{filter:invert(.92) hue-rotate(180deg);color:#2d3c3e;background:#fff;border-color:#e4e7e6}
html[data-sxt="dark"] .pj :is(img,video){filter:invert(1) hue-rotate(180deg)}
html[data-sxt="dark"] .cu-own{border-top-color:#454545}

/* Lo que se invierte tiene que estar dibujado EN CLARO por dentro: se le
   devuelven las variables de claro, si no el invert las da vuelta dos veces. */
html[data-sxt="dark"] :is(.sy:not(.sy .sy),.pj,.cs-i,.cs-m,.cu-step .n,.cu-step .doc){
  --ink:#2d3c3e; --ink-2:#2d3c3e; --paper:#f8fafa; --paper-2:#f3f6f7; --line:#d6e2e4;
  --muted:#3d4f54; --muted-2:#66797f; --accent-ink:#5059e8; --white:#fff;
  --indigo-ink:#3a44c0; --indigo-bd:#cacdfe; --indigo-bg:#f1f2fe;
  --teal-bg:#e0f7fa; --teal-bd:#b2ebf2; --amber-bg:#ffeecb; --amber-bd:#ffde98;
  --signal-ink:#0a7d8a; --amber-ink:#9c6209;
  --syt-border-color:#d6e2e4; --syt-font-color:#2d3c3e;
  --syt-neutral-25:#f8fafa; --syt-neutral-50:#f3f6f7; --syt-neutral-100:#e9edf0;
  color-scheme:light;
}

/* /contractor-management: el hero claro (.cm-light) */
html[data-sxt="dark"] .hero.cm-light{background:#121212;color:#fff}
html[data-sxt="dark"] .hero.cm-light::before{background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px)}
html[data-sxt="dark"] .hero.cm-light::after{background:none}
html[data-sxt="dark"] .hero.cm-light .eyebrow{color:#b0b5fc}
html[data-sxt="dark"] .hero.cm-light h1{color:#fff}
html[data-sxt="dark"] .hero.cm-light .lede{color:#c9cbcd}
html[data-sxt="dark"] .hero.cm-light .btn-ghost{color:#fff;border-color:#454545;background:#1e1e1e}
html[data-sxt="dark"] .hero.cm-light .btn-ghost:hover{color:#fff;border-color:#606ff7;background:#1e1e1e}
html[data-sxt="dark"] .hero.cm-light .hero-screen{border-color:#454545;box-shadow:0 50px 100px -55px rgba(0,0,0,.8)}

/* /towercos: el mapa de pasos */
html[data-sxt="dark"] .ar-map{background-color:#191919;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px)}
html[data-sxt="dark"] .ar-node{background:#1e1e1e;border-color:#454545;box-shadow:none}
html[data-sxt="dark"] .ar-tags span{background:#262626;color:#c9cbcd}
html[data-sxt="dark"] .ar-step:not(:first-child)::before{background:#3a4180}
html[data-sxt="dark"] .ar-step:not(:first-child)::after{border-left-color:#3a4180}

/* los posts: el cierre, la comparación y el caso Grúas Martín */
html[data-sxt="dark"] .post-cta{background:#1e1e1e;border:1px solid #454545}
html[data-sxt="dark"] .post-cta .pc-ey{color:#7ee0d6}
html[data-sxt="dark"] .post-cta .pc-h{color:#fff}
html[data-sxt="dark"] .post-cta .pc-p{color:#c9d6d8}
html[data-sxt="dark"] .post-cta .pc-mi{color:#8ea4aa}
html[data-sxt="dark"] .article .draft{background:#2e2410;border-color:#5a4418;color:#ffd98a}
html[data-sxt="dark"] mark.todo{background:#2e2410;color:#ffd98a}
html[data-sxt="dark"] .sy-dash{background:#191919;box-shadow:none}
html[data-sxt="dark"] .sy-dash :is(.sy-k,.sy-bars){background:#1e1e1e} /* sólo el tablero de la nota: los .sy de las landings ya se invierten */
html[data-sxt="dark"] .sy-dash .sy-row i{background:linear-gradient(90deg,var(--accent) var(--w),#2a2a2a var(--w))}

/* el botón dentro del menú del burger, cuando no entra en la barra */
.hnav .sxt-btn.sxt-nav{margin:1rem 0 0;align-self:flex-start}

/* la pastilla de idioma vieja de los legales (la arma i18n-static.js con
   estilo inline, de ahí el !important) */
html[data-sxt="dark"] .site-header span[role="button"]{color:#c9cbcd!important}
html[data-sxt="dark"] .site-header span[role="button"]:hover{background:#262626!important;color:#fff!important}
html[data-sxt="dark"] .site-header [role="menu"]{background:#1e1e1e!important;border-color:#454545!important;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)!important}
html[data-sxt="dark"] .site-header [role="menu"] [data-lang]{color:#c9cbcd!important}
html[data-sxt="dark"] .site-header [role="menu"] [data-lang]:hover{background:#1d2249!important;color:#b0b5fc!important}

/* /oil-and-gas: la banda oscura "a tu procedimiento" */
html[data-sxt="dark"] section.fit{background:#191919;border-block:1px solid #454545}

/* grises escritos a mano en texto de marketing (no en pantallas del
   producto), con el contraste nuevo en los dos temas */
html .pj-cap span{color:#3d4f54}               /* .pj va invertido en oscuro */
html .pj-lane{color:#66797f}
html:not([data-sxt="dark"]) .p6-c small{color:#66797f}
html:not([data-sxt="dark"]) .p6-ar{color:#66797f}
html .lf-n{color:var(--sx-mute)}

/* En oscuro, el isologo con el interior transparente (como el iso dark de la marca), no con el recuadro blanco (Manuela, 4-nov). */
html[data-sxt="dark"] img[src$="/assets/sytex-iso.svg"]{content:url(/assets/sytex-iso-dark.svg)}

/* El botón principal en oscuro: el violeta apagado del producto, como el de Resend (Manuela, 4-nov:
   «en sytex dark el violeta no es TAN forchi»). */
html[data-sxt="dark"] .site-header .demo,html[data-sxt="dark"] .btn-primary{
  background:linear-gradient(104deg,rgba(136,145,250,.22) 5%,rgba(96,111,247,.36) 100%),#1e1e1e;
  border-color:rgba(176,181,252,.14);color:#dfe1fe}
html[data-sxt="dark"] .site-header .demo:hover,html[data-sxt="dark"] .btn-primary:hover{filter:brightness(1.18);background:linear-gradient(104deg,rgba(136,145,250,.22) 5%,rgba(96,111,247,.36) 100%),#1e1e1e}

/* ══ EN CLARO, SIN BANDAS GRIS PIZARRA (Manuela, 4-nov) ═══════════════════
   El hero y el cierre de las landings (section.on-dark) venían en #253031
   también en claro. En claro van blancos como el home: la foto queda detrás
   de un velo blanco, los textos en tinta y los logos en gris. En oscuro no
   cambia nada. */
html:not([data-sxt="dark"]) section.on-dark{background:#ffffff!important;color:#1c2829!important}
html:not([data-sxt="dark"]) section.on-dark :is(h1,h2,h3){color:#1c2829!important}
html:not([data-sxt="dark"]) section.on-dark :is(.lede,p,.micro){color:#3d4f54!important}
html:not([data-sxt="dark"]) section.on-dark .eyebrow{color:#414bd0!important}
html:not([data-sxt="dark"]) section.on-dark .photo{filter:none!important;opacity:1!important}
html:not([data-sxt="dark"]) section.on-dark .photo::after{background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 36%,rgba(255,255,255,.18) 72%,rgba(255,255,255,0) 100%)!important}
@media (max-width:700px){html:not([data-sxt="dark"]) section.on-dark .photo::after{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 45%,rgba(255,255,255,.7) 100%)!important}}
html:not([data-sxt="dark"]) section.on-dark::before{background-image:linear-gradient(to right,rgba(28,40,41,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(28,40,41,.05) 1px,transparent 1px)!important}
html:not([data-sxt="dark"]) section.on-dark::after{background:radial-gradient(circle,rgba(96,111,247,.12) 0%,rgba(96,111,247,0) 68%)!important}
html:not([data-sxt="dark"]) section.on-dark .btn-ghost{color:#1c2829!important;border-color:#d6dde1!important;background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html:not([data-sxt="dark"]) section.on-dark .btn-ghost:hover{border-color:#606ff7!important;color:#414bd0!important}
html:not([data-sxt="dark"]) section.on-dark .logos{color:#66797f!important}
html:not([data-sxt="dark"]) section.on-dark .logos img{filter:brightness(0)!important;opacity:.5!important}
html:not([data-sxt="dark"]) section.on-dark .logos img:hover{filter:none!important;opacity:1!important}
html:not([data-sxt="dark"]) section.on-dark input{background:#fff!important;color:#1c2829!important;border-color:#d6dde1!important}
html:not([data-sxt="dark"]) section.on-dark input::placeholder{color:#66797f!important}
html:not([data-sxt="dark"]) section.on-dark .hero-screen{box-shadow:0 40px 80px -40px rgba(28,40,41,.35),0 0 0 1px #e3e6e8!important}

/* ══ EL NOMBRE GIGANTE ARRIBA DEL PIE, como el footer de resend.com (Manuela, 4-nov): una palabra
   («Project») muy tenue, cortado por la línea del pie, con un brillo suave al centro. ══ */
.sx-bigmark{position:relative;overflow:hidden;font:900 clamp(110px,21vw,330px)/1 Inter,system-ui,sans-serif;letter-spacing:-.055em;height:calc(.78em + 40px);padding-top:40px;box-sizing:border-box;pointer-events:none;text-align:center;--bm:#eceff1;--bml:rgba(96,111,247,.55);--bmg:rgba(96,111,247,.10)}
html[data-sxt="dark"] .sx-bigmark{--bm:#202022;--bml:rgba(216,216,218,.5);--bmg:rgba(216,216,218,.05)}
.sx-bigmark i{position:absolute;left:0;right:0;top:calc(.06em + 40px);font-style:normal;color:var(--bm);white-space:nowrap;user-select:none}
.sx-bigmark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--sx-border,#e3e6e8) 18%,var(--bml) 50%,var(--sx-border,#e3e6e8) 82%,transparent 100%)}
.sx-bigmark+footer{border-top:0!important;background-image:radial-gradient(48% 140px at 50% 0,var(--bmg),transparent)!important}

/* ══ BLOG Y NOTAS: titulares protagonistas, con la misma lógica del home (Manuela, 4-nov) ═══ */
.hd :is(h1,h2.h1x){font-size:clamp(46px,6.4vw,92px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:900!important;color:var(--sx-ink)!important;text-wrap:balance;margin-bottom:18px!important}
.hd>p{font-size:clamp(17px,1.5vw,20px)!important;line-height:1.55;color:var(--sx-text)!important;max-width:44em}
.article :is(h1,h2.h1x){font-size:clamp(36px,4.6vw,56px)!important;line-height:1.02!important;letter-spacing:-.045em!important;font-weight:900!important;color:var(--sx-ink)!important;text-wrap:balance;
  margin-bottom:28px!important}
.article .body h2{font-size:clamp(26px,2.6vw,34px)!important;line-height:1.1!important;letter-spacing:-.035em!important;color:var(--sx-ink)!important;margin:44px 0 14px!important}
.article .body h3{font-size:clamp(22px,2.2vw,28px)!important;line-height:1.15!important;letter-spacing:-.03em!important;color:var(--sx-ink)!important;margin:36px 0 12px!important}

/* ══ FIGURAS DE LAS NOTAS EN HTML (4-nov): lo que eran imágenes con texto en inglés ahora se
   escribe en el idioma de la nota. Tabla antes/después, tarjetas de ahorro y capturas con títulos. ══ */
.article .pf{margin:28px 0;padding:0}
.pf-ba table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;border:1px solid var(--sx-border);border-radius:16px;overflow:hidden;background:var(--sx-surface)}
.pf-ba th,.pf-ba td{padding:14px 16px;text-align:center;border-top:1px solid var(--sx-border)}
.pf-ba thead th{border-top:0;font-weight:800;color:var(--sx-ink);background:var(--sx-alt)}
.pf-ba tbody th{text-align:left;font-weight:700;color:var(--sx-ink)}
.pf-ba td{color:var(--sx-text)}
.pf-ba .pf-y{color:#606ff7;font-weight:900;background:color-mix(in srgb,#606ff7 6%,transparent)}
html[data-sxt="dark"] .pf-ba .pf-y{color:#b0b5fc;background:rgba(96,111,247,.10)}
.pf-sav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pf-sav div{border:1px solid var(--sx-border);border-radius:16px;background:var(--sx-surface);padding:22px 18px;text-align:center}
.pf-sav b{display:block;font:900 clamp(24px,2.6vw,32px)/1.05 Inter,system-ui,sans-serif;letter-spacing:-.03em;color:#606ff7;margin-bottom:8px}
html[data-sxt="dark"] .pf-sav b{color:#b0b5fc}
.pf-sav span{font-size:15px;line-height:1.4;color:var(--sx-text)}
@media (max-width:640px){.pf-sav{grid-template-columns:1fr}.pf-ba table{font-size:14px}.pf-ba th,.pf-ba td{padding:10px 8px}}
.pf-shots{border:1px solid var(--sx-border);border-radius:18px;background:var(--sx-alt);padding:18px!important}
.pf-shots img{display:block;width:100%;height:auto;border-radius:10px!important;border:1px solid var(--sx-border)!important;margin:0!important;background:#fff}
.pf-g2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:14px}.pf-g2.pf-w{grid-template-columns:2fr 1fr;margin-bottom:6px}
.pf-g2>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-t{margin:0!important;font:800 15px/1.2 Inter,system-ui,sans-serif!important;color:var(--sx-ink)!important;letter-spacing:-.01em}
.pf-g2>div>.pf-t:not(:first-child){margin-top:8px!important}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}.pf-chips span{font-size:13px;font-weight:700;border:1px solid var(--sx-border);background:var(--sx-surface);color:var(--sx-ink);border-radius:9px;padding:5px 10px}
.pf-shots figcaption{margin-top:12px;font:800 16px/1.3 Inter,system-ui,sans-serif;color:var(--sx-ink);text-align:center}
@media (max-width:640px){.pf-g2,.pf-g2.pf-w{grid-template-columns:1fr}}
html[data-sxt="dark"] .pf-shots img{filter:none}

/* ══ EL CELULAR DE LAS LANDINGS, COMO EL DEL HOME (5-nov) ══════════════════
   De línea fina y minimalista: sin el marco negro, sin los botones del costado,
   la isla en línea. Vive dentro de la pantalla .sy, que en oscuro se invierte
   entera, así que se dibuja para claro y en oscuro la línea queda gris oscura
   sola. Sin sombra en oscuro (invertida era un halo claro). */
.sy-phone{background:none!important;padding:0!important;border:1.5px solid #dfe3e6;border-radius:44px!important;box-shadow:0 22px 46px -30px rgba(28,40,41,.32)!important}
.sy-phone::before,.sy-phone::after{display:none!important}
.sy-phone-screen{border-radius:42px!important}
.sy-phone-screen::before{background:transparent!important;border:1.5px solid #dfe3e6;width:64px!important;height:18px!important;top:10px!important;box-sizing:border-box}
.sy-phone-screen::after{background:#dfe3e6!important;width:96px!important;height:3px!important}
html[data-sxt="dark"] .sy-phone{box-shadow:none!important}

/* ── EL HEADER TRANSLÚCIDO, COMO EN EL HOME (5-nov) ─────────────────────
   Manuela: en las landings el header no se veía transparente. Iba en el
   flujo, arriba del hero, así que no tenía nada detrás. Ahora el hero sube
   por debajo (el header le presta su alto con un margen negativo y el
   contenido del hero baja lo mismo) y la barra es un velo con desenfoque,
   en claro y en oscuro. Sólo donde la página arranca con un hero. */
html:not([data-sxt="dark"]) .site-header,
html:not([data-sxt="dark"]) .site-header:is(.stuck,.solid){background:rgba(233,237,240,.72);border-bottom-color:rgba(20,30,40,.08);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px)}
html:not([data-sxt="dark"]) .site-header.nav-open{background:rgba(233,237,240,.96)}
.site-header:has(+ main > section.hero:first-child){margin-bottom:-69px}
.site-header + main > section.hero:first-child > .wrap{margin-top:69px}