/* topxopiniones.com — revista editorial clara, prefijo xo- */
:root{
  --xo-ink:#0E1526;--xo-navy:#090F1E;--xo-navy2:#111A2B;--xo-red:#FF2400;--xo-red-d:#D61E00;
  --xo-paper:#F7F4EF;--xo-card:#FFFFFF;--xo-line:#DDD6CB;--xo-mute:#4F5668;
  --xo-serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --xo-sans:"Atkinson Hyperlegible","Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--xo-paper);color:var(--xo-ink);font:17px/1.65 var(--xo-sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--xo-red-d);text-underline-offset:3px}
a:hover{color:var(--xo-navy)}
.shell{max-width:1180px;margin:0 auto;padding:0 20px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;border-radius:2px;
  font:700 15px/1.2 var(--xo-sans);letter-spacing:.03em;text-decoration:none;text-transform:uppercase;border:2px solid transparent;transition:background .15s,color .15s}
.btn-main{background:var(--xo-red);color:#fff}
.btn-main:hover{background:var(--xo-red-d);color:#fff}

/* cabecera */
.top{background:var(--xo-navy);border-bottom:4px solid var(--xo-red);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:22px;min-height:68px;flex-wrap:wrap}
.top-in>a:first-child{display:flex;align-items:center}
.top nav{display:flex;gap:4px;flex:1}
.top nav a{color:#E6E9F0;text-decoration:none;font:700 13px/1 var(--xo-sans);letter-spacing:.12em;text-transform:uppercase;padding:12px 10px}
.top nav a:hover{color:#fff;box-shadow:inset 0 -2px 0 var(--xo-red)}
.top .btn-main{min-height:44px;padding:8px 18px;font-size:14px}

/* puerta de entrada */
.xo-door{background:var(--xo-navy2);color:#fff;border-bottom:1px solid #22304a}
.xo-door-in{max-width:1180px;margin:0 auto;padding:22px 20px 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:10px 34px;align-items:center}
.xo-door-t{grid-column:1/-1;margin:0;font:700 27px/1.25 var(--xo-serif);letter-spacing:-.01em}
.xo-door-btns{display:flex;gap:12px;flex-wrap:wrap}
.xo-door-a{min-height:56px;padding:12px 30px;font-size:17px;box-shadow:0 8px 24px rgba(255,36,0,.35)}
.xo-door-b{min-height:56px;background:transparent;color:#fff;border-color:#fff}
.xo-door-b:hover{background:#fff;color:var(--xo-navy)}
.xo-door-steps{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap;font-size:16px;color:#D9DEE8}
.xo-door-steps li{display:flex;align-items:center;gap:8px}
.xo-door-steps b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--xo-red);color:#fff;font-size:14px;flex:none}
.xo-door-bono{margin:4px 0 0;font:italic 400 18px/1.4 var(--xo-serif);color:#fff}
.xo-door-bono::before{content:"";display:inline-block;width:22px;height:3px;background:var(--xo-red);vertical-align:middle;margin-right:10px}
.xo-door-ad{margin:4px 0 0;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;color:#9AA3B6;justify-self:end}

/* cabecera de revista */
.xo-page{max-width:1180px;margin:0 auto;padding:0 20px 40px}
.xo-mast,.xo-ahead{text-align:center;padding:46px 0 26px;border-bottom:1px solid var(--xo-ink);max-width:900px;margin:0 auto}
.xo-kick{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 14px;color:var(--xo-red-d);font:700 14.5px/1.3 var(--xo-sans);letter-spacing:.2em;text-transform:uppercase}
.xo-kick::before,.xo-kick::after{content:"";height:1px;width:46px;background:var(--xo-red)}
.xo-mast h1,.xo-ahead h1{margin:0 0 16px;font:700 clamp(32px,5vw,54px)/1.12 var(--xo-serif);letter-spacing:-.015em;color:var(--xo-navy)}
.xo-ahead h1{font-size:clamp(30px,4.4vw,46px)}
.xo-dek{margin:0 auto 18px;max-width:740px;font:400 20px/1.6 var(--xo-serif);color:#2A3247}
.xo-by{margin:0;font-size:15px;color:var(--xo-mute);letter-spacing:.04em}
.xo-crumbs{margin:0 0 18px;font-size:15px;color:var(--xo-mute)}
.xo-crumbs a{color:var(--xo-mute)}
.xo-crumbs span{margin:0 6px;color:var(--xo-red)}

/* portada: noticia principal y tarjetas */
.xo-front{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;padding:32px 0;border-bottom:1px solid var(--xo-line)}
.xo-lead{position:relative;display:block;color:#fff;text-decoration:none;overflow:hidden;background:var(--xo-navy)}
.xo-lead img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.85;transition:transform .4s}
.xo-lead:hover img{transform:scale(1.03)}
.xo-lead-k{position:absolute;left:22px;bottom:96px;background:var(--xo-red);padding:4px 10px;font:700 12px/1.3 var(--xo-sans);letter-spacing:.16em;text-transform:uppercase}
.xo-lead-t{position:absolute;left:0;right:0;bottom:0;padding:44px 22px 22px;font:700 26px/1.25 var(--xo-serif);background:linear-gradient(transparent,rgba(9,15,30,.94) 42%)}
.xo-lead:hover{color:#fff}
.xo-cards{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:3px solid var(--xo-navy)}
.xo-card{display:flex;flex-direction:column;gap:6px;padding:18px 16px 20px;text-decoration:none;color:var(--xo-ink);border-bottom:1px solid var(--xo-line)}
.xo-card:nth-child(odd){border-right:1px solid var(--xo-line)}
.xo-card-n{font:700 34px/1 var(--xo-serif);color:var(--xo-red)}
.xo-card-k{font:700 12px/1.2 var(--xo-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--xo-mute)}
.xo-card-t{font:700 19px/1.3 var(--xo-serif);color:var(--xo-navy)}
.xo-card:hover .xo-card-t{text-decoration:underline;text-decoration-color:var(--xo-red)}

/* cuerpo y columna lateral */
.xo-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-top:34px}
.xo-body{min-width:0;max-width:720px}
.xo-body h2{margin:40px 0 12px;font:700 29px/1.25 var(--xo-serif);color:var(--xo-navy);letter-spacing:-.01em}
.xo-body h2:first-child{margin-top:0}
.xo-body p,.xo-body li,.xo-body dd{font-size:18px}
.xo-body p{margin:0 0 16px}
.xo-home .xo-body>h2:first-of-type+p::first-letter{float:left;font:700 64px/.85 var(--xo-serif);color:var(--xo-red);padding:6px 10px 0 0}
.xo-list{margin:0 0 18px;padding-left:26px}
.xo-list li{margin:0 0 10px;padding-left:4px}
.xo-list li::marker{color:var(--xo-red);font-weight:700}
.xo-list--dots{list-style:square}
.xo-pros,.xo-cons{list-style:none;margin:0 0 18px;padding:0}
.xo-pros li,.xo-cons li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--xo-line)}
.xo-pros li::before,.xo-cons li::before{position:absolute;left:0;top:12px;font:700 20px/1.3 var(--xo-serif)}
.xo-pros li::before{content:"+";color:#0D8A55}
.xo-cons li::before{content:"!";color:var(--xo-red)}
.xo-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px}
.xo-two>div{background:var(--xo-card);border-top:3px solid var(--xo-navy);padding:18px 20px}
.xo-two>div+div{border-top-color:var(--xo-red)}
.xo-two-t{font:700 20px/1.3 var(--xo-serif)!important;margin:0 0 8px!important}
.xo-gloss{margin:0 0 20px;border-top:1px solid var(--xo-ink)}
.xo-gloss dt{font:700 18px/1.3 var(--xo-serif);margin:14px 0 4px;color:var(--xo-navy)}
.xo-gloss dd{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--xo-line)}
.xo-table{overflow-x:auto;margin:0 0 22px;border-top:3px solid var(--xo-navy)}
.xo-table table{width:100%;border-collapse:collapse;font-size:16px;background:var(--xo-card)}
.xo-table th{text-align:left;font:700 13px/1.3 var(--xo-sans);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--xo-ink);color:var(--xo-navy)}
.xo-table td{padding:12px 14px;border-bottom:1px solid var(--xo-line);vertical-align:top}
.xo-table td:first-child{font-weight:700}
.xo-pull{margin:30px 0;padding:6px 0 6px 24px;border-left:4px solid var(--xo-red);font:italic 400 25px/1.4 var(--xo-serif);color:var(--xo-navy)}
.xo-fig{margin:26px 0;background:var(--xo-card)}
.xo-fig img{width:100%}
.xo-fig figcaption{padding:10px 14px;font-size:15px;color:var(--xo-mute);border-bottom:1px solid var(--xo-line);font-style:italic}
.xo-page>.xo-fig{max-width:900px;margin:30px auto 0}

/* CTA en el texto */
.xo-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 26px}
.xo-cta--mid{background:var(--xo-navy);padding:22px 24px;margin:30px 0}
.xo-cta--mid .xo-ad{color:#AEB5C4}
.xo-cta--end{border-top:1px solid var(--xo-ink);border-bottom:1px solid var(--xo-ink);padding:22px 0;justify-content:center}
.xo-ad{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--xo-mute)}

/* preguntas */
.xo-faq{margin:40px 0 10px;border-top:3px solid var(--xo-navy);padding-top:6px}
.xo-faq h2{margin-top:14px}
.xo-q{border-bottom:1px solid var(--xo-line)}
.xo-q summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font:700 19px/1.4 var(--xo-serif);color:var(--xo-navy);min-height:44px}
.xo-q summary::-webkit-details-marker{display:none}
.xo-q summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 28px/1 var(--xo-sans);color:var(--xo-red)}
.xo-q[open] summary::after{content:"–"}
.xo-q p{margin:0 0 18px}

/* sigue leyendo */
.xo-more{margin:40px 0 0;padding:24px;background:var(--xo-card);border:1px solid var(--xo-line)}
.xo-more-t{margin:0 0 4px!important;font:700 14.5px/1.2 var(--xo-sans)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--xo-red-d)}
.xo-more-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:10px}
.xo-more-c{display:block;padding:14px 16px;border-left:3px solid var(--xo-red);background:var(--xo-paper);text-decoration:none;color:var(--xo-navy);font:700 17px/1.35 var(--xo-serif);min-height:44px}
.xo-more-c span{display:block;font:700 12px/1.2 var(--xo-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--xo-mute);margin-bottom:6px}

/* columna lateral */
.xo-side{position:relative}
.xo-side-box{background:var(--xo-card);border-top:3px solid var(--xo-navy);padding:18px 20px;margin-bottom:22px}
.xo-facts{position:sticky;top:96px}
.xo-side-t{margin:0 0 10px;font:700 14.5px/1.2 var(--xo-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--xo-red-d)}
.xo-top{list-style:none;margin:0;padding:0;counter-reset:xo}
.xo-top li{counter-increment:xo;border-bottom:1px solid var(--xo-line)}
.xo-top li:last-child{border-bottom:0}
.xo-top a{display:grid;grid-template-columns:34px 1fr;gap:0 8px;padding:12px 0;text-decoration:none;color:var(--xo-navy);font:700 17px/1.35 var(--xo-serif)}
.xo-top a::before{content:counter(xo);grid-row:span 2;font:700 30px/1 var(--xo-serif);color:var(--xo-red)}
.xo-top span{font:700 12px/1.3 var(--xo-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--xo-mute)}
.xo-facts dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.xo-facts dt{font:700 24px/1.1 var(--xo-serif);color:var(--xo-navy)}
.xo-facts dd{margin:2px 0 0;font-size:14px;color:var(--xo-mute)}
.xo-side-btn{width:100%;margin-bottom:8px}

/* pie */
.foot{background:var(--xo-navy);color:#C9CFDA;margin-top:30px;padding:36px 0 30px;border-top:4px solid var(--xo-red)}
.foot-top{display:flex;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #26324a}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;flex:1}
.foot nav a{color:#fff;text-decoration:none;font-size:15px;padding:10px 0}
.foot nav a:hover{text-decoration:underline;text-decoration-color:var(--xo-red)}
.foot p{margin:0 0 8px;font-size:15px}

@media (max-width:980px){
  .xo-grid{grid-template-columns:1fr;gap:20px}
  .xo-body{max-width:none}
  .xo-facts{position:static}
  .xo-front{grid-template-columns:1fr}
  .xo-door-in{grid-template-columns:1fr}
  .xo-door-ad{justify-self:start}
}
@media (max-width:640px){
  body{font-size:16px}
  .shell,.xo-page{padding-left:16px;padding-right:16px}
  .top-in{gap:6px 10px;min-height:0;padding-top:10px;padding-bottom:6px}
  .top-in>a:first-child{flex:1}
  .top nav{order:3;flex-basis:100%;overflow-x:auto;gap:0;margin:0 -6px}
  .top nav a{padding:12px 8px;font-size:12px;letter-spacing:.08em;white-space:nowrap}
  .top .btn-main{padding:8px 14px;font-size:13px}
  .xo-door-in{padding:16px 16px 14px;gap:10px}
  .xo-door-t{font-size:21px}
  .xo-door-btns{flex-direction:column;gap:8px}
  .xo-door-a,.xo-door-b{width:100%;min-height:50px}
  .xo-door-steps{flex-direction:column;gap:6px;font-size:16px}
  .xo-door-bono{font-size:16px}
  .xo-mast,.xo-ahead{padding:30px 0 20px}
  .xo-kick::before,.xo-kick::after{width:20px}
  .xo-dek{font-size:18px}
  .xo-lead-t{font-size:21px}
  .xo-lead-k{bottom:84px}
  .xo-cards{grid-template-columns:1fr}
  .xo-card:nth-child(odd){border-right:0}
  .xo-body h2{font-size:24px}
  .xo-body p,.xo-body li,.xo-body dd{font-size:17px}
  .xo-two{grid-template-columns:1fr}
  .xo-pull{font-size:21px}
  .xo-cta .btn{width:100%}
  .xo-cta--mid{padding:18px}
  .xo-table table{font-size:15px}
  .xo-table th,.xo-table td{padding:10px}
}