/* ============================================================
   🚌 CALDAS TRANSIT — HOJA DE ESTILOS PRINCIPAL
   ============================================================ 
   Arquitectura CSS:
   - Basado en clases utilitarias de Tailwind CSS.
   - Aquí residen los estilos personalizados, animaciones Keyframes, 
     y las variables (Custom Properties) para el efecto Glassmorphism.
   - El diseño sigue la filosofía "Mobile-First" acoplada a un esquema oscuro (Dark Mode).
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* La página es exclusivamente dark. Esto le dice al navegador
   (Brave, Edge, Chrome con "Force Dark Mode" activo) que no
   aplique inversiones de color a imágenes ni a elementos —
   los logos y assets se muestran tal cual fueron diseñados. */
:root {
  color-scheme: dark;
  forced-color-adjust: none;
}

/* Garantía extra para imágenes: si el navegador intentase aplicar
   un filtro automático tipo "auto dark" a las imágenes (común en
   Brave Shields o flags de Chromium), las dejamos intactas. */
img,
picture,
svg,
video,
canvas {
  forced-color-adjust: none;
  color-scheme: dark;
}

html,
body {
  min-height: 100dvh;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  background-color: #050508;
  /* Deep black background for the page */
  color: #f1f3fc;
  /* ensure text is always readable over dark bg */
}

/* Enforce dark mode text since background is deep blue */
#theme-toggle {
  display: none !important;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.event-wheel-outer {
  position: relative;
  overflow: hidden;
  perspective: 600px;
  -webkit-perspective: 600px;
}

.event-wheel-outer::before,
.event-wheel-outer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}

.event-wheel-outer::before {
  top: 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent 0%, transparent 100%);
}

.event-wheel-outer::after {
  bottom: 0;
  height: 35%;
  background: linear-gradient(to top, transparent 0%, transparent 100%);
}

.event-wheel-scroller {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0 0.25rem;
}

.event-wheel-scroller::-webkit-scrollbar {
  display: none;
}

.event-wheel-item {
  scroll-snap-align: center;
  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
  transform-origin: center center;
  will-change: transform, opacity;
  padding: 3px 2px;
}

.event-wheel-card {
  border-radius: 0.7rem;
  overflow: hidden;
  position: relative;
  height: 100%;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.event-wheel-card:hover {
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

.event-wheel-center-line {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 5;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.7rem;
}

/* ============================================================
   EVENTOS — Calendar Strip
   ============================================================ */
.cal-strip-glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}


.cal-strip-days {
  display: flex;
  gap: 3px;
  padding: 4px 12px 14px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cal-strip-days::-webkit-scrollbar { display: none; }

.cal-strip-day {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 4px;
  border-radius: 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  border: 1px solid transparent;
}
.cal-strip-day:hover {
  background: rgba(255,255,255,0.04);
}
.cal-strip-day.is-selected {
  background: rgba(217,70,239,0.15);
  border-color: rgba(217,70,239,0.35);
  transform: scale(1.06);
}
.cal-strip-day.is-today:not(.is-selected) {
  background: rgba(217,70,239,0.15);
  border-color: rgba(217,70,239,0.35);
  transform: scale(1.06);
}

.cal-strip-day-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  line-height: 1;
}
.cal-strip-day.is-selected .cal-strip-day-name {
  color: rgba(217,70,239,0.75);
}
.cal-strip-day.is-today:not(.is-selected) .cal-strip-day-name {
  color: rgba(217,70,239,0.75);
}

.cal-strip-day-num {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  line-height: 1.15;
}
.cal-strip-day.is-selected .cal-strip-day-num {
  color: #f0abfc;
}
.cal-strip-day.is-today:not(.is-selected) .cal-strip-day-num {
  color: #f0abfc;
}

.cal-strip-day.has-event {
  position: relative;
}
.cal-strip-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d946ef, #a855f7);
  box-shadow: 0 0 8px rgba(217,70,239,0.5);
}
.cal-strip-day.is-selected.has-event::after {
  height: 4px;
  background: linear-gradient(90deg, #e879f9, #c084fc);
  box-shadow: 0 0 12px rgba(217,70,239,0.8);
  left: 6px;
  right: 6px;
}

/* ============================================================
   EVENTOS — Calendar Picker Overlay
   ============================================================ */
.cal-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cal-picker-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cal-picker-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, rgba(20,20,28,0.97) 0%, rgba(12,12,18,0.98) 100%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.cal-picker-overlay.is-open .cal-picker-card {
  transform: scale(1) translateY(0);
}

.cal-picker-weekday {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 4px 0;
}

.cal-picker-day {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  position: relative;
}
.cal-picker-day:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
}
.cal-picker-day.is-today {
  color: #fff;
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
}
.cal-picker-day.is-selected {
  background: rgba(217,70,239,0.2);
  border-color: rgba(217,70,239,0.4);
  color: #f0abfc;
  font-weight: 800;
}
.cal-picker-day.is-outside {
  color: rgba(255,255,255,0.15);
  cursor: default;
}
.cal-picker-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 25%;
  right: 25%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d946ef, #a855f7);
  box-shadow: 0 0 6px rgba(217,70,239,0.5);
}
.cal-picker-day.is-selected.has-event::after {
  height: 4px;
  left: 20%;
  right: 20%;
  background: linear-gradient(90deg, #e879f9, #c084fc);
  box-shadow: 0 0 10px rgba(217,70,239,0.7);
}

.cal-picker-event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cal-picker-event-item:hover {
  background: rgba(255,255,255,0.06);
}
.cal-picker-event-item:last-child {
  margin-bottom: 0;
}

.cal-picker-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-picker-event-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   EVENTOS — Category Filter Pills
   ============================================================ */
.event-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.01em;
}
.event-cat-pill:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.7);
}
.event-cat-pill.is-active {
  background: rgba(217,70,239,0.12);
  border-color: rgba(217,70,239,0.3);
  color: #f0abfc;
  box-shadow: 0 0 12px rgba(217,70,239,0.15);
}

.event-cat-pill .material-symbols-outlined {
  font-size: 14px !important;
}

/* ============================================================
   EVENTOS — Event Cards (Organic / Actividades-inspired)
   ============================================================ */
.ev-card {
  position: relative;
  isolation: isolate;
}

.ev-card-image {
  --ev-radius: clamp(1.2rem, 3vw, 1.5rem);
  position: relative;
  border-radius: var(--ev-radius);
  overflow: hidden;
  aspect-ratio: 5/4;
}

.ev-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ev-card:hover .ev-card-image img {
  transform: scale(1.04);
}

.ev-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(9,9,11,0.5) 75%, rgba(9,9,11,0.85) 100%);
  pointer-events: none;
}

.ev-card-badge-area {
  position: absolute;
  top: clamp(8px, 1.5vw, 12px);
  left: clamp(8px, 1.5vw, 12px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: calc(100% - 16px);
}

.ev-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  white-space: nowrap;
  width: fit-content;
}

.ev-card-pill .material-symbols-outlined {
  font-size: 12px !important;
}

.ev-card-pill-destacado {
  background: rgba(217,70,239,0.25);
  border-color: rgba(217,70,239,0.35);
  color: #f0abfc;
}

.ev-card-pill-cat {
  color: rgba(255,255,255,0.9);
}

.ev-card-rsvp-area {
  position: absolute;
  bottom: clamp(8px, 1.5vw, 12px);
  right: clamp(8px, 1.5vw, 12px);
  z-index: 10;
}

.ev-card-rsvp {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 9999px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.ev-rsvp-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  transition: all 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}

.ev-rsvp-btn:hover {
  color: white;
  background: rgba(255,255,255,0.06);
}

.ev-rsvp-btn.is-going {
  background: rgba(34,197,94,0.85);
  color: white;
  border: 1px solid rgba(34,197,94,0.8);
  box-shadow: 0 4px 16px rgba(34,197,94,0.3);
}

.ev-rsvp-btn .material-symbols-outlined {
  font-size: 13px !important;
}

.ev-card-body {
  padding: 14px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.ev-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: white;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ev-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ev-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}

.ev-card-meta-row .material-symbols-outlined {
  font-size: 15px !important;
  color: rgba(255,255,255,0.35);
}

.ev-card-attendees {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
}

/* ============================================================
   EVENTOS — Detail Overlay
   ============================================================ */
.ev-detail-panel {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  background: linear-gradient(180deg, rgba(14,14,20,0.98) 0%, rgba(10,10,14,0.99) 100%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.75rem 1.75rem 0 0;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overscroll-behavior: contain;
}

.news-detail-overlay.is-open .ev-detail-panel {
  transform: translateY(0);
}

.ev-detail-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.ev-detail-body {
  padding: 1.25rem 1.5rem 2rem;
}

.ev-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 5;
}
.ev-detail-close:hover {
  background: rgba(0,0,0,0.65);
}

.ev-detail-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ev-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  white-space: nowrap;
}

.ev-detail-pill .material-symbols-outlined {
  font-size: 12px !important;
}

.ev-detail-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: white;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.ev-detail-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1.25rem;
}

.ev-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ev-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}

.ev-detail-meta-row .material-symbols-outlined {
  font-size: 18px !important;
  color: rgba(255,255,255,0.35);
}

.ev-detail-meta-row strong {
  color: white;
  font-weight: 700;
}

.ev-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ev-detail-attendees {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ev-detail-attendees .material-symbols-outlined {
  font-size: 16px !important;
}

.ev-detail-rsvp-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
}
.ev-detail-rsvp-btn:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}
.ev-detail-rsvp-btn.is-going {
  background: rgba(34,197,94,0.85);
  border-color: rgba(34,197,94,0.8);
  color: white;
  box-shadow: 0 6px 20px rgba(34,197,94,0.3);
}
.ev-detail-rsvp-btn .material-symbols-outlined {
  font-size: 18px !important;
}

/* ============================================================
   EVENTOS — Card Expand Hint
   ============================================================ */
.ev-card-expand {
  position: absolute;
  bottom: clamp(8px, 1.5vw, 12px);
  left: clamp(8px, 1.5vw, 12px);
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s ease;
  pointer-events: none;
}
.ev-card:hover .ev-card-expand {
  color: white;
  background: rgba(217,70,239,0.35);
  border-color: rgba(217,70,239,0.4);
}
.ev-card-expand .material-symbols-outlined {
  font-size: 16px !important;
  transition: transform 0.2s ease;
}
.ev-card:hover .ev-card-expand .material-symbols-outlined {
  transform: scale(1.15);
}

/* ============================================================
   EVENTOS — Photo Upload (Create Modal)
   ============================================================ */
.ce-photo-upload {
  width: 100%;
  min-height: 120px;
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.ce-photo-upload:hover {
  border-color: rgba(217,70,239,0.35);
  background: rgba(217,70,239,0.04);
}
.ce-photo-upload.has-photo {
  border-style: solid;
  border-color: rgba(217,70,239,0.3);
  min-height: 180px;
}
.ce-photo-preview {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  border-radius: calc(1rem - 2px);
}
.ce-photo-upload.has-photo .ce-photo-placeholder {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 1rem;
  gap: 4px;
}
.ce-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   CARTELES DE FIESTAS
   ============================================================ */
.cartel-card {
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.cartel-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  border-color: rgba(251,191,36,0.3);
}
.cartel-card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(234,88,12,0.08));
}
.cartel-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.cartel-card:hover .cartel-card-poster img {
  transform: scale(1.06);
}
.cartel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
  pointer-events: none;
}
.cartel-card-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fbbf24;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(251,191,36,0.25);
}
.cartel-card-info {
  padding: 0.75rem 0.875rem;
}
.cartel-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartel-card-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.125rem;
}
.cartel-tab {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cartel-tab:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.cartel-tab.active {
  background: rgba(251,191,36,0.15);
  border-color: rgba(251,191,36,0.4);
  color: #fbbf24;
}
.cartel-card.cine .cartel-card-poster {
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(147,51,234,0.1));
}
.cartel-card.cine .cartel-card-badge {
  color: #60a5fa;
  border-color: rgba(96,165,250,0.3);
}
.cine-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cine-rating {
  font-size: 0.75rem;
  color: #fbbf24;
  font-weight: 700;
}
.cine-precio {
  font-size: 0.75rem;
  color: #4ade80;
  font-weight: 700;
}
.cine-hoy-horarios {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 0.375rem;
}
.cine-hoy-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cine-hoy-horas {
  font-size: 0.6875rem;
  color: #4ade80;
  font-weight: 600;
}
.cine-horarios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.cine-horario-dia {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid;
  border-radius: 0.5rem;
  min-width: 3.5rem;
}
.cine-horario-dia-nom {
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.cine-horario-dia-hora {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}
.home-cartel-tab {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255,255,255,0.55);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-height: 26px;
}
.home-cartel-tab:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.home-cartel-tab.active {
  background: linear-gradient(135deg, rgba(232,121,249,0.22), rgba(192,38,211,0.18));
  border-color: rgba(232,121,249,0.45);
  color: #f5d0fe;
  box-shadow: 0 1px 8px rgba(232,121,249,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cartel-carousel-slide {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cartel-carousel-slide.is-active {
  transform: scale(1);
  opacity: 1;
}
.page-transition-out {
  animation: pageFadeOut 0.25s ease forwards;
}
@keyframes pageFadeOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(-8px); }
}
body {
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.page-loaded {
  opacity: 1;
}
.cartel-detail-panel {
  max-width: 420px;
}
.cartel-detail-poster {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}
.cartel-detail-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   CARTEL CAROUSEL (Home Widget)
   ============================================================ */
.cartel-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
}
.cartel-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: scale(0.97);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cartel-carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}
.cartel-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0.875rem;
}
.cartel-carousel-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 1rem 1rem;
}
.cartel-carousel-slide-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  z-index: 3;
}
.cartel-carousel-slide-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartel-carousel-slide-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cartel-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15,15,20,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(232,121,249,0.3);
  color: rgba(245,208,254,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.cartel-carousel-nav:hover {
  background: rgba(15,15,20,0.8);
  color: #f5d0fe;
  border-color: rgba(232,121,249,0.6);
}
.cartel-carousel-nav-left {
  left: 0.375rem;
}
.cartel-carousel-nav-right {
  right: 0.375rem;
}
.cartel-carousel:hover .cartel-carousel-nav,
.cartel-carousel-nav:focus {
  opacity: 1;
}
.cartel-carousel-dots {
  position: absolute;
  bottom: 0.375rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
.cartel-carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cartel-carousel-dot.is-active {
  background: #e879f9;
  box-shadow: 0 0 6px rgba(232,121,249,0.6);
  width: 12px;
  border-radius: 3px;
}

/* ============================================================
   CARTELES — PÁGINAS (grid 2x2 paginado del widget del home)
   ============================================================ */
.cartel-carousel {
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.cartel-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
}
.cartel-carousel-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: 0;
}
.cartel-page-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
}
.cartel-page-cell {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  cursor: pointer;
  transition: transform 0.2s ease;
}
.cartel-page-cell:hover {
  transform: scale(1.03);
}
.cartel-page-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.cartel-page-cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.cartel-page-cell-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 0.5rem;
  z-index: 2;
  pointer-events: none;
}
.cartel-page-cell-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartel-page-cell-meta {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ============================================================
   ACTIVIDADES CAROUSEL DOTS (Home Widget)
   ============================================================ */
.home-act-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.home-act-dot--active {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.5);
  width: 14px;
  border-radius: 3px;
}

/* ============================================================
   TRANSICIONES DE PÁGINA (Navegación Fluida SPA-like)
   ============================================================ 
   Proporciona una entrada y salida suave al navegar entre archivos HTML,
   simulando el comportamiento de una Single Page Application (SPA).
   ============================================================ */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageFadeIn 0.35s ease;
}

@keyframes pageFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

body.navigating {
  animation: pageFadeOut 0.22s ease both;
  pointer-events: none;
}

/* ============================================================
   FONDO ANIMADO DE LA APLICACIÓN (Premium Glass Style)
   ============================================================ 
   El contenedor .animated-bg controla el panel estático de fondo.
   En lugar de usar un costoso parallax móvil, utiliza una imagen 
   fija con un nivel de zoom imperceptible (subtleZoom) para dar "vida",
   recubierto por un filtro CSS de ruido y un oscurecimiento (backdrop-blur)
   que contrasta con las tarjetas de la interfaz superior.
   ============================================================ */
.animated-bg {
  position: absolute;
  /* Fixed at the top of the document */
  top: 0;
  left: 0;
  width: 100%;
  height: 1150px;
  /* Extended to cover more of the bento grid section */
  z-index: 0;
  background-size: cover;
  background-position: top center;
  /* Applying a fixed scale so background-position has room to pan */
  transform: scale(1.15);
  transform-origin: top center;
  /* Cinematic slow pan, slightly faster to be perceptible but still very slow */
  animation: backgroundPan 100s ease-in-out infinite alternate;
  /* Fading out the bottom of the image into the black background */
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Dark overlay to provide contrast for frosted glass UI */
.animated-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1;
}

@keyframes backgroundPan {
  0% {
    background-position: left 20%;
  }

  100% {
    background-position: right 20%;
  }
}

/* Noise texture overlay */
.animated-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Performance tuning for home background on lower-end devices */
.app-page .animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 115dvh;
  background-size: cover;
  background-position: top center;
  transform: translate3d(0, var(--bg-parallax, 0px), 0) scale(1.06);
  animation: backgroundPan 52s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  contain: paint;
  will-change: transform;
  backface-visibility: hidden;
}

.app-page.is-scrolling .animated-bg {
  animation-play-state: paused;
}

/* Hide scrollbar while keeping scroll functional */
html:has(body.app-page),
body.app-page {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html:has(body.app-page)::-webkit-scrollbar,
body.app-page::-webkit-scrollbar {
  display: none;
}

.app-page .animated-bg::before {
  background:
    linear-gradient(to bottom, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.82) 100%),
    rgba(10, 10, 12, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Bg-smooth (gradient5 por defecto): deja ver el degradado neón completo, sin oscurecer */
.app-page .animated-bg.bg-smooth::before {
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.25) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Bg-smooth (gradient5 por defecto): imagen estirada al 100%, blur fuerte
   para look liso azul→negro. Solo se aplica al fondo por defecto;
   los demás fondos (al ciclar con la píldora) recuperan el estilo original. */
.app-page .animated-bg.bg-smooth {
  transform: scale(1.25) !important;
  animation: none !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(40px) saturate(1.25) contrast(1.05);
  image-rendering: auto;
  mask-image: linear-gradient(to bottom, black 0%, black 80%, rgba(0,0,0,0.7) 92%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, rgba(0,0,0,0.7) 92%, transparent 100%) !important;
}

/* Index2: refuerza el efecto cristal de los widgets/tarjetas sobre el fondo neón */
.page-index2 #home-bento-grid > [class*="bento-cat-"],
.page-index2 #home-bento-grid > div > [class*="bento-cat-"],
.page-index2 .glass-card-premium,
.page-index2 .cal-strip-glass {
  backdrop-filter: blur(40px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
}
@media (max-width: 680px) {
  .app-page .animated-bg.bg-smooth {
    transform: scale(1.25) !important;
    animation: none !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: blur(40px) saturate(1.25) contrast(1.05) !important;
    mask-image: linear-gradient(to bottom, black 0%, black 80%, rgba(0,0,0,0.7) 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, rgba(0,0,0,0.7) 92%, transparent 100%) !important;
  }
}

.app-page .animated-bg::after {
  display: none;
}

@media (max-width: 680px) {
  .app-page .animated-bg {
    transform: translate3d(0, var(--bg-parallax, 0px), 0) scale(1.03);
    animation: backgroundPan 72s ease-in-out infinite alternate;
    background-position: center top;
  }
}

/* Pulse dot animation (used in hints etc.) */
@keyframes pulseScale {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

.animate-pulse-scale {
  animation: pulseScale 2s ease-in-out infinite;
}

.pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}

/* ============================================================
   VARIABLES GLOBALES (:root / Modo Oscuro Automático)
   ============================================================ 
   Definición de las paletas y tokens visuales para los materiales traslúcidos.
   Al tener incrustada la clase .dark en <html>, se activan los colores oscuros por defecto.
   Las variables CSS almacenan los gradientes y el "frosting" (esmerilado).
   ============================================================ */
:root {
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.05);

  --glass-premium: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  --glass-premium-header: rgba(255, 255, 255, 0.85);

  --bubble-ring-bg: rgba(0, 0, 0, 0.03);
  --bubble-ring-border: rgba(0, 0, 0, 0.1);
  --bubble-ring-text: rgba(0, 0, 0, 0.5);

  --card-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  --text-primary: #0f172a;
  --text-muted: rgba(0, 0, 0, 0.5);
  --pill-bg: rgba(0, 0, 0, 0.04);
}

.dark {
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.5);

  --glass-premium: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  --glass-premium-header: transparent;

  --bubble-ring-bg: rgba(255, 255, 255, 0.05);
  --bubble-ring-border: rgba(255, 255, 255, 0.16);
  --bubble-ring-text: rgba(255, 255, 255, 0.4);

  --card-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --text-primary: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.45);
  --pill-bg: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   BENTO CATEGORY GRADIENTS (Bottom Glow)
   ============================================================ */
[class*="bento-cat-"]::after,
[class*="bento-cat-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

[class*="bento-cat-"] {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.15);
}

[class*="bento-cat-"]::after,
[class*="bento-cat-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* Below the text/badges with z-index: 10 */
}

[class*="bento-cat-"] > :first-child:not(.content-slide):not(.bento-img):not(img):not(.absolute) {
  position: relative;
}

[class*="bento-cat-"]::after,
[class*="bento-cat-"]::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.5) 30%, transparent 65%);
}

/* Local / Mapa */
.bento-cat-local::after { background: linear-gradient(to top, rgba(0, 227, 253, 0.12) 0%, transparent 35%); }
.bento-cat-local::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, transparent 55%); }

/* Buses */
.bento-cat-buses::after { background: linear-gradient(to top, rgba(244, 63, 94, 0.15) 0%, transparent 40%); }
.bento-cat-buses::before { display: none; }

.bento-cat-noticias::after { background: linear-gradient(to top, rgba(251, 146, 60, 0.10) 0%, transparent 40%); }
.bento-cat-noticias::before { background: linear-gradient(to bottom, rgba(251, 146, 60, 0.07) 0%, transparent 25%); }

/* Cultura */
.bento-cat-cultura::after { background: linear-gradient(to top, rgba(168, 85, 247, 0.10) 0%, transparent 35%); }
.bento-cat-cultura::before { background: linear-gradient(to bottom, rgba(168, 85, 247, 0.18) 0%, transparent 30%); }

.bento-cat-deportes::after { background: linear-gradient(to top, rgba(34, 197, 94, 0.10) 0%, transparent 35%); }
.bento-cat-deportes::before { background: linear-gradient(to bottom, rgba(34, 197, 94, 0.18) 0%, transparent 30%); }

.bento-cat-turismo::after { background: linear-gradient(to top, rgba(250, 204, 21, 0.06) 0%, transparent 25%); }
.bento-cat-turismo::before { background: linear-gradient(to bottom, rgba(250, 204, 21, 0.10) 0%, transparent 20%); }

.bento-cat-gobierno::after { background: linear-gradient(to top, rgba(59, 130, 246, 0.10) 0%, transparent 35%); }
.bento-cat-gobierno::before { background: linear-gradient(to bottom, rgba(59, 130, 246, 0.18) 0%, transparent 30%); }

.bento-cat-agenda::after { background: linear-gradient(to top, rgba(236, 72, 153, 0.10) 0%, transparent 35%); }
.bento-cat-agenda::before { background: linear-gradient(to bottom, rgba(236, 72, 153, 0.18) 0%, transparent 30%); }

.bento-cat-salud::after { background: linear-gradient(to top, rgba(52, 211, 153, 0.20) 0%, transparent 35%); }

/* ============================================================
   BENTO FADE TO BLACK — gradient overlay after row 2
   ============================================================ */
.bento-fade-to-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.25) 52%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.8) 70%,
    rgba(0, 0, 0, 0.94) 82%,
    #000 100%
  );
}
.bento-cat-salud::before { background: linear-gradient(to bottom, rgba(52, 211, 153, 0.10) 0%, transparent 30%); }

/* Restaurantes: flechas para cambiar el lote completo.
   Sólo PC. En móvil se muestra el pill «Desliza» (pista discreta) y
   el cambio de lote queda al cargo del auto-rotado. */
.rest-nav-btn {
  display: none;
  position: absolute;
  z-index: 30;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0.5rem;
  border: 1px solid rgba(250, 204, 21, 0.25);
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.15) 0%, rgba(250, 204, 21, 0.05) 100%);
  color: rgba(250, 204, 21, 0.8);
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.rest-nav-btn:hover {
  opacity: 1;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.3) 0%, rgba(250, 204, 21, 0.1) 100%);
  border-color: rgba(250, 204, 21, 0.4);
  color: rgba(250, 204, 21, 1);
}
@media (min-width: 1024px) {
  .rest-nav-btn {
    display: flex;
    top: 56px;
    bottom: 40px;
    width: 28px;
  }
  .rest-nav-prev { left: 10px; }
  .rest-nav-next { right: 10px; }
  .rest-nav-btn .rest-nav-icon { font-size: 28px; }
}

/* Pista «Desliza» dentro de cada tarjeta de restaurante — aparece al
   pintar la tarjeta y se desvanece sola tras unos segundos. No bloquea
   los pointer events (pointer-events:none) para que el swipe pase a través. */
.rest-card-hint {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  animation: rest-card-hint 4s ease forwards;
  animation-delay: var(--rest-card-hint-delay, 0.2s);
}
.rest-card-hint .material-symbols-outlined {
  font-size: 11px !important;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  font-variation-settings: 'FILL' 1;
}
@keyframes rest-card-hint {
  0%   { opacity: 0; transform: translateY(-3px); }
  18%  { opacity: 0.95; transform: translateY(0); }
  72%  { opacity: 0.95; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-3px); visibility: hidden; }
}

/* Mini-pager móvil: pastilla discreta en la cabecera del widget para
   saltar entre lotes de 8 restaurantes. Sólo móvil (<768px). */
.rest-mini-pager {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(250, 204, 21, 0.9);
}
.rest-mini-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.rest-mini-pager-btn:hover,
.rest-mini-pager-btn:active {
  background: rgba(250, 204, 21, 0.18);
}
.rest-mini-pager-btn .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1;
  font-variation-settings: 'FILL' 1;
}
.rest-mini-pager-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  user-select: none;
}
.rest-mini-pager-sep {
  color: rgba(255, 255, 255, 0.35);
  margin: 0 1px;
}
@media (min-width: 768px) {
  .rest-mini-pager { display: none !important; }
}

/* Restaurantes: tarjeta individual con swipe entre platos */
.rest-card { isolation: isolate; user-select: none; -webkit-user-drag: none; }
.rest-card img { -webkit-user-drag: none; }
.rest-card-slide { will-change: transform; }

/* Especial: Logo Restaurantes */
.restaurant-logo {
  filter: brightness(0) invert(1);
}

/* ============================================================
   GLASS COMPONENTS
   ============================================================ */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 0.5px solid var(--glass-border);
}

.glass-card-premium {
  background: var(--glass-premium);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 40px -10px var(--glass-shadow), inset 0 1px 1px var(--glass-border);
}

/* ============================================================
   SEARCH BAR — Unified across all pages
   ============================================================ */
.search-bar {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  padding: 0.875rem 1.25rem;
  gap: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3);
}
.search-bar input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 0.9375rem;
  font-weight: 500;
  flex: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-width: 0;
}
.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   GLASS HEADER — Index variant: gradient only, no solid bg
   ============================================================ */
.glass-header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

/* Floating pill (time / hour) */
.floating-pill {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Delayed alert button — hidden initially, slides in */
.delayed-alert-btn {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.delayed-alert-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: alertGlow 2.5s ease-in-out infinite;
}

@keyframes alertGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.25);
  }

  50% {
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.55), 0 0 35px rgba(244, 63, 94, 0.2);
  }
}

/* Quick access section scrim */
.quick-access-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   AYTO ALERT MODAL
   ============================================================ */
.ayto-alert-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.35s ease;
}

.ayto-alert-modal.open {
  background: rgba(0, 0, 0, 0.65);
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ayto-alert-card {
  width: 100%;
  max-width: 420px;
  background: #0e0b0b;
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: 1.5rem;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1), opacity 0.4s ease;
  box-shadow: 0 -8px 60px rgba(244, 63, 94, 0.2);
}

.ayto-alert-modal.open .ayto-alert-card {
  transform: translateY(0);
  opacity: 1;
}



/* ============================================================
   OPERATOR BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-monbus {
  background: rgba(230, 57, 70, 0.18);
  color: #ff7a82;
  border: 1px solid rgba(230, 57, 70, 0.35);
}

.badge-abalo {
  background: rgba(69, 123, 157, 0.18);
  color: #7ab8d8;
  border: 1px solid rgba(69, 123, 157, 0.35);
}

.badge-xunta {
  background: rgba(45, 106, 79, 0.18);
  color: #52c98a;
  border: 1px solid rgba(45, 106, 79, 0.35);
}

/* ============================================================
   FILTER PILLS
   ============================================================ */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--pill-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
}

.filter-pill:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

.filter-pill.active {
  background: rgba(0, 227, 253, 0.14);
  border: none;
  color: #00e3fd;
}

.filter-pill.active-monbus {
  background: rgba(230, 57, 70, 0.14);
  border-color: rgba(230, 57, 70, 0.45);
  color: #ff7a82;
}

.filter-pill.active-abalo {
  background: rgba(69, 123, 157, 0.14);
  border-color: rgba(69, 123, 157, 0.45);
  color: #7ab8d8;
}

.filter-pill.active-xunta {
  background: rgba(45, 106, 79, 0.14);
  border-color: rgba(45, 106, 79, 0.45);
  color: #52c98a;
}

/* ============================================================
   LINE CARDS (index)
   ============================================================ */
.line-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.line-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1.5rem 1.5rem 0 0;
}

.line-card.op-monbus::before {
  background: linear-gradient(90deg, #E63946 0%, transparent 70%);
}

.line-card.op-abalo::before {
  background: linear-gradient(90deg, #457B9D 0%, transparent 70%);
}

.line-card.op-xunta::before {
  background: linear-gradient(90deg, #2D6A4F 0%, transparent 70%);
}

.line-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--glass-border);
}

.line-card:active {
  transform: translateY(0);
}

.line-card.hidden {
  display: none;
}

/* Line card route arrow row */
.lc-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.lc-route-city {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.lc-route-line {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lc-route-dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--text-muted), transparent);
}

.lc-route-icon {
  color: var(--text-muted);
  font-size: 16px !important;
}

/* Line card meta row */
.lc-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lc-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.lc-meta-item .material-symbols-outlined {
  font-size: 14px !important;
}

/* No results */
.no-results-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 2rem 0;
}

/* ============================================================
   ROUTE TIMELINE (HORIZONTAL)
   ============================================================ */
.route-dot-outer {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  flex-shrink: 0;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}

.route-stop-row.is-terminal .route-dot-outer {
  width: 17px;
  height: 17px;
  border-color: var(--text-muted);
}

.route-stop-row.is-origin .route-dot-outer {
  border-color: #00e3fd;
  background: #00e3fd;
  box-shadow: 0 0 14px rgba(0, 227, 253, 0.7);
  transform: scale(1.25);
}

.route-stop-row.is-destination .route-dot-outer {
  border-color: #ff8f75;
  background: #ff8f75;
  box-shadow: 0 0 14px rgba(255, 143, 117, 0.7);
  transform: scale(1.25);
}

.route-stop-row.in-range .route-dot-outer {
  border-color: #00e3fd;
  background: var(--glass-bg);
}

.route-stop-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.route-stop-row.is-terminal .route-stop-name {
  font-weight: 700;
}

.route-stop-row.is-origin .route-stop-name {
  color: #00e3fd;
  font-weight: 700;
}

.route-stop-row.is-destination .route-stop-name {
  color: #ff8f75;
  font-weight: 700;
}

.route-stop-row.in-range .route-stop-name {
  color: var(--text-primary);
}

.route-stop-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  flex-shrink: 0;
  color: var(--text-muted);
  visibility: hidden;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.2s ease;
}

.route-stop-row.is-origin .route-stop-tag {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  background: rgba(0, 227, 253, 0.15);
  color: #00e3fd;
  border: 1px solid rgba(0, 227, 253, 0.3);
}

.route-stop-row.is-destination .route-stop-tag {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  background: rgba(255, 143, 117, 0.15);
  color: #ff8f75;
  border: 1px solid rgba(255, 143, 117, 0.3);
}

/* ============================================================
   SELECTION PANEL (detalle, fixed above nav)
   ============================================================ */
.selection-panel {
  position: fixed;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 40;
  width: calc(100% - 2rem);
  max-width: 480px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
}

.selection-panel.hidden {
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
}

.selection-pill {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.selection-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.selection-pill-text {
  font-size: 0.82rem;
  color: var(--text-primary);
  flex: 1;
}

.selection-pill-reset {
  background: var(--pill-bg);
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.selection-pill-reset:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

/* Segment info card (phase 2) */
.segment-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.segment-route-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.segment-stop-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-primary);
  flex: 1;
}

.segment-stop-name.origin {
  color: #00e3fd;
}

.segment-stop-name.dest {
  color: #ff8f75;
}

.segment-arrow {
  color: var(--text-muted);
  font-size: 18px !important;
}

.segment-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--glass-border);
}

.segment-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.segment-meta-item strong {
  color: var(--text-primary);
  font-size: 13px;
}

.segment-meta-item .material-symbols-outlined {
  font-size: 14px !important;
}

/* ============================================================
   PULSE DOT (map card)
   ============================================================ */
@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

.pulse-dot {
  animation: pulseDot 1.6s ease-in-out infinite;
}

/* ============================================================
   INDEX body min-height
   ============================================================ */
.index-body {
  min-height: max(884px, 100dvh);
}

/* ============================================================
   SECTION LABELS
   ============================================================ */
.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ============================================================
   DESTINATION BUBBLES
   ============================================================ */
.dest-bubble {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  outline: none;
  position: relative;
}

.dest-bubble-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text-muted);
}

.dest-bubble-ring .dest-initial {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1;
}

.dest-bubble-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin-top: 5px;
  opacity: 0.6;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 0.2s ease;
}

.dest-bubble:hover .dest-bubble-ring {
  transform: scale(1.08);
}

.dest-bubble:active .dest-bubble-ring {
  transform: scale(0.88);
}

.dest-bubble.is-active .dest-bubble-ring {
  border-color: #00e3fd;
  background: rgba(0, 227, 253, 0.12);
  box-shadow: 0 0 22px rgba(0, 227, 253, 0.45);
  color: #00e3fd;
  transform: scale(1.12);
}

.dest-bubble.is-active .dest-bubble-ring .dest-initial {
  color: #00e3fd;
}

.dest-bubble.is-active .dest-bubble-label {
  color: #00e3fd;
  font-weight: 700;
  opacity: 1;
}

.dest-bubble.dest-hidden {
  display: none;
}

/* ============================================================
   BOARDING CARDS
   ============================================================ */
.boarding-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.boarding-card:hover {
  border-color: var(--glass-border);
  box-shadow: var(--card-hover-shadow);
}

.boarding-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.boarding-card.op-monbus::before {
  background: linear-gradient(180deg, #E63946, transparent);
}

.boarding-card.op-abalo::before {
  background: linear-gradient(180deg, #457B9D, transparent);
}

.boarding-card.op-xunta::before {
  background: linear-gradient(180deg, #2D6A4F, transparent);
}

.boarding-card-header {
  padding: 1rem 1.25rem 0.8rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.boarding-card-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-primary);
  margin: 4px 0 2px 0;
  letter-spacing: -0.01em;
}

.boarding-card-address {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}

.boarding-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pill-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.boarding-lines-list {
  border-top: 1px solid var(--glass-border);
}

.boarding-line-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 1.25rem 0.8rem 1.4rem;
  cursor: pointer;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.14s ease;
}

.boarding-line-item:last-child {
  border-bottom: none;
}

.boarding-line-item:hover {
  background: var(--glass-bg);
}

.boarding-line-item:active {
  background: var(--glass-bg);
}

.boarding-line-route {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.boarding-line-from {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.boarding-line-to {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.8;
}

.boarding-line-to.is-dest {
  color: #00e3fd;
  opacity: 1;
}

.boarding-line-meta {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.boarding-line-chevron {
  color: rgba(0, 227, 253, 0.6);
  font-size: 16px !important;
  flex-shrink: 0;
}

/* ============================================================
   MOVING BUS ANIMATION ON VERTICAL TIMELINE
   ============================================================ */
.moving-bus-marker {
  position: absolute;
  left: 12px;
  /* Center with .vt-track which is 24px wide */
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  background: var(--text-primary);
  color: #050510;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 227, 253, 0.8);
  border: 1px solid rgba(0, 227, 253, 0.5);
  display: none;
  /* Hidden by default until selected via JS */
}

/* ============================================================
   BENTO GRID v2 — IMAGE CROSSFADE
   ============================================================ */
.bento-img {
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.bento-img.active {
  opacity: 1;
}

/* ============================================================
   BENTO GRID — SWIPE INDICATOR ON NEWS CARDS
   ============================================================ */
.bento-swipe-hint {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bento-swipe-hint span {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bento-swipe-hint .material-symbols-outlined {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4);
}

[class*="bento-cat-"]:hover .bento-swipe-hint {
  opacity: 1;
}

/* ============================================================
   WIDGET: MAPA 3D
   ============================================================ */
.widget-mapa {
  background: #040a0d;
  border: none;
  position: relative;
  height: 100%;
}

.mapa-finger-hint {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, 0.55);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
  animation: mapaFinger 6s ease-in-out infinite;
  pointer-events: none;
}

.mapa-finger-mobile { display: block; }
.mapa-finger-desktop { display: none; }

@media (min-width: 1024px) {
  .mapa-finger-mobile { display: none; }
  .mapa-finger-desktop { display: block; }
  .mapa-finger-hint { animation-name: mapaMouse; }
}

@keyframes mapaFinger {
  0%, 15% { opacity: 0; transform: translate(0, 0) rotate(-20deg); }
  20% { opacity: 0.8; transform: translate(0, 0) rotate(-20deg); }
  35% { opacity: 0.8; transform: translate(50px, 15px) rotate(5deg); }
  42% { opacity: 0; transform: translate(60px, 20px) rotate(10deg); }
  100% { opacity: 0; transform: translate(60px, 20px) rotate(10deg); }
}

@keyframes mapaMouse {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%); }
  18% { opacity: 0.85; transform: translate(-50%, -50%); }
  40% { opacity: 0.85; transform: translate(40px, 20px); }
  48% { opacity: 0; transform: translate(55px, 25px); }
  100% { opacity: 0; transform: translate(55px, 25px); }
}

.mapa-cta-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 227, 253, 0.13);
  border: 1px solid rgba(0, 227, 253, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e3fd;
  animation: ctaPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ctaPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 227, 253, 0.45);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(0, 227, 253, 0);
  }
}

.mapa-ripple-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(0, 227, 253, 0.35);
  transform: translate(-50%, -50%) scale(0.3);
  animation: mapaRipple 5s ease-out infinite;
  pointer-events: none;
}

@keyframes mapaRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* ============================================================
   WIDGET: BUSES
   ============================================================ */
.widget-buses {
  background: none;
  border: none;
  position: relative;
  height: 100%;
}

.buses-live-bus {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.buses-live-bus.departing {
  animation: busDepart 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes busDepart {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(40px); opacity: 0; }
  55% { transform: translateX(-40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.bus-slot {
  background: rgba(255, 255, 255, 0.035);
  border: none;
  border-radius: 0.9rem;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
}

.bus-slot.hidden { display: none; }

/* Mobile/tablet: ocultar slots 5+ (en lg, lg:flex restaura los 6).
   Esto refuerza el "hidden lg:flex" del JS por si alguna otra regla
   de bus-slot gana en el cascade. */
@media (max-width: 1023.98px) {
  .bus-grid-inner > .bus-slot:nth-child(n+5) { display: none !important; }
}

.bus-slot-logo {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 50px;
  height: 50px;
  opacity: 0.09;
  pointer-events: none;
  object-fit: contain;
}

.bus-slot.bus-op-monbus .bus-slot-logo { filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(2000%) hue-rotate(220deg); }
.bus-slot.bus-op-abalo .bus-slot-logo { filter: brightness(0) saturate(100%) invert(55%) sepia(90%) saturate(1500%) hue-rotate(195deg); }
.bus-slot.bus-op-xunta .bus-slot-logo { filter: brightness(0) saturate(100%) invert(65%) sepia(60%) saturate(1300%) hue-rotate(160deg); }

.bus-slot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.5px;
  border-radius: 9999px;
}

.bus-slot.bus-op-monbus::before {
  background: #3B5BDB;
}

.bus-slot.bus-op-abalo::before {
  background: #2196F3;
}

.bus-slot.bus-op-xunta::before {
  background: #00BFA5;
}

.bus-slot-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bus-op-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bus-dot-monbus {
  background: #3B5BDB;
  box-shadow: 0 0 4px rgba(59, 91, 219, 0.7);
}

.bus-dot-abalo {
  background: #2196F3;
  box-shadow: 0 0 4px rgba(33, 150, 243, 0.7);
}

.bus-dot-xunta {
  background: #00BFA5;
  box-shadow: 0 0 4px rgba(0, 191, 165, 0.7);
}

.bus-slot-time {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.bus-slot-time.soon {
  color: #FACC15;
}

.bus-slot-time.warning {
  color: #ff6b6b;
}

.bus-slot-time.urgent {
  color: #ff6b6b;
  animation: urgentBlink 1s ease-in-out infinite;
}

@keyframes urgentBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.bus-slot-dest {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bus-slot-stop {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   WIDGET: NOTICIAS
   ============================================================ */
.widget-news {
  background: #030305;
  border: none;
  position: relative;
  height: 100%;
}

.news-widget-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  backdrop-filter: blur(8px);
}

.news-widget-badge.news-badge-local {
  background: rgba(0, 227, 253, 0.2);
  color: #00e3fd;
  border: none;
}

.news-widget-badge.news-badge-cultura {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border: none;
}

.news-widget-badge.news-badge-deportes {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: none;
}

.news-widget-badge.news-badge-turismo {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
  border: none;
}

.news-widget-badge.news-badge-gobierno {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: none;
}

.news-widget-badge.news-badge-agenda {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
  border: none;
}

.news-widget-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: white;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-widget-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 5px;
}

/* ============================================================
   WIDGET: FARMACIA
   ============================================================ */
.widget-pharma {
  background: #04090a;
  border: none;
  position: relative;
  height: 100%;
}

.pharma-widget-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: none;
  backdrop-filter: blur(8px);
}

.pharma-widget-status {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
}

.pharma-widget-status.open {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pharma-widget-status.closed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pharma-widget-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: white;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pharma-widget-hours {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: rgba(52, 211, 153, 0.55);
  margin-top: 4px;
}

/* ============================================================
   NOTICIAS — Category badges
   ============================================================ */
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.cat-badge.cat-local {
  background: rgba(0, 227, 253, 0.15);
  color: #00e3fd;
  border: none;
}

.cat-badge.cat-cultura {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: none;
}

.cat-badge.cat-deportes {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: none;
}

.cat-badge.cat-turismo {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: none;
}

.cat-badge.cat-gobierno {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: none;
}

.cat-badge.cat-agenda {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border: none;
}

/* ============================================================
   NOTICIAS — Filter pills
   ============================================================ */
.news-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--pill-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
}

.news-filter-pill:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

.news-filter-pill.active {
  background: rgba(0, 227, 253, 0.14);
  border: none;
  color: #00e3fd;
}

/* ============================================================
   NOTICIAS — Hero card
   ============================================================ */
.news-hero-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 260px;
  border: 1px solid var(--glass-border);
}

.news-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover-shadow);
}

.news-hero-card .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-hero-card:hover .hero-img {
  transform: scale(1.04);
}

.news-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.news-hero-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.news-hero-excerpt {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.65rem;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   NOTICIAS — List cards
   ============================================================ */
.news-list-card {
  background: var(--glass-premium);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
}

.news-list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}

.news-list-card .news-card-thumb {
  width: 110px;
  min-height: 110px;
  object-fit: cover;
  flex-shrink: 0;
}

.news-list-card .news-card-body {
  flex: 1;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.news-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  color: var(--text-muted);
}

.news-card-meta .material-symbols-outlined {
  font-size: 11px !important;
}

/* ============================================================
   NOTICIAS — Detail overlay
   ============================================================ */
.news-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.news-detail-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.news-detail-panel {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: var(--glass-premium-header);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-top: 1px solid var(--glass-border);
  border-radius: 2rem 2rem 0 0;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.news-detail-overlay.is-open .news-detail-panel {
  transform: translateY(0);
}

.news-detail-panel .detail-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-detail-panel .detail-body {
  padding: 1.5rem;
}

.news-detail-panel .detail-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.news-detail-panel .detail-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-detail-panel .detail-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-primary);
  opacity: 0.85;
}

.news-detail-panel .detail-text p {
  margin-bottom: 1rem;
}

/* ============================================
   NEWS DETAIL — Flipboard navigation
   ============================================ */
.news-detail-panel { position: relative; perspective: 1500px; }

.news-detail-flip {
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.news-detail-flip.news-flip-out-up {
  animation: news-flip-out-up 0.28s ease-in forwards;
}
.news-detail-flip.news-flip-out-down {
  animation: news-flip-out-down 0.28s ease-in forwards;
}
.news-detail-flip.news-flip-in-up {
  animation: news-flip-in-up 0.32s ease-out;
}
.news-detail-flip.news-flip-in-down {
  animation: news-flip-in-down 0.32s ease-out;
}

@keyframes news-flip-out-up {
  to { transform: translateY(-12%) rotateX(-55deg); opacity: 0; }
}
@keyframes news-flip-in-up {
  from { transform: translateY(12%) rotateX(55deg); opacity: 0; }
  to { transform: translateY(0) rotateX(0); opacity: 1; }
}
@keyframes news-flip-out-down {
  to { transform: translateY(12%) rotateX(55deg); opacity: 0; }
}
@keyframes news-flip-in-down {
  from { transform: translateY(-12%) rotateX(-55deg); opacity: 0; }
  to { transform: translateY(0) rotateX(0); opacity: 1; }
}

.news-detail-img-wrap { touch-action: none; }

.news-detail-counter {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.85rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: 'Outfit', sans-serif;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.news-detail-swipe-hint {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.42rem 0.85rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 5;
  pointer-events: none;
  animation: news-hint-fade 4s ease-out forwards;
}
@keyframes news-hint-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}
@media (min-width: 768px) {
  .news-detail-swipe-hint { display: none; }
}

.news-nav-arrow {
  position: absolute;
  right: 0.75rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.news-nav-arrow:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.news-nav-arrow.is-disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; }
.news-nav-arrow-prev { top: 1rem; right: 4rem; }
.news-nav-arrow-next { bottom: 1rem; right: 1rem; }
@media (max-width: 767px) {
  .news-nav-arrow { display: none; }
}

.news-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 3rem 1rem;
}

.news-empty .material-symbols-outlined {
  font-size: 48px;
  display: block;
  margin: 0 auto 1rem;
  opacity: 0.3;
}

/* Toast notification */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 300;
  padding: 12px 24px;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-success {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.toast-error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

/* ============================================================
   INDEX — Service cards
   ============================================================ */
.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-2px);
}

.service-card:active {
  transform: scale(0.97);
}
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, Opera */
}

/* ============================================================
   ORGANIC CUTOUT CARDS (Actividades-style)
   ============================================================ */
.feed-image {
  --organic-corner-radius: clamp(1.6rem, 3.6vw, 2.2rem);
  --organic-cutout-inset: clamp(0.35rem, 1vw, 0.8rem);
  --organic-pill-gap: clamp(0.45rem, 1vw, 0.75rem);
  --organic-pill-pad-y: clamp(0.45rem, 1vw, 0.68rem);
  --organic-pill-pad-x: clamp(0.6rem, 1.4vw, 1rem);
  --organic-avatar-size: clamp(2rem, 6vw, 2.75rem);
  --organic-name-size: clamp(0.78rem, 2.2vw, 0.98rem);
  --organic-action-gap: clamp(0.22rem, 0.55vw, 0.38rem);
  --organic-action-pad: clamp(0.32rem, 0.85vw, 0.5rem);
  position: relative;
  border-radius: var(--organic-corner-radius);
  overflow: visible;
  isolation: isolate;
}

.organic-cutout-surface {
  position: absolute;
  inset: 0;
  clip-path: inset(0 round var(--organic-corner-radius));
  -webkit-clip-path: inset(0 round var(--organic-corner-radius));
  overflow: hidden;
}

.organic-cutout-surface > img,
.organic-cutout-surface > .organic-photo-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.organic-photo-fade {
  background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(9, 9, 11, 0.18) 76%, rgba(9, 9, 11, 0.4) 100%);
}

.organic-badge-wrapper {
  position: absolute;
  top: var(--organic-cutout-inset);
  left: var(--organic-cutout-inset);
  z-index: 20;
  max-width: calc(100% - 7rem);
}

.organic-pill {
  background: rgba(255, 255, 255, 0.07);
  padding: var(--organic-pill-pad-y) var(--organic-pill-pad-x) var(--organic-pill-pad-y) var(--organic-pill-pad-y);
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  gap: var(--organic-pill-gap);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

.organic-pill::after {
  display: none;
}

.organic-pill-bottom-curve {
  display: none;
}

.organic-rsvp-wrapper {
  position: absolute;
  bottom: var(--organic-cutout-inset);
  right: var(--organic-cutout-inset);
  z-index: 20;
  max-width: calc(100% - 1.1rem);
}

.organic-rsvp-pill {
  background: transparent;
  display: flex;
  align-items: center;
  position: relative;
}

.organic-rsvp-pill::before {
  display: none;
}

.organic-rsvp-top-curve {
  display: none;
}

.organic-rsvp-actions {
  display: flex;
  align-items: center;
  gap: var(--organic-action-gap);
  padding: var(--organic-action-pad);
  min-height: clamp(2.5rem, 5vw, 3rem);
  max-width: 100%;
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

.user-avatar {
  width: var(--organic-avatar-size);
  height: var(--organic-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: #222;
  flex-shrink: 0;
}

.username-text {
  font-weight: 700;
  font-size: var(--organic-name-size);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.organic-action-btn {
  padding: clamp(0.48rem, 1.05vw, 0.66rem) clamp(0.76rem, 1.7vw, 1.06rem);
  display: flex;
  align-items: center;
  gap: clamp(0.24rem, 0.78vw, 0.44rem);
  border-radius: 9999px;
  color: rgb(161 161 170);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.organic-action-btn:hover {
  color: white;
}

.organic-action-btn--active {
  background: rgb(34 197 94);
  color: white;
  border: 1px solid rgba(34, 197, 94, 0.85);
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.3);
}

.organic-action-icon {
  font-size: clamp(14px, 2.15vw, 16px);
}

.organic-action-label {
  font-size: clamp(10.5px, 1.9vw, 11.5px);
  font-weight: 600;
  line-height: 1;
}

/* ============================================================
   INDEX2 — Estética unificada y aire generoso para todos los widgets
   Scoped a .page-index2. No afecta al index original.
   ============================================================ */
.page-index2 #home-bento-grid {
  row-gap: 1.25rem;
}
@media (min-width: 640px) {
  .page-index2 #home-bento-grid { row-gap: 1.5rem; }
}

/* Marco común para todas las cards del bento (igual que widgets de Agenda) */
.page-index2 #home-bento-grid > .bento-cat-noticias,
.page-index2 #home-bento-grid > .bento-cat-buses,
.page-index2 #home-bento-grid > .bento-cat-salud,
.page-index2 #home-bento-grid > .bento-cat-local,
.page-index2 #home-bento-grid > .bento-cat-turismo,
.page-index2 #home-bento-grid > div > .bento-cat-noticias,
.page-index2 #home-bento-grid > div > .bento-cat-salud {
  border-radius: 1.5rem !important;
  border: 1px solid rgba(255,255,255,0.10);
  background-color: rgba(255,255,255,0.015);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.55);
}

/* ============================================================
   Tinte por categoría: degradado de color asociado a la etiqueta
   del widget. Naranja noticias, rosa buses, esmeralda salud, etc.
   ============================================================ */
.page-index2 #home-bento-grid .bento-cat-noticias {
  background-image: linear-gradient(155deg, rgba(251,146,60,0.22) 0%, rgba(251,146,60,0.06) 45%, transparent 80%) !important;
  border-color: rgba(251,146,60,0.25) !important;
}
.page-index2 #home-bento-grid .bento-cat-buses {
  background-image: linear-gradient(155deg, rgba(244,63,94,0.22) 0%, rgba(244,63,94,0.06) 45%, transparent 80%) !important;
  border-color: rgba(244,63,94,0.25) !important;
}
.page-index2 #home-bento-grid .bento-cat-salud {
  background-image: linear-gradient(155deg, rgba(52,211,153,0.22) 0%, rgba(52,211,153,0.06) 45%, transparent 80%) !important;
  border-color: rgba(52,211,153,0.25) !important;
}
.page-index2 #home-bento-grid .bento-cat-local {
  background-image: linear-gradient(155deg, rgba(0,227,253,0.22) 0%, rgba(0,227,253,0.06) 45%, transparent 80%) !important;
  border-color: rgba(0,227,253,0.25) !important;
}
.page-index2 #home-bento-grid .bento-cat-turismo {
  background-image: linear-gradient(155deg, rgba(250,204,21,0.22) 0%, rgba(250,204,21,0.06) 45%, transparent 80%) !important;
  border-color: rgba(250,204,21,0.25) !important;
}
.page-index2 #home-bento-grid .bento-cat-enlaces {
  background-image: linear-gradient(155deg, rgba(168,85,247,0.22) 0%, rgba(168,85,247,0.06) 45%, transparent 80%) !important;
  border-color: rgba(168,85,247,0.25) !important;
}

/* ---- Cabecera interna unificada (Noticias del bento) ---- */
.page-index2 #home-bento-grid .bento-cat-noticias > .flex.items-center.gap-2 {
  padding: 1.1rem 1.15rem 0.65rem !important;
  gap: 0.55rem !important;
}
.page-index2 #home-bento-grid .bento-cat-noticias > .flex.items-center.gap-2 .material-symbols-outlined {
  font-size: 18px !important;
}
.page-index2 #home-bento-grid .bento-cat-noticias > .flex.items-center.gap-2 > span:last-child {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

/* Tarjetas hijas dentro del grupo Noticias (con margen interior) */
.page-index2 #home-bento-grid .bento-cat-noticias > .flex-1.min-h-0:not(.flex) {
  margin: 0.25rem 0.85rem 0.85rem !important;
}
.page-index2 #home-bento-grid .bento-cat-noticias > .flex-1.min-h-0.flex {
  gap: 0.7rem !important;
  padding: 0.25rem 0.85rem 0.85rem !important;
}

/* ---- Buses widget (interior) ---- */
.page-index2 #home-bento-grid .widget-buses {
  padding: 1.1rem 1.15rem !important;
}
.page-index2 #home-bento-grid .widget-buses > .relative.z-10.flex.items-center {
  margin-bottom: 0.85rem !important;
  gap: 0.55rem !important;
}
.page-index2 #home-bento-grid .widget-buses > .relative.z-10.flex.items-center .material-symbols-outlined {
  font-size: 18px !important;
}
.page-index2 #home-bento-grid .widget-buses > .relative.z-10.flex.items-center > span:last-child {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}
.page-index2 #home-bento-grid .widget-buses .bus-grid-inner {
  gap: 0.6rem !important;
}

/* ---- Farmacia widget (interior) ---- */
.page-index2 #home-bento-grid .bento-cat-salud > div.w-full.h-full {
  padding: 1.1rem 1.15rem !important;
  gap: 0.85rem !important;
}
.page-index2 #home-bento-grid .bento-cat-salud > div.w-full.h-full > .relative.z-10.flex.items-center {
  gap: 0.55rem !important;
}
.page-index2 #home-bento-grid .bento-cat-salud > div.w-full.h-full > .relative.z-10.flex.items-center .material-symbols-outlined {
  font-size: 18px !important;
}
.page-index2 #home-bento-grid .bento-cat-salud > div.w-full.h-full > .relative.z-10.flex.items-center > span:last-child {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

/* ---- Restaurantes widget (interior) ---- */
.page-index2 #home-bento-grid .bento-cat-turismo > .content-slide {
  padding: 1.1rem 1.15rem 1.4rem !important;
}
.page-index2 #home-bento-grid .bento-cat-turismo .relative.z-10.flex.items-center {
  margin-bottom: 0.85rem !important;
  gap: 0.55rem !important;
}
.page-index2 #home-bento-grid .bento-cat-turismo .relative.z-10.flex.items-center .material-symbols-outlined {
  font-size: 18px !important;
}
.page-index2 #home-bento-grid .bento-cat-turismo .relative.z-10.flex.items-center > span:last-child {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}
.page-index2 #home-bento-grid .bento-cat-turismo .restaurant-grid-inner {
  gap: 0.65rem !important;
}

/* ---- Mapa "Explorar": cabecera al estilo de los widgets de Agenda ---- */
.page-index2 #home-bento-grid .widget-mapa > .absolute.top-3.left-3 {
  top: 1rem !important;
  left: 1.05rem !important;
  gap: 0.55rem !important;
}
.page-index2 #home-bento-grid .widget-mapa > .absolute.top-3.left-3 .material-symbols-outlined {
  font-size: 18px !important;
  color: #67e8f9 !important; /* cyan-300, igual tono que Concello */
}
.page-index2 #home-bento-grid .widget-mapa > .absolute.top-3.left-3 > span:last-child {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  color: #a5f3fc !important; /* cyan-200 suave */
  text-transform: uppercase;
}

/* ============================================================
   INDEX2 — Tarjetas de enlaces rápidos (sin negro, con tono propio)
   ============================================================ */
.enlace-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  min-height: 78px;
}
.enlace-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--enlace-glow, transparent);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.enlace-card:hover {
  transform: translateY(-1px);
  border-color: var(--enlace-border, rgba(255,255,255,0.18));
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.7), 0 0 0 1px var(--enlace-border, rgba(255,255,255,0.18)) inset;
}
.enlace-card:hover::before { opacity: 0.85; }
.enlace-icon { color: var(--enlace-icon, #fff); }

.enlace-cyan {
  --enlace-glow: radial-gradient(circle at 100% 0%, rgba(34,211,238,0.22) 0%, transparent 65%);
  --enlace-border: rgba(34,211,238,0.45);
  --enlace-icon: #67e8f9;
}
.enlace-sky {
  --enlace-glow: radial-gradient(circle at 100% 0%, rgba(56,189,248,0.22) 0%, transparent 65%);
  --enlace-border: rgba(56,189,248,0.45);
  --enlace-icon: #7dd3fc;
}
.enlace-amber {
  --enlace-glow: radial-gradient(circle at 100% 0%, rgba(251,191,36,0.22) 0%, transparent 65%);
  --enlace-border: rgba(251,191,36,0.45);
  --enlace-icon: #fcd34d;
}
.enlace-violet {
  --enlace-glow: radial-gradient(circle at 100% 0%, rgba(167,139,250,0.22) 0%, transparent 65%);
  --enlace-border: rgba(167,139,250,0.45);
  --enlace-icon: #c4b5fd;
}

/* Cabecera del widget de enlaces (alineada con la unificación de index2) */
.page-index2 #home-bento-grid .bento-cat-enlaces > .flex.items-center.gap-2 {
  padding: 1.1rem 1.15rem 0.65rem !important;
  gap: 0.55rem !important;
}
.page-index2 #home-bento-grid .bento-cat-enlaces > .flex.items-center.gap-2 .material-symbols-outlined {
  font-size: 18px !important;
}
.page-index2 #home-bento-grid .bento-cat-enlaces > .flex.items-center.gap-2 > span:last-child {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}
.page-index2 #home-bento-grid .bento-cat-enlaces > .grid {
  padding: 0.25rem 0.85rem 1.1rem !important;
  gap: 0.55rem !important;
}

/* Botones de enlaces: que se adapten a la altura disponible sin romper la card */
.page-index2 .enlace-card {
  min-height: 0 !important;
  padding: 0.55rem 0.65rem !important;
}
.page-index2 .enlace-card .enlace-icon {
  font-size: 18px !important;
}

/* Aumenta la altura de la fila bus/farmacia/enlaces en escritorio para dar
   aire vertical al nombre y ubicación de la farmacia. */
@media (min-width: 1024px) {
  .page-index2 #home-bento-grid > .hidden.lg\:flex {
    height: 15rem !important;
  }
  /* La card de farmacia en desktop usa aspect-square; lo soltamos para que
     la altura mande y el cuadrado no estrangule el contenido. */
  .page-index2 #home-bento-grid > .hidden.lg\:flex > .bento-cat-salud {
    aspect-ratio: auto !important;
    width: 15rem !important;
  }
}

/* Permite que el nombre se corte a 2 líneas pero la ubicación NO se oculte por overflow */
.page-index2 .bento-cat-salud .flex-1 > .relative.z-10 h3 {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}
/* El gradiente negro vuelve, pero por debajo del contenido para no taparlo. */
.page-index2 .bento-fade-to-black {
  display: block;
  z-index: 0;
}
.page-index2 #home-bento-grid {
  position: relative;
}
.page-index2 #home-bento-grid > * {
  position: relative;
  z-index: 1;
}

/* Mata los pseudo-elementos oscuros heredados de [class*="bento-cat-"]
   en la tarjeta de enlaces (no es una imagen, no necesita oscurecer). */
.page-index2 .bento-cat-enlaces::before,
.page-index2 .bento-cat-enlaces::after {
  display: none !important;
  background: none !important;
}

/* Farmacia: padding extra en la sub-tarjeta de guardia para que el nombre
   no toque el borde inferior. */
.page-index2 .bento-cat-salud .flex-1 {
  padding-bottom: 1.1rem !important;
  padding-right: 0.9rem !important;
}

/* Marco común también en enlaces */
.page-index2 #home-bento-grid > .bento-cat-enlaces,
.page-index2 #home-bento-grid > div > .bento-cat-enlaces {
  border-radius: 1.5rem !important;
  border: 1px solid rgba(255,255,255,0.10);
  background-color: rgba(255,255,255,0.015);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.55);
}

/* ============================================================
   TÍTULOS DE WIDGETS DEL BENTO — siempre blancos en index2.
   Los iconos conservan su color de sección, pero el texto del
   encabezado (último <span> de la cabecera) pasa a blanco.
   ============================================================ */
.page-index2 #home-bento-grid [class*="bento-cat-"] > .flex.items-center > span.font-headline {
  color: rgba(255,255,255,0.95) !important;
}

/* En el home (index2) el botón "Ver planes" del widget Planes se reduce a
   sólo icono (flecha) para dejar más espacio a la descripción. No afecta a
   la página de Actividades porque la regla está scopeada a .page-index2. */
.page-index2 #home-actividad-widget .organic-action-label,
.page-index2 #home-actividad-widget-2 .organic-action-label {
  display: none !important;
}
.page-index2 #home-actividad-widget .organic-action-btn,
.page-index2 #home-actividad-widget-2 .organic-action-btn {
  width: clamp(1.9rem, 3.2vw, 2.3rem) !important;
  height: clamp(1.9rem, 3.2vw, 2.3rem) !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none !important;
  color: #fff !important;
  gap: 0 !important;
}
/* Más aire entre descripción y fecha en las tarjetas del widget Planes
   (solo index2). El bloque de texto del fondo es un flex-column, así que
   un gap adicional basta. */
.page-index2 #home-actividad-widget .organic-frame > div[style*="flex-direction:column"],
.page-index2 #home-actividad-widget-2 .organic-frame > div[style*="flex-direction:column"] {
  gap: 0.45rem !important;
}

/* Degradado negro detrás del título/descripción del widget Planes para
   mejorar la legibilidad del texto. Scoped a index2. */
.page-index2 #home-actividad-widget .organic-cutout-surface::after,
.page-index2 #home-actividad-widget-2 .organic-cutout-surface::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

.page-index2 #home-actividad-widget .organic-rsvp-actions,
.page-index2 #home-actividad-widget-2 .organic-rsvp-actions {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.page-index2 #home-actividad-widget .organic-action-btn:hover,
.page-index2 #home-actividad-widget-2 .organic-action-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================
   CARTELES / CINE HOME (index2) — rejilla 2x2 (o 2+1 centrada).
   En Cine se muestran los horarios de HOY encima del poster.
   ============================================================ */
.page-index2 #home-carteles-carousel {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.page-index2 .carteles-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
/* Track paginado (varias páginas de 4 carteles) */
.page-index2 #home-carteles-carousel {
  overflow: hidden;
  position: relative;
}
.page-index2 .carteles-home-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  align-items: stretch;
}
.page-index2 .carteles-home-track > .carteles-home-grid {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}
.page-index2 .cartel-home-tile img {
  -webkit-user-drag: none;
  pointer-events: none;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-index2 .carteles-home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-index2 .carteles-home-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 75%;
    margin: 0 auto;
  }
}
/* 3 items en lg+: 2 col grid, 3er item centrado */
@media (min-width: 1024px) {
  .page-index2 .carteles-home-grid--3 > :nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
    width: 100%;
  }
}
/* Caso especial: 3 items → 2 arriba + 1 centrado abajo (solo móvil) */
@media (max-width: 767px) {
  .page-index2 .carteles-home-grid--3 {
    grid-template-areas: "a b" "c c";
  }
  .page-index2 .carteles-home-grid--3 > :nth-child(1) { grid-area: a; }
  .page-index2 .carteles-home-grid--3 > :nth-child(2) { grid-area: b; }
  .page-index2 .carteles-home-grid--3 > :nth-child(3) {
    grid-area: c;
    max-width: 50%;
    justify-self: center;
    width: 100%;
  }
}
.page-index2 .cartel-home-tile {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease;
  height: 100%;
}
.page-index2 .cartel-home-tile:hover {
  transform: translateY(-2px);
}
.page-index2 .cartel-home-tile-img {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.page-index2 .cartel-home-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.page-index2 .cartel-home-tile:hover .cartel-home-tile-img img {
  transform: scale(1.04);
}
.page-index2 .cartel-home-tile-overlay {
  display: none;
}
.page-index2 .cartel-home-hoy {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 15, 20, 0.72);
  border: 1px solid rgba(236, 72, 153, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6);
  overflow: hidden;
}
.page-index2 .cartel-home-hoy-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #f9a8d4;
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-index2 .cartel-home-hoy-times {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-index2 .cartel-home-tile-info {
  padding: 0 0.2rem;
}
.page-index2 .cartel-home-tile-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-index2 .cartel-home-tile-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.page-index2 .cartel-home-tile-meta .material-symbols-outlined {
  color: rgba(255,255,255,0.55);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 3ª tarjeta de noticias */
.page-index2 .news-card-extra {
  flex: 1;
  min-width: 0;
}

/* Títulos de widgets en el bento: siempre blancos, los iconos
   mantienen su color de sección (ej. Noticias con icono naranja y
   título blanco como en el widget de restaurantes). */
.page-index2 #home-bento-grid .font-headline.uppercase {
  color: #ffffff !important;
}

/* ============================================================
   AGENDA CARDS (Eventos / Planes / Carteles) — color arriba y abajo
   con transparencia en el centro, siguiendo el estilo de las bento cards.
   ============================================================ */
.page-index2 .agenda-card {
  position: relative;
  isolation: isolate;
}
.page-index2 .agenda-card::before,
.page-index2 .agenda-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.page-index2 .agenda-card::before {
  top: 0;
  height: 35%;
}
.page-index2 .agenda-card::after {
  bottom: 0;
  height: 35%;
}
.page-index2 .agenda-card > * {
  position: relative;
  z-index: 1;
}

/* Eventos — fucsia */
.page-index2 .agenda-eventos::before {
  background: linear-gradient(to bottom, rgba(236, 72, 153, 0.10) 0%, transparent 100%);
}
.page-index2 .agenda-eventos::after {
  background: linear-gradient(to top, rgba(236, 72, 153, 0.08) 0%, transparent 100%);
}

/* Planes — violeta */
.page-index2 .agenda-planes::before {
  background: linear-gradient(to bottom, rgba(167, 139, 250, 0.10) 0%, transparent 100%);
}
.page-index2 .agenda-planes::after {
  background: linear-gradient(to top, rgba(167, 139, 250, 0.08) 0%, transparent 100%);
}

/* Carteles & Cine — fucsia */
.page-index2 .agenda-carteles::before {
  background: linear-gradient(to bottom, rgba(236, 72, 153, 0.10) 0%, transparent 100%);
}
.page-index2 .agenda-carteles::after {
  background: linear-gradient(to top, rgba(236, 72, 153, 0.08) 0%, transparent 100%);
}

/* ============================================================
   ENLACE-NEUTRAL — variante blanca para el widget Útiles
   (no pertenece a ninguna sección, todo en blanco neutro)
   ============================================================ */
.enlace-neutral {
  --enlace-glow: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.10) 0%, transparent 65%);
  --enlace-border: rgba(255,255,255,0.22);
  --enlace-icon: #ffffff;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.enlace-neutral:hover {
  background-color: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.28);
}

/* ============================================================
   QUICK ACCESS v2 · split-tiles (solo index2)
   ============================================================ */
.page-index2 .qa2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (min-width: 640px) {
  .page-index2 .qa2-grid { gap: 0.85rem; }
}
@media (min-width: 1024px) {
  .page-index2 .qa2-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1rem;
  }
}

.page-index2 .qa2-tile {
  --qa-tint: 56, 189, 248;
  --qa-icon: #67e8f9;
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.15;
  border-radius: 1.1rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(160deg,
      rgba(var(--qa-tint), 0.14) 0%,
      rgba(var(--qa-tint), 0.04) 45%,
      rgba(12, 12, 14, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 10px 24px -14px rgba(0, 0, 0, 0.55);
  text-decoration: none;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1),
              border-color 280ms ease,
              box-shadow 320ms ease;
}
.page-index2 .qa2-tile::before {
  /* sheen diagonal */
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,0.04) 100%);
  pointer-events: none;
  z-index: 2;
}
.page-index2 .qa2-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--qa-tint), 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 34px -18px rgba(var(--qa-tint), 0.5),
    0 10px 24px -14px rgba(0, 0, 0, 0.55);
}

.page-index2 .qa2-glow {
  position: absolute;
  top: -35%;
  left: 50%;
  width: 140%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center,
    rgba(var(--qa-tint), 0.55) 0%,
    rgba(var(--qa-tint), 0.18) 30%,
    rgba(var(--qa-tint), 0) 60%);
  filter: blur(14px);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
  transition: opacity 320ms ease, transform 500ms cubic-bezier(.22,.61,.36,1);
}
.page-index2 .qa2-tile:hover .qa2-glow {
  opacity: 1;
  transform: translateX(-50%) translateY(4%);
}

.page-index2 .qa2-top {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.4rem 0.2rem;
}
.page-index2 .qa2-icon {
  font-size: clamp(28px, 7vw, 40px);
  color: var(--qa-icon);
  filter: drop-shadow(0 4px 10px rgba(var(--qa-tint), 0.45));
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.page-index2 .qa2-tile:hover .qa2-icon {
  transform: scale(1.08);
}

.page-index2 .qa2-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem 0.6rem;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.page-index2 .qa2-label {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-index2 .qa2-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 240ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
  flex: 0 0 auto;
}
.page-index2 .qa2-tile:hover .qa2-arrow {
  color: var(--qa-icon);
  transform: translate(2px, -2px);
}

/* Color variants */
.page-index2 .qa2-cyan    { --qa-tint: 34, 211, 238;  --qa-icon: #67e8f9; }
.page-index2 .qa2-orange  { --qa-tint: 249, 115, 22;  --qa-icon: #fdba74; }
.page-index2 .qa2-amber   { --qa-tint: 245, 158, 11;  --qa-icon: #fcd34d; }
.page-index2 .qa2-pink    { --qa-tint: 236, 72, 153;  --qa-icon: #f9a8d4; }
.page-index2 .qa2-emerald { --qa-tint: 16, 185, 129;  --qa-icon: #6ee7b7; }
.page-index2 .qa2-rose    { --qa-tint: 244, 63, 94;   --qa-icon: #fda4af; }
.page-index2 .qa2-yellow  { --qa-tint: 234, 179, 8;   --qa-icon: #fde047; }
.page-index2 .qa2-indigo  { --qa-tint: 139, 92, 246;  --qa-icon: #c4b5fd; }

/* ============================================================
   FONDO HALO (prueba) — Activo cuando body tiene .bg-halo
   ============================================================
   Reemplaza visualmente al .animated-bg con tres manchas de luz
   borrosas que flotan sobre fondo negro. Scoped a .bg-halo
   para no afectar otras páginas.
   ============================================================ */
body.bg-halo {
  background-color: #000000 !important;
  /* Tema por defecto: azul neón eléctrico (parte superior). Se sobrescribe vía JS al hacer scroll. */
  --halo-glow-1: #2563eb;
  --halo-glow-2: #1e40af;
  --halo-glow-3: rgba(56, 189, 248, 0.7);
}

/* Oculta el fondo de imagen original cuando el halo está activo */
body.bg-halo .animated-bg {
  display: none !important;
}

/* Elimina el gradient a negro sobre el bento cuando el halo está activo —
   tapaba el degradado fluido de las manchas en la zona inferior. */
body.bg-halo .bento-fade-to-black {
  display: none !important;
}

/* ============================================================
   HALO — Uniformidad de transparencia entre cards del bento
   ============================================================
   Iguala todas las cards al estilo de turismo (restaurantes):
   pseudoelementos ::after / ::before con tinte sutil (0.06 / 0.10)
   manteniendo el color propio de cada categoría. Evita que mapa
   se oscurezca por arriba o que salud se vea sobre-tintada.
   ============================================================ */
body.bg-halo.page-index2 .bento-cat-noticias::after {
  background: linear-gradient(to top, rgba(251, 146, 60, 0.06) 0%, transparent 25%) !important;
}
body.bg-halo.page-index2 .bento-cat-noticias::before {
  background: linear-gradient(to bottom, rgba(251, 146, 60, 0.10) 0%, transparent 20%) !important;
  display: block !important;
}

/* BUSES — el contenedor sigue el patrón sutil del resto (igual que
   turismo). Sólo las tarjetitas internas (.bus-slot) se oscurecen
   para contrastar más con el halo y leerse mejor. */
body.bg-halo.page-index2 .bento-cat-buses::after {
  background: linear-gradient(to top, rgba(244, 63, 94, 0.06) 0%, transparent 25%) !important;
}
body.bg-halo.page-index2 .bento-cat-buses::before {
  background: linear-gradient(to bottom, rgba(244, 63, 94, 0.10) 0%, transparent 20%) !important;
  display: block !important;
}
body.bg-halo.page-index2 #home-bento-grid .bento-cat-buses .bus-slot {
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.bg-halo.page-index2 .bento-cat-salud::after {
  background: linear-gradient(to top, rgba(52, 211, 153, 0.06) 0%, transparent 25%) !important;
}
body.bg-halo.page-index2 .bento-cat-salud::before {
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.10) 0%, transparent 20%) !important;
  display: block !important;
}

body.bg-halo.page-index2 .bento-cat-local::after {
  background: linear-gradient(to top, rgba(0, 227, 253, 0.06) 0%, transparent 25%) !important;
}
body.bg-halo.page-index2 .bento-cat-local::before {
  background: linear-gradient(to bottom, rgba(0, 227, 253, 0.10) 0%, transparent 20%) !important;
  display: block !important;
}

body.bg-halo.page-index2 .bento-cat-enlaces::after {
  background: linear-gradient(to top, rgba(168, 85, 247, 0.06) 0%, transparent 25%) !important;
}
body.bg-halo.page-index2 .bento-cat-enlaces::before {
  background: linear-gradient(to bottom, rgba(168, 85, 247, 0.10) 0%, transparent 20%) !important;
  display: block !important;
}

.framer-halo-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* mejor altura en móvil con barras dinámicas */
  z-index: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}

/* Solo se muestra cuando body tiene .bg-halo */
body:not(.bg-halo) .framer-halo-bg { display: none; }

.framer-halo-bg .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px) saturate(1.15);
  opacity: 0.78;
  animation: floatLight 9s ease-in-out infinite alternate;
  will-change: transform, opacity, background-color;
  /* Sin transition CSS: la interpolación la hace JS frame a frame
     mezclando los temas de las cards visibles ponderados por
     distancia al punto de referencia. */
}

/* Las tres manchas se reparten verticalmente: g1 arriba, g2 en
   medio (ligeramente a la derecha) y g3 abajo. Como el contenedor
   es position:fixed sigue al viewport, así el halo cubre toda la
   altura visible y no deja "muerto" el tercio inferior cuando el
   contenido es largo. */
.framer-halo-bg .glow-1 {
  width: 50vw;
  height: 55vh;
  background-color: var(--halo-glow-1, #1c64f2);
  top: -10vh;
  left: 15vw;
  animation-duration: 7s;
}

.framer-halo-bg .glow-2 {
  width: 45vw;
  height: 55vh;
  background-color: var(--halo-glow-2, #6358ee);
  top: 28vh;
  right: 15vw;
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}

.framer-halo-bg .glow-3 {
  width: 45vw;
  height: 55vh;
  background-color: var(--halo-glow-3, rgba(64, 196, 255, 0.55));
  top: 55vh;
  left: 27.5vw;
  animation-duration: 8s;
}

/* ============================================================
   HALO — Adaptación móvil
   ============================================================
   En móvil las manchas son más grandes (relativas al viewport
   pequeño) y reduciendo el blur conservamos visibilidad sin
   reventar GPU de gama baja. Animación un poco más lenta para
   no marear con la pantalla pequeña.
   ============================================================ */
@media (max-width: 767px) {
  .framer-halo-bg .glow {
    filter: blur(80px);
    opacity: 0.7;
    animation-duration: 12s;
  }
  /* Misma distribución arriba/medio/abajo que en desktop pero
     adaptada al viewport pequeño. Las manchas son más grandes en
     proporción y más solapadas para que ningún punto del viewport
     quede sin luz. */
  .framer-halo-bg .glow-1 {
    width: 80vw;
    height: 50vh;
    top: -10vh;
    left: 5vw;
    animation-duration: 10s;
  }
  .framer-halo-bg .glow-2 {
    width: 75vw;
    height: 50vh;
    top: 28vh;
    right: 5vw;
    animation-duration: 13s;
  }
  .framer-halo-bg .glow-3 {
    width: 75vw;
    height: 50vh;
    top: 55vh;
    left: 12.5vw;
    animation-duration: 11s;
  }
}

/* Tablets: tamaños intermedios y misma distribución vertical */
@media (min-width: 768px) and (max-width: 1023px) {
  .framer-halo-bg .glow-1 { width: 60vw; height: 55vh; top: -10vh; left: 10vw; }
  .framer-halo-bg .glow-2 { width: 55vw; height: 55vh; top: 28vh; right: 10vw; }
  .framer-halo-bg .glow-3 { width: 55vw; height: 55vh; top: 55vh; left: 22.5vw; }
}

/* El fondo halo se anima SIEMPRE — no debe quedar estático ni con
   "reducir movimiento" activado en el sistema. Es parte de la
   identidad visual de la app y no produce parpadeo brusco. */

@keyframes floatLight {
  0%   { transform: translate(0, 0) scale(1);          opacity: 0.7; }
  25%  { transform: translate(35%, 25%) scale(1.25);   opacity: 0.9; }
  50%  { transform: translate(-30%, 40%) scale(0.85);  opacity: 0.65; }
  75%  { transform: translate(-40%, -20%) scale(1.15); opacity: 0.85; }
  100% { transform: translate(30%, -25%) scale(1.1);   opacity: 0.75; }
}

/* ============================================================
   CARTELES HOME — Crece de pequeño a tamaño final
   ============================================================
   Solo escala + opacidad, interpolación pura sin overshoot ni
   rotaciones que crean micro-saltos. Easing ease-out-expo:
   crece rápido al inicio y se desacelera suavemente hasta su
   tamaño final. El stagger lo pone JS con --deal-delay.
   ============================================================ */
.cartel-home-tile--deal {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center center;
  animation: cartelDealIn 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--deal-delay, 0s);
  will-change: transform, opacity;
}

@keyframes cartelDealIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}