/* ═══════════ MDC Digital — base compartida ═══════════
   La usan la home y /anuncios, encima de editorial.css: fuentes propias,
   curvas de movimiento, superficies del navegador, header y botones.
   /comercios, /salud y /profesionales todavía no la cargan. */

/* Fuentes propias, recortadas al castellano: 126 KB en lugar de los 309 KB
   de Google Fonts, y sin ir a otro dominio antes de dibujar el texto. */
@font-face{font-family:'Newsreader';src:url(/fonts/newsreader.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(/fonts/newsreader-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Mulish';src:url(/fonts/mulish.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
/* Respaldo con el mismo ancho mientras bajan (sin precarga: el texto se dibuja
   antes y casi no salta cuando llega la fuente). */
@font-face{font-family:'Newsreader fb';src:local('Times New Roman'),local('Times'),local('Liberation Serif');size-adjust:104%;ascent-override:73.5%;descent-override:26.5%;line-gap-override:0%}
@font-face{font-family:'Mulish fb';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:104%;ascent-override:100.5%;descent-override:25%;line-gap-override:0%}

:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);       /* entradas y hovers */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);   /* lo que se mueve en pantalla */
  --serif:'Newsreader','Newsreader fb',serif; --sans:'Mulish','Mulish fb',sans-serif;
  --ink-quiet:#665C50;  /* reemplaza a --mut en texto chico: 4.8:1 sobre crema 2 */
  --sombra-papel:0 1px 2px rgba(45,32,26,.10),0 18px 40px -22px rgba(45,32,26,.45);
  --sombra-alta:0 2px 4px rgba(45,32,26,.10),0 34px 60px -26px rgba(45,32,26,.55);
}

/* papel: un grano muy tenue sobre el crema, para que no se lea como pantalla lisa */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer{position:relative;z-index:1}

/* superficies del navegador, con la paleta */
::selection{background:var(--ox);color:var(--card)}
html{scrollbar-color:var(--hair) var(--paper);caret-color:var(--ox);accent-color:var(--ox)}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;font-weight:600;font-size:14px;border-radius:2px}
.skip:focus{top:12px}

/* ═══ header: se asienta al scrollear ═══ */
header{transition:background-color .25s ease,box-shadow .25s ease}
header.scrolled{background:rgba(239,232,218,.94);box-shadow:0 10px 30px -22px rgba(45,32,26,.55)}
.nav-r a.lnk{position:relative}
.nav-r a.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ox);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}

/* flechas: SVG, no caracteres */
.ar{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.btn .ar{width:17px;height:17px}
.textlink{display:inline-flex;align-items:center;gap:7px}
.textlink .ar{width:15px;height:15px}

/* botones: propiedades con nombre, apretar se siente, hover solo con mouse */
.btn,.nav-r a.lnk,.textlink,.foot-links a{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--ease-out),box-shadow .2s ease}
.btn:hover{transform:none}
.btn:active{transform:scale(.97)}
.btn.big{padding:16px 28px;font-size:16px}
.wa{transition:transform .16s var(--ease-out),box-shadow .2s ease}
.wa:hover{transform:none}
.wa:active{transform:scale(.94)}