/* [cx] hoja del articulo del blog de Yodai: el chrome real del blog + la columna de lectura */

/* los nueve tonos de la maqueta, en los valores exactos de Yodai */
:root{ --azul:#2455e6 !important; --azul-osc:#1a44c4 !important;
  --tinta:#10225e !important; --cuerpo:#465884 !important; --mudo:#8b9ac0 !important;
  --linea:#dce4f8 !important; --banda:#f2f5fd !important;
  --tinte:#eef3ff !important; --tinte2:#e6ecfa !important; }

:root{--cx-glowc:#2455e6;--cx-glow2:#6e8eee;--cx-gt1:#2455e6;--cx-gt2:#6e8eee;--cx-aur1:#2455e6;--cx-progc:#2455e6;--cx-cur:#2455e6}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;color:var(--cuerpo);
  font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;font-size:16px;
  -webkit-font-smoothing:antialiased}
a{color:var(--azul);text-decoration:none}
p{margin:0}
h1,h2,h3,h4{font-family:Outfit,system-ui,sans-serif;color:var(--tinta);
  letter-spacing:-.022em;margin:0}
.wrap{max-width:1184px;margin:0 auto;padding:0 32px}
@media(max-width:960px){ .wrap{padding:0 20px} }
.btn{display: inline-flex; align-items: center; gap: 9px; font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px; border-radius: 8px; padding: 11px 19px; border: 1.5px solid transparent; cursor: pointer; transition: background-color 0.18s, color 0.18s, border-color 0.18s;}
header.site > .wrap{width: min(1152px, 92%) !important; margin: 0px auto !important; height: 70px !important; display: flex !important; align-items: center !important; gap: clamp(10px, 2vw, 28px) !important; padding: 0px !important;}
header.site > .wrap .logo span{color: rgb(25, 22, 18) !important;}
header.site > .wrap .logo span *{color: rgb(43, 43, 240) !important;}
header.site > .wrap .logo svg *{stroke: rgb(25, 22, 18) !important;}
@media (max-width: 520px){ header.site > .wrap{height: 62px !important; gap: 8px !important;} }
.btn{display: inline-flex; align-items: center; gap: 0.5rem; font-family: Outfit, sans-serif; font-weight: 600; font-size: 1.02rem; padding: 0.86rem 1.7rem; border-radius: 999px; text-decoration: none; border: 0px; cursor: pointer; transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s;}
header .nav-right .entrar{min-width: 46px; text-align: center;}

footer .tira .pie{display:block;font-size:.8rem;color:var(--muted);margin-top:7px}
footer{background:#0b1740;color:#a9b8dd;padding:3.8rem 0 2.4rem;font-size:.94rem;position:relative;z-index:1;overflow:hidden}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
footer .lema{margin-top:.9rem;max-width:22rem;color:#93a4cd}
footer h4{font-family:var(--display);font-weight:600;color:#fff;font-size:.98rem;margin:0 0 .8rem}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
footer a{text-decoration:none;color:inherit}
footer a:hover{color:#fff}
footer .logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-size:22px}
footer .logo svg{width:32px;height:32px}
footer .legal{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.86rem;color:#93a4cd}
footer .legal-n{display:flex;gap:18px;flex-wrap:wrap}
footer .wrap{grid-template-columns:1fr 1fr}
footer .wrap{grid-template-columns:1fr;gap:1.6rem}
footer .ftp{flex-direction:column;align-items:flex-start;gap:12px}
footer .ftp-lbl{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#7f90bd;white-space:nowrap}
footer .ftp-logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
footer .ftp-logos img{height:20px;width:auto;opacity:.55;transition:opacity .2s}
footer .ftp-logos svg{height:22px;width:22px;fill:#fff;opacity:.55;transition:opacity .2s}
footer .ftp-logos img:hover, footer .ftp-logos svg:hover{opacity:1}
footer .ftp-logos{gap:18px}
footer{ background:#0b1740 !important; }
footer .wrap{ display:grid !important; grid-template-columns:1.4fr 1fr 1fr 1fr !important;
  gap:30px 40px !important; max-width:1180px !important; margin:0 auto !important;
  padding:0 24px !important; align-items:start !important; }
footer .wrap > div:nth-child(n+5){ grid-column:1 / -1 !important; }
footer a{ color:#c3cfe9 !important; text-decoration:none; }
footer a:hover{ color:#fff !important; }
footer h4,footer b,footer strong{ color:#fff !important; }
footer p,footer span,footer li{ color:#a9b8dd !important; }
footer ul{ list-style:none !important; padding:0 !important; margin:10px 0 0 !important; }
footer li{ margin:0 0 9px !important; }
@media(max-width:820px){ footer .wrap{ grid-template-columns:1fr 1fr !important; } }


/* ---- la columna de lectura ---- */
.art{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,76px) 0 clamp(56px,7vw,96px)}
.art-volver{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--azul);margin-bottom:26px}
.art-volver:hover{color:var(--azul-osc)}
.art-pilar{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--azul);
  text-transform:none;margin:0 0 12px}
.art h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;font-weight:700;margin:0 0 18px}
.art-sum{font-size:18.5px;line-height:1.55;color:var(--cuerpo);margin:0 0 18px}
.art-meta{font-size:14px;color:var(--mudo);margin:0 0 34px;
  padding-bottom:26px;border-bottom:1px solid var(--linea)}
.art-cuerpo{font-size:17px;line-height:1.72;color:var(--cuerpo)}
.art-cuerpo>p{margin:0 0 20px}
.art-cuerpo h2{font-size:clamp(21px,2.6vw,27px);line-height:1.22;font-weight:700;
  margin:38px 0 14px}
.art-cuerpo h3{font-size:19.5px;font-weight:700;margin:28px 0 10px}
.art-cuerpo strong{color:var(--tinta);font-weight:600}
.art-cuerpo ul,.art-cuerpo ol{margin:0 0 20px;padding-left:22px}
.art-cuerpo li{margin:0 0 9px}
.art-cuerpo a{text-decoration:underline;text-underline-offset:3px}
.art-cuerpo figure{margin:28px 0}
.art-cuerpo figcaption{font-size:14px;color:var(--mudo);margin-top:10px}
.art-cuerpo img{max-width:100%;height:auto;border-radius:14px;display:block}
.art-cta{margin-top:46px;padding:30px 32px;background:var(--banda);border-radius:20px}
.art-cta h2{font-size:23px;font-weight:700;margin:0 0 8px}
.art-cta p{font-size:16px;color:var(--cuerpo);margin:0 0 20px}
.art-cta a{display:inline-flex;align-items:center;gap:9px;background:var(--azul);color:#fff;
  border-radius:999px;padding:13px 26px;font-weight:600;font-size:16px;
  box-shadow:0 8px 22px rgba(36,85,230,.28)}
.art-cta a:hover{background:var(--azul-osc)}
@media(max-width:760px){ .art{padding-left:20px;padding-right:20px} }

/* foto de cabecera, del banco libre (Openverse), elegida por el tema del articulo */
.art-foto{ margin:0 0 34px; border-radius:16px; overflow:hidden; background:var(--banda);
  aspect-ratio:16/9; }
.art-foto img{ display:block; width:100%; height:100%; object-fit:cover; }

.art-foto{ margin:0 0 34px; }
.art-foto>img{ border-radius:16px; }
.art-credito{ margin-top:9px; font-size:12.5px; color:var(--mudo); }
.art-credito a{ color:var(--mudo); text-decoration:underline; text-underline-offset:2px; }
.art-credito a:hover{ color:var(--azul); }

/* portada dibujada, con los motivos y los colores de Yodai */
.art-portada{ margin:0 0 34px; border-radius:16px; overflow:hidden; }
.art-portada img{ display:block; width:100%; height:auto; }

/* cx-art-rel: firma+fecha y relacionados (2026-09-11) */
.art-meta time,.art-autor{color:inherit}
.art-rel{margin:36px 0 0;padding-top:26px;border-top:1px solid #dfe6f6}
.art-rel h2{font-size:21px;margin:0 0 14px}
.art-rel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.art-rel a{display:flex;gap:14px;align-items:center;text-decoration:none;color:#10225e;padding:10px 12px;border-radius:14px;background:#f5f7fd}
.art-rel a:hover{background:#eef2fd}
.art-rel img{width:104px;height:58px;border-radius:9px;object-fit:cover;flex:none;background:#e9eefb}
.art-rel b{display:block;font-weight:600;line-height:1.3}
.art-rel i{display:block;font-style:normal;font-size:13px;color:#465884;margin-top:3px}

/* [2026-09-16 THALAMUX] la linea 'si lo tuyo es...' bajo el boton de la llamada a la accion: sus
   enlaces son texto, no botones (la regla .art-cta a los convertia en pildoras azules). */
.art-cta p.cx-salud a, .art-cta p.cx-oficio a { display:inline; background:none; color:var(--azul); padding:0; border-radius:0; box-shadow:none; font-weight:600; font-size:inherit; text-decoration:underline; text-underline-offset:3px }
.art-cta p.cx-salud a:hover, .art-cta p.cx-oficio a:hover { background:none; color:var(--azul-osc); text-decoration-thickness:2px }