/* ============================================================
   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:#F3F3F1;
  --surface:#FFFFFF;
  --surface-2:#E6E5E1;
  --ink:#1F2327;
  --ink-soft:#555E66;
  --ink-faint:#888F96;
  --brand:#3E4C55;        /* cemento — brand */
  --brand-ink:#F7F7F5;
  --brand-soft:#DFE3E6;
  --stone:#C18A00;        /* amarillo de senalizacion — acentos y avisos */
  --stone-soft:#F8EBC9;
  --graphite:#555E66;
  --graphite-soft:#E6E5E1;
  --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:#15181A;
    --surface:#1F2327;
    --surface-2:#2A2F34;
    --ink:#ECEBE8;
    --ink-soft:#B6BCC2;
    --ink-faint:#878E94;
    --brand:#A9BAC3;
    --brand-ink:#15181A;
    --brand-soft:#2B353B;
    --stone:#E6B93E;
    --stone-soft:#3A2E10;
    --graphite:#B6BCC2;
    --graphite-soft:#2A2F34;
    --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:#15181A; --surface:#1F2327; --surface-2:#2A2F34;
  --ink:#ECEBE8; --ink-soft:#B6BCC2; --ink-faint:#878E94;
  --brand:#A9BAC3; --brand-ink:#15181A; --brand-soft:#2B353B;
  --stone:#E6B93E; --stone-soft:#3A2E10; --graphite:#B6BCC2; --graphite-soft:#2A2F34;
  --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 ============ */
/* -36px come el padding-top de <main>: asi el panel del hero pega
   con la cabecera en vez de dejar una franja muerta de fondo. */
.hero{position:relative;padding:76px 0 66px;margin:-36px 0 14px}
/* 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));
}
.card .kicker{display:flex;align-items:center;gap:.55em;color:var(--ink-faint)}
.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. */
.crumbs{display:block;line-height:1.7;margin:20px 0 10px;word-spacing:.1em}
.crumbs a{text-decoration:none;white-space:nowrap}
.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}
}