/* ============================================================================
   Radio Estéreo San Miguel 95.7 — Home
   Paleta derivada del logotipo real: ondas concéntricas azul · cian · ámbar · rojo.
   ============================================================================
   01 Tokens        06 Hero + slider    11 Redes
   02 Reset         07 Reproductor      12 Footer
   03 Utilidades    08 Noticias         13 Página de noticia
   04 Efectos       09 La emisora       14 Responsive
   05 Navegación    10 Parrilla         15+ Rediseño, fiestas, paneles
   ========================================================================== */

/* ── 01 · Tokens ─────────────────────────────────────────────────────────── */
:root{
  --blue-deep:#0a2a5e;
  --blue:#1b4f9c;
  --cyan:#29a9e0;
  --cyan-soft:#5fc8f5;
  --amber:#f5a623;
  --red:#e0342b;

  --bg:#05070d;
  --bg-2:#080c15;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --tx:#eaf0f7;
  --tx-dim:#8d9bb0;
  --tx-mute:#5f6c80;

  --g-signal:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  --g-wave:linear-gradient(135deg,var(--amber) 0%,var(--red) 100%);
  --g-text:linear-gradient(100deg,var(--cyan-soft) 0%,var(--cyan) 40%,var(--amber) 100%);

  --font:'Geist','Segoe UI',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:30px;
  --shell:min(1240px,92%);
  --gutter:max(4vw,calc((100vw - 1240px) / 2));
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --blur:20px;
  --nav-h:74px;
}

/* ── 02 · Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);color:var(--tx);
  font-family:var(--font);font-weight:400;font-size:1rem;line-height:1.65;
  letter-spacing:-.005em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

img,svg,iframe,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
ul,ol{list-style:none}

h1,h2,h3,h4{line-height:1.1;letter-spacing:-.035em;font-weight:700;text-wrap:balance}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
::selection{background:rgba(41,169,224,.32);color:#fff}

.skip{
  position:fixed;top:-100px;left:16px;z-index:999;padding:12px 20px;
  border-radius:var(--r-sm);background:var(--cyan);color:#04121d;font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{top:16px}

/* ── 03 · Utilidades ─────────────────────────────────────────────────────── */
.shell{width:var(--shell);margin-inline:auto}

.band{padding-block:clamp(72px,9vw,132px);position:relative}

.band-head{margin-bottom:clamp(32px,4vw,54px);max-width:64ch}
.band-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;max-width:none;flex-wrap:wrap}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;
}
.eyebrow::before{content:'';width:26px;height:1.5px;border-radius:2px;background:var(--g-signal)}

.h2{font-size:clamp(1.85rem,4.2vw,3rem);font-weight:700}
.h3{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700}
.sub{color:var(--tx-dim);margin-top:12px;font-size:1.03rem;max-width:52ch}

.glass{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
}

.grad{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.muted{color:var(--tx-mute)}

.live-dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--red);
  box-shadow:0 0 0 0 rgba(224,52,43,.6);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(224,52,43,.55)}
  70%{box-shadow:0 0 0 9px rgba(224,52,43,0)}
  100%{box-shadow:0 0 0 0 rgba(224,52,43,0)}
}

.ico{width:19px;height:19px;fill:currentColor;flex:none}
.ico-sm{width:17px;height:17px;fill:currentColor;flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:.96rem;
  letter-spacing:-.01em;min-height:48px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.btn-sm{padding:11px 20px;min-height:42px;font-size:.9rem}
.btn-primary{background:var(--g-signal);color:#02121e;box-shadow:0 10px 30px -8px rgba(41,169,224,.55)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px -10px rgba(41,169,224,.7)}
.btn-primary:active{transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--tx);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-ghost:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24);background:var(--surface-2)}

[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].seen{opacity:1;transform:none}

/* ── 04 · Aurora, cursor, progreso, telón ────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;will-change:transform}
.a1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:radial-gradient(circle,var(--blue) 0%,transparent 68%);animation:drift1 26s ease-in-out infinite}
.a2{width:46vw;height:46vw;right:-12vw;top:24vh;background:radial-gradient(circle,var(--cyan) 0%,transparent 68%);opacity:.20;animation:drift2 32s ease-in-out infinite}
.a3{width:40vw;height:40vw;left:26vw;bottom:-18vw;background:radial-gradient(circle,var(--red) 0%,transparent 70%);opacity:.13;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-8vw,-6vh,0) scale(1)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,-7vh,0) scale(1.15)}}

.aurora-grain{
  position:absolute;inset:0;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--g-text);box-shadow:0 0 12px rgba(41,169,224,.75)}

.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:6px;height:6px;background:var(--cyan);margin:-3px 0 0 -3px}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(41,169,224,.5);
  transition:opacity .3s,width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease);
}
body.has-cursor .cursor,body.has-cursor .cursor-ring{opacity:1}
body.cursor-hot .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(41,169,224,.12);border-color:rgba(95,200,245,.85)}

/* Telón musical durante el desplazamiento a «En vivo» */
.curtain{
  position:fixed;inset:0;z-index:400;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(90% 70% at 50% 50%,rgba(5,7,13,.62),rgba(5,7,13,.90));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.curtain.on{opacity:1}
.curtain canvas{width:100%;height:100%}

/* ── 05 · Navegación ─────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:120;transition:background .4s var(--ease),border-color .4s var(--ease)}
.nav::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background .4s}
.nav.stuck{background:rgba(5,7,13,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.nav.stuck::after{background:var(--line-soft)}

.nav-in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--nav-h)}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-logo{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(41,169,224,.35))}
.brand-txt b{display:block;font-size:.97rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.brand-txt em{display:block;font-family:var(--mono);font-style:normal;font-size:.68rem;letter-spacing:.12em;color:var(--tx-dim);text-transform:uppercase}

.nav-links{display:flex;gap:2px}
.nav-links a{
  display:block;padding:9px 15px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;color:var(--tx-dim);white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-links a:hover{color:var(--tx);background:var(--surface)}

.nav-actions{display:flex;align-items:center;gap:10px}

.btn-live{
  display:inline-flex;align-items:center;gap:9px;padding:10px 19px;border-radius:999px;
  min-height:44px;border:1px solid var(--line);background:var(--surface);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:.88rem;font-weight:600;white-space:nowrap;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.btn-live:hover{border-color:rgba(41,169,224,.6);transform:translateY(-2px);background:var(--surface-2)}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);position:relative}
.burger span{position:absolute;left:13px;width:18px;height:1.6px;background:var(--tx);border-radius:2px;transition:transform .3s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.drawer{
  display:none;flex-direction:column;background:rgba(5,7,13,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
}
.drawer.open{max-height:340px}
.drawer a{padding:15px 4%;font-size:.98rem;font-weight:500;color:var(--tx-dim);border-bottom:1px solid var(--line-soft)}

/* ── 06 · Hero + slider ──────────────────────────────────────────────────── */
.hero{padding-block:calc(var(--nav-h) + clamp(28px,4vw,52px)) clamp(48px,6vw,80px);position:relative}

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Los botones van bajo el slider, centrados */
.hero-cta{
  display:flex;flex-wrap:wrap;gap:13px;justify-content:center;
  margin-top:clamp(24px,3vw,34px);
}

/* El slider muestra las fichas nítidas y a su proporción original */
.slider{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}

.slider-stage{position:relative;aspect-ratio:1200 / 461;max-height:58vh;overflow:hidden}

.slide{position:absolute;inset:0;opacity:0;transition:opacity .85s var(--ease-io)}
.slide.is-active{opacity:1}
/* Sin zoom: la ficha se ve completa y quieta */
.slide img{width:100%;height:100%;object-fit:cover;object-position:center}

/*
  Efecto musical al pasar de ficha: una cortina de barras de ecualizador
  barre el slider de izquierda a derecha, con un destello de la paleta.
*/
.slide-wipe{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transform-origin:left;
}
.slide-wipe::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(41,169,224,.55) 0 4px,
    rgba(5,7,13,.45) 4px 9px,
    rgba(245,166,35,.40) 9px 13px,
    transparent 13px 26px);
  transform:scaleX(0);transform-origin:left;
}
.slide-wipe::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;
  background:linear-gradient(90deg,transparent,rgba(95,200,245,.85),rgba(245,166,35,.6),transparent);
  filter:blur(6px);left:-140px;
}
.slide-wipe.on{animation:wipeFade .85s var(--ease) forwards}
.slide-wipe.on::before{animation:wipeBars .85s var(--ease) forwards}
.slide-wipe.on::after{animation:wipeFlash .85s var(--ease) forwards}

@keyframes wipeFade{0%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes wipeBars{
  0%{transform:scaleX(0)}
  55%{transform:scaleX(1)}
  100%{transform:scaleX(1)}
}
@keyframes wipeFlash{
  0%{left:-140px}
  60%{left:100%}
  100%{left:100%}
}

.slider-ui{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;background:rgba(8,12,21,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
}

.dots{display:flex;gap:8px;flex-wrap:wrap}
.dot{position:relative;width:36px;height:4px;border-radius:999px;background:rgba(255,255,255,.20);overflow:hidden;transition:background .3s var(--ease),width .35s var(--ease)}
.dot:hover{background:rgba(255,255,255,.38)}
.dot.on{width:60px;background:rgba(255,255,255,.26)}
.dot i{position:absolute;inset:0;width:0;background:var(--g-text);border-radius:999px;display:block}

.slider-toggle{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--tx-dim);
  transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.slider-toggle:hover{color:var(--tx);border-color:rgba(255,255,255,.28);transform:scale(1.08)}

.slider-progress{height:2px;background:rgba(255,255,255,.08)}
.slider-progress span{display:block;height:100%;width:0;background:var(--g-text)}

/* ── 07 · Reproductor ────────────────────────────────────────────────────── */
/* Translúcido: deja ver la aurora del fondo y da profundidad a las bandas */
.live{background:linear-gradient(180deg,rgba(5,7,13,.80) 0%,rgba(8,12,21,.80) 100%)}

.player{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(30px,5vw,64px);align-items:center;
  padding:clamp(28px,4vw,52px);position:relative;overflow:hidden;
}
.player::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 22% 50%,rgba(41,169,224,.13),transparent 62%);
}

.player-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;width:100%;max-width:420px;margin-inline:auto}
#viz{position:absolute;inset:0;width:100%;height:100%}

.player-logo{
  position:absolute;width:31%;height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));
  transition:transform .6s var(--ease),filter .6s var(--ease);pointer-events:none;
}
body.playing .player-logo{filter:drop-shadow(0 8px 30px rgba(41,169,224,.55));animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1.03)}50%{transform:scale(1.09)}}

.play-fab{
  position:absolute;bottom:6%;right:8%;width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;background:var(--g-signal);color:#02121e;
  box-shadow:0 14px 38px -10px rgba(41,169,224,.75);
  transition:transform .3s var(--ease);
}
.play-fab:hover{transform:scale(1.09)}
.play-fab:active{transform:scale(.96)}
.play-fab .ico{width:25px;height:25px}
.play-fab .ico-pause{display:none}
body.playing .play-fab .ico-play{display:none}
body.playing .play-fab .ico-pause{display:block}

.fab-spinner{
  display:none;position:absolute;width:26px;height:26px;border-radius:50%;
  border:2.5px solid rgba(2,18,30,.28);border-top-color:#02121e;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
body.loading .play-fab .ico{display:none}
body.loading .fab-spinner{display:block}

.player-state{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:14px;
}
body.playing .player-state{color:var(--red)}

.player-name{font-size:clamp(1.55rem,3.2vw,2.2rem);font-weight:700;margin-bottom:6px}
.player-freq{font-family:var(--mono);font-size:.95rem;color:var(--tx-dim);margin-bottom:20px}
.player-freq b{font-size:1.5rem;font-weight:500;color:var(--cyan-soft)}

.onair{
  border-left:2px solid var(--cyan);padding:2px 0 2px 16px;margin-bottom:22px;
}
.onair-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.onair-name{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin-top:3px}
.onair-time{font-family:var(--mono);font-size:.78rem;color:var(--tx-dim);margin-top:2px}

.player-bars{display:flex;align-items:flex-end;gap:3px;height:38px;margin-bottom:22px}
.player-bars i{
  flex:1;max-width:7px;height:100%;border-radius:3px;background:var(--g-signal);
  transform:scaleY(.08);transform-origin:bottom;transition:transform .09s linear;opacity:.85;
}

.player-vol{display:flex;align-items:center;gap:13px;max-width:320px}
.vol-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--tx-dim);transition:color .25s,border-color .25s}
.vol-btn:hover{color:var(--tx);border-color:rgba(255,255,255,.26)}
body.muted .vol-btn .wave1,body.muted .vol-btn .wave2{opacity:.18}

#vol{flex:1;height:4px;-webkit-appearance:none;appearance:none;border-radius:999px;background:rgba(255,255,255,.14);cursor:pointer}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(41,169,224,.2);cursor:pointer}
#vol::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--cyan);cursor:pointer}

.player-note{margin-top:16px;font-size:.82rem;color:var(--tx-mute);max-width:44ch}

/* ── 08 · Noticias (carrusel) ────────────────────────────────────────────── */
.car-ctrl{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.news-stamp{font-family:var(--mono);font-size:.73rem;letter-spacing:.06em;color:var(--tx-mute);white-space:nowrap}
.car-btns{display:flex;gap:8px}
.car-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--tx);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .3s var(--ease),transform .3s var(--ease),opacity .3s;
}
.car-btn:hover{border-color:rgba(41,169,224,.6);transform:scale(1.08)}
.car-btn[disabled]{opacity:.32;pointer-events:none}

.carousel{position:relative;margin-top:6px}

.car-track{
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:8px var(--gutter) 30px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{display:none}
.car-track.dragging{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}

.news-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  flex:0 0 clamp(272px,29vw,352px);scroll-snap-align:start;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.news-card:hover{transform:translateY(-7px);border-color:rgba(41,169,224,.42);box-shadow:0 22px 52px -18px rgba(0,0,0,.75)}

.news-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--g-signal)}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.news-card:hover .news-thumb img{transform:scale(1.07)}
.news-thumb.is-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-deep),var(--blue) 55%,var(--cyan))}
.news-thumb.is-fallback::after{content:'95.7';font-family:var(--mono);font-size:1.5rem;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.08em}

.news-body{display:flex;flex-direction:column;gap:10px;padding:22px;flex:1}
.news-date{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--amber)}
.news-title{font-size:1.06rem;font-weight:600;line-height:1.32;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-sum{font-size:.89rem;color:var(--tx-dim);line-height:1.6;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-more{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.87rem;font-weight:600;color:var(--cyan-soft);transition:gap .3s var(--ease)}
.news-card:hover .news-more{gap:12px}

.news-error{margin-top:8px;padding:18px 22px;border-radius:var(--r);border:1px solid rgba(245,166,35,.3);background:rgba(245,166,35,.07);color:var(--tx-dim);font-size:.92rem}

.skeleton{padding:0 0 22px;flex:0 0 clamp(272px,29vw,352px)}
.sk-img{aspect-ratio:16/9;background:rgba(255,255,255,.05)}
.sk-line{height:13px;margin:18px 22px 0;border-radius:5px;background:rgba(255,255,255,.05)}
.sk-line.short{width:58%}
.skeleton .sk-img,.skeleton .sk-line,.art-loading .sk-img,.art-loading .sk-line{position:relative;overflow:hidden}
.skeleton .sk-img::after,.skeleton .sk-line::after,.art-loading .sk-img::after,.art-loading .sk-line::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ── 09 · La emisora ─────────────────────────────────────────────────────── */
.info{background:linear-gradient(180deg,rgba(8,12,21,.80) 0%,rgba(5,7,13,.80) 100%)}

/* ── Cristal líquido ─────────────────────────────────────────────────────── */
/*
  Vidrio con borde luminoso: el brillo no es un `border`, sino una capa
  degradada recortada con `mask-composite`, que deja el filo iluminado arriba
  y abajo y transparente en el medio. Da relieve sin ensuciar el contenido.
*/
.liquid-glass{
  position:relative;overflow:hidden;border:none;
  background:rgba(255,255,255,.035);
  background-blend-mode:luminosity;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10),
             0 18px 44px -26px rgba(0,0,0,.85);
}
.liquid-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%,  rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0)   40%, rgba(255,255,255,0)   60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

/* ── Entrada escalonada ──────────────────────────────────────────────────── */
/*
  IMPORTANTE: `backwards`, no `forwards` ni `both`. Con esos dos la propiedad
  `transform` se queda aplicada al terminar, y un transform crea un bloque
  contenedor que anula el `backdrop-filter` del cristal. Con `backwards` el
  estado inicial se aplica antes de arrancar y se libera todo al acabar.
*/
@keyframes fade-up{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:none}
}

[data-fade]{opacity:0}
.in [data-fade]{
  opacity:1;
  animation:fade-up .7s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * .15s);
}

.info-head{max-width:62ch}
.info-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}

/* Botón de cristal: mismo filo luminoso que las tarjetas */
.btn-glass{color:var(--tx);border-radius:999px}
.btn-glass:hover{transform:translateY(-3px)}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:var(--r-sm);margin-bottom:18px;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx);
  background:rgba(255,255,255,.10);
}

/*
  Al quedar una sola tarjeta, ocupa todo el ancho; para que la línea de lectura
  no se estire, los dos párrafos se reparten en dos columnas y el título cruza
  por encima. En móvil vuelven a apilarse.
*/
.info-solo .info-card{width:100%}
@media (min-width:900px){
  .info-solo .card-body{display:grid;grid-template-columns:1fr 1fr;gap:22px clamp(32px,4vw,56px)}
  .info-solo .card-body h3{grid-column:1 / -1;margin-bottom:0}
  .info-solo .card-body p + p{margin-top:0}
}

.info-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,38px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.info-card:hover{transform:translateY(-5px);box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 26px 54px -26px rgba(0,0,0,.9)}
.info-card h3{font-size:1.2rem;font-weight:700;margin-bottom:16px}
.info-card p{color:var(--tx-dim);font-size:.95rem}
.info-card p + p{margin-top:12px}

.card-body{position:relative;z-index:1}

.mini-dl{display:grid;gap:14px}
.mini-dl > div{display:grid;grid-template-columns:82px 1fr;gap:14px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.mini-dl > div:last-child{border-bottom:0;padding-bottom:0}
.mini-dl dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.mini-dl dd{font-size:.93rem;color:var(--tx-dim)}
.mini-dl .big{font-family:var(--mono);font-size:1.35rem;font-weight:500;color:var(--tx)}

/* ── 10 · Parrilla ───────────────────────────────────────────────────────── */
.grid-clock{font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;color:var(--tx-mute);text-align:right;text-transform:uppercase}
.grid-clock b{display:block;font-size:1.7rem;font-weight:500;letter-spacing:.02em;color:var(--tx);text-transform:none}
.grid-clock span{display:block;color:var(--cyan);font-size:.7rem}

.days{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.day{
  position:relative;padding:10px 20px;border-radius:999px;min-height:42px;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);
  transition:color .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease);
}
.day:hover{color:var(--tx);transform:translateY(-2px)}
.day.on{background:var(--g-signal);color:#02121e;border-color:transparent;font-weight:500}
.day.today:not(.on)::after{content:'';position:absolute;top:7px;right:11px;width:5px;height:5px;border-radius:50%;background:var(--red)}

.grid-list{display:grid;gap:9px}

.slot{
  display:grid;grid-template-columns:92px 1fr auto;gap:20px;align-items:center;
  padding:15px 20px;border-radius:var(--r);border:1px solid var(--line-soft);
  background:var(--surface);transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.slot:hover{transform:translateX(5px);border-color:rgba(41,169,224,.32);background:var(--surface-2)}
.slot.now{border-color:rgba(224,52,43,.42);background:rgba(224,52,43,.09)}

.slot-time{font-family:var(--mono);font-size:.82rem;color:var(--tx);line-height:1.35}
.slot-time em{display:block;font-style:normal;color:var(--tx-mute);font-size:.76rem}
.slot.now .slot-time{color:var(--red)}

.slot-name{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.slot-desc{font-size:.86rem;color:var(--tx-dim);margin-top:2px}

.slot-kind{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mute);
}
.slot.now .slot-kind{color:var(--red);font-weight:500}

.grid-foot{margin-top:20px;font-size:.8rem;color:var(--tx-mute)}

/* ── 11 · Redes ──────────────────────────────────────────────────────────── */
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:18px}

.social-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.social-card::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(120% 100% at 50% 0%,var(--tint,rgba(41,169,224,.22)),transparent 62%);
  transition:opacity .45s var(--ease);
}
.social-card:hover{transform:translateY(-8px);border-color:var(--tint-solid,rgba(41,169,224,.5));box-shadow:0 22px 50px -20px rgba(0,0,0,.8)}
.social-card:hover::before{opacity:1}

.social-ico{
  position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--tint,rgba(41,169,224,.14));color:var(--tint-solid,var(--cyan));
  transition:transform .45s var(--ease);
}
.social-card:hover .social-ico{transform:scale(1.1) rotate(-5deg)}
.social-ico svg{width:23px;height:23px;fill:currentColor}

.social-name{position:relative;font-size:1.05rem;font-weight:600}
.social-at{position:relative;font-family:var(--mono);font-size:.76rem;color:var(--tx-dim);margin-top:-8px}
.social-go{position:relative;margin-top:auto;font-size:.85rem;font-weight:600;color:var(--tx-dim);display:inline-flex;align-items:center;gap:7px;transition:color .3s,gap .3s var(--ease)}
.social-card:hover .social-go{color:var(--tx);gap:11px}

.social-card.pending{opacity:.55;cursor:default}
.social-card.pending:hover{transform:none;border-color:var(--line);box-shadow:none}
.social-card.pending:hover::before{opacity:0}
.social-card.pending:hover .social-ico{transform:none}

/* ── 12 · Footer ─────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-soft);background:rgba(8,12,21,.88);padding-block:clamp(48px,6vw,80px) 0;position:relative}

.foot-in{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.25fr;gap:clamp(28px,4vw,52px);padding-bottom:50px}

.foot-col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px;font-weight:500}

.foot-brand img{width:66px;height:66px;object-fit:contain;margin-bottom:16px}
.foot-tag{color:var(--tx-dim);font-size:.93rem;margin-bottom:20px;max-width:26ch}

.foot-dl dt{font-size:.72rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mute);margin-top:14px}
.foot-dl dt:first-child{margin-top:0}
.foot-dl dd{font-size:.93rem;color:var(--tx-dim);margin-top:3px}
.foot-dl dd a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.foot-dl dd a:hover{color:var(--cyan-soft);border-bottom-color:rgba(95,200,245,.5)}

.map-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg)}

.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px;border-top:1px solid var(--line-soft)}
.foot-bottom p{font-size:.83rem;color:var(--tx-mute)}

/* ── Mascota ─────────────────────────────────────────────────────────────── */
/*
  Aparece al desplazarse y rasguea la guitarra: la variable --strum la fija el
  JavaScript según la velocidad del scroll, de 0 (quieta) a 1 (rasgueo fuerte).
*/
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:110;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);background:rgba(8,12,21,.75);color:var(--tx);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:rgba(41,169,224,.62);transform:translateY(-3px)}

/* ── 13 · Página de noticia ──────────────────────────────────────────────── */
.article{padding-block:calc(var(--nav-h) + 34px) clamp(60px,8vw,110px)}

.back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-dim);transition:color .25s,gap .25s var(--ease);
}
.back:hover{color:var(--cyan-soft);gap:12px}

.art-loading .sk-line{margin:0 0 14px;height:16px}
.art-loading .sk-img{border-radius:var(--r-lg)}

/* Cabecera a ancho completo y centrada */
.art-head{width:min(1720px,94%);margin-inline:auto;text-align:center}

.art-kick{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}

.art-title{
  font-size:clamp(2.1rem,5.6vw,4.4rem);font-weight:800;
  letter-spacing:-.042em;line-height:1.02;max-width:none;text-wrap:balance;
}

/* La entradilla se acota para que las líneas no se hagan interminables */
.art-lead{
  margin:22px auto 0;font-size:clamp(1.08rem,1.9vw,1.42rem);
  color:var(--tx-dim);line-height:1.55;max-width:86ch;font-weight:300;
  text-wrap:pretty;
}

/* Foto contenida: acompaña a la nota, no la domina */
.art-figure{
  margin:clamp(30px,4vw,46px) auto;width:min(920px,92%);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
}
.art-figure img{width:100%;height:auto;max-height:440px;object-fit:cover}

.art-copy{max-width:min(74ch,92%)}

/* Solo el cuerpo de la nota: así no alcanza al indicador de carga */
#artText p{
  font-size:1.06rem;line-height:1.78;color:var(--tx-dim);
  /* Justificado sin guiones de partición: ver §23. La columna de la nota es
     ancha, así que aquí el sobrante se reparte sin que se noten los huecos. */
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  -webkit-hyphens:none;
  word-spacing:-.012em;
  text-wrap:pretty;
}
#artText p + p{margin-top:18px}

/* Los párrafos del cuerpo entran escalonados al reemplazar al resumen */
.art-p{animation:pIn .6s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes pIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.art-loading-more{
  margin-top:20px;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-mute);
  display:inline-flex;align-items:center;gap:10px;
}
.art-loading-more::before{
  content:'';width:13px;height:13px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--cyan);
  animation:spin .8s linear infinite;
}

.art-share{display:flex;align-items:center;gap:10px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line-soft)}
.art-share-lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mute);margin-right:4px}
.share-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);background:var(--surface);color:var(--tx-dim);
  transition:color .28s,border-color .28s,transform .28s var(--ease);
}
.share-btn:hover{color:var(--cyan-soft);border-color:rgba(41,169,224,.55);transform:translateY(-3px)}
.share-btn.copied{color:#4ce08a;border-color:rgba(76,224,138,.6)}

.art-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

.share-toast{
  font-size:.8rem;color:var(--tx-mute);margin-left:6px;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.share-toast.on{opacity:1;transform:none}

.art-more{margin-top:clamp(56px,7vw,92px)}
.art-more .h3{margin-bottom:24px}
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.more-card{
  display:flex;flex-direction:column;gap:0;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.more-card:hover{transform:translateY(-6px);border-color:rgba(41,169,224,.42)}
.more-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--g-signal)}
.more-thumb img{width:100%;height:100%;object-fit:cover}
.more-thumb.is-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-deep),var(--blue) 55%,var(--cyan))}
.more-thumb.is-fallback::after{content:'95.7';font-family:var(--mono);font-size:1.2rem;color:rgba(255,255,255,.5)}
.more-card h3{padding:18px;font-size:.97rem;font-weight:600;line-height:1.36;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.art-missing{text-align:center;padding-block:clamp(50px,8vw,100px)}
.art-missing .sub{margin:16px auto 30px}

/* ── 14 · Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .foot-in{grid-template-columns:1fr 1fr}
}

/*
  El menú tiene siete entradas. Por debajo de 1180 px no caben junto a la marca
  y al botón de escuchar, así que a partir de ahí manda la hamburguesa: es un
  corte más alto de lo habitual, pero apretarlas se ve peor.
*/
@media (max-width:1180px){
  .nav-links{display:none}
  .burger{display:block}
  .drawer{display:flex}
}

@media (max-width:900px){
  .player{grid-template-columns:1fr}
  .player-visual{max-width:340px}
  .slider-stage{max-height:none}
}

@media (max-width:620px){
  :root{--nav-h:64px}
  .btn-live-txt{display:none}
  .btn-live{padding:10px 14px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;min-width:min(100%,180px)}
  .dot{width:24px}
  .dot.on{width:40px}
  .band-head-row{flex-direction:column;align-items:flex-start}
  .car-ctrl{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between}
  .grid-clock{text-align:left}
  .slot{grid-template-columns:78px 1fr;gap:14px}
  .slot-kind{grid-column:2;margin-top:4px}
  .foot-in{grid-template-columns:1fr}
  .to-top{right:14px;bottom:14px}
  .cursor,.cursor-ring{display:none}
  .art-figure{width:100%;border-radius:0;border-inline:0}
}

@media (pointer:coarse){
  .cursor,.cursor-ring{display:none!important}
}


/* ── 15 · Cinta de señal ─────────────────────────────────────────────────── */
/*
  Banda de texto en marquesina entre la portada y el reproductor. Da respiro
  entre dos bloques densos y repite lo esencial: dial, cobertura y horario.
*/
.ticker{
  position:relative;overflow:hidden;
  border-block:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(27,79,156,.16),rgba(41,169,224,.10) 45%,rgba(245,166,35,.12));
  padding-block:13px;
}
.ticker::before,.ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

.ticker-track{display:flex;width:max-content;animation:tickerRun 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}

.ticker-run{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tx-dim);
}
.ticker-run b{color:var(--cyan-soft);font-weight:500}
.ticker-run i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.7;margin-inline:22px}

@keyframes tickerRun{to{transform:translateX(-50%)}}

/* ── 16 · Salcedo · postales que giran ───────────────────────────────────── */
/*
  Carrusel de tarjetas que rotan sobre su eje vertical al pasar el ratón.
  El giro vive en `.place-inner`; las dos caras se apilan con `backface-
  visibility:hidden`, de modo que sólo una es visible a la vez. En pantallas
  táctiles el giro se activa con un toque (clase `.is-flipped` desde el JS).
*/
.places{position:relative}

.places-intro .sub{margin-top:14px;max-width:46ch}

.places-rail{margin-top:6px}

/* Carril: hereda el comportamiento del carrusel de noticias, con más aire
   arriba y abajo para que la sombra del giro no se recorte. */
.place-track{
  align-items:stretch;gap:22px;
  padding:26px var(--gutter) 40px;
  perspective:1600px;perspective-origin:50% 45%;
}

.place{flex:0 0 clamp(280px,31vw,376px);scroll-snap-align:start;display:flex}

.place-card{
  position:relative;width:100%;aspect-ratio:3/2;
  border-radius:var(--r-lg);
  transform-style:preserve-3d;outline-offset:6px;
  cursor:pointer;
}

.place-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .78s var(--ease),box-shadow .5s var(--ease);
  box-shadow:0 22px 48px -26px rgba(0,0,0,.9);
  border-radius:inherit;
}
/* Las pares giran al contrario: el carril respira en vez de latir a la vez */
.place .place-inner{--turn:180deg}
.place:nth-child(even) .place-inner{--turn:-180deg}

.place-card:hover .place-inner,
.place-card:focus-visible .place-inner,
.place-card.is-flipped .place-inner{
  transform:rotateY(var(--turn));
  box-shadow:0 34px 70px -26px rgba(0,0,0,.95);
}

.place-face{
  position:absolute;inset:0;overflow:hidden;
  border-radius:inherit;border:1px solid var(--line);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* ── Cara frontal: la fotografía ── */
.place-front{background:var(--bg-2)}
.place-front img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
  filter:saturate(.92) contrast(1.04);
}
.place-card:hover .place-front img{transform:scale(1.08)}

.place-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,7,13,.55) 0%,transparent 34%,transparent 44%,rgba(5,7,13,.86) 100%),
    linear-gradient(120deg,rgba(27,79,156,.28),transparent 60%);
}

.place-front-txt{
  position:absolute;inset:auto 0 0;padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:7px;
}

.place-no{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.22em;
  color:var(--amber);
}
.place-front .place-no{
  align-self:flex-start;padding:5px 11px;border-radius:999px;margin-bottom:2px;
  background:rgba(5,7,13,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);color:var(--cyan-soft);
}

.place-name{
  font-size:1.16rem;font-weight:700;letter-spacing:-.025em;line-height:1.18;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

.place-hint{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-dim);
}
.place-hint svg{width:14px;height:14px;fill:none;flex:none;
  transition:transform .5s var(--ease)}
.place-hint svg path{stroke:var(--cyan)}
.place-card:hover .place-hint svg{transform:rotate(-140deg)}

/* ── Cara trasera: la descripción ── */
.place-back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(18px,2vw,24px);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(41,169,224,.28),transparent 58%),
    linear-gradient(160deg,var(--blue) 0%,var(--blue-deep) 62%,#061a3c 100%);
  border-color:rgba(95,200,245,.32);
}
.place:nth-child(even) .place-back{transform:rotateY(-180deg)}

.place-back::after{
  content:'';position:absolute;inset:auto 0 0;height:3px;
  background:var(--g-text);opacity:.85;
}

.place-back .place-no{color:var(--cyan-soft)}

.place-back-name{
  font-size:1.02rem;font-weight:700;letter-spacing:-.025em;color:#fff;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.16);
}
.place-back p{
  font-size:.815rem;line-height:1.53;color:rgba(234,240,247,.88);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;
}
.place-tag{
  margin-top:auto;align-self:flex-start;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;
}

.places-foot{
  margin-top:4px;font-size:.93rem;color:var(--tx-dim);
}
.places-foot a{color:var(--cyan-soft);border-bottom:1px solid rgba(95,200,245,.4);transition:border-color .25s}
.places-foot a:hover{border-bottom-color:var(--cyan-soft)}

/* ── 17 · Retoques de rediseño ───────────────────────────────────────────── */
/*
  Aquí vivía la numeración editorial de cada banda (01, 02, 03…), un numeral en
  contorno al margen derecho. Se retiró a petición del cliente: los `data-sec`
  de los `<section>` se quedan en el HTML como referencia de orden, pero ya no
  pintan nada.
*/

/* Filo superior de cada banda: una línea que nace en el centro */
.band + .band::after{
  content:'';position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(1240px,92%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* Titulares con acento de color en la última palabra */
.h2 .hl{
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Botón principal con un halo que respira al pasar por encima */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:'';position:absolute;inset:0;z-index:-1;translate:-120% 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:translate .7s var(--ease);
}
.btn-primary:hover::after{translate:120% 0}

/* Enlace del menú: subrayado que crece desde la izquierda */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:5px;height:1.5px;
  border-radius:2px;background:var(--g-signal);
  scale:0 1;transform-origin:left;transition:scale .32s var(--ease);
}
.nav-links a:hover::after,.nav-links a.current::after{scale:1 1}
.nav-links a.current{color:var(--tx)}

/* ── 18 · Responsive del rediseño ────────────────────────────────────────── */
@media (max-width:900px){
  .places-intro .sub{max-width:none}
}

@media (max-width:620px){
  .place{flex:0 0 min(86vw,340px)}
  .place-card{aspect-ratio:4/3}
  .place-front-txt{padding:16px 18px 18px;gap:5px}
  .place-name{font-size:1.06rem}
  .ticker-run{font-size:.68rem;letter-spacing:.15em}
}

/* En pantallas táctiles el giro sólo llega con el toque: sin `:hover` fantasma */
@media (hover:none){
  .place-card:hover .place-inner{transform:none}
  .place-card.is-flipped .place-inner{transform:rotateY(var(--turn))}
  .place-card:hover .place-front img{transform:scale(1.02)}
}


/* ── 19 · Fiestas · 107 años de cantonización ────────────────────────────── */
.fiesta{
  background:
    radial-gradient(80% 120% at 12% 0%,rgba(245,166,35,.10),transparent 58%),
    radial-gradient(70% 110% at 92% 100%,rgba(224,52,43,.09),transparent 60%);
}

.fiesta-in{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,5vw,64px);align-items:center}

.fiesta-h{margin-top:2px}
.fiesta-viva{
  display:block;font-size:clamp(2.4rem,6.5vw,4.4rem);font-weight:800;
  letter-spacing:-.045em;line-height:.95;
  background:linear-gradient(100deg,var(--amber) 0%,#ffcf6d 34%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fiesta-sub{
  display:block;margin-top:10px;
  font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.025em;color:var(--tx);
}

.fiesta-p{color:var(--tx-dim);margin-top:16px;font-size:1.02rem;max-width:52ch}
.fiesta-p b{color:var(--tx);font-weight:600}

.fiesta-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
.fiesta-note{
  margin-top:16px;font-family:var(--mono);font-size:.73rem;
  letter-spacing:.09em;color:var(--tx-mute);
}

/*
  El numeral, el anillo y —al pasar el ratón— la foto del patrono.

  Todo se apila en la misma celda de rejilla (`grid-area: 1/1`), así que el
  círculo de la fotografía, el «107» y la palabra «años» quedan centrados unos
  sobre otros sin posicionamiento absoluto.
*/
.fiesta-mark{
  position:relative;display:grid;place-items:center;
  aspect-ratio:1;width:100%;max-width:232px;margin-inline:auto;
  border:0;background:none;padding:0;cursor:pointer;
  border-radius:50%;outline-offset:8px;
}

.fiesta-num{
  grid-area:1/1;z-index:3;font-family:var(--mono);font-weight:500;
  font-size:clamp(3rem,6.4vw,4.6rem);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.4px rgba(245,166,35,.6);
  transition:transform .6s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.fiesta-years{
  grid-area:1/1;z-index:3;align-self:end;margin-bottom:13%;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--amber);
  transition:opacity .4s var(--ease);
}
.fiesta-ring{
  grid-area:1/1;z-index:3;width:100%;height:100%;border-radius:50%;
  border:1px dashed rgba(245,166,35,.32);
  animation:fiestaSpin 46s linear infinite;
  transition:border-color .5s var(--ease);
}
/* El resplandor va aparte del anillo: girándolo no se notaría y gasta pintura */
.fiesta-mark::before{
  content:'';position:absolute;inset:11%;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(245,166,35,.14),transparent 66%);
  transition:opacity .5s var(--ease);
}
@keyframes fiestaSpin{to{transform:rotate(360deg)}}

/* ── La fotografía del Príncipe San Miguel ── */
.fiesta-photo{
  grid-area:1/1;z-index:2;position:relative;
  width:86%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  /* Cerrada: un punto en el centro que se abre como un diafragma */
  clip-path:circle(0% at 50% 50%);
  transition:clip-path .72s var(--ease);
}
.fiesta-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  transform:scale(1.22);
  transition:transform 1.1s var(--ease);
}
/* Velo: sin él, el «107» en contorno se pierde sobre el cielo azul */
.fiesta-photo::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 46%,rgba(5,7,13,.62),rgba(5,7,13,.30) 62%,rgba(5,7,13,.72) 100%),
    linear-gradient(180deg,rgba(10,42,94,.30),rgba(245,166,35,.14));
}

.fiesta-cap{
  grid-area:1/1;z-index:4;align-self:end;
  transform:translateY(150%);
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(245,166,35,.4);background:rgba(5,7,13,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);
  opacity:0;transition:opacity .45s var(--ease),transform .55s var(--ease);
}

.fiesta-mark:hover .fiesta-photo,
.fiesta-mark:focus-visible .fiesta-photo,
.fiesta-mark.is-open .fiesta-photo{clip-path:circle(50% at 50% 50%)}

.fiesta-mark:hover .fiesta-photo img,
.fiesta-mark:focus-visible .fiesta-photo img,
.fiesta-mark.is-open .fiesta-photo img{transform:scale(1)}

.fiesta-mark:hover .fiesta-num,
.fiesta-mark:focus-visible .fiesta-num,
.fiesta-mark.is-open .fiesta-num{
  transform:scale(.82) translateY(-14%);
  -webkit-text-stroke-color:rgba(255,215,140,.95);
}

.fiesta-mark:hover .fiesta-ring,
.fiesta-mark:focus-visible .fiesta-ring,
.fiesta-mark.is-open .fiesta-ring{border-color:rgba(245,166,35,.68)}

.fiesta-mark:hover .fiesta-years,
.fiesta-mark:focus-visible .fiesta-years,
.fiesta-mark.is-open .fiesta-years{opacity:0}

.fiesta-mark:hover::before,
.fiesta-mark:focus-visible::before,
.fiesta-mark.is-open::before{opacity:0}

.fiesta-mark:hover .fiesta-cap,
.fiesta-mark:focus-visible .fiesta-cap,
.fiesta-mark.is-open .fiesta-cap{opacity:1;transform:translateY(46%)}

/* ── 20 · Pestañas laterales (Facebook y fiestas) ────────────────────────── */
/*
  Dos paneles anclados a los bordes, uno a cada lado. Cerrados se ve sólo la
  pestaña; al pulsarla el panel entra deslizándose. El contenido pesado —el muro
  de Facebook, el visor del PDF— no se carga hasta la primera apertura: así la
  portada no arrastra recursos externos ni de 2,7 MB si nadie los pide.
*/
.sidep{
  position:fixed;top:50%;translate:0 -50%;z-index:115;
  display:flex;align-items:center;
  --sp-w:330px;
}
.sidep-left{left:0}
.sidep-right{right:0;flex-direction:row-reverse}

/* Cuando uno está abierto, el otro se aparta para no solaparse en pantallas justas */
.sidep-tab{
  order:2;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px 9px;
  border:1px solid var(--line);
  background:rgba(8,12,21,.82);color:var(--tx);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.sidep-left .sidep-tab{border-left:0;border-radius:0 var(--r) var(--r) 0}
.sidep-right .sidep-tab{border-right:0;border-radius:var(--r) 0 0 var(--r)}

.sidep-left .sidep-tab:hover{border-color:rgba(74,155,255,.55);background:rgba(24,119,242,.16)}
.sidep-right .sidep-tab:hover{border-color:rgba(245,166,35,.55);background:rgba(245,166,35,.14)}

.sidep-left .sidep-tab .ico{width:17px;height:17px;fill:#4a9bff}
.sidep-right .sidep-tab .ico{width:17px;height:17px;fill:var(--amber)}

.sidep-tab-txt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
.sidep-right .sidep-tab-txt{rotate:180deg}

.sidep-panel{
  order:1;width:var(--sp-w);
  display:flex;flex-direction:column;gap:12px;
  padding:16px;
  border:1px solid var(--line);
  background:rgba(8,12,21,.94);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:margin .5s var(--ease),opacity .35s var(--ease),visibility .5s;
}
.sidep-left  .sidep-panel{border-left:0;border-radius:0 var(--r-lg) var(--r-lg) 0;margin-left:calc(-1 * var(--sp-w) - 2px)}
.sidep-right .sidep-panel{border-right:0;border-radius:var(--r-lg) 0 0 var(--r-lg);margin-right:calc(-1 * var(--sp-w) - 2px)}

.sidep.open .sidep-panel{opacity:1;visibility:visible;pointer-events:auto}
.sidep-left.open  .sidep-panel{margin-left:0}
.sidep-right.open .sidep-panel{margin-right:0}

.sidep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sidep-title{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  line-height:1.5;padding-top:3px;
}
.sidep-right .sidep-title{color:var(--amber)}

.sidep-close{
  width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--tx-dim);
  transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.sidep-close:hover{color:var(--tx);border-color:rgba(255,255,255,.28);transform:rotate(90deg)}

/* ── Tarjeta de Facebook ── */
.fb-card{
  display:flex;flex-direction:column;gap:13px;
  padding:16px;border-radius:var(--r);
  border:1px solid var(--line-soft);background:var(--surface);
}
.fb-card-top{display:flex;align-items:center;gap:12px}
.fb-card-top img{width:46px;height:46px;object-fit:contain;flex:none}
.fb-card-name{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.fb-card-at{font-family:var(--mono);font-size:.72rem;color:var(--tx-dim);margin-top:1px}
.fb-card-txt{font-size:.87rem;line-height:1.6;color:var(--tx-dim)}
.fb-card-cta{align-self:stretch}

/* El muro, cuando el JavaScript logra montarlo, sustituye a la tarjeta */
.fb-wall{display:none}
.fb-wall.on{display:block;height:420px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft)}
.fb-wall iframe{width:100%;height:100%;border:0}
.sidep.wall-on .fb-card{display:none}

/* ── Visor del programa de fiestas ── */
.pbox-kick{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--tx-mute);margin-top:-4px;
}

.pbox-frame{
  position:relative;height:min(430px,52vh);
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);background:#12161f;
}
.pbox-frame iframe,.pbox-frame embed{position:relative;z-index:1;width:100%;height:100%;border:0}
.pbox-fallback{
  position:absolute;inset:0;z-index:0;display:grid;place-content:center;
  padding:22px;text-align:center;font-size:.84rem;line-height:1.6;color:var(--tx-dim);
}
.pbox-fallback a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.45)}

.pbox-acts{display:flex;gap:8px}
.pbox-acts .btn{
  flex:1;padding:9px 12px;min-height:38px;
  font-size:.8rem;gap:7px;white-space:nowrap;
}
.pbox-acts .btn .ico{width:15px;height:15px}
.pbox-acts .btn-primary{background:var(--g-wave);color:#2a1400;box-shadow:0 8px 22px -10px rgba(245,166,35,.6)}

/* Pantallas bajas: los paneles no deben salirse por arriba ni por abajo */
@media (max-height:760px){
  .fb-wall.on{height:min(360px,44vh)}
  .pbox-frame{height:min(330px,40vh)}
}

/*
  En móvil no hay ancho para capas laterales sobre el contenido: se ocultan.
  La tarjeta de Facebook de «Redes» y los botones de la banda de fiestas
  —«Ver el programa» y «Descargar el PDF»— siguen ahí, y funcionan igual.
*/
@media (max-width:900px){
  .sidep{display:none}
  .fiesta-in{grid-template-columns:1fr}
  .fiesta-mark{max-width:200px;order:-1}
}

/* ── 21 · Movimiento reducido ────────────────────────────────────────────── */
/*
  Windows activa «reducir movimiento» de fábrica en muchas instalaciones. Por
  eso aquí sólo se apaga lo intrusivo —bucles largos, parallax, partículas— y
  se conservan las microinteracciones: giros de tarjeta, hover, fundidos. Sin
  esto, media web quedaría plana en los equipos del cliente.
*/
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* Bucles infinitos de ambiente */
  .aurora-blob,.ticker-track,.fiesta-ring{animation:none!important}
  .player-logo,body.playing .player-logo{animation:none!important}

  /* Efectos que tapan o desplazan mucho */
  .curtain{display:none}
  .slide-wipe{display:none}
  .cursor,.cursor-ring{display:none}

  /* Nada puede quedarse invisible si el JS no llega a marcarlo */
  [data-reveal],[data-fade],.card-body{opacity:1!important;transform:none!important}

  /* El giro de las postales se mantiene: es la función, no el adorno,
     pero se acorta para que no resulte mareante. */
  .place-inner{transition-duration:.28s}
}

/* Red de seguridad: si el observador no llega a marcar un bloque, a los 6 s
   el JS añade `.seen`; y si tampoco hubiera JS, esto lo deja legible igual. */
.no-js [data-reveal],.no-js [data-fade]{opacity:1;transform:none}

/* ── 22 · Página «Quiénes somos» ─────────────────────────────────────────── */
/*
  Comparte cabecera, pie y sistema visual con la portada. Lo propio de aquí es
  la composición: una portada de texto, misión y visión enfrentadas, la historia
  junto a una fotografía del cantón y tres tarjetas de alcance.
*/

/* ── Portada ── */
.nos-hero{
  padding-block:calc(var(--nav-h) + clamp(34px,4.6vw,62px)) clamp(40px,5vw,68px);
  position:relative;
}
.nos-hero::after{
  content:'';position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/*
  Los titulares de las páginas interiores van **en una sola línea** en
  escritorio, y a ancho completo.

  Eso no se consigue con CSS, se consigue **escribiendo corto**: a 4 rem entran
  unos 34 caracteres en el ancho del contenedor. Los cuatro titulares están por
  debajo de esa cuenta —el más largo, «Al servicio de la colectividad», tiene
  30—. Si algún día se cambia uno por otro más largo, volverá a partirse en dos
  líneas; ahí está el límite.

  A propósito **no se fuerza con `nowrap`**: eso obligaría a una sola línea a
  cualquier precio y en móvil el titular se saldría de la pantalla. Cabe porque
  es corto, no porque se le prohíba partir; y en móvil, donde no cabe, parte con
  normalidad, que es lo que tiene que hacer.
*/
.nos-h1{
  font-size:clamp(2.1rem,5.4vw,4rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.02;max-width:none;
  text-wrap:balance;
}

/* La entradilla también a ancho completo, como se pidió */
.nos-lead{
  margin-top:20px;max-width:none;
  font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.7;color:var(--tx-dim);
}
.nos-lead b{color:var(--tx);font-weight:600}

/* Cifras de cabecera: hairlines verticales, sin cajas */
.nos-datos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(34px,4vw,54px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line-soft);
}
.nos-datos > div{padding-left:18px;border-left:1px solid var(--line)}
.nos-datos dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tx-mute);
}
.nos-datos dd{
  margin-top:7px;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.1;color:var(--tx);
}
.nos-datos dd span{
  display:block;margin-top:3px;
  font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cyan);
}

/* ── Misión y visión ── */
.nos-mv{background:linear-gradient(180deg,rgba(8,12,21,.72),rgba(5,7,13,.72))}

.mv-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}

.mv-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,40px);
  display:flex;flex-direction:column;gap:18px;
  transition:transform .45s var(--ease);
}
.mv-card:hover{transform:translateY(-5px)}

/* Filo de color en el canto superior: cian la misión, ámbar la visión */
.mv-card::after{
  content:'';position:absolute;inset:0 0 auto;height:3px;
  background:var(--g-signal);
}
.mv-card-alt::after{background:var(--g-wave)}

.mv-tag{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
}
.mv-card-alt .mv-tag{color:var(--amber)}

.mv-txt{font-size:1rem;line-height:1.72;color:var(--tx-dim)}

/* ── Historia ── */
.nos-historia-in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,70px);align-items:center;
}
.nos-p{color:var(--tx-dim);margin-top:16px;font-size:1.01rem;line-height:1.72;max-width:52ch}
.nos-p b{color:var(--tx);font-weight:600}
.nos-historia-txt .h2{margin-top:4px}

.nos-quote{
  margin-top:30px;padding:22px 0 6px 24px;
  border-left:2px solid var(--cyan);
}
.nos-quote p{
  font-size:clamp(1.12rem,2.1vw,1.42rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.34;color:var(--tx);text-wrap:balance;
}
.nos-quote cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-mute);
}

.nos-figura{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  box-shadow:0 30px 66px -32px rgba(0,0,0,.9);
}
.nos-figura img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.9) contrast(1.05);
  transition:transform 1.2s var(--ease);
}
.nos-figura:hover img{transform:scale(1.05)}
.nos-figura figcaption{
  position:absolute;inset:auto 0 0;padding:34px 22px 18px;
  background:linear-gradient(180deg,transparent,rgba(5,7,13,.9));
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tx-dim);
}

/* ── A quién llegamos ── */
.alc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.alc-card{
  position:relative;border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .45s var(--ease);
}
.alc-card:hover{transform:translateY(-6px)}

.alc-card h3{font-size:1.18rem;font-weight:700;letter-spacing:-.025em}
.alc-card p{font-size:.93rem;line-height:1.68;color:var(--tx-dim)}

/* ── Cierre ── */
.nos-cta{padding-block:clamp(54px,7vw,96px)}
.nos-cta-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(22px,4vw,54px);flex-wrap:wrap;
  padding:clamp(28px,4vw,48px);border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(80% 140% at 8% 0%,rgba(41,169,224,.14),transparent 60%),
    rgba(255,255,255,.04);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
}
.nos-cta-in .sub{margin-top:10px}
.nos-cta-btns{display:flex;flex-wrap:wrap;gap:13px}

/* ── Responsive ── */
@media (max-width:900px){
  .mv-duo{grid-template-columns:1fr}
  .nos-historia-in{grid-template-columns:1fr}
  .nos-figura{order:-1}
  .alc-grid{grid-template-columns:1fr}
  .nos-datos{grid-template-columns:1fr 1fr;gap:22px}
}

@media (max-width:620px){
  .nos-h1{max-width:none}
  .nos-datos > div{padding-left:14px}
  .nos-cta-in{flex-direction:column;align-items:flex-start}
  .nos-cta-btns{width:100%}
  .nos-cta-btns .btn{flex:1;min-width:min(100%,180px)}
}

/* ── 23 · Texto justificado ──────────────────────────────────────────────── */
/*
  Los párrafos de lectura van justificados en las tres páginas, y **sin guiones
  de partición**: `hyphens: none`.

  El guión al final de la línea no gusta y se quita. A cambio hay que darle al
  navegador otra forma de repartir el aire, o el español justificado abre huecos
  entre palabras. Se hace con tres piezas:

  - `text-wrap: pretty`, que reparte las líneas mirando el párrafo entero en vez
    de ir línea a línea.
  - Columnas anchas: se justifica la prosa que tiene sitio, y las columnas
    estrechas se dejan a la izquierda (ver el bloque de abajo).
  - `word-spacing` con margen negativo, que permite apretar un poco las palabras
    antes de estirarlas.

  Se justifica sólo la prosa. Quedan alineados a la izquierda los rótulos, las
  cifras, la tipografía monoespaciada y los titulares: justificar una línea
  suelta o un dato no arregla nada y sí desordena el ritmo.
*/
.info-card p,
.fiesta-p,
.sub,
.news-sum,
.place-back p,
.nos-lead,
.nos-p,
.mv-txt,
.alc-card p,
.fb-card-txt,
.art-lead,
.foot-tag{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;-webkit-hyphens:none;
  word-spacing:-.012em;
  /* Reparte las líneas mirando el párrafo entero, no una a una */
  text-wrap:pretty;
}

/*
  Las columnas estrechas —el resumen de las noticias, el dorso de las postales,
  la tarjeta de Facebook— también van justificadas. Sin guiones el reparto es
  más difícil ahí, así que se les deja algo más de margen para apretar antes de
  estirar: es la diferencia entre un hueco y un boquete.
*/
.news-sum,
.place-back p,
.fb-card-txt{word-spacing:-.028em}

/* El reclamo del pie son dos líneas: justificarlo no arregla nada */
.foot-tag{text-align:left;word-spacing:normal}

/* En móvil todo lo demás también: a 375 px ninguna columna da para justificar */
@media (max-width:620px){
  .info-card p,
  .fiesta-p,
  .sub,
  .nos-lead,
  .nos-p,
  .mv-txt,
  .alc-card p,
  .art-lead,
  #artText p{text-align:left;word-spacing:normal}
}

/* ── 24 · Misión y visión: el dibujo que se traza al pasar el ratón ──────── */
/*
  Cada tarjeta lleva un SVG en la esquina, apagado hasta que el ratón entra.

  El trazo se dibuja con el truco de `stroke-dasharray` + `stroke-dashoffset`:
  la línea se pinta entera pero desplazada fuera de sí misma, y al llegar el
  `hover` el desfase vuelve a cero y parece que se dibuja sola. Los `r` de los
  círculos determinan el perímetro, así que cada `dasharray` es su 2πr redondeado
  hacia arriba.
*/
.mv-card{isolation:isolate}

/*
  El dibujo va **junto al rótulo**, pequeño, en la misma línea que «Misión» o
  «Visión». Antes ocupaba una esquina de la tarjeta y se cruzaba con el párrafo,
  que al estar justificado llega hasta los dos bordes; aquí no estorba a nadie y
  la tarjeta recupera su altura normal.
*/
.mv-tag{display:flex;align-items:center;gap:10px}

.mv-art{
  width:26px;height:26px;flex:none;
  opacity:.45;
  transition:opacity .4s var(--ease),transform .6s var(--ease);
}
.mv-art svg{width:100%;height:100%;overflow:visible;display:block}
.mv-card:hover .mv-art,
.mv-card:focus-within .mv-art{opacity:1;transform:scale(1.12)}

.mv-txt{position:relative;z-index:1}

/* ── Misión: la diana y el dardo ── */
.mv-ring{
  fill:none;stroke:var(--cyan);stroke-width:2;
  transform-origin:60px 60px;
  transition:stroke-dashoffset .8s var(--ease),opacity .4s,transform .8s var(--ease);
}
.r1{stroke-dasharray:327;stroke-dashoffset:327}
.r2{stroke-dasharray:227;stroke-dashoffset:227}
.r3{stroke-dasharray:126;stroke-dashoffset:126}
.mv-card:hover .r1,.mv-card:focus-within .r1{stroke-dashoffset:0;transition-delay:0s}
.mv-card:hover .r2,.mv-card:focus-within .r2{stroke-dashoffset:0;transition-delay:.1s}
.mv-card:hover .r3,.mv-card:focus-within .r3{stroke-dashoffset:0;transition-delay:.2s}

.mv-bull{
  fill:var(--amber);transform-origin:60px 60px;
  scale:0;transition:scale .5s var(--ease) .55s;
}
.mv-card:hover .mv-bull,.mv-card:focus-within .mv-bull{scale:1}

/* El dardo entra desde fuera y clava en el centro */
.mv-dart,.mv-fletch{
  stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;
  opacity:0;translate:14px -14px;
  transition:opacity .3s var(--ease) .4s,translate .45s cubic-bezier(.5,0,.2,1) .4s;
}
.mv-fletch{fill:var(--amber);stroke-width:1.4}
.mv-card:hover .mv-dart,.mv-card:focus-within .mv-dart,
.mv-card:hover .mv-fletch,.mv-card:focus-within .mv-fletch{opacity:1;translate:0 0}

/* ── Visión: el ojo que se abre ── */
.mv-lid{
  fill:none;stroke:var(--amber);stroke-width:2;
  transform-origin:60px 60px;
  scale:1 .12;                       /* cerrado: una raya */
  transition:scale .6s var(--ease);
}
.mv-card:hover .mv-lid,.mv-card:focus-within .mv-lid{scale:1 1}

.mv-iris{
  fill:none;stroke:var(--amber);stroke-width:2;
  transform-origin:60px 60px;scale:0;
  transition:scale .55s var(--ease) .18s;
}
.mv-pupil{
  fill:var(--amber);transform-origin:60px 60px;scale:0;
  transition:scale .5s var(--ease) .3s;
}
.mv-card:hover .mv-iris,.mv-card:focus-within .mv-iris,
.mv-card:hover .mv-pupil,.mv-card:focus-within .mv-pupil{scale:1}

/* Tres haces que salen hacia el horizonte */
.mv-beam{
  stroke:var(--amber);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;opacity:.75;
  transition:stroke-dashoffset .5s var(--ease);
}
.mv-card:hover .b1,.mv-card:focus-within .b1{stroke-dashoffset:0;transition-delay:.42s}
.mv-card:hover .b2,.mv-card:focus-within .b2{stroke-dashoffset:0;transition-delay:.5s}
.mv-card:hover .b3,.mv-card:focus-within .b3{stroke-dashoffset:0;transition-delay:.58s}

/* ── 25 · La plaza y los fuegos artificiales ─────────────────────────────── */
/*
  Al pasar el ratón por la fotografía del Parque Central estallan seis fuegos
  sobre la plaza y sube el «¡Viva Salcedo!».

  Cada fuego es **un solo elemento**: un punto de 3 px que dispara doce chispas
  con doce `box-shadow` colocados en círculo. La animación sube el punto, lo
  expande y lo apaga. Sin `canvas`, sin librerías y sin una sola imagen más.
*/
.nos-figura{cursor:pointer;outline-offset:6px}

.nos-figura img{transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.nos-figura:hover img,
.nos-figura:focus-visible img,
.nos-figura.is-viva img{transform:scale(1.06);filter:saturate(1.05) brightness(.62)}

/* ── El cielo de los fuegos ── */
.fw-sky{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  border-radius:inherit;
}

.fw{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:transparent;opacity:0;
}
.nos-figura:hover .fw,
.nos-figura:focus-visible .fw,
.nos-figura.is-viva .fw{animation:fwGo 1.9s ease-out infinite}

/* Posición, color y turno de cada uno: nunca estallan a la vez */
.fw1{left:18%;top:34%;--fw:var(--amber);animation-delay:0s}
.fw2{left:38%;top:20%;--fw:var(--cyan-soft);animation-delay:.32s}
.fw3{left:58%;top:30%;--fw:#ff8f6d;animation-delay:.64s}
.fw4{left:76%;top:18%;--fw:var(--amber);animation-delay:.96s}
.fw5{left:28%;top:14%;--fw:#8fe3ff;animation-delay:1.28s}
.fw6{left:66%;top:40%;--fw:#ffd36d;animation-delay:1.6s}

/*
  Las doce chispas. Los desplazamientos son un círculo de radio 26 px muestreado
  cada 30°; al escalar el elemento, el `box-shadow` escala con él y las chispas
  se separan.
*/
@keyframes fwGo{
  0%{opacity:0;transform:translateY(26px) scale(.2)}
  12%{opacity:1}
  100%{
    opacity:0;transform:translateY(0) scale(3.4);
    box-shadow:
      0 -26px 0 0 var(--fw), 13px -22px 0 0 var(--fw), 22px -13px 0 0 var(--fw),
      26px 0 0 0 var(--fw), 22px 13px 0 0 var(--fw), 13px 22px 0 0 var(--fw),
      0 26px 0 0 var(--fw), -13px 22px 0 0 var(--fw), -22px 13px 0 0 var(--fw),
      -26px 0 0 0 var(--fw), -22px -13px 0 0 var(--fw), -13px -22px 0 0 var(--fw);
  }
}

/* Al arrancar, las chispas están todas en el centro */
.fw{
  box-shadow:
    0 0 0 0 var(--fw), 0 0 0 0 var(--fw), 0 0 0 0 var(--fw),
    0 0 0 0 var(--fw), 0 0 0 0 var(--fw), 0 0 0 0 var(--fw),
    0 0 0 0 var(--fw), 0 0 0 0 var(--fw), 0 0 0 0 var(--fw),
    0 0 0 0 var(--fw), 0 0 0 0 var(--fw), 0 0 0 0 var(--fw);
}

/* ── El vítor ── */
.viva{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:20px;
  opacity:0;transition:opacity .45s var(--ease);
}
.nos-figura:hover .viva,
.nos-figura:focus-visible .viva,
.nos-figura.is-viva .viva{opacity:1}

.viva b{
  font-size:clamp(1.7rem,4.4vw,2.9rem);font-weight:800;
  letter-spacing:-.04em;line-height:1;
  background:linear-gradient(100deg,var(--amber) 0%,#ffd98a 36%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.6));
  transform:translateY(16px) scale(.94);
  transition:transform .6s var(--ease);
}
.viva em{
  font-family:var(--mono);font-style:normal;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8);
  transform:translateY(14px);
  transition:transform .6s var(--ease) .08s;
}
.nos-figura:hover .viva b,
.nos-figura:focus-visible .viva b,
.nos-figura.is-viva .viva b{transform:none}
.nos-figura:hover .viva em,
.nos-figura:focus-visible .viva em,
.nos-figura.is-viva .viva em{transform:none}

/* El pie de foto se aparta para no pelearse con el vítor */
.nos-figura figcaption{transition:opacity .35s var(--ease)}
.nos-figura:hover figcaption,
.nos-figura:focus-visible figcaption,
.nos-figura.is-viva figcaption{opacity:0}

/*
  Con «reducir movimiento» se conservan el vítor y el oscurecido —son la
  información—, pero no los fuegos: son seis bucles infinitos a la vez, justo lo
  que esa preferencia pide apagar.
*/
@media (prefers-reduced-motion:reduce){
  .fw-sky{display:none}
  .mv-art{opacity:.5}
}

/* ── 26 · Fuera de fiestas ───────────────────────────────────────────────── */
/*
  `comun.js` pone la clase `sin-fiestas` en el <html> cuando la fecha de hoy
  queda fuera de la ventana de las fiestas (ver el módulo 01 de ese archivo).
  A partir de ahí la web vuelve sola a su estado normal:

  - desaparece la banda «¡Viva Salcedo!» de la portada y su entrada del menú,
  - la pestaña lateral del programa ni se crea —eso lo hace el JavaScript—,
  - y la fotografía de la plaza deja de tener fuegos y de oscurecerse: se queda
    como una fotografía con su pie, que es lo que es el resto del año.

  Nadie tiene que entrar a quitar nada el 1 de octubre.
*/
.sin-fiestas #fiestas,
.sin-fiestas a[href$="#fiestas"]{display:none}

.sin-fiestas .fw-sky,
.sin-fiestas .viva{display:none}

/* Sin fiestas la foto no es un botón: ni puntero, ni foco, ni oscurecido */
.sin-fiestas .nos-figura{cursor:default}
.sin-fiestas .nos-figura:hover img,
.sin-fiestas .nos-figura:focus-visible img{filter:saturate(.9) contrast(1.05)}
.sin-fiestas .nos-figura:hover figcaption,
.sin-fiestas .nos-figura:focus-visible figcaption{opacity:1}

/* ── 27 · Página de transparencia ────────────────────────────────────────── */
/*
  Reaprovecha la portada de «nosotros» (`.nos-hero`, `.nos-h1`, `.nos-lead`,
  `.nos-datos`) y añade lo suyo: la ruta de migas, el acordeón por años y las
  tres tarjetas de documentos institucionales.
*/
.tr-hero{
  padding-block:calc(var(--nav-h) + clamp(26px,3.4vw,44px)) clamp(40px,5vw,68px);
  position:relative;
}
.tr-hero::after{
  content:'';position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

.tr-migas{
  display:flex;align-items:center;gap:10px;margin-bottom:clamp(20px,3vw,34px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-mute);
}
.tr-migas a{color:var(--tx-dim);transition:color .25s}
.tr-migas a:hover{color:var(--cyan-soft)}

/* ── El acordeón por años ── */
.tr-lista{display:grid;gap:10px}

.tr-anio{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tr-anio[open]{border-color:rgba(41,169,224,.32);background:var(--surface-2)}
.tr-anio:hover{border-color:rgba(41,169,224,.28)}

.tr-anio summary{
  display:flex;align-items:center;gap:16px;
  padding:16px clamp(18px,2.4vw,26px);
  cursor:pointer;list-style:none;user-select:none;
}
/* El triángulo por defecto de <details>: fuera en todos los navegadores */
.tr-anio summary::-webkit-details-marker{display:none}
.tr-anio summary::marker{content:''}

/* El signo lo dibujamos nosotros: una cruz que gira hasta ser un menos */
.tr-anio summary::after{
  content:'';flex:none;margin-left:auto;
  width:16px;height:16px;
  background:
    linear-gradient(var(--cyan),var(--cyan)) center/100% 1.5px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) center/1.5px 100% no-repeat;
  transition:rotate .35s var(--ease),opacity .3s;
  opacity:.7;
}
.tr-anio[open] summary::after{rotate:135deg;opacity:1}
.tr-anio summary:hover::after{opacity:1}

.tr-anio-n{
  font-family:var(--mono);font-size:1.28rem;font-weight:500;
  letter-spacing:.01em;color:var(--tx);flex:none;min-width:4.2ch;
}
.tr-anio[open] .tr-anio-n{color:var(--cyan-soft)}

.tr-anio-c{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-mute);
}

/* ── Los documentos ── */
.tr-files{
  display:grid;gap:2px;
  padding:0 clamp(10px,1.4vw,14px) clamp(12px,1.6vw,16px);
}

.tr-files a{
  display:flex;align-items:center;gap:14px;
  padding:13px clamp(10px,1.4vw,14px);border-radius:var(--r-sm);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.tr-files a:hover{background:rgba(255,255,255,.05);transform:translateX(4px)}

.tr-ext{
  flex:none;padding:4px 9px;border-radius:6px;
  font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.1em;
  border:1px solid rgba(224,52,43,.4);background:rgba(224,52,43,.14);color:#ff8f85;
}
.tr-ext-xls{border-color:rgba(76,224,138,.4);background:rgba(76,224,138,.13);color:#7ce8ab}
.tr-ext-vid{border-color:rgba(74,155,255,.4);background:rgba(74,155,255,.14);color:#8cc2ff}

.tr-nom{
  flex:1;min-width:0;font-size:.95rem;line-height:1.45;color:var(--tx-dim);
  transition:color .25s;
}
.tr-files a:hover .tr-nom{color:var(--tx)}

.tr-peso{
  flex:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;
  color:var(--tx-mute);white-space:nowrap;
}

.tr-nota{
  margin-top:22px;font-size:.88rem;color:var(--tx-mute);
  padding-left:16px;border-left:2px solid var(--line);
}

/* ── Documentos institucionales ── */
.tr-inst{background:linear-gradient(180deg,rgba(8,12,21,.72),rgba(5,7,13,.72))}

.tr-inst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.tr-inst-card{
  position:relative;border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,32px);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  transition:transform .45s var(--ease);
}
.tr-inst-card:hover{transform:translateY(-6px)}
.tr-inst-card h3{font-size:1.14rem;font-weight:700;letter-spacing:-.025em}
.tr-inst-card p{font-size:.92rem;line-height:1.66;color:var(--tx-dim);flex:1}

.tr-inst-go{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:4px;font-size:.88rem;font-weight:600;color:var(--cyan-soft);
  transition:gap .3s var(--ease);
}
.tr-inst-go:hover{gap:12px}
.tr-inst-go em{
  font-family:var(--mono);font-style:normal;font-size:.66rem;
  letter-spacing:.08em;color:var(--tx-mute);font-weight:400;
}

/* ── Responsive ── */
@media (max-width:900px){
  .tr-inst-grid{grid-template-columns:1fr}
}

@media (max-width:620px){
  .tr-anio summary{gap:12px;padding:14px 16px}
  .tr-anio-c{display:none}          /* el recuento sobra cuando falta ancho */
  .tr-files a{flex-wrap:wrap;gap:10px}
  .tr-nom{flex:1 1 100%;order:3;font-size:.9rem}
  .tr-peso{margin-left:auto}
}

/* ── 28 · Audios de la rendición de cuentas ──────────────────────────────── */
/*
  Cuatro años traen además el audio de la sesión. Van con el reproductor nativo
  del navegador —`<audio controls>`—, que no se puede maquillar mucho pero
  funciona en todas partes, se maneja con el teclado y lo anuncian los lectores
  de pantalla.

  ⚠️ `preload="none"` NO es opcional. Los cuatro suman **33 MB**; el sitio actual
  los declara con `preload="auto"`, así que abrir la página de transparencia se
  traía los 33 MB aunque nadie pulsara play. Con `none` no se descarga nada hasta
  que alguien decide escuchar.
*/
.tr-audio{
  display:flex;flex-direction:column;gap:10px;
  padding:14px clamp(10px,1.4vw,14px);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft);
  margin-top:2px;
}
.tr-audio-top{display:flex;align-items:center;gap:14px}

.tr-ext-aud{border-color:rgba(245,166,35,.42);background:rgba(245,166,35,.14);color:var(--amber)}

.tr-audio audio{
  width:100%;height:38px;
  border-radius:999px;
  filter:invert(.92) hue-rotate(180deg) saturate(.75);
  /* El reproductor nativo se pinta claro; se invierte para que no queme
     sobre el fondo oscuro, y se corrige el tono para no dejarlo azulado. */
}

/* ── 29 · Bienvenida de fiestas ──────────────────────────────────────────── */
/*
  Telón que se abre al entrar por primera vez en la portada durante las fiestas:
  fuegos artificiales, «¡Viva Salcedo!» y la efeméride.

  Lo construye `comun.js`, que también decide si toca enseñarlo. Al no estar en
  el HTML, si el JavaScript fallara no habría telón que se pudiera quedar
  atascado tapando la web.

  Aun así lleva **doble red de seguridad**: la animación `vivaSalida` lo retira a
  los 6 s por CSS aunque el JavaScript que lo cierra se rompa, y encima el propio
  módulo programa su cierre. Un telón que no se va deja el sitio inservible.
*/
.viva-splash{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;
  padding:24px;text-align:center;
  background:
    radial-gradient(70% 60% at 50% 42%,rgba(10,42,94,.55),transparent 70%),
    rgba(3,5,10,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:vivaEntrada .6s var(--ease) backwards,
            vivaSalida .5s var(--ease) 11s forwards;
}
@keyframes vivaEntrada{from{opacity:0}to{opacity:1}}
@keyframes vivaSalida{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Cerrado por el JavaScript: se va antes y con su propia transición */
.viva-splash.is-out{
  animation:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s;
}

.viva-splash-in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(680px,92vw);
}

.viva-splash .vs-logo{
  width:clamp(58px,8vw,78px);height:auto;object-fit:contain;
  margin-bottom:6px;
  filter:drop-shadow(0 6px 24px rgba(41,169,224,.45));
}

.viva-splash .vs-fecha{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cyan);
}

.viva-splash .vs-viva{
  font-size:clamp(2.6rem,9vw,5.4rem);font-weight:800;
  letter-spacing:-.045em;line-height:.98;
  background:linear-gradient(100deg,var(--amber) 0%,#ffd98a 38%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(245,166,35,.3));
}

.viva-splash .vs-sub{
  font-size:clamp(1rem,2.2vw,1.35rem);font-weight:600;
  letter-spacing:-.02em;color:var(--tx);
}

.viva-splash .vs-txt{
  font-size:.95rem;line-height:1.7;color:var(--tx-dim);max-width:46ch;
}

.viva-splash .vs-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}
.viva-splash .vs-btns .btn-primary{background:var(--g-wave);color:#2a1400;box-shadow:0 12px 32px -12px rgba(245,166,35,.65)}

.viva-splash .vs-cerrar{
  position:absolute;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--tx-dim);
  background:rgba(255,255,255,.04);
  transition:color .25s,border-color .25s,transform .3s var(--ease);
}
.viva-splash .vs-cerrar:hover{color:var(--tx);border-color:rgba(255,255,255,.3);transform:rotate(90deg)}

/* Los fuegos del telón: mismo mecanismo que sobre la foto, a pantalla completa */
.viva-splash .fw-sky{position:absolute;inset:0;z-index:1;border-radius:0}
.viva-splash .fw{animation:fwGo 1.9s ease-out infinite}

.vs-pista{
  margin-top:18px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mute);
}

@media (max-width:620px){
  .viva-splash .vs-txt{font-size:.9rem}
  .viva-splash .vs-btns{width:100%}
  .viva-splash .vs-btns .btn{flex:1;min-width:min(100%,190px)}
}

/*
  Con «reducir movimiento» el telón sigue apareciendo —es un aviso, no un
  adorno— pero sin los seis bucles de fuegos.
*/
@media (prefers-reduced-motion:reduce){
  .viva-splash .fw-sky{display:none}
}

/* ── 30 · Copos de nieve ─────────────────────────────────────────────────── */
/*
  Del 1 de diciembre al 6 de Reyes. Los monta `comun.js`, que sortea para cada
  copo su posición, tamaño, velocidad y retraso; aquí sólo se define cómo cae.

  Cada copo hace dos cosas a la vez: **baja** (`copoCae`, sobre el elemento) y
  **se balancea** (`copoVaiven`, sobre su `::before`). Separarlas en dos capas
  evita tener que combinar las dos en un solo `transform`, que obligaría a
  recalcular la caída entera para cambiar el vaivén.

  El retraso va en negativo (`--espera: -7s`): así la animación arranca ya
  empezada y al cargar la página **la nieve ya está cayendo**, en vez de tener
  que esperar a que el primer copo baje desde arriba.
*/
.nieve{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}

.nieve i{
  position:absolute;top:-6vh;
  width:var(--t);height:var(--t);
  animation:copoCae var(--cae) linear var(--espera) infinite;
  will-change:transform;
}
.nieve i::before{
  content:'';display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,rgba(214,236,255,.75) 55%,rgba(160,205,245,.25));
  opacity:var(--opaco);
  box-shadow:0 0 6px rgba(190,225,255,.55);
  animation:copoVaiven var(--vaiven) ease-in-out infinite alternate;
}

@keyframes copoCae{
  to{transform:translateY(112vh)}
}
@keyframes copoVaiven{
  from{transform:translateX(-9px)}
  to  {transform:translateX(9px)}
}

/*
  La aurora del fondo va en `z-index: -2` y el contenido en el flujo normal, así
  que la nieve en `z-index: 0` queda entre las dos: detrás del texto y de las
  tarjetas, delante del fondo. Es donde tiene que estar.

  El pie sí la tapa: es opaco y cierra la página, y ver copos cruzándolo por
  delante rompería la ilusión de profundidad. La cabecera no necesita ayuda —ya
  va en `z-index: 120`—, y tocarla aquí sólo podía estropearla.
*/
.navidad .foot{z-index:1}

/* En móvil, la mitad de copos: son equipos más modestos y pantalla más pequeña */
@media (max-width:620px){
  .nieve i:nth-child(2n){display:none}
}

/* ── 31 · Fiestas sin agenda del año ─────────────────────────────────────── */
/*
  La celebración se repite cada año sola; el PDF del programa, no. Si llega
  agosto y la agenda que hay en la carpeta es de un año anterior, `comun.js`
  marca el <html> con `sin-agenda`: se sigue felicitando al cantón, pero **no se
  ofrece un programa caducado**.

  Desaparecen los dos botones de la banda, la línea que anuncia el PDF y la
  frase que promete la agenda; la pestaña lateral ni se crea. Queda el
  «¡Viva Salcedo!» con su número de años, que es cierto todos los años.
*/
.sin-agenda .fiesta-cta,
.sin-agenda .fiesta-note,
.sin-agenda .fiesta-agenda{display:none}

/* ── 32 · Multimedia · Top 5 ─────────────────────────────────────────────── */
.top-sec-vid{background:linear-gradient(180deg,rgba(8,12,21,.72),rgba(5,7,13,.72))}

.top-sello{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--tx-mute);white-space:nowrap;text-align:right;
}

.top-lista{display:grid;gap:10px;counter-reset:top}

.top-item a{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  padding:12px clamp(14px,2vw,20px);
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.top-item a:hover{
  transform:translateX(6px);
  border-color:rgba(41,169,224,.4);background:var(--surface-2);
}

/* El número es el ancla de la fila: mono, grande y en contorno */
.top-pos{
  flex:none;width:2ch;text-align:center;
  font-family:var(--mono);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;
  line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.2px rgba(95,200,245,.75);
  transition:-webkit-text-stroke-color .35s var(--ease)}
.top-item:first-child .top-pos{-webkit-text-stroke-color:var(--amber)}
.top-item a:hover .top-pos{-webkit-text-stroke-color:var(--cyan-soft)}

.top-art{
  flex:none;width:clamp(52px,7vw,64px);height:auto;aspect-ratio:1;
  object-fit:cover;border-radius:10px;
  border:1px solid var(--line-soft);background:var(--bg-2);
}
/* Los videos son apaisados: se les respeta su proporción */
.top-lista-vid .top-art{width:clamp(84px,11vw,110px);aspect-ratio:16/9;border-radius:8px}

.top-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.top-nom{
  font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
}
.top-art-nom{
  font-style:normal;font-size:.86rem;color:var(--tx-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.top-gen{
  flex:none;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-mute);white-space:nowrap;
}

.top-nota{
  margin-top:22px;font-size:.86rem;color:var(--tx-mute);
  padding-left:16px;border-left:2px solid var(--line);
}
.top-nota b{color:var(--tx-dim);font-weight:500}

/* ── 33 · Multimedia · Galería ───────────────────────────────────────────── */
.gal-filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}

.gal-f{
  padding:9px 18px;border-radius:999px;min-height:40px;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx-dim);
  transition:color .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease);
}
.gal-f:hover{color:var(--tx);transform:translateY(-2px)}
.gal-f.is-on{background:var(--g-signal);color:#02121e;border-color:transparent;font-weight:500}

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

.gal-item button{
  position:relative;display:block;width:100%;padding:0;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.gal-item button:hover{
  transform:translateY(-5px);
  border-color:rgba(41,169,224,.42);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.8);
}
.gal-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  filter:saturate(.92);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.gal-item button:hover img{transform:scale(1.07);filter:saturate(1.05)}

.gal-tag{
  position:absolute;left:12px;bottom:12px;
  padding:5px 12px;border-radius:999px;
  background:rgba(5,7,13,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx);
}

/* ── La lupa ── */
/*
  Un `<dialog>` nativo: el navegador pone el fondo, atrapa el foco y cierra con
  `Esc` sin que haya que escribir nada de eso.
*/
/*
  ⚠️ `margin:auto` no es decorativo: **es lo que centra el diálogo**.

  Un `<dialog>` modal se centra porque la hoja del navegador le pone
  `margin: auto` con `inset: 0`. El reset de arriba —`*{margin:0}`, línea 49—
  se lo quita, y el diálogo se va a la esquina superior izquierda. Aquí se
  devuelve a mano. Si algún día se ve pegado a un lado, mirar esta línea.
*/
.gal-lupa{
  inset:0;margin:auto;
  width:min(1100px,92vw);max-width:none;max-height:92vh;
  padding:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2);color:var(--tx);overflow:hidden;
}
.gal-lupa::backdrop{background:rgba(3,5,10,.88);backdrop-filter:blur(6px)}

.gal-lupa img{width:100%;max-height:76vh;object-fit:contain;display:block;background:#0a0e17}

.gal-lupa-cap{
  padding:14px 20px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-dim);border-top:1px solid var(--line-soft);
}

.gal-lupa-x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--tx);
  background:rgba(5,7,13,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s,transform .3s var(--ease);
}
.gal-lupa-x:hover{border-color:rgba(255,255,255,.32);transform:rotate(90deg)}

/* ── Responsive ── */
@media (max-width:760px){
  .top-gen{display:none}                 /* el género sobra cuando falta ancho */
  .top-item a{gap:12px;padding:10px 12px}
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
}

@media (max-width:620px){
  .top-sello{text-align:left;white-space:normal}
  .top-nom{font-size:.94rem}
  .top-art-nom{font-size:.8rem}
  .gal-grid{grid-template-columns:1fr 1fr}
  .gal-lupa{width:96vw}
}

/* ── 34 · Contáctanos ────────────────────────────────────────────────────── */
.ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.ct-card{
  position:relative;border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  transition:transform .45s var(--ease);
}
.ct-card:hover{transform:translateY(-6px)}

.ct-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(41,169,224,.14);color:var(--cyan);margin-bottom:4px;
  transition:transform .45s var(--ease);
}
.ct-card:hover .ct-ico{transform:scale(1.1) rotate(-5deg)}
.ct-ico svg{width:22px;height:22px;fill:currentColor}

.ct-card h3{font-size:1.08rem;font-weight:700;letter-spacing:-.025em}

.ct-dato{
  font-family:var(--mono);font-size:1.02rem;letter-spacing:-.01em;
  color:var(--cyan-soft);word-break:break-word;
}
.ct-dato-sm{font-size:.84rem;letter-spacing:.01em}

.ct-card > p:not(.ct-dato){font-size:.9rem;line-height:1.62;color:var(--tx-dim);flex:1}

.ct-go{
  margin-top:4px;display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--tx-dim);
  transition:color .3s,gap .3s var(--ease);
}
.ct-go:hover{color:var(--tx);gap:12px}

/* ── El formulario ── */
.ct-form-sec{background:linear-gradient(180deg,rgba(8,12,21,.72),rgba(5,7,13,.72))}

.ct-form-in{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(30px,5vw,64px);align-items:start;
}
.ct-form-txt .h2{margin-top:4px}
.ct-form-nota{
  margin-top:18px;font-family:var(--mono);font-size:.72rem;line-height:1.7;
  letter-spacing:.04em;color:var(--tx-mute);
  padding-left:14px;border-left:2px solid var(--line);
}

.ct-form{
  border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);
  display:grid;gap:18px;
}

.ct-campo{display:grid;gap:8px}
.ct-campo label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);
}
.ct-campo input,
.ct-campo textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--tx);font-family:var(--font);font-size:.96rem;line-height:1.55;
  transition:border-color .28s var(--ease),background .28s var(--ease);
}
.ct-campo textarea{resize:vertical;min-height:130px}
.ct-campo input::placeholder,
.ct-campo textarea::placeholder{color:var(--tx-mute)}
.ct-campo input:focus,
.ct-campo textarea:focus{
  outline:none;border-color:rgba(41,169,224,.6);background:rgba(255,255,255,.06);
}

.ct-error{
  margin:-4px 0 0;padding:12px 16px;border-radius:var(--r-sm);
  border:1px solid rgba(245,166,35,.32);background:rgba(245,166,35,.08);
  font-size:.88rem;line-height:1.6;color:var(--tx-dim);
}
.ct-error a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.45)}

.ct-form .btn-primary{justify-self:start}

/* ── El mapa ── */
.ct-mapa{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:21/9;background:var(--surface);
  box-shadow:0 30px 66px -32px rgba(0,0,0,.9);
}
.ct-mapa iframe{
  width:100%;height:100%;border:0;
  filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
}

/* ── Redes ── */
.ct-redes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.ct-redes a{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
  padding:24px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.ct-redes a::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(120% 100% at 50% 0%,var(--tint,rgba(41,169,224,.22)),transparent 62%);
  transition:opacity .45s var(--ease);
}
.ct-redes a:hover{
  transform:translateY(-7px);border-color:var(--tint-solid,rgba(41,169,224,.5));
  box-shadow:0 22px 50px -20px rgba(0,0,0,.8);
}
.ct-redes a:hover::before{opacity:1}

.ct-redes svg{
  position:relative;width:26px;height:26px;fill:var(--tint-solid,var(--cyan));
  margin-bottom:8px;transition:transform .45s var(--ease);
}
.ct-redes a:hover svg{transform:scale(1.12) rotate(-5deg)}
.ct-redes b{position:relative;font-size:1rem;font-weight:600;letter-spacing:-.02em}
.ct-redes em{
  position:relative;font-style:normal;font-family:var(--mono);
  font-size:.74rem;color:var(--tx-dim);word-break:break-word;
}

/* ── Responsive ── */
@media (max-width:1000px){
  .ct-grid{grid-template-columns:1fr 1fr}
  .ct-redes{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .ct-form-in{grid-template-columns:1fr}
  .ct-mapa{aspect-ratio:4/3}
}

@media (max-width:620px){
  .ct-grid{grid-template-columns:1fr}
  .ct-redes{grid-template-columns:1fr}
  .ct-form .btn-primary{justify-self:stretch}
}