/* Filtro */
.cer-equipo-filter{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:1.5rem 0}
.cer-equipo-filter label{font-weight:600}

/* Secciones de área */
.cer-area-header{max-width:72rem;margin:0 auto 1rem; padding:0 1rem}
.cer-area-header h2{font-size:1.9rem;margin:.2rem 0 .5rem}
.cer-area-desc{color:#444;margin:.25rem 0 .75rem}
.cer-btn{display:inline-block;padding:.6rem 1rem;border-radius:999px;border:1px solid #e0e0e0;text-decoration:none}

/* Grid y card */
.cer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0}
@media (max-width:1024px){.cer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cer-grid{grid-template-columns:1fr}}
.cer-card{list-style:none}
.cer-card__link{display:block;position:relative;background:#fff;border:1px solid #e8ecf2;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit}
.cer-card__media img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.cer-card__body{display:block;padding:.8rem}
.cer-card__title{display:block;font-weight:700;margin:0 0 .25rem}
.cer-card__sub{display:block;color:#cc5a26}
.cer-card__plus{position:absolute;right:.6rem;bottom:.6rem;width:32px;height:32px;border-radius:999px;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Carrusel mobile (cuando Slick está activo) */
@media (max-width:640px){
  .cer-grid.slick-initialized{display:block}
  .cer-grid.slick-initialized .cer-card{margin:0 .5rem}
}

/* Red CER */
.cer-red{display:grid;gap:1rem}
.cer-sede{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;border:1px solid #e8ecf2;border-radius:14px;overflow:hidden}
.cer-sede__map iframe{width:100%;height:100%;min-height:260px;border:0}
.cer-sede__info{padding:1rem}
@media (max-width:900px){.cer-sede{grid-template-columns:1fr}}


/* ============================
   CER — Filtro de Áreas (v1)
   ============================ */

:root{
  --cer-accent: #1e88e5;   /* azul acento (ajústalo a tu marca) */
  --cer-text:   #1f2937;   /* gris 800 */
  --cer-border: #d1d5db;   /* gris 300 */
  --cer-bg:     #ffffff;   /* fondo */
}

.cer-filtro{
  display:block;
  margin: 1rem 0 1.25rem;
  padding: 0.75rem 0;
  color: var(--cer-text);
  background: transparent;
}

/* Etiqueta */
.cer-filtro .cer-filtro__label{
  display: inline-block;
    margin: 0 1rem .35rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 2rem;
    float: left;
}

/* SELECT */
.cer-filtro .cer-filtro__select{
  display:block !important;
  width: min(100%, 420px);
  padding: .6rem .8rem;
  border: 1px solid var(--cer-border);
  border-radius: .55rem;
  background: var(--cer-bg);
  line-height: 1.2;
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;  /* limpia estilos del navegador */
}
.cer-filtro .cer-filtro__select:focus{
  outline: none;
  border-color: var(--cer-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cer-accent) 20%, transparent);
}

/* LISTA DE PÍLDORAS */
.cer-filtro .cer-filtro__list{
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  padding: 0;
  margin: .25rem 0 0;
  list-style:none;
}
.cer-filtro .cer-filtro__pill{
  display:inline-block;
  padding: .45rem .7rem;
  border: 1px solid var(--cer-border);
  border-radius: .6rem;
  background: var(--cer-bg);
  color: var(--cer-text);
  text-decoration:none;
  line-height: 1;
  font-size: .93rem;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.cer-filtro .cer-filtro__pill:hover{
  border-color: color-mix(in srgb, var(--cer-text) 25%, var(--cer-border));
}
.cer-filtro .cer-filtro__pill:active{
  transform: translateY(1px);
}
.cer-filtro .cer-filtro__pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cer-accent) 22%, transparent);
  border-color: var(--cer-accent);
}

/* Estado activo (sincronizado por JS con is-active / aria-current) */
.cer-filtro .cer-filtro__pill.is-active,
.cer-filtro .cer-filtro__pill[aria-current="true"]{
  background: var(--cer-accent);
  border-color: var(--cer-accent);
  color: #fff;
}

/* Compat extra: no ocultes el filtro aunque el tema sea agresivo */
.cer-filtro,
.cer-filtro *{
  visibility: visible !important;
  opacity: 1 !important;
}

/* Secciones: pequeña separación y anclaje cómodo cuando se filtra/scroll */
.cer-area-section{
  scroll-margin-top: 80px; /* ayuda cuando se salta a #area-xxx */
  margin-top: 1.25rem;
}
@media (max-width: 600px){
  .cer-filtro .cer-filtro__select{ width: 100%; }
}

/* (Opcional) Modo oscuro básico: si tu tema lo usa */
@media (prefers-color-scheme: dark){
  :root{
    --cer-text: #e5e7eb;
    --cer-border: #374151;
    --cer-bg: #111827;
  }
  .cer-filtro .cer-filtro__pill.is-active,
  .cer-filtro .cer-filtro__pill[aria-current="true"]{
    color:#fff;
  }
}