/* ===== Postu · estilos compartidos de comparativas ===== */
/* usa tokens de styles.css (:root). Acento configurable por página con --acc */
:root{--acc:var(--lime);--acc-2:var(--lime-600);--acc-ink:var(--lime-700);--acc-soft:#f2f7e2;--acc-tint:#fbfdf4}
.c-wrap{max-width:940px;margin:0 auto;padding:0 22px}
.c-crumbs{padding:100px 0 0;font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--text-mute)}
.c-crumbs a{color:var(--text-mute);text-decoration:none}.c-crumbs a:hover{color:var(--acc-ink)}
.btn--lime{background:var(--acc);color:var(--ink)}
.btn--lime:hover{background:#d2f96a;box-shadow:0 16px 44px rgba(150,200,40,.4);transform:translateY(-2px)}
/* logos */
.c-logo{border-radius:16px;box-shadow:var(--sh-sm);overflow:hidden;display:grid;place-items:center;flex:none}
.c-logo--postu img{width:100%;height:100%;object-fit:cover;display:block}
.c-logo--comp{background:#fff;border:1px solid var(--line)}
.c-logo--comp img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
/* HERO variantes */
.c-hero{padding:16px 0 20px}
.c-hero .kicker,.c-block .kicker{color:var(--acc-ink)}
.c-hero h1{font-size:clamp(29px,4.6vw,45px);margin:8px 0 16px;max-width:20ch}
.c-hero--center{text-align:center}.c-hero--center h1{margin-left:auto;margin-right:auto}
.c-lead{font-size:18.5px;color:var(--text-soft);max-width:64ch;line-height:1.6;margin-bottom:22px}
.c-hero--center .c-lead{margin-left:auto;margin-right:auto}
.c-vs{display:flex;align-items:center;gap:16px;margin:6px 0 22px}
.c-hero--center .c-vs{justify-content:center}
.c-badge{display:flex;align-items:center;gap:13px}
.c-badge .c-logo{width:62px;height:62px}
.c-badge b{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.02em;display:block}
.c-badge span{font-family:var(--f-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-mute)}
.c-vs .x{font-family:var(--f-display);font-size:23px;color:var(--text-mute);font-style:italic}
/* HERO split */
.c-hero--split{display:grid;grid-template-columns:1.4fr .9fr;gap:34px;align-items:center}
.c-vscard{background:var(--ink);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-lg);text-align:center}
.c-vscard .row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.c-vscard .c-logo{width:58px;height:58px}
.c-vscard .x{font-family:var(--f-display);font-style:italic;font-size:19px;color:var(--invert-soft)}
.c-vscard b{color:var(--invert);font-family:var(--f-display);font-size:15px;font-weight:600;display:block}
.c-vscard small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--invert-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
/* TL;DR ink */
.c-tldr{background:var(--ink);border:1px solid var(--line-ink);border-radius:var(--r-lg);padding:26px 30px;margin:22px 0 0;box-shadow:var(--sh-lg)}
.c-tldr .kicker{color:var(--acc)}
.c-tldr p{color:var(--invert-soft);font-size:16px;line-height:1.72;margin:0}.c-tldr strong{color:var(--invert)}
/* TOC */
.c-toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;margin:26px 0 0;box-shadow:var(--sh-sm)}
.c-toc b{font-family:var(--f-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);display:block;margin-bottom:10px}
.c-toc ol{margin:0;padding-left:20px;columns:2;column-gap:26px;font-size:14.5px}.c-toc li{margin-bottom:6px}
.c-toc a{color:var(--text-soft);text-decoration:none}.c-toc a:hover{color:var(--acc-ink)}
/* bloques */
.c-block{padding:42px 0 4px;scroll-margin-top:80px}
.c-block h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:14px;max-width:26ch}
.c-block h3{font-family:var(--f-sans);font-size:19px;font-weight:700;margin:24px 0 8px;color:var(--text)}
.c-prose{font-size:16.5px;line-height:1.75;color:var(--text-soft)}
.c-prose p{margin:0 0 17px}.c-prose strong{color:var(--text)}
/* qué es cada uno */
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.c-def{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-sm)}
.c-def--postu{border-color:var(--acc-2);box-shadow:var(--sh-lime)}
.c-def .c-logo{width:44px;height:44px;border-radius:12px;margin-bottom:12px}
.c-def h3{margin:0 0 6px;font-size:17px}.c-def p{font-size:14.5px;line-height:1.6;color:var(--text-soft);margin:0}
/* tabla clásica */
.c-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);font-size:14.5px;margin-top:8px}
.c-table th,.c-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.c-table thead th{font-family:var(--f-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);background:var(--paper-3)}
.c-table thead th.p{color:var(--acc-ink);background:var(--acc-soft)}
.c-table td.axis{font-weight:600;color:var(--text);width:28%;font-size:13.5px}
.c-table td.p{background:var(--acc-tint);font-weight:500}
.c-table tbody tr:last-child td{border-bottom:none}
.c-yes{color:var(--acc-ink);font-weight:700}
.c-table td small{display:block;color:var(--text-mute);font-weight:400;font-size:12.5px;margin-top:2px}
/* tabla filas */
.c-rows{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.c-row{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
.c-row__lbl{grid-column:1/-1;background:var(--paper-3);padding:9px 16px;font-family:var(--f-mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute)}
.c-cell{padding:13px 16px;font-size:14.5px}
.c-cell--p{background:var(--acc-tint);border-right:1px solid var(--line)}
.c-cell b{color:var(--text)}.c-cell small{display:block;color:var(--text-mute);font-size:12.5px;margin-top:2px}
.c-tp{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--acc-ink);text-transform:uppercase;letter-spacing:.05em}
.c-tc{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em}
/* 3 diferencias */
.c-diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 0}
.c-diff{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.c-diff::after{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--acc)}
.c-diff .ico{font-size:25px;margin-bottom:11px;display:block}
.c-diff .big{font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.2;margin-bottom:8px}
.c-diff p{font-size:13.5px;line-height:1.55;color:var(--text-soft);margin:0}
.c-diff .tag{font-family:var(--f-mono);font-size:10.5px;font-weight:700;color:var(--acc-ink);text-transform:uppercase;letter-spacing:.06em;margin-top:11px;display:block}
/* plan entrada */
.c-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.c-plan{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm)}
.c-plan--postu{border:2px solid var(--acc-2);box-shadow:var(--sh-lime)}
.c-plan__h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.c-plan__h .c-logo{width:34px;height:34px;border-radius:9px}
.c-plan__name{font-family:var(--f-sans);font-weight:700;font-size:16px;color:var(--text)}
.c-plan__price{font-family:var(--f-display);font-size:23px;font-weight:600;color:var(--text);margin:6px 0 14px}
.c-plan__price small{font-size:12px;color:var(--text-mute);font-family:var(--f-mono)}
.c-plan ul{list-style:none;margin:0;padding:0}
.c-plan li{position:relative;padding:7px 0 7px 26px;font-size:14px;color:var(--text-soft);border-top:1px dashed var(--line)}
.c-plan li:first-child{border-top:none}
.c-plan li.y::before{content:"✓";position:absolute;left:0;color:var(--acc-ink);font-weight:700}
.c-plan li.n::before{content:"—";position:absolute;left:0;color:var(--text-mute);font-weight:700}
/* scorecard */
.c-score{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.c-scard{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-sm)}
.c-scard__t{font-weight:600;color:var(--text);font-size:14.5px}
.c-scard__t small{display:block;color:var(--text-mute);font-weight:400;font-size:12.5px;margin-top:2px}
.c-pill{font-family:var(--f-mono);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;text-align:center;min-width:74px}
.c-pill--p{background:var(--acc);color:var(--ink)}
.c-pill--c{background:var(--paper-3);color:var(--text-mute)}
/* ventajas */
.c-adv{list-style:none;margin:16px 0 0;padding:0}
.c-adv li{position:relative;padding:14px 18px 14px 50px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;box-shadow:var(--sh-sm)}
.c-adv li::before{content:"✓";position:absolute;left:16px;top:14px;width:22px;height:22px;background:var(--acc);color:var(--ink);border-radius:7px;display:grid;place-items:center;font-weight:700;font-size:13px}
.c-adv b{color:var(--text);font-size:15px}.c-adv span{display:block;color:var(--text-soft);font-size:14px;line-height:1.55;margin-top:2px}
/* nota / veredicto */
.c-note{background:var(--paper-3);border-left:3px solid var(--line-2);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;font-size:14.5px;color:var(--text-soft);line-height:1.6;margin:18px 0 0}.c-note b{color:var(--text)}
.c-verdict{background:var(--paper-2);border:1px solid var(--acc-2);border-radius:var(--r-lg);padding:26px 30px;box-shadow:var(--sh-lime);margin-top:8px}
.c-verdict p{font-size:16.5px;line-height:1.7;color:var(--text-soft);margin:0 0 12px}.c-verdict p:last-child{margin:0}.c-verdict strong{color:var(--text)}
/* related */
.c-related{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c-related a{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;text-decoration:none;box-shadow:var(--sh-sm);transition:transform .15s,border-color .15s}
.c-related a:hover{transform:translateY(-2px);border-color:var(--acc-2)}
.c-related img{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);object-fit:contain;padding:4px;flex:none}
.c-related span{font-size:14.5px;font-weight:600;color:var(--text)}
.c-related small{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--text-mute);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
/* disclaimer + cta */
.c-disclaimer{font-size:12.5px;color:var(--text-mute);line-height:1.6;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:32px 0 0}.c-disclaimer a{color:var(--text-soft)}
.c-cta{margin:48px 0 64px;background:var(--ink);border-radius:var(--r-xl);padding:48px 40px;text-align:center;box-shadow:var(--sh-lg)}
.c-cta img{height:30px;width:auto;margin-bottom:18px}
.c-cta h2{color:var(--invert);font-size:clamp(26px,4vw,38px);margin-bottom:12px}
.c-cta p{color:var(--invert-soft);font-size:17px;margin-bottom:26px}
@media(max-width:760px){.c-hero--split,.c-two,.c-diffs,.c-plans,.c-related{grid-template-columns:1fr}.c-toc ol{columns:1}.c-row{grid-template-columns:1fr}.c-cell--p{border-right:none;border-bottom:1px solid var(--line)}.c-scard{grid-template-columns:1fr auto}.c-table td.axis{width:40%}}