/* Páginas de oposición de Aptus.
   Los tokens (color, tipografía, radios) y las primitivas (.btn, .wrap,
   .eyebrow, .card, .panel-dark, .checks) vienen de /assets/aptus-ds.css,
   que se enlaza ANTES que este archivo. Aquí solo va lo propio de estas
   páginas: la navegación y los componentes .op-*. */

/* ── Nav (con desplegable de oposiciones) ─────────────────────────────── */
header.nav{position:sticky;top:0;z-index:50;background:rgba(245,245,242,.88);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;gap:20px;height:66px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-0.02em;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.brand-mark img{width:100%;height:100%;display:block;}
.nav-links{display:flex;gap:24px;margin-left:14px;align-items:center;}
.nav-links a{font-size:15px;color:var(--body);font-weight:500;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center;}
.nav-burger{display:none;margin-left:auto;background:none;border:none;font-size:24px;color:var(--ink);padding:8px;cursor:pointer;}

.nav-drop{position:relative;}
.nav-drop-trigger{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:15px;color:var(--body);font-weight:500;}
.nav-drop-trigger i{font-size:15px;transition:transform .2s;}
.nav-drop:hover .nav-drop-trigger{color:var(--ink);}
.nav-drop:hover .nav-drop-trigger i{transform:rotate(180deg);}
.nav-drop-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:330px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -26px rgba(15,16,18,.4);
  padding:10px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);}
.nav-drop-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-drop-group{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px;}
.nav-drop-panel a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;color:var(--ink);}
.nav-drop-panel a:hover{background:var(--surface-2);}
.nav-drop-panel a i{font-size:19px;color:var(--ink);flex-shrink:0;}
.nav-drop-panel a span{display:flex;flex-direction:column;line-height:1.25;}
.nav-drop-panel a small{color:var(--muted);font-size:12.5px;}
.nav-drop-panel a strong{font-weight:700;font-size:14.5px;}

.mnav{display:none;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:6px var(--pad) 20px;}
.mnav.open{display:flex;}
.mnav a{padding:12px 2px;font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);}
.mnav .mnav-group{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:14px 2px 2px;border:none;}
.mnav .mnav-sub{padding-left:14px;font-weight:400;color:var(--body);}
.mnav .btn{width:100%;margin-top:12px;}
@media(min-width:961px){.mnav{display:none!important;}}

/* ── Hero de la ficha ─────────────────────────────────────────────────── */
.op-hero{padding:clamp(34px,6vw,64px) 0 clamp(28px,4vw,44px);border-bottom:1px solid var(--line);}
.op-breadcrumb{font-size:13px;color:var(--muted);margin:0 0 18px;}
.op-breadcrumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.op-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.op-tag{font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--body);}
.op-tag.hi{background:var(--lime);color:var(--ink);font-weight:700;}
.op-hero h1{font-size:clamp(30px,4.2vw,46px);margin:0;max-width:24ch;letter-spacing:-0.03em;}
.op-hero-sub{font-size:clamp(16px,2vw,19px);color:var(--body);margin:18px 0 0;max-width:52ch;}
.op-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;}
.op-hero-trust{margin:20px 0 0;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;}
.op-hero-trust span{display:inline-flex;align-items:center;gap:6px;}
.op-hero-trust i{color:var(--green);font-size:15px;}

/* ── Cuerpo: contenido + aside pegajoso ──────────────────────────────── */
.op-body{display:grid;grid-template-columns:1fr 300px;gap:clamp(32px,5vw,64px);padding:clamp(40px,6vw,64px) 0;align-items:start;}
.op-sec{margin:0 0 clamp(34px,5vw,52px);}
.op-sec:last-child{margin-bottom:0;}
.op-sec h2{font-size:clamp(23px,3vw,30px);margin:0 0 14px;}
.op-sec h3{font-size:18px;margin:22px 0 6px;}
.op-sec p{color:var(--body);font-size:16px;margin:0 0 12px;}
.op-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:11px;}
.op-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--body);}
.op-list li i{color:var(--green);font-size:18px;flex-shrink:0;line-height:1.35;}
.op-list li strong{color:var(--ink);}
.op-steps{counter-reset:s;list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:16px;}
.op-steps li{position:relative;padding:0 0 0 46px;}
.op-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--lime);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;}
.op-steps h3{margin:2px 0 4px;font-size:17px;}
.op-steps p{margin:0;font-size:15px;}
.op-blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 0;}
.op-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;}
.op-block-n{font-family:var(--mono);font-size:11px;color:var(--muted);}
.op-block p{margin:3px 0 0;color:var(--ink);font-size:14.5px;font-weight:500;}

/* Aviso normativo */
.op-nota{background:var(--aviso-bg);border:1px solid var(--aviso-line);border-radius:var(--r-md);padding:14px 16px;
  font-size:14px;color:var(--aviso-ink);margin:18px 0 0;display:flex;gap:10px;align-items:flex-start;line-height:1.5;}
.op-nota i{font-size:18px;flex-shrink:0;}
.op-nota a{color:var(--aviso-ink);text-decoration:underline;text-underline-offset:2px;font-weight:700;}

/* ── Métricas destacadas ─────────────────────────────────────────────── */
.op-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0 0;}
.op-kpis-4{margin:18px 0 22px;}
.op-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;}
.op-kpi b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--ink);
  line-height:1.1;letter-spacing:-0.02em;font-feature-settings:'tnum';}
.op-kpi span{display:block;margin-top:5px;font-size:12.5px;line-height:1.35;color:var(--muted);}

/* ── Ficha clave-valor ───────────────────────────────────────────────── */
.op-dl{margin:16px 0 0;border-top:1px solid var(--line);}
.op-dl-row{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);}
.op-dl dt{font-size:14px;font-weight:700;color:var(--ink);}
.op-dl dd{margin:0;font-size:15px;color:var(--body);}

/* ── Tablas ──────────────────────────────────────────────────────────── */
.op-tabla-wrap{overflow-x:auto;margin:16px 0 0;-webkit-overflow-scrolling:touch;}
.op-tabla{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:15px;}
.op-tabla th,.op-tabla td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.op-tabla tbody th{width:210px;font-weight:700;color:var(--ink);font-size:14px;}
.op-tabla td{color:var(--body);}
.op-tabla .num{text-align:right;white-space:nowrap;font-feature-settings:'tnum';}
.op-tabla-ex{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;min-width:430px;margin:0;}
.op-tabla-ex thead th{background:var(--surface-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.op-tabla-ex td{color:var(--ink);}
.op-tabla-ex tbody tr:hover{background:var(--surface-2);}
.op-tabla-ex tfoot td{background:var(--ink);color:var(--on-dark);font-weight:700;border-bottom:none;}

/* ── Demo: pregunta real con las 4 fundamentaciones ──────────────────── */
.op-demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(18px,2.5vw,26px);
  margin:18px 0 0;box-shadow:0 20px 45px -34px rgba(15,16,18,.35);}
.op-demo-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);}
.op-demo-src{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);}
.op-demo-src i{font-size:16px;}
.op-demo-ley{font-family:var(--mono);font-size:11.5px;color:var(--body);background:var(--surface-2);padding:4px 9px;border-radius:6px;}
.op-demo-q{font-size:17px;font-weight:500;color:var(--ink);margin:18px 0 0;line-height:1.45;}
.op-demo-opts{display:flex;flex-direction:column;gap:9px;margin:18px 0 0;}
.op-demo-opt{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
.op-demo-opt:hover:not(:disabled){border-color:var(--ink);background:var(--surface-2);}
.op-demo-opt:disabled{cursor:default;opacity:1;}
.op-demo-l{flex-shrink:0;width:24px;height:24px;border-radius:7px;background:var(--surface-2);color:var(--muted);
  font-family:var(--display);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}
.op-demo-opt.ok{border-color:var(--green);background:#EAF5EE;}
.op-demo-opt.ok .op-demo-l{background:var(--green);color:#fff;}
.op-demo-opt.ko{border-color:var(--red);background:#F8EBE7;}
.op-demo-opt.ko .op-demo-l{background:var(--red);color:#fff;}
.op-demo-hint{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);margin:14px 0 0;}
.op-demo [hidden]{display:none!important;}
.op-demo-res{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);}
.op-demo-veredicto{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin:0 0 16px;}
.op-demo-veredicto i{font-size:20px;}
.op-demo-veredicto.ok{color:var(--green);}
.op-demo-veredicto.ko{color:var(--red);}
.op-demo-funds{display:flex;flex-direction:column;gap:10px;}
.op-demo-f{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);}
.op-demo-f p{margin:0;font-size:14.5px;line-height:1.5;color:var(--body);}
.op-demo-f.ok{border-color:var(--green);background:#EAF5EE;}
.op-demo-f.ok p{color:var(--ink);}
.op-demo-f.ok .op-demo-l{background:var(--green);color:#fff;}
.op-demo-f.sel:not(.ok){border-color:var(--line-2);}
.op-demo-reset{margin:16px 0 0;font-size:14px;padding:10px 18px;}
.op-demo-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:18px 0 0;
  padding:18px 22px;background:var(--ink);border-radius:var(--r-card);}
.op-demo-cta p{margin:0;font-size:15px;color:var(--on-dark-soft);}
.op-demo-cta p strong{color:var(--lime);font-family:var(--display);}

/* ── Temario plegable ────────────────────────────────────────────────── */
.op-temas{margin:16px 0 0;border-top:1px solid var(--line);}
.op-tema summary{font-size:16px;font-weight:600;padding:15px 0;}
.op-tema summary>span{display:flex;flex-direction:column;gap:3px;}
.op-tema-n{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em;}
.op-tema p{font-size:15px;padding-bottom:16px;}

/* ── Pasos numerados simples ─────────────────────────────────────────── */
.op-steps-plain{counter-reset:sp;gap:12px;}
.op-steps-plain li{padding-left:40px;font-size:15.5px;color:var(--body);line-height:1.55;}
.op-steps-plain li::before{counter-increment:sp;content:counter(sp);width:26px;height:26px;font-size:13px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink);font-weight:700;font-family:var(--display);top:0;}

/* ── Fuentes oficiales ───────────────────────────────────────────────── */
.op-fuentes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0 0;}
.op-fuente{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;transition:border-color .15s,transform .1s;}
.op-fuente:hover{border-color:var(--ink);transform:translateY(-1px);}
.op-fuente strong{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;line-height:1.35;}
.op-fuente strong i{font-size:15px;color:var(--muted);flex-shrink:0;}
.op-fuente span{display:block;margin-top:5px;font-size:13.5px;color:var(--body);line-height:1.45;}

/* ── Índice de la página ─────────────────────────────────────────────── */
.op-toc{margin:18px 0 0;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;gap:2px;}
.op-toc-t{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.op-toc a{font-size:14px;color:var(--body);padding:5px 0 5px 11px;border-left:2px solid var(--line);transition:color .15s,border-color .15s;}
.op-toc a:hover{color:var(--ink);}
.op-toc a.on{color:var(--ink);font-weight:700;border-left-color:var(--lime);border-left-width:3px;}

/* ── Aside: tarjeta de producto ──────────────────────────────────────── */
.op-aside{position:sticky;top:86px;}
.op-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:0 20px 45px -30px rgba(15,16,18,.3);}
.op-card h3{font-size:19px;margin:0 0 4px;}
.op-card-p{color:var(--muted);font-size:14px;margin:0 0 16px;}
.op-card-stat{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;}
.op-card-stat b{font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink);font-feature-settings:'tnum';}
.op-card-stat span{font-size:13.5px;color:var(--body);}
.op-card .btn{width:100%;margin-top:14px;}
.op-card-free{text-align:center;font-size:12.5px;color:var(--green);font-weight:700;margin:10px 0 0;}

/* ── Método Aptus (banda oscura) ─────────────────────────────────────── */
.op-method{background:var(--ink);color:var(--on-dark);padding:clamp(40px,6vw,64px) 0;}
.op-method h2{color:var(--on-dark);font-size:clamp(24px,3.4vw,34px);max-width:20ch;}
.op-method .eyebrow{color:var(--lime);}
.op-method-p{color:var(--on-dark-body);font-size:16.5px;margin:14px 0 0;max-width:56ch;}
.op-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin:36px 0 0;}
.op-feat i{font-size:26px;color:var(--lime);}
.op-feat h3{color:var(--on-dark);font-size:18px;margin:12px 0 5px;}
.op-feat p{color:var(--on-dark-body);font-size:14.5px;margin:0;}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.op-faq{max-width:760px;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary i{color:var(--muted);transition:transform .2s;flex-shrink:0;}
.qa[open] summary i{transform:rotate(45deg);}
.qa p{color:var(--body);font-size:15.5px;padding:0 0 18px;max-width:64ch;}

/* ── CTA + footer ────────────────────────────────────────────────────── */
section{padding:clamp(48px,7vw,80px) 0;}
.op-cta{background:var(--surface-2);border-top:1px solid var(--line);}
.op-cta-in{text-align:center;max-width:36em;margin:0 auto;}
.op-cta h2{font-size:clamp(26px,4vw,38px);}
.op-cta p{color:var(--body);font-size:17px;margin:14px 0 24px;}
footer{border-top:1px solid var(--line);padding:40px 0;}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--body);}
.foot-links a:hover{color:var(--ink);}
.foot-copy{font-size:13px;color:var(--muted);}

/* ── WhatsApp ────────────────────────────────────────────────────────── */
.wa-fab{position:fixed;bottom:20px;right:20px;z-index:900;display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;
  padding:12px 18px 12px 15px;border-radius:var(--r-pill);font-weight:700;font-size:15px;box-shadow:0 10px 28px -8px rgba(0,0,0,.35);transition:background .15s,transform .1s;}
.wa-fab:hover{background:#1ebe5b;}
.wa-fab:active{transform:scale(.97);}
.wa-fab i{font-size:24px;line-height:1;}
@media(max-width:560px){.wa-fab-txt{display:none;}.wa-fab{padding:14px;gap:0;}}

/* Cenefa: separador de rombos en la paleta nueva */
.cenefa{height:14px;width:100%;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='42'%20height='14'%20viewBox='0%200%2042%2014'%3E%3Cpath%20d='M7%202%20L12%207%20L7%2012%20L2%207%20Z'%20fill='%230F1012'/%3E%3Cpath%20d='M21%202%20L26%207%20L21%2012%20L16%207%20Z'%20fill='%23D9F24C'/%3E%3Cpath%20d='M35%202%20L40%207%20L35%2012%20L30%207%20Z'%20fill='%230F1012'/%3E%3C/svg%3E") repeat-x center;}

@media(max-width:960px){
  .nav-links{display:none;}
  .nav-burger{display:inline-flex;align-items:center;margin-left:8px;}
  .nav-cta{margin-left:auto;}
  .nav-cta .btn-ghost{display:none;}
  .op-body{grid-template-columns:1fr;}
  .op-aside{position:static;order:-1;}
  .op-feats{grid-template-columns:1fr;}
  .op-toc{display:none;}
}
@media(max-width:720px){
  .op-kpis{grid-template-columns:repeat(2,1fr);}
  .op-dl-row{grid-template-columns:1fr;gap:3px;}
  .op-tabla tbody th{width:auto;display:block;border-bottom:none;padding-bottom:2px;}
  .op-tabla tbody td{display:block;padding-top:0;}
  .op-fuentes{grid-template-columns:1fr;}
  .op-demo-cta{flex-direction:column;align-items:stretch;}
}
@media(max-width:560px){ .op-blocks{grid-template-columns:1fr;} }
