/* PsychesAi — estilo de periódico digital. Portada + artículos. */
:root{
  --ink:#0d0d0f; --paper:#ffffff; --soft:#f4f3ef; --rule:#e3e1db; --red:#e4361e; --mute:#6e6c67;
  --serif:'Newsreader',Georgia,serif; --sans:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  --wrap:1240px; --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lbl{font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.red{color:var(--red)}

/* Barra de servicio */
.util{border-bottom:1px solid var(--rule);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.util nav{display:flex;gap:20px}
.util a:hover{color:var(--ink)}

/* Cabecera de diario */
.mast{text-align:center;padding:30px 0 22px}
.mast .name{display:inline-block;font:800 clamp(3rem,9vw,6.6rem)/.9 var(--serif);letter-spacing:-.045em}
.mast .name i{font-weight:200;font-style:italic}
.mast p{margin:12px 0 0;font:400 italic clamp(.95rem,1.6vw,1.1rem) var(--serif);color:var(--mute)}

/* Barra de secciones */
.secs{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.secs .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.6vw,34px);height:48px;font:600 13px var(--sans);letter-spacing:.01em}
.secs a{position:relative;white-space:nowrap}
.secs a:after{content:'';position:absolute;left:0;right:0;bottom:-15px;height:3px;background:var(--red);transform:scaleX(0);transition:transform .25s}
.secs a:hover:after{transform:scaleX(1)}
.secs .mini{display:none;font:800 1.35rem var(--serif);letter-spacing:-.04em;margin-right:auto}
.menu{display:none;margin-left:auto;background:none;border:0;font:600 13px var(--sans);cursor:pointer;color:var(--ink)}

/* Cinta: lo último en los canales (elemento firma) */
.tick{border-bottom:1px solid var(--rule);overflow:hidden}
.tick .wrap{display:flex;align-items:center;height:44px;gap:18px}
.tick .now{flex:none;background:var(--red);color:#fff;font:600 11px var(--mono);letter-spacing:.1em;padding:5px 9px;display:flex;align-items:center;gap:7px}
.tick .now:before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;animation:late 1.6s infinite}
.tick .rail{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tick ul{display:flex;gap:44px;margin:0;padding:0;list-style:none;width:max-content;animation:cinta 48s linear infinite}
.tick:hover ul{animation-play-state:paused}
.tick li{white-space:nowrap;font:400 15px var(--serif)}
.tick li b{font:600 10.5px var(--mono);letter-spacing:.08em;color:var(--red);margin-right:9px}
@keyframes cinta{to{transform:translateX(-50%)}}
@keyframes late{50%{opacity:.3}}

/* Portada a tres columnas */
.front{display:grid;grid-template-columns:250px minmax(0,1fr) 290px;gap:0;padding:34px 0 46px;border-bottom:1px solid var(--ink)}
.front>*{padding:0 26px}
.front>*:first-child{padding-left:0;border-right:1px solid var(--rule)}
.front>*:last-child{padding-right:0;border-left:1px solid var(--rule)}
.colhead{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--ink);margin:0 0 6px}
.door{list-style:none;margin:0;padding:0;counter-reset:d}
.door a{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding:14px 0;border-bottom:1px solid var(--rule)}
.door a:before{counter-increment:d;content:counter(d,decimal-leading-zero);font:500 11px var(--mono);color:var(--red);padding-top:5px}
.door b{font:700 1.2rem/1.15 var(--serif);letter-spacing:-.01em}
.door span{grid-column:2;font-size:.84rem;color:var(--mute);line-height:1.4}
.door a:hover b{color:var(--red)}
.lead .kick{margin:0 0 12px}
.lead h1{font:700 clamp(2.1rem,4.2vw,3.55rem)/1.02 var(--serif);letter-spacing:-.03em;margin:0 0 14px}
.lead h1 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.lead .dek{font:400 1.2rem/1.45 var(--serif);color:#34332f;margin:0 0 14px;max-width:60ch}
.by{font:500 12px var(--sans);color:var(--mute)}
.by b{color:var(--ink);font-weight:600}
.lead figure{margin:20px 0 0}
.lead figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.lead figcaption{font:400 12px var(--sans);color:var(--mute);margin-top:8px}
.ops{list-style:none;margin:0;padding:0}
.ops li{padding:15px 0;border-bottom:1px solid var(--rule)}
.ops .lbl{color:var(--red);font-size:10px}
.ops h3{font:600 1.12rem/1.22 var(--serif);margin:6px 0 6px}
.ops a:hover h3{color:var(--red)}
.ops .by{font-size:11.5px}

/* Secciones de periódico */
.sec{padding:44px 0 50px;border-bottom:1px solid var(--ink);scroll-margin-top:52px}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;border-top:3px solid var(--ink);padding-top:12px;margin-bottom:26px}
.sec-h h2{font:800 clamp(1.9rem,3.6vw,2.7rem)/1 var(--serif);letter-spacing:-.035em;margin:0}
.sec-h h2 i{font-weight:200}
.sec-h .src{font:500 12px var(--mono);color:var(--mute)}
.sec-h .src b{color:var(--ink);font-weight:500}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.item{padding:0 22px 4px;border-left:1px solid var(--rule)}
.item:first-child{padding-left:0;border-left:0}
.item .lbl{color:var(--red)}
.item h3{font:700 1.45rem/1.12 var(--serif);letter-spacing:-.02em;margin:9px 0 8px}
.item p{margin:0 0 14px;color:#47463f;line-height:1.5;font-size:.95rem}
.pronto{display:inline-block;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:var(--soft);padding:4px 8px}
.item.big h3{font-size:clamp(1.6rem,2.4vw,2rem)}

/* Apps */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:0}
.app{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;padding:24px 26px;background:var(--soft);border:1px solid var(--rule);transition:background .2s}
.app+.app{border-left:0}
.app:hover{background:#eceae4}
.app .ic{grid-row:span 3;width:56px;height:56px;display:grid;place-items:center;background:var(--ink);color:#fff;font:800 1.6rem var(--serif)}
.app h3{font:700 1.6rem/1 var(--serif);margin:2px 0 0;letter-spacing:-.02em}
.app p{margin:0;color:#47463f;line-height:1.5;font-size:.95rem}
.app .go{font:500 12px var(--mono);color:var(--red)}

/* Opinión: lista completa */
.oplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.oplist a{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.oplist .lbl{color:var(--red);font-size:10px}
.oplist h3{grid-column:1;font:600 1.25rem/1.2 var(--serif);margin:0}
.oplist .by{grid-column:1}
.oplist time{grid-row:1 / span 3;grid-column:2;font:500 11px var(--mono);color:var(--mute)}
.oplist a:hover h3{color:var(--red)}

/* Boletín */
.news{background:var(--ink);color:#fff;padding:52px 0}
.news .wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.news h2{font:700 clamp(2rem,4vw,3rem)/1.02 var(--serif);letter-spacing:-.03em;margin:8px 0 0}
.news h2 i{font-weight:200}
.news form{display:flex;border-bottom:1px solid rgba(255,255,255,.5)}
.news input{flex:1;min-width:0;background:none;border:0;color:#fff;font:400 1.05rem var(--sans);padding:14px 0;outline:none}
.news input::placeholder{color:rgba(255,255,255,.5)}
.news button{background:var(--red);border:0;color:#fff;font:600 .9rem var(--sans);padding:0 18px;cursor:pointer}
.form-message{font:500 12px var(--mono);color:#ffb3a6;min-height:1em;margin:10px 0 0}

/* Pie */
.foot{padding:30px 0 40px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;align-items:center;font:400 13px var(--sans);color:var(--mute)}
.foot .name{font:800 1.5rem var(--serif);letter-spacing:-.04em;color:var(--ink)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}

/* ===== Artículo ===== */
.art{max-width:720px;margin:0 auto;padding:46px var(--gut) 70px}
.art .eyebrow{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 16px}
.art h1{font:700 clamp(2.2rem,5.4vw,3.7rem)/1.04 var(--serif);letter-spacing:-.03em;margin:0 0 18px}
.art h1 em{font-weight:300}
.art .article-lead{font:400 clamp(1.2rem,2vw,1.4rem)/1.45 var(--serif);color:#34332f;margin:0 0 20px}
.art>p,.art section p{font:400 1.2rem/1.72 var(--serif);margin:0 0 1.15em}
.art .byline{font:500 13px var(--sans);color:var(--mute);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0}
.art>p strong{color:var(--ink)}
.art img{display:block;width:100%!important;margin:26px 0 34px!important}
.art hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
.art h2{font:700 1.75rem/1.15 var(--serif);letter-spacing:-.02em;margin:46px 0 14px}
.art blockquote{font:400 italic clamp(1.5rem,2.8vw,2rem)/1.3 var(--serif);margin:40px 0;padding:4px 0 4px 22px;border-left:3px solid var(--red)}
.art ul{padding-left:20px}
.art li{font:400 1.1rem/1.6 var(--serif);margin-bottom:8px}
.art section[style]{background:var(--soft)!important;border:0!important;border-top:3px solid var(--ink)!important;padding:22px 24px!important}
.art section .eyebrow{color:var(--ink)}
.art section li,.art section p{font-size:1rem}
.art a:not(.read-link){color:var(--red);text-decoration:underline;text-underline-offset:3px}
.read-link{display:inline-block;margin-top:30px;font:600 14px var(--sans);border-top:2px solid var(--ink);padding-top:12px}
.read-link:hover{color:var(--red)}

/* Entrada */
.r{opacity:0;transform:translateY(10px);animation:sube .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d,0)*80ms)}
@keyframes sube{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.r{animation:none;opacity:1;transform:none}.tick ul{animation:none}}

/* Tablet y móvil */
@media (max-width:1060px){
  .front{grid-template-columns:minmax(0,1fr) 270px}
  .front>.doorcol{grid-column:1 / -1;order:3;border-right:0;padding:30px 0 0;margin-top:30px;border-top:1px solid var(--rule)}
  .front>.lead{padding-left:0}
  .door{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 24px}
}
@media (max-width:760px){
  .util nav{display:none}
  .mast{padding:22px 0 16px}
  .secs .wrap{justify-content:flex-start}
  .secs .mini{display:block}
  .secs nav{display:none;position:absolute;top:48px;left:0;right:0;background:#fff;border-bottom:1px solid var(--ink);flex-direction:column}
  .secs nav.open{display:flex}
  .secs nav a{padding:15px var(--gut);border-top:1px solid var(--rule)}
  .secs nav a:after{display:none}
  .menu{display:block}
  .front{grid-template-columns:1fr;padding-top:24px}
  .front>*{padding:0!important;border:0!important}
  .front>.ops-col{margin-top:30px;order:3}
  .front>.doorcol{order:0;margin:0 0 30px}
  .front>.lead{order:1}
  .item{padding:0 0 18px;border-left:0;border-bottom:1px solid var(--rule);margin-bottom:18px}
  .item:last-child{border-bottom:0;margin-bottom:0}
  .apps,.oplist,.news .wrap{grid-template-columns:1fr}
  .app+.app{border-left:1px solid var(--rule);border-top:0}
}
@media (min-width:761px){.secs nav{display:contents}}

/* Artículos: barra y pie oscuros, como la portada */
.secs{background:#0a0a0f;color:#f4f2ee;border-top:0;border-bottom:1px solid #22222c}
.secs a:after{background:#ff5a36}
.menu{color:#f4f2ee}
@media (max-width:760px){.secs nav{background:#0a0a0f;border-bottom-color:#22222c}.secs nav a{border-top-color:#22222c}}
.foot{background:#0a0a0f;color:#9b99a8;margin-top:40px}
.foot .name{color:#f4f2ee}

/* Que ningún texto largo (URLs, DOIs de las referencias) ensanche la página en el móvil */
.art p,.art li,.art h1,.art h2,.art h3,.art td,.art figcaption{overflow-wrap:anywhere}