/* ============================================================
   Plumbing Explained — design system
   Palette: "bluestone and ochre". Bluestone is the dark blue-grey
   basalt you see in Melbourne kerbs and old Australian buildings —
   it reads as solid, technical and unexcitable, which is the tone
   this niche needs. Ochre is the warm Australian earth red used
   only for accents and safety callouts.
   Distinct from every sister blog: no other blog in the network
   pairs a blue-grey brand with ochre (Amianto uses rust orange,
   Calefaccion ember, Electricidad copper, Banos teal, Averias
   deep maroon).
   ============================================================ */
:root{
  --bg:#F4F2EE;
  --surface:#FFFFFF;
  --surface-2:#E7E4DE;
  --ink:#1C2226;
  --ink-soft:#525C63;
  --ink-faint:#879097;
  --brand:#2C4149;        /* bluestone — brand */
  --brand-ink:#F6F4F0;
  --brand-soft:#DDE3E5;
  --stone:#A8571F;        /* ochre — accents and safety callouts */
  --stone-soft:#F6E3D4;
  --graphite:#525C63;
  --graphite-soft:#E7E4DE;
  --line:#D5D1C9;
  --warn:#9C3B22;
  --warn-soft:#F7DED6;
  --ok:#2F6B4F;
  --ok-soft:#DCEAE1;
  --shadow:0 1px 2px rgba(31,33,29,.07), 0 10px 28px -14px rgba(31,33,29,.24);
  --radius:14px;
  --wrap:1080px;
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14181B;
    --surface:#1C2226;
    --surface-2:#262E33;
    --ink:#ECEAE5;
    --ink-soft:#B5BDC3;
    --ink-faint:#868E95;
    --brand:#9EB6BE;
    --brand-ink:#14181B;
    --brand-soft:#2A353B;
    --stone:#E39A61;
    --stone-soft:#3A2417;
    --graphite:#B5BDC3;
    --graphite-soft:#262E33;
    --line:#313A40;
    --warn:#E8967A;
    --warn-soft:#3A1E16;
    --ok:#79C09A;
    --ok-soft:#16281F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --bg:#14181B; --surface:#1C2226; --surface-2:#262E33;
  --ink:#ECEAE5; --ink-soft:#B5BDC3; --ink-faint:#868E95;
  --brand:#9EB6BE; --brand-ink:#14181B; --brand-soft:#2A353B;
  --stone:#E39A61; --stone-soft:#3A2417; --graphite:#B5BDC3; --graphite-soft:#262E33;
  --line:#313A40; --warn:#E8967A; --warn-soft:#3A1E16; --ok:#79C09A; --ok-soft:#16281F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.65);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* --- Tipografía display --- */
h1,h2,h3,h4{
  font-family:"Archivo",system-ui,"Segoe UI",sans-serif;
  font-weight:700;line-height:1.14;letter-spacing:-.01em;margin:0 0 .4em;
}
h1{font-size:clamp(2rem,1.3rem + 3vw,3rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2rem);margin-top:1.6em}
h3{font-size:1.25rem;margin-top:1.4em}
p,ul,ol{margin:0 0 1.1em}
.prose{max-width:var(--measure)}
.prose h2,.prose h3{scroll-margin-top:90px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.35em 0}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:60ch}
.eyebrow{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}

/* --- Header + nav --- */
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .bar{display:flex;align-items:center;gap:16px;padding:12px 20px;max-width:var(--wrap);margin:0 auto}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo .dot{width:14px;height:14px;border-radius:50%;background:var(--brand);position:relative;flex:none}
.logo .dot::after{content:"";position:absolute;inset:3px 3px 3px 3px;border-radius:50%;background:var(--brand-ink);opacity:.35}
nav.primary{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px}
nav.primary a{padding:7px 10px;border-radius:8px;color:var(--ink-soft);text-decoration:none;font-size:.93rem;font-weight:500;white-space:nowrap}
nav.primary a:hover{background:var(--surface-2);color:var(--ink)}
nav.primary a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}
.menu-toggle{display:none;appearance:none;border:none;background:transparent;width:40px;height:40px;padding:0;cursor:pointer;position:relative;border-radius:6px;color:var(--ink);margin-left:auto}
.menu-toggle span{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle span:nth-child(1){top:14px}.menu-toggle span:nth-child(2){top:19px}.menu-toggle span:nth-child(3){top:24px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:980px){
  nav.primary{margin-left:0}
  .menu-toggle{display:block}
  header.site .bar{flex-wrap:wrap}
  nav.primary{order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;max-height:0;overflow:hidden;transition:max-height .25s ease}
  nav.primary.open{max-height:820px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  nav.primary a{padding:10px}
}

/* --- Hero / secciones --- */
.hero{padding:56px 0 40px}
.hero .lead{margin-top:.6em}
main{padding:36px 0 20px;display:block}
section{margin:44px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head a{font-weight:600;font-size:.95rem}

/* --- Grids de tarjetas --- */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.card a.card-title{color:var(--ink);text-decoration:none;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1.08rem;line-height:1.25;letter-spacing:-.01em}
.card a.card-title:hover{color:var(--brand)}
.card p{margin:0;color:var(--ink-soft);font-size:.96rem}
.card .kicker{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}

.pillars{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pillar{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .12s ease}
.pillar:hover{transform:translateY(-2px)}
.pillar strong{font-family:"Archivo",system-ui,sans-serif;font-size:1.05rem;display:block;letter-spacing:-.01em}
.pillar span{color:var(--ink-faint);font-size:.9rem}

/* --- Chips / tags --- */
.tag{display:inline-block;font-weight:600;font-size:.8rem;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.tag.stone{background:var(--stone-soft);color:var(--stone)}
.tag.graphite{background:var(--graphite-soft);color:var(--graphite)}

/* --- Callout (ojo al cierre </div>, no </p>) --- */
.callout{background:var(--surface-2);border-left:3px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:22px 0}
.callout.stone{border-color:var(--stone)}
.callout.warn{border-color:var(--warn)}

/* --- Tablas dentro de prosa --- */
.table-scroll{overflow-x:auto;margin:18px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:480px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
th{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}

/* --- Breadcrumb --- */
.crumbs{font-size:.85rem;color:var(--ink-faint);margin:22px 0 6px}
.crumbs a{color:var(--ink-faint)}

/* --- Meta de artículo --- */
.article-meta{color:var(--ink-faint);font-size:.9rem;margin:0 0 1.4em}

/* --- Footer --- */
footer.site{background:var(--surface);border-top:1px solid var(--line);margin-top:70px}
footer.site .wrap{padding:40px 20px}
footer.site h3{font-size:1rem;margin:0 0 10px}
.foot-grid{display:grid;gap:28px;grid-template-columns:2fr 1fr 1fr}
.foot-grid nav{display:flex;flex-direction:column;gap:6px}
.foot-grid nav a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
.foot-grid nav a:hover{color:var(--ink)}
.foot-bottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-bottom a{color:var(--ink-faint)}
.foot-link{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:var(--ink-faint);text-decoration:underline;cursor:pointer}
.foot-link:hover{color:var(--ink)}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr}}

/* --- Botón --- */
.btn{display:inline-block;background:var(--brand);color:var(--brand-ink);text-decoration:none;font-weight:700;padding:11px 20px;border-radius:10px;font-size:.98rem}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}

/* --- Aviso de afiliación --- */
.aff-note{background:var(--brand-soft);color:var(--brand);border-radius:10px;padding:10px 14px;font-size:.86rem;margin:0 0 1.4em}
:root:not([data-theme="light"]) .aff-note{color:var(--ink-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aff-note{color:var(--ink-soft)}}

/* --- Quiz / test de elección --- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin:22px 0}
.calc .row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.calc label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600;color:var(--ink-soft);flex:1;min-width:120px}
.calc input,.calc select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:1rem}
.calc .result{background:var(--brand-soft);color:var(--brand);border-radius:10px;padding:16px 18px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1.15rem}
.calc .result span{font-size:1.7rem;display:block;margin-top:2px}

/* --- Banner de cookies (Consent Mode v2) --- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;
  max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.cookie-banner.hidden{display:none}
.cookie-banner .wrap{max-width:none;padding:0}
.cookie-banner p{margin:0 0 12px;font-size:.92rem;color:var(--ink-soft)}
.cookie-banner p a{color:var(--brand)}
.cookie-banner .actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner button{appearance:none;border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink);font:inherit;font-weight:600;font-size:.9rem;padding:9px 16px;
  border-radius:10px;cursor:pointer}
.cookie-banner button.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.cookie-banner button:hover{filter:brightness(0.97)}
@media(max-width:480px){.cookie-banner{left:10px;right:10px;bottom:10px;padding:16px}}