/* Banner subvención Ayuntamiento de Zaragoza */
.footer-subvencion{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;background:#fff;border-radius:14px;padding:14px 26px;margin-top:30px;box-shadow:0 10px 28px rgba(0,0,0,.22);}
.footer-subvencion span{font-family:var(--font-body);font-size:.84rem;font-weight:700;letter-spacing:.02em;color:var(--ink);}
.footer-subvencion img{height:38px;width:auto;display:block;}
.footer-subvencion[hidden]{display:none;}
/* =========================================================
   Santa Isabel · Noticiero del barrio
   Frontend styles — royal blue on white, modern
   ========================================================= */

/* ---------- Tipografías ----------
   Alojadas en /fonts (no dependen de ningún servidor externo). Son ficheros
   variables: uno solo cubre todos los grosores de 400 a 800.

   Las dos están elegidas por lo mismo: letra de ojo grande y trazo firme,
   que es lo que hace que un texto se lea sin esfuerzo en una pantalla.

   · Outfit — titulares. Geométrica de formas redondas y dibujo muy simple.
   · Inter — texto corrido, menús y botones. Diseñada para pantalla.

   Los ficheros se cachean un año (ver .htaccess): si algún día se sustituye
   uno, hay que cambiarle el NOMBRE, aquí y en el <link rel="preload"> de las
   páginas. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/outfit-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;}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/outfit-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/inter-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;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/inter-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:italic;font-weight:400 800;font-display:swap;src:url("../fonts/inter-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;}
@font-face{font-family:"Inter";font-style:italic;font-weight:400 800;font-display:swap;src:url("../fonts/inter-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Design tokens ---------- */
:root{
  /* Royal blue scale */
  --royal:        #2b50e2;
  --royal-600:    #2444c8;
  --royal-700:    #1b34a6;
  --royal-400:    #5b78ff;
  --royal-300:    #93a8ff;
  --sky:          #4d9fff;
  --blue-50:      #f3f6ff;
  --blue-100:     #e7ecff;
  --blue-200:     #d3ddff;

  /* Neutrals */
  --ink:          #0a0f1f;
  --ink-2:        #1a2137;
  --slate:        #55607a;
  --slate-2:      #687089;
  --line:         #e7e9f3;
  --white:        #ffffff;

  --grad: linear-gradient(115deg, var(--royal) 0%, var(--royal-400) 55%, var(--sky) 100%);
  --grad-soft: linear-gradient(115deg, #eef2ff 0%, #f5f8ff 100%);

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow-sm: 0 2px 8px rgba(20,32,80,.06);
  --shadow-md: 0 12px 30px rgba(24,40,110,.10);
  --shadow-lg: 0 28px 60px rgba(24,40,110,.16);
  --shadow-blue: 0 16px 40px rgba(43,80,226,.28);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --container: 1200px;
  --nav-h: 74px;
  --ease: cubic-bezier(.22,.7,.24,1);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;}

/* Nada de scroll horizontal, en ningún sitio.

   Antes solo había un overflow-x:hidden en el <body>, y en el móvil eso no
   basta: "hidden" tapa lo que sobresale, pero deja la página como algo que SÍ
   se puede arrastrar de lado. Al mover los dedos hacia un lateral, el
   navegador desplazaba todo el documento y asomaba una franja vertical vacía
   por el borde derecho: es la zona recortada de los degradados y las
   decoraciones, que salen a propósito por fuera de su caja.

   "clip" recorta igual pero NO crea una zona desplazable: no hay nada que
   arrastrar, así que la franja no puede aparecer. Y, al revés que "hidden",
   no obliga al eje vertical a volverse desplazable, con lo que el <body> no
   se convierte en un contenedor con scroll propio y la barra de navegación
   pegajosa (position:sticky) sigue anclada a la ventana. overscroll-behavior-x
   remata el asunto quitando el rebote lateral del propio navegador.

   En navegadores antiguos que no entiendan "clip", la declaración se ignora:
   el <html> se queda con el overflow-x:hidden de respaldo (que es el que se
   propaga a la ventana) y el <body> sin nada, o sea, exactamente el
   comportamiento que había hasta ahora. Por eso el respaldo va solo en el
   <html>: ponerlo también en el <body> sería lo que rompería la nav pegajosa
   justo en esos navegadores. */
html{
  overflow-x:hidden;
  overflow-x:clip;
  overscroll-behavior-x:none;
  max-width:100%;
}
body{
  overflow-x:clip;
  max-width:100%;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:1.125rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}
:focus-visible{outline:2.5px solid var(--royal);outline-offset:3px;border-radius:4px;}

p{text-wrap:pretty;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.16;letter-spacing:-.015em;color:var(--ink);text-wrap:balance;}
/* Los títulos pequeños van más gruesos: a su tamaño, el grosor es lo que los
   separa del párrafo que tienen debajo. */
h3,h4{font-weight:700;}

.container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.grad-text{
  /* El degradado solo pinta dentro de la caja de la letra: sin este margen
     interior, las tildes de las mayúsculas (Ú, Á) quedan fuera y no se ven. */
  padding-block:.14em;margin-block:-.14em;
  background:var(--grad);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- Hero headline: cascading entrance ---------- */
.word-reveal{
  --word-delay:0s;
  display:inline-block;
  opacity:0;
  transform:translateY(28px) rotate(1.5deg);
  animation:heroWordIn .8s var(--ease) var(--word-delay) both;
}
.word-reveal:nth-child(1){--word-delay:.05s;}
.word-reveal:nth-child(2){--word-delay:.095s;}
.word-reveal:nth-child(3){--word-delay:.14s;}
.word-reveal:nth-child(4){--word-delay:.185s;}
.word-reveal:nth-child(5){--word-delay:.23s;}
.word-reveal:nth-child(6){--word-delay:.275s;}
.word-reveal:nth-child(7){--word-delay:.32s;}
.word-reveal:nth-child(8){--word-delay:.365s;}
.word-reveal:nth-child(9){--word-delay:.41s;}
.word-reveal:nth-child(10){--word-delay:.455s;}
@keyframes heroWordIn{
  from{opacity:0;transform:translateY(28px) rotate(1.5deg);}
  to{opacity:1;transform:translateY(0) rotate(0deg);}
}
.word-reveal.grad-text{
  animation:heroWordIn .8s var(--ease) var(--word-delay) both, heroShimmer 3.2s ease-in-out calc(var(--word-delay) + .8s) infinite;
}
@keyframes heroShimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* ---------- Highlighted call-to-action text ---------- */
.highlight{
  position:relative;
  display:inline-block;
  padding-bottom:.1em;
  background-image:linear-gradient(100deg,var(--royal) 0%,var(--sky) 45%,var(--royal-400) 75%,var(--royal) 100%);
  background-size:220% auto;
  background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.reveal.in .highlight{animation:highlightShimmer 2.6s ease-in-out .35s infinite alternate;}
@keyframes highlightShimmer{
  from{background-position:0% 50%;}
  to{background-position:100% 50%;}
}
.highlight::after{
  content:"";position:absolute;left:0;bottom:0;height:.16em;width:0%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><path d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%232b50e2' stroke-width='2.2' stroke-linecap='round'/></svg>");
  background-repeat:repeat-x;background-size:22px 8px;background-position:left center;
  transition:width 1s var(--ease) .3s;
}
.reveal.in .highlight::after{width:100%;}

.cta .highlight{
  background-image:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.55) 45%,#fff 75%,rgba(255,255,255,.7) 100%);
  background-size:220% auto;
}
.cta .highlight::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><path d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/></svg>");
}

/* ---------- Reading progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--grad);border-radius:0 3px 3px 0;
  transition:width .1s linear;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(0px);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease), transform .4s var(--ease);
}
.nav.scrolled{
  height:62px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 var(--line), var(--shadow-sm);
}
.nav.nav-hidden{transform:translateY(-100%);}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--grad);opacity:0;transition:opacity .4s var(--ease);
}
.nav.scrolled::after{opacity:.6;}

.nav-inner{
  /* Más ancha que el contenido (--container): con nueve secciones, el logo y
     los botones, el menú no cabe en 1200px y se salía por la derecha. */
  width:100%;max-width:1420px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}

@keyframes navDrop{
  from{opacity:0;transform:translateY(-14px);}
  to{opacity:1;transform:translateY(0);}
}

.brand{
  display:flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em;
  animation:navDrop .6s var(--ease) both;
}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);margin-top:-3px;}

/* =========================================================
   LOGO MARK — ConoZE Santa Isabel
   ========================================================= */
.logo-mark{
  position:relative;
  display:inline-block;
  font-size:18px;line-height:1;user-select:none;
  transition:transform .35s var(--ease);
}
.logo-mark:hover{transform:scale(1.035);}
.logo-mark--sm{font-size:16px;white-space:nowrap;}
.logo-mark--lg{font-size:26px;max-width:100%;}

/* soft breathing glow behind the large lockup */
.logo-mark--lg::before{
  content:"";position:absolute;inset:-22% -8%;z-index:-1;
  background:radial-gradient(ellipse at 34% 55%,rgba(93,131,255,.4),transparent 70%);
  filter:blur(22px);opacity:.55;pointer-events:none;
  animation:logoGlow 4.2s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{opacity:.4;transform:scale(1);}
  50%{opacity:.75;transform:scale(1.06);}
}

/* pin icon (replaces the first "O" of CONOZE) */
.logo-pin{
  position:relative;display:inline-block;
  width:1.34em;height:2em;margin:0 .02em;
  vertical-align:-.34em;
  transition:transform .45s var(--ease);
}
.logo-mark:hover .logo-pin{transform:translateY(-.14em) rotate(-9deg);}
.logo-pin-drop{
  position:absolute;inset:0;
  opacity:0;transform:translateY(-.8em) scale(.55);
}
.logo-mark--sm .logo-pin-drop{animation:pinDrop .7s var(--ease) .25s both;}
.logo-mark--lg.reveal.in .logo-pin-drop{animation:pinDrop .7s var(--ease) .25s both;}
.logo-pin-drop svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pin-body{fill:var(--royal);stroke:var(--royal-700);stroke-width:1;}
.pin-facet{fill:#fff;}
.pin-hole{fill:var(--royal-700);}
.pin-hole-ring{fill:none;stroke:#fff;stroke-width:1.3;opacity:.85;}
.pin-shadow{
  position:absolute;left:50%;bottom:-.12em;width:58%;height:.11em;
  transform:translateX(-50%);background:var(--royal-700);opacity:.32;border-radius:50%;
  animation:pinShadowPulse 2.6s ease-in-out infinite;
}
@keyframes pinDrop{
  0%{opacity:0;transform:translateY(-.8em) scale(.55);}
  62%{opacity:1;transform:translateY(.07em) scale(1.08);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes pinShadowPulse{
  0%,100%{opacity:.32;transform:translateX(-50%) scaleX(1);}
  50%{opacity:.14;transform:translateX(-50%) scaleX(1.4);}
}

/* wordmark letters — CONO + big ZE */
.logo-word{position:relative;display:inline-block;white-space:nowrap;}
.logo-lt{
  display:inline-block;
  font-family:var(--font-body);font-weight:800;letter-spacing:-.015em;
  background-image:linear-gradient(180deg,var(--royal-300) 0%,var(--royal) 50%,var(--royal-700) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:
    1px 1px 0 var(--royal-700),2px 2px 0 var(--royal-700),3px 3px 0 var(--royal-700),
    4px 4px 6px rgba(13,26,66,.4);
}
.logo-lt--big{
  font-size:2.1em;font-weight:900;
  background-image:linear-gradient(100deg,var(--royal-700) 0%,var(--royal) 28%,var(--sky) 50%,var(--royal) 72%,var(--royal-700) 100%);
  background-size:260% auto;background-position:0% 50%;
  text-shadow:
    2px 2px 0 var(--royal-700),3px 3px 0 var(--royal-700),4px 4px 0 var(--royal-700),
    6px 6px 10px rgba(13,26,66,.42);
}
.logo-mark--lg.reveal.in .logo-lt--big{animation:logoShimmer 3.4s ease-in-out infinite;}
@keyframes logoShimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* header (compact) version: flat, high-contrast — the gradient + stacked
   shadow reads as a muddy blur at nav size, so letters stay legible here */
.logo-mark--sm .logo-lt{
  background-image:none;
  color:var(--royal-700);-webkit-text-fill-color:var(--royal-700);
  text-shadow:none;
}
.logo-mark--sm .logo-lt--big{
  background-image:none;
  color:var(--royal);-webkit-text-fill-color:var(--royal);
  text-shadow:1px 1px 0 rgba(27,52,166,.35);
}
.logo-caption{
  position:absolute;left:64%;bottom:.08em;transform:translateX(-50%) skewX(-8deg);
  white-space:nowrap;background:rgba(255,255,255,.92);
  padding:.06em .32em;border-radius:2px;box-shadow:0 1px 3px rgba(10,15,31,.35);
  font-family:var(--font-body);font-weight:800;font-size:.2em;
  letter-spacing:.08em;text-transform:uppercase;color:var(--royal-700);
}

/* SANTA [spark] ISABEL */
.logo-sub{
  display:inline-flex;align-items:center;gap:.16em;
  vertical-align:-.02em;margin-left:.22em;
  font-family:var(--font-body);font-weight:700;letter-spacing:.005em;
  font-size:1.3em;color:var(--royal-700);white-space:nowrap;
  text-shadow:1px 1px 0 rgba(27,52,166,.18);
}
.logo-spark{display:inline-flex;width:.4em;height:.4em;color:var(--sky);animation:logoSpin 7s linear infinite;}
.logo-spark svg{width:100%;height:100%;}
@keyframes logoSpin{to{transform:rotate(360deg);}}

/* dark-background variant (footer) */
.footer .logo-lt{
  background-image:linear-gradient(180deg,#fff 0%,var(--royal-300) 55%,var(--sky) 100%);
  text-shadow:
    1px 1px 0 rgba(0,0,0,.4),2px 2px 0 rgba(0,0,0,.34),3px 3px 0 rgba(0,0,0,.3),
    5px 5px 8px rgba(0,0,0,.4);
}
.footer .logo-lt--big{
  background-image:linear-gradient(100deg,var(--royal-300) 0%,#fff 28%,var(--sky) 50%,#fff 72%,var(--royal-300) 100%);
  text-shadow:
    2px 2px 0 rgba(0,0,0,.4),3px 3px 0 rgba(0,0,0,.34),4px 4px 0 rgba(0,0,0,.3),
    7px 7px 12px rgba(0,0,0,.4);
}
.footer .pin-body{fill:var(--royal-300);stroke:#fff;}
.footer .pin-hole{fill:#0d2820;}
.footer .pin-hole-ring{stroke:var(--royal-300);}
.footer .pin-shadow{background:#fff;opacity:.22;}
.footer .logo-sub{color:rgba(255,255,255,.85);text-shadow:none;}
.footer .logo-caption{background:rgba(10,15,31,.6);color:#fff;}

.nav-links{display:flex;align-items:center;gap:2px;position:relative;height:40px;}
.nav-pill{
  position:absolute;top:0;left:0;height:100%;border-radius:10px;
  background:var(--blue-50);border:1px solid var(--blue-100);
  opacity:0;transform:translateX(0);width:0;
  transition:transform .4s var(--ease), width .4s var(--ease), opacity .25s var(--ease);
  pointer-events:none;z-index:0;
}
.nav-links a{
  position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 8px;border-radius:10px;
  font-weight:500;font-size:.88rem;color:var(--ink-2);white-space:nowrap;
  transition:color .2s;
  animation:navDrop .5s var(--ease) both;
}
.nav-links a:nth-child(2){animation-delay:.06s;}
.nav-links a:nth-child(3){animation-delay:.11s;}
.nav-links a:nth-child(4){animation-delay:.16s;}
.nav-links a:nth-child(5){animation-delay:.21s;}
.nav-links a:nth-child(6){animation-delay:.26s;}
.nav-links a:nth-child(7){animation-delay:.31s;}
.nav-links a:nth-child(8){animation-delay:.36s;}
.nav-links a:nth-child(9){animation-delay:.41s;}
.nav-links a:hover{color:var(--royal);}
.nav-links a[aria-current="page"]{color:var(--royal);font-weight:700;}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;
  background:var(--royal);border-radius:2px;
}

.nav-actions{display:flex;align-items:center;gap:12px;animation:navDrop .6s var(--ease) .18s both;}
.icon-btn{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  color:var(--ink-2);border:1px solid var(--line);
  transition:transform .3s var(--ease), color .2s, border-color .2s, background .2s;
}
.icon-btn:hover{color:var(--royal);border-color:var(--blue-200);background:var(--blue-50);transform:translateY(-2px) rotate(-6deg);}
.icon-btn:active{transform:scale(.9);}
.icon-btn svg{width:18px;height:18px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:12px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s, border-color .2s, color .2s;
  will-change:transform;
  position:relative;
  overflow:hidden;
}
.btn:active{transform:translateY(-1px) scale(.96);}

.btn-primary{background:var(--royal);color:#fff;box-shadow:var(--shadow-blue);}
.btn-primary::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none;
}
.btn-primary:hover{background:var(--royal-600);box-shadow:0 20px 46px rgba(43,80,226,.36);transform:translateY(-3px);}
.btn-primary:hover::before{left:130%;}

.btn-ghost{color:var(--ink);border:1px solid var(--line);background:#fff;}
.btn-ghost:hover{border-color:var(--royal-300);color:var(--royal);transform:translateY(-3px);box-shadow:var(--shadow-sm);}

.btn-lg{padding:15px 26px;font-size:1rem;border-radius:14px;}

.nav-toggle{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:3px auto;border-radius:2px;transition:.3s var(--ease);}
.nav-toggle.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:78px 0 70px;overflow:hidden;}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;will-change:transform;}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(72px);opacity:.55;}
.aurora .a1{width:520px;height:520px;background:radial-gradient(circle,#5b78ff,transparent 70%);top:-120px;left:-40px;animation:drift 18s ease-in-out infinite;}
.aurora .a2{width:460px;height:460px;background:radial-gradient(circle,#4d9fff,transparent 70%);top:40px;right:-60px;animation:drift 22s ease-in-out infinite reverse;}
.aurora .a3{width:380px;height:380px;background:radial-gradient(circle,#93a8ff,transparent 70%);top:220px;left:38%;animation:drift 26s ease-in-out infinite;}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,30px) scale(1.08);}
  66%{transform:translate(-30px,20px) scale(.96);}
}

.hero-inner{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto;}
.hero h1{
  font-size:clamp(2.5rem,5.9vw,4.4rem);
  line-height:1.07;letter-spacing:-.025em;font-weight:600;
}
.hero p.lead{
  font-size:clamp(1.05rem,2vw,1.28rem);color:var(--slate);
  max-width:620px;margin:22px auto 0;
}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap;}

.hero-socials{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:22px;font-size:.86rem;color:var(--slate);
}
.hero-socials .icon-btn{width:36px;height:36px;}
.hero-socials .icon-btn svg{width:16px;height:16px;}

/* featured lead card */
.featured{
  position:relative;z-index:1;margin-top:64px;
  display:grid;grid-template-columns:1.15fr 1fr;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.featured:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.featured .media{position:relative;min-height:340px;overflow:hidden;}
.featured .media .ph{position:absolute;top:-14%;left:0;right:0;height:128%;will-change:transform;}
.featured .media .tag{
  position:absolute;top:18px;left:18px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  padding:7px 13px;border-radius:999px;font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--royal);
}
.featured .body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center;}
.featured .body h2{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;}
.featured .body p{color:var(--slate);margin-top:16px;}
.byline{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:.86rem;color:var(--slate-2);}
.byline .avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.76rem;font-weight:700;}
.read-more{margin-top:26px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--royal);width:fit-content;}
.read-more .arrow{transition:transform .3s var(--ease);}
.read-more:hover .arrow{transform:translateX(5px);}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section{padding:76px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:38px;}
.section-head .h{max-width:640px;}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:10px;}
.section-head p{color:var(--slate);margin-top:8px;}
.section-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--royal);white-space:nowrap;}
.section-link .arrow{transition:transform .3s var(--ease);}
.section-link:hover .arrow{transform:translateX(5px);}

/* Los degradados de relleno los usan las tarjetas de noticia, los comercios y
   el artículo destacado del hero cuando la noticia no tiene imagen de portada. */
.ph{width:100%;height:100%;}
.ph-1{background:linear-gradient(140deg,#2b50e2,#5b78ff 60%,#4d9fff);}
.ph-2{background:linear-gradient(140deg,#1b34a6,#2b50e2);}
.ph-3{background:linear-gradient(140deg,#4d9fff,#2b50e2);}
.ph-4{background:linear-gradient(140deg,#5b78ff,#1b34a6);}
.ph-5{background:linear-gradient(140deg,#2444c8,#4d9fff);}
.ph-6{background:linear-gradient(140deg,#93a8ff,#2b50e2);}

/* =========================================================
   NEWS LIST (filterable)
   ========================================================= */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.chip{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-weight:600;font-size:.88rem;color:var(--slate);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.chip:hover{border-color:var(--royal-300);color:var(--royal);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.chip:active{transform:translateY(0) scale(.94);}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.ncard{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.ncard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue-100);}
.ncard-link{position:absolute;inset:0;z-index:1;}
.ncard .media{aspect-ratio:16/10;overflow:hidden;position:relative;}
.ncard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ncard .media .ph{position:absolute;top:-14%;left:0;right:0;height:128%;will-change:transform;}
.ncard .media .cat{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  padding:6px 12px;border-radius:999px;font-size:.74rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--royal);
}
.ncard .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column;}
.ncard h3{font-size:1.28rem;line-height:1.25;transition:color .2s;}
.ncard:hover h3{color:var(--royal);}
.ncard p{color:var(--slate);font-size:.94rem;margin-top:10px;}
.ncard .m{margin-top:auto;padding-top:16px;font-size:.82rem;color:var(--slate-2);display:flex;gap:10px;align-items:center;}

/* =========================================================
   SHOUT CTA (enviar noticia)
   ========================================================= */
.shout{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--ink) 0%,var(--royal-700) 55%,var(--royal) 140%);
  color:#fff;padding:120px 0;
}
.shout-marquee{
  position:absolute;left:-15%;right:-15%;top:50%;
  transform:translateY(-50%) rotate(-3deg);
  overflow:hidden;z-index:0;pointer-events:none;
}
.shout-track{
  display:inline-flex;align-items:center;gap:.7em;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,8vw,6.4rem);
  color:rgba(255,255,255,.07);
  animation:shoutScroll 26s linear infinite;
  will-change:transform;
}
@keyframes shoutScroll{ to{ transform:translateX(-50%); } }

.shout-inner{position:relative;z-index:1;text-align:center;max-width:640px;margin:0 auto;}
.shout-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;margin-bottom:26px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  animation:shoutFloat 3.2s ease-in-out infinite;
}
.shout-badge svg{width:26px;height:26px;}
@keyframes shoutFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.shout h2{color:#fff;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.025em;}
.shout p{color:rgba(255,255,255,.78);margin-top:18px;font-size:1.12rem;max-width:44ch;margin-inline:auto;}
.shout-cta{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap;}

.btn-light{background:#fff;color:var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.24);}
.btn-light::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(43,80,226,.28),transparent);
  transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none;
}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(0,0,0,.32);}
.btn-light:hover::before{left:130%;}

.btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-3px);}

/* =========================================================
   NEWSLETTER CTA
   ========================================================= */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--grad);color:#fff;padding:66px 56px;text-align:center;
  box-shadow:var(--shadow-blue);
}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.4;}
.cta::before{width:260px;height:260px;background:#fff;top:-120px;left:-60px;}
.cta::after{width:300px;height:300px;background:#0a1a66;bottom:-160px;right:-40px;opacity:.5;}
.cta .inner{position:relative;z-index:1;max-width:560px;margin:0 auto;}
.cta h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.8rem);}
.cta p{color:rgba(255,255,255,.86);margin-top:14px;font-size:1.08rem;}
.cta-form{margin-top:30px;max-width:460px;margin-inline:auto;text-align:left;}
.cta-form-row{display:flex;gap:12px;}
.cta-form-row input[type="email"]{
  flex:1;padding:15px 20px;border-radius:14px;border:none;font-size:1rem;font-family:inherit;
  background:rgba(255,255,255,.96);color:var(--ink);box-shadow:var(--shadow-sm);
}
.cta-form-row input[type="email"]::placeholder{color:var(--slate-2);}
.cta-form-row input[type="email"]:focus{outline:3px solid rgba(255,255,255,.6);}
.cta-form-row button{
  padding:15px 26px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;font-size:1rem;
  transition:transform .25s var(--ease), background .2s, box-shadow .25s var(--ease);white-space:nowrap;
}
.cta-form-row button:hover{transform:translateY(-2px);background:#000;box-shadow:0 12px 26px rgba(0,0,0,.28);}
.cta-form-row button:active{transform:translateY(0) scale(.96);}

/* campo trampa para bots: invisible para una persona, un bot que rellena
   formularios a ciegas suele completarlo igualmente */
.cta-honeypot{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}

.cta-extra{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.cta-checkbox{display:flex;align-items:flex-start;gap:10px;color:rgba(255,255,255,.85);font-size:.86rem;line-height:1.4;cursor:pointer;}
.cta-checkbox input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:#fff;}
.cta-checkbox a{color:#fff;text-decoration:underline;}

.cta-captcha-label{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:.86rem;flex-wrap:wrap;}
.cta-captcha-label .captcha-num{font-weight:700;color:#fff;}
.captcha-input{
  width:64px;padding:8px 10px;border-radius:8px;border:none;font-size:.95rem;font-family:inherit;text-align:center;
  background:rgba(255,255,255,.96);color:var(--ink);
}

.cta-mensaje{margin-top:14px;font-size:.88rem;min-height:1.3em;color:rgba(255,255,255,.9);}
.cta-mensaje.exito{color:#fff;font-weight:700;}
.cta-mensaje.error{color:#ffd9d9;font-weight:700;}

.cta small{display:block;margin-top:16px;color:rgba(255,255,255,.7);font-size:.82rem;}

/* =========================================================
   AGENDA
   ========================================================= */
.agenda-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.event{
  display:flex;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 22px;transition:all .3s var(--ease);
}
.event:hover{border-color:var(--blue-100);box-shadow:var(--shadow-sm);transform:translateX(4px);}
.event .date{
  flex:0 0 auto;width:64px;height:64px;border-radius:14px;
  background:var(--blue-50);border:1px solid var(--blue-100);
  display:grid;place-items:center;text-align:center;
}
.event .date .d{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--royal);line-height:1;}
.event .date .mo{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-top:2px;}
.event .miniatura{
  flex:0 0 auto;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--blue-50);
}
.event .miniatura img{width:100%;height:100%;object-fit:cover;display:block;}
.event .info .k{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--royal);}
.event .info h4{font-size:1.2rem;margin:4px 0 3px;}
.event .info .m{font-size:.82rem;color:var(--slate-2);}

/* =========================================================
   FOOTER
   ========================================================= */
/* Sobre el fondo oscuro del pie, el gris claro es el que contrasta. */
.footer{--slate-2:#8b93a7;}
.footer{background:var(--ink);color:#fff;padding:70px 0 34px;margin-top:20px;}
.footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer .about{color:rgba(255,255,255,.6);margin-top:16px;max-width:34ch;font-size:.94rem;}
.footer .socials{display:flex;gap:10px;margin-top:22px;}
.footer .socials a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;transition:all .25s;}
.footer .socials a:hover{background:var(--royal);border-color:var(--royal);transform:translateY(-3px);}
.footer .socials svg{width:18px;height:18px;}
.footer h5{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);margin-bottom:16px;font-family:var(--font-body);font-weight:700;}
.footer .col a{display:block;color:rgba(255,255,255,.75);padding:6px 0;font-size:.94rem;transition:color .2s;}
.footer .col a:hover{color:#fff;}
.footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:26px;flex-wrap:wrap;font-size:.84rem;color:var(--slate-2);}
.footer-cookie-btn{color:var(--slate-2);font-size:.84rem;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);transition:color .2s;}
.footer-cookie-btn:hover{color:#fff;}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* =========================================================
   PAGE HEADER (subpages: noticias, calendario, quiénes somos)
   ========================================================= */
.page-header{
  position:relative;overflow:hidden;
  padding:88px 0 60px;
  background:var(--blue-50);
  text-align:center;
}
.page-header .aurora{opacity:.7;}
.page-header .inner{position:relative;z-index:1;max-width:660px;margin:0 auto;}
.page-header .eyebrow-line{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono,var(--font-body));font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--royal);
  margin-bottom:16px;
}
.page-header .eyebrow-line .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);}
.page-header h1{font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.1;}
.page-header p{color:var(--slate);margin-top:16px;font-size:1.08rem;}

/* =========================================================
   CALENDAR: month grouping
   ========================================================= */
/* La cabecera de mes ES el bloque de grupo (no hay envoltorio alrededor del
   mes), así que lleva a la vez .month-heading y .grupo-cab: de la primera
   salen los márgenes entre meses, de la segunda todo el aspecto y la entrada
   animada que comparte con la agenda de teléfonos. */
.month-heading{margin:52px 0 26px;}
.month-heading:first-of-type{margin-top:0;}

/* =========================================================
   ABOUT: values grid + stats
   ========================================================= */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.aviso-independencia{
  background:var(--blue-50);border:1px solid var(--blue-100);border-left:4px solid var(--royal);
  border-radius:var(--radius);padding:26px 30px;
}
.aviso-independencia p{font-size:1.02rem;line-height:1.65;color:var(--ink-2);margin:0;}
.aviso-independencia strong{color:var(--royal);}

.value-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue-100);}
.value-card .icon{
  width:46px;height:46px;border-radius:12px;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  margin-bottom:18px;box-shadow:var(--shadow-blue);
  transition:transform .4s var(--ease);
}
.value-card:hover .icon{transform:rotate(-8deg) scale(1.08);}
.value-card .icon svg{width:22px;height:22px;}
.value-card h3{font-size:1.25rem;}
.value-card p{color:var(--slate);margin-top:10px;font-size:.94rem;}

.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:56px;padding-top:44px;border-top:1px solid var(--line);
}
.stat{text-align:center;}
.stat .n{
  font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);
  color:var(--royal);letter-spacing:-.02em;
}
.stat .l{color:var(--slate);font-size:.86rem;margin-top:4px;}

.about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.about-split .art{
  aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  box-shadow:var(--shadow-md);
}
.about-split .art .ph{width:100%;height:100%;}
.about-split .art.logo-showcase{
  background:var(--grad-soft);border:1px solid var(--blue-100);
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.about-split .art.logo-showcase .logo-mark--lg{font-size:clamp(30px,4.4vw,50px);position:relative;z-index:1;}
.about-split h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.about-split p{color:var(--slate);margin-top:16px;}
.about-split p + p{margin-top:12px;}

/* =========================================================
   NOTICIA — página de detalle + bloques de contenido
   (compartido con la vista previa del editor de administración)
   ========================================================= */
.noticia-post{max-width:760px;margin:0 auto;}
.noticia-volver{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--slate);
  margin-bottom:26px;transition:color .2s;
}
.noticia-volver:hover{color:var(--royal);}

.noticia-cabecera{text-align:center;max-width:640px;margin:0 auto 32px;}
.noticia-cabecera .cat{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--royal);background:var(--blue-50);border:1px solid var(--blue-100);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.noticia-cabecera h1{font-size:clamp(1.95rem,4.4vw,2.9rem);line-height:1.14;}
.noticia-meta{color:var(--slate-2);font-size:.9rem;margin-top:16px;}

.noticia-acciones{margin-top:20px;display:flex;justify-content:center;}
.noticia-like-btn{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:10px 20px;font-weight:600;font-size:.92rem;color:var(--slate);
  transition:transform .25s var(--ease), border-color .2s, color .2s, background .2s;
}
.noticia-like-btn:hover{border-color:var(--blue-200);color:var(--royal);transform:translateY(-2px);}
.noticia-like-btn.is-liked{background:var(--blue-50);border-color:var(--blue-200);color:var(--royal);}
.noticia-like-icon{font-size:1.1rem;transition:transform .3s var(--ease);}
.noticia-like-btn.is-liked .noticia-like-icon{transform:scale(1.15);}
.noticia-like-btn:disabled{opacity:.6;cursor:default;}

.noticia-portada{
  margin:32px 0 40px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
}
.noticia-portada img{width:100%;display:block;}

.noticia-contenido{font-size:1.1875rem;line-height:1.75;color:var(--ink-2);}
.noticia-parrafo{margin:0 0 22px;}
/* Subtítulos dentro de un texto largo (noticias, entrevistas, páginas
   legales). El párrafo va a 1.19rem: el subtítulo tiene que quedar claramente
   por encima en tamaño y en grosor, y con más aire arriba que abajo para que
   se lea pegado a lo que encabeza. */
:where(.noticia-post) h2,
.noticia-titulo-seccion{font-size:clamp(1.6rem,3.4vw,1.95rem);font-weight:700;line-height:1.2;}
:where(.noticia-post) h3{font-size:1.4rem;line-height:1.25;}
.noticia-titulo-seccion{margin:48px 0 16px;color:var(--royal);}
.noticia-titulo-h3{font-size:1.4rem;line-height:1.25;margin-top:38px;color:var(--royal);}
.noticia-imagen{margin:30px 0;}
.noticia-imagen img{width:100%;border-radius:var(--radius);display:block;}
.noticia-imagen figcaption{margin-top:10px;font-size:.86rem;color:var(--slate-2);text-align:center;}
.noticia-imagen-ancho{margin-left:-40px;margin-right:-40px;}
@media (max-width:760px){.noticia-imagen-ancho{margin-left:0;margin-right:0;}}
.noticia-imagen-completo{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.noticia-imagen-completo img{border-radius:0;}
.noticia-video{margin:30px 0;}
.noticia-video-marco{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--radius);overflow:hidden;background:#0a0f1f;box-shadow:var(--shadow-md);
}
.noticia-video-marco iframe,.noticia-video-marco video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.noticia-video figcaption{margin-top:10px;font-size:.86rem;color:var(--slate-2);text-align:center;}
.noticia-video-ancho{margin-left:-40px;margin-right:-40px;}
@media (max-width:760px){.noticia-video-ancho{margin-left:0;margin-right:0;}}
.noticia-video-completo{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.noticia-video-completo .noticia-video-marco{border-radius:0;}
/* Carrusel de fotos: se desliza con el dedo gracias a scroll-snap (sin JS);
   las flechas y el contador los mueve js/carrusel.js. */
.noticia-carrusel{margin:30px 0;}
/* container-type: las flechas se centran sobre la FOTO (alto = 2/3 del ancho)
   y no sobre foto + pie, que las dejaba caídas. */
.noticia-carrusel-marco{position:relative;container-type:inline-size;}
.noticia-carrusel-pista{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;
  border-radius:var(--radius);box-shadow:var(--shadow-md);background:var(--blue-50);
}
.noticia-carrusel-pista::-webkit-scrollbar{display:none;}
.noticia-carrusel-pista:focus-visible{outline:3px solid var(--royal-300);outline-offset:3px;}
.noticia-carrusel-foto{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;background:#fff;}
.noticia-carrusel-foto img{width:100%;aspect-ratio:3/2;object-fit:contain;display:block;background:var(--blue-50);}
.noticia-carrusel-foto figcaption{padding:10px 16px 14px;font-size:.86rem;color:var(--slate);text-align:center;background:#fff;}
.noticia-carrusel-flecha{
  position:absolute;top:calc(50% - 22px);top:calc(100cqw / 3 - 22px);width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 0 3px;
  border:0;background:rgba(255,255,255,.92);color:var(--royal);
  font-size:1.9rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-md);
  transition:opacity .2s var(--ease),transform .2s var(--ease),background .2s var(--ease);
}
.noticia-carrusel-flecha:hover{background:#fff;transform:scale(1.08);}
.noticia-carrusel-flecha:focus-visible{outline:3px solid var(--royal-300);outline-offset:2px;}
.noticia-carrusel-flecha:disabled{opacity:0;pointer-events:none;}
.noticia-carrusel-anterior{left:12px;}
.noticia-carrusel-siguiente{right:12px;}
.noticia-carrusel-contador{
  position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;
  background:rgba(10,15,31,.66);color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  pointer-events:none;
}
.noticia-carrusel-ancho{margin-left:-40px;margin-right:-40px;}
@media (max-width:760px){
  .noticia-carrusel-ancho{margin-left:0;margin-right:0;}
  .noticia-carrusel-flecha{width:38px;height:38px;top:calc(100cqw / 3 - 19px);font-size:1.6rem;}
  .noticia-carrusel-anterior{left:8px;}
  .noticia-carrusel-siguiente{right:8px;}
}
.noticia-carrusel-completo{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.noticia-carrusel-completo .noticia-carrusel-pista{border-radius:0;}
@media (prefers-reduced-motion:reduce){.noticia-carrusel-pista{scroll-behavior:auto;}}
.noticia-cita{
  margin:32px 0;padding:6px 0 6px 24px;border-left:3px solid var(--royal);
  font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.5;color:var(--ink);
}
.noticia-cita cite{display:block;margin-top:10px;font-family:var(--font-body);font-style:normal;font-size:.9rem;color:var(--slate-2);}
.noticia-lista{margin:0 0 22px;padding-left:1.4em;}
.noticia-lista li{margin-bottom:8px;}
.noticia-separador{text-align:center;color:var(--blue-200);letter-spacing:.5em;margin:40px 0;font-size:.9rem;}
.noticia-destacado{
  margin:32px 0;padding:24px 26px;border-radius:var(--radius);
  background:var(--blue-50);border:1px solid var(--blue-100);
  font-size:1.05rem;color:var(--ink-2);
}
.noticia-al-centro{text-align:center;}
.noticia-al-derecha{text-align:right;}
.noticia-contenido mark{background:var(--blue-100);color:var(--ink);padding:.05em .15em;border-radius:2px;}
.noticia-contenido a{color:var(--royal);text-decoration:underline;text-decoration-color:var(--blue-200);}

/* Ficha del entrevistado, al cierre de la entrevista. Fondo cálido en
   degradado para diferenciarla claramente del resto del cuerpo del texto. */
.entrevistado-card{
  display:flex;align-items:center;gap:24px;margin:40px 0 0;padding:24px 28px;
  background:linear-gradient(120deg,#f6a53d 0%,#f2b25a 55%,#f7c67e 100%);
  border-radius:var(--radius);box-shadow:var(--shadow-md);
}
.entrevistado-card-foto{
  flex:none;width:112px;height:112px;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.18);background:#fff;
}
.entrevistado-card-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.entrevistado-card-datos{min-width:0;}
.entrevistado-card-nombre{
  font-family:var(--font-body);font-weight:700;font-size:1.2rem;letter-spacing:.02em;
  color:var(--royal-700);text-transform:uppercase;
}
.entrevistado-card-cargo{margin-top:8px;font-size:.94rem;line-height:1.55;color:var(--ink-2);}
@media (max-width:520px){
  .entrevistado-card{flex-direction:column;text-align:center;gap:16px;}
}

/* =========================================================
   CALLEJERO
   Ficha de una calle: mapa + calles adyacentes en cuadro aparte arriba
   (con animación de entrada), contenido normal en medio, destacado en caja
   azul al final.
   ========================================================= */
.calle-adyacentes{
  margin:0 0 40px;padding:22px 26px;border-radius:var(--radius);
  background:var(--blue-50);border:1.5px dashed var(--blue-200);
}
.calle-adyacentes-etiqueta{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--royal);background:#fff;border:1px solid var(--blue-100);
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.calle-adyacentes-cuerpo{display:flex;gap:18px;align-items:stretch;}

/* Cuadrado azul con la lista de calles adyacentes, a la izquierda del mapa. */
.calle-adyacentes-calles{
  flex:0 0 240px;aspect-ratio:1/1;overflow-y:auto;
  background:linear-gradient(150deg,var(--royal) 0%,var(--royal-700) 100%);
  border-radius:var(--radius-sm);padding:20px 22px;box-shadow:var(--shadow-sm);
}
.calle-adyacentes-calles h3{
  font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-bottom:12px;
}
.calle-adyacentes-lista{list-style:none;}
.calle-adyacentes-lista li{
  position:relative;padding-left:16px;margin-bottom:9px;font-size:.94rem;line-height:1.4;color:#fff;
}
.calle-adyacentes-lista li:last-child{margin-bottom:0;}
.calle-adyacentes-lista li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.75);
}

.calle-adyacentes-mapa{flex:1;min-width:0;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);}
.calle-mapa-lienzo{width:100%;height:100%;min-height:200px;background:var(--blue-50);font:inherit;}

@media (max-width:640px){
  .calle-adyacentes-cuerpo{flex-direction:column;}
  .calle-adyacentes-calles{flex:none;aspect-ratio:auto;}
  .calle-adyacentes-mapa{aspect-ratio:16/9;}
}

.calle-destacado{
  display:flex;align-items:center;gap:22px;margin:40px 0 0;padding:22px 26px;
  background:linear-gradient(120deg,var(--royal) 0%,var(--royal-400) 60%,var(--sky) 100%);
  border-radius:var(--radius);box-shadow:var(--shadow-blue);
}
.calle-destacado-foto{
  flex:none;width:96px;height:96px;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.22);background:#fff;
}
.calle-destacado-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.calle-destacado-texto{font-size:1rem;line-height:1.6;color:#fff;}
@media (max-width:520px){
  .calle-destacado{flex-direction:column;text-align:center;gap:16px;}
}

/* =========================================================
   REVISTAS
   El listado es una rejilla de portadas: la portada NO se usa en ningún
   otro sitio, solo como imagen del botón que abre la revista en PDF.
   ========================================================= */
.revistas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
@media (max-width:980px){.revistas-grid{grid-template-columns:repeat(3,1fr);gap:24px;}}
@media (max-width:760px){.revistas-grid{grid-template-columns:repeat(2,1fr);gap:20px;}}

.revista-card{
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.revista-card:hover{transform:translateY(-8px);}
.revista-card .portada{
  position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;
  background:var(--blue-50);border:1px solid var(--blue-100);box-shadow:var(--shadow-sm);
  transition:box-shadow .28s ease,border-color .28s ease;
}
.revista-card:hover .portada{box-shadow:var(--shadow-md);border-color:var(--royal-300);}
.revista-card .portada img{width:100%;height:100%;object-fit:cover;display:block;}
.revista-card .portada .sin-portada{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--slate-2);font-size:.82rem;font-weight:600;text-align:center;padding:16px;
}
/* Etiqueta "PDF" + velo que aparecen al pasar por encima: dejan claro que la
   portada es un botón y no una imagen decorativa. */
.revista-card .portada::after{
  content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,31,.55),transparent 55%);
  opacity:0;transition:opacity .28s ease;
}
.revista-card:hover .portada::after{opacity:1;}
.revista-card .abrir{
  position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);
  background:#fff;color:var(--royal);border-radius:999px;padding:9px 18px;
  font-size:.82rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-md);
  opacity:0;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.3,1);
}
.revista-card:hover .abrir,.revista-card:focus-within .abrir{opacity:1;transform:translate(-50%,0);}
.revista-card h3{font-size:1.15rem;line-height:1.2;transition:color .2s;}
.revista-card:hover h3{color:var(--royal);}

/* El nombre de un número: "Nº12" en azul royal, dos espacios ASCII y el título
   en negro, todo en la misma línea. Los dos espacios van dentro del span del
   número y el white-space:pre impide que el navegador los junte en uno. El
   título hereda el color para que el hover de la tarjeta lo siga tiñendo. */
.revista-numero{color:var(--royal);white-space:pre;}
.revista-titulo{color:inherit;}
.revista-card p{color:var(--slate);font-size:.88rem;margin-top:6px;}
.revista-card .m{margin-top:8px;font-size:.8rem;color:var(--slate-2);}
.revista-card-link{position:absolute;inset:0;z-index:1;border-radius:var(--radius);}

/* ---------- Último número, en la portada ----------
   Una sola pieza ancha, no una rejilla: en la portada la revista es UNA cosa,
   y la portada del número tiene que verse grande, que es lo que invita a
   abrirla. La imagen va a la izquierda en vertical (proporción A4) y el texto
   respira a su lado. */
.revista-destacada{
  display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 36px 30px 30px;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.revista-destacada:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--royal-300);
}
.revista-destacada .portada{
  aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;
  background:var(--blue-50);border:1px solid var(--blue-100);box-shadow:var(--shadow-md);
}
.revista-destacada .portada img{width:100%;height:100%;object-fit:cover;display:block;}
.revista-destacada .portada .sin-portada{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--slate-2);font-size:.86rem;font-weight:600;text-align:center;padding:18px;
}
.revista-destacada .cuerpo{min-width:0;}
.revista-destacada .eyebrow{
  display:inline-block;background:var(--blue-50);border:1px solid var(--blue-100);
  color:var(--royal);padding:6px 13px;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.revista-destacada h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.18;margin-top:16px;}
.revista-destacada p{color:var(--slate);margin-top:14px;max-width:56ch;}
/* En bloque: si se dejaran en línea, la fecha y el botón caerían en el mismo
   renglón y el texto pasaría por debajo del botón. */
.revista-destacada .m{display:block;margin-top:14px;font-size:.8rem;color:var(--slate-2);}
.revista-destacada .abrir{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  background:var(--royal);color:#fff;border-radius:999px;padding:12px 24px;
  font-size:.9rem;font-weight:700;box-shadow:var(--shadow-sm);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.revista-destacada:hover .abrir{background:var(--royal-600);}
.revista-destacada .abrir .arrow{transition:transform .3s var(--ease);}
.revista-destacada:hover .abrir .arrow{transform:translateX(5px);}

@media (max-width:760px){
  /* En vertical la portada se centra y se limita el ancho: a pantalla
     completa una imagen A4 ocuparía media pantalla ella sola. */
  .revista-destacada{grid-template-columns:1fr;gap:24px;padding:24px;text-align:center;}
  .revista-destacada .portada{max-width:200px;margin-inline:auto;}
  .revista-destacada p{margin-inline:auto;}
}

/* ---------- Visor de la revista (lector tipo revista, PDF.js) ---------- */
.revista-visor-cabecera{margin-bottom:16px;text-align:center;}
.revista-visor-cabecera h1{font-size:1.6rem;line-height:1.18;}
.revista-visor-cabecera p{color:var(--slate);margin-top:8px;max-width:60ch;margin-inline:auto;font-size:.95rem;}

/* Contenedor del lector. Envuelve exactamente a la página (width:max-content)
   para que los botones se peguen a sus bordes. user-select/none + el bloqueo
   del menú contextual (en JS) cierran las vías fáciles de "guardar imagen":
   el PDF nunca se incrusta, solo se pintan sus páginas en un <canvas>. */
.revista-lector{
  position:relative;width:max-content;max-width:100%;margin:0 auto;
  -webkit-user-select:none;user-select:none;
  /* pan-y + pinch-zoom, sin pan-x: el dedo hace scroll vertical y pellizca
     para ampliar la hoja, pero el arrastre horizontal no mueve nada. Ya no
     pasa página (eso son los botones) y, sobre todo, así el navegador no
     arrastra la página de lado dejando ver una franja vacía en el borde. */
  touch-action:pan-y pinch-zoom;
}

/* Escenario 3D. El ANCHO y el ALTO los fija el JS en píxeles según la altura
   de la pantalla y la proporción de la página, así que la revista entra
   entera sin scroll. overflow:hidden recorta con limpieza la hoja cuando
   gira hacia el lomo. */
.revista-escenario{
  position:relative;perspective:2400px;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;
  min-width:180px;min-height:200px;max-width:100%;
}

/* La página que se ve (base) y la hoja que gira encima: ambas rellenan el
   escenario, que ya tiene la proporción exacta de la página (sin deformar). */
.revista-pagina{position:absolute;inset:0;z-index:1;}
.revista-pagina img,
.revista-flip img{
  display:block;width:100%;height:100%;background:#fff;
  pointer-events:none;-webkit-user-drag:none;user-select:none;
  /* En el móvil, la pulsación larga sobre una imagen abre el menú "Guardar
     imagen": esto lo desactiva, en la misma línea que impedir la descarga. */
  -webkit-touch-callout:none;
}

/* Hoja que gira. El pivote está en el LOMO (borde izquierdo), como una página
   real de un libro: la hoja se levanta desde el lomo en vez de voltear por el
   centro. El giro va de 0 a -90° (o al revés), lo justo para que la página se
   ponga de canto y deje ver la de debajo — sin volteos planos ni fondos que
   asomen por los lados. */
.revista-flip{
  position:absolute;inset:0;z-index:2;
  transform-origin:0% 50%;transform:rotateY(0deg);
  will-change:transform;backface-visibility:hidden;
  box-shadow:0 0 40px rgba(10,15,31,.16);
}

/* Sombreado que se intensifica cerca del lomo según la hoja se levanta: es lo
   que le da cuerpo de papel al giro. El JS anima su opacidad a la vez que el
   giro. */
.revista-brillo{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(10,15,31,.45) 0%, rgba(10,15,31,.12) 22%, rgba(10,15,31,0) 55%);
}

/* Botones de pasar página, flotando a los lados y centrados en vertical. */
.revista-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);
  color:var(--ink-2);font-size:1.5rem;line-height:1;
  transition:transform .25s var(--ease), color .2s, border-color .2s, opacity .2s;
}
.revista-nav:hover{color:var(--royal);border-color:var(--blue-200);transform:translateY(-50%) scale(1.08);}
.revista-nav:disabled{opacity:.32;cursor:default;pointer-events:none;}
.revista-nav--prev{left:-26px;}
.revista-nav--next{right:-26px;}

.revista-barra{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;
  color:var(--slate);font-size:.92rem;font-weight:600;
}
.revista-contador{font-variant-numeric:tabular-nums;min-width:5.5em;text-align:center;}

/* Botones de pasar página de la barra inferior: son los de MÓVIL. En
   escritorio se ocultan (mandan los que flotan a los lados). */
.revista-barra-btn{
  display:none;width:46px;height:46px;border-radius:50%;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  color:var(--ink-2);font-size:1.4rem;line-height:1;flex-shrink:0;
  transition:color .2s, border-color .2s, opacity .2s;
}
.revista-barra-btn:hover{color:var(--royal);border-color:var(--blue-200);}
.revista-barra-btn:disabled{opacity:.32;cursor:default;pointer-events:none;}

/* Cargando / errores dentro del lector. */
.revista-estado{text-align:center;color:var(--slate);padding:60px 0;}
.revista-spin{
  width:34px;height:34px;border-radius:50%;margin:0 auto 16px;
  border:3px solid var(--blue-100);border-top-color:var(--royal);
  animation:revistaSpin .8s linear infinite;
}
@keyframes revistaSpin{to{transform:rotate(360deg);}}

/* Tablet / pantallas medias: los botones laterales, que en escritorio flotan
   fuera de la caja, se recogen dentro para no salirse de la ventana. */
@media (max-width:920px){
  .revista-nav--prev{left:8px;}
  .revista-nav--next{right:8px;}
  .revista-nav{width:44px;height:44px;font-size:1.3rem;
    background:rgba(255,255,255,.9);backdrop-filter:blur(4px);}
}

/* Móvil: fuera los botones laterales (taparían el texto de los márgenes). Se
   pasa página con los botones de la barra inferior, cómodos para el pulgar. */
@media (max-width:600px){
  .revista-nav{display:none;}
  .revista-barra-btn{display:grid;}
  .revista-barra{gap:22px;margin-top:14px;}
  .revista-visor-cabecera h1{font-size:1.35rem;}
  .revista-visor-cabecera p{font-size:.9rem;}
}

@media (prefers-reduced-motion:reduce){
  .revista-spin{animation:none;}
}

/* =========================================================
   BUSCADOR
   ========================================================= */
.search-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,15,31,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 40px;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.search-overlay.mostrar{opacity:1;pointer-events:auto;}
.search-panel{
  background:#fff;border-radius:var(--radius-lg);width:100%;max-width:640px;
  box-shadow:var(--shadow-lg);overflow:hidden;
  transform:translateY(-16px) scale(.98);transition:transform .3s var(--ease);
}
.search-overlay.mostrar .search-panel{transform:translateY(0) scale(1);}

.search-input-row{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--line);
}
.search-input-row svg{width:20px;height:20px;color:var(--slate-2);flex-shrink:0;}
.search-input-row input{
  flex:1;border:none;outline:none;font-family:inherit;font-size:1.1rem;color:var(--ink);background:none;
}
.search-input-row input::placeholder{color:var(--slate-2);}
.search-cerrar{
  flex-shrink:0;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--slate-2);font-size:.9rem;transition:all .2s;
}
.search-cerrar:hover{background:var(--blue-50);color:var(--royal);}

.search-resultados{max-height:56vh;overflow-y:auto;padding:10px;}
.search-hint,.search-vacio,.search-cargando{
  text-align:center;color:var(--slate-2);font-size:.92rem;padding:36px 20px;
}
.search-grupo-titulo{
  font-family:var(--font-body);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);padding:14px 12px 8px;
}
.search-item{
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;
  transition:background .15s;
}
.search-item:hover,.search-item:focus-visible{background:var(--blue-50);}
.search-item .thumb{
  flex-shrink:0;width:52px;height:52px;border-radius:9px;overflow:hidden;position:relative;background:var(--blue-50);
}
.search-item .thumb img{width:100%;height:100%;object-fit:cover;}
.search-item .thumb .fecha-mini{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--royal);
}
.search-item .thumb .fecha-mini .d{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1;}
.search-item .thumb .fecha-mini .m{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2);}
.search-item .info{min-width:0;flex:1;}
.search-item .cat{
  font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--royal);
}
.search-item h4{
  font-size:.98rem;line-height:1.2;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-item p{
  font-size:.84rem;color:var(--slate);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (max-width:640px){
  .search-overlay{padding:0;}
  .search-panel{max-width:none;height:100%;border-radius:0;display:flex;flex-direction:column;}
  .search-resultados{max-height:none;flex:1;}
}

/* =========================================================
   COOKIES — banner + panel de configuración
   ========================================================= */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:300;
  transform:translateY(140%);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.cookie-banner.mostrar{transform:translateY(0);opacity:1;}
.cookie-banner-inner{
  max-width:960px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:22px 26px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.cookie-banner-texto{flex:1 1 360px;font-size:.92rem;color:var(--slate);line-height:1.55;}
.cookie-banner-texto a{color:var(--royal);text-decoration:underline;text-decoration-color:var(--blue-200);font-weight:600;}
.cookie-banner-acciones{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.cookie-banner-acciones .btn{padding:11px 20px;font-size:.9rem;}

.cookie-modal-overlay{
  position:fixed;inset:0;z-index:310;
  background:rgba(10,15,31,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.cookie-modal-overlay.mostrar{opacity:1;pointer-events:auto;}
.cookie-modal{
  position:relative;
  background:#fff;border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:84vh;
  overflow-y:auto;box-shadow:var(--shadow-lg);padding:34px 34px 28px;
  transform:translateY(-16px) scale(.98);transition:transform .3s var(--ease);
}
.cookie-modal-overlay.mostrar .cookie-modal{transform:translateY(0) scale(1);}
.cookie-modal h2{font-size:1.4rem;margin-bottom:10px;}
.cookie-modal > p{font-size:.92rem;color:var(--slate);line-height:1.55;margin-bottom:22px;}
.cookie-modal > p a{color:var(--royal);text-decoration:underline;text-decoration-color:var(--blue-200);font-weight:600;}
.cookie-modal-cerrar{
  position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;color:var(--slate-2);font-size:.9rem;transition:all .2s;
}
.cookie-modal-cerrar:hover{background:var(--blue-50);color:var(--royal);}

.cookie-categoria{padding:18px 0;border-top:1px solid var(--line);}
.cookie-categoria:first-of-type{border-top:1px solid var(--line);}
.cookie-categoria-cabecera{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;}
.cookie-categoria-titulo{font-family:var(--font-body);font-weight:700;font-size:1.02rem;color:var(--ink);}
.cookie-categoria-badge{
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--royal);background:var(--blue-50);border:1px solid var(--blue-100);
  padding:5px 10px;border-radius:20px;flex-shrink:0;
}
.cookie-categoria p{font-size:.86rem;color:var(--slate);line-height:1.5;}

.cookie-toggle{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.cookie-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
.cookie-toggle-slider{
  position:absolute;inset:0;background:var(--blue-100);border-radius:20px;transition:background .2s var(--ease);
}
.cookie-toggle-slider::before{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease);
}
.cookie-toggle input:checked + .cookie-toggle-slider{background:var(--royal);}
.cookie-toggle input:checked + .cookie-toggle-slider::before{transform:translateX(18px);}
.cookie-toggle input:focus-visible + .cookie-toggle-slider{outline:2.5px solid var(--royal);outline-offset:3px;}

.cookie-modal-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
.cookie-modal-acciones .btn{flex:1 1 auto;justify-content:center;padding:12px 16px;font-size:.88rem;}

body.cookie-modal-abierto{overflow:hidden;}

@media (max-width:640px){
  .cookie-banner{left:12px;right:12px;bottom:12px;}
  .cookie-banner-inner{padding:20px;flex-direction:column;align-items:stretch;}
  .cookie-banner-acciones{width:100%;flex-direction:column;}
  .cookie-banner-acciones .btn{width:100%;justify-content:center;}
  .cookie-modal{padding:28px 22px 22px;max-height:88vh;}
  .cookie-modal-acciones{flex-direction:column;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .featured{grid-template-columns:1fr;}
  .featured .media{min-height:260px;}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .footer .top{grid-template-columns:1fr 1fr;gap:30px;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .stats-row{grid-template-columns:1fr 1fr;gap:32px;}
  .about-split{grid-template-columns:1fr;gap:34px;}
}
/* El menú horizontal solo cabe con holgura por encima de ~1340px: son nueve
   secciones más el logo y el botón de suscripción. Por debajo se pliega al
   menú desplegable en vez de apretujar los textos hasta que se parten en dos
   líneas y se solapan. Entre 1341 y 1480px cabe, pero sin los iconos de
   redes, que se esconden (siguen en la portada y en el pie). */
@media (min-width:1341px) and (max-width:1480px){
  .nav-actions .nav-social{display:none;}
}
@media (max-width:1340px){
  .nav-links,.nav-actions .btn{display:none;}
  .nav-toggle{display:block;}
  .nav-links{
    display:flex;height:auto;
    position:absolute;top:calc(100% + 10px);left:16px;right:16px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;
    box-shadow:var(--shadow-lg);
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:.3s var(--ease);
  }
  .nav-links.open{opacity:1;transform:none;pointer-events:auto;}
  .nav-links a{padding:12px 14px;height:auto;white-space:normal;}
  .nav-links a:hover{background:var(--blue-50);}
  .nav-pill{display:none;}
}
@media (max-width:640px){
  .container{padding:0 20px;}
  .nav-inner{padding:0 16px;gap:14px;}
  /* En móvil, el buscador y el botón de menú son lo imprescindible: con el
     logo más los iconos de Instagram/Facebook de por medio, la fila no
     dejaba hueco de sobra y el botón de menú quedaba apretado (a veces
     imposible de pulsar). Instagram y Facebook siguen en el pie y en la
     portada; aquí sobran. */
  .nav-actions .nav-social{display:none;}
  .section{padding:56px 0;}
  .news-grid{grid-template-columns:1fr;}
  .agenda-list{grid-template-columns:1fr;}
  .event{padding:16px;gap:14px;}
  .footer{padding:56px 0 28px;}
  .footer .top{grid-template-columns:1fr;}
  .footer .bottom{justify-content:center;text-align:center;}
  .values-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .cta{padding:40px 22px;}
  .cta-form-row{flex-direction:column;}
  .cta-form-row button{width:100%;justify-content:center;}
  .featured .body{padding:28px 24px;}
  .section-head{flex-direction:column;align-items:flex-start;}
}
@media (max-width:400px){
  .brand small{display:none;}
  .logo-mark--sm{font-size:14px;}
  .nav-inner{gap:10px;}
  .nav-actions{gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
  .word-reveal{opacity:1;transform:none;}
  .logo-pin-drop{opacity:1;transform:none;}
}

/* =========================================================
   ANUNCIOS (AdSense) — discretos por diseño
   Un hueco sin la clase .is-activo no ocupa absolutamente nada: mientras
   AdSense no esté configurado, la página se ve exactamente igual que antes de
   existir la publicidad. Y si Google no llega a servir nada —porque la
   persona rechazó los anuncios en su panel, o porque no había inventario—,
   js/anuncios.js retira el hueco entero al detectar data-ad-status="unfilled".
   En ningún caso queda un marco vacío ni un salto de maquetación.
   ========================================================= */
[data-anuncio]{display:none;}
[data-anuncio].is-activo{display:block;}

.anuncio-etiqueta{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:8px;text-align:center;
}

/* Bloque al final de un artículo o de un listado: separado del contenido por
   una línea, para que se lea como "esto ya no es el periódico". */
.anuncio-bloque{
  max-width:760px;margin:52px auto 0;padding-top:28px;border-top:1px solid var(--line);
}
.anuncio-bloque .adsbygoogle{min-height:100px;}

/* Columna lateral pegajosa junto al artículo. */
.anuncio-lateral{position:sticky;top:calc(var(--nav-h) + 24px);}
.anuncio-lateral .adsbygoogle{min-height:600px;}

/* Rejilla del detalle de noticia: artículo centrado + carril lateral.
   OJO con el estado por defecto: mientras no haya un anuncio lateral pintado
   de verdad (sin consentimiento, sin AdSense configurado, o en una pantalla
   estrecha), esto tiene que ser un bloque normal. Si el grid de dos columnas
   estuviera puesto siempre, la columna vacía del carril desplazaría el
   artículo hacia la izquierda en TODAS las noticias. Por eso las dos columnas
   solo entran con la clase .tiene-lateral, que añade js/anuncios.js justo
   después de colocar el anuncio. */
.noticia-layout{display:block;}
.noticia-carril{display:none;}
@media (min-width:1240px){
  .noticia-layout.tiene-lateral{
    display:grid;grid-template-columns:minmax(0,760px) 300px;
    gap:44px;justify-content:center;align-items:start;
  }
  .noticia-layout.tiene-lateral .noticia-post{max-width:none;}
  .noticia-layout.tiene-lateral .noticia-carril{display:block;}
}

/* =========================================================
   ANUNCIOS PROPIOS — los que vendemos y colocamos desde el panel
   Los pinta js/anuncios-propios.js. Todo lo que el panel deja personalizar
   llega como variables CSS (--ap-*), ya validadas; aquí están los valores por
   defecto, que son los de la web.

   La etiqueta (.ap-etiqueta) NO se personaliza y va fuera de la caja: es lo
   que avisa de que aquello es publicidad y de quién, y ningún diseño debe
   poder disimularla.
   ========================================================= */
.ap-anuncio{
  display:flex;
  margin-top:var(--ap-margen-sup,32px);margin-bottom:var(--ap-margen-inf,32px);
  /* Aparece después de la carga: una entrada suave en vez de un salto. */
  animation:apEntra .5s var(--ease) both;
}
@keyframes apEntra{from{opacity:0;}to{opacity:1;}}
.ap-anuncio--izquierda{justify-content:flex-start;}
.ap-anuncio--centro{justify-content:center;}
.ap-anuncio--derecha{justify-content:flex-end;}
.ap-interior{width:100%;max-width:var(--ap-ancho,100%);min-width:0;}

.ap-etiqueta{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 0 8px;text-align:center;line-height:1.4;
}

.ap-caja{
  display:block;overflow:hidden;text-decoration:none;
  background:var(--ap-fondo,var(--white));color:var(--ap-texto,var(--ink));
  border:var(--ap-borde-grosor,1px) solid var(--ap-borde,var(--line));
  border-radius:var(--ap-radio,18px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ap-caja--sombra{box-shadow:var(--shadow-md);}
a.ap-caja:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
a.ap-caja:focus-visible{outline:3px solid var(--royal);outline-offset:3px;}

/* La imagen se ve SIEMPRE entera, con su proporción: nunca se recorta ni se
   deforma, tenga el tamaño que tenga. La caja se adapta a ella, no al revés. */
.ap-media{display:block;min-width:0;}
.ap-media picture{display:block;}
.ap-media img{display:block;width:100%;height:auto;max-width:100%;}

.ap-cuerpo{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:var(--ap-relleno,24px);min-width:0;
}
.ap-titular{
  font-family:var(--font-display);font-weight:600;line-height:1.2;
  font-size:var(--ap-titular,22px);
}
.ap-texto{font-size:.96rem;line-height:1.6;opacity:.86;}
.ap-boton{
  display:inline-block;margin-top:6px;padding:10px 20px;border-radius:999px;
  font-weight:700;font-size:.9rem;
  background:var(--ap-boton,var(--royal));color:var(--ap-boton-texto,var(--white));
}

/* Tarjeta: imagen a un lado y texto al otro, centrados en vertical; en móvil
   siempre apilada. */
.ap-caja--tarjeta.ap-caja--horizontal,
.ap-caja--tarjeta.ap-caja--horizontal-inversa{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;}
.ap-caja--tarjeta.ap-caja--horizontal-inversa{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
.ap-caja--tarjeta.ap-caja--horizontal-inversa .ap-media{order:2;}
.ap-caja--tarjeta .ap-cuerpo{justify-content:center;}
@media (max-width:640px){
  .ap-caja--tarjeta.ap-caja--horizontal,
  .ap-caja--tarjeta.ap-caja--horizontal-inversa{display:block;}
}

/* Entre las tarjetas de un listado: ocupa la fila entera de la rejilla. */
.ap-anuncio--en-listado{grid-column:1 / -1;margin-top:0;margin-bottom:0;}

/* Columna lateral de las fichas: estrecha, así que la tarjeta se apila. Va
   pegajosa salvo que debajo haya también un anuncio de Google, que ya lo es. */
.noticia-carril .ap-anuncio{margin-top:0;position:sticky;top:calc(var(--nav-h) + 24px);}
.noticia-carril:has(.anuncio-lateral.is-activo) .ap-anuncio{position:static;}
.noticia-carril .ap-caja--tarjeta{display:block !important;}

/* Dentro del texto de un artículo: que no herede los estilos de los enlaces
   ni de los párrafos de la noticia. */
.noticia-contenido .ap-anuncio a.ap-caja{text-decoration:none;color:var(--ap-texto,var(--ink));}
.noticia-contenido .ap-etiqueta{font-size:.72rem;margin:0 0 8px;color:var(--slate);}

/* Vista previa del panel: marca cuál es el anuncio que se está probando. */
.ap-anuncio--resaltado .ap-interior{outline:2px dashed var(--royal);outline-offset:8px;border-radius:6px;}

@media (prefers-reduced-motion:reduce){
  .ap-anuncio{animation:none;}
  a.ap-caja:hover{transform:none;}
}

/* =========================================================
   COMERCIO PATROCINADO — el negocio destacado del barrio
   Tarjeta grande, en horizontal en escritorio, siempre etiquetada como
   publicidad. Igual que los huecos de anuncio, si no hay patrocinio el
   contenedor no ocupa nada.
   ========================================================= */
[data-patrocinado]{display:none;}
[data-patrocinado].is-activo{display:block;margin-bottom:40px;}

.patrocinado{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:#fff;border:1px solid var(--blue-100);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  /* La tarjeta la inserta js/patrocinado.js después de la carga, así que se
     anima aquí en vez de con .reveal (que main.js solo observa al arrancar). */
  animation:patrocinadoEntra .7s var(--ease) both;
}
@keyframes patrocinadoEntra{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:none;}
}
.patrocinado:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

.patrocinado-media{position:relative;min-height:320px;background:var(--grad-soft);}
.patrocinado-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.patrocinado-cuerpo{
  padding:44px 46px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
.patrocinado-etiqueta{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--royal);background:var(--blue-50);border:1px solid var(--blue-100);
  padding:6px 14px;border-radius:999px;
}
.patrocinado-logo{max-height:52px;width:auto;margin-top:22px;object-fit:contain;}
.patrocinado-nombre{
  font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;margin-top:18px;
}
.patrocinado-titular{
  font-size:1.08rem;font-weight:600;color:var(--royal);margin-top:12px;
}
.patrocinado-desc{color:var(--slate);margin-top:14px;font-size:.98rem;line-height:1.65;}
.patrocinado-btn{margin-top:28px;}

@media (max-width:860px){
  .patrocinado{grid-template-columns:1fr;}
  .patrocinado-media{min-height:0;aspect-ratio:16/9;}
  .patrocinado-cuerpo{padding:32px 26px;}
  .anuncio-bloque{margin-top:40px;}
}

/* =========================================================
   TELÉFONOS DE INTERÉS
   Agenda del barrio agrupada por bloques. Prioridad absoluta a que el número
   se lea y se pulse sin esfuerzo: es una página que se consulta con prisa, a
   veces con una sola mano.
   ========================================================= */
.tel-buscador{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:14px 22px;margin-bottom:40px;box-shadow:var(--shadow-sm);
  transition:border-color .2s, box-shadow .3s var(--ease);
}
.tel-buscador:focus-within{border-color:var(--royal);box-shadow:var(--shadow-md);}
.tel-buscador svg{width:19px;height:19px;color:var(--slate-2);flex-shrink:0;}
.tel-buscador input{
  flex:1;min-width:0;border:none;outline:none;background:none;
  font-family:inherit;font-size:1rem;color:var(--ink);
}
.tel-buscador input::-webkit-search-cancel-button{cursor:pointer;}

/* =========================================================
   CABECERAS DE GRUPO (compartidas)
   Las usan la agenda de teléfonos y el calendario: los dos pintan una lista
   partida en bloques (Emergencias, Sanidad… / Julio 2026, Agosto 2026…) y en
   los dos el nombre del bloque es lo que se busca primero al llegar con
   prisa. Por eso manda sobre el contenido de debajo —va a mayor tamaño y con
   el degradado de marca— mientras que el número de teléfono y el día del mes
   se quedan en su azul plano. Contraste por jerarquía, sin tocar el tamaño ni
   el área de pulsación de nada.

   La entrada la dispara la clase .in que pone js/grupos-anim.js sobre la
   cabecera (o sobre el bloque que la contiene) al asomar por la pantalla.

   El estado de partida escondido cuelga de .anim-grupos, que ese mismo script
   pone en el contenedor solo si de verdad va a animar. Sin JS, sin
   IntersectionObserver o con prefers-reduced-motion esa clase no llega, y las
   cabeceras se ven de entrada: un grupo sin título visible por un fallo de
   script deja la lista sin sentido, y eso pesa más que la animación.
   ========================================================= */
.grupo-cab{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

.grupo-titulo{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.05rem);line-height:1.15;letter-spacing:-.02em;
  white-space:normal;
  /* Degradado propio, no --grad: el brillo recorre el fondo de lado a lado, y
     con --grad el título se quedaba en el extremo claro la mitad del ciclo,
     justo lo contrario de lo que se busca. Aquí los dos extremos son azul
     profundo y el tono claro solo pasa por el medio, como un reflejo. */
  background-image:linear-gradient(100deg,
    var(--royal-700) 0%, var(--royal) 28%, var(--sky) 50%, var(--royal) 72%, var(--royal-700) 100%);
  background-size:180% auto;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.anim-grupos .grupo-titulo{opacity:0;transform:translateY(18px);}
.anim-grupos .in .grupo-titulo{
  opacity:1;transform:none;
  animation:grupoBrillo 3.8s ease-in-out .7s infinite alternate;
}
@keyframes grupoBrillo{
  from{background-position:0% 50%;}
  to{background-position:100% 50%;}
}

/* Línea que se come el espacio sobrante entre el título y la llamada a la
   acción. Se dibuja sola de izquierda a derecha al entrar el grupo. */
.grupo-linea{
  flex:1;min-width:40px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-200),var(--line));
  transform-origin:left center;
  transition:transform .9s var(--ease) .18s;
}
.anim-grupos .grupo-linea{transform:scaleX(0);}
.anim-grupos .in .grupo-linea{transform:scaleX(1);}

/* Llamada a la acción del grupo. Va en texto plano, sin pastilla: la pastilla
   es la forma del botón que llama de verdad en la página de teléfonos, y
   repetirla aquí restaría claridad a cuál es. */
.grupo-cta{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--royal);
  transition:opacity .5s var(--ease) .38s, transform .5s var(--ease) .38s;
}
.anim-grupos .grupo-cta{opacity:0;transform:translateY(8px);}
.anim-grupos .in .grupo-cta{opacity:1;transform:none;}
.grupo-cuenta{color:var(--slate-2);}
.grupo-cta svg{width:13px;height:13px;display:block;}
/* Cuando la llamada a la accion lleva a algun sitio (el calendario apunta al
   boletín), se comporta como enlace; en teléfonos es solo una indicación. */
.grupo-cta a{
  display:inline-flex;align-items:center;gap:6px;color:inherit;
  transition:color .2s;
}
.grupo-cta a:hover{color:var(--royal-700);text-decoration:underline;text-underline-offset:4px;}
/* Empujoncito periódico de la flecha: sugiere el gesto sin robar atención. */
.anim-grupos .in .grupo-cta svg{animation:grupoFlechaGuino 2.4s var(--ease) 1.2s infinite;}
@keyframes grupoFlechaGuino{
  0%,55%,100%{transform:translateX(0);}
  25%{transform:translateX(5px);}
}

/* ---------- Grupos de la agenda de teléfonos ---------- */
.tel-grupo{margin-bottom:52px;}
.tel-grupo .grupo-cab{margin-bottom:20px;}

.tel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}

.tel-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-100);}

.tel-info{min-width:0;}
.tel-nombre{font-family:var(--font-body);font-weight:700;font-size:1.02rem;line-height:1.25;}
.tel-desc{font-size:.86rem;color:var(--slate);margin-top:5px;line-height:1.45;}

.tel-numero{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-weight:700;font-size:1rem;color:var(--royal);
  background:var(--blue-50);border:1px solid var(--blue-100);
  padding:11px 18px;border-radius:999px;white-space:nowrap;
  transition:background .25s, color .25s, transform .25s var(--ease);
}
.tel-numero:hover{background:var(--royal);color:#fff;transform:scale(1.03);}
.tel-icono svg{width:15px;height:15px;display:block;}

.tel-vacio{text-align:center;color:var(--slate);padding:40px 0;}
.tel-aviso{
  margin-top:8px;text-align:center;color:var(--slate-2);font-size:.9rem;
}
.tel-aviso a{color:var(--royal);font-weight:600;text-decoration:underline;text-decoration-color:var(--blue-200);}

@media (max-width:560px){
  .tel-grid{grid-template-columns:1fr;}
  /* En móvil la tarjeta se apila y el número pasa a ocupar todo el ancho:
     se convierte en un botón de llamada difícil de fallar con el pulgar. */
  .tel-card{flex-direction:column;align-items:stretch;gap:14px;}
  .tel-numero{justify-content:center;padding:13px 18px;font-size:1.05rem;}
}

/* Sin sitio para la línea: el título y su llamada a la acción se apilan, y la
   llamada puede partirse en dos renglones si el texto es largo. */
@media (max-width:560px){
  .grupo-cab{gap:8px;}
  .grupo-linea{display:none;}
  .grupo-titulo,
  .grupo-cta{flex-basis:100%;}
  .grupo-cta{white-space:normal;}
}


/* =========================================================
   Banner de instalación (PWA) — js/instalar-app.js
   Barra inferior, por encima de todo salvo los diálogos modales. Se inserta
   por JavaScript solo cuando el navegador confirma que la instalación es
   posible, así que estas reglas no afectan a nadie que no la vea.
   ========================================================= */
.instalar-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  /* El hueco de la barra de gestos del móvil, para que el banner no quede
     debajo de ella. */
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -12px 34px rgba(24,40,110,.14);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
}
.instalar-banner.is-visible{transform:translateY(0);}

.instalar-icono{
  flex:0 0 auto;width:44px;height:44px;border-radius:11px;
  box-shadow:var(--shadow-sm);
}
.instalar-cuerpo{flex:1 1 auto;min-width:0;}
.instalar-titulo{
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  color:var(--ink);line-height:1.2;
}
.instalar-texto{
  margin-top:3px;color:var(--slate);font-size:.82rem;line-height:1.45;
}

.instalar-acciones{flex:0 0 auto;}
.instalar-btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* 48px es el área táctil mínima recomendada; por debajo, en un móvil se
     falla el toque más de lo que parece. */
  min-height:48px;min-width:48px;padding:0 20px;
  border:none;border-radius:var(--radius-sm);
  background:var(--royal);color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow-blue);
  transition:background .2s, transform .2s var(--ease);
}
.instalar-btn:hover{background:var(--royal-600);}
.instalar-btn:active{transform:scale(.96);}

.instalar-cerrar{
  flex:0 0 auto;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:none;border:none;color:var(--slate-2);
  font-size:1.5rem;line-height:1;
  transition:background .2s, color .2s;
}
.instalar-cerrar:hover{background:var(--blue-50);color:var(--ink);}

@media (max-width:420px){
  .instalar-banner{gap:10px;padding-left:12px;padding-right:8px;}
  .instalar-icono{width:38px;height:38px;}
  .instalar-btn{padding:0 14px;font-size:.86rem;}
}

@media (prefers-reduced-motion:reduce){
  .instalar-banner{transition:none;}
  .instalar-btn:active{transform:none;}
}

/* =========================================================
   Avisos push — js/notificaciones.js

   TODOS los selectores van anidados bajo .avisos-bloque, y no es por gusto:
   este bloque se pinta también dentro de .cta (el recuadro azul del boletín),
   que tiene una regla ".cta p { color: rgba(255,255,255,.86) }". Esa regla
   tiene más especificidad (0,1,1) que un ".avisos-texto" suelto (0,1,0), así
   que ganaba: el texto salía BLANCO sobre el fondo casi blanco del bloque, es
   decir, invisible. Anidando bajo .avisos-bloque subimos a (0,2,0) y el color
   correcto vuelve a mandar en cualquier sitio donde se coloque el bloque.
   ========================================================= */
.avisos-bloque{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 22px;margin-top:22px;text-align:left;
  box-shadow:var(--shadow-sm);
}
.avisos-bloque--activo{border-color:#bfe8cf;background:#f6fdf9;}
.avisos-bloque--bloqueado,
.avisos-bloque--ios{background:var(--blue-50);border-color:var(--blue-100);}

.avisos-bloque .avisos-titulo{
  font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  color:var(--ink);line-height:1.25;margin:0;
}
.avisos-bloque .avisos-texto{
  margin:8px 0 0;color:var(--slate);font-size:.88rem;line-height:1.6;
}
.avisos-bloque .avisos-nota{
  /* --slate-2 sobre estos fondos claros se queda en 2,85:1 de contraste, por
     debajo del 4,5:1 que pide la WCAG para texto normal — y esta nota es aún
     más pequeña que el texto normal. Con --slate sube a 5,8:1. La jerarquía
     visual la sigue marcando el tamaño de letra, que para eso está. */
  margin:10px 0 0;color:var(--slate);font-size:.82rem;line-height:1.5;
}

.avisos-bloque .avisos-btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* 48px de área táctil, como el resto de botones del sitio. */
  min-height:48px;margin-top:14px;padding:0 22px;
  border:none;border-radius:var(--radius-sm);
  background:var(--royal);color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow-blue);
  transition:background .2s, transform .2s var(--ease), opacity .2s;
}
.avisos-bloque .avisos-btn:hover{background:var(--royal-600);}
.avisos-bloque .avisos-btn:active{transform:scale(.97);}
.avisos-bloque .avisos-btn:disabled{opacity:.55;cursor:default;transform:none;}

/* Darse de baja no es la acción destacada: no compite con el resto. */
.avisos-bloque--activo .avisos-btn{
  background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;
}
.avisos-bloque--activo .avisos-btn:hover{border-color:var(--royal-300);color:var(--royal);background:#fff;}

.avisos-bloque .avisos-error{
  margin:12px 0 0;padding:10px 13px;border-radius:10px;
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  font-size:.82rem;line-height:1.5;
}

/* ---------- Variante destacada ----------
   Para el hueco de la parte alta de la portada y del listado de noticias, con
   data-notificaciones-destacado. Misma información, más presencia: el bloque
   del pie es fácil de no ver nunca. */
.avisos-bloque--destacado{
  display:flex;align-items:center;gap:20px;
  margin-top:0;padding:24px 26px;
  border-radius:var(--radius);border-color:var(--blue-100);
  background:linear-gradient(115deg,#f7f9ff 0%,#eef3ff 100%);
  box-shadow:var(--shadow-sm);
}
.avisos-bloque--destacado::before{
  /* La campana. Va en CSS y no en el HTML porque el bloque lo genera el JS y
     así no hay que tocar el marcado para una decoración. */
  content:"";flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  background:var(--grad) center/22px no-repeat;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/26px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/26px no-repeat;
}
.avisos-bloque--destacado .avisos-cuerpo{flex:1 1 auto;min-width:0;}
.avisos-bloque--destacado .avisos-titulo{font-size:1.18rem;}
.avisos-bloque--destacado .avisos-texto{max-width:62ch;}
.avisos-bloque--destacado .avisos-btn{flex:0 0 auto;margin-top:0;}

@media (max-width:760px){
  .avisos-bloque--destacado{
    flex-direction:column;align-items:flex-start;gap:14px;padding:22px;
  }
  .avisos-bloque--destacado::before{width:40px;height:40px;}
  .avisos-bloque--destacado .avisos-btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .avisos-bloque .avisos-btn{transition:none;}
  .avisos-bloque .avisos-btn:active{transform:none;}
}

@media (max-width:760px){
  .footer-subvencion{gap:12px;padding:14px 18px;}
  .footer-subvencion img{height:32px;}
}