/* ================================================================
   EscapaHoy — Piloto cinematográfico para páginas internas (V4-1)
   CSS aislado y aditivo: se carga DESPUÉS de css/styles.css y solo
   afecta a elementos dentro de .cinema-subpage. No modifica
   css/styles.css ni ninguna página real.
================================================================ */

.cinema-subpage {
  --cs-ink:       #0a1c26;
  --cs-paper:     #fbf8f2;
  --cs-cream:     #f4ede0;
  --cs-sand:      #e7dcc7;
  --cs-aqua:      #16a3a8;
  --cs-aqua-deep: #0e7f86;
  --cs-text:      #17323b;
  --cs-text-soft: #4a5f66;
  --cs-light:     #f7f4ee;
  --cs-light-soft: rgba(247, 244, 238, 0.78);
  --cs-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  background: var(--cs-paper);
}

/* Botón primario base (modal incluido): aqua en vez de azul. Las
   reglas más específicas de secciones concretas, más abajo en este
   mismo archivo, prevalecen sobre esta por orden de aparición. */
.cinema-subpage .btn--primary {
  background: var(--cs-aqua);
  box-shadow: none;
}
.cinema-subpage .btn--primary:hover {
  background: var(--cs-aqua-deep);
  box-shadow: none;
}

/* ---------------- Tipografía general de la página ---------------- */
.cinema-subpage h1,
.cinema-subpage h2,
.cinema-subpage h3 {
  font-family: var(--cs-serif);
  letter-spacing: -0.01em;
}

/* ================================================================
   HEADER — más sobrio, coherente con home-cinematica
================================================================ */
.cinema-subpage .header {
  background: rgba(10, 28, 38, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(247, 244, 238, 0.1);
}
.cinema-subpage .header.scrolled {
  box-shadow: 0 8px 24px rgba(6, 14, 19, 0.35);
}

/* Silueta blanca del logo (mismo filtro ya usado en el footer real) */
.cinema-subpage .header__logo .logo__img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.cinema-subpage .nav__list {
  background: rgba(247, 244, 238, 0.06);
  border: 1px solid rgba(247, 244, 238, 0.12);
}
.cinema-subpage .nav__link {
  color: var(--cs-light-soft);
}
.cinema-subpage .nav__link:hover,
.cinema-subpage .nav__link--active {
  /* !important necesario: styles.css fija .nav__link--active con
     !important (var(--color-primary)), que si no ganaría siempre,
     incluido dentro del menú móvil. */
  color: var(--cs-light) !important;
  background: rgba(22, 163, 168, 0.22);
}

.cinema-subpage .header__cta.btn--primary {
  background: var(--cs-aqua);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(22, 163, 168, 0.6);
}
.cinema-subpage .header__cta.btn--primary:hover {
  background: var(--cs-aqua-deep);
  box-shadow: none;
  transform: translateY(-1px);
}

.cinema-subpage .header__hamburger span {
  background: var(--cs-light);
}

/* Menú móvil (panel deslizante desde header__hamburger): styles.css
   lo pinta blanco (var(--color-white)) por defecto; aquí lo pasamos
   a ink para que sea coherente con el resto de la página. Mismo
   breakpoint (768px) en el que styles.css activa el panel fijo. */
@media (max-width: 768px) {
  .cinema-subpage .header__nav {
    background: var(--cs-ink);
    border-left: 1px solid rgba(247, 244, 238, 0.14);
  }
  .cinema-subpage .nav-overlay.visible {
    background: rgba(10, 28, 38, 0.55);
  }
}

/* ================================================================
   HERO DE PLANES — sección nueva, tono editorial oscuro
================================================================ */
.plans-hero {
  background: var(--cs-ink);
  color: var(--cs-light);
  padding: clamp(7.5rem, 16vw, 10.5rem) var(--container-pad) clamp(2rem, 5vw, 2.75rem);
  text-align: center;
}
.plans-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plans-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.68);
  margin-bottom: 1.1rem;
}
.plans-hero__title {
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 1.1rem;
}
.plans-hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--cs-light-soft);
  max-width: 44ch;
  margin: 0 auto;
}
.plans-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 1.8rem;
}
.plans-hero__stat {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(247, 244, 238, 0.75);
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(247, 244, 238, 0.18);
  border-radius: 999px;
}
.plans-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
}
.plans-hero .btn--primary {
  background: var(--cs-aqua);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(22, 163, 168, 0.6);
}
.plans-hero .btn--primary:hover {
  background: var(--cs-aqua-deep);
  transform: translateY(-2px);
}
.plans-hero .btn--ghost {
  background: transparent;
  color: var(--cs-light);
  border: 1.5px solid rgba(247, 244, 238, 0.55);
}
.plans-hero .btn--ghost:hover {
  background: rgba(247, 244, 238, 0.12);
  border-color: var(--cs-light);
  transform: translateY(-2px);
}

/* Páginas que usan .page-header__title/.page-header__subtitle dentro de
   .plans-hero (con o sin la clase .page-header en la propia sección):
   heredan colores oscuros de styles.css; se sobreescriben a claro.
   Sin restringir a --plans: cualquier subpágina cinema que reutilice
   .plans-hero (mapa, consejos, contacto, créditos...) debe heredar el
   mismo contraste claro sobre fondo oscuro. */
.cinema-subpage .plans-hero .page-header__title {
  color: var(--cs-light);
}
.cinema-subpage .plans-hero .page-header__subtitle {
  color: var(--cs-light-soft);
}

/* ================================================================
   BANNER IMPRESCINDIBLES — de azul degradado a crema/aqua editorial
================================================================ */
.cinema-subpage .imprescindibles-banner {
  background: var(--cs-cream);
  border-top: 1px solid var(--cs-sand);
  border-bottom: 1px solid var(--cs-sand);
}
.cinema-subpage .imprescindibles-banner__title {
  color: var(--cs-text);
  font-family: var(--cs-serif);
  font-weight: 700;
}
.cinema-subpage .imprescindibles-banner__sub {
  color: var(--cs-text-soft);
}
.cinema-subpage .imprescindibles-banner .btn--primary {
  background: var(--cs-aqua);
  color: #fff;
  box-shadow: none;
}
.cinema-subpage .imprescindibles-banner .btn--primary:hover {
  background: var(--cs-aqua-deep);
  transform: translateY(-1px);
  box-shadow: none;
}

/* ================================================================
   GUÍAS POR ZONA — pills limpias, sin emoji, acento aqua
================================================================ */
.plans-guides {
  background: var(--cs-paper);
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(23, 50, 59, 0.08);
}
.plans-guides__inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.plans-guides__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-text-soft);
  white-space: nowrap;
}
.plans-guides__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.plans-guides__pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.12);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--cs-text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.plans-guides__pill:hover {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
  background: rgba(22, 163, 168, 0.06);
}

/* ================================================================
   FILTROS/BUSCADOR — pills limpias, acento aqua, sin panel azul
================================================================ */
.cinema-subpage .filters-section {
  background: var(--cs-paper);
}
.cinema-subpage .filters {
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.1);
  box-shadow: 0 12px 32px -20px rgba(23, 50, 59, 0.25);
}
.cinema-subpage .search-wrap__input {
  border-color: rgba(23, 50, 59, 0.14);
}
.cinema-subpage .search-wrap__input:focus {
  border-color: var(--cs-aqua);
  box-shadow: 0 0 0 3px rgba(22, 163, 168, 0.15);
}
.cinema-subpage .filter-group__label {
  color: var(--cs-text-soft);
}
.cinema-subpage .chip {
  background: var(--cs-paper);
  border: 1px solid rgba(23, 50, 59, 0.14);
  color: var(--cs-text);
}
.cinema-subpage .chip:not(.chip--active):hover {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
}
.cinema-subpage .chip--active,
.cinema-subpage .chip--easy.chip--active,
.cinema-subpage .chip--medium.chip--active,
.cinema-subpage .chip--hard.chip--active {
  background: var(--cs-aqua);
  border-color: var(--cs-aqua);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(22, 163, 168, 0.55);
}
.cinema-subpage .filters__count {
  color: var(--cs-text-soft);
}
.cinema-subpage .filters__footer .btn--ghost {
  border-color: rgba(23, 50, 59, 0.18);
  color: var(--cs-text);
}
.cinema-subpage .filters__footer .btn--ghost:hover {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
  background: rgba(22, 163, 168, 0.06);
}

/* ================================================================
   CARDS DE PLANES — más editoriales, menos SaaS
================================================================ */
.cinema-subpage .plans-section {
  background: var(--cs-paper);
}
.cinema-subpage .plan-card {
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.08);
  box-shadow: 0 16px 34px -26px rgba(23, 50, 59, 0.35);
  border-radius: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cinema-subpage .plan-card__img-inner {
  transition: transform 0.5s ease;
}

/* Hover premium sutil: solo desktop con puntero fino, respeta
   prefers-reduced-motion. Sin animaciones continuas ni al hacer scroll. */
@media (hover: hover) and (pointer: fine) {
  /* !important necesario: styles.css anima .plan-card con
     "fadeInUp ... both", cuyo fill-mode deja transform:translateY(0)
     fijado de forma persistente por encima de reglas normales como
     esta de :hover. No podemos tocar styles.css, así que superamos
     solo esa propiedad concreta aquí. */
  .cinema-subpage .plan-card:hover {
    border-color: transparent;
    box-shadow: 0 22px 44px -22px rgba(23, 50, 59, 0.4);
    transform: translateY(-4px) !important;
  }
  .cinema-subpage .plan-card:hover .plan-card__img-inner {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-subpage .plan-card,
  .cinema-subpage .plan-card__img-inner {
    transition: none;
  }
  .cinema-subpage .plan-card:hover {
    transform: none !important;
  }
  .cinema-subpage .plan-card:hover .plan-card__img-inner {
    transform: none;
  }
}
.cinema-subpage .plan-card__title {
  font-family: var(--cs-serif);
  font-weight: 700;
  color: var(--cs-text);
}
.cinema-subpage .plan-card__zone,
.cinema-subpage .plan-card__duration {
  color: var(--cs-text-soft);
}
.cinema-subpage .plan-card__desc {
  color: var(--cs-text-soft);
}
.cinema-subpage .plan-card__tag {
  color: var(--cs-aqua-deep);
}

/* Badges de tipo: de multicolor a una única familia aqua/neutra */
.cinema-subpage .badge--blue,
.cinema-subpage .badge--green,
.cinema-subpage .badge--orange,
.cinema-subpage .badge--sand,
.cinema-subpage .badge--purple {
  background: rgba(22, 163, 168, 0.12);
  color: var(--cs-aqua-deep);
}

/* Badge de tipo sobre la foto de la card: fondo ink translúcido con
   blur para que "Ruta"/"Cala"/"Pueblo"... se lea siempre, tanto sobre
   fotos claras como oscuras (la variante aqua-clara de arriba solo
   funciona bien sobre fondo blanco, no sobre fotos). */
.cinema-subpage .plan-card__type-badge .badge {
  background: rgba(10, 28, 38, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--cs-light);
  border: 1px solid rgba(247, 244, 238, 0.28);
  text-shadow: 0 1px 2px rgba(6, 14, 19, 0.4);
}

.cinema-subpage .plan-card__btn.btn {
  background: transparent;
  border: 1.5px solid rgba(23, 50, 59, 0.16);
  color: var(--cs-text);
}
.cinema-subpage .plan-card__btn.btn:hover {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
  background: rgba(22, 163, 168, 0.06);
}

.cinema-subpage .no-results h3 {
  font-family: var(--cs-serif);
  color: var(--cs-text);
}
.cinema-subpage .no-results p {
  color: var(--cs-text-soft);
}
.cinema-subpage .no-results .btn--primary {
  background: var(--cs-aqua);
}
.cinema-subpage .no-results .btn--primary:hover {
  background: var(--cs-aqua-deep);
}

/* ---------------- Modal de detalle de plan: styles.css lo pinta
   blanco/genérico (fondo blanco puro, cierre gris con hover rojo,
   título/línea divisoria en azul) — aquí se revierte todo a la
   paleta ink/cream/aqua. Los badges internos (.badge--blue/green/
   orange/sand) ya se unifican a aqua por la regla de arriba, así
   que no hace falta tocarlos aparte. No se toca js/main.js: solo
   se re-pintan las clases que ya genera. ---------------- */
.cinema-subpage .modal-overlay {
  background: rgba(10, 28, 38, 0.72);
}
.cinema-subpage .modal {
  background: var(--cs-paper);
  border: 1px solid rgba(23, 50, 59, 0.08);
  border-radius: 20px;
  box-shadow: 0 40px 90px -24px rgba(6, 14, 19, 0.55);
}
.cinema-subpage .modal__header-img {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(247, 244, 238, 0.14);
}
.cinema-subpage .modal__close {
  background: rgba(10, 28, 38, 0.06);
  border: 1px solid rgba(23, 50, 59, 0.14);
  color: var(--cs-text-soft);
}
.cinema-subpage .modal__close:hover {
  background: rgba(22, 163, 168, 0.14);
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
}
.cinema-subpage .modal__title {
  font-family: var(--cs-serif);
  color: var(--cs-text);
}
.cinema-subpage .modal__meta-grid {
  background: var(--cs-cream);
}
.cinema-subpage .modal__meta-label {
  color: var(--cs-text-soft);
}
.cinema-subpage .modal__meta-value {
  color: var(--cs-text);
}
.cinema-subpage .modal__section-title {
  color: var(--cs-aqua-deep);
}
.cinema-subpage .modal__section-title::after {
  background: rgba(22, 163, 168, 0.25);
}
.cinema-subpage .modal__text,
.cinema-subpage .modal__list li {
  color: var(--cs-text-soft);
}
.cinema-subpage .modal__list li::before {
  color: var(--cs-aqua-deep);
}
.cinema-subpage .modal__tip {
  background: var(--cs-cream);
  color: var(--cs-text-soft);
  border-left-color: var(--cs-aqua);
}
.cinema-subpage .modal__sticky-footer {
  background: var(--cs-paper);
  border-top: 1px solid rgba(23, 50, 59, 0.1);
  border-radius: 0 0 20px 20px;
}

/* ================================================================
   FOOTER — paleta ink de home-cinematica
================================================================ */
.cinema-subpage .footer {
  background: var(--cs-ink);
  color: rgba(247, 244, 238, 0.7);
}
.cinema-subpage .footer__tagline {
  color: rgba(247, 244, 238, 0.55);
}
.cinema-subpage .footer__col-title {
  color: var(--cs-light);
}
.cinema-subpage .footer__links a {
  color: rgba(247, 244, 238, 0.55);
}
.cinema-subpage .footer__links a:hover {
  color: var(--cs-light);
}
.cinema-subpage .footer__bottom {
  border-top-color: rgba(247, 244, 238, 0.1);
}
.cinema-subpage .footer__legal,
.cinema-subpage .footer__credit {
  color: rgba(247, 244, 238, 0.4);
}

/* ================================================================
   ================================================================
   PÁGINA: MAPA (mapa-cinematica.html)
   Reutiliza lo de arriba: header, tipografía, .btn--primary,
   .chip / .chip--active (los filtros del mapa comparten estas
   mismas clases con los de planes), footer. Aquí solo lo propio
   del mapa: hero compacto, panel lateral, contenedor de Leaflet,
   leyenda, popups y tarjetas de "cerca de ti".
   ================================================================
================================================================ */

/* ---------------- Hero del mapa: más compacto que el de planes,
   el mapa es una herramienta, no una escena ---------------- */
.map-hero {
  background: var(--cs-ink);
  color: var(--cs-light);
  padding: clamp(6rem, 13vw, 7.5rem) var(--container-pad) clamp(1.75rem, 4vw, 2.25rem);
  text-align: center;
}
.map-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.68);
  margin-bottom: 1rem;
}
.map-hero__title {
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 0.9rem;
}
.map-hero__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.6;
  color: var(--cs-light-soft);
  max-width: 52ch;
  margin: 0 auto;
}
.map-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 1.4rem;
}
.map-hero__stat {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(247, 244, 238, 0.75);
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(247, 244, 238, 0.18);
  border-radius: 999px;
}
.map-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
}
.map-hero .btn--primary {
  background: var(--cs-aqua);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(22, 163, 168, 0.6);
}
.map-hero .btn--primary:hover {
  background: var(--cs-aqua-deep);
  transform: translateY(-2px);
}
.map-hero .btn--ghost {
  background: transparent;
  color: var(--cs-light);
  border: 1.5px solid rgba(247, 244, 238, 0.55);
}
.map-hero .btn--ghost:hover {
  background: rgba(247, 244, 238, 0.12);
  border-color: var(--cs-light);
  transform: translateY(-2px);
}

/* ---------------- Layout: panel lateral + mapa ---------------- */
.cinema-subpage .map-layout-section {
  background: var(--cs-paper);
}
.cinema-subpage .map-sidebar {
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.1);
  box-shadow: 0 12px 32px -20px rgba(23, 50, 59, 0.25);
}
.cinema-subpage .map-filter-label {
  color: var(--cs-text-soft);
}
.cinema-subpage .map-results-count {
  color: var(--cs-text-soft);
}
.cinema-subpage .map-sidebar__intro,
.cinema-subpage .map-sidebar__disclaimer {
  color: var(--cs-text-soft);
}
/* Nota: .chip / .chip--active del mapa ya heredan el estilo aqua
   definido más arriba en "FILTROS/BUSCADOR" — no se duplica aquí. */

.cinema-subpage .btn--locate {
  background: var(--cs-aqua);
}
.cinema-subpage .btn--locate:hover:not(:disabled) {
  background: var(--cs-aqua-deep);
}
.cinema-subpage .nearby-map-input:focus {
  border-color: var(--cs-aqua);
  box-shadow: 0 0 0 3px rgba(22, 163, 168, 0.15);
}
.cinema-subpage .nearby-map-form .btn--primary {
  background: var(--cs-aqua);
}
.cinema-subpage .nearby-map-form .btn--primary:hover {
  background: var(--cs-aqua-deep);
}
.cinema-subpage .btn--ver-resultados {
  color: var(--cs-aqua-deep);
  border-color: rgba(22, 163, 168, 0.35);
}
.cinema-subpage .btn--ver-resultados:hover {
  background: var(--cs-aqua);
  border-color: var(--cs-aqua);
  color: #fff;
}

/* ---------------- Contenedor del mapa (Leaflet no se toca) ---------------- */
.cinema-subpage #map {
  border: 1px solid rgba(23, 50, 59, 0.1);
}
.cinema-subpage .map-btn-flotante {
  border-color: rgba(22, 163, 168, 0.35);
  color: var(--cs-aqua-deep);
}
.cinema-subpage .map-btn-flotante:hover {
  background: var(--cs-aqua);
  color: #fff;
  box-shadow: 0 4px 16px rgba(22, 163, 168, 0.35);
}

/* Tratamiento visual de los tiles (SOLO CSS, mismo proveedor OSM):
   menos saturación y brillo, un poco más de contraste, para que el
   mapa no compita en blanco puro contra el ink/cream del resto de
   la página. Solo afecta al pane de tiles — pines, popups y
   controles viven en panes hermanos y no se ven afectados. */
.cinema-subpage #map .leaflet-tile-pane {
  filter: saturate(0.65) brightness(0.83) contrast(1.08);
}

/* Controles de zoom: de blanco puro a un tono integrado con la página */
.cinema-subpage .leaflet-control-zoom a {
  background: var(--cs-paper);
  color: var(--cs-text);
  border-color: rgba(23, 50, 59, 0.15) !important;
}
.cinema-subpage .leaflet-control-zoom a:hover {
  background: var(--cs-aqua);
  color: #fff;
}
.cinema-subpage .leaflet-control-attribution {
  background: rgba(251, 248, 242, 0.85);
  color: var(--cs-text-soft);
}
.cinema-subpage .leaflet-control-attribution a {
  color: var(--cs-aqua-deep);
}

/* ---------------- Leyenda ---------------- */
.cinema-subpage .map-legend {
  color: var(--cs-text-soft);
}
.cinema-subpage .map-legend__label {
  color: var(--cs-text);
}

/* ---------------- Popups de Leaflet: versión oscura premium ----------------
   Se recolorea el wrapper/tip que genera Leaflet (no son generados por
   js/mapa.js, son estructura interna de la librería) y las clases
   .map-popup__* que sí genera crearPopupHTML() en js/mapa.js. */
.cinema-subpage .map-popup-container .leaflet-popup-content-wrapper {
  background: var(--cs-ink);
  box-shadow: 0 20px 44px -18px rgba(6, 14, 19, 0.6);
}
.cinema-subpage .map-popup-container .leaflet-popup-tip {
  background: var(--cs-ink);
}
.cinema-subpage .map-popup-container .leaflet-popup-close-button {
  color: rgba(247, 244, 238, 0.7) !important;
}
.cinema-subpage .map-popup-container .leaflet-popup-close-button:hover {
  color: var(--cs-light) !important;
}
.cinema-subpage .map-popup__tipo {
  background: rgba(22, 163, 168, 0.22);
  color: var(--cs-light);
}
.cinema-subpage .map-popup__zona {
  color: var(--cs-light-soft);
}
.cinema-subpage .map-popup__title {
  font-family: var(--cs-serif);
  color: var(--cs-light);
}
.cinema-subpage .map-popup__meta {
  color: var(--cs-light-soft);
}

/* ---------------- Sección "planes cerca de ti" ---------------- */
.cinema-subpage .map-results-section {
  background: var(--cs-cream);
}
.cinema-subpage .map-results-placeholder {
  color: var(--cs-text-soft);
}
.cinema-subpage .nearby-result-card {
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.08);
  box-shadow: 0 16px 34px -26px rgba(23, 50, 59, 0.35);
}
.cinema-subpage .nearby-result-card:hover {
  box-shadow: 0 22px 44px -22px rgba(23, 50, 59, 0.4);
}
.cinema-subpage .nearby-result__name {
  font-family: var(--cs-serif);
  color: var(--cs-text);
}
.cinema-subpage .nearby-result__meta {
  color: var(--cs-text-soft);
}
.cinema-subpage .nearby-result__tipo {
  background: rgba(22, 163, 168, 0.12);
  color: var(--cs-aqua-deep);
}
.cinema-subpage .btn--volver-mapa {
  border-color: rgba(23, 50, 59, 0.18);
  color: var(--cs-text);
}
.cinema-subpage .btn--volver-mapa:hover {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
}
.cinema-subpage .btn--volver-mapa--bottom {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
}
.cinema-subpage .btn--volver-mapa--bottom:hover {
  background: var(--cs-aqua);
  color: #fff;
}

/* ================================================================
   ================================================================
   PÁGINA: CONTACTO / PROPÓN UN PLAN (contacto-cinematica.html)
   Reutiliza lo de "common cinema subpages" (arriba del todo):
   header, tipografía, .btn--primary, footer. Aquí solo lo propio
   de contacto: hero humano/compacto, columna editorial, tarjeta
   de formulario y CTA final.
   ================================================================
================================================================ */

/* ---------------- Hero: tono humano y editorial ---------------- */
.contact-hero {
  background: var(--cs-ink);
  color: var(--cs-light);
  padding: clamp(6rem, 13vw, 7.5rem) var(--container-pad) clamp(2rem, 5vw, 2.75rem);
  text-align: center;
}
.contact-hero__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.68);
  margin-bottom: 1rem;
}
.contact-hero__title {
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.1;
  margin: 0 0 0.9rem;
}
.contact-hero__subtitle {
  font-size: clamp(0.98rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: var(--cs-light-soft);
  max-width: 50ch;
  margin: 0 auto;
}
.contact-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 1.6rem;
}
.contact-hero__stat {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(247, 244, 238, 0.75);
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(247, 244, 238, 0.18);
  border-radius: 999px;
}

/* ---------------- Sección de formulario ---------------- */
.cinema-subpage .contact-section {
  background: var(--cs-paper);
}
.cinema-subpage .contact-section--alt {
  background: var(--cs-cream);
  border-top: 1px solid var(--cs-sand);
}
.cinema-subpage .contact-intro__title {
  color: var(--cs-text);
}
.cinema-subpage .contact-intro__text {
  color: var(--cs-text-soft);
}
.cinema-subpage .contact-intro__note {
  background: #fff;
  color: var(--cs-text-soft);
  border-left-color: var(--cs-aqua);
}

/* Lista "qué tipo de planes publicamos": antes bloque con estilos
   inline y check verde; ahora clases propias con acento aqua. */
.contact-checklist {
  margin-top: 2rem;
}
.contact-checklist__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-soft);
  margin-bottom: 1rem;
}
.contact-checklist__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--cs-text-soft);
}
.contact-checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(22, 163, 168, 0.14);
  color: var(--cs-aqua-deep);
  font-weight: 700;
  font-size: 0.78rem;
}

/* ---------------- Tarjeta de formulario ---------------- */
.cinema-subpage .form-card {
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.08);
  box-shadow: 0 16px 34px -26px rgba(23, 50, 59, 0.35);
}
.cinema-subpage .form-label {
  color: var(--cs-text);
}
.cinema-subpage .form-label sup {
  color: var(--cs-aqua-deep);
}
.cinema-subpage .form-input,
.cinema-subpage .form-textarea,
.cinema-subpage .form-select {
  background: var(--cs-paper);
  border-color: rgba(23, 50, 59, 0.16);
  color: var(--cs-text);
}
.cinema-subpage .form-input:focus,
.cinema-subpage .form-textarea:focus,
.cinema-subpage .form-select:focus {
  border-color: var(--cs-aqua);
  box-shadow: 0 0 0 3px rgba(22, 163, 168, 0.15);
  background: #fff;
}
.cinema-subpage .form-input::placeholder,
.cinema-subpage .form-textarea::placeholder {
  color: rgba(23, 50, 59, 0.4);
}
.contact-form-note {
  font-size: 0.8rem;
  color: var(--cs-text-soft);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.cinema-subpage .form-check input[type="checkbox"] {
  accent-color: var(--cs-aqua);
}
.cinema-subpage .form-check label {
  color: var(--cs-text-soft);
}
.cinema-subpage .form-check a {
  color: var(--cs-aqua-deep);
}
.cinema-subpage .form-check a:hover {
  color: var(--cs-aqua);
}
.cinema-subpage .form-success {
  background: var(--cs-cream);
  border-color: var(--cs-sand);
}
.cinema-subpage .form-success__title {
  color: var(--cs-text);
}
.cinema-subpage .form-success__text {
  color: var(--cs-text-soft);
}

/* ---------------- CTA final ---------------- */
.contact-cta {
  background: var(--cs-cream);
  border-top: 1px solid var(--cs-sand);
  padding: clamp(2.5rem, 6vw, 3.5rem) var(--container-pad);
}
.contact-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-cta__text {
  font-size: 1.05rem;
  color: var(--cs-text);
  margin-bottom: 1.4rem;
}
.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.contact-cta .btn--ghost {
  background: transparent;
  color: var(--cs-text);
  border: 1.5px solid rgba(23, 50, 59, 0.2);
}
.contact-cta .btn--ghost:hover {
  border-color: var(--cs-aqua);
  color: var(--cs-aqua-deep);
  background: rgba(22, 163, 168, 0.06);
}

/* ================================================================
   ================================================================
   PÁGINA: CONSEJOS (consejos-cinematica.html)
   Reutiliza "common cinema subpages": header, tipografía,
   .btn--primary/.btn--ghost, footer. También reutiliza el
   unificado de badges a aqua ya definido en la sección de PLANES
   (.badge--blue/green/orange), así que las etiquetas de cada
   tarjeta de consejo ya salen coherentes sin más CSS. Aquí solo lo
   propio de consejos: hero editorial, franja introductoria,
   tarjetas de consejo y CTA final sin gradiente azul.
   ================================================================
================================================================ */

/* ---------------- Hero: editorial y práctico ---------------- */
.tips-hero {
  background: var(--cs-ink);
  color: var(--cs-light);
  padding: clamp(6.5rem, 14vw, 8.5rem) var(--container-pad) clamp(2rem, 5vw, 2.75rem);
  text-align: center;
}
.tips-hero__inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tips-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.68);
  margin-bottom: 1rem;
}
.tips-hero__title {
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.1;
  margin: 0 0 0.9rem;
}
.tips-hero__subtitle {
  font-size: clamp(0.98rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: var(--cs-light-soft);
  max-width: 54ch;
  margin: 0 auto;
}
.tips-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 1.6rem;
}
.tips-hero__stat {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(247, 244, 238, 0.75);
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(247, 244, 238, 0.18);
  border-radius: 999px;
}

/* ---------------- Franja introductoria ---------------- */
.tips-intro {
  background: var(--cs-cream);
  border-bottom: 1px solid var(--cs-sand);
  padding: clamp(2.5rem, 6vw, 3.5rem) var(--container-pad);
}
.tips-intro__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.tips-intro__title {
  color: var(--cs-text);
  margin-bottom: 0.9rem;
}
.tips-intro__text {
  font-size: 1rem;
  color: var(--cs-text-soft);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.tips-intro__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cs-aqua-deep);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(22, 163, 168, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tips-intro__link:hover {
  color: var(--cs-aqua);
  border-color: var(--cs-aqua);
}

/* ---------------- Tarjetas de consejo: editoriales, no badges de
   colorines. Los badges .badge--blue/green/orange ya se unifican a
   aqua en la sección de PLANES de este mismo archivo. ---------------- */
.cinema-subpage .tips-section {
  background: var(--cs-paper);
}
.cinema-subpage .tip-card {
  background: #fff;
  border: 1px solid rgba(23, 50, 59, 0.08);
  box-shadow: 0 16px 34px -26px rgba(23, 50, 59, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cinema-subpage .tip-card:hover {
  box-shadow: 0 22px 44px -22px rgba(23, 50, 59, 0.4);
}
.cinema-subpage .tip-card__title {
  font-family: var(--cs-serif);
  color: var(--cs-text);
}
.cinema-subpage .tip-card__list li {
  color: var(--cs-text-soft);
}
.cinema-subpage .tip-card__list li strong {
  color: var(--cs-text);
}
.cinema-subpage .tip-card__list li::before {
  color: var(--cs-aqua-deep);
}

/* ---------------- CTA final: sin gradiente azul ni emojis ---------------- */
.tips-cta {
  background: var(--cs-ink);
  color: var(--cs-light);
  padding: clamp(3rem, 7vw, 4.5rem) var(--container-pad);
  text-align: center;
}
.tips-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}
.tips-cta__title {
  color: var(--cs-light);
  margin-bottom: 0.8rem;
}
.tips-cta__text {
  font-size: 1.05rem;
  color: var(--cs-light-soft);
  margin-bottom: 1.6rem;
}
.tips-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.tips-cta .btn--primary {
  background: var(--cs-aqua);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(22, 163, 168, 0.6);
}
.tips-cta .btn--primary:hover {
  background: var(--cs-aqua-deep);
  transform: translateY(-2px);
}
.tips-cta .btn--ghost {
  background: transparent;
  color: var(--cs-light);
  border: 1.5px solid rgba(247, 244, 238, 0.55);
}
.tips-cta .btn--ghost:hover {
  background: rgba(247, 244, 238, 0.12);
  border-color: var(--cs-light);
  transform: translateY(-2px);
}

/* ================================================================
   ================================================================
   PÁGINA: FICHA DE PLAN (planes/cala-del-moraig-cinematica.html)
   Reutiliza common (header, tipografía, .btn--primary/.btn--ghost,
   footer) y el .modal__tip ya unificado a aqua (definido en la
   sección de PLANES de este mismo archivo), que esta ficha reutiliza
   tal cual para el bloque de "Consejos". Los badges .badge--blue/
   green/sand también se heredan ya unificados. Aquí solo lo propio
   de una ficha de plan: hero con breadcrumb y CTAs, secciones de
   contenido, checklist, galería, sidebar de info rápida y nearby.
   Scope obligatorio: .cinema-subpage--plan-detail, para no afectar
   a ninguna otra ficha real que use estas mismas clases genéricas
   (.plan-hero, .plan-section, .plan-quickinfo...).
   ================================================================
================================================================ */

/* ---------------- Hero: breadcrumb discreto + CTAs, sin emojis
   decorativos en los badges (ya limpiados en el HTML piloto) ---------------- */
.cinema-subpage--plan-detail .plan-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 28, 38, 0.15) 0%,
    rgba(10, 28, 38, 0.3) 45%,
    rgba(10, 28, 38, 0.88) 100%
  );
}
/* Badges del hero: sobre foto necesitan el mismo tratamiento que
   .plan-card__type-badge (fondo ink translúcido + blur + texto claro),
   no el aqua-claro genérico de arriba pensado para fondo cream — ese
   se lee mal sobre zonas claras de la imagen. */
.cinema-subpage--plan-detail .plan-hero__badges .badge {
  background: rgba(10, 28, 38, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cs-light);
  border: 1px solid rgba(247, 244, 238, 0.22);
  text-shadow: 0 1px 2px rgba(6, 14, 19, 0.45);
}
.cinema-subpage--plan-detail .plan-hero__title {
  font-family: var(--cs-serif);
}
.cinema-subpage--plan-detail .plan-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.cinema-subpage--plan-detail .plan-hero__actions .btn--primary {
  background: var(--cs-aqua);
  box-shadow: 0 10px 26px -10px rgba(22, 163, 168, 0.6);
}
.cinema-subpage--plan-detail .plan-hero__actions .btn--primary:hover {
  background: var(--cs-aqua-deep);
}
.cinema-subpage--plan-detail .plan-hero__actions .btn--ghost {
  color: var(--cs-light);
  border-color: rgba(247, 244, 238, 0.5);
}
.cinema-subpage--plan-detail .plan-hero__actions .btn--ghost:hover {
  background: rgba(247, 244, 238, 0.12);
  border-color: var(--cs-light);
}

/* ---------------- Contenido principal ---------------- */
.cinema-subpage--plan-detail .plan-detail {
  background: var(--cs-paper);
}
.cinema-subpage--plan-detail .plan-section {
  border-bottom-color: rgba(23, 50, 59, 0.08);
}
.cinema-subpage--plan-detail .plan-section__title {
  font-family: var(--cs-serif);
  font-weight: 700;
  color: var(--cs-text);
}
.cinema-subpage--plan-detail .plan-section__title::after {
  background: rgba(22, 163, 168, 0.25);
}
.cinema-subpage--plan-detail .plan-section__text {
  color: var(--cs-text-soft);
}

/* Checklist "Antes de ir": los emojis de cada item ya se han
   quitado en el HTML piloto; aquí se añade un punto aqua consistente
   con el resto del sitio en su lugar. */
.cinema-subpage--plan-detail .plan-checklist__item {
  background: var(--cs-cream);
  color: var(--cs-text-soft);
  position: relative;
  padding-left: 2rem;
}
.cinema-subpage--plan-detail .plan-checklist__item::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cs-aqua);
}

/* Galería */
.cinema-subpage--plan-detail .plan-gallery__item {
  border-radius: 12px;
}
.cinema-subpage--plan-detail .plan-gallery__item--main {
  border-radius: 16px 0 0 16px;
}

/* ---------------- Sidebar de info rápida ---------------- */
.cinema-subpage--plan-detail .plan-quickinfo {
  background: var(--cs-cream);
  border: 1px solid rgba(23, 50, 59, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 60px -30px rgba(10, 28, 38, 0.4);
}
.cinema-subpage--plan-detail .plan-quickinfo__title {
  color: var(--cs-aqua-deep);
}
.cinema-subpage--plan-detail .plan-quickinfo__label {
  color: var(--cs-text-soft);
}
.cinema-subpage--plan-detail .plan-quickinfo__value {
  color: var(--cs-text);
}
/* Bloques secundarios de la sidebar (Ubicación, Parking, Perros...):
   clase nueva propia de esta ficha piloto, sustituye a los estilos
   inline con border-top que tenía la ficha real. */
.cinema-subpage--plan-detail .plan-quickinfo__block {
  border-top: 1px solid rgba(23, 50, 59, 0.1);
  padding-top: 1.1rem;
  margin-bottom: 0.9rem;
}
.cinema-subpage--plan-detail .plan-quickinfo__block .plan-quickinfo__title {
  margin-bottom: 0.6rem;
}
.cinema-subpage--plan-detail .plan-quickinfo__block-text {
  font-size: 0.85rem;
  color: var(--cs-text-soft);
  margin-bottom: 0.5rem;
}
.cinema-subpage--plan-detail .info-verified {
  background: rgba(22, 163, 168, 0.1);
  border-color: rgba(22, 163, 168, 0.25);
  color: var(--cs-aqua-deep);
}

/* ================================================================
   INFORMACIÓN DEL PLAN COMPACTA EN TABLET Y MÓVIL (piloto Begur)
   Los 4 datos esenciales (Duración, Dificultad, Zona, Tipo) quedan
   siempre como hijos directos de .plan-quickinfo__grid. Los datos
   secundarios se agrupan en <details class="plan-quickinfo__more">,
   anidado dentro del propio grid:
   - Desktop (≥1025px): .plan-quickinfo__more-grid se muestra como un
     segundo grid de 2 columnas apilado justo debajo del principal
     (mismo ancho de columna y gap) — visualmente un único grid
     continuo de 9 campos, sin caja ni borde adicional. El summary se
     oculta por completo. El <details> en sí no se toca (sigue siendo
     display:block, su UA-box no aporta nada visible al no tener
     borde/fondo propio).
   - Tablet/móvil (≤1024px): el <details> se comporta como un
     desplegable nativo real, ocupando el ancho completo de la
     tarjeta. Fail-open: por defecto trae el atributo `open` en el
     HTML, así que sin JavaScript se ve todo el contenido siempre.
     js/main.js solo ajusta el atributo `open` según el breakpoint
     (ver initQuickinfoMore) sin ocultar nada de forma irreversible.
================================================================ */

/* .plan-quickinfo__more es siempre hijo directo de .plan-quickinfo__grid
   (grid de 2 columnas en todos los breakpoints) — debe ocupar el ancho
   completo de la fila en vez de quedar confinado a una sola columna,
   tanto en desktop como en tablet/móvil. */
.cinema-subpage--plan-detail .plan-quickinfo__more {
  grid-column: 1 / -1;
}

@media (min-width: 1025px) {
  /* display:contents en <details>/<div> no aplana de forma fiable en
     todos los motores (comprobado: deja una fila fantasma antes del
     primer campo secundario, con o sin grid-column forzado). En su
     lugar, .plan-quickinfo__more-grid se renderiza como un segundo
     grid de 2 columnas apilado justo debajo del principal, con el
     mismo ancho de columna y el mismo gap — visualmente idéntico a
     un único grid continuo de 9 campos, sin depender de que el
     navegador aplane cajas generadas internamente por <details>. */
  .cinema-subpage--plan-detail .plan-quickinfo__grid {
    margin-bottom: 0;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-summary {
    display: none;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
}

@media (max-width: 1024px) {
  .cinema-subpage--plan-detail .plan-quickinfo__more {
    margin-top: 0.25rem;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cs-aqua-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    border-top: 1px solid rgba(23, 50, 59, 0.1);
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-summary::-webkit-details-marker {
    display: none;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-summary:focus-visible {
    outline: 2px solid var(--cs-aqua);
    outline-offset: 2px;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-label--open {
    display: none;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more[open] .plan-quickinfo__more-label--open {
    display: inline;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more[open] .plan-quickinfo__more-label--closed {
    display: none;
  }
  /* Gateado tras [open]: si se declarara "display: grid" sin
     condicionarlo al estado abierto, la especificidad de esta clase
     autor (0,2,0) gana a la regla nativa del user-agent que oculta
     el contenido de un <details> cerrado (comprobado: el desplegable
     cerrado seguía mostrando los 5 campos). Al depender de [open],
     cuando el atributo se retira el elemento vuelve a heredar el
     display:none nativo, sin ninguna declaración nuestra que lo
     compita.
     Siempre 2 columnas en todo el rango ≤1024px (no solo ≤768px):
     la tarjeta permanece con anchura de sidebar móvil (max-width:
     540px, css/styles.css) en toda la franja tablet/móvil, así que
     4 columnas nunca caben — antes esto se intentaba resolver con
     una segunda regla a ≤768px con menor especificidad, que por eso
     nunca llegaba a ganarle a esta (comprobado: a 400px se seguían
     computando 4 columnas de ~130px y el grid desbordaba la tarjeta
     y la página). minmax(0,1fr) + min-width:0 en los items evita que
     el contenido largo fuerce las columnas por encima del ancho
     disponible. */
  .cinema-subpage--plan-detail .plan-quickinfo__more[open] .plan-quickinfo__more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md, 1rem);
    margin-top: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cinema-subpage--plan-detail .plan-quickinfo__more-grid .plan-quickinfo__item {
    min-width: 0;
  }
}

/* ================================================================
   FAQ CINEMA (2ª ficha piloto — Playa de la Barrosa)
   Reutiliza tal cual la estructura nativa de la web real
   (<details class="plan-faq__item"><summary class="plan-faq__question">
   ...<p class="plan-faq__answer">), que ya es un acordeón accesible
   sin JavaScript. Aquí solo se reviste con la paleta cinema; no se
   toca .plan-faq/.plan-faq__item/etc. en css/styles.css, así que el
   resto de fichas reales (con o sin FAQ) no se ven afectadas.
================================================================ */
.cinema-subpage--plan-detail .plan-faq {
  gap: 0.85rem;
}
.cinema-subpage--plan-detail .plan-faq__item {
  background: var(--cs-cream);
  border: 1px solid rgba(23, 50, 59, 0.08);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
}
.cinema-subpage--plan-detail .plan-faq__question {
  font-family: var(--cs-serif);
  color: var(--cs-text);
  cursor: pointer;
}
.cinema-subpage--plan-detail .plan-faq__answer {
  color: var(--cs-text-soft);
}

/* ---------------- Planes cercanos ---------------- */
.cinema-subpage--plan-detail .nearby-card {
  background: #fff;
  border-color: rgba(23, 50, 59, 0.08);
}
.cinema-subpage--plan-detail .nearby-card__name {
  font-family: var(--cs-serif);
  color: var(--cs-text);
}
.cinema-subpage--plan-detail .nearby-card__meta {
  color: var(--cs-text-soft);
}

/* ---------------- Sugerir cambio ---------------- */
.cinema-subpage--plan-detail .plan-suggest {
  background: var(--cs-cream);
  border-color: rgba(23, 50, 59, 0.08);
}
.cinema-subpage--plan-detail .plan-suggest__title {
  color: var(--cs-text);
}
.cinema-subpage--plan-detail .plan-suggest__text {
  color: var(--cs-text-soft);
}

/* ================================================================
   RESPONSIVE — móvil primero, sin overflow
================================================================ */
@media (max-width: 640px) {
  .plans-hero {
    padding-top: clamp(6.5rem, 24vw, 8rem);
  }
  .plans-hero__stats {
    flex-direction: column;
    align-items: center;
  }
  .plans-guides__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Mapa: el mapa es una herramienta, no una escena — en móvil el
     panel de filtros ya es largo (comportamiento intencional del
     sitio real: sidebar antes que el mapa), así que aquí recortamos
     el hero al máximo para que el mapa no quede enterrado. Las
     stats se ocultan porque repiten info que el panel de filtros
     de debajo ya muestra ("200 planes en el mapa", tipo, zona...). */
  .map-hero {
    padding-top: clamp(5rem, 20vw, 6rem);
    padding-bottom: 1.25rem;
  }
  .map-hero__title {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    margin-bottom: 0.6rem;
  }
  .map-hero__subtitle {
    font-size: 0.92rem;
  }
  .map-hero__stats {
    display: none;
  }
  .map-hero__actions {
    margin-top: 1.1rem;
  }

  /* Contacto: hero compacto para que el formulario aparezca pronto */
  .contact-hero {
    padding-top: clamp(5.5rem, 22vw, 7rem);
    padding-bottom: 1.5rem;
  }
  .contact-hero__title {
    font-size: clamp(1.6rem, 6.5vw, 2rem);
  }
  .contact-hero__stats {
    display: none;
  }

  /* Consejos: hero compacto para que las tarjetas aparezcan pronto */
  .tips-hero {
    padding-top: clamp(5.5rem, 22vw, 7rem);
    padding-bottom: 1.5rem;
  }
  .tips-hero__title {
    font-size: clamp(1.6rem, 6.5vw, 2rem);
  }
  .tips-hero__stats {
    display: none;
  }

  /* Ficha de plan: hero más bajo (es una foto de contexto, no la
     protagonista de la página como en home) y CTAs a ancho completo
     para que sean cómodos de tocar. */
  .cinema-subpage--plan-detail .plan-hero {
    height: auto;
    min-height: 0;
  }
  .cinema-subpage--plan-detail .plan-hero__actions {
    flex-direction: column;
  }
  .cinema-subpage--plan-detail .plan-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Galería en móvil: scroll horizontal nativo con snap en vez del
     grid 2x2 de styles.css. Solo cambia el layout — mismos <img>,
     mismos src/alt, mismo lightbox de js/main.js (que se engancha a
     .plan-gallery__img por click nativo, así que sigue funcionando
     igual: un tap abre la imagen, un swipe/scroll no dispara click
     porque el navegador ya distingue tap de arrastre de forma
     nativa). "proximity" en vez de "mandatory": con mandatory el
     scroll se sentía demasiado rígido/con tirón al terminar el
     gesto; proximity ajusta suave solo cuando ya casi encajaba. */
  .cinema-subpage--plan-detail .plan-gallery {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.75rem;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    scrollbar-width: none;
  }
  .cinema-subpage--plan-detail .plan-gallery::-webkit-scrollbar {
    display: none;
  }
  .cinema-subpage--plan-detail .plan-gallery__item,
  .cinema-subpage--plan-detail .plan-gallery__item--main {
    flex: 0 0 84%;
    height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    border-radius: 16px;
  }
}

/* ================================================================
   PRUEBA — Columna editorial sticky en la 2ª sección de contacto
   ("¿Has detectado un error...?"). Corrige el hueco vacío que deja
   la columna izquierda (más corta) frente al formulario derecho
   (más largo) dentro de .contact-layout, que usa align-items: start
   (css/styles.css). Limitado exclusivamente a .contact-intro--sticky,
   añadida solo a la columna izquierda de esa segunda sección en
   contacto-cinematica.html — no toca la primera sección ni
   contacto.html. Solo activo en desktop (min-width: 1025px),
   complementario al breakpoint de apilado a max-width: 1024px ya
   existente en css/styles.css. Mismo patrón top ya usado en
   .plan-detail__sidebar (css/styles.css). */
@media (min-width: 1025px) {
  .contact-intro--sticky {
    position: sticky;
    align-self: start;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

/* ================================================================
   CALLOUT RESERVA DE VERANO
   Componente de reserva estacional. Solo actúa donde existe la
   clase .plan-reservation-callout — no afecta a ninguna otra página.
================================================================ */
.plan-reservation-callout {
  background: var(--cs-ink);
  color: var(--cs-light);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}
.plan-reservation-callout__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-aqua);
  margin-bottom: 0.5rem;
}
.plan-reservation-callout__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cs-light);
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.plan-reservation-callout__text {
  font-size: 0.9rem;
  color: var(--cs-light-soft);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.plan-reservation-callout__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.4rem;
}
.plan-reservation-callout__list li {
  font-size: 0.875rem;
  color: var(--cs-light-soft);
  padding-left: 1.1rem;
  position: relative;
}
.plan-reservation-callout__list li::before {
  content: '·';
  position: absolute;
  left: 0.3rem;
  color: var(--cs-aqua);
  font-weight: 700;
}
.plan-reservation-callout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.plan-reservation-callout__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--cs-aqua);
  color: var(--cs-ink);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.plan-reservation-callout__btn-primary:hover {
  opacity: 0.85;
  color: var(--cs-ink);
}
.plan-reservation-callout__btn-secondary {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--cs-light-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-reservation-callout__btn-secondary:hover {
  color: var(--cs-light);
}
.plan-reservation-callout__disclaimer {
  font-size: 0.75rem;
  color: rgba(247, 244, 238, 0.45);
  border-top: 1px solid rgba(247, 244, 238, 0.12);
  padding-top: 0.75rem;
  margin-top: 0;
  line-height: 1.5;
}