/* ==========================================================
   Inicio · carrusel principal de regionales, comunicados (lista) y enlaces
   (se carga después de styles.css y solo en index.html)
   ========================================================== */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* ---------- Carrusel principal (ancho completo) ---------- */
.hc{position:relative;width:100%;height:clamp(210px,16vw,260px);background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;touch-action:pan-y}
.hc-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.hc-slide.is-active{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.hc-slide picture{display:block;width:100%;height:100%}
.hc-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);transform:scale(1.06);transition:transform 3.5s linear}
.hc-slide.is-active img{transform:scale(1)}
/* velo para dar contraste al texto: más oscuro abajo, donde va el mensaje */
.hc-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,21,56,.92) 0%,rgba(12,21,56,.66) 30%,rgba(12,21,56,0) 64%),
             linear-gradient(90deg,rgba(12,21,56,.5) 0%,rgba(12,21,56,0) 62%)}
.hc-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:44px}
.hc-frase{margin:0 0 8px;font:600 clamp(21px,2.5vw,36px)/1.12 var(--font);letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hc-lugar{display:inline-flex;align-items:center;gap:8px;margin:0;padding:3px 12px 3px 8px;border-radius:999px;font:500 13px/18px var(--font);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hc-lugar svg{width:15px;height:15px;flex:none;color:var(--orange)}
.hc-frase,.hc-lugar{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.hc-slide.is-active .hc-frase{opacity:1;transform:none;transition-delay:.12s}
.hc-slide.is-active .hc-lugar{opacity:1;transform:none;transition-delay:.22s}

/* controles */
.hc-ui{position:absolute;left:0;right:0;bottom:0;z-index:5;padding-bottom:10px}
.hc-bar{display:flex;align-items:center;justify-content:center}
/* tres barras visibles; el resto de fotos rota detrás (ventana de 3 en el JS) */
.hc-dots{display:flex;gap:6px;width:min(100%,156px)}
.hc-dots.is-swap{animation:hc-swap .45s var(--ease-out)}
@keyframes hc-swap{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.hc-dots button{position:relative;flex:1;height:18px;padding:0;border:0;background:none;cursor:pointer}
.hc-dots button::before,.hc-dots button::after{content:"";position:absolute;left:0;right:0;top:8px;height:3px;border-radius:2px}
.hc-dots button::before{background:rgba(255,255,255,.38);transition:background .15s}
.hc-dots button:hover::before{background:rgba(255,255,255,.62)}
.hc-dots button::after{background:var(--orange);transform:scaleX(0);transform-origin:left}
.hc-dots .is-done::after{transform:scaleX(1)}
.hc-dots .is-on::after{animation:hc-fill var(--hc-dur,3s) linear forwards}
.hc.is-paused .hc-dots .is-on::after{animation-play-state:paused}
.hc.is-static .hc-dots .is-on::after{animation:none;transform:scaleX(1)}
@keyframes hc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hc :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media only screen and (max-width:640px){
  .hc{height:clamp(200px,28vh,240px);height:clamp(200px,28svh,240px)}
  .hc-slide img{object-position:var(--pos-m,50% 40%)}
  .hc-copy{padding-bottom:40px}
  .hc-dots{width:min(100%,138px)}
}
@media (prefers-reduced-motion:reduce){
  .hc-slide,.hc-slide.is-active{transition:none}
  .hc-slide img{transform:none;transition:none}
  .hc-frase,.hc-lugar{transition:none;transform:none}
  .hc-dots.is-swap{animation:none}
}

/* ---------- Enlaces de interés: 6 en una fila (3 × 2 en tablet, 2 × 3 en móvil) ---------- */
.enlaces-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s)}
.enlaces-logos .enlace{max-width:none;flex:none}
@media only screen and (min-width:600px){.enlaces-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media only screen and (min-width:992px){.enlaces-logos{grid-template-columns:repeat(6,minmax(0,1fr))}}