/* Agenda Castellón · web pública
   Dirección Mediterránea sobre lienzo claro, con vidrio y fotografía.
   Verificado a 380 px. */

:root{
  /* Dos niveles de superficie: el fondo baja y la tarjeta se queda en blanco
     puro, para que flote de verdad en vez de fundirse con la página. */
  --lienzo:#F2F4F5; --papel:#FFFFFF; --humo:#E9EDEE;
  --tinta:#10161A; --tinta-2:#55646A; --tinta-3:#85959B;
  --raya:rgba(10,40,50,.09); --raya-2:rgba(10,40,50,.14);
  --mar:#0A4455; --agua:#2FB6B2; --naranja:#F4631C; --naranja-2:#FF8A3D;
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-pill:999px;
  --tipo:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --titular:'Fraunces','Georgia',serif;
  --salida:cubic-bezier(.22,.8,.28,1);
  --sombra:0 1px 1px rgba(10,40,50,.04), 0 4px 10px rgba(10,40,50,.07), 0 14px 34px rgba(10,40,50,.06);
  --sombra-alta:0 2px 4px rgba(10,40,50,.07), 0 10px 22px rgba(10,40,50,.10), 0 28px 60px rgba(10,40,50,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lienzo);color:var(--tinta);font-family:var(--tipo);font-size:17px;line-height:1.5;
     letter-spacing:-.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em}
.num{font-feature-settings:"tnum"}
.marco{max-width:1040px;margin:0 auto;padding:0 22px}

/* ------------------------------------------------------------------- barra */

.barra{position:sticky;top:0;z-index:40;background:rgba(251,251,253,0);
  transition:background .35s var(--salida),border-color .35s var(--salida)}
.barra.pegada{background:rgba(251,251,253,.86);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--raya)}
.barra-int{max-width:1040px;margin:0 auto;padding:0 22px;height:54px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1.02rem;letter-spacing:-.03em;color:#fff;
  text-shadow:0 1px 12px rgba(4,25,32,.45);transition:color .35s var(--salida),text-shadow .35s}
.barra.pegada .logo{color:var(--tinta);text-shadow:none}
.barra.plana{background:rgba(251,251,253,.88);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--raya)}
.barra.plana .logo{color:var(--tinta);text-shadow:none}
.sol-icono{width:13px;height:13px;border-radius:50%;background:linear-gradient(150deg,var(--naranja-2),var(--naranja))}
.nav{display:flex;align-items:center;gap:24px;font-size:.86rem;color:rgba(255,255,255,.88);
  text-shadow:0 1px 10px rgba(4,25,32,.4);transition:color .35s var(--salida),text-shadow .35s}
.barra.pegada .nav,.barra.plana .nav{color:var(--tinta-2);text-shadow:none}
.nav a:hover{opacity:.7}

/* ------------------------------------------------------------------- telón */

.telon{position:relative;margin-top:-54px;height:clamp(420px,64vh,600px);overflow:hidden;background:linear-gradient(150deg,var(--mar),var(--agua))}
.telon.mun{height:clamp(340px,48vh,460px)}
.capa{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1.6s var(--salida);transform:scale(1.04);animation:respirar 24s ease-in-out infinite alternate}
.capa.visible{opacity:1}
@keyframes respirar{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.velo{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(4,25,32,.42) 0%, rgba(4,25,32,.12) 34%, rgba(251,251,253,.30) 72%, var(--lienzo) 100%)}
.telon-txt{position:absolute;inset:auto 0 0 0;padding:0 22px 34px;max-width:1040px;margin:0 auto;left:0;right:0}
.telon-txt h1{color:#fff;font-size:clamp(2.1rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.045em;max-width:16ch;
  text-shadow:0 2px 30px rgba(4,25,32,.45)}
.telon-txt h1 em{font-style:normal;color:#FFCBA6}
.telon-txt p{color:rgba(255,255,255,.92);margin:14px 0 0;max-width:46ch;font-size:1.08rem;text-shadow:0 1px 18px rgba(4,25,32,.5)}
.miga{color:rgba(255,255,255,.85);font-size:.86rem;margin:0 0 12px;text-shadow:0 1px 10px rgba(4,25,32,.5)}
.miga a{border-bottom:1px solid rgba(255,255,255,.35)}
.credito{position:absolute;right:22px;bottom:14px;font-size:.72rem;color:rgba(255,255,255,.75);text-shadow:0 1px 8px rgba(4,25,32,.6)}

/* --------------------------------------------------------------- buscador */

.buscador{display:flex;align-items:center;gap:8px;max-width:560px;position:relative;z-index:5;
  padding:7px 7px 7px 20px;border-radius:var(--r-pill);background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--sombra-alta);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  transition:transform .3s var(--salida)}
.buscador:focus-within{transform:translateY(-2px)}
.buscador input{flex:1;min-width:0;height:46px;border:none;background:transparent;font:inherit;font-size:1rem;color:var(--tinta);outline:none}
.buscador input::placeholder{color:var(--tinta-3)}
.buscador button{height:46px;padding:0 22px;border:none;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-weight:500;font-size:.95rem;
  color:#fff;background:linear-gradient(140deg,var(--naranja-2),var(--naranja));transition:transform .2s var(--salida),box-shadow .2s var(--salida)}
.buscador button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(244,99,28,.3)}

.pastillas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0 0;padding:0;list-style:none}
.pastilla{display:inline-block;padding:7px 15px;border-radius:var(--r-pill);background:var(--papel);border:1px solid var(--raya);
  font-size:.86rem;color:var(--tinta-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .2s var(--salida),box-shadow .2s var(--salida)}
.pastilla:hover{transform:translateY(-2px);box-shadow:var(--sombra);color:var(--tinta)}
.pastilla b{font-weight:500;color:var(--tinta-3)}

/* -------------------------------------------------------------- secciones */

section{padding:44px 0}
.tit{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.tit h2{font-size:1.8rem;letter-spacing:-.035em}
.tit .apunte{color:var(--tinta-3);font-size:.9rem}

.rejilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tarjeta{display:block;padding:22px;border-radius:var(--r-lg);background:var(--papel);border:1px solid var(--raya);
  box-shadow:var(--sombra);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:transform .35s var(--salida),box-shadow .35s var(--salida),background .35s var(--salida)}
a.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.tarjeta.con-foto{padding-top:0;overflow:hidden}
.cartel{display:block;width:calc(100% + 44px);margin:0 -22px 18px;aspect-ratio:16/9;object-fit:cover;background:var(--humo)}
.hora{display:inline-block;font-size:.82rem;font-weight:500;color:var(--naranja);background:rgba(244,99,28,.1);
  padding:4px 11px;border-radius:var(--r-pill);font-feature-settings:"tnum"}
.tarjeta h3{margin:14px 0 5px;font-size:1.2rem;line-height:1.24;letter-spacing:-.025em}
.tarjeta .donde{margin:0;color:var(--tinta-2);font-size:.92rem}
.tarjeta .pie-t{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 0;font-size:.83rem;color:var(--tinta-3)}
.etiqueta{padding:3px 10px;border-radius:var(--r-pill);background:var(--humo);color:var(--tinta-2)}

/* --------------------------------------------------------- panel por días */

.panel{border-radius:var(--r-xl);background:var(--papel);border:1px solid var(--raya);box-shadow:var(--sombra);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);padding:10px 20px 14px}
.dia-cab{display:flex;align-items:baseline;gap:11px;padding:20px 8px 10px}
.dia-cab .d{font-size:1.9rem;font-weight:600;letter-spacing:-.05em;line-height:1;font-feature-settings:"tnum"}
.dia-cab .s{color:var(--tinta-2);font-size:.94rem;text-transform:none}
.fila{display:grid;grid-template-columns:74px 1fr auto;gap:18px;align-items:center;padding:14px 12px;border-radius:var(--r-md);
  border-top:1px solid var(--raya);transition:background .25s var(--salida),transform .25s var(--salida)}
a.fila:hover{background:rgba(10,68,85,.045);transform:translateX(4px)}
.fila .h{font-size:.95rem;font-weight:500;color:var(--tinta-2);font-feature-settings:"tnum"}
.fila h3{font-size:1.06rem;font-weight:500;line-height:1.28;letter-spacing:-.02em}
.fila .donde{margin:2px 0 0;color:var(--tinta-2);font-size:.88rem}
.fila .meta{text-align:right;font-size:.84rem;color:var(--tinta-3);white-space:nowrap}
.fila .meta b{display:block;color:var(--tinta);font-weight:500}
.fila .meta .ahora{color:var(--naranja)}

/* ------------------------------------------------------------- mosaico */

.mosaico{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.teja{position:relative;height:170px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra);
  transition:transform .35s var(--salida),box-shadow .35s var(--salida);background:linear-gradient(150deg,var(--mar),var(--agua))}
.teja:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.teja .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--salida)}
.teja:hover .img{transform:scale(1.07)}
.teja .sombra{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,25,32,0) 38%,rgba(4,25,32,.72) 100%)}
.teja .txt{position:absolute;left:16px;right:16px;bottom:14px;color:#fff}
.teja .txt b{display:block;font-weight:600;font-size:1.08rem;letter-spacing:-.02em}
.teja .txt span{font-size:.82rem;color:rgba(255,255,255,.82)}

/* ---------------------------------------------------------------- bloques */

.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:20px;margin:0}
.cifras dt{font-size:.85rem;color:var(--tinta-3)}
.cifras dd{margin:.15rem 0 0;font-size:2.1rem;font-weight:600;letter-spacing:-.04em;color:var(--mar);font-feature-settings:"tnum"}

.ayto{position:relative;overflow:hidden;padding:58px 40px;border-radius:var(--r-xl);color:#EAF3F5;
  background:linear-gradient(150deg,#0A4455,#06303C 70%);box-shadow:var(--sombra)}
.ayto::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-110px;top:-150px;
  background:rgba(244,99,28,.34);filter:blur(70px)}
.ayto h2{position:relative;font-size:clamp(1.6rem,3.8vw,2.6rem);line-height:1.06;max-width:19ch;letter-spacing:-.035em}
.ayto p{position:relative;max-width:52ch;margin:18px 0 28px;color:rgba(234,243,245,.72);font-size:1.02rem}
.ayto a{position:relative;display:inline-block;padding:12px 26px;border-radius:var(--r-pill);background:#fff;color:#0A4455;
  font-weight:500;font-size:.95rem;transition:transform .22s var(--salida),box-shadow .22s var(--salida)}
.ayto a:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(3,24,30,.35)}

.vacio{max-width:46ch;color:var(--tinta-2)}
.nota{max-width:52ch;color:var(--tinta-3);font-size:.88rem}

.acc{display:flex;gap:10px;flex-wrap:wrap;margin:-26px auto 0;position:relative;z-index:5;max-width:1040px;padding:0 22px}
.seguir{padding:11px 21px;border-radius:var(--r-pill);background:rgba(255,255,255,.78);border:1px solid var(--raya);
  font:inherit;font-size:.92rem;color:var(--tinta);cursor:pointer;box-shadow:var(--sombra);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .22s var(--salida),box-shadow .22s var(--salida)}
.seguir:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.seguir[aria-pressed="true"]{background:linear-gradient(140deg,var(--naranja-2),var(--naranja));border-color:transparent;color:#fff;font-weight:500}

.pie{padding:34px 0 64px;color:var(--tinta-3);font-size:.85rem;display:flex;gap:16px;justify-content:space-between;
  flex-wrap:wrap;border-top:1px solid var(--raya);margin-top:34px;max-width:1040px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}

.aparece{opacity:0;transform:translateY(20px);transition:opacity .8s var(--salida),transform .8s var(--salida)}
.aparece.dentro{opacity:1;transform:none}

@media (max-width:620px){
  body{font-size:16px}
  .marco,.barra-int,.telon-txt,.acc,.pie{padding-left:16px;padding-right:16px}
  .telon{height:clamp(360px,58vh,440px)}
  .buscador{margin-left:16px;margin-right:16px}
  .ayto{padding:38px 24px}
  .panel{padding:6px 12px 10px}
  .fila{grid-template-columns:58px 1fr;gap:12px;padding:12px 8px}
  .fila .meta{grid-column:2;text-align:left;margin-top:4px}
  .fila .meta b{display:inline}
  .tit h2{font-size:1.5rem}
  .teja{height:140px}
  .cifras dd{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.aparece{opacity:1;transform:none}}

/* ---------------------------------------------------------------- formularios */

form label{display:block}
.etq{display:block;font-size:.85rem;color:var(--tinta-2);margin:0 0 6px}
.etq small{color:var(--tinta-3);font-weight:400}
form input[type=text],form input[type=url],form input[type=email],form select,form textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);
  padding:12px 14px;border:1px solid var(--raya-2);border-radius:var(--r-md);
  background:var(--papel);transition:border-color .2s var(--salida),box-shadow .2s var(--salida)}
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--agua);box-shadow:0 0 0 3px rgba(47,182,178,.16)}
form textarea{resize:vertical;min-height:120px;line-height:1.5}
.enviar{font:inherit;font-weight:500;font-size:.98rem;color:#fff;cursor:pointer;
  padding:13px 30px;border:none;border-radius:var(--r-pill);
  background:linear-gradient(140deg,var(--naranja-2),var(--naranja));
  transition:transform .2s var(--salida),box-shadow .2s var(--salida)}
.enviar:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(244,99,28,.3)}

/* ------------------------------------------------------------------- menú */

.nav a[aria-current="page"]{color:var(--naranja);opacity:1}
.barra.pegada .nav a[aria-current="page"],
.barra.plana .nav a[aria-current="page"]{color:var(--naranja)}
.nav-buscar{display:inline-flex;align-items:center;opacity:.9}

.menu-boton{display:none;align-items:center;gap:8px;font:inherit;font-size:.88rem;
  color:#fff;background:transparent;border:none;cursor:pointer;padding:8px 2px;
  text-shadow:0 1px 10px rgba(4,25,32,.4)}
.barra.pegada .menu-boton,.barra.plana .menu-boton{color:var(--tinta);text-shadow:none}
.menu-rayas{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:17px}
.menu-rayas span{display:block;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .25s var(--salida)}
.menu-boton[aria-expanded="true"] .menu-rayas span:first-child{transform:translateY(2.8px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-rayas span:last-child{transform:translateY(-2.8px) rotate(-45deg)}

.menu-movil{position:absolute;left:0;right:0;top:54px;z-index:50;
  background:rgba(251,251,253,.97);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--raya);box-shadow:var(--sombra);padding:10px 0 16px}
.menu-movil ul{list-style:none;margin:0;padding:0}
.menu-movil li a{display:block;padding:13px 22px;font-size:1.05rem;color:var(--tinta);
  border-bottom:1px solid var(--raya)}
.menu-movil li a[aria-current="page"]{color:var(--naranja)}
.menu-movil .menu-mas li a{font-size:.94rem;color:var(--tinta-2);padding:11px 22px;border-bottom:none}
.menu-movil .menu-mas{margin-top:8px;padding-top:6px;border-top:1px solid var(--raya)}

@media (max-width:860px){
  .nav{display:none}
  .menu-boton{display:inline-flex}
  .barra{position:sticky}
}

/* -------------------------------------------------------------------- mapa */

.mapa-caja{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--raya)}
.mapa{width:100%;height:auto;display:block}
.mapa .rotulo{font-family:var(--tipo);font-size:13px;font-weight:500;fill:var(--tinta);
  paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3px;stroke-linejoin:round}
.mapa .punto{cursor:pointer}
.mapa .punto circle{transition:r .2s var(--salida),fill-opacity .2s var(--salida)}
.mapa .punto:hover circle{fill-opacity:1}
.mapa .punto:focus-visible circle{outline:none;stroke:var(--mar);stroke-width:3}

@media (max-width:620px){
  /* En móvil los nombres se amontonan: manda la lista de abajo */
  .mapa .rotulo{display:none}
  .mapa-caja{border-radius:var(--r-lg)}
}

/* ------------------------------------------------------------- paginación */

.paginacion{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:26px 0 0}
.paginacion .cuenta{font-size:.88rem;color:var(--tinta-3)}
.paginacion .apagada{opacity:.4;cursor:default}

/* ---------------------------------------------------------------- leyenda */

.leyenda{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:14px 0 0;padding:0;
  font-size:.88rem;color:var(--tinta-2)}
.leyenda li{display:flex;align-items:center;gap:8px}
.bolita{display:inline-block;width:13px;height:13px;border-radius:50%;
  background:var(--bolita);opacity:.9;box-shadow:0 0 0 2px #fff}
.bolita-min{width:7px;height:7px;opacity:.3;box-shadow:none}

/* ------------------------------------------------- filas con cartel */

.fila-cartel{grid-template-columns:62px 58px 1fr auto;gap:16px}

.miniatura{display:block;width:62px;height:62px;border-radius:14px;overflow:hidden;
  background:var(--humo);position:relative;flex:none}
.miniatura img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--salida)}
.fila-cartel:hover .miniatura img{transform:scale(1.06)}

/* Dos tercios de los eventos no traen cartel: el hueco se rellena con la
   inicial sobre un degradado de la marca, no con un recuadro vacío. */
.miniatura.sin-cartel{background:linear-gradient(145deg,#E8F1F2,#D9E9EB)}
.miniatura .inicial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:600;color:var(--mar);opacity:.42;letter-spacing:-.03em}

@media (max-width:620px){
  .fila-cartel{grid-template-columns:52px 1fr;gap:12px}
  .fila-cartel .miniatura{width:52px;height:52px;border-radius:12px}
  .fila-cartel .h{grid-column:2;order:-1;font-size:.86rem;color:var(--naranja)}
  .fila-cartel .meta{grid-column:2;text-align:left;margin-top:4px}
}

/* Foto de ambiente: no es de ese evento, así que se enseña algo apagada
   para que no se confunda con un cartel de verdad. */
.ambiente{filter:saturate(.82) contrast(.96);opacity:.92}
.miniatura .ambiente{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------------------------------- cabecera de sección */

.telon-seccion{position:relative;margin-top:-54px;height:clamp(260px,34vh,380px);overflow:hidden;
  background:linear-gradient(150deg,var(--mar),var(--agua))}
.telon-seccion .capa{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:1;transform:none;animation:none;
  filter:saturate(.35) brightness(.62) contrast(1.05)}
/* El velo oscurece de arriba abajo para que el blanco se lea, y solo funde
   al lienzo en la última franja: antes se comía el tercio inferior de la foto. */
.telon-seccion .velo{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(4,25,32,.58) 0%, rgba(4,25,32,.40) 45%, rgba(4,25,32,.52) 86%, var(--lienzo) 100%)}
.telon-seccion .telon-txt{padding-bottom:59px}
.telon-seccion .telon-txt h1{font-size:clamp(1.9rem,5.5vw,3.4rem)}
.telon-seccion .telon-txt p{font-size:1rem;margin-top:10px}

@media (max-width:620px){
  .telon-seccion{height:clamp(220px,30vh,300px)}
}

/* ------------------------------------------------- cabecera de la portada */

.telon-doble{display:flex;align-items:flex-end;height:auto;min-height:clamp(430px,58vh,560px)}
.telon-doble .capa{filter:saturate(.66) brightness(.62)}
.velo-doble{background:
  linear-gradient(105deg, rgba(4,25,32,.82) 0%, rgba(4,25,32,.58) 48%, rgba(4,25,32,.28) 100%),
  linear-gradient(180deg, rgba(4,25,32,.38) 0%, rgba(4,25,32,0) 30%, rgba(4,25,32,.46) 100%)}

.doble{position:relative;z-index:4;width:100%;max-width:1040px;margin:0 auto;
  padding:96px 22px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,368px);
  gap:40px;align-items:end}
.doble.sola{grid-template-columns:1fr}
.doble h1{color:#fff;font-size:clamp(2rem,5vw,3.5rem);line-height:1.02;letter-spacing:-.045em;
  max-width:12ch;text-shadow:0 2px 26px rgba(4,25,32,.5)}
.doble h1 em{font-style:normal;color:#FFCBA6}
.doble .entrada{color:rgba(255,255,255,.94);margin:14px 0 20px;max-width:40ch;font-size:1.06rem;
  text-shadow:0 1px 14px rgba(4,25,32,.6)}
.doble .buscador{max-width:480px;margin:0}

.ahora h2{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;opacity:.82;
  margin-bottom:12px;font-weight:600}
.mini-tarjeta{display:grid;grid-template-columns:46px 1fr;gap:13px;align-items:center;
  padding:10px 14px 10px 10px;border-radius:var(--r-md);margin-bottom:8px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;
  transition:background .25s var(--salida)}
.mini-tarjeta:hover{background:rgba(255,255,255,.26)}
.cartelito{width:46px;height:46px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.16);
  position:relative;flex:none;display:flex;align-items:center;justify-content:center}
.cartelito img{width:100%;height:100%;object-fit:cover;display:block}
.inicial-clara{font-size:1.15rem;font-weight:600;color:rgba(255,255,255,.85);line-height:1}
.mini-tarjeta b{display:block;font-weight:600;font-size:.98rem;line-height:1.2}
.mini-tarjeta > span > span{display:block;font-size:.84rem;color:rgba(255,255,255,.82);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-tarjeta .hasta{color:#FFCBA6}
.tambien{margin:12px 0 6px;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.82);
  text-shadow:0 1px 10px rgba(4,25,32,.5)}
.tambien a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);
  transition:border-color .2s var(--salida)}
.tambien a:hover{border-bottom-color:var(--naranja-2)}
.mas{display:inline-block;margin-top:4px;font-size:.84rem;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.35)}

@media (max-width:820px){
  .doble{grid-template-columns:1fr;gap:26px;padding:84px 22px 30px}
  .telon-doble{min-height:0}
}
@media (max-width:620px){
  .doble{padding-left:16px;padding-right:16px}
}

/* Las pastillas de categoría sobre el listado: son enlaces a sus páginas,
   no un filtro que esconde filas. Esas páginas ya existen y se indexan. */
.filtros{margin:0 0 18px}
.filtros .pastilla{background:var(--papel)}

/* El pueblo manda en la línea de sitio: es lo primero que se busca */
.donde b{font-weight:600;color:var(--tinta)}

/* De una exposición abierta interesa cuándo acaba. «hasta el 22 sep» no cabe
   en la columna de la hora, así que estas filas llevan la suya más ancha. */
.fila-abierta{grid-template-columns:62px 62px 1fr auto}
.hasta-cuando{line-height:1.25;color:var(--tinta-2);white-space:nowrap}
.hasta-pie{display:block;font-size:.72rem;color:var(--tinta-3)}
.hasta-dia{display:block;font-size:.8rem;font-weight:500}

@media (max-width:620px){
  .fila-abierta{grid-template-columns:52px 1fr}
  .fila-abierta .hasta-cuando{grid-column:2;order:-1;color:var(--naranja)}
  .fila-abierta .hasta-pie,.fila-abierta .hasta-dia{display:inline;font-size:.82rem;color:inherit}
}

.tit .apunte a{color:var(--tinta-2);border-bottom:1px solid var(--raya-2)}
.tit .apunte a:hover{color:var(--tinta);border-bottom-color:var(--naranja)}

/* ------------------------------------------- pueblo en fiestas ahora mismo */

.en-fiestas-ahora{display:inline-block;margin-top:10px !important;padding:5px 14px;border-radius:var(--r-pill);
  background:rgba(244,99,28,.9);color:#fff;font-size:.86rem;font-weight:500;text-shadow:none}

.ficha-fiesta{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:26px;align-items:start;
  padding:24px;border-radius:var(--r-xl);background:var(--papel);border:1px solid var(--raya);
  box-shadow:var(--sombra)}
.cartel-fiesta{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--humo)}
.cartel-fiesta img{width:100%;height:auto;display:block}
.etiqueta-viva{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--naranja);font-weight:600}
.datos-fiesta h2{margin:8px 0 4px;font-size:1.6rem;letter-spacing:-.03em}
.datos-fiesta .fechas{margin:0 0 16px;color:var(--tinta-2)}
.actos-cortos{list-style:none;margin:0 0 16px;padding:0}
.actos-cortos li{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:7px 0;
  border-top:1px solid var(--raya);font-size:.94rem}
.actos-cortos .cuando{color:var(--tinta-2)}

.fila-fiesta{grid-template-columns:1fr auto;gap:18px}
.fila-fiesta .meta{text-align:right}

@media (max-width:620px){
  .ficha-fiesta{grid-template-columns:1fr;gap:18px;padding:18px}
  .cartel-fiesta{max-width:220px}
  .actos-cortos li{grid-template-columns:1fr;gap:2px}
  .actos-cortos .cuando{font-size:.84rem;color:var(--naranja)}
}

/* ------------------------------------------------- cabecera del buscador */

.telon-buscar{margin-top:-54px;padding:104px 0 38px;
  background:linear-gradient(140deg,var(--mar) 0%,#0B5566 55%,var(--agua) 160%)}
.telon-buscar h1{color:#fff;font-size:clamp(1.8rem,4.6vw,2.8rem);letter-spacing:-.04em;margin-bottom:18px}
.telon-buscar .buscador{max-width:620px;margin:0}
.telon-buscar .pista{margin:14px 0 0;color:rgba(255,255,255,.72);font-size:.9rem}
.telon-buscar .pista b{color:#fff;font-weight:500}

/* ==========================================================================
   Sistema tipográfico
   Titulares en Fraunces, que es una serif con carácter y aguanta bien en
   grande: la voz editorial de un programa de fiestas. Texto e interfaz en
   Inter, que es lo que hay que leer deprisa en una lista.
   Una sola escala, en clases. Nada de tamaños escritos en la vista.
   ========================================================================== */

.telon-txt h1,
.titulo-pagina,
.tit h2,
.titulo-bloque,
.dia-cab .d,
.cifras dd,
.doble h1{font-family:var(--titular);font-optical-sizing:auto}

.titulo-pagina{font-size:clamp(2rem,5.4vw,3.2rem);line-height:1.04;letter-spacing:-.035em;
  font-weight:600;max-width:18ch;margin:0}
.titulo-pagina.ancho{max-width:26ch}

.tit h2{font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.15;letter-spacing:-.025em;font-weight:600}
.titulo-bloque{font-size:1.12rem;letter-spacing:-.02em;font-weight:600}

.entradilla{font-size:1.05rem;line-height:1.55;color:var(--tinta-2);max-width:52ch;margin:.7rem 0 0}
.entradilla b{color:var(--tinta);font-weight:600}

.telon-txt h1,.doble h1{font-weight:600}
.telon-seccion .telon-txt h1{letter-spacing:-.035em}

/* Los números grandes también son tipografía: días, cifras, cuentas */
.dia-cab .d,.cifras dd{font-weight:600;letter-spacing:-.04em}

/* ------------------------------------------------------------------ marca */

.logo{gap:10px}
.marca-svg{display:block;flex:none}
.marca-svg .sol{fill:var(--naranja)}
.marca-svg .mar{stroke:currentColor;opacity:.55}
.logo-texto{font-family:var(--titular);font-weight:600;font-size:1.06rem;letter-spacing:-.02em}

/* ==========================================================================
   Ficha de evento
   El cartel acompaña, no manda: lo que se tiene que leer de un vistazo es
   cuándo, dónde y cuánto. Por eso van en columna propia, con icono, y las
   acciones justo debajo.
   ========================================================================== */

.ficha{padding:38px 0 10px}
.ficha-cab{max-width:760px}
.miga-fina{margin:0 0 14px;font-size:.9rem;color:var(--tinta-3)}
.miga-fina a{color:var(--tinta-2);border-bottom:1px solid var(--raya-2)}
.miga-fina a:hover{color:var(--tinta);border-bottom-color:var(--naranja)}

.marca-pasado{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:6px 14px;
  border-radius:var(--r-pill);background:rgba(244,99,28,.1);color:var(--naranja);
  font-size:.86rem;font-weight:500;text-transform:capitalize}

.ficha-cuerpo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;
  align-items:start;margin-top:30px}
.ficha-cuerpo:only-child,.ficha-cuerpo.sin-cartel{grid-template-columns:1fr}

.ficha-cartel{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--humo);
  box-shadow:var(--sombra-alta)}
.ficha-cartel img{width:100%;height:auto;display:block}
.ficha-cartel figcaption{padding:8px 12px;font-size:.78rem;color:var(--tinta-3);background:#fff}

.datos{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.datos li{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--raya)}
.datos li:first-child{border-top:1px solid var(--raya)}
.datos .ico{display:flex;align-items:center;justify-content:center;width:34px;height:26px;color:var(--agua)}
.datos b{display:block;font-weight:600;font-size:1.06rem;letter-spacing:-.015em}
.datos .apunte{display:block;font-size:.88rem;color:var(--tinta-3);margin-top:1px}

.acciones{display:flex;flex-wrap:wrap;gap:10px}
.boton{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--raya-2);font-size:.94rem;font-weight:500;color:var(--tinta);
  box-shadow:var(--sombra);transition:transform .2s var(--salida),box-shadow .2s var(--salida)}
.boton:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.boton svg{color:var(--tinta-3)}
.boton-principal{background:linear-gradient(140deg,var(--naranja-2),var(--naranja));
  border-color:transparent;color:#fff}
.boton-principal svg{color:rgba(255,255,255,.85)}

.sesiones{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:6px}
.sesiones li{display:flex;gap:10px;align-items:baseline;padding:9px 14px;border-radius:var(--r-md);
  background:var(--humo);font-size:.94rem}
.sesiones b{font-weight:600}

.ficha-texto{max-width:62ch;margin:36px 0 0;font-size:1.06rem;line-height:1.65;color:var(--tinta)}
.ficha-pie{margin:30px 0 0;font-size:.9rem}
.ficha-pie a{color:var(--tinta-2);border-bottom:1px solid var(--raya-2)}
.ficha-pie a:hover{color:var(--naranja);border-bottom-color:var(--naranja)}

@media (max-width:780px){
  .ficha{padding-top:26px}
  .ficha-cuerpo{grid-template-columns:1fr;gap:26px}
  .ficha-cartel{max-width:340px}
}

.donde .pin{display:inline-flex;vertical-align:-2px;margin-right:4px;color:var(--tinta-3)}

/* ==========================================================================
   Banda del mapa en la portada
   Rompe el blanco de la página a media altura y enseña la provincia entera.
   ========================================================================== */

.banda-mapa{margin:56px 0 0;padding:52px 0;color:#EAF3F5;
  background:linear-gradient(150deg,#0A4455 0%,#06303C 62%,#0A4455 100%);position:relative;overflow:hidden}
.banda-mapa::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  left:-140px;bottom:-200px;background:rgba(47,182,178,.28);filter:blur(90px)}
.banda-int{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:48px;align-items:center}
.banda-texto h2{font-family:var(--titular);font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.03em;
  font-weight:600;color:#fff}
.banda-texto p{margin:12px 0 18px;color:rgba(234,243,245,.78);font-size:1.05rem;max-width:36ch}
.leyenda-clara{color:rgba(234,243,245,.8);margin-bottom:22px}
.leyenda-clara .bolita{box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.boton-claro{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.boton-claro:hover{background:rgba(255,255,255,.2);box-shadow:none}
.boton-claro svg{color:rgba(255,255,255,.8)}

.comarcas-banda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:28px 0 0;padding:0;
  font-size:.9rem}
.comarcas-banda a{color:rgba(234,243,245,.72);border-bottom:1px solid rgba(255,255,255,.18)}
.comarcas-banda a:hover{color:#fff;border-bottom-color:var(--naranja-2)}

.banda-mapa-figura{display:block}
.mapa-mini{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(0,0,0,.28))}

@media (max-width:820px){
  .banda-int{grid-template-columns:1fr;gap:30px}
  .banda-mapa-figura{max-width:300px;margin:0 auto}
  .banda-mapa{margin:40px 0;padding:40px 0}
}

/* Filas de fiesta: miniatura, nombre, pueblo en negrita y la cuenta atrás
   solo cuando falta poco. El encabezado del día ya dice la fecha. */
.fila-fiesta-panel{grid-template-columns:62px 1fr auto;gap:16px}
.fila-fiesta-panel .meta b{color:var(--tinta)}
.fila-fiesta-panel .meta .apunte{display:block;font-size:.8rem;color:var(--tinta-3)}
.con-toros{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--naranja);font-size:.84rem}
.con-toros svg{vertical-align:-1px}

@media (max-width:620px){
  .fila-fiesta-panel{grid-template-columns:52px 1fr}
  .fila-fiesta-panel .meta{grid-column:2;text-align:left;margin-top:3px}
  .fila-fiesta-panel .meta .apunte{display:inline;margin-left:8px}
}

/* ==========================================================================
   Ficha de fiesta
   Cabecera con el cartel y lo que hay que saber, y el programa como una tira
   vertical por días: a eso se entra.
   ========================================================================== */

.cab-fiesta{position:relative;margin-top:-54px;padding:96px 0 40px;overflow:hidden;background:var(--mar)}
.cab-foto{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.4) brightness(.5)}
.cab-velo{position:absolute;inset:0;background:
  linear-gradient(120deg,rgba(4,25,32,.88) 0%,rgba(4,25,32,.6) 60%,rgba(4,25,32,.4) 100%)}
.cab-int{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:38px;align-items:end}
.cab-int:only-child,.cab-int.sin-cartel{grid-template-columns:1fr}
.cab-cartel img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.cab-pueblo{margin:0 0 10px;font-size:.98rem;color:rgba(255,255,255,.82)}
.cab-pueblo a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.cab-pueblo a:hover{border-bottom-color:var(--naranja-2)}
.cab-datos h1{color:#fff;text-shadow:0 2px 22px rgba(4,25,32,.5)}
.cab-fechas{display:flex;align-items:center;gap:9px;margin:16px 0 22px;color:rgba(255,255,255,.9);
  font-size:1.08rem;flex-wrap:wrap}
.cab-fechas svg{color:var(--naranja-2)}
.cab-fechas b{font-weight:600;color:#fff}
.cab-cuenta{padding:3px 12px;border-radius:var(--r-pill);background:rgba(244,99,28,.92);
  color:#fff;font-size:.84rem;font-weight:500}

/* --------------------------------------------------------------- la tira */

.tira{list-style:none;margin:0;padding:0;position:relative}
.tira::before{content:"";position:absolute;left:27px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--raya-2),var(--raya-2) 70%,transparent)}
.tira-dia{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding:0 0 26px}
.tira-marca{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;background:#fff;
  border:2px solid var(--raya-2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1}
.tira-num{font-family:var(--titular);font-size:1.3rem;font-weight:600;letter-spacing:-.03em}
.tira-mes{font-size:.66rem;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.06em}
.tira-dia.es-hoy .tira-marca{border-color:var(--naranja);background:var(--naranja);color:#fff}
.tira-dia.es-hoy .tira-mes{color:rgba(255,255,255,.85)}
.tira-dia.pasado{opacity:.5}

.tira-cuerpo{padding-top:4px}
.tira-titulo{margin:0 0 10px;font-weight:600;text-transform:capitalize;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.tira-titulo .apunte{font-weight:400;text-transform:none}
.hoy-marca{padding:2px 10px;border-radius:var(--r-pill);background:var(--naranja);color:#fff;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}

.tira-actos{list-style:none;margin:0;padding:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--papel);border:1px solid var(--raya);box-shadow:var(--sombra)}
.tira-actos li{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:baseline;
  padding:12px 18px;border-top:1px solid var(--raya)}
.tira-actos li:first-child{border-top:none}
.acto-hora{font-weight:600;font-feature-settings:"tnum";color:var(--tinta-2);font-size:.95rem}
.acto-cuerpo a,.acto-nombre{font-size:1.02rem;font-weight:500}
.acto-cuerpo a{border-bottom:1px solid var(--raya-2)}
.acto-cuerpo a:hover{border-bottom-color:var(--naranja)}
.acto-donde{display:block;margin-top:2px;font-size:.87rem;color:var(--tinta-3)}
.acto-donde svg{vertical-align:-2px;margin-right:2px}
.acto-meta{text-align:right;font-size:.82rem;color:var(--tinta-3);white-space:nowrap}
.acto-meta .gratis{display:block;color:var(--agua)}

.aviso-programa{padding:26px;border-radius:var(--r-lg);background:var(--arena);
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.aviso-programa p{margin:0;max-width:46ch;color:var(--tinta-2)}

.cuando-caen{padding:22px 24px;border-radius:var(--r-lg);background:var(--papel);
  border:1px solid var(--raya)}
.regla{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;font-size:1.02rem}
.regla svg{color:var(--agua);flex:none;margin-top:3px}
.anios{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.anios li{display:flex;gap:14px;align-items:baseline;padding:8px 0;border-top:1px solid var(--raya)}
.anios b{font-family:var(--titular);font-size:1.1rem;min-width:3.4rem}
.anios span{color:var(--tinta-2)}
.anios a{margin-left:auto;font-size:.88rem;color:var(--agua);border-bottom:1px solid var(--raya-2)}

@media (max-width:780px){
  .cab-int{grid-template-columns:1fr;gap:24px;align-items:start}
  .cab-cartel{max-width:210px}
  .tira-dia{grid-template-columns:46px 1fr;gap:16px}
  .tira-marca{width:46px;height:46px}
  .tira::before{left:22px}
  .tira-actos li{grid-template-columns:52px 1fr;padding:11px 14px}
  .acto-meta{grid-column:2;text-align:left}
}

/* El programa original: el PDF y las fotos de sus páginas */
.peso{font-size:.8rem;opacity:.7;font-weight:400}
.original{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.paginas-programa{list-style:none;display:grid;gap:10px;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));width:100%}
.paginas-programa img{width:100%;height:150px;object-fit:cover;display:block;border-radius:var(--r-md);
  border:1px solid var(--raya);background:var(--humo);transition:transform .3s var(--salida)}
.paginas-programa a:hover img{transform:scale(1.03)}

/* Los días que ya han pasado, plegados: al entrar interesa lo que queda */
.dias-pasados{margin:0 0 22px}
.dias-pasados summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 18px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--raya-2);
  font-size:.92rem;color:var(--tinta-2);list-style:none;box-shadow:var(--sombra)}
.dias-pasados summary::-webkit-details-marker{display:none}
.dias-pasados summary:hover{color:var(--tinta)}
.dias-pasados .punta{transform:rotate(90deg);transition:transform .25s var(--salida);color:var(--tinta-3)}
.dias-pasados[open] .punta{transform:rotate(-90deg)}
.dias-pasados[open] summary{margin-bottom:20px}
.dias-pasados .tira{padding-left:2px}

/* Un acto a la 1:30 es de la noche anterior: se queda en su día, ordenado al
   final. El fondo suave basta para entenderlo, sin escribir «madrugada». */
.de-madrugada{background:linear-gradient(90deg,rgba(10,68,85,.045),transparent 60%)}

/* Cartel del acto, centrado a la derecha y dentro del alto que ya tiene la fila */
.tira-actos li{grid-template-columns:62px 1fr 46px;align-items:center}
.acto-cartel{width:46px;height:46px;border-radius:10px;overflow:hidden;background:var(--humo);
  align-self:center}
.acto-cartel img{width:100%;height:100%;object-fit:cover;display:block}
.tira-actos .acto-meta{display:block;margin-top:3px;text-align:left;font-size:.82rem;color:var(--tinta-3)}
.tira-actos .acto-meta .gratis{display:inline;margin-left:8px}

@media (max-width:780px){
  .tira-actos li{grid-template-columns:52px 1fr 40px}
  .acto-cartel{width:40px;height:40px}
}

/* ==========================================================================
   Pasada de contraste
   El problema no era la falta de efectos, era que todo vivía en el mismo tono.
   Superficies en dos niveles, bordes que se ven, saltos de tamaño mayores y
   el naranja usado con decisión. El cristal se queda donde hay foto detrás,
   que es donde luce.
   ========================================================================== */

.panel,.tarjeta,.tira-actos,.cuando-caen,.ficha-fiesta{border-color:var(--raya-2)}

/* --- las filas responden al ratón */
a.fila{position:relative}
a.fila::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:var(--naranja);opacity:0;transform:scaleY(.4);
  transition:opacity .2s var(--salida),transform .25s var(--salida)}
a.fila:hover{background:rgba(10,68,85,.05);transform:none}
a.fila:hover::before{opacity:1;transform:scaleY(1)}
a.fila:hover h3{color:var(--mar)}
a.fila:focus-visible{background:rgba(10,68,85,.06);outline:none}
a.fila:focus-visible::before{opacity:1;transform:scaleY(1)}

.tira-actos li{transition:background .2s var(--salida)}
.tira-actos li:hover{background:rgba(10,68,85,.04)}

.comarcas li,.eventos li{transition:background .2s var(--salida)}

/* --- el encabezado de día, con el número en naranja: es la marca de la casa */
.dia-cab{border-top:1px solid var(--raya);margin-top:4px}
.dia-cab:first-child{border-top:none;margin-top:0}
.dia-cab .d{color:var(--naranja)}
.dia-cab .s{color:var(--tinta-2);font-weight:500}

/* --- saltos de tamaño de verdad entre sección y contenido */
.tit{margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--arena)}
.tit h2{font-size:clamp(1.5rem,3vw,2.05rem)}
section{padding:46px 0}

/* --- miniaturas con un borde mínimo para que no se peguen al fondo */
.miniatura,.acto-cartel,.cartelito{box-shadow:inset 0 0 0 1px rgba(10,40,50,.07)}

/* --- pastillas: más presencia y estado activo en naranja */
.pastilla{border-color:var(--raya-2);font-weight:500}
.pastilla:hover{border-color:var(--mar);color:var(--tinta)}
.pastilla[aria-current="page"]{background:var(--mar);color:#fff;border-color:transparent}

/* --- la barra pegada se separa del contenido */
.barra.pegada,.barra.plana{box-shadow:0 1px 0 var(--raya),0 6px 20px rgba(10,40,50,.06)}

/* --- el vidrio, solo donde hay imagen detrás */
.mini-tarjeta,.buscador{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}

/* ==========================================================================
   Pie
   Va en todas las páginas: es donde las comarcas y las secciones quedan
   enlazadas desde cualquier punto de la web.
   ========================================================================== */

.pie-grande{margin-top:70px;padding:56px 0 30px;color:#DDE9EB;
  background:linear-gradient(160deg,#0A4455 0%,#062B36 70%);position:relative;overflow:hidden}
.pie-grande::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-180px;top:-260px;background:rgba(244,99,28,.22);filter:blur(110px)}
.pie-rejilla{position:relative;z-index:2;display:grid;gap:40px;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}

.pie-marca .logo{color:#fff;margin-bottom:14px}
.pie-marca .marca-svg .mar{stroke:rgba(255,255,255,.7)}
.pie-frase{margin:0 0 20px;max-width:34ch;color:rgba(221,233,235,.72);font-size:.96rem;line-height:1.55}
.pie-cifras{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9rem;
  color:rgba(221,233,235,.68)}
.pie-cifras b{font-family:var(--titular);font-size:1.05rem;color:#fff;margin-right:5px}

.pie-col h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:rgba(221,233,235,.55);margin-bottom:14px}
.pie-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie-col a{font-size:.94rem;color:rgba(221,233,235,.86);border-bottom:1px solid transparent;
  transition:color .2s var(--salida),border-color .2s var(--salida)}
.pie-col a:hover{color:#fff;border-bottom-color:var(--naranja-2)}

.pie-raya{position:relative;z-index:2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:rgba(221,233,235,.5)}

@media (max-width:860px){
  .pie-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .pie-marca{grid-column:1 / -1}
}
@media (max-width:520px){
  .pie-rejilla{grid-template-columns:1fr}
  .pie-grande{margin-top:50px;padding-top:42px}
}

/* Proponer es una acción: botón discreto en la cabecera, no una sección más */
.nav-boton{padding:7px 16px;border-radius:var(--r-pill);border:1px solid currentColor;
  font-size:.85rem;font-weight:500;opacity:.9;transition:background .2s var(--salida),color .2s var(--salida)}
.nav-boton:hover{background:var(--naranja);border-color:var(--naranja);color:#fff;opacity:1}
.barra.pegada .nav-boton,.barra.plana .nav-boton{border-color:var(--raya-2);color:var(--tinta-2)}
.barra.pegada .nav-boton:hover,.barra.plana .nav-boton:hover{background:var(--naranja);
  border-color:var(--naranja);color:#fff}

.pie-boton{display:inline-block;margin-top:4px;padding:10px 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:.92rem;font-weight:500}
.pie-boton:hover{background:var(--naranja);border-color:var(--naranja)}

/* El mosaico va justo detrás de la banda: sin margen de más entre los dos */
.banda-mapa + .marco > section:first-child,
.banda-mapa + section{padding-top:46px}

/* Las comarcas del pie caben en dos columnas y no se cortan */
.pie-col ul{grid-template-columns:1fr}
.pie-col.dos-columnas ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}

/* Varios eventos de la misma fiesta el mismo día, agrupados en una tarjeta */
.fila-grupo{box-shadow:inset 3px 0 0 var(--mar, #3FD3CE)}
.fila-grupo .donde{white-space:normal}
.fila-grupo .meta b{color:var(--tinta-2)}

/* Páginas de texto (legales, suscripción) */
.pagina-texto{max-width:760px;padding-top:34px;padding-bottom:50px}
.pagina-texto h1{font-size:2rem;letter-spacing:-.03em;margin:0 0 16px}
.pagina-texto h2{font-size:1.15rem;margin:30px 0 8px}
.pagina-texto h3{font-size:1rem;margin:20px 0 6px}
.pagina-texto p,.pagina-texto li{line-height:1.6;color:var(--tinta-2)}
.pagina-texto ul{padding-left:20px}
.pagina-texto .apunte{font-size:.86rem;color:var(--tinta-3)}
.pie-legal a{color:inherit}

/* Suscripción */
.suscribir{background:var(--papel);border:1px solid var(--raya);border-radius:var(--r-xl, 18px);padding:26px 24px;margin:34px 0;display:grid;gap:14px}
.suscribir h2{font-size:1.25rem;letter-spacing:-.02em;margin:0 0 6px}
.suscribir p{margin:0;color:var(--tinta-2)}
.suscribir-linea{display:flex;gap:10px;flex-wrap:wrap}
.suscribir-linea input{flex:1 1 220px;padding:12px 14px;border:1px solid var(--raya);border-radius:var(--r-pill, 999px);font:inherit;font-size:1rem}
.suscribir-acepto{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--tinta-3);line-height:1.45}
.suscribir-acepto input{margin:0}
.suscribir-aviso{padding:12px 14px;border-radius:var(--r-md);font-size:.95rem}
.suscribir-aviso.ok{background:#e6f6f0;color:#0f5a3c}
.suscribir-aviso.error{background:#fbe9e7;color:#8a2a1e}

/* Textos de ficha de fiesta y de lugar */
.texto-fiesta{margin-top:26px;max-width:760px;line-height:1.65;color:var(--tinta-2)}
.texto-lugar{margin-top:18px}
.titulo-bloque-sec{font-size:1rem;margin:0 0 6px;color:var(--tinta)}

/* Artistas */
.quien-actua{margin:10px 0 0;font-size:.95rem;color:var(--tinta-2)}
.quien-actua a{font-weight:500}
.lista-pasados{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lista-pasados li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.lista-pasados .num{color:var(--tinta-3);font-size:.9rem;min-width:88px}

/* Barra de días de la portada y de las páginas de hoy, mañana, semana y finde */
.barra-dias,.periodos{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.dia-boton{border:1px solid var(--linea,#e3e3e3);background:var(--blanco,#fff);border-radius:999px;padding:8px 14px;font:inherit;font-size:.92rem;color:var(--tinta,#111);cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.dia-boton b{font-weight:700;color:var(--acento,#e2572b)}
.dia-boton:hover{border-color:var(--acento,#e2572b)}
.dia-boton.activa{background:var(--tinta,#111);color:#fff;border-color:var(--tinta,#111)}
.dia-boton.activa b{color:#fff}
.dia-boton.vacio{opacity:.45;cursor:default}
.dia-enlace{font-weight:600}
.periodos{margin-top:14px}
.periodos .pastilla.activa{background:var(--tinta,#111);color:#fff}
@media (max-width:640px){.barra-dias{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}.barra-dias::-webkit-scrollbar{display:none}}