/* Trayectoria — blog. Dirección C «Bento tranquilo» (3/10/2026): marino #12233F, ámbar #F2A93B (gráfico),
   ámbar texto #9A5B00, grafito #4A5163, papel #F6F5F1. Hanken Grotesk + IBM Plex Mono.
   Al cambiar este fichero, subir el ?v= en las páginas del blog. */
:root{--papel:#F6F5F1;--papel-2:#ECEAE2;--blanco:#fff;--marino:#12233F;--grafito:#4A5163;--linea:rgba(18,35,63,.14);
  --ambar:#F2A93B;--ambar-texto:#9A5B00;--ambar-suave:#FBEBD0;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.32,.72,0,1);--sombra:0 34px 70px -46px rgba(18,35,63,.35),0 1px 0 rgba(255,255,255,.9) inset}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papel);color:var(--marino);font-family:var(--sans);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--marino);text-decoration-color:rgba(18,35,63,.35);text-underline-offset:3px}
a:hover{text-decoration-color:var(--marino)}
a:focus-visible,button:focus-visible{outline:2px solid var(--marino);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.12;letter-spacing:-.03em;text-wrap:balance;margin:0}
img,svg{max-width:100%;height:auto;display:block}
.barra{position:sticky;top:0;z-index:50;padding:16px 16px 0;pointer-events:none}
.barra-in{pointer-events:auto;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:8px 8px 8px 22px;min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--blanco);border-radius:999px;box-shadow:0 18px 50px -24px rgba(18,35,63,.3)}
.barra img{height:26px;width:auto}
.barra nav{display:flex;gap:4px;font-size:.92rem}
.barra nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--grafito);text-decoration:none;font-weight:500;padding:9px 16px;border-radius:999px;transition:background .4s var(--ease),color .4s var(--ease)}
.barra nav a:hover{color:var(--marino);background:var(--papel)}
.barra nav a[aria-current]{background:var(--marino);color:var(--papel)}
.envoltura{max-width:1080px;margin:0 auto;padding:clamp(36px,6vw,80px) 20px 96px}
.eyebrow,.meta{font-family:var(--mono);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--grafito)}
.eyebrow{justify-self:start;display:inline-block;font-weight:500;font-size:12px;line-height:1.4;letter-spacing:.14em;background:var(--blanco);border-radius:999px;padding:7px 14px;box-shadow:0 8px 24px -16px rgba(18,35,63,.3);margin:0}
.meta{letter-spacing:.04em}
/* índice */
.portada{max-width:760px;display:grid;gap:18px;margin-bottom:clamp(32px,5vw,56px)}
.portada h1{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.portada p{color:var(--grafito);font-size:1.12rem}
.portada .eyebrow{color:var(--grafito)}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.tarjeta{background:var(--blanco);border-radius:28px;padding:28px;display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit;box-shadow:var(--sombra);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
a.tarjeta:hover{transform:translateY(-4px);box-shadow:0 40px 70px -44px rgba(18,35,63,.5)}
.tarjeta h2{font-size:1.35rem;font-weight:700}
.tarjeta p{color:var(--grafito);font-size:.98rem;margin:0}
.tarjeta.pronto{background:transparent;box-shadow:none;border:1px dashed rgba(18,35,63,.3)}
.tarjeta.pronto h2{color:var(--grafito)}
/* artículo */
.articulo{max-width:720px;margin:0 auto}
.articulo header{display:grid;gap:16px;margin-bottom:32px}
.articulo h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1.04}
.entradilla{font-size:1.22rem;color:var(--grafito);line-height:1.6}
.resumen-ia{background:var(--blanco);border-radius:24px;box-shadow:var(--sombra);padding:22px 26px;margin:0 0 32px}
.resumen-ia::before{content:"";display:block;width:28px;height:4px;border-radius:4px;background:var(--ambar);margin-bottom:12px}
.resumen-ia p{margin:.2em 0 0;font-size:1rem}
.resumen-ia ul{margin:.4em 0 0;padding-left:20px;font-size:1rem}
.articulo h2{font-size:1.7rem;font-weight:700;margin:52px 0 14px}
.articulo h3{font-size:1.2rem;font-weight:700;margin:30px 0 8px;letter-spacing:-.015em}
.articulo p{margin:0 0 18px}
.articulo ol,.articulo ul{margin:0 0 18px;padding-left:24px}
.articulo li{margin-bottom:8px}
.dato{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
figure.infografia{margin:36px -20px;padding:24px 20px;background:var(--blanco);border-radius:28px;box-shadow:var(--sombra)}
@media (min-width:800px){figure.infografia{margin:40px -80px;padding:32px}}
figure.infografia figcaption{font-size:.9rem;color:var(--grafito);margin-top:14px}
.tabla{overflow-x:auto;margin:0 0 20px;background:var(--blanco);border-radius:24px;box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:520px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grafito)}
.faq{background:var(--blanco);border-radius:28px;box-shadow:var(--sombra);padding:6px 26px}
.faq details{padding:18px 0}
.faq details+details{border-top:1px solid var(--linea)}
.faq summary{cursor:pointer;min-height:44px;font-weight:700;letter-spacing:-.01em}
.faq details p{margin:10px 0 0}
.cta{background:var(--marino);color:var(--papel);border-radius:28px;padding:clamp(28px,5vw,48px);margin:48px 0;display:grid;gap:14px;box-shadow:0 34px 70px -46px rgba(18,35,63,.55)}
.cta h2{margin:0;color:var(--papel);font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.035em}
.cta p{margin:0;color:#CFD3DC}
.cta a.btn{justify-self:start;margin-top:6px;background:var(--ambar);color:var(--marino);font-weight:700;text-decoration:none;padding:16px 28px;border-radius:999px;transition:transform .5s var(--ease),background .5s var(--ease)}
.cta a.btn:hover{background:#F6B65A}
.cta a:focus-visible{outline:2px solid var(--papel);outline-offset:3px}
.cta a.btn:active{transform:scale(.98)}
.compartir{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin:0 0 30px}
.compartir>span:first-child{font-family:var(--mono);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--grafito)}
.compartir-iconos{display:flex;gap:8px}
.compartir-iconos a,.compartir-iconos button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--blanco);border:0;box-shadow:0 0 0 1px var(--linea);color:var(--marino);text-decoration:none;cursor:pointer;padding:0;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.compartir-iconos a:hover,.compartir-iconos button:hover{background:var(--marino);box-shadow:0 0 0 1px var(--marino);color:var(--papel)}
.compartir-iconos svg{width:18px;height:18px;fill:currentColor}
.compartir-copiado{font-size:.85rem;color:var(--ambar-texto);font-weight:700;opacity:0;transition:opacity .2s}
.compartir-copiado.mostrar{opacity:1}
.compartir.compartir-final{margin-top:40px}
.fuentes{font-size:.9rem;color:var(--grafito);border-top:1px solid var(--linea);padding-top:18px;margin-top:36px}
.fuentes ol{padding-left:20px}
.fuentes li{margin-bottom:6px;overflow-wrap:anywhere}
.pie{max-width:1080px;margin:0 auto;padding:24px 20px 56px;font-size:.9rem;color:var(--grafito)}
.pie a{color:var(--grafito);display:inline-block;padding:10px 4px;min-height:44px}
.aviso-previa{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:9;font:600 12px/1.2 system-ui,sans-serif;padding:9px 16px;border-radius:999px;background:rgba(12,12,16,.9);color:#fff;white-space:nowrap}
@media (prefers-reduced-motion:reduce){a.tarjeta,.barra nav a{transition:none!important}a.tarjeta:hover{transform:none}}
@media (prefers-reduced-motion:no-preference){
  @keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .portada>*,.articulo header>*,.lista>.tarjeta{animation:sube .9s var(--ease) both}
  .portada>:nth-child(2),.articulo header>:nth-child(2){animation-delay:.06s}
  .portada>:nth-child(3),.articulo header>:nth-child(3){animation-delay:.12s}
  .lista>.tarjeta:nth-child(2){animation-delay:.1s}.lista>.tarjeta:nth-child(3){animation-delay:.16s}
}
@media (max-width:760px){figure.infografia{overflow-x:auto}figure.infografia svg{min-width:680px}figure.infografia figcaption{position:sticky;left:0}}
.saltar{position:absolute;left:16px;top:-80px;z-index:100;background:var(--marino);color:var(--papel);padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none}.saltar:focus{top:12px;outline:2px solid var(--ambar);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

/* Aviso de cookies de analítica (mismo comportamiento que la home; el consentimiento se comparte en trayectoria.pro) */
.tr-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;margin:0 auto;background:var(--marino);color:var(--papel);border-radius:24px;padding:16px 18px;box-shadow:0 24px 60px -24px rgba(18,35,63,.55);font-family:var(--sans);font-size:14px;line-height:1.5;display:grid;gap:12px}
.tr-cookies[hidden]{display:none}
.tr-cookies p{margin:0;color:var(--papel)}
.tr-cookies a{color:var(--papel);text-decoration:underline;text-underline-offset:3px;padding-block:4px}
.tr-cookies :focus-visible{outline-color:var(--ambar)}
.tr-cookies-b{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.tr-cookies button{font:700 14px/1 var(--sans);padding:0 20px;min-height:44px;border-radius:999px;cursor:pointer;border:1.5px solid var(--papel)}
.tr-cookies [data-tr-rechazar]{background:transparent;color:var(--papel)}
.tr-cookies [data-tr-aceptar]{background:var(--papel);color:var(--marino)}
.enlace-cookies{font:inherit;color:inherit;background:none;border:0;padding:12px 4px;min-height:44px;text-decoration:underline;text-decoration-color:rgba(18,35,63,.35);text-underline-offset:3px;cursor:pointer}
.enlace-cookies:hover{text-decoration-color:var(--marino)}
@media (max-width:640px){.tr-cookies{left:12px;right:12px;bottom:12px;padding:14px 16px;font-size:13.5px}.tr-cookies-b{display:grid;grid-template-columns:1fr 1fr}.tr-cookies button{min-width:0}}

/* Añadidos 19/10/2026: bloque de código, «Sigue leyendo», sección «Próximamente» */
.articulo pre{background:var(--blanco);border-radius:16px;box-shadow:var(--sombra);padding:18px 20px;overflow-x:auto;font-size:.82rem;line-height:1.55;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.articulo code{font-family:var(--mono);font-size:.9em}
.articulo pre code{font-size:inherit}
.relacionados{margin:44px 0 0}
.relacionados h2{font-size:1.25rem;margin:0 0 14px}
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.relacionados li{margin:0}
.relacionados a{display:block;background:var(--blanco);border-radius:18px;box-shadow:var(--sombra);padding:16px 20px;font-weight:700;letter-spacing:-.01em;text-decoration:none;line-height:1.35;transition:transform .5s var(--ease)}
.relacionados a:hover{transform:translateY(-2px)}
.lista-titulo{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grafito);margin:clamp(36px,5vw,56px) 0 16px}
@media (prefers-reduced-motion:reduce){.relacionados a{transition:none!important}.relacionados a:hover{transform:none}}
