/*
Theme Name: Calcula Cierto Child
Description: Sistema de diseño v5 de Calcula Cierto, extraído verbatim del bloque <style> publicado. Tema claro únicamente: color-scheme: light only en :root y en el meta del tema; no invertir con el modo oscuro del sistema.
Template: twentytwentyfive
Version: 1.0.1
*/

:root{color-scheme:light only;
--bg:#F6F7F9;--bg-alt:#EEF1F5;--ink:#0B1220;--ink2:#070D1A;--body:#334155;--secondary:#475569;--muted:#64748B;
--line:#E2E8F0;--line-strong:#CBD5E1;--line-soft:#EDF1F6;
--blue:#2563EB;--blue-d:#1D4ED8;--violet:#7C3AED;--teal:#0EA5A4;--blue-soft:rgba(37,99,235,.22);--green:#059669;--error:#DC2626;
--footer-bg:#070D1A;--footer-text:#B6C2D4;--footer-dim:#7C8AA3;
--card-shadow:0 2px 4px rgba(7,13,26,.05),0 16px 40px rgba(7,13,26,.08);
--lift-shadow:0 4px 8px rgba(7,13,26,.06),0 24px 48px rgba(7,13,26,.12);
--hero-shadow:0 24px 60px rgba(7,13,26,.35);
--radius-card:20px;--radius-input:12px;--radius-btn:12px;
/* aliases kept for inline styles in generated markup */
--paper:#FFFFFF;--card:#FFFFFF;--cobalt:#2563EB;--wash:#F6F7F9;--wash2:#EEF1F5;--signal:#DC2626;--dark:#0B1220}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--body);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.625;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#BFDBFE;color:var(--ink)}
h1,h2,h3,h4{font-family:"Outfit",Manrope,sans-serif;color:var(--ink);margin:0 0 .5em}
h1{font-size:40px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
h2{font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.015em}
h3{font-size:20px;line-height:1.4;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration:none;transition:color .15s ease}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue-soft);outline-offset:2px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:24px;min-height:64px;flex-wrap:wrap;padding:0}
.wordmark{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:"Outfit",Manrope,sans-serif;font-weight:700;letter-spacing:.02em;font-size:17px}
.wordmark:hover{text-decoration:none}
.wordmark b{color:var(--blue);font-weight:700}
.wmdot{display:none}
.mark{width:36px;height:36px;border-radius:10px;background:var(--ink2);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(7,13,26,.25)}
.mark svg{width:20px;height:20px}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav.main a{color:var(--secondary);font-weight:600;font-size:14px;padding:8px 12px;border-radius:8px;min-height:40px;display:inline-flex;align-items:center;transition:color .15s ease,background .15s ease}
nav.main a:hover{background:var(--bg-alt);text-decoration:none;color:var(--ink)}
.btn-cta{margin-left:8px}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;font-family:Manrope,system-ui,sans-serif;font-weight:700;border:1px solid var(--blue);border-radius:var(--radius-btn);padding:0 22px;min-height:48px;cursor:pointer;font-size:15px;box-shadow:0 6px 18px rgba(37,99,235,.28);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);text-decoration:none;color:#fff;box-shadow:0 8px 22px rgba(37,99,235,.34)}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 1px 2px rgba(7,13,26,.05)}
.btn.sec:hover{background:var(--bg-alt);border-color:var(--line-strong);color:var(--ink)}
.btn.ghost{background:#fff;border:1px solid var(--line-strong);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--bg-alt);border-color:var(--line-strong);color:var(--ink)}
.btn.small{min-height:40px;padding:0 16px;font-size:14px}
/* ---------- Hero (dark flagship) ---------- */
.hero{position:relative;background:var(--ink2);color:#C7D0E0;padding:84px 0 0;overflow:hidden;border-bottom:0}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 380px at 12% -10%,rgba(37,99,235,.5),transparent 65%),radial-gradient(520px 360px at 88% 0%,rgba(124,58,237,.42),transparent 65%),radial-gradient(640px 420px at 55% 115%,rgba(14,165,164,.34),transparent 65%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;font-size:54px;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:0 0 18px}
.grad-word{background:linear-gradient(92deg,#60A5FA 0%,#2DD4BF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#C7D0E0;max-width:560px;font-size:17px;line-height:1.65}
.eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin:0 0 14px}
.pill-glass{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;padding:8px 14px;border-radius:999px;margin:0 0 22px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pill-glass span{min-width:0}@media(max-width:600px){.pill-glass{border-radius:18px;line-height:1.45}}
.pill-glass i{width:7px;height:7px;border-radius:50%;background:#2DD4BF;flex:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:stretch}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.hero h1{font-size:40px}}
.hero .searchbox{max-width:560px;margin-top:30px}
.hero .searchbox label.fl{color:#E6ECF5;margin-bottom:8px}
.hero .searchbox input{background-color:rgba(255,255,255,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A9B6CC' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px center;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-input);padding-left:48px;min-height:56px;height:56px;font-size:16px;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .searchbox input::placeholder{color:#8FA0BC}
.hero .searchbox input:focus{border-color:#60A5FA;box-shadow:0 0 0 3px rgba(96,165,250,.35)}
.hero .sug{background:#fff}
.mini{background:rgba(255,255,255,.08);color:#E6ECF5;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:26px;box-shadow:var(--hero-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mini h2{color:#fff;margin:0 0 18px;font-size:20px;line-height:1.4}
.mini p{color:#A9B6CC;font-size:14px;line-height:1.6}
.hero .mini p{color:#A9B6CC;font-size:14px;max-width:none}
.mini .field{margin-bottom:16px}
.mini label.fl,.mini .fl{color:#E6ECF5}
.mini input,.mini select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);color:#fff}
.mini select option{color:#0B1220;background:#fff}
.mini input:focus,.mini select:focus{border-color:#60A5FA;box-shadow:0 0 0 3px rgba(96,165,250,.35)}
.mini a{color:#5EEAD4;font-weight:600}
#m_res{border-top:1px solid rgba(255,255,255,.15);color:#C7D0E0;padding:16px 0 4px;margin:8px 0 12px}
#m_res p{color:#C7D0E0;margin:0}
#m_res .res-big{color:#fff;font-family:"Outfit",Manrope,sans-serif;font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
#m_res .m-net{color:#5EEAD4}
#m_res .small{color:#8FA0BC}
#m_res strong{color:#fff;font-weight:700}
.seg{display:flex;background:var(--line-soft);border-radius:var(--radius-input);padding:4px;gap:4px}
.seg-btn{flex:1;border:0;background:transparent;color:var(--secondary);font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:14px;min-height:40px;border-radius:9px;cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.seg-btn.on{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.30)}
.mini .seg{background:rgba(255,255,255,.10)}
.mini .seg-btn{color:#C7D0E0}
.mini .seg-btn.on{background:var(--blue);color:#fff}
.masbusc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:28px 0 4px}
.masbusc .mb-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.mbchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;color:var(--secondary);display:inline-flex;align-items:center;min-height:40px;box-shadow:0 1px 2px rgba(7,13,26,.04);transition:border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.mbchip:hover{text-decoration:none;border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.hero-left{display:flex;flex-direction:column;height:100%;min-width:0}
.hero-toolwrap{display:flex;min-width:0;align-items:stretch}
.hero-toolwrap .mini{flex:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.hero-toolwrap .mini h2{margin:0}
.hero-toolwrap .mini .field{margin-bottom:0}
.hero-toolwrap .mini .grid2{min-width:0}
.hero-toolwrap .mini>p.small{margin:0}
.hero-toolwrap #m_res{margin:0}
.hero-toolwrap .mini select{padding-right:30px;font-size:15px}
.hero-toolwrap .grid2-ccaa{grid-template-columns:1.32fr .68fr}
@media(max-width:520px){.hero-toolwrap .grid2-ccaa{grid-template-columns:1fr}}
.m-break{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.m-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5}
.m-row span{color:#A9B6CC;font-weight:600}
.m-row strong{color:#fff;font-weight:700;font-family:"Outfit",Manrope,sans-serif;font-size:15px;white-space:nowrap}
@media(max-width:960px){.hero-toolwrap .mini{justify-content:flex-start}}
.masbusc-hero{margin-top:auto;padding-top:26px}
.mbh-label{display:block;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8FA0BC;margin:0 0 10px}
.mbh-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}
.mbh-chip{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 6px 11px;color:#fff;font-weight:700;font-size:12px;line-height:1.3;min-width:0;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.mbh-chip:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);text-decoration:none;color:#fff;transform:translateY(-1px)}
.mbh-chip .mbh-tile{width:34px;height:34px;border-radius:10px;background:rgba(45,212,191,.18);border:1px solid rgba(45,212,191,.35);color:#5EEAD4;display:grid;place-items:center;flex:none}
.mbh-chip .mbh-tile svg{width:19px;height:19px}
.mbh-chip .mbh-txt{overflow-wrap:break-word;hyphens:auto}
@media(max-width:960px){.masbusc-hero{margin-top:0}.mbh-grid{grid-template-columns:repeat(2,1fr)}.mbh-chip{flex-direction:row;text-align:left;padding:12px 14px;font-size:13.5px}.mbh-chip:last-child{grid-column:span 2}}
/* trust on dark */
.trust-dark{margin:56px 0 36px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch}
.trust-item{text-align:left;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:22px 26px}
.trust-item+.trust-item{border-left:1px solid rgba(255,255,255,.08)}
.trust-item b{display:block;font-family:"Outfit",Manrope,sans-serif;font-size:34px;font-weight:700;color:#fff;line-height:1.18;margin:12px 0 5px}
.hero .trust-item .trust-label{font-size:13.5px;line-height:1.5;color:#A9B6CC;font-weight:600}
.hero .trust-item .trust-sub{font-size:12.5px;line-height:1.55;color:#8FA0BC;font-weight:500}
.trust-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;margin:0;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.trust-ic svg{width:19px;height:19px}
.hero .trust-note{padding:16px 26px 18px;text-align:left;font-size:13px;color:#8FA0BC;font-weight:500;margin:0;max-width:none;line-height:1.6;border-top:1px solid rgba(255,255,255,.08)}
.trust-label{display:block}
.trust-sub{display:block;margin-top:6px;overflow-wrap:break-word}
@media(max-width:960px){.trust-dark{margin:44px 0 24px}.trust-grid{grid-template-columns:repeat(2,1fr);gap:0}.trust-item{padding:20px 22px}.trust-item+.trust-item{border-left:none}.trust-item:nth-child(2),.trust-item:nth-child(4){border-left:1px solid rgba(255,255,255,.08)}.trust-item:nth-child(3),.trust-item:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}.hero .trust-note{padding:14px 22px 16px}}
/* ---------- Forms ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
label.fl{display:block;font-weight:700;font-size:13px;color:var(--body);margin:0 0 8px;line-height:1.45}
.hint{font-size:13px;line-height:1.55;color:var(--muted);margin-top:6px}
input,select,textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:0 14px;font-size:16px;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#fff;min-height:48px;height:48px;transition:border-color .15s ease,box-shadow .15s ease;font-variant-numeric:tabular-nums}
textarea{height:auto;padding:12px 14px}
input::placeholder{color:#94A3B8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.field{margin-bottom:16px}
#toolForm{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-bottom:8px}
#toolForm .field-wide{grid-column:1/-1}
#toolForm .field{display:flex;flex-direction:column;margin-bottom:0}
#toolForm .field>label.fl{min-height:38px;display:flex;align-items:flex-end;margin:0;padding-bottom:8px}
#toolForm .field>.hint{min-height:34px}
#toolForm .field>input,#toolForm .field>select{flex:none}
@media(max-width:600px){#toolForm{grid-template-columns:1fr}#toolForm .field>label.fl{min-height:0}#toolForm .field>.hint{min-height:0}}
/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);display:flex;flex-direction:column;color:var(--body);height:100%;overflow:hidden;box-shadow:0 1px 2px rgba(7,13,26,.03);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--lift-shadow)}
.card-photo{position:relative;height:150px;overflow:hidden;background:var(--bg-alt);flex:none}
.card-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.card:hover .card-photo img{transform:scale(1.05)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:17px;font-weight:700;line-height:1.4}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--blue);text-decoration:none}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.card>a,.card .links a{font-weight:700;font-size:14px;color:var(--blue)}
.card-link{font-weight:700;font-size:14px;color:var(--blue);display:inline-flex;gap:6px;align-items:center;margin-top:4px}
.card-link:hover{text-decoration:none;color:var(--blue-d)}
.card .links{margin-top:auto;display:flex;flex-direction:column}
.card .links a{display:block;padding:10px 0;border-top:1px solid var(--line-soft);transition:padding-left .15s ease}
.card .links a:hover{text-decoration:none;padding-left:4px}
.card .count{font-weight:700;color:var(--muted);font-size:13px;flex:none}
.card-meta{display:flex;align-items:center;gap:10px}
.mini-tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 4px 10px rgba(7,13,26,.18)}
.mini-tile svg{width:18px;height:18px}
.cat-name{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.caticon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 6px 14px rgba(7,13,26,.20)}
.caticon svg{width:23px;height:23px}
.tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#3730A3;background:#EEF2FF;padding:5px 11px;border-radius:999px;border:0}
.tag-float{position:absolute;left:14px;top:14px;box-shadow:0 4px 12px rgba(7,13,26,.18);background:rgba(238,242,255,.95)}
/* category home cards */
.catcard .card-body{gap:10px;padding:24px}
.catcard .btile-lg{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px rgba(7,13,26,.20)}
.catcard .btile-lg svg{width:27px;height:27px}
/* ---------- Bento showcase ---------- */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.bento>*{min-width:0}
.bcell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:26px;display:flex;flex-direction:column;gap:0;height:100%;min-height:0;overflow:visible;box-shadow:var(--card-shadow);transition:transform .2s ease,box-shadow .2s ease}
.bcell:hover{transform:translateY(-4px);box-shadow:var(--lift-shadow)}
.b-head{display:flex;gap:14px;align-items:flex-start}
.btile{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 6px 14px rgba(7,13,26,.20)}
.btile svg{width:24px;height:24px}
.b-head h3{margin:0 0 4px;font-size:19px}
.b-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
/* bento zones: head / figure / visualisation / caption / links, shared lines per row */
.bz-head{margin:0 0 12px;min-width:0}
.bz-fig{margin:0 0 10px;display:flex;align-items:center;min-width:0}
.bz-fig .b-big{margin:0}
.bz-viz{display:flex;flex-direction:column;justify-content:center;gap:10px;margin:0 0 12px;min-width:0}
.bz-viz .propbar,.bz-viz svg{flex:none}
.bz-cap{margin:0 0 14px;min-width:0}
.bz-cap .b-cap{margin:0}
.bcell .links{margin-top:auto;display:flex;flex-direction:column}
.bcell .links a{font-weight:700;font-size:14px;color:var(--blue);display:block;padding:9px 0;border-top:1px solid var(--line-soft)}
.bcell .links a:hover{text-decoration:none;padding-left:4px}
@media(min-width:961px){
.bz-head{min-height:104px}
.bz-fig{height:42px;flex:none;margin-bottom:10px}
.bz-viz{height:96px;flex:none;margin-bottom:12px}
.bz-cap{min-height:84px}
.bcell .links{height:116px;flex:none}
.bcell .links a{flex:1 1 0;display:flex;align-items:center;padding:6px 0;line-height:1.45}
}
.b-sueldo,.b-hipo,.b-paro,.b-auto{grid-column:span 1}
@media(max-width:960px){.bento{grid-template-columns:1fr}.b-sueldo,.b-hipo,.b-paro,.b-auto{grid-column:span 1}}
.b-big{font-family:"Outfit",Manrope,sans-serif;font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.b-cap{font-size:13px;color:var(--muted);font-weight:600;line-height:1.5}
.propbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--bg-alt);gap:2px}
.pseg{display:block;height:100%;width:0;border-radius:999px;transition:width .7s cubic-bezier(.22,.8,.3,1)}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.legend li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--secondary);font-weight:600}
.legend li b{color:var(--ink)}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.spark{width:100%;height:92px;display:block}
.dni-viz{display:flex;align-items:center;gap:12px}
.dni-num{font-family:"Outfit",Manrope,sans-serif;font-size:19px;font-weight:600;color:var(--secondary);letter-spacing:.06em}
.dni-arrow{color:var(--muted);font-size:20px}
.dni-z{font-family:"Outfit",Manrope,sans-serif;font-size:84px;font-weight:800;line-height:.95;color:var(--blue);letter-spacing:-.03em}
.steps{width:100%;height:64px;display:block}
.t20{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.t20card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 18px;color:var(--ink);height:100%;box-shadow:0 1px 2px rgba(7,13,26,.03);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.t20card:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--lift-shadow);text-decoration:none;color:var(--ink)}
.t20card:active{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--lift-shadow);text-decoration:none;color:var(--ink)}
.t20tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 4px 10px rgba(7,13,26,.18);transition:filter .15s ease}
.t20card:hover .t20tile,.t20card:active .t20tile{filter:brightness(.9) saturate(1.15)}
.t20tile svg{width:22px;height:22px}
.t20txt{display:flex;flex-direction:column;flex:1;min-width:0}
.t20cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.3;margin:0 0 3px;white-space:nowrap}
.t20name{font-family:"Outfit",Manrope,sans-serif;font-weight:600;font-size:15px;line-height:1.33;color:var(--ink);min-height:40px}
.t20desc{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.35;margin-top:3px;min-height:17px}
.t20-more{margin:22px 0 0}
@media(min-width:961px) and (max-width:1180px){.t20name{min-height:60px}.t20desc{min-height:34px}}
@media(max-width:960px){.t20{grid-template-columns:repeat(2,1fr)}}
@media(min-width:601px) and (max-width:720px){.t20name{min-height:60px}.t20desc{min-height:34px}}
@media(max-width:600px){.t20{grid-template-columns:repeat(2,1fr);gap:10px}.t20card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}.t20tile{width:38px;height:38px;border-radius:11px}.t20tile svg{width:20px;height:20px}.t20cat{display:none}.t20name{font-size:13.5px;line-height:1.35;min-height:73px}.t20desc{font-size:11.5px;line-height:1.35;min-height:31px;margin-top:4px}}
/* ---------- Sections ---------- */
section.bloque{padding:88px 0 4px;position:relative}
section.bloque.bloque-home{padding-top:72px}
section.bloque.bloque-home.bloque-first{padding-top:36px}
@media(min-width:961px){section.bloque{padding-top:104px}}
@media(max-width:960px){section.bloque.bloque-home.bloque-first{padding-top:24px}}
.tool-layout~section.bloque{max-width:720px}
.tool-layout~section.bloque:has(.cards){max-width:none}
h2.sect{font-size:28px;margin:0 0 8px}
.sect-head{margin:0 0 28px}
.sect-head .eyebrow{margin-bottom:10px}
.sect-head h2{font-size:32px;margin:0 0 12px}
.sect-head p{color:var(--muted);margin:0;max-width:46em;font-size:16px}
h2.sect.sect-title{font-size:32px;line-height:1.25;letter-spacing:-.015em;font-weight:700;color:var(--ink);margin:0 0 24px}
p.sectsub{color:var(--muted);margin:0 0 24px;max-width:46em}
/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--ink2);border-radius:28px;overflow:hidden;padding:56px 48px;margin:53px 0 0;text-align:left}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(480px 300px at 8% 0%,rgba(37,99,235,.5),transparent 65%),radial-gradient(460px 280px at 92% 100%,rgba(14,165,164,.38),transparent 65%),radial-gradient(380px 260px at 70% -20%,rgba(124,58,237,.4),transparent 65%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;font-size:32px;margin:0 0 10px}
.cta-band p{color:#C7D0E0;margin:0 0 24px;max-width:34em}
@media(max-width:600px){.cta-band{padding:40px 26px;border-radius:22px}}
/* ---------- Tool pages ---------- */
.tool-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:32px}
@media(max-width:960px){.tool-layout{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:26px;box-shadow:var(--card-shadow)}
.panel h2{margin:0 0 8px;font-size:20px;line-height:1.4}
.panel.respanel{padding:0;overflow:hidden;position:sticky;top:88px}
@media(max-width:960px){.panel.respanel{position:static}}
.res-head{background:linear-gradient(120deg,#070D1A 20%,#12275E 78%,#1D4ED8 130%);padding:24px 26px 22px}
.res-cap{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9DB8E8;margin:0 0 8px;font-family:Manrope,system-ui,sans-serif}
.res-head .res-label{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9DB8E8;margin:0 0 8px;font-family:Manrope,system-ui,sans-serif}
.res-head .res-big{display:block}
.res-head .res-big{color:#fff;margin:0}
.res-mid{padding:20px 26px 24px}
.res-mid table{margin:14px 0 18px}
.res-mid #btnCopy{width:100%;margin-top:6px}
.res-foot{padding:0 26px 20px;margin:0}
.panel.respanel .small{color:var(--muted)}
.panel.respanel .err{margin:22px 24px}
.res-big{font-size:30px;font-weight:700;font-family:"Outfit",Manrope,sans-serif;color:var(--ink);line-height:1.2;letter-spacing:-.015em;margin:0 0 8px;font-variant-numeric:tabular-nums}
.res-verde{color:var(--green)}
.viz{margin:2px 0 4px}
.viz .b-cap{margin-top:8px}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut{flex:none}
/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px;margin:16px 0 24px;background:transparent}
th{text-align:left;background:var(--bg-alt);color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--body)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.res-mid td:first-child{color:var(--secondary)}
@media(max-width:600px){table{font-size:13.5px}th,td{padding:8px 6px}}
/* ---------- FAQ ---------- */
details.faq{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;margin:0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:700;padding:20px 32px 20px 0;min-height:48px;font-size:16px;list-style:none;font-family:Manrope,system-ui,sans-serif;color:var(--ink);position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
details.faq[open ] summary::after{transform:translateY(-30%) rotate(225deg)}
details.faq .rta{padding:0 32px 20px 0;color:var(--secondary);font-size:15px;line-height:1.65}
details.faq .rta p{margin:0 0 8px}
/* ---------- Misc components ---------- */
.crumb{font-size:13px;color:var(--muted);padding:24px 0 0;margin:0}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--blue);text-decoration:none}
.note{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;font-size:15px;line-height:1.65;margin:32px 0;color:var(--secondary);max-width:720px;box-shadow:var(--card-shadow)}
.note strong{color:var(--ink)}
.ok{background:#fff;border:1px solid var(--line);color:var(--secondary);border-radius:16px;padding:16px 20px;font-size:14px;line-height:1.6;margin-top:16px;max-width:720px;box-shadow:var(--card-shadow)}
.ok strong{color:var(--ink)}
.err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:12px;padding:16px 20px;font-size:14px;line-height:1.6;margin-top:16px}
.searchbox{position:relative}
.sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;color:var(--ink);border-radius:14px;box-shadow:var(--lift-shadow);overflow:hidden;z-index:60;border:1px solid var(--line);max-height:340px;overflow-y:auto}
.sug a{display:block;padding:12px 16px;color:var(--ink);border-bottom:1px solid var(--line-soft);font-weight:600;font-size:15px}
.sug a:last-child{border-bottom:0}
.sug a:hover{background:var(--bg-alt);text-decoration:none}
.sug a .small{color:var(--muted);font-weight:500;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;cursor:pointer;min-height:40px;font-family:Manrope,system-ui,sans-serif;color:var(--secondary);transition:border-color .15s ease,color .15s ease,background .15s ease}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
/* ---------- Footer ---------- */
footer.site{position:relative;background:var(--footer-bg);color:var(--footer-text);margin-top:72px;padding:64px 0 32px}
footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#2563EB,#7C3AED,#0EA5A4)}
footer.site a{color:var(--footer-text);transition:color .15s ease}
footer.site a:hover{color:#fff;text-decoration:none}
footer.site .wordmark{color:#fff}
footer.site .wordmark b{color:#60A5FA}
footer.site .mark{background:#fff;color:var(--ink)}
footer.site h3{color:#fff;font-size:15px;font-weight:700;margin:0 0 16px}
footer.site p{color:var(--footer-text);font-size:15.5px;line-height:1.62}
.fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
@media(max-width:960px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fcols{grid-template-columns:1fr}}
.fcols a{display:block;padding:2px 0;font-size:16px;margin:7px 0;line-height:1.55}
.ffina{border-top:1px solid #1E293B;color:var(--footer-dim);padding:24px 0 0;font-size:13px;line-height:1.6;margin-top:48px}
footer.site .small{font-size:14px;line-height:1.6}
footer.site .ffina{font-size:14px;line-height:1.6}
/* ---------- Tool intro / category ---------- */
.intro-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:start;margin-top:8px}
.intro-text{display:flex;flex-direction:column}
.intro-text h1{margin:0 0 12px}
.intro-text .lead{color:var(--secondary);font-size:17px;line-height:1.6;max-width:52em;margin:0}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badge{background:#EEF2FF;border:0;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;color:#3730A3;font-family:Manrope,system-ui,sans-serif;display:inline-flex;align-items:center;gap:6px}
.badge svg{width:15px;height:15px;flex:none}
.badge.green{background:#EEF2FF;color:#3730A3}
.visual{margin:0;border-radius:var(--radius-card);overflow:hidden;background:var(--bg-alt);height:252px;border:1px solid var(--line);box-shadow:var(--card-shadow)}
.visual img{width:100%;height:100%;display:block;object-fit:cover}
.visual figcaption{display:none}
.visual-mid{height:230px;margin:0}
.guia-hero{margin:20px 0 6px;max-width:760px;border-radius:var(--radius-card);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);box-shadow:var(--card-shadow);aspect-ratio:16/9}
.guia-hero img{width:100%;height:100%;display:block;object-fit:cover}
.guia-h2{font-size:24px;line-height:1.3;margin:36px 0 10px;max-width:760px}
.guia-hero.contain img{object-fit:contain}
.cat-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start;margin-top:20px}
.cat-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
@media(max-width:600px){.cat-hero-cta{flex-direction:column;align-items:stretch}.cat-hero-cta .btn{width:100%;justify-content:center}}
.cat-photo{margin:0;justify-self:end;width:100%;max-width:540px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--card-shadow);background:var(--bg-alt)}
.cat-photo img{width:100%;height:100%;display:block;object-fit:cover}
.cat-intro h1{margin:0 0 12px}
.cat-intro .lead{color:var(--secondary);font-size:17px;line-height:1.6;margin:0}
.cat-content p{max-width:760px}
.cat-content h3{margin:24px 0 4px;font-size:17px}
.cat-content h3 a{color:var(--ink)}
@media(max-width:820px){.cat-hero{grid-template-columns:1fr;gap:18px}.cat-photo{justify-self:stretch;max-width:none;height:220px;aspect-ratio:auto}}
@media(max-width:700px){.visual-mid{height:190px}}
.mbh-sub{display:none}
@media(max-width:960px){.mbh-chip:last-child{align-items:center}.mbh-chip:last-child .mbh-sub{display:block;font-size:12.5px;font-weight:600;color:#8FA0BC;line-height:1.45;margin-top:3px}}
@media(max-width:700px){.intro-grid{grid-template-columns:1fr;gap:16px}.visual{height:auto}.visual img{height:180px}}
.cat-head{display:flex;gap:18px;align-items:flex-start;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:28px;box-shadow:var(--card-shadow)}
.cat-head .caticon{width:54px;height:54px;border-radius:15px}
.cat-head .caticon svg{width:28px;height:28px}
.cat-head h1{margin:0}
.cat-head p{margin:8px 0 0;color:var(--secondary)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
@media(max-width:600px){.kpi{grid-template-columns:1fr}}
.kpi div{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:20px 24px;box-shadow:var(--card-shadow)}
.kpi b{display:block;font-family:"Outfit",Manrope,sans-serif;font-size:24px;font-weight:700;color:var(--ink)}
ul.clean{margin:0 0 1em;padding-left:22px}
ul.clean li{margin:6px 0}
.small{font-size:13px;line-height:1.6;color:var(--muted);font-weight:500}
.hidden{display:none!important}
#compCCAA{max-width:720px;margin-top:48px}
#compCCAA table{max-width:720px}
@media(max-width:960px){.visual{height:224px}}
@media(max-width:700px){.visual{height:auto}}
/* ---------- Reveal motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
/* ---------- Responsive / type ---------- */
@media(max-width:600px){
.wrap{padding:0 16px}
nav.main{display:none}
.btn-cta{margin-left:auto}
.hd{min-height:64px;gap:12px}
h1{font-size:32px;line-height:1.1875}
.hero{padding:52px 0 0}
.hero h1{font-size:38px}
section.bloque{padding:56px 0 4px}section.bloque.bloque-home{padding-top:48px}section.bloque.bloque-home.bloque-first{padding-top:24px}.sect-head{margin-bottom:20px}.cta-band{margin-top:45px}
.res-big{font-size:24px}
#m_res .res-big{font-size:32px}
footer.site{margin-top:48px;padding:48px 0 32px}
.pill-glass{font-size:12px;padding:7px 12px;letter-spacing:.02em}
.res-head{padding:20px 20px 18px}
.res-mid{padding:16px 20px 20px}
.res-foot{padding:0 20px 18px}
.donut-wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}.reveal{opacity:1;transform:none}}
@media print{header.site,footer.site,.no-print{display:none!important}body{background:#fff}}
/* ---------- Inter-section rhythm: tool & category pages ----------
   section.bloque's 88/104px top padding is a homepage-scale separation.
   On article pages (tools, categories) consecutive content sections stacked
   it on the previous block's bottom margin, opening 104-136px voids between
   sections. Non-home sections therefore carry a compact top padding so the
   total gap from the previous block's last element to the next H2 lands on
   the page standard: ~52px desktop, ~40px mobile. Paragraph and heading
   margins INSIDE blocks are unchanged; homepage sections (bloque-home)
   keep their existing scale. */
section.bloque:not(.bloque-home){padding-top:32px}
@media(max-width:600px){section.bloque:not(.bloque-home){padding-top:24px}}
/* Last-element margins at block boundaries are inter-block spacing too:
   the per-comunidad table (sueldo neto) and the tool-page note box sit
   directly before the next section, so their bottom margins are trimmed
   to land those boundaries on the same standard (52px desktop / 40px
   mobile for the table boundary). Internal table/note spacing elsewhere
   is untouched. */
#compCCAA table{margin-bottom:12px}
section.bloque + .note{margin-bottom:20px}

/* ---------- Gasolineras (precios oficiales) ---------- */
.gas-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;box-shadow:var(--card-shadow);margin-top:26px}
@media(max-width:860px){.gas-controls{grid-template-columns:1fr}}
.gas-controls .field{margin-bottom:0}
.gas-fecha{display:inline-flex;align-items:center;gap:8px;background:#EEF2FF;color:#3730A3;font-weight:700;font-size:13px;border-radius:999px;padding:6px 13px}
.gas-fecha i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.gas-sec{margin-top:44px}
.gas-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.gas-row{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:0 1px 2px rgba(7,13,26,.03)}
.gas-price{font-family:"Outfit",Manrope,sans-serif;font-size:25px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.1;text-align:right}
.gas-price small{display:block;font-family:Manrope,system-ui,sans-serif;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.gas-info{flex:1;min-width:0}
.gas-info strong{color:var(--ink);font-size:16px}
.gas-info p{margin:0;font-size:14px;color:var(--secondary);line-height:1.5;overflow-wrap:anywhere}
.gas-info .gas-meta{color:var(--muted);font-size:13px}
.gas-go{flex:none;font-weight:700;font-size:14px;white-space:nowrap}
@media(max-width:600px){.gas-row{flex-wrap:wrap;gap:8px 14px}.gas-price{font-size:22px;text-align:left}.gas-info{flex-basis:100%;order:3}}
.gas-map{height:380px;border-radius:var(--radius-card);border:1px solid var(--line);margin-top:22px;z-index:0;background:var(--bg-alt)}
@media(max-width:600px){.gas-map{height:300px}}
.gas-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media(max-width:820px){.gas-stats{grid-template-columns:1fr}}
.gas-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(7,13,26,.03)}
.gas-stat span{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gas-stat strong{font-family:"Outfit",Manrope,sans-serif;font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.gas-stat p{margin:4px 0 0;font-size:14px;color:var(--secondary)}
.gas-provlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gas-provlinks a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;color:var(--secondary)}
.gas-provlinks a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.gas-banner{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:22px 24px;box-shadow:var(--card-shadow);margin-top:26px;color:var(--body)}
.gas-banner:hover{text-decoration:none;border-color:var(--line-strong)}
.gas-banner .gb-tile{width:52px;height:52px;border-radius:14px;background:linear-gradient(45deg,#1D4ED8,#0EA5A4);color:#fff;display:grid;place-items:center;flex:none}
.gas-banner .gb-tile svg{width:26px;height:26px}
.gas-banner h3{margin:0 0 4px;font-size:20px}
.gas-banner p{margin:0;font-size:15px;color:var(--secondary)}
.gas-banner .gb-arrow{margin-left:auto;font-weight:800;color:var(--blue);white-space:nowrap;flex:none}
@media(max-width:600px){.gas-banner{flex-wrap:wrap}.gas-banner .gb-arrow{margin-left:0}}
.gas-topgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
@media(max-width:900px){.gas-topgrid{grid-template-columns:1fr}}
.gas-topbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:22px;box-shadow:var(--card-shadow)}
.gas-topbox h3{margin:0 0 6px}
.gas-topbox .gas-list{margin-top:12px}
.gas-topbox .gas-row{box-shadow:none;padding:10px 12px}
.gas-topbox .gas-price{font-size:20px}


/* Wave 3 card-link fix: /calculadoras/ cards wrap the whole card in a card-link anchor (inline-flex row in base CSS), which squeezed the photo and text into a row. Make that link a column flex card so the thumbnail renders on top. */
.cards .card > .card-link{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;color:inherit;text-decoration:none;gap:0}
.cards .card > .card-link img{width:100%;height:auto;display:block;flex:none}
.cards .card > .card-link .tag{align-self:flex-start;margin:14px 18px 0}
.cards .card > .card-link .mini-tile{margin:12px 18px 0}
.cards .card > .card-link .cat-name{margin:6px 18px 0}
.cards .card > .card-link h3{margin:8px 18px 0}
.cards .card > .card-link .desc{margin:8px 18px 0;flex:1}
.cards .card > .card-link .card-cta{margin:12px 18px 18px}

/* Wave 3 card-link important */
.cards .card > .card-link{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;height:100%!important}
.cards .card > .card-link img{width:100%!important;height:auto!important;display:block!important}

/* ---------- QA FIX PASS 2026-11-04 ---------- */
/* A(3) Category card grid: same grid treatment as the /calculadoras/ index cards. */
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.tool-grid .tool-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--card-shadow);display:flex;flex-direction:column;min-width:0}
.tool-grid .tool-card a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.tool-grid .tool-card a:hover{text-decoration:none}
.tool-grid .tool-card img{width:100%;height:auto;display:block;object-fit:cover}
.tool-grid .tool-card .tool-img{overflow:hidden}
.tool-grid .tool-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.tool-grid .tool-card-link h3,.tool-grid .tool-card-link p{padding-left:18px;padding-right:18px}
.tool-grid .tool-card-link h3{padding-top:16px}
@media(max-width:960px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}}
/* C Hero safeguard: long H1s wrap fully beside the hero photo, never overlap or truncate. */
.intro-grid .intro-text{min-width:0}
.intro-grid h1{overflow-wrap:break-word}
.intro-grid .visual{min-width:0}
/* D Copy summary button: shipped secondary button styling, applied by id because the result panel is re-rendered without the .btn classes. */
button#btnCopy{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-btn);padding:0 16px;min-height:40px;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 1px 2px rgba(7,13,26,.05)}
button#btnCopy:hover{background:var(--bg-alt)}
/* ---------- RESPONSIVE FIX PASS 2026-11-04: phone widths, all tool pages ---------- */
@media(max-width:600px){
.wrap{padding-left:16px;padding-right:16px}
.intro-grid,.tool-layout,.cards{grid-template-columns:1fr;min-width:0}
.intro-text,.visual,.panel,.respanel,#resultado,.bloque,#compCCAA,.card{min-width:0;max-width:100%}
.crumb{overflow-wrap:break-word}
h1{font-size:32px;overflow-wrap:break-word}
.lead{font-size:17px}
.visual{height:auto}
.visual img{height:180px;width:100%}
#toolForm{grid-template-columns:1fr;gap:14px}
#toolForm .field,#toolForm .field-wide{min-width:0;grid-column:1/-1}
#toolForm input,#toolForm input[type=date],#toolForm select,#toolForm textarea{width:100%;min-width:0}
#toolForm select{padding-right:40px}
.panel{padding:20px}
#btnCalc{width:100%;justify-content:center}
.respanel{overflow:hidden}
.res-head{padding:20px 20px 18px}
.res-head .res-big{font-size:30px;overflow-wrap:break-word}
#resultado .viz{margin-left:20px;margin-right:20px}
#resultado .res-table{width:calc(100% - 40px);margin:14px 20px 0}
.res-mid table{width:100%}
#resultado .res-table td,.res-mid table td,#compCCAA table td,#compCCAA table th{vertical-align:middle;padding:8px 6px}
#resultado .res-table td:first-child,.res-mid table td:first-child{overflow-wrap:break-word}
#resultado .res-table td:last-child,.res-mid table td:last-child,.res-mid table td.num{white-space:nowrap;text-align:right}
.respanel #resultado>#btnCopy{width:calc(100% - 40px);margin:12px 20px 0}
.respanel .res-mid #btnCopy{width:100%;margin:12px 0 0}
#resultado .res-extra,.respanel .res-foot{margin-left:20px;margin-right:20px}
#compCCAA{margin-top:32px}
#compCCAA table{width:100%;table-layout:auto}
#compCCAA table td:first-child{overflow-wrap:break-word}
#compCCAA table td:nth-child(2),#compCCAA table td:nth-child(3),#compCCAA table th:nth-child(2),#compCCAA table th:nth-child(3){white-space:nowrap;text-align:right}
.bloque{padding:20px;overflow-x:auto}
.bloque table{width:auto;min-width:100%}
.bloque table td,.bloque table th{padding:8px 6px;vertical-align:middle}
.bloque table td:first-child{overflow-wrap:break-word}
.faq details summary{padding:16px}
footer.site{padding:32px 0 24px}
}
@media(max-width:380px){
#compCCAA table{font-size:13px}
#compCCAA table td,#compCCAA table th{padding:8px 4px}
}

/* ---------- RESPONSIVE FIX PASS 2026-11-04, amendment: wide tables inside the result panel ---------- */
@media(max-width:600px){
#resultado table:not(.res-table){display:block;overflow-x:auto;width:calc(100% - 40px);margin:14px 20px 0}
#resultado table:not(.res-table) th.num,#resultado table:not(.res-table) td.num{white-space:nowrap;text-align:right}
#resultado table:not(.res-table) th,#resultado table:not(.res-table) td{vertical-align:middle}
}
/* ---------- ALIGNMENT GRID PASS 2026-11-04: one 20px grid for every rendered result panel ---------- */
/* Why this block exists: the previous pass used .respanel ancestry for the button, nowrap on every last cell (which breaks long text values such as the despido 'Regla aplicada' row), and a footnote margin on top of .res-foot's existing 20px padding (40px inset, not 20px). It also shipped under the frozen ?ver=1.0.2 stylesheet URL, so a returning phone could keep serving the pre-fix file from browser cache. This block therefore targets the elements the binder actually emits, wherever they sit in the panel, with !important geometry, and the stylesheet version is bumped in functions.php. */
@media(max-width:600px){
#resultado .res-head{padding:20px 20px 18px!important}
.respanel #resultado table, #resultado table, table.res-table{width:calc(100% - 40px)!important;margin:14px 20px 0!important;max-width:calc(100% - 40px)!important;box-sizing:border-box!important}
.respanel .res-mid table, .res-mid table{width:100%!important;margin:14px 0 0!important;max-width:100%!important}
#resultado table:not(.res-table){display:block!important;overflow-x:auto!important}
.respanel td, #resultado td, .respanel th, #resultado th{vertical-align:middle!important;padding:8px 6px!important}
.respanel td:first-child, #resultado td:first-child{text-align:left!important;overflow-wrap:break-word!important}
.respanel td:last-child, #resultado td:last-child{text-align:right!important;white-space:normal!important;overflow-wrap:break-word!important}
button#btnCopy, #btnCopy{display:flex!important;width:calc(100% - 40px)!important;max-width:calc(100% - 40px)!important;margin:14px 20px 14px!important;box-sizing:border-box!important;justify-content:center!important;transform:none!important;position:static!important;float:none!important}
.respanel .res-mid #btnCopy{width:100%!important;max-width:100%!important;margin:14px 0 14px!important}
#resultado .res-extra{margin:14px 20px 0!important;padding:0!important}
.respanel .res-foot, .res-foot{margin:0!important;padding:0 20px 18px!important}
#resultado .viz{margin-left:20px!important;margin-right:20px!important}
}

/* DESIGN UPDATE 2026-11-04: gasolineras banner icon + spacing (Motor category). Icon is decorative (aria-hidden in markup); brand blue via var(--blue). */ .gas-banner .gas-banner-icon{flex:none;width:32px;height:32px;color:var(--blue);display:grid;place-items:center;align-self:flex-start;margin-top:2px} .gas-banner .gas-banner-icon svg{width:30px;height:30px;display:block} .gas-banner + #tools{margin-top:26px} @media(max-width:600px){.gas-banner .gas-banner-icon{width:30px;height:30px} .gas-banner .gas-banner-icon svg{width:28px;height:28px} .gas-banner + #tools{margin-top:26px}}