/* ════════════════════════════════════════════════════════════════════════════
   web/estilo.css — el sitio web de una feria.

   NO es el CSS de la app (app/feria.css). Aquél es una pantalla de móvil, negra
   y a sangre, para usar DENTRO del recinto. Éste es un sitio: claro, ancho, para
   leer sentado en abril y para que Google lo entienda.

   Los colores de cada feria (--marca, --acento) NO están aquí: los inyecta
   web/plantilla.php en el <head> de cada página. Este fichero se cachea 30 días
   y es el mismo para todos los clientes; si trajera colores, cambiar la marca de
   una feria se los cambiaría a todas o no llegaría nunca.

   ⚠ Al tocar este fichero hay que subir SITIO_CSS_V en web/plantilla.php.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* La marca la pone la página; esto es el respaldo por si se sirviera suelto. */
  --marca:#B3251E;
  --acento:#D99A2B;
  /* Qué letra va encima de esos dos. La calcula paletaWeb() por contraste;
     esto es el respaldo para el caso en que la hoja se sirva suelta. */
  --sobre-marca:#fff;
  --sobre-acento:#20242C;

  --papel:#FBF7F0;      /* el fondo: hueso cálido, no blanco de pantalla */
  --papel-2:#F3EDE2;    /* bandas alternas y tarjetas */
  --tinta:#20242C;
  --tinta-sua:#5C6270;
  --borde:#E3DBCC;
  --blanco:#fff;

  --env:1180px;         /* ancho de lectura */
  --r:14px;             /* radio de las tarjetas */
  --sombra:0 1px 2px rgba(32,36,44,.06), 0 8px 24px rgba(32,36,44,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 17px/1.6 Karla,system-ui,-apple-system,"Segoe UI",sans-serif;
}
img{max-width:100%;display:block}
a{color:var(--marca)}

h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;line-height:1.15;margin:0}
h1{font-weight:800;font-size:clamp(2rem,5.5vw,3.4rem);letter-spacing:-.015em}
h2{font-weight:600;font-size:clamp(1.5rem,3.2vw,2.2rem)}
h3{font-weight:600;font-size:1.15rem}

.env{width:min(100% - 2.4rem,var(--env));margin-inline:auto}

/* Un enlace que sólo existe para el teclado: primer tabulador de la página. */
.saltar{position:absolute;left:-9999px;top:0;z-index:99;padding:.7rem 1rem;
  background:var(--tinta);color:#fff;border-radius:0 0 var(--r) 0}
.saltar:focus{left:0}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:20;background:var(--papel);
  border-bottom:1px solid var(--borde);backdrop-filter:saturate(1.4) blur(6px)}
.cab-in{display:flex;align-items:center;gap:1rem;min-height:66px;flex-wrap:wrap}
.cab-marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  color:var(--tinta);font-family:Fraunces,serif;font-weight:600;font-size:1.1rem;
  margin-right:auto;min-width:0}
.cab-marca img{height:34px;width:auto;border-radius:6px}
.cab-marca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cab-nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.cab-nav a{padding:.45rem .75rem;border-radius:999px;text-decoration:none;
  color:var(--tinta-sua);font-weight:600;font-size:.95rem}
.cab-nav a:hover{background:var(--papel-2);color:var(--tinta)}
.cab-nav a[aria-current="page"]{background:var(--marca);color:var(--sobre-marca)}
.cab-app{background:var(--acento);color:var(--sobre-acento)!important;margin-left:.35rem}
.cab-app:hover{filter:brightness(.95)}

/* El combo de ediciones. Una feria con años a la espalda son varias ferias, y
   éste es el único sitio del que se salta de una a otra: se disfraza de pastilla
   del menú porque es navegación, no un formulario. */
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.cab-ed{position:relative;display:inline-flex;align-items:center}
.cab-ed::after{content:"▾";position:absolute;right:.7rem;pointer-events:none;
  color:var(--tinta-sua);font-size:.8rem}
.cab-ed select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:.45rem 1.7rem .45rem .75rem;border-radius:999px;
  border:1px solid var(--borde);background:var(--blanco);
  color:var(--tinta-sua);font-family:inherit;font-weight:600;font-size:.95rem}
.cab-ed select:hover{color:var(--tinta);background:var(--papel-2)}

/* ── Submenús y buscador de la cabecera (28/09/2026) ───────────────────────
   Con <details>: se abren con el dedo y el teclado, sin JS. En escritorio la
   lista cae flotando bajo su rótulo; en el móvil se despliega en su sitio,
   dentro de la persiana. */
.cab-sub{position:relative}
.cab-sub summary{list-style:none;cursor:pointer;padding:.45rem .75rem;border-radius:999px;
  color:var(--tinta-sua);font-weight:600;white-space:nowrap}
.cab-sub summary::-webkit-details-marker{display:none}
.cab-sub summary::after{content:" ▾";font-size:.8em}
.cab-sub summary:hover,.cab-sub[open] summary{background:var(--papel-2);color:var(--tinta)}
.cab-sub summary[aria-current="page"]{background:var(--marca);color:var(--sobre-marca)}
.cab-sub-lista{position:absolute;top:calc(100% + .35rem);left:0;z-index:30;min-width:230px;
  max-width:calc(100vw - 2rem);
  max-height:min(70vh,460px);overflow-y:auto;background:var(--blanco);border:1px solid var(--borde);
  border-radius:14px;box-shadow:var(--sombra);padding:.35rem;display:flex;flex-direction:column}
.cab-nav .cab-sub-lista a{border-radius:9px;padding:.5rem .7rem;display:flex;justify-content:space-between;gap:.8rem}
.cab-sub-lista a small{color:var(--tinta-sua);font-weight:400}
.cab-sub-lista .cab-sub-todo{font-weight:700;border-bottom:1px solid var(--borde);border-radius:9px 9px 0 0;margin-bottom:.2rem}
/* «🗺️ Mapa ▾» va casi en el borde derecho: su lista se abre hacia la izquierda. */
.cab-sub-app .cab-sub-lista{left:auto;right:0}
.cab-sub-app summary.cab-app{color:var(--sobre-acento);background:var(--acento)}
.cab-sub-app summary.cab-app::after{color:inherit}
/* El buscador, en su SEGUNDA FILA (29/09/2026), como la barra de nav3.php:
   píldora a todo el ancho y el botón redondo dentro, a la derecha. Se ve en
   escritorio y en el móvil, sin abrir la persiana. */
.cab-fila-buscar{padding-bottom:.7rem}
.cab-buscar{position:relative;margin:0}
.cab-buscar input{font:inherit;font-size:.95rem;width:100%;padding:.6rem 3.2rem .6rem 1.1rem;border-radius:999px;
  border:1.5px solid var(--borde);background:var(--blanco);color:var(--tinta)}
.cab-buscar input:focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
.cab-buscar button{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--marca);color:var(--sobre-marca)}
.cab-buscar button:hover{filter:brightness(.92)}

/* El menú del móvil, sin una línea de JS: una casilla y el selector ~. Menos
   cosas que se puedan romper, y funciona antes de que cargue nada. */
.cab-abrir,.cab-boton{display:none}
@media (max-width:860px){
  .cab-boton{display:block;width:42px;height:42px;border-radius:10px;
    border:1px solid var(--borde);position:relative;cursor:pointer;background:var(--blanco)}
  .cab-boton span,.cab-boton span::before,.cab-boton span::after{
    position:absolute;left:11px;width:20px;height:2px;background:var(--tinta);content:""}
  .cab-boton span{top:20px}
  .cab-boton span::before{top:-6px}
  .cab-boton span::after{top:6px}
  .cab-nav{display:none;width:100%;flex-direction:column;align-items:stretch;
    padding-bottom:.7rem}
  /* La persiana se desplaza POR DENTRO (07/10/2026). La cabecera es sticky, y
     desplegada mide más que la pantalla —13 entradas y el submenú del Mapa—:
     lo de abajo no se alcanzaba nunca, porque al deslizar la cabecera se
     queda pegada arriba, y tapaba el texto de la página. Se descuentan la
     fila de la marca (66px) y la del buscador. La bola del modo app se
     esconde mientras tanto (sitioBarraApp). */
  .cab-abrir:checked ~ .cab-nav{display:flex;flex-wrap:nowrap;max-height:calc(100vh - 140px);
    max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  /* Sin esto el flex ENCOGE las entradas para que quepan en la altura máxima
     en vez de dejar que se desplacen, y el submenú del Mapa se quedaba en nada. */
  .cab-nav > *{flex-shrink:0}
  .cab-nav a{padding:.7rem .9rem;border-radius:10px}
  .cab-app{margin-left:0;text-align:center}
  .cab-ed{width:100%}
  .cab-ed select{width:100%;padding:.7rem .9rem;border-radius:10px}
  .cab-ed::after{right:1rem}
  /* En la persiana, los submenús se abren en su sitio en vez de flotar. */
  .cab-sub summary{padding:.7rem .9rem;border-radius:10px}
  .cab-sub-lista{position:static;box-shadow:none;border:0;background:transparent;
    padding:0 0 .3rem 1rem;max-height:none}
}

/* ── Portada: el cartel manda ─────────────────────────────────────────────── */
.hero{padding:2.6rem 0 2rem;background:
  radial-gradient(120% 90% at 15% 0%, color-mix(in srgb,var(--acento) 22%,transparent) 0%, transparent 60%),
  var(--papel)}
.hero-in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:2.4rem;align-items:center}
.hero-cartel{border-radius:var(--r);box-shadow:var(--sombra);width:100%}
.hero-cartel-no{aspect-ratio:3/4;border-radius:var(--r);background:var(--papel-2);
  display:grid;place-items:center;color:var(--tinta-sua);border:1px dashed var(--borde)}
.hero h1{margin:.4rem 0 .5rem}
.hero-sub{font-size:1.15rem;color:var(--tinta-sua);margin:0 0 1rem}
.hero-fechas{font-family:Fraunces,serif;font-size:1.25rem;font-weight:600;color:var(--marca);margin:0 0 .3rem}
.hero-lugar{color:var(--tinta-sua);margin:0 0 1.3rem}
@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;gap:1.4rem}
  .hero-cartel,.hero-cartel-no{max-width:280px;margin-inline:auto}
}

/* Estado de la feria: la única cosa de la portada que cambia sola con el reloj */
.estado{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;
  border-radius:999px;font-weight:700;font-size:.85rem;letter-spacing:.02em;
  text-transform:uppercase}
.estado.ahora{background:var(--marca);color:var(--sobre-marca)}
.estado.futura{background:var(--acento);color:var(--sobre-acento)}
.estado.pasada{background:var(--papel-2);color:var(--tinta-sua);border:1px solid var(--borde)}
.estado .punto{width:9px;height:9px;border-radius:50%;background:currentColor}
.estado.ahora .punto{animation:latir 1.8s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.25}}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.botones{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.15rem;
  border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;background:none}
.btn-1{background:var(--marca);color:var(--sobre-marca)}
.btn-1:hover{filter:brightness(1.08)}
.btn-2{background:var(--blanco);color:var(--tinta);border-color:var(--borde)}
.btn-2:hover{border-color:var(--marca);color:var(--marca)}
.btn-3{background:var(--acento);color:var(--sobre-acento)}

/* ── Secciones ────────────────────────────────────────────────────────────── */
.sec{padding:3rem 0}
.sec.alt{background:var(--papel-2)}
.sec-cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.sec-cab p{margin:.35rem 0 0;color:var(--tinta-sua)}
.sec-mas{font-weight:700;text-decoration:none;white-space:nowrap}

/* ── Saluda ───────────────────────────────────────────────────────────────── */
.saluda{background:var(--blanco);border:1px solid var(--borde);border-left:5px solid var(--acento);
  border-radius:var(--r);padding:1.6rem 1.8rem;box-shadow:var(--sombra)}
.saluda p{margin:0 0 .8rem}
.saluda p:last-child{margin-bottom:0}
.saluda .firma{font-family:Fraunces,serif;font-weight:600;color:var(--marca)}

/* ── Rejillas ─────────────────────────────────────────────────────────────── */
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rejilla.ancha{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  padding:1.1rem 1.2rem;text-decoration:none;color:inherit;display:block;
  transition:transform .15s,box-shadow .15s}
a.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.tarjeta .emoji{font-size:1.7rem;line-height:1;display:block;margin-bottom:.5rem}
.tarjeta h3{margin-bottom:.25rem}
.tarjeta .meta{color:var(--tinta-sua);font-size:.9rem}

/* ── Programa ─────────────────────────────────────────────────────────────── */
.dia{margin-bottom:2.2rem;scroll-margin-top:80px}
.dia-cab{position:sticky;top:66px;z-index:5;background:var(--papel);
  padding:.7rem 0 .5rem;border-bottom:2px solid var(--marca);margin-bottom:.2rem}
.sec.alt .dia-cab{background:var(--papel-2)}
/* Sólo la PRIMERA letra. `text-transform:capitalize` ponía mayúscula en cada
   palabra y dejaba «Abierto Toda La Feria»: vale para «viernes, 7 de agosto»,
   que es para lo que se puso, y estropea cualquier otro rótulo. */
.dia-cab h2{font-size:1.35rem}
.dia-cab h2::first-letter{text-transform:uppercase}
.dia-cab .cuantos{color:var(--tinta-sua);font-family:Karla,sans-serif;font-size:.9rem;font-weight:400}

/* 112px es lo que mide «09:00–14:00» en Fraunces a 1rem. Con 88px el rango de
   un acto permanente partía en dos líneas justo por el guion. */
.acto{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--borde)}
.acto:last-child{border-bottom:0}
.acto-hora{font-family:Fraunces,serif;font-weight:600;font-size:1rem;color:var(--marca);
  padding-top:.15rem;white-space:nowrap}
.acto-hora small{display:block;font-family:Karla,sans-serif;font-weight:400;
  font-size:.78rem;color:var(--tinta-sua)}
.acto h3{margin-bottom:.3rem}
/* El título es un enlace a la ficha del acto, pero no se pinta como tal: en una
   lista de cien actos, cien titulares en rojo son una lista ilegible. */
.acto h3 a{color:inherit;text-decoration:none}
.acto h3 a:hover{color:var(--marca)}
.acto-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.acto-desc{color:var(--tinta-sua);font-size:.95rem;margin:.4rem 0 0}
@media (max-width:560px){
  .acto{grid-template-columns:1fr;gap:.2rem}
  .acto-hora{padding-top:0}
  .acto-hora small{display:inline;margin-left:.4rem}
}

.etq{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;
  border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--papel-2);color:var(--tinta-sua);border:1px solid var(--borde);
  text-decoration:none}
a.etq:hover{border-color:var(--marca);color:var(--marca)}
.etq-gratis{background:color-mix(in srgb,var(--acento) 30%,var(--papel));color:var(--tinta);
  border-color:transparent}
.etq-hoy{background:var(--marca);color:var(--sobre-marca);border-color:transparent}
.etq-nota{background:var(--blanco)}

/* ── La demostración ──────────────────────────────────────────────────────────

   Una landing montada desde la prospección es la feria de un ayuntamiento que
   NO nos la ha encargado: se le enseña para vendérsela. Dos cosas la separan de
   una web de verdad, y las dos tienen que verse sin buscarlas:

     .demo-banda   quién NO es el titular de esta web. Va pegada arriba del todo,
                   por delante de la cabecera, porque si estuviera al pie sólo la
                   leería quien llegue al final.
     .etq-ejemplo  el acto que no es suyo. En rayado y en el color de la banda,
                   no en el de la feria: la marca de la feria es justamente lo
                   que aquí no puede dar credibilidad a un acto inventado.

   El amarillo no sale de --marca ni de --acento a propósito. Los colores de la
   feria los elige quien monta la landing y podrían ser estos mismos; el aviso
   tiene que seguir destacando aunque eso pase. */
.demo-banda{
  background:repeating-linear-gradient(135deg,#FFF3CD,#FFF3CD 14px,#FFECB3 14px,#FFECB3 28px);
  color:#5C4708;border-bottom:2px solid #E0B100;
  font-size:.9rem;line-height:1.45;padding:.6rem 0}
.demo-banda .env{display:flex;gap:.7rem;align-items:flex-start}
.demo-banda strong{font-weight:700}
.demo-banda .emoji{font-size:1.1rem;line-height:1.2}
.etq-ejemplo{background:#FFF3CD;color:#5C4708;border-color:#E0B100}
.demo-nota{
  background:#FFF3CD;border:1px solid #E0B100;border-radius:var(--r);
  color:#5C4708;padding:.8rem 1rem;margin:0 0 1.2rem;font-size:.92rem}

/* ── Estrellas ────────────────────────────────────────────────────────────────
   Dos filas de cinco estrellas, una encima de otra: la de abajo gris y la de
   arriba en el color de acento, recortada al porcentaje exacto de la media. Así
   un 4,3 se ve como un 4,3 — media estrella redondeada mentiría en la nota que
   se está enseñando al lado.

   Las medidas van en `em` y el tamaño se hereda: las mismas estrellas valen
   dentro de una etiqueta del programa (.8rem) y en el resumen de la ficha. */
.estrellas{position:relative;display:inline-block;line-height:1;
  white-space:nowrap;letter-spacing:.05em;color:var(--borde);
  /* ⚠ El `text-align:left` no sobra: la caja de la nota va centrada, y la fila
     de arriba —que es absoluta y más estrecha— heredaba ese centrado. Sus cinco
     estrellas salían corridas a la derecha y, sobre las grises, se veían nueve. */
  text-align:left}
.estrellas .relleno{position:absolute;left:0;top:0;overflow:hidden;
  color:var(--acento);-webkit-text-stroke:.4px color-mix(in srgb,var(--acento) 60%,#000)}
.etq-nota .nota{margin-left:.35rem;color:var(--tinta)}
.etq-nota .cuantas{margin-left:.2rem;font-weight:400;color:var(--tinta-sua)}

/* ── Opiniones de un acto ─────────────────────────────────────────────────── */
.opiniones{margin-top:2.6rem;border-top:1px solid var(--borde);padding-top:1.6rem}
.opiniones h2{margin-bottom:1.1rem}

.op-resumen{display:flex;gap:2rem;flex-wrap:wrap;align-items:center;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  padding:1.2rem 1.4rem;margin-bottom:1.4rem}
.op-nota{text-align:center;min-width:120px}
.op-nota b{display:block;font-family:Fraunces,serif;font-size:2.6rem;line-height:1;
  color:var(--marca)}
.op-nota .estrellas{display:inline-block;font-size:1.05rem;margin:.35rem 0 .2rem}
/* Por clase y no `.op-nota span`: ese selector alcanzaba también a las dos
   filas de estrellas, las volvía `display:block` —y con ello del ancho de la
   caja, no del texto— y la de arriba tapaba las cinco. Un 4,3 se veía como un 5. */
.op-nota .op-cuantas{display:block;color:var(--tinta-sua);font-size:.88rem}

.op-reparto{flex:1 1 260px;min-width:220px;max-width:420px}
.op-fila{display:flex;align-items:center;gap:.6rem;font-size:.85rem;
  color:var(--tinta-sua);padding:.1rem 0}
.op-e{width:2.6rem;white-space:nowrap}
.op-barra{flex:1;height:8px;border-radius:999px;background:var(--papel-2);overflow:hidden}
.op-barra i{display:block;height:100%;background:var(--acento)}
.op-n{width:1.8rem;text-align:right}

.op-lista{display:grid;gap:.9rem}
.opinion{background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--r);padding:1rem 1.15rem}
.opinion header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin-bottom:.35rem;font-size:.9rem}
.opinion header .estrellas{font-size:.9rem}
.opinion header .cuando{color:var(--tinta-sua)}
.opinion p{margin:0;color:var(--tinta-sua)}

/* Quien lee esto está en su casa, no en la feria: el enlace a la app no es un
   botón más de la página, es la única forma de contestar. */
.op-app{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;
  background:var(--papel-2);border:1px solid var(--borde);border-radius:var(--r);
  padding:1rem 1.2rem}
.op-app p{margin:0;flex:1 1 320px;font-size:.95rem;color:var(--tinta-sua)}

/* ── Filtros del programa ─────────────────────────────────────────────────── */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:1rem 0 1.4rem;border-bottom:1px solid var(--borde);margin-bottom:1.4rem}
.filtros input[type=search],.filtros select{
  font:inherit;font-size:.95rem;padding:.55rem .8rem;border-radius:999px;
  border:1.5px solid var(--borde);background:var(--blanco);color:var(--tinta)}
.filtros input[type=search]{flex:1 1 220px;min-width:0}
.filtros .btn{padding:.55rem 1rem}

/* Los atajos de día: una tira que rueda en el móvil en vez de partirse en
   cuatro líneas y empujar el programa fuera de la pantalla. */
.tira-dias{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem .2rem 1rem;
  scrollbar-width:thin}
.tira-dias a{flex:0 0 auto;padding:.5rem .9rem;border-radius:999px;
  border:1.5px solid var(--borde);background:var(--blanco);text-decoration:none;
  color:var(--tinta);font-weight:600;font-size:.9rem;white-space:nowrap}
.tira-dias a.hoy{border-color:var(--marca);color:var(--marca)}

/* ── Álbum ────────────────────────────────────────────────────────────────── */
.album{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.album figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  cursor:zoom-in;background:var(--papel-2)}
.album img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s}
.album figure:hover img{transform:scale(1.05)}
.album figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .7rem .5rem;
  color:#fff;font-size:.82rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}

/* ── Visor ────────────────────────────────────────────────────────────────── */
.visor{position:fixed;inset:0;z-index:60;background:rgba(12,12,14,.94);
  display:none;place-items:center;padding:1rem}
.visor[open],.visor.abierto{display:grid}
.visor img{max-width:min(100%,1100px);max-height:82vh;object-fit:contain;border-radius:8px}
.visor .pie-visor{color:#e7e2d8;text-align:center;margin-top:.9rem;font-size:.9rem}
.visor button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;
  width:46px;height:46px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.visor .cerrar{top:1rem;right:1rem;font-size:1.1rem}
.visor .ant{left:1rem;top:50%;transform:translateY(-50%)}
.visor .sig{right:1rem;top:50%;transform:translateY(-50%)}

/* ── Espacios y noticias ──────────────────────────────────────────────────── */
.mapa-caja{height:min(60vh,460px);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--borde);position:relative;background:var(--papel-2)}
.mapa-caja>div{position:absolute;inset:0}

.noticia{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.noticia:hover{box-shadow:var(--sombra)}
.noticia img{aspect-ratio:16/9;object-fit:cover;width:100%}
.noticia .cuerpo{padding:1rem 1.1rem}
.noticia .fecha{color:var(--tinta-sua);font-size:.85rem}
.noticia h3{margin:.2rem 0 .35rem}

.articulo{max-width:74ch;margin-inline:auto}
.articulo p{margin:0 0 1.1rem}
.articulo img{border-radius:var(--r);margin:1.4rem 0}

/* ── Vacíos ───────────────────────────────────────────────────────────────── */
.vacio{text-align:center;padding:3.5rem 1rem;background:var(--blanco);
  border:1px dashed var(--borde);border-radius:var(--r);color:var(--tinta-sua)}
.vacio .emoji{font-size:2.6rem;display:block;margin-bottom:.6rem}
.vacio h2{color:var(--tinta);margin-bottom:.5rem}

/* ── El plano del recinto ────────────────────────────────────────────────────
   Las casetas, en mapa y en lista. La lista NO es un adorno: es lo que indexa
   Google y lo que queda cuando el lienzo no carga. Ver web/plano.php. */
/* ⚠ `[hidden]` pierde contra CUALQUIER display de autor: la regla del navegador
   es de la hoja de usuario-agente y `.plano-lista{display:grid}` la pisa sin
   despeinarse. Apagar «Casetas» ocultaba el título —un h2, display:block— y
   dejaba las cuarenta y cinco casetas puestas. Se arregla una vez y para todo
   el sitio, que ya ha mordido dos veces en la app. */
[hidden]{display:none!important}

.filtros button.etq{cursor:pointer;font-family:inherit}
.etq .n{background:var(--papel-2);border-radius:999px;padding:0 .4rem;
  font-size:.78rem;color:var(--tinta-sua)}
.etq.off{opacity:.45;text-decoration:line-through}

.plano-ficha{background:var(--blanco);border:1px solid var(--borde);
  border-left:5px solid var(--acento);border-radius:var(--r);
  padding:1rem 1.2rem;margin-top:1rem}
.plano-ficha-in{display:flex;gap:1rem;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap}
.plano-ficha p{margin:.5rem 0 0}

.plano-h{margin:2.2rem 0 .9rem;font-size:1.25rem}
.plano-lista{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.plano-item{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  padding:.6rem .8rem;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,transform .15s}
.plano-item:hover{border-color:var(--marca);transform:translateY(-2px)}
.plano-n{flex:0 0 auto;display:grid;place-items:center;min-width:34px;height:34px;
  padding:0 .4rem;border-radius:8px;color:#fff;font-weight:700;font-size:.9rem}
.plano-n-vacio{background:var(--papel-2);color:var(--tinta-sua)}
.plano-nom{display:block;font-weight:600;line-height:1.25}
.plano-tipo{display:block;color:var(--tinta-sua);font-size:.85rem}

/* ── Sitio TURÍSTICO ─────────────────────────────────────────────────────────
   Las mismas piezas del sitio de feria con otro contenido: un territorio se
   enseña con fotos —lo que se va a ver— y una feria con horas. */
.hero-in.hero-solo{grid-template-columns:minmax(0,1fr);max-width:46rem}

.cifras{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.4rem 0}
.cifra{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 1rem;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  text-decoration:none;color:inherit;min-width:110px}
a.cifra:hover{border-color:var(--marca)}
.cifra b{font-family:Fraunces,serif;font-size:1.7rem;line-height:1;color:var(--marca)}
.cifra span{font-size:.85rem;color:var(--tinta-sua)}

.tur-t{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tur-img{display:block;width:100%;height:160px;object-fit:cover;background:var(--papel-2)}
.tur-img-no{display:grid;place-items:center;font-size:2.4rem}
.tur-cuerpo{display:block;padding:.9rem 1rem 1.1rem}
.tur-cuerpo h3{margin:0 0 .25rem}
.tur-cuerpo .meta{display:block;color:var(--tinta-sua);font-size:.9rem}
.tur-nota{display:inline-block;margin-top:.4rem;font-size:.85rem;color:var(--tinta-sua)}
.tur-nota small{opacity:.75}

/* La ficha de un punto o de una ruta: la foto manda y el texto se lee al lado. */
.tur-ficha{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:2rem;align-items:start}
.tur-ficha img{width:100%;border-radius:var(--r);box-shadow:var(--sombra)}
.tur-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.6rem;margin-top:.8rem}
.tur-galeria img{width:100%;height:110px;object-fit:cover;border-radius:10px}
.tur-datos{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.tur-datos li{display:flex;gap:.6rem;align-items:flex-start}
.tur-datos b{flex:0 0 auto;color:var(--tinta-sua);font-weight:600;min-width:5.5rem}

/* Las paradas de una ruta, en orden y numeradas: el número ES el recorrido. */
.tur-paradas{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.tur-paradas li{display:flex;gap:.9rem;align-items:center;background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--r);padding:.7rem .9rem}
.tur-paradas .n{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--marca);color:var(--sobre-marca);font-weight:700}
.tur-paradas a{text-decoration:none;color:inherit;font-weight:600}
.tur-paradas a:hover{color:var(--marca)}
.tur-paradas img{width:56px;height:56px;object-fit:cover;border-radius:8px}

@media (max-width:860px){
  .tur-ficha{grid-template-columns:1fr}
}

/* ── Migas ────────────────────────────────────────────────────────────────── */
/* ── La ficha larga de un punto o un tour ─────────────────────────────
   Las etiquetas de encima del título, la prosa del enriquecimiento y los
   botones de negocio. La prosa se estrecha a 68ch a propósito: son párrafos
   para LEER, y una línea del ancho de la envoltura (1180px) obliga a buscar
   el principio del renglón siguiente. */
.tur-etqs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.tur-negocio{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--borde)}
.tur-prosa{margin-top:2.6rem;max-width:68ch}
.tur-prosa h2{margin:1.8rem 0 .6rem;font-size:1.3rem}
.tur-prosa h2:first-child{margin-top:0}
.tur-prosa p{margin:0 0 .9rem;line-height:1.7}
.tur-prosa ul{margin:0 0 1rem;padding-left:1.2rem}
.tur-prosa li{margin-bottom:.35rem;line-height:1.6}

.migas{font-size:.88rem;color:var(--tinta-sua);padding:1.2rem 0 0}
.migas a{color:var(--tinta-sua)}
.migas span{margin:0 .35rem}

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#D8D3C9;margin-top:3rem;padding:2.6rem 0 1.2rem}
.pie a{color:#D8D3C9}
.pie-in{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pie-marca{font-family:Fraunces,serif;font-size:1.2rem;color:#fff;margin:0 0 .3rem}
.pie-fechas{margin:0 0 .6rem;color:var(--acento)}
.pie p{margin:0 0 .3rem;font-size:.92rem}
.pie-nav,.pie-redes{display:flex;flex-direction:column;gap:.45rem;font-size:.92rem}
.pie-redes{flex-direction:row;flex-wrap:wrap;gap:.8rem;align-items:flex-start}
.pie-legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1rem;
  font-size:.82rem;color:#9C978D}
.pie-legal a{color:#9C978D}

@media print{
  .cab,.pie,.filtros,.tira-dias,.botones{display:none}
  body{background:#fff}
  .acto{break-inside:avoid}
}

/* ── Territorio (patronato, mancomunidad, distribuidor) ─────────────────────
   Casi todo es lo de siempre (.tarjeta, .rejilla, .dia); aquí sólo lo que la
   agenda de muchas ferias necesita encima: la fecha arriba de la tarjeta, que
   es lo primero que se lee en una agenda, y la marca de «tiene web propia». */
.ter-hero .env{max-width:900px}
.ter-hero .migas{margin-bottom:.6rem}
.ter-cuando{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-size:.85rem;font-weight:700;color:var(--marca);margin-bottom:.3rem}
.ter-cuando .etq{font-size:.75rem}
.ter-tiene-web{margin-top:.5rem;font-size:.75rem}
/* Sin cartel: la fecha en grande a la izquierda en vez del hueco de la foto. */
.ter-sin-cartel{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:stretch}
.ter-fecha{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--papel-2);border-right:1px solid var(--borde);color:var(--marca);
  font-family:Fraunces,serif;line-height:1;padding:.6rem .2rem;text-align:center}
.ter-fecha b{font-size:1.9rem;font-weight:600}
.ter-fecha small{font-family:Karla,sans-serif;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tinta-sua);margin-top:.15rem}
.ter-fecha small:first-child{margin:0 0 .15rem}

/* ── Ajustes (web/ajustes.php) ───────────────────────────────────────────────
   Cada ajuste es un grupo de botones en pastilla, uno elegido: se ve de un
   vistazo qué está puesto, y cambiarlo es un toque. */
.aj-env{max-width:820px}
.aj-grupo{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  padding:1.1rem 1.2rem 1.2rem;margin-bottom:1rem}
.aj-grupo h2{font-size:1.2rem;margin-bottom:.25rem}
.aj-nota{color:var(--tinta-sua);font-size:.92rem;margin:.1rem 0 .8rem}
.aj-opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.aj-op{font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;padding:.55rem .95rem;border-radius:999px;
  border:1.5px solid var(--borde);background:var(--papel);color:var(--tinta);text-align:left}
.aj-op:hover{border-color:var(--marca)}
.aj-op.on{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.aj-anchas .aj-op{border-radius:14px;flex:1 1 240px;display:flex;flex-direction:column;gap:.2rem}
.aj-op .aj-d{font-weight:400;font-size:.85rem;opacity:.85}
.aj-op small{font-weight:400;font-size:.75rem;opacity:.8}
.aj-cuenta .botones{margin-top:.2rem}
.aj-guardado{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,150%);z-index:40;
  background:var(--tinta);color:var(--papel);padding:.6rem 1.1rem;border-radius:999px;font-weight:600;
  box-shadow:var(--sombra);transition:transform .25s;pointer-events:none}
.aj-guardado.ver{transform:translate(-50%,0)}