:root{--bg:#f3f5f9;--paper:#ffffff;--fg:#162136;--fg2:#2b3a57;--muted:#566582;--line:#e3e8ef;--accent:#1d4ed8;--card:#f2f5fa;
--sombra:0 1px 2px rgba(22,33,54,.05),0 10px 28px rgba(22,33,54,.07);--r:18px;--amarillo:#fff1c4}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (min-width:760px){body{font-size:20px}}
a{color:var(--accent);text-underline-offset:2px}
header.site{background:var(--paper);border-bottom:1px solid var(--line)}
header.site .in,footer.site .in{max-width:1120px;margin:0 auto;padding:12px 16px}
header.site .in{display:flex;align-items:center;justify-content:space-between;gap:12px}
header.site a.logo{color:var(--fg);text-decoration:none;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}header.site a.logo b{color:var(--accent)}
header.site nav{display:flex;gap:18px;font-size:.85rem}header.site nav a{color:var(--fg2);text-decoration:none}header.site nav a:hover{color:var(--accent)}
@media (min-width:760px){header.site .in{padding:16px}header.site a.logo{font-size:1.1rem}header.site nav{font-size:.8rem;gap:26px}}
.wrap{max-width:1120px;margin:0 auto;padding:14px 12px 40px}
@media (min-width:760px){.wrap{padding:24px 16px 56px}.t-articulo .wrap,.t-legal .wrap{max-width:840px}}
nav.migas{font-size:.78rem;color:var(--muted);margin:0 4px 10px}nav.migas a{color:var(--muted);text-decoration:none}nav.migas a:hover{text-decoration:underline}
article{background:var(--paper);border-radius:var(--r);box-shadow:var(--sombra);padding:40px 64px 48px}
@media (max-width:759px){.t-articulo .wrap,.t-legal .wrap{padding:12px 0 32px}.t-articulo nav.migas,.t-legal nav.migas{margin:0 16px 10px}
article{border-radius:0;box-shadow:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 16px 24px}}
h1{font-size:1.62rem;line-height:1.2;font-weight:800;letter-spacing:-.015em;margin:.1em 0 .25em}
@media (min-width:760px){h1{font-size:2.1rem}}
h2{font-size:1.3rem;line-height:1.3;font-weight:750;letter-spacing:-.01em;margin:1.7em 0 .45em}h3{font-size:1.06rem;line-height:1.35;margin:1.3em 0 .3em}
p{margin:.65em 0}p.meta{font-size:.78rem;color:var(--muted);margin:0 0 1em}
blockquote{margin:1em 0;padding:.55em .9em;border-left:3px solid var(--accent);background:var(--card);border-radius:0 12px 12px 0;color:var(--fg2)}
blockquote.gancho{font-size:.9rem;line-height:1.45;font-style:italic;margin:.5em 0 .7em}blockquote.gancho p{margin:.15em 0}
blockquote footer{font-size:.78rem;font-style:normal;color:var(--muted);margin:.25em 0 0}
.qa{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.75em 1.1em .55em;margin:1.1em 0}
.qa>p:first-child{margin:.1em 0 .2em;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.qa ul{margin:.2em 0 .4em;padding-left:1.15em}.qa li{margin:.3em 0;line-height:1.5}
details.toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.55em .95em;margin:1em 0;font-size:.88rem}
details.toc summary{cursor:pointer;font-weight:650;color:var(--fg2)}details.toc ul{margin:.4em 0 .2em;padding-left:1.1em}details.toc li{margin:.2em 0}
sup.nota{font-size:.62em;line-height:0;vertical-align:super;margin-left:1px}sup.nota a{color:var(--muted);text-decoration:none}
p.fuente{font-size:.78em;color:var(--muted)}p.fuente a{color:var(--muted)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.86rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:1em 0}
th{background:var(--card);font-weight:650}td,th{border-bottom:1px solid var(--line);padding:.5em .65em;text-align:left;vertical-align:top}tr:last-child td{border-bottom:0}
aside.siguiente{background:var(--card);border-radius:16px;margin-top:1.6em;padding:.8em 1.1em}aside.siguiente strong{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
aside.siguiente ul{margin:.4em 0 .2em;padding-left:1.1em}aside.siguiente li{margin:.35em 0}
p.errores{font-size:.8rem;color:var(--muted);margin:2em 0 0}
.ad-slot{min-height:280px;margin:1.6em 0;border:1px dashed #c9d2df;border-radius:14px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:.72rem;text-align:center;padding:1em}
.ad-slot b{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
footer.site{background:var(--paper);border-top:1px solid var(--line)}footer.site .in{font-size:.8rem;line-height:1.8;color:var(--muted);padding:18px 16px 26px}footer.site a{color:var(--muted)}
p.piloto{background:#b91c1c;color:#fff;font-weight:700;padding:.5em .8em;border-radius:6px;margin:.6em 0}
/* inicio y grupos */
.hero{background:linear-gradient(135deg,#e3eeff 0%,#f4f8ff 55%,#fff6e0 100%);border-radius:24px;box-shadow:var(--sombra);padding:26px 20px}
@media (min-width:760px){.hero{padding:44px 48px}}
.hero h1{font-size:2.1rem;margin:0 0 .2em}.hero h1 span{color:var(--accent)}@media (min-width:760px){.hero h1{font-size:2.8rem}}
.hero{text-align:center}.hero p.lema{font-size:1.02rem;color:var(--fg2);margin:.3em auto 1.1em;max-width:32em}
.botones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:.62em 1.15em;border-radius:12px;font-weight:650;font-size:.9rem;text-decoration:none}
.btn.primario{background:var(--accent);color:#fff}.btn.secundario{background:var(--amarillo);color:var(--fg)}
.rejilla{display:grid;gap:16px;margin:16px 0}
@media (min-width:640px){.r2,.r3{grid-template-columns:repeat(2,1fr)}}@media (min-width:960px){.r3{grid-template-columns:repeat(3,1fr)}}
.tarjeta{background:var(--paper);border-radius:var(--r);box-shadow:var(--sombra);padding:18px 20px;display:flex;flex-direction:column;overflow:hidden}
.tarjeta h3{margin:0 0 .35em;font-size:1rem;line-height:1.3}.tarjeta h3 a{color:var(--fg);text-decoration:none}.tarjeta h3 a:hover{color:var(--accent)}
.tarjeta p{margin:0 0 .8em;color:var(--muted);font-size:.82rem;line-height:1.5;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.tarjeta a.mas{font-size:.8rem;font-weight:650;color:var(--accent);text-decoration:none}
.etiqueta{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .45em}
h2.seccion{text-align:center;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;margin:2.2em 0 .3em;color:var(--fg)}
.cabecera-grupo{background:var(--paper);border-radius:var(--r);box-shadow:var(--sombra);padding:22px 20px}
@media (min-width:760px){.cabecera-grupo{padding:32px 40px}}
.cabecera-grupo h1{margin:.15em 0 .3em}.cabecera-grupo p{color:var(--fg2);margin:0;font-size:.92rem;max-width:44em}
/* D93 (24-oct): recuadros del siguiente paso, verde muy claro (sitio.py 1.15) */
.paso-siguiente{border:1px solid #cbecd8;border-left:4px solid #16a34a;border-radius:12px;padding:.65em 1em .55em;margin:1.2em 0;background:#ecfaf1}
.paso-siguiente .etiqueta{color:#15803d;margin-bottom:.25em}
.paso-siguiente ul{margin:.3em 0 .1em;padding-left:1.1em}.paso-siguiente li{margin:.3em 0}
.paso-siguiente a.flecha{font-weight:600}.paso-siguiente a.flecha::after{content:" \2192"}

body{line-height:1.6}@media (min-width:760px){body{font-size:18px}}

details.menu{position:relative;display:inline-block}details.menu summary{list-style:none;cursor:pointer;color:var(--fg2)}
details.menu summary::-webkit-details-marker{display:none}details.menu summary::after{content:"";display:inline-block;margin-left:6px;vertical-align:2px;
border:4px solid transparent;border-top:5px solid currentColor;border-bottom:0}details.menu[open] summary{color:var(--accent)}
details.menu .desplegable{position:absolute;top:calc(100% + 14px);right:-14px;z-index:20;background:var(--paper);border:1px solid var(--line);border-radius:14px;
box-shadow:0 12px 32px rgba(22,33,54,.14);padding:8px;display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:2px;width:max-content}
details.menu .desplegable a{display:block;padding:.5em .8em;border-radius:10px;color:var(--fg);text-decoration:none;font-size:.88rem;line-height:1.35}
details.menu .desplegable a:hover,details.menu .desplegable a:focus{background:var(--card);color:var(--accent)}
details.menu .desplegable a.todos{grid-column:1/-1;color:var(--accent);font-weight:650;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px}
@media (max-width:759px){details.menu .desplegable{position:fixed;top:56px;left:12px;right:12px;width:auto;grid-template-columns:1fr}
header.site nav{gap:14px}}
a.cta{display:block;width:fit-content;max-width:100%;margin:.9em 0 .2em;padding:.8em 1.3em;min-height:48px;background:#c2410c;color:#fff;font:600 1.05rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.2)}a.cta::after{content:" \2192"}a.cta:hover{background:#9a3412}a.cta:focus-visible{outline:3px solid #fdba74;outline-offset:2px}@media (max-width:600px){a.cta{width:100%;text-align:center}}
/* D101 (24-oct): las herramientas dentro del artículo (A «Before you sign» y B «Roof Quote Decoder»). Son las reglas de
   plantilla_herramienta.html y plantilla_comparador.html, limitadas a section.tool, solo en modo claro (D88) y con el azul del sitio.
   sitio.py las añade a styles.css cuando config.json → herramientas_interactivas tiene páginas. */
section.tool{--bg:#ffffff;--ok:#166534;--warn:#9a3412;--warn-bg:#fff7ed;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:.4em 1em 1em;margin:1.4em 0;font-size:.95em;line-height:1.5}
section.tool h2{margin:.6em 0 .3em;font-size:1.2em}
section.tool h3{font-size:1.02em;margin:1.1em 0 .3em}
section.tool p.tool-intro{margin:.2em 0 .8em}
section.tool fieldset{border:0;padding:0;margin:0 0 1em}
section.tool legend{font-weight:700;padding:0;margin-bottom:.35em}
section.tool .ops{display:flex;flex-direction:column;gap:6px}
section.tool .ops label{display:flex;align-items:center;gap:.6em;min-height:48px;padding:.45em .7em;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer}
section.tool .ops input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--accent)}
section.tool .ops label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
section.tool .ops input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
section.tool input.num{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;min-height:48px;padding:.4em .6em;width:100%;max-width:16em}
section.tool p.ayuda{color:var(--muted);font-size:.9em;margin:.2em 0 .5em}
section.tool table.grid{width:100%;border-collapse:collapse;table-layout:fixed;margin:.3em 0 1em}
section.tool table.grid th,section.tool table.grid td{border-bottom:1px solid var(--line);padding:.35em .25em;vertical-align:middle;text-align:left}
section.tool table.grid thead th{font-size:.95em}
section.tool table.grid th[scope=row]{font-weight:500;font-size:.9em;line-height:1.3;width:38%}
section.tool table.cmp th[scope=row]{width:30%}
section.tool table.grid input[type=text],section.tool table.grid input[type=number],section.tool table.grid select{font:inherit;font-size:.95em;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;min-height:44px;padding:.3em .35em;width:100%}
section.tool table.grid input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent)}
section.tool table.grid td.chk{text-align:center}
section.tool table.grid .solo{display:block;color:var(--muted);font-size:.8em}
section.tool .money{position:relative}section.tool .money span{position:absolute;left:.4em;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.9em;pointer-events:none}section.tool .money input{padding-left:1.1em!important}
section.tool .col-C{display:none}section.tool .con-C .col-C{display:table-cell}
section.tool input:focus-visible,section.tool select:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
section.tool button.tool-btn{font:700 1rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:48px;padding:.6em 1.1em;border-radius:8px;border:2px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
section.tool button.tool-btn.sec{background:transparent;color:var(--accent)}
section.tool button.tool-btn:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
section.tool .acciones{display:flex;flex-wrap:wrap;gap:8px;margin:.6em 0}
section.tool #tool-result{margin-top:1em}
/* 25-oct (prueba del operador): el resultado recibe el foco para los lectores de pantalla, pero sin el marco negro del navegador */
section.tool #tool-result:focus{outline:none}
/* 25-oct: las partidas «replacement only» de un presupuesto de reparación, apagadas; y las fuentes que solo salen al imprimir */
section.tool td.apagada{opacity:.3}
section.tool .solo-impresion{display:none}
section.tool #tool-result ul{padding-left:1.2em;margin:.3em 0}
section.tool #tool-result li{margin:.35em 0}
section.tool ul.check{list-style:none;padding-left:0!important}
section.tool ul.check li{display:flex;gap:.6em;align-items:flex-start}
section.tool ul.check input{width:22px;height:22px;margin-top:.15em;flex:0 0 auto;accent-color:var(--accent)}
section.tool .bloque-aviso{background:var(--warn-bg);border-radius:8px;padding:.1em .8em .4em}
section.tool .bloque-aviso h3{color:var(--warn)}
section.tool p.titular{font-weight:700;font-size:1.1em;line-height:1.4;margin:.4em 0}
section.tool p.titular + p.titular{font-weight:500;font-size:1em;margin-top:0}
section.tool table.cmp{width:100%;border-collapse:collapse;font-size:.92em;margin:.6em 0}
section.tool table.cmp th,section.tool table.cmp td{border:1px solid var(--line);padding:.35em .45em;text-align:left;vertical-align:top}
section.tool table.cmp thead th{background:var(--bg)}
section.tool textarea{width:100%;min-height:9em;font:1rem/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6em}
section.tool .msg-print{display:none}
section.tool p.estado{font-size:.9em;color:var(--ok);min-height:1.4em;margin:.2em 0}
section.tool p.siguiente{border-top:1px solid var(--line);padding-top:.6em;margin:.4em 0}
section.tool ol.fuentes{font-size:.82em;color:var(--muted);padding-left:1.4em}section.tool ol.fuentes a{color:var(--muted)}
section.tool .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* D101 (5a, 5b): la línea del recuadro de arriba que baja a la herramienta, y la nota de los recuadros que llevan a una página con herramienta */
.paso-siguiente .en-pagina{display:block;margin-top:.35em;font-size:.92em}
.paso-siguiente .con-herramienta{display:block;color:var(--muted);font-size:.85em;line-height:1.35}
/* D101 (R2 de D56): «Print this list» imprime solo la herramienta; Ctrl+P sigue imprimiendo la página entera */
@media print{
html.imprime-herramienta header.site,html.imprime-herramienta footer.site,html.imprime-herramienta nav.migas,html.imprime-herramienta article>:not(.herramienta){display:none!important}
html.imprime-herramienta article{box-shadow:none!important;border:0!important;padding:0!important;margin:0!important}
html.imprime-herramienta body{background:#fff;font-size:12pt}
html.imprime-herramienta section.tool{border:0;background:none;padding:0;margin:0}
html.imprime-herramienta section.tool form,html.imprime-herramienta section.tool .acciones,html.imprime-herramienta section.tool .no-print,html.imprime-herramienta section.tool p.siguiente,html.imprime-herramienta section.tool textarea,html.imprime-herramienta section.tool p.estado{display:none!important}
html.imprime-herramienta section.tool .solo-impresion{display:block!important;font-size:9pt;line-height:1.35;overflow-wrap:anywhere}
html.imprime-herramienta section.tool .solo-impresion p{margin:.15em 0}
html.imprime-herramienta section.tool .msg-print{display:block!important;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #999;border-radius:6px;padding:.5em .6em;margin:.3em 0 .8em;font:11pt/1.45 system-ui,sans-serif}
}