/* Qlaro · páginas interiores (artículos, noticias, guías, hubs y herramientas). Se carga después de base.css. */

/* ─── variables que usaban las plantillas antiguas, mapeadas a la paleta nueva ─── */
:root{
  --violet:var(--v); --lilac:var(--lila); --blue:var(--azul); --soft:var(--ink-2); --cream:#fff; --pale:var(--ink-3); --ok:#1FA860; --mid:#E8930C; --alto:#D8404C;
  --ease:var(--ease-out); --script:var(--serif);
  /* styles.css (comparadores y calculadoras) */
  --accent:var(--v); --gold:var(--v); --gold-2:var(--v-deep); --gold-glow:rgba(63,44,221,.22); --gold-soft:#C7BBFF; --gold-tint:rgba(63,44,221,.08); --gold-tint-2:rgba(63,44,221,.14);
  --grad-gold:var(--grad); --grad-button:var(--grad); --grad-button-hover:var(--grad); --grad-text-gold:var(--grad); --grad-gold-glow:radial-gradient(circle at 50% 0%,rgba(63,44,221,.08),transparent 70%);
  --navy:var(--ink); --navy-deep:var(--ink); --ink-soft:var(--ink-2); --muted:var(--ink-2); --muted-2:var(--ink-3);
  --paper:#fff; --paper-2:var(--tint); --white:#fff; --line-2:var(--line);
  --display:var(--serif); --mono:'Manrope',system-ui,sans-serif;
  --radius:22px; --radius-md:16px; --shadow:var(--sh-1); --shadow-strong:var(--sh-2);
  --container:1180px; --container-card:1180px; --container-narrow:1180px; --gutter:24px;
}

/* ─── estructura ─── */
.pg{padding-top:124px}
.pg-wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.art{width:min(820px,100% - 48px);margin-inline:auto}
.art-head{padding:18px 0 34px}
.art-cat{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--v);margin-bottom:18px}
.art-cat a{text-decoration:none;color:inherit}
.art-cat i{width:6px;height:6px;border-radius:50%;background:var(--v)}
.art-head h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.08;margin-bottom:18px}
.art-head h1 em,.art-head h1 .hl,.art-head h1 .em{font-style:italic;color:var(--v);font-weight:500}
.art-lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:60ch}
.art-lead strong{color:var(--ink);font-weight:700}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--ink-3)}
.art-fig{margin:6px 0 40px}
.art-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh-2)}
.art-fig figcaption{margin-top:12px;font-size:.85rem;color:var(--ink-3)}

/* ─── texto ─── */
.prose{font-size:1.0625rem;line-height:1.72;color:var(--ink-2)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.55rem,2.8vw,2.1rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-top:2em;text-wrap:balance}
.prose h3{font-family:var(--sans);font-weight:800;font-size:1.2rem;line-height:1.3;color:var(--ink);margin-top:1.8em;letter-spacing:-.01em}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose h2 em,.prose h3 em,.prose h2 .em{font-style:italic;color:var(--v)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--v);font-weight:600;text-decoration:underline;text-decoration-color:rgba(63,44,221,.35);text-underline-offset:.2em;transition:text-decoration-color 200ms ease}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:.4em;padding-left:.2em}
.prose li::marker{color:var(--v);font-weight:700}
.prose blockquote{margin:1.6em 0;padding:22px 26px;border-radius:var(--r-s);background:var(--tint);font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--ink)}
.prose blockquote p{margin:0}
.prose img{border-radius:var(--r-s);box-shadow:var(--sh-1)}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:.85rem;color:var(--ink-3);margin-top:8px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose code{font-family:'Manrope',monospace;background:var(--tint);padding:.1em .4em;border-radius:6px;font-size:.92em}
.prose .aviso,.prose .note,.prose .info-box{padding:18px 22px;border-radius:var(--r-s);background:var(--tint);font-size:.98rem;color:var(--ink-2)}
.prose .note b,.prose .note strong{color:var(--v)}
.prose .aviso-legal{font-size:.86rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1.2em;margin-top:2.4em}

/* tablas */
.tbl{overflow-x:auto;margin:1.6em 0;border-radius:var(--r-s);box-shadow:var(--sh-1);background:#fff}
.tbl table{width:100%;border-collapse:collapse;font-size:.97rem}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl th{background:var(--tint);color:var(--ink);font-weight:700;font-size:.88rem}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n,.tbl td.num,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td strong{color:var(--ink)}
.tbl td:first-child{white-space:nowrap}
@media (max-width:600px){.tbl th,.tbl td{padding:10px 12px;font-size:.9rem}}

/* chips de páginas hermanas */
.sib{display:flex;flex-wrap:wrap;gap:8px;margin-top:.8em}
.sib a{display:inline-block;padding:.45rem .85rem;border-radius:999px;background:var(--tint);color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none;transition:background-color 200ms ease,color 200ms ease}

/* ranking sencillo (guías) */
.rk-list{list-style:none;display:grid;gap:14px;margin:1.4em 0}
.rk-item{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;padding:20px 22px;border-radius:var(--r);background:#fff;box-shadow:var(--sh-2)}
.rk-item .num{font-family:var(--serif);font-size:1.8rem;line-height:1;color:var(--v);grid-row:1/4}
.rk-item h3{margin:0;font-size:1.15rem}
.rk-item .tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--v);background:var(--tint);padding:.2rem .6rem;border-radius:999px;margin-bottom:6px}
.rk-item p{margin:0;font-size:.97rem}
.rk-item .meta{font-size:.85rem;color:var(--ink-3)}
.rk-item .cta{grid-column:2;margin-top:8px;font-weight:700;color:var(--v);text-decoration:none}

/* preguntas frecuentes (reutiliza .faq de base.css) */
.faq-sec{margin-top:56px}
.faq-sec h2{font-size:clamp(1.55rem,2.8vw,2.1rem);margin-bottom:12px}
.faq-sec .faq p{font-size:1rem}

/* llamada al estudio */
.cta-est{margin:56px 0 0;padding:38px 40px;border-radius:28px;background:var(--grad);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;box-shadow:var(--sh-2)}
.cta-est h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;margin-bottom:8px}
.cta-est h2 em{color:#fff}
.cta-est p{color:rgba(255,255,255,.88);max-width:44ch}
.cta-est .btn{white-space:nowrap}
.cta-sim{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:22px 26px;border-radius:var(--r);background:var(--tint)}
.cta-sim b{display:block;font-size:1.1rem}
.cta-sim span{color:var(--ink-2);font-size:.95rem}
.cta-sim a{font-weight:700;color:var(--v);text-decoration:none;white-space:nowrap}

/* relacionados */
.rel{width:min(1180px,100% - 48px);margin:72px auto 0}
.rel h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:24px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel-card{display:block;padding:24px;border-radius:var(--r);background:#fff;box-shadow:var(--sh-2);text-decoration:none;transition:transform 250ms var(--ease-out),box-shadow 250ms ease}
.rel-card .cat{display:block;font-size:.8rem;font-weight:700;color:var(--v);margin-bottom:10px}
.rel-card h3{font-size:1.15rem;line-height:1.25;margin-bottom:8px}
.rel-card p{font-size:.95rem;color:var(--ink-2)}
.rel-card .ar{display:inline-block;margin-top:14px;font-weight:700;color:var(--v)}
.pie-esp{height:80px}

/* ─── hubs (artículos y noticias) ─── */
.hub-head{padding:20px 0 34px;max-width:70ch}
.hub-head h1{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:16px}
.hub-head p{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-2);max-width:56ch}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tools a{display:inline-flex;align-items:center;gap:8px;padding:.6rem 1rem;border-radius:999px;background:#fff;box-shadow:var(--sh-1);font-weight:700;font-size:.92rem;text-decoration:none;color:var(--ink);transition:transform 200ms var(--ease-out)}
.sec-t{font-size:clamp(1.6rem,3vw,2.3rem);margin:56px 0 20px}
.top5{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:top}
.top5 a{display:block;height:100%;padding:20px 20px 22px;border-radius:var(--r);background:#fff;box-shadow:var(--sh-2);text-decoration:none;color:var(--ink);transition:transform 250ms var(--ease-out)}
.top5 .rk{display:block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--v);margin-bottom:12px}
.top5 b{font-weight:700;font-size:1rem;line-height:1.3}
.bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:18px 0 20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;padding:.5rem .9rem;border-radius:999px;background:var(--tint);color:var(--ink-2);font-weight:700;font-size:.9rem;cursor:pointer;transition:background-color 200ms ease,color 200ms ease}
.chip.on,.chip[aria-pressed="true"]{background:var(--v);color:#fff}
.srch{flex:1 1 260px;max-width:360px;padding:.75rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.95rem;box-shadow:var(--sh-1)}
.srch:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px rgba(63,44,221,.15)}
.nres{font-size:.9rem;color:var(--ink-3);margin-bottom:14px;min-height:1.4em}
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.acard{display:flex;flex-direction:column;padding:24px;border-radius:var(--r);background:#fff;box-shadow:var(--sh-2);text-decoration:none;color:var(--ink);transition:transform 250ms var(--ease-out),box-shadow 250ms ease}
.acard .cat{font-size:.8rem;font-weight:700;color:var(--v);margin-bottom:10px}
.acard h3{font-size:1.15rem;line-height:1.25;margin-bottom:8px}
.acard p{font-size:.95rem;color:var(--ink-2);flex:1}
.acard .dt{margin-top:14px;font-size:.8rem;color:var(--ink-3);font-weight:600}
.acard[hidden]{display:none}
.vacio{padding:40px 0;color:var(--ink-2)}
.clusters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
.cl h3{font-size:1.05rem;margin-bottom:12px}
.cl .lk{display:flex;flex-wrap:wrap;gap:6px}
.cl .lk a{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:var(--tint);font-size:.86rem;font-weight:600;text-decoration:none;color:var(--ink)}
.nfeat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border-radius:28px;background:#fff;box-shadow:var(--sh-2);overflow:hidden;text-decoration:none;color:var(--ink);margin-bottom:22px}
.nfeat img{width:100%;height:100%;min-height:280px;object-fit:cover}
.nfeat .in{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.nfeat .badge{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--v);margin-bottom:14px}
.nfeat .badge i{width:8px;height:8px;border-radius:50%;background:var(--v)}
.nfeat h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;margin-bottom:12px}
.nfeat p{color:var(--ink-2)}
.nfeat .dt{margin-top:16px;font-size:.85rem;font-weight:600;color:var(--ink-3)}
.nlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nitem{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;box-shadow:var(--sh-2);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform 250ms var(--ease-out)}
.nitem img{width:100%;aspect-ratio:16/9;object-fit:cover}
.nitem .in{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.nitem .dt{font-size:.8rem;font-weight:700;color:var(--v);margin-bottom:8px}
.nitem h3{font-size:1.08rem;line-height:1.3;margin-bottom:8px}
.nitem p{font-size:.92rem;color:var(--ink-2);flex:1}
.nitem[hidden]{display:none}
.hub-cta{margin:72px 0 0}

/* ─── contenido heredado de comparadores y calculadoras (styles.css) ─── */
.legado .aff-hero h1,.legado .hz-title,.legado .cmp-hero-title,.legado .gate h2,.legado .calc-h{font-family:var(--serif)!important;font-weight:500!important;letter-spacing:-.02em!important;line-height:1.08}
.legado .aff-hero h1 em,.legado .hz-title .hl,.legado .hz-title .em{font-style:italic;color:var(--v);background:none;-webkit-text-fill-color:currentColor}
.legado .aff-kicker,.legado .hz-kicker,.legado .hz-pill,.legado .cmp-badge{font-family:var(--sans)!important;text-transform:none!important;letter-spacing:0!important;font-weight:700}
.legado .hz-kicker{border:0;padding:0}
.legado .hl{background:none;-webkit-text-fill-color:currentColor;color:var(--v);font-style:italic}
.legado .aff-hero p,.legado .hz-sub,.legado .cmp-hero-sub,.legado .cmp-article p{font-family:var(--sans)}
.legado .calc-result-main{color:#fff}
.legado .calc-result-main .calc-result-value,.legado .calc-result-main .calc-result-label{color:#fff!important}
.legado{padding-bottom:20px}
.legado .cmp-ad,.legado .cmp-banner,.legado .rank-aff,.legado .lock-overlay{display:none!important}
.legado .cmp-hero{padding:10px 0 30px;background:none}
.legado .cmp-hero-title,.legado .cmp-head h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em}
.legado .cmp-hero-title em,.legado .cmp-head h2 em{color:var(--v);font-style:italic}
.legado .kicker{font-family:var(--sans);font-weight:700;letter-spacing:0;text-transform:none;color:var(--v);font-size:.9rem}
.legado .container,.legado .cmp-frame{width:min(1180px,100% - 48px);margin-inline:auto;padding-inline:0}
.legado .cmp-rank-row,.legado .cmp-hub-card,.legado .cmp-tool-card,.legado .calc{background:#fff;box-shadow:var(--sh-2);border:0}
.legado .cmp-btn,.legado .cmp-btn-accent{background:var(--grad);color:#fff;border:0;border-radius:999px}
.legado .brand-logo{background:var(--grad);color:#fff}

@media (hover:hover) and (pointer:fine){
  .prose a:hover{text-decoration-color:var(--v)}
  .sib a:hover,.cl .lk a:hover{background:var(--v);color:#fff}
  .rel-card:hover,.acard:hover,.top5 a:hover,.nitem:hover,.tools a:hover{transform:translateY(-3px)}
  .chip:not(.on):hover{background:var(--tint-2)}
}
@media (max-width:900px){
  .pg{padding-top:104px}
  .rel-grid,.grid-cards,.nlist,.clusters{grid-template-columns:1fr}
  .top5{grid-template-columns:1fr 1fr}
  .nfeat{grid-template-columns:1fr}
  .nfeat img{min-height:200px}
  .cta-est{grid-template-columns:1fr;padding:28px 26px}
  .rk-item{grid-template-columns:1fr}
  .rk-item .num{grid-row:auto}
  .rk-item .cta{grid-column:1}
}
@media (min-width:901px) and (max-width:1100px){
  .grid-cards,.nlist,.rel-grid{grid-template-columns:1fr 1fr}
  .top5{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .rel-card,.acard,.top5 a,.nitem,.tools a{transition:none}
}