/* ==== FUENTES LOCALES (07-oct-2026, scripts/fuentes_locales_blogs.py) ====
   Antes venían de Google Fonts (bloqueaban el primer pintado). Las «Fallback» son
   Arial/Georgia ajustadas a la medida de cada fuente: el cambio de fuente no mueve el
   texto (CLS). No precargar las woff2: compiten con el CSS.
   Origen: https://fonts.googleapis.com/css2?family=Archivo:wght@600;700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap */
/* Archivo 600-700 normal · latin */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/archivo-600-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Archivo 600-700 normal · latin-ext */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/archivo-600-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Source Sans 3 400 italic · latin */
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/source-sans-3-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Source Sans 3 400 italic · latin-ext */
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/source-sans-3-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Source Sans 3 400-700 normal · latin */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Source Sans 3 400-700 normal · latin-ext */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo Fallback";font-style:normal;font-weight:100 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");size-adjust:98.4%;ascent-override:89.3%;descent-override:21.3%;line-gap-override:0.0%}
@font-face{font-family:"Archivo Fallback";font-style:normal;font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");size-adjust:98.4%;ascent-override:89.2%;descent-override:21.3%;line-gap-override:0.0%}
@font-face{font-family:"Source Sans 3 Fallback";font-style:normal;font-weight:100 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");size-adjust:93.3%;ascent-override:109.7%;descent-override:42.9%;line-gap-override:0.0%}
@font-face{font-family:"Source Sans 3 Fallback";font-style:normal;font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");size-adjust:91.9%;ascent-override:111.4%;descent-override:43.5%;line-gap-override:0.0%}
:root{--font-body:"Source Sans 3","Source Sans 3 Fallback",system-ui,sans-serif;--font-display:"Archivo","Archivo Fallback",system-ui,sans-serif}
/* ==== FIN FUENTES LOCALES ==== */

/* ============================================================
   Agua y Casa — sistema de diseño
   Paleta: "agua y piedra" — azul verdoso de agua de pozo sobre un
   fondo de piedra caliza, con un ocre de tierra como acento. Del
   nicho (vivienda unifamiliar y rural), y distinta del azul acero de
   Pared al Día, del cemento de Guía del Amianto y del hierro fundido
   de Calefacción al Día.
   ============================================================ */
:root{
  --bg:#F2F4F3;
  --surface:#FFFFFF;
  --surface-2:#E0E7E6;
  --ink:#182220;
  --ink-soft:#4C5A57;
  --ink-faint:#7F8C89;
  --brand:#2C6560;        /* añil / noche */
  --brand-ink:#EEF6F5;
  --brand-soft:#D5E6E3;
  --stone:#A9762F;        /* lavanda — 2º color, acentos */
  --stone-soft:#F3E7D2;
  --graphite:#4C5A57;
  --graphite-soft:#E0E7E6;
  --line:#CFD9D7;
  --warn:#A9522A;
  --warn-soft:#F3DED2;
  --ok:#39795F;
  --ok-soft:#D9EBE2;
  --shadow:0 1px 2px rgba(24,34,32,.07), 0 10px 28px -14px rgba(24,34,32,.24);
  --radius:14px;
  --wrap:1080px;
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12181D;
    --surface:#1A222A;
    --surface-2:#222C35;
    --ink:#E9EEF2;
    --ink-soft:#B4C2CD;
    --ink-faint:#84939F;
    --brand:#7FB8D6;
    --brand-ink:#0E1A22;
    --brand-soft:#24333E;
    --stone:#D9AE64;
    --stone-soft:#2D2618;
    --graphite:#B4C2CD;
    --graphite-soft:#222C35;
    --line:#2B3742;
    --warn:#E08A64;
    --warn-soft:#33200F;
    --ok:#79C4A8;
    --ok-soft:#122822;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --bg:#12181D; --surface:#1A222A; --surface-2:#222C35;
  --ink:#E9EEF2; --ink-soft:#B4C2CD; --ink-faint:#84939F;
  --brand:#7FB8D6; --brand-ink:#0E1A22; --brand-soft:#24333E;
  --stone:#D9AE64; --stone-soft:#2D2618; --graphite:#B4C2CD; --graphite-soft:#222C35;
  --line:#2B3742; --warn:#E08A64; --warn-soft:#33200F; --ok:#79C4A8; --ok-soft:#122822;
  --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","Source Sans 3 Fallback",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","Archivo Fallback",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","Archivo Fallback",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","Archivo Fallback",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","Archivo Fallback",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","Archivo Fallback",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}}

/* --- Bloque de fuentes (añadido 09-sep-2026) --- */
.fuentes-nota{color:var(--ink-soft);font-size:.88rem;margin:0 0 .8em}
ul.fuentes{list-style:none;padding-left:0;margin:0 0 1.6em}
ul.fuentes li{border-left:3px solid var(--line);padding:.35em 0 .35em .9em;margin:0 0 .55em;font-size:.94rem}
ul.fuentes cite{font-style:normal;color:var(--ink-soft)}
ul.fuentes a{overflow-wrap:anywhere}


/* ============================================================
   CAPA DE DISEÑO v4 — 07-oct-2026
   ------------------------------------------------------------
   Bloque PORTABLE: idéntico en los 24 blogs. Todo lo que cambia
   de un blog a otro vive arriba, en su styles.css: el :root de la
   paleta y el bloque FUENTES LOCALES (--font-body / --font-display);
   y, detrás de esta capa, lo que aplicar_diseno.py pega si existe:
   scripts-build/fichas-foto.css (generado) y estilo-propio.css.

   v3 = proceso de ~/.claude/proceso-diseno-web.md sin tocar HTML.
   v4 = lo genérico del piloto de Café con Notas, con las variables
   de cada paleta: hero a dos columnas cuando la ilustración es FOTO,
   antetítulo convertido en firma bajo el botón, tarjetas sin borde
   con su etiqueta al pie, franja de temas, pie oscuro calculado con
   la tinta y la marca del blog, un único momento de movimiento
   (las fichas de temas al hacer scroll) y contraste AA en los grises.

   Sin imágenes, fuentes ni peticiones de red propias.
   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)));
  /* Ese 2º color PARA TEXTO pequeño: oscurecido con la tinta en claro, aclarado en oscuro.
     Una paleta que no llegue a 4,5:1 define su propio --accent-2-text en su :root… pero
     como esta capa va detrás, lo hace en su estilo-propio.css. */
  --accent-2-text: color-mix(in oklab, var(--accent-2) 62%, var(--ink));

  /* Espaciado: escala fija. El 24 es el único paso intermedio (relleno de tarjeta). */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-card:24px;
  --space-4:32px; --space-5:64px; --space-6:128px;

  /* Texto: escala de pasos (el cuerpo es 17 px en la base de cada blog) */
  --text-xs:.8125rem; --text-sm:.875rem; --text-md:1rem;
  --text-lg:1.1875rem; --text-xl:1.375rem;
  --tracking-display:-.03em;          /* las fuentes estrechas lo suben en su estilo-propio */

  /* Movimiento */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-1:120ms; --dur-2:180ms;

  /* Superficie: radios contenidos; sombras de dos capas teñidas con la tinta del blog */
  --radius:10px;
  --radius-lg:14px;
  --surface:color-mix(in oklab, #fff 72%, var(--bg));   /* blanco templado: nunca blanco puro sobre un papel de color */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 1px 2px rgba(0,0,0,.05), 0 12px 32px -16px rgba(0,0,0,.28);
  --sombra-tarjeta:0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 14px 32px -18px color-mix(in srgb, var(--ink) 34%, transparent);
  --sombra-foto:0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 28px 56px -28px color-mix(in srgb, var(--ink) 55%, transparent);
  --banda:var(--surface-2);         /* oscurecerla con tinta bajaba de 4,5:1 en Cortinas y Asbestos Explained */

  /* Grises con contraste AA: la base usa --ink-faint (3,1-3,6:1 en casi todos los blogs) */
  --ink-2:color-mix(in srgb, var(--ink) 72%, var(--bg));
  --ink-faint:color-mix(in srgb, var(--ink) 68%, var(--bg));

  /* Pie oscuro: la tinta del blog con un toque de su marca; texto en el papel del blog */
  --pie-fondo:color-mix(in oklab, var(--ink) 90%, var(--brand));
  --pie-tinta:var(--bg);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink-faint:color-mix(in srgb, var(--ink) 68%, var(--bg));
    --sombra-tarjeta:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.7);
    --sombra-foto:0 2px 4px rgba(0,0,0,.4), 0 28px 56px -28px rgba(0,0,0,.8);
    --banda:color-mix(in oklab, var(--bg), #000 18%);
    --pie-fondo:color-mix(in oklab, var(--bg), #000 45%);
    --pie-tinta:var(--ink);
  }
}
/* 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}
/* La paleta cambia con prefers-color-scheme: que lo sepan también las barras y los campos nativos. */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
/* La cabecera es sticky: al saltar a un ancla o tabular, que no tape lo enfocado. */
html{scroll-padding-top:88px}
/* Las superficies que pinta el navegador también llevan la paleta. */
::selection{background:color-mix(in oklab, var(--accent-2) 30%, transparent);color:var(--ink)}
:root{caret-color:var(--brand);accent-color:var(--brand);scrollbar-color:color-mix(in oklab, var(--ink) 30%, transparent) transparent}

/* ============ TIPOGRAFÍA ============ */
h1,h2,h3{text-wrap:balance;font-optical-sizing:auto}
.prose p,.prose li,.lead,.card p{text-wrap:pretty}
h1{letter-spacing:var(--tracking-display);line-height:1.04}
h2{letter-spacing:calc(var(--tracking-display) * .75)}
.section-head h2,main > .wrap > section > h2{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.4rem)}
.prose h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.25rem);line-height:1.08}

/* ============ CABECERA ============ */
/* El logo se partía en dos líneas («Adiós / Humedades») y los 10 pilares del menú
   no cabían en el ancho del contenido (1.040 px): salían en dos filas. La barra se
   ensancha a 1.240 px y, por debajo de 1.180 px, el menú pasa a la hamburguesa. */
header.site{
  backdrop-filter:saturate(1.4) blur(8px);
  background:color-mix(in oklab, var(--surface) 90%, transparent);
}
header.site .bar{max-width:calc(var(--wrap) + 160px);gap:var(--space-3)}
.logo{white-space:nowrap;flex:none}
nav.primary{gap:0 var(--space-1)}
nav.primary a{padding:6px 10px;font-size:var(--text-sm);border-radius:var(--space-2)}
nav.primary a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
@media (min-width:1181px){
  nav.primary{flex-wrap:nowrap;justify-content:flex-end}
}
/* Mismas reglas que la base pone a ≤980 px, ampliadas hasta 1.180 px.
   nav.js abre y cierra con la clase .open a cualquier ancho. */
@media (max-width:1180px){
  .menu-toggle{display:block}
  header.site .bar{flex-wrap:wrap}
  nav.primary{margin-left:0;order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;max-height:0;overflow:hidden;transition:max-height .25s var(--ease-out)}
  nav.primary.open{max-height:820px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  nav.primary a{padding:10px;font-size:var(--text-md)}
}

/* Color de marca PARA TEXTO y botones. Por defecto es la marca tal cual; las paletas cuyo
   --brand no llega a 4,5:1 sobre sus fondos claros (Baños, Cortinas, Suelos, medido el
   07-oct-2026) definen en su :root un --brand-text mezclado con --ink. Aquí NO se define:
   si se definiera, pisaría el de la paleta. */
a{color:var(--brand-text, var(--brand))}
.calc .result,.calc .result a{color:var(--brand-text, var(--brand))}
.btn:not(.ghost),.cookie-banner button.primary{background:var(--brand-text, var(--brand));border-color:var(--brand-text, var(--brand))}
.tag.amber{color:var(--accent-2-text)}

/* ============ HERO ============ */
.hero{position:relative;padding:var(--space-5) 0;margin:0 0 var(--space-3)}
/* ⚠️ 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 dejaba el h1 pegado al borde
   del panel: solo !important lo puede corregir sin tocar el HTML. */
main > .wrap > .crumbs + .hero{padding-top:var(--space-4)!important;padding-bottom:var(--space-4)}
main > .wrap > .crumbs + .hero::before{border-top:1px solid var(--line)}
/* Fondo del hero: un plano de la superficie del blog que se funde con la página. */
.hero::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 70%, var(--bg)), var(--bg));
  border-bottom:1px solid var(--line);
}
.hero::after{content:none}
.hero h1{font-size:clamp(2.4rem,1.5rem + 3vw,3.9rem);max-width:15em}
main > .wrap > .crumbs + .hero h1{font-size:clamp(2.25rem,1.4rem + 2.8vw,3.5rem)}
.hero .lead{max-width:58ch;font-size:var(--text-xl);line-height:1.55;color:var(--ink-soft)}
.hero > p:has(> .btn){margin-top:var(--space-4)!important}   /* el <p> del botón trae un margin-top en línea */
/* El antetítulo encima del h1 era la etiqueta de plantilla más reconocible: pasa a ser
   una línea de firma discreta debajo del botón. Mismo texto, mismo HTML, otro sitio. */
.hero:has(> .eyebrow){display:flex;flex-direction:column}
.hero .eyebrow{
  order:9;display:flex;align-items:center;gap:var(--space-2);
  margin:var(--space-3) 0 0;font-size:var(--text-xs);color:var(--ink-2);letter-spacing:.12em;
}
.hero .eyebrow::before{content:"";width:24px;height:2px;background:var(--accent-2);flex:none}
/* FOTOS en el hero: con sombra profunda y pie en cursiva. Los ESQUEMAS no: llevan texto y
   necesitan todo el ancho para leerse. */
.hero .ilus.foto{border:0;border-radius:var(--space-3);box-shadow:var(--sombra-foto);background:var(--surface)}
.hero .ilus.foto > figcaption{border-top:0;font-style:italic;background:var(--surface)}
/* A dos columnas SOLO si la única ilustración es una foto (Piscina al Día lleva esquema Y foto en
   la portada: a dos columnas se montaban una encima de otra): texto a la izquierda y foto a la derecha, en vez de una foto
   a todo el ancho que empujaba el botón fuera de la primera pantalla. Mismo HTML: solo grid. */
@media (min-width:960px){
  .hero:has(> figure.ilus.foto):not(:has(> figure.ilus.esquema)){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--space-5);align-items:center;
  }
  .hero:has(> figure.ilus.foto):not(:has(> figure.ilus.esquema)) > *{grid-column:1}
  .hero:has(> figure.ilus.foto):not(:has(> figure.ilus.esquema)) > figure.ilus{grid-column:2;grid-row:1 / span 8;margin:0;align-self:center}
  .hero:has(> figure.ilus.foto):not(:has(> figure.ilus.esquema)) h1{max-width:none;font-size:clamp(2.2rem,1.3rem + 2.2vw,3.1rem)}
  .hero:has(> figure.ilus.foto):not(:has(> figure.ilus.esquema)) .lead{font-size:var(--text-lg)}
}
@media (max-width:640px){
  .hero{padding:var(--space-4) 0}
  .hero .lead{font-size:var(--text-lg)}
}

/* ============ TÍTULOS DE SECCIÓN ============ */
.section-head{align-items:baseline;margin-bottom:var(--space-3);gap:var(--space-3)}
.section-head a{
  display:inline-flex;align-items:center;gap:var(--space-1);text-decoration:none;
  color:var(--brand-text, var(--brand));font-size:var(--text-sm);font-weight:600;
}
.section-head a::after{content:"\2192";transition:transform var(--dur-2) var(--ease-out)}
section{margin:var(--space-5) 0}

/* ============ TARJETAS ============ */
/* Sin borde ni barra: superficie y una sombra teñida con la tinta del blog. La etiqueta
   («Guía», «Presión»…) baja al pie de la tarjeta como dato, en vez de ir encima del título. */
.cards{grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:var(--space-3)}
/* La sombra de «levantar» va en un ::after con opacidad: así la transición solo anima
   opacity y transform, nunca box-shadow. isolation crea el contexto para el z-index:-1. */
.card,.pillar{position:relative;isolation:isolate}
.card::after,.pillar::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:var(--shadow-lg);opacity:0;transition:opacity var(--dur-2) var(--ease-out);
}
.card{
  border:0;background:var(--surface);box-shadow:var(--sombra-tarjeta);
  border-radius:var(--radius-lg);padding:var(--space-card);gap:var(--space-2);
  transition:transform var(--dur-2) var(--ease-out);
}
.card::before{content:none}
/* ⚠️ Contraste (15-sep-2026): el kicker con `--ink-faint` daba 3,45:1. Ahora va en el
   2º color del blog oscurecido para texto (--accent-2-text), medido ≥ 4,5:1 en los 24. */
.card .kicker{
  order:9;margin-top:auto;padding-top:var(--space-2);
  display:flex;align-items:center;gap:var(--space-2);
  color:var(--accent-2-text);font-size:var(--text-sm);font-weight:600;text-transform:none;letter-spacing:0;
}
.card .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none}
.card a.card-title{font-size:1.2rem;line-height:1.22;font-weight:700;letter-spacing:-.015em}
/* Toda la tarjeta pulsable sin tocar el HTML. Solo si el título es un enlace: las fichas
   del directorio de Café (título <strong>) llevan otros enlaces dentro. */
.card a.card-title::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card p{line-height:1.55;color:var(--ink-soft)}

/* ============ TEMAS ============
   La sección de los pilares va sobre una franja de la superficie del blog. Las fichas son
   de texto con una pastilla del tono del pilar; los blogs con foto real en sus 10 temas
   las convierten en fichas con foto en scripts-build/fichas-foto.css (generado). */
section:has(> .pillars){position:relative;padding:var(--space-5) 0}
section:has(> .pillars)::before{
  content:"";position:absolute;z-index:-1;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);
  background:var(--banda);
}
.pillars{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}
.pillar{
  padding:20px var(--space-card) 20px calc(var(--space-card) + 18px);
  border:0;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--sombra-tarjeta);
  transition:transform var(--dur-2) var(--ease-out);
  --pi:var(--brand);
}
/* La pastilla de color del pilar (antes una barra gruesa a la izquierda, que es la marca
   de plantilla más vista en tarjetas). */
.pillar::before{
  content:"";position:absolute;left:var(--space-card);top:27px;width:10px;height:10px;
  border-radius:3px;background:var(--pi);
  transition:transform var(--dur-2) var(--ease-out);
}
.pillar strong{margin-bottom:var(--space-1);letter-spacing:-.01em}
/* `--ink-faint` en la descripción daba ~3,4:1; con --ink-2 pasa de 4,5:1. */
.pillar span{display:block;color:var(--ink-2);line-height:1.5;font-size:var(--text-sm)}
.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))}
/* La franja de temas puede cerrar la página: sin hueco de papel entre ella y el pie. */
main:has(> .wrap > section:last-child > .pillars){padding-bottom:0}
main > .wrap > section:last-child:has(> .pillars){margin-bottom:0}
main:has(> .wrap > section:last-child > .pillars) + footer.site{margin-top:0}

/* El único momento de movimiento con autor: al entrar en pantalla, cada ficha sube un poco,
   escalonadas por columna. Se anima `translate` (no `transform`, para no pisar el levantado
   del hover) y nunca la opacidad del texto: su contraste es siempre el real, también para
   Lighthouse. Sin soporte de animaciones ligadas al scroll, simplemente no se anima. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pillars .pillar{animation:pilar-sube linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .pillars .pillar:nth-child(5n+2){animation-range:entry 6% entry 76%}
    .pillars .pillar:nth-child(5n+3){animation-range:entry 12% entry 82%}
    .pillars .pillar:nth-child(5n+4){animation-range:entry 18% entry 88%}
    .pillars .pillar:nth-child(5n+5){animation-range:entry 24% entry 94%}
  }
}
@keyframes pilar-sube{from{translate:0 24px}to{translate:none}}

/* ============ LISTA DE ENLACES ============ */
/* El <ul> de «Últimas guías» de la home lleva class="linklist". */
ul.linklist{
  list-style:none;padding:0;margin:0;background:var(--surface);
  border:0;border-radius:var(--radius-lg);
  box-shadow:var(--sombra-tarjeta);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:var(--space-3);padding:var(--space-3) 20px;
  text-decoration:none;color:var(--ink);
  font-family:var(--font-display, inherit);font-weight:700;font-size:var(--text-md);
  line-height:1.3;letter-spacing:-.01em;
}
ul.linklist a::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--accent-2);
  opacity:.6;transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
ul.linklist a::after{
  content:"\2192";margin-left:auto;color:var(--ink-2);flex:none;
  font-family:var(--font-body, inherit);font-weight:400;
  transition:transform var(--dur-2) var(--ease-out);
}

/* ============ PROSA DEL ARTÍCULO ============ */
.prose{line-height:1.7}
.prose > p:first-of-type{font-size:var(--text-lg);line-height:1.6;color:var(--ink-soft)}
.prose h2{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose h3{margin-top:var(--space-4)}
.prose ul li::marker{color:var(--accent-2)}
.prose ol li::marker{color:var(--accent-2-text);font-weight:700}
.prose a{text-decoration-color:color-mix(in oklab, var(--brand) 45%, transparent);text-decoration-thickness:1px;text-underline-offset:3px}
.article-meta{color:var(--ink-2)}

/* Avisos: fondo propio y borde fino (sin la barra gruesa de color a la izquierda), con
   icono en SVG de data-URI (0 peticiones). */
.callout{
  position:relative;padding:var(--space-3) 20px var(--space-3) 52px;
  border:1px solid color-mix(in oklab, var(--line) 80%, transparent);border-radius:var(--radius-lg);
  background:color-mix(in oklab, var(--surface-2) 70%, var(--surface));box-shadow:none;
  margin:var(--space-card) 0;
}
.callout::before{
  content:"";position:absolute;left:20px;top:19px;width:18px;height:18px;
  background:currentColor;color:var(--accent-2-text);
  --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-text)}
.callout strong:first-child{
  display:block;margin-bottom:var(--space-1);
  font-family:var(--font-display, inherit);font-size:var(--text-md);
}

/* Tablas */
.table-scroll{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;background:var(--surface);-webkit-overflow-scrolling:touch;margin:var(--space-card) 0}
.table-scroll table{margin:0}
/* Red de seguridad móvil (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}. 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,td{padding:10px var(--space-3)}
th{background:var(--surface-2);color:var(--ink-soft);font-weight:700}
td{font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}

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

/* ============ MIGAS ============ */
/* Flujo en línea, no flex (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;color:var(--ink-2)}
.crumbs a{text-decoration:none;white-space:nowrap;color:var(--ink-2)}
.crumbs a:hover{color:var(--brand);text-decoration:underline}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:12px var(--space-card);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform var(--dur-1) var(--ease-out);
}
.btn::after{content:"\2192";transition:transform var(--dur-2) var(--ease-out)}
.btn:active{transform:scale(.97)}
.cookie-banner button{transition:transform var(--dur-1) var(--ease-out)}
.cookie-banner button:active{transform:scale(.97)}

/* ============ PIE OSCURO ============
   Cierra la página. Redefine los colores DENTRO del pie (tinta = papel del blog, fondo =
   su tinta con un toque de marca), así cada regla de la capa sigue valiendo con contraste. */
footer.site{
  --ink:var(--pie-tinta);
  --ink-soft:color-mix(in srgb, var(--pie-tinta) 84%, var(--pie-fondo));
  --ink-2:color-mix(in srgb, var(--pie-tinta) 76%, var(--pie-fondo));
  --ink-faint:color-mix(in srgb, var(--pie-tinta) 70%, var(--pie-fondo));
  --line:color-mix(in srgb, var(--pie-tinta) 16%, var(--pie-fondo));
  --brand:color-mix(in oklab, var(--accent-2) 55%, var(--pie-tinta));
  --brand-text:var(--brand);
  --surface:var(--pie-fondo);--surface-2:var(--pie-fondo);
  background:var(--pie-fondo);color:var(--ink);border-top:0;margin-top:var(--space-5);
}
footer.site h3{position:relative;padding-bottom:var(--space-2);font-family:var(--font-display, inherit);color:var(--ink)}
footer.site h3::after{
  content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;
  background:var(--accent-2);
}
footer.site .logo{color:var(--ink)}
/* ⚠️ Contraste (07-oct-2026): la base pinta el pie con `--ink-faint`; aquí son los grises del pie. */
.foot-bottom,.foot-bottom a,.foot-link,.cmp-count,.dir-count{color:var(--ink-2)}
.cookie-banner p a{color:var(--brand-text, var(--brand))}
.foot-grid nav a{padding:2px 0;transition:transform var(--dur-2) var(--ease-out)}
/* Pulsables del pie en móvil (11-sep-2026): 28 px de alto y pegados; un dedo pide ~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}
}

/* ============ ILUSTRACIONES (23-sep-2026) ============
   El <figure> reserva el hueco con aspect-ratio antes de que cargue nada y el <img>
   lleva width/height: cero salto de maquetación (CLS). WebP + lazy, salvo la primera. */
.ilus{
  margin:var(--space-card) 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface-2, var(--surface));
  border:1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.ilus > img{
  display:block;width:100%;height:auto;
  background:color-mix(in oklab, var(--line) 30%, transparent);
}
/* Las fotos, a 16:9. Los esquemas NO llevan aspect-ratio en CSS: así vale la proporción de sus
   width/height y el hueco se reserva antes de que carguen (con `aspect-ratio:auto` no se
   reservaba y lo de debajo saltaba: CLS 0,06-0,08 en las portadas de Humedades y Suelos). */
.ilus:not(.esquema) > img{aspect-ratio:16/9;object-fit:cover}
/* Los esquemas propios son SVG: no se recortan, se ven enteros y con aire. */
.ilus.esquema{background:var(--surface)}
.ilus.esquema > img{object-fit:contain;padding:var(--space-3)}
.ilus > figcaption{
  padding:10px var(--space-3) 12px;
  font-size:var(--text-sm);line-height:1.45;color:var(--ink-2);
  border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent);
}
.ilus .credito{opacity:.8;font-size:.94em}
.ilus .credito a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:720px){
  .ilus{margin:20px -4px;border-radius:var(--radius)}
  .ilus > figcaption{padding:var(--space-2) 12px 10px;font-size:var(--text-xs)}
}

/* ============ HOVER: solo con ratón ============ */
/* En móvil un :hover se queda «pegado» tras tocar; por eso todo el hover va aquí dentro. */
@media (hover:hover) and (pointer:fine){
  .card:has(a.card-title):hover,.pillar:hover{transform:translateY(-3px)}
  .card:has(a.card-title):hover::after,.pillar:hover::after{opacity:1}
  .card:has(a.card-title):hover a.card-title{color:var(--brand-text, var(--brand))}
  .card:not(:has(a.card-title)):hover{transform:none}
  .pillar:hover::before{transform:scale(1.3)}
  .pillar:hover strong{color:var(--brand-text, var(--brand))}
  .section-head a:hover::after{transform:translateX(3px)}
  ul.linklist a:hover{background:var(--surface-2);color:var(--brand-text, var(--brand))}
  ul.linklist a:hover::before{opacity:1;transform:scale(1.3)}
  ul.linklist a:hover::after{transform:translateX(4px);color:var(--brand-text, var(--brand))}
  .prose a:hover{text-decoration-color:var(--brand);text-decoration-thickness:2px}
  tbody tr:hover{background:color-mix(in oklab, var(--brand) 4%, transparent)}
  .btn:hover{transform:translateY(-1px)}
  .btn:hover::after{transform:translateX(3px)}
  .btn:hover:active{transform:translateY(0) scale(.97)}
  .foot-grid nav a:hover{color:var(--brand);transform:translateX(3px)}
}
/* Respuesta al tocar en pantallas táctiles: un leve hundimiento, sin hover pegado. */
@media (hover:none){
  .pillar:hover,.btn:hover{transform:none}     /* la base los levanta en :hover */
  .card:has(a.card-title):active,.pillar:active{transform:scale(.99)}
}

/* ============ MÓVIL NATIVO ============ */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,input[type=radio],input[type=checkbox]{touch-action:manipulation}
/* iOS amplía la página al enfocar un campo de menos de 16 px. */
@media (pointer:coarse){
  input,select,textarea{font-size:max(16px,1em)}
}

/* ============ 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;scroll-behavior:auto!important}
  /* Fuera los desplazamientos; se quedan los fundidos cortos (opacity). */
  .card,.pillar,.btn,.btn::after,.pillar::before,.foot-grid nav a,ul.linklist a::before,ul.linklist a::after,
  .section-head a::after,.cookie-banner button,nav.primary{transition:none!important}
  .card:hover,.pillar:hover,.btn:hover,.btn:active,.card:active,.pillar:active,
  .foot-grid nav a:hover,.cookie-banner button:active,.btn:hover::after{transform:none!important}
  .pillar:hover::before,ul.linklist a:hover::before,ul.linklist a:hover::after,
  .section-head a:hover::after{transform:none!important}
}