/* ============================================================
   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:#F2F4F4;
  --surface:#FFFFFF;
  --surface-2:#E6E5E1;
  --ink:#1A2124;
  --ink-soft:#4E5A60;
  --ink-faint:#828E94;
  --brand:#1F4E5F;        /* marea — azul de agua profunda */
  --brand-ink:#F4F8F8;
  --brand-soft:#D8E4E8;
  --stone:#A8571E;        /* oxido — segundo acento, rampa de los 10 pilares */
  --stone-soft:#F6E3D3;
  --graphite:#4E5A60;
  --graphite-soft:#E4E6E4;
  --line:#D4D2CD;
  --warn:#A8331F;
  --warn-soft:#F7DFD8;
  --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:#12181A;
    --surface:#1F2327;
    --surface-2:#2A2F34;
    --ink:#E9EEEF;
    --ink-soft:#B0BCC1;
    --ink-faint:#839096;
    --brand:#8FBDCC;
    --brand-ink:#12181A;
    --brand-soft:#23383F;
    --stone:#DE9A62;
    --stone-soft:#3A2415;
    --graphite:#B0BCC1;
    --graphite-soft:#23282A;
    --line:#313940;
    --warn:#E5917A;
    --warn-soft:#3A1C15;
    --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:#12181A; --surface:#1B2326; --surface-2:#252F33;
  --ink:#E9EEEF; --ink-soft:#B0BCC1; --ink-faint:#839096;
  --brand:#8FBDCC; --brand-ink:#12181A; --brand-soft:#23383F;
  --stone:#DE9A62; --stone-soft:#3A2415; --graphite:#B0BCC1; --graphite-soft:#23282A;
  --line:#313940; --warn:#E5917A; --warn-soft:#3A1C15; --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}}


/* ============================================================
   CAPA DE DISEÑO v2 — 10-sep-2026
   ------------------------------------------------------------
   Bloque PORTABLE: es idéntico en los 19 blogs. Todo lo que
   cambia de un blog a otro vive en el :root de la paleta, que
   está arriba en el styles.css de cada blog y NO se toca.

   No usa ninguna imagen, ninguna fuente nueva y ninguna
   petición de red: solo gradientes, SVG en data-URI y color-mix.
   Peso: ~7 KB sin comprimir, ~2 KB con gzip. Cero peticiones.

   Regla dura: no toca ni un título, ni un enlace, ni un dato
   estructurado, ni una URL. Solo presentación.

   Se aplica con  python scripts/aplicar_diseno.py <Blog> --aplicar
   ============================================================ */
:root{
  /* El 2º color del blog, se llame como se llame en su paleta */
  --accent-2: var(--stone, var(--amber, var(--graphite)));
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 2px 4px rgba(0,0,0,.04), 0 18px 44px -20px rgba(0,0,0,.30);
  --radius-lg:20px;
}
/* clip y no hidden: recorta el sangrado del hero sin romper el
   position:sticky de la cabecera, que es lo que pasa con hidden */
body{overflow-x:clip}

/* ============ HERO ============ */
.hero{position:relative;padding:76px 0 66px;margin:0 0 14px}
/* ⚠️ El -36px (que come el padding-top de <main> para que el panel del
   hero pegue con la cabecera) SOLO vale cuando el hero ABRE la página,
   o sea en la home. En los hubs el hero va DESPUÉS de las migas, y ese
   margen negativo arrastraba el panel —y el h1 de dentro— ENCIMA de
   ellas: 225 páginas con el título pisando la miga (fallo del
   10-sep-2026, detectado por Javi el 12-sep). */
main > .wrap > .hero:first-child{margin-top:-36px}
/* Los hubs traen un `style="padding-top:8px"` en línea que gana a la
   hoja de estilos y deja el h1 pegado al borde del panel. Como no se
   puede sobreescribir sin !important, el aire se da por abajo de las
   migas y por el propio panel. */
main > .wrap > .hero:not(:first-child){padding-bottom:44px}
main > .wrap > .crumbs + .hero::before{border-top:1px solid var(--line)}
/* 4 tarjetas destacadas caben en una fila dentro del wrap de 1080;
   con 260px se quedaban en 3 + una huerfana. */
.cards{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.hero::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:
    radial-gradient(60% 120% at 88% 12%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(50% 100% at 4% 96%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-2), var(--bg));
  border-bottom:1px solid var(--line);
}
/* Trama geométrica muy tenue: da textura sin competir con el texto.
   Cada blog puede sobreescribir --hero-pattern en su paleta. */
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background-image:var(--hero-pattern, repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 14px));
  color:var(--ink);opacity:.035;
  -webkit-mask-image:linear-gradient(200deg, #000 0%, transparent 62%);
          mask-image:linear-gradient(200deg, #000 0%, transparent 62%);
}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--surface);border:1px solid var(--line);
  padding:5px 13px;border-radius:999px;box-shadow:var(--shadow-sm);
  margin:0 0 1.1em;
}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.hero h1{max-width:19ch}
.hero .lead{max-width:56ch;font-size:1.24rem}

/* ============ TÍTULOS DE SECCIÓN ============ */
.section-head{align-items:center;margin-bottom:22px}
.section-head h2{position:relative;padding-left:16px}
.section-head h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:3px;
  background:linear-gradient(180deg, var(--brand), var(--accent-2));
}
.section-head a{
  display:inline-flex;align-items:center;gap:.4em;text-decoration:none;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--brand);
}
.section-head a::after{content:"\2192";transition:transform .15s ease}
.section-head a:hover{border-color:var(--brand)}
.section-head a:hover::after{transform:translateX(3px)}

/* ============ TARJETAS ============ */
.cards{gap:20px}
.card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:22px 22px 24px;box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--brand), var(--accent-2));opacity:.85;
}
.card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in oklab, var(--brand) 35%, var(--line));
}
/* ⚠️ Contraste (15-sep-2026): el color era `var(--ink-faint)` y daba 3,45:1 sobre la
   tarjeta blanca — PageSpeed lo marcó como fallo de accesibilidad y el mínimo WCAG AA
   para texto normal es 4,5:1 (12px en negrita NO cuenta como texto grande). Mezclando el
   propio `--ink` del blog con su propio `--bg` al 70 % sube a ~6:1 y sigue leyéndose como
   secundario. Medido en el navegador, no estimado.
   ⚠️ Se mezcla con `var(--bg)` y NO con `#fff` a propósito: con blanco, en modo oscuro el
   color se iba hacia el blanco y las migas quedaban igual de claras que el texto normal
   (16:1), perdiendo la jerarquía. Con el fondo del propio blog funciona en los dos temas.
   Los 21 definen `--bg`, comprobado: si algún blog futuro no lo definiera, el `color-mix`
   sería inválido y el color caería al `--ink-faint` de antes, que es el que fallaba. */
.card .kicker{display:flex;align-items:center;gap:.55em;color:color-mix(in srgb, var(--ink) 70%, var(--bg))}
.card .kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}
.card a.card-title{font-size:1.12rem}
.card:hover a.card-title{color:var(--brand)}

/* ============ PILARES ============ */
/* Cada pilar toma un tono interpolado entre los DOS colores del
   blog. Siempre dentro de la paleta, nunca un arcoíris, y sale
   distinto en cada uno de los 19 sin escribir una línea extra. */
.pillars{gap:16px}
.pillar{
  position:relative;padding:20px 22px 20px 24px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  --pi:var(--brand);
}
.pillar::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:0 4px 4px 0;background:var(--pi);
  transition:top .16s ease, bottom .16s ease;
}
.pillar strong{margin-bottom:.22em}
.pillar:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in oklab, var(--pi) 40%, var(--line));
}
.pillar:hover::before{top:6px;bottom:6px}
.pillar:hover strong{color:var(--pi)}
.pillars .pillar:nth-child(1){--pi:color-mix(in oklab, var(--brand) 100%, var(--accent-2))}
.pillars .pillar:nth-child(2){--pi:color-mix(in oklab, var(--brand)  89%, var(--accent-2))}
.pillars .pillar:nth-child(3){--pi:color-mix(in oklab, var(--brand)  78%, var(--accent-2))}
.pillars .pillar:nth-child(4){--pi:color-mix(in oklab, var(--brand)  67%, var(--accent-2))}
.pillars .pillar:nth-child(5){--pi:color-mix(in oklab, var(--brand)  56%, var(--accent-2))}
.pillars .pillar:nth-child(6){--pi:color-mix(in oklab, var(--brand)  45%, var(--accent-2))}
.pillars .pillar:nth-child(7){--pi:color-mix(in oklab, var(--brand)  34%, var(--accent-2))}
.pillars .pillar:nth-child(8){--pi:color-mix(in oklab, var(--brand)  23%, var(--accent-2))}
.pillars .pillar:nth-child(9){--pi:color-mix(in oklab, var(--brand)  12%, var(--accent-2))}
.pillars .pillar:nth-child(10){--pi:color-mix(in oklab, var(--brand)   0%, var(--accent-2))}

/* ============ LISTA DE ENLACES ============ */
/* Sustituye al <ul> con viñetas de «Últimas guías». Requiere
   añadir class="linklist" a ese <ul> del index.html. */
ul.linklist{
  list-style:none;padding:0;margin:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
ul.linklist li{margin:0;border-top:1px solid var(--line)}
ul.linklist li:first-child{border-top:0}
ul.linklist a{
  display:flex;align-items:center;gap:14px;padding:15px 20px;
  text-decoration:none;color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.02rem;
  line-height:1.3;letter-spacing:-.01em;
  transition:background .14s ease,color .14s ease;
}
ul.linklist a::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--brand);
  opacity:.5;transition:opacity .14s ease,transform .14s ease;
}
ul.linklist a::after{
  content:"\2192";margin-left:auto;color:var(--ink-faint);flex:none;
  font-family:"Inter",system-ui,sans-serif;font-weight:400;
  transition:transform .16s ease,color .14s ease;
}
ul.linklist a:hover{background:var(--surface-2);color:var(--brand)}
ul.linklist a:hover::before{opacity:1;transform:scale(1.25)}
ul.linklist a:hover::after{transform:translateX(4px);color:var(--brand)}

/* ============ PROSA DEL ARTÍCULO ============ */
.prose > p:first-of-type{font-size:1.09rem;color:var(--ink-soft)}
.prose h2{padding-top:.4em;border-top:1px solid var(--line)}
.prose h2:first-child{border-top:0;padding-top:0}
.prose ul li::marker{color:var(--brand)}
.prose ol li::marker{color:var(--brand);font-weight:700}
.prose a{text-decoration-color:color-mix(in oklab, var(--brand) 45%, transparent)}
.prose a:hover{text-decoration-color:var(--brand)}

/* Callouts con icono (SVG en data-URI, 0 peticiones) */
.callout{
  position:relative;border-left-width:4px;padding:18px 22px 18px 54px;
  border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow-sm);
}
.callout::before{
  content:"";position:absolute;left:20px;top:19px;width:20px;height:20px;
  background:currentColor;color:var(--brand);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.4'/%3E%3C/svg%3E");
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.callout.warn::before{
  color:var(--warn);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 1.8 20.4h20.4z'/%3E%3Cpath d='M12 10v4.2M12 17.3v.3'/%3E%3C/svg%3E");
}
.callout.stone::before{color:var(--accent-2)}
.callout strong:first-child{
  display:block;margin-bottom:.15em;
  font-family:"Fraunces",Georgia,serif;font-size:1.05rem;
}

/* Tablas */
.table-scroll{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;background:var(--surface);-webkit-overflow-scrolling:touch}
.table-scroll table{margin:0}
/* Red de seguridad móvil (revisión 11-sep-2026): la base pone table{min-width:480px} y en un
   móvil de 375 px una tabla SUELTA (sin .table-scroll) sobresalía ~105 px y quedaba cortada
   por body{overflow-x:clip}. Los generadores ya envuelven todas; esto cubre lo que escriba
   una rutina sin envolver. Solo actúa sobre tablas hijas directas de .prose/.calc. */
@media (max-width:640px){
  .prose>table,.calc>table,.result>table{min-width:0;width:100%;table-layout:auto}
  .prose>table th,.prose>table td,.calc>table th,.calc>table td{overflow-wrap:anywhere;hyphens:auto}
}
th{background:var(--surface-2);color:var(--ink-soft);font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in oklab, var(--brand) 4%, transparent)}

/* Bloque de fuentes */
ul.fuentes li{border-left-color:color-mix(in oklab, var(--brand) 45%, var(--line))}

/* ============ MIGAS ============ */
/* Flujo en línea, no flex (revisión móvil 11-sep-2026): con flex-wrap cada «›» era un
   ítem propio y en móvil saltaba solo al principio de la línea siguiente. */
/* ⚠️ Mismo arreglo de contraste que el kicker: las migas heredaban `--ink-faint` del
   styles.css del blog y daban 3,14:1 sobre el fondo de página. Con `--ink` al 70 % suben
   a ~5,5:1. Esta regla va DESPUÉS de la del blog, así que gana sin `!important`. */
.crumbs{display:block;line-height:1.7;margin:20px 0 10px;word-spacing:.1em;color:color-mix(in srgb, var(--ink) 70%, var(--bg))}
.crumbs a{text-decoration:none;white-space:nowrap;color:color-mix(in srgb, var(--ink) 70%, var(--bg))}
.crumbs a:hover{color:var(--brand);text-decoration:underline}

/* ============ BOTONES ============ */
.btn{
  padding:13px 24px;border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 10px 22px -12px color-mix(in oklab, var(--brand) 75%, transparent);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* ============ CABECERA ============ */
header.site{
  backdrop-filter:saturate(1.4) blur(8px);
  background:color-mix(in oklab, var(--surface) 88%, transparent);
}
nav.primary a{transition:background .14s ease,color .14s ease}
nav.primary a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}

/* ============ PIE ============ */
footer.site{background:linear-gradient(180deg, var(--surface), var(--surface-2))}
footer.site h3{position:relative;padding-bottom:.5em}
footer.site h3::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--accent-2));
}
.foot-grid nav a{padding:2px 0;transition:color .14s ease,transform .14s ease}
.foot-grid nav a:hover{color:var(--brand);transform:translateX(3px)}
/* Pulsables del pie en móvil (revisión 11-sep-2026): los enlaces medían 28 px de alto y
   iban pegados; a un dedo le hacen falta ~44 px. */
@media (max-width:720px){
  .foot-grid nav a{display:block;padding:10px 0;border-bottom:1px solid color-mix(in oklab, var(--line) 60%, transparent)}
  .foot-grid nav a:last-child{border-bottom:0}
  .foot-grid nav a:hover{transform:none}
}

/* ============ ACCESIBILIDAD ============ */
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover,.pillar:hover,.btn:hover{transform:none}
}