/* ============================================
   MENUDEROS - Google Minimal Design System
   Clean - Professional - Blue Palette
   ============================================ */

:root {
  /* Google Blue Palette - Primary */
  --google-blue: #1a73e8;
  --google-blue-hover: #1967d2;
  --google-blue-dark: #174ea6;
  --google-blue-50: #e8f0fe;
  --google-blue-100: #d2e3fc;
  --google-blue-200: #aecbfa;

  /* Google Semantic Colors */
  --google-green: #34a853;
  --google-yellow: #fbbc04;
  --google-red: #ea4335;

  /* Legacy Blue Palette (compatibility) */
  --blue-50: #e8f0fe;
  --blue-100: #d2e3fc;
  --blue-200: #aecbfa;
  --blue-300: #8ab4f8;
  --blue-400: #669df6;
  --blue-500: #4285f4;
  --blue-600: #1a73e8;
  --blue-700: #1967d2;
  --blue-800: #185abc;
  --blue-900: #174ea6;

  /* Neutral Palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic */
  --success: #34a853;
  --warning: #fbbc04;
  --error: #ea4335;

  /* Design Tokens - Modern border-radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Minimal shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 4px 16px rgb(0 0 0 / 0.08);
  --shadow-xl: 0 8px 24px rgb(0 0 0 / 0.1);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Legacy support */
  --primary-gradient-from: #4285f4;
  --primary-gradient-to: #1a73e8;
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.2);
}

/* Utility classes for Google colors */
.text-google-blue { color: var(--google-blue); }
.text-google-green { color: var(--google-green); }
.bg-google-blue-50 { background-color: var(--google-blue-50); }

/* ============================================
   PREVENIR OVERFLOW HORIZONTAL GLOBAL
   ============================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Layout sticky footer - main debe crecer para empujar footer abajo */
body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

main {
  overflow-x: hidden;
  max-width: 100%;
  flex: 1 0 auto !important;
  min-height: 0 !important;
}

footer {
  flex-shrink: 0 !important;
}

/* Contenedores principales */
section, .container, [class*="max-w-"] {
  max-width: 100%;
  overflow-x: hidden;
}

/* Imagenes responsive */
img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   BASE
   ============================================ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--gray-800);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   HEADER FLOTANTE - Pill/Floating Style
   ============================================ */

/* Wrapper para posicionar el header flotante en desktop */
.header-floating-wrapper {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  width: calc(100% - 32px) !important;
  max-width: 900px !important;
  display: none !important; /* Oculto en movil */
}

@media (min-width: 768px) {
  .header-floating-wrapper {
    display: block !important;
  }
}

/* Header flotante principal tipo pildora */
.modern-header-floating {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-slow);
  padding: 6px 8px;
}

.modern-header-floating.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Contenedor interior del header flotante */
.header-floating-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
}

/* Logo movil centrado - ocultar siempre en desktop */
.logo-mobile-center {
  display: none !important;
}

/* Header movil superior flotante - rectangular ancho completo con logo centrado */
.mobile-header-floating {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  z-index: 1000 !important;
  width: 100% !important;
  min-width: unset !important;
  max-width: unset !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  padding: 12px 16px !important;
  transition: all var(--transition-slow) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.mobile-header-floating.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Ocultar header movil flotante en desktop */
@media (min-width: 768px) {
  .mobile-header-floating {
    display: none !important;
  }
}

/* ============================================
   HEADER - Legacy Minimal Glass (compatibilidad)
   ============================================ */
.modern-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gray-200);
  transition: all var(--transition-slow);
}

.modern-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}

/* Logo */
.logo-container {
  transition: transform var(--transition-base);
}

.logo-container:hover {
  transform: scale(1.02);
}

.logo-text {
  color: var(--blue-600);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Desktop Nav Links */
.nav-link-modern {
  position: relative;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.nav-link-modern:hover {
  color: var(--blue-600);
  background: var(--blue-50);
}

.nav-link-modern.active {
  color: var(--blue-600);
  background: var(--blue-50);
}

/* Nav Button */
.nav-button-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: var(--blue-600);
  border-radius: var(--radius-full);
  border: none;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.25);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.nav-button-modern:hover {
  background: var(--blue-700);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35);
  transform: translateY(-1px);
}

/* ============================================
   MOBILE BOTTOM NAV - Floating Pill (iOS & Android optimized)
   ============================================ */
.mobile-bottom-nav {
  position: fixed;
  /* Safe area para iPhones con notch - padding extra si no hay safe-area */
  bottom: calc(12px + env(safe-area-inset-bottom, 8px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: none !important;
  width: calc(100% - 24px);
  max-width: 420px;
  padding: 6px 8px;
  /* Padding inferior extra para safe area */
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  /* Borde más visible pero elegante */
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  /* Sombra más pronunciada - efecto flotante */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
  }
}

/* Item de navegación - área táctil mínima 44x44px */
.mobile-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Área táctil mínima de 44px para accesibilidad */
  min-width: 56px;
  min-height: 48px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gray-500);
  border-radius: var(--radius-xl);
  text-decoration: none;
  /* Transiciones suaves */
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform 0.1s ease-out;
  /* Evitar highlight en móviles */
  -webkit-tap-highlight-color: transparent;
  /* Cursor pointer para feedback visual */
  cursor: pointer;
}

/* Icono del item */
.mobile-nav-item i {
  font-size: 22px;
  transition: transform var(--transition-fast);
}

/* Estado hover (principalmente desktop/tablets) */
.mobile-nav-item:hover {
  color: var(--google-blue);
  background: var(--google-blue-50);
}

/* Animación de tap/click - scale down sutil */
.mobile-nav-item:active {
  transform: scale(0.92);
  transition: transform 0.08s ease-out;
}

/* Estado activo - destaca más */
.mobile-nav-item.active {
  color: var(--google-blue);
  background: var(--google-blue-50);
}

/* Indicador superior para el item activo */
.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--google-blue);
  border-radius: var(--radius-full);
  /* Animación de entrada del indicador */
  animation: activeIndicatorIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes activeIndicatorIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 20px;
    opacity: 1;
  }
}

/* Icono activo - más grande */
.mobile-nav-item.active i {
  transform: scale(1.1);
}

/* Texto activo - más oscuro */
.mobile-nav-item.active span {
  font-weight: 600;
  color: var(--google-blue-dark);
}

/* Hide old mobile menu on mobile */
@media (max-width: 768px) {
  .mobile-menu-modern {
    display: none !important;
  }

  main {
    padding-bottom: 100px !important;
  }
}

/* Hamburger - Hidden on mobile now */
.hamburger-modern {
  display: none;
}

/* ============================================
   HERO - Minimal Google Style with Animations
   ============================================ */

/* Keyframes for Hero Animations */
@keyframes heroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBadgeFade {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes heroButtonSlide {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-minimal {
  position: relative;
  border-radius: var(--radius-2xl);
  background: var(--google-blue);
  animation: heroFadeIn 0.6s ease-out forwards;
  will-change: transform;
}

/* Parallax effect on scroll - applied via JS */
.hero-minimal.parallax-active {
  transition: transform 0.15s ease-out;
}

.hero-badge-minimal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  animation: heroBadgeFade 0.5s ease-out 0.1s backwards;
}

.hero-badge-dot-minimal {
  width: 6px;
  height: 6px;
  background: var(--google-green);
  border-radius: 50%;
  animation: heroPulse 2s ease-in-out infinite;
}

.hero-title-minimal {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
  animation: heroSlideUp 0.6s ease-out 0.2s backwards;
}

.hero-subtitle-minimal {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  max-width: 480px;
  animation: heroSlideUp 0.6s ease-out 0.3s backwards;
}

/* Hero buttons container animation */
.hero-minimal .flex.flex-col.sm\:flex-row {
  animation: heroButtonSlide 0.6s ease-out 0.4s backwards;
}

.hero-btn-primary-minimal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--google-blue);
  background: white;
  border-radius: var(--radius-full);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hero-btn-primary-minimal:hover {
  background: var(--gray-50);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.hero-btn-primary-minimal:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Icon animation on hover */
.hero-btn-primary-minimal i {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-btn-primary-minimal:hover i {
  transform: scale(1.1);
}

.hero-btn-secondary-minimal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.hero-btn-secondary-minimal:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.hero-btn-secondary-minimal:active {
  transform: translateY(0);
}

/* Icon animation on hover */
.hero-btn-secondary-minimal i {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-btn-secondary-minimal:hover i {
  transform: translateX(2px);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-minimal,
  .hero-badge-minimal,
  .hero-badge-dot-minimal,
  .hero-title-minimal,
  .hero-subtitle-minimal,
  .hero-minimal .flex.flex-col.sm\:flex-row {
    animation: none;
  }

  .hero-btn-primary-minimal,
  .hero-btn-secondary-minimal {
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .hero-btn-primary-minimal:hover,
  .hero-btn-secondary-minimal:hover {
    transform: none;
  }
}

/* Legacy support - keep old classes working */
.hero-section-2026 {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--google-blue);
}

.hero-pattern { display: none; }
.hero-glow-1, .hero-glow-2 { display: none; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
}

.hero-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
}

.hero-subtitle {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  max-width: 480px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--google-blue);
  background: white;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  text-decoration: none;
}

.hero-btn-primary:hover {
  background: var(--gray-100);
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  text-decoration: none;
}

.hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   CARDS - Minimal Google Style
   ============================================ */
.card-minimal {
  background: white;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.card-minimal:hover {
  border-color: var(--google-blue-200);
  box-shadow: var(--shadow-md);
}

.card-image-minimal {
  position: relative;
  display: block;
  height: 160px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .card-image-minimal {
    height: auto;
    min-height: 130px;
    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  }
}

.card-image-minimal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-actions-minimal {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Google Style Badges */
.badge-google-success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  background: var(--google-green);
  border-radius: var(--radius-full);
}

/* Mini Map - Minimal */
.mini-map-minimal {
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}

.mini-map-minimal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Google Style Buttons - Small */
.btn-google-primary-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--google-blue);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
}

.btn-google-primary-sm:hover {
  background: var(--google-blue-hover);
  color: white;
}

.btn-google-outline-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--google-blue);
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}

.btn-google-outline-sm:hover {
  background: var(--google-blue-50);
  border-color: var(--google-blue-200);
  color: var(--google-blue);
}

/* Google Text Button */
.btn-google-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--google-blue);
  background: transparent;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  text-decoration: none;
}

.btn-google-text:hover {
  background: var(--google-blue-50);
}

/* Distance Badge */
.badge-distancia.visible {
  opacity: 1 !important;
}

/* Legacy Card Support */
.cafeteria-list-card {
  background: white;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.cafeteria-list-card:hover {
  border-color: var(--google-blue-200);
  box-shadow: var(--shadow-md);
}

.cafeteria-list-image {
  position: relative;
  display: block;
  height: 160px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .cafeteria-list-image {
    height: auto;
    min-height: 130px;
    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  }
}

.cafeteria-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cafeteria-list-image-overlay {
  display: none;
}

/* Legacy Card Badges */
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.card-badge-success {
  color: white;
  background: var(--google-green);
}

.card-badge-distance {
  color: white;
  background: var(--google-blue);
}

/* Legacy Mini Map */
.mini-map-list {
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}

.mini-map-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Legacy Buttons */
.btn-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--google-blue);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
}

.btn-directions:hover {
  background: var(--google-blue-hover);
  color: white;
}

.btn-view-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--google-blue);
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}

.btn-view-menu:hover {
  background: var(--google-blue-50);
  border-color: var(--google-blue-200);
  color: var(--google-blue);
}

/* ============================================
   MAP SECTION - Minimal
   ============================================ */
.map-section-minimal {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: white;
  border: 1px solid var(--gray-200);
}

.map-container-minimal {
  height: 380px;
  background: var(--gray-100);
}

@media (max-width: 768px) {
  .map-container-minimal {
    height: 260px;
  }
}

/* Location Panel - Minimal */
.location-panel-minimal {
  background: white;
  border-radius: var(--radius-2xl);
  padding: 24px;
  border: 1px solid var(--gray-200);
}

.location-icon-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--google-blue-50);
  color: var(--google-blue);
  font-size: 18px;
}

/* Google Style Buttons */
.btn-google-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: var(--google-blue);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.btn-google-primary:hover {
  background: var(--google-blue-hover);
}

.btn-google-primary.active {
  background: var(--google-green);
}

.btn-google-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.btn-google-secondary:hover {
  background: var(--gray-200);
}

/* Google Spinner */
.spinner-google {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--google-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Legacy Map Support */
.map-section-2026 {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: white;
  border: 1px solid var(--gray-200);
}

.map-container-2026 {
  height: 380px;
  background: var(--gray-100);
}

@media (max-width: 768px) {
  .map-container-2026 {
    height: 260px;
  }
}

.location-panel-2026 {
  background: white;
  border-radius: var(--radius-2xl);
  padding: 24px;
  border: 1px solid var(--gray-200);
}

.location-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--google-blue-50);
  color: var(--google-blue);
  font-size: 18px;
}

.btn-location-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: var(--google-blue);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.btn-location-primary:hover {
  background: var(--google-blue-hover);
}

.btn-location-primary.active {
  background: var(--google-green);
}

.btn-location-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.btn-location-secondary:hover {
  background: var(--gray-200);
}

/* ============================================
   BENEFITS - Minimal
   ============================================ */
.benefit-card-minimal {
  padding: 24px 20px;
  border-radius: var(--radius-2xl);
  background: white;
  border: 1px solid var(--gray-200);
  text-align: center;
  transition: border-color var(--transition-base);
}

.benefit-card-minimal:hover {
  border-color: var(--google-blue-200);
}

.benefit-icon-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  font-size: 20px;
  background: var(--google-blue-50);
  color: var(--google-blue);
}

/* Legacy Support */
.benefit-card-2026 {
  padding: 24px 20px;
  border-radius: var(--radius-2xl);
  background: white;
  border: 1px solid var(--gray-200);
  text-align: center;
  transition: border-color var(--transition-base);
}

.benefit-card-2026:hover {
  border-color: var(--google-blue-200);
}

.benefit-icon-2026 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  font-size: 20px;
}

.benefit-icon-blue {
  background: var(--google-blue-50);
  color: var(--google-blue);
}

.benefit-icon-green {
  background: var(--google-blue-50);
  color: var(--google-blue);
}

.benefit-icon-purple {
  background: var(--google-blue-50);
  color: var(--google-blue);
}

/* ============================================
   MODALS - Google Clean Style
   ============================================ */
.modal-overlay-minimal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
}

.modal-content-minimal {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 100%;
  padding: 28px;
}

.modal-icon-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--google-blue-50);
  margin: 0 auto 16px;
}

.modal-icon-minimal i {
  font-size: 24px;
  color: var(--google-blue);
}

/* Google Input Style */
.input-google {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 12px 16px;
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-google:focus {
  outline: none;
  border-color: var(--google-blue);
  box-shadow: 0 0 0 3px var(--google-blue-50);
}

/* Google Chip Style */
.chip-google {
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  font-size: 13px;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.chip-google:hover {
  background: var(--google-blue-50);
  border-color: var(--google-blue-200);
}

/* Legacy Modal Support */
.modal-overlay-2026 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
}

.modal-content-2026 {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 100%;
  padding: 28px;
}

.modal-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--google-blue-50);
  margin: 0 auto 16px;
}

.modal-icon-container i {
  font-size: 24px;
  color: var(--google-blue);
}

/* ============================================
   FOOTER - Minimal
   ============================================ */

/* FORZAR footer estático - NUNCA fixed ni sticky */
footer {
  position: static !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.footer-minimal {
  background: var(--gray-900);
  color: var(--gray-400);
}

.footer-link-minimal {
  color: var(--gray-400);
  font-size: 14px;
  transition: color var(--transition-fast);
}

.footer-link-minimal:hover {
  color: white;
}

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--gray-800);
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.footer-social-btn:hover {
  background: var(--blue-600);
  color: white;
}

/* ============================================
   UTILITIES
   ============================================ */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--blue-600);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.scroll-to-top {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  z-index: 999;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  color: var(--blue-600);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 100px;
  }
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */
@media (max-width: 640px) {
  .mini-map-list,
  .mini-map-minimal {
    display: none;
  }

  .cafeteria-list-actions,
  .card-actions-minimal {
    border-top: 1px solid var(--gray-100);
    border-left: none !important;
  }
}

/* Fix icon squares - excluir imagenes y elementos con w-auto */
.icon-square {
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

/* Asegurar que los logos mantengan su aspect ratio natural */
img[class*="w-auto"],
img.logo,
.logo-container img,
.mobile-header-floating img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Mail overflow */
a[href^="mailto:"] {
  word-break: break-all;
}

/* ============================================
   SCROLL ANIMATIONS - Reveal on Viewport
   Professional animations with IntersectionObserver
   ============================================ */

/* Base state for all animated elements */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.scale-in {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Fade In Up - Slides up while fading in */
.fade-in-up {
  transform: translateY(40px);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In Left - Slides from left while fading in */
.fade-in-left {
  transform: translateX(-50px);
}

.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade In Right - Slides from right while fading in */
.fade-in-right {
  transform: translateX(50px);
}

.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale In - Scales up while fading in */
.scale-in {
  transform: scale(0.9);
}

.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays for grouped elements */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Slower animation variant (0.8s) */
.animate-slow {
  transition-duration: 0.8s;
}

/* Faster animation variant (0.5s) */
.animate-fast {
  transition-duration: 0.5s;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .fade-in-left,
  .fade-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   TESTIMONIOS - Google Minimal Style
   ============================================ */

/* Contenedor de la seccion de testimonios */
.testimonios-section {
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Grid de testimonios - responsive: 1 col movil, 3 col desktop */
.testimonios-section > .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  max-width: 100%;
}

@media (min-width: 768px) {
  .testimonios-section {
    padding-left: 0;
    padding-right: 0;
  }

  .testimonios-section > .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}

.testimonios-section .testimonio-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.testimonios-section .testimonio-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for cards */
.testimonios-section .testimonio-card:nth-child(1) { transition-delay: 0.1s; }
.testimonios-section .testimonio-card:nth-child(2) { transition-delay: 0.2s; }
.testimonios-section .testimonio-card:nth-child(3) { transition-delay: 0.3s; }

.testimonio-card {
  background: white;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-200);
  padding: 24px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.testimonio-card:hover {
  border-color: var(--google-blue-200);
  box-shadow: var(--shadow-md);
}

.testimonio-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.testimonio-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--google-blue-100);
}

.testimonio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonio-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.testimonio-nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonio-carrera {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonio-rating {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.testimonio-rating i {
  font-size: 14px;
  color: #fbbc04;
}

.testimonio-texto {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Responsive adjustments - Movil */
@media (max-width: 767px) {
  .testimonios-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .testimonios-section > .grid {
    padding-left: 0;
    padding-right: 0;
  }

  .testimonio-card {
    padding: 20px;
  }

  .testimonio-avatar {
    width: 46px;
    height: 46px;
  }

  .testimonio-nombre {
    font-size: 14px;
  }

  .testimonio-carrera {
    font-size: 12px;
  }

  .testimonio-texto {
    font-size: 13px;
  }
}

/* Disable testimonial animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .testimonios-section .testimonio-card {
    opacity: 1;
    transform: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }
}

/* ============================================
   HERO ENHANCEMENTS - Floating Badge & Shimmer
   ============================================ */

/* Floating "Nuevo en Madrid" badge */
.hero-floating-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #34a853 0%, #1e8e3e 100%);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(52, 168, 83, 0.4);
  animation: floatingBadge 3s ease-in-out infinite, badgeFadeIn 0.6s ease-out 0.5s backwards;
  z-index: 10;
}

.hero-floating-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes floatingBadge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes badgeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes badgePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* Shimmer effect for primary hero button */
.hero-btn-primary-minimal.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.hero-btn-primary-minimal.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

/* Scroll indicator arrow */
.hero-scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  animation: scrollIndicatorFade 0.6s ease-out 0.8s backwards;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.hero-scroll-indicator:hover {
  color: white;
}

.hero-scroll-indicator i {
  font-size: 20px;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollIndicatorFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ============================================
   CATEGORIES SECTION - Chips/Badges Grid
   Responsive: 2 cols (movil) -> 3 cols (480px+) -> 6 cols (768px+)
   ============================================ */
.categories-section {
  padding: 0 16px;
  overflow: hidden;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 100%;
}

/* Movil grande (a partir de 480px): 3 columnas */
@media (min-width: 480px) {
  .categories-section {
    padding: 0;
  }

  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* Tablet y desktop (a partir de 768px): 6 columnas */
@media (min-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
}

/* Category Chip - Base styles */
.category-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  min-width: 0;
  overflow: hidden;
}

/* Staggered entrance animation */
.category-chip:nth-child(1) { animation: categoryFadeIn 0.5s ease-out 0.1s forwards; }
.category-chip:nth-child(2) { animation: categoryFadeIn 0.5s ease-out 0.15s forwards; }
.category-chip:nth-child(3) { animation: categoryFadeIn 0.5s ease-out 0.2s forwards; }
.category-chip:nth-child(4) { animation: categoryFadeIn 0.5s ease-out 0.25s forwards; }
.category-chip:nth-child(5) { animation: categoryFadeIn 0.5s ease-out 0.3s forwards; }
.category-chip:nth-child(6) { animation: categoryFadeIn 0.5s ease-out 0.35s forwards; }

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

/* Category Chip - Hover state */
.category-chip:hover {
  border-color: #4285f4;
  background: var(--google-blue-50);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.15);
}

.category-chip:active {
  transform: translateY(-2px);
}

/* Category Chip Icon */
.category-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--google-blue-50);
  color: #4285f4;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-chip:hover .category-chip-icon {
  background: #4285f4;
  color: white;
  transform: scale(1.1);
}

/* Category Chip Label */
.category-chip-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.2;
  transition: color var(--transition-fast);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-chip:hover .category-chip-label {
  color: #1a73e8;
}

/* Movil grande (480px+): iconos y texto mas grandes */
@media (min-width: 480px) {
  .category-chip {
    padding: 14px 8px;
    gap: 8px;
  }

  .category-chip-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .category-chip-label {
    font-size: 12px;
  }
}

/* Desktop (768px+): restaurar tamanos originales */
@media (min-width: 768px) {
  .category-chip {
    padding: 20px 12px;
    gap: 10px;
  }

  .category-chip-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .category-chip-label {
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
  }
}

/* Reduced motion for categories */
@media (prefers-reduced-motion: reduce) {
  .category-chip {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .category-chip:hover {
    transform: none;
  }

  .category-chip:hover .category-chip-icon {
    transform: none;
  }
}

/* ============================================
   BENEFIT CARDS - Animated Icons & Hover
   ============================================ */

/* Icon animation keyframes */
@keyframes iconBolt {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes iconLocation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes iconCalendar {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

/* Benefit card enhancements */
.benefit-card-minimal {
  position: relative;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.benefit-card-minimal:hover {
  border-color: var(--google-blue);
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.15);
  transform: translateY(-4px);
}

/* Animated icons */
.benefit-icon-minimal.icon-animated i {
  display: inline-block;
}

.benefit-card-minimal:nth-child(1) .benefit-icon-minimal.icon-animated i {
  animation: iconBolt 2s ease-in-out infinite;
}

.benefit-card-minimal:nth-child(2) .benefit-icon-minimal.icon-animated i {
  animation: iconLocation 2.5s ease-in-out infinite;
}

.benefit-card-minimal:nth-child(3) .benefit-icon-minimal.icon-animated i {
  animation: iconCalendar 3s ease-in-out infinite;
}

/* Pause animations on hover for focus */
.benefit-card-minimal:hover .benefit-icon-minimal.icon-animated i {
  animation-play-state: paused;
}

/* ============================================
   PARTNERS / NOS RECOMIENDAN - Marquee Section
   ============================================ */

.partners-section {
  overflow: hidden;
}

.partners-marquee-wrapper {
  position: relative;
  padding: 20px 0;
}

/* Fade edges */
.partners-marquee-wrapper::before,
.partners-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.partners-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--gray-50) 0%, transparent 100%);
}

.partners-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--gray-50) 0%, transparent 100%);
}

.partners-marquee {
  overflow: hidden;
}

.partners-track {
  display: flex;
  gap: 48px;
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}

.partners-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.partner-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  transition: all var(--transition-base);
}

.partner-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-300);
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.partner-logo:hover .partner-text {
  color: var(--google-blue);
  filter: grayscale(0%);
  opacity: 1;
}

/* Estilos especiales para logos con identidad */
.partner-text.partner-tripadvisor:hover {
  color: #00af87;
}

.partner-text.partner-google:hover {
  color: var(--google-blue);
}

/* Responsive */
@media (max-width: 768px) {
  .partners-track {
    gap: 32px;
    animation-duration: 20s;
  }

  .partner-text {
    font-size: 15px;
  }

  .partner-logo {
    padding: 8px 16px;
  }

  .partners-marquee-wrapper::before,
  .partners-marquee-wrapper::after {
    width: 40px;
  }
}

/* Reduced motion for partners */
@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
  }

  .partners-marquee-wrapper::before,
  .partners-marquee-wrapper::after {
    display: none;
  }
}

/* ============================================
   CAFETERIA CARDS - Enhanced Hover Effects
   ============================================ */

.card-minimal {
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.card-minimal:hover {
  border-color: var(--google-blue);
  box-shadow: 0 12px 32px rgba(66, 133, 244, 0.12);
  transform: translateY(-2px);
}

/* Image zoom on hover */
.card-image-minimal img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-minimal:hover .card-image-minimal img {
  transform: scale(1.05);
}

/* ============================================
   REDUCED MOTION - Disable all new animations
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-floating-badge {
    animation: none;
  }

  .hero-floating-badge::before {
    animation: none;
  }

  .hero-btn-primary-minimal.btn-shimmer::after {
    animation: none;
    display: none;
  }

  .hero-scroll-indicator {
    animation: none;
  }

  .hero-scroll-indicator i {
    animation: none;
  }

  .benefit-card-minimal:nth-child(1) .benefit-icon-minimal.icon-animated i,
  .benefit-card-minimal:nth-child(2) .benefit-icon-minimal.icon-animated i,
  .benefit-card-minimal:nth-child(3) .benefit-icon-minimal.icon-animated i {
    animation: none;
  }

  .benefit-card-minimal:hover,
  .card-minimal:hover {
    transform: none;
  }

  .card-minimal:hover .card-image-minimal img {
    transform: none;
  }

  /* Mobile nav - desactivar animaciones */
  .mobile-nav-item:active {
    transform: none;
  }

  .mobile-nav-item.active::before {
    animation: none;
    width: 20px;
    opacity: 1;
  }
}

/* ============================================
   MOBILE BOTTOM NAV - Device-specific fixes
   ============================================ */

/* iOS Safari - fix para el área segura y bounce */
@supports (-webkit-touch-callout: none) {
  .mobile-bottom-nav {
    /* Posición más conservadora en iOS */
    bottom: calc(8px + env(safe-area-inset-bottom, 20px));
  }
}

/* Pantallas muy pequeñas (iPhone SE, etc.) */
@media (max-width: 374px) {
  .mobile-bottom-nav {
    width: calc(100% - 16px);
    padding: 4px 6px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px;
  }

  .mobile-nav-item {
    min-width: 48px;
    padding: 6px 8px;
    font-size: 9px;
  }

  .mobile-nav-item i {
    font-size: 20px;
  }
}

/* Landscape en móviles - ajuste de altura */
@media (max-width: 767px) and (orientation: landscape) {
  .mobile-bottom-nav {
    bottom: calc(8px + env(safe-area-inset-bottom, 4px));
    padding: 4px 8px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-item {
    min-height: 40px;
    padding: 6px 10px;
  }
}

/* Dark mode support (si el sistema lo tiene activado) */
@media (prefers-color-scheme: dark) {
  .mobile-bottom-nav {
    background: rgba(30, 41, 59, 0.96);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  }

  .mobile-nav-item {
    color: var(--gray-400);
  }

  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: #8ab4f8;
    background: rgba(138, 180, 248, 0.15);
  }

  .mobile-nav-item.active::before {
    background: #8ab4f8;
  }

  .mobile-nav-item.active span {
    color: #8ab4f8;
  }
}

/* ============================================
   FEATURED BARS CAROUSEL - Slider destacados
   ============================================ */

.featured-bars-section {
  /* Evitar que el carousel se salga por los lados en movil */
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.featured-bars-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
  /* Contenedor debe respetar los limites */
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Flechas de navegacion */
.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.carousel-arrow:hover {
  background: var(--google-blue);
  border-color: var(--google-blue);
  color: white;
  transform: scale(1.05);
}

.carousel-arrow:active {
  transform: scale(0.95);
}

.carousel-arrow i {
  font-size: 14px;
}

/* Ocultar flechas en movil */
@media (max-width: 768px) {
  .carousel-arrow {
    display: none;
  }

  .featured-bars-carousel-wrapper {
    padding: 0;
  }
}

/* Carousel container */
.featured-bars-carousel {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.featured-bars-track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 4px;
}

/* En movil: scroll horizontal con snap - RESPONSIVE FIX */
@media (max-width: 768px) {
  .featured-bars-section {
    /* Padding lateral en la seccion */
    padding-left: 16px;
    padding-right: 16px;
  }

  .featured-bars-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Sin margenes negativos ni padding interno */
    margin: 0;
    padding: 0;
    /* Contenido dentro de los limites */
    max-width: 100%;
    width: 100%;
  }

  .featured-bars-carousel::-webkit-scrollbar {
    display: none;
  }

  .featured-bars-track {
    transform: none !important;
    padding: 8px 0;
    gap: 16px;
    /* Padding final para la ultima card */
    padding-right: 16px;
  }

  .featured-bar-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    /* Ancho adaptativo en movil */
    width: calc(100vw - 64px);
    max-width: 280px;
    min-width: 240px;
  }
}

/* Cards de bares destacados */
.featured-bar-card {
  flex-shrink: 0;
  width: 280px;
  background: white;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}

.featured-bar-card:hover {
  border-color: var(--google-blue);
  box-shadow: 0 12px 32px rgba(66, 133, 244, 0.15);
  transform: translateY(-4px);
}

/* Imagen del bar */
.featured-bar-image {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.featured-bar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-bar-card:hover .featured-bar-image img {
  transform: scale(1.08);
}

/* Badge sobre la imagen */
.featured-bar-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: white;
  background: var(--google-green);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(52, 168, 83, 0.4);
}

.featured-bar-badge-hot {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  box-shadow: 0 2px 8px rgba(247, 147, 30, 0.4);
}

/* Contenido del card */
.featured-bar-content {
  padding: 16px;
}

.featured-bar-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 6px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-bar-cuisine {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 12px 0;
}

.featured-bar-cuisine i {
  color: var(--google-blue);
  font-size: 12px;
}

/* Rating */
.featured-bar-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.featured-bar-stars {
  display: flex;
  gap: 2px;
}

.featured-bar-stars i {
  font-size: 12px;
  color: #fbbc04;
}

.featured-bar-stars i.far {
  color: var(--gray-300);
}

.featured-bar-rating-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.featured-bar-reviews {
  font-size: 12px;
  color: var(--gray-400);
}

/* Dots indicadores */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  background: var(--gray-300);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-base);
  padding: 0;
}

.carousel-dot:hover {
  background: var(--google-blue-200);
}

.carousel-dot.active {
  background: var(--google-blue);
  width: 24px;
  border-radius: var(--radius-full);
}

/* Responsive - tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .featured-bar-card {
    width: 260px;
  }

  .featured-bars-track {
    gap: 20px;
  }
}

/* Responsive - desktop grande */
@media (min-width: 1200px) {
  .featured-bar-card {
    width: 300px;
  }

  .featured-bar-image {
    height: 180px;
  }

  .featured-bar-content {
    padding: 20px;
  }

  .featured-bar-name {
    font-size: 17px;
  }
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .featured-bars-track {
    transition: none;
  }

  .featured-bar-card:hover {
    transform: none;
  }

  .featured-bar-card:hover .featured-bar-image img {
    transform: none;
  }

  .carousel-arrow:hover {
    transform: none;
  }

  .carousel-dot.active {
    width: 8px;
  }
}

/* ============================================
   APP DOWNLOAD SECTION - Proximamente en tu movil
   ============================================ */

.app-download-section {
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 50%, #e8f0fe 100%);
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

.app-download-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(66, 133, 244, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.app-download-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.app-download-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.app-download-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 768px) {
  .app-download-content {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* Columna de texto */
.app-download-text {
  text-align: center;
}

@media (min-width: 768px) {
  .app-download-text {
    text-align: left;
  }
}

.app-download-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1a73e8;
  background: white;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
  margin-bottom: 20px;
}

.app-download-badge i {
  font-size: 14px;
}

.app-download-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #1a73e8;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.app-download-subtitle {
  font-size: 16px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 400px;
}

@media (min-width: 768px) {
  .app-download-subtitle {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .app-download-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Botones de App Store / Google Play */
.app-store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .app-store-buttons {
    justify-content: flex-start;
  }
}

.app-store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--gray-800);
  border: none;
  border-radius: var(--radius-lg);
  cursor: not-allowed;
  transition: all var(--transition-base);
}

.app-store-btn.disabled {
  opacity: 0.6;
  background: var(--gray-600);
}

.app-store-btn i {
  font-size: 28px;
  color: white;
}

.app-store-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.app-store-btn-small {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-store-btn-large {
  font-size: 16px;
  font-weight: 600;
  color: white;
  line-height: 1.2;
}

/* Formulario de notificacion */
.app-notify-form {
  background: white;
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 400px;
}

@media (min-width: 768px) {
  .app-notify-form {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .app-notify-form {
    margin-left: auto;
    margin-right: auto;
  }
}

.app-notify-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .app-notify-label {
    justify-content: flex-start;
  }
}

.app-notify-label i {
  color: #4285f4;
}

.app-notify-input-group {
  display: flex;
  gap: 8px;
}

.app-notify-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  outline: none;
}

.app-notify-input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.app-notify-input.error {
  border-color: #ea4335;
  box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.15);
}

.app-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: #4285f4;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.app-notify-btn:hover {
  background: #1a73e8;
}

.app-notify-btn.success {
  background: #34a853;
}

.app-notify-btn:disabled {
  cursor: not-allowed;
}

/* Mockup del telefono */
.app-mockup-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.app-mockup-phone {
  position: relative;
  width: 260px;
  height: 520px;
  background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 44px;
  padding: 12px;
  box-shadow:
    0 50px 100px rgba(0, 0, 0, 0.25),
    0 20px 40px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.app-mockup-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.app-mockup-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header de la app mockup */
.app-mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 16px 12px;
  background: #4285f4;
}

.app-mockup-logo {
  font-size: 16px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}

.app-mockup-header i {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* Contenido mockup */
.app-mockup-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.app-mockup-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.app-mockup-card-img {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
  border-radius: 10px;
  flex-shrink: 0;
}

.app-mockup-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.app-mockup-card-title {
  width: 80%;
  height: 12px;
  background: var(--gray-200);
  border-radius: 6px;
}

.app-mockup-card-subtitle {
  width: 60%;
  height: 10px;
  background: var(--gray-100);
  border-radius: 5px;
}

/* Nav inferior mockup */
.app-mockup-nav {
  display: flex;
  justify-content: space-around;
  padding: 12px 8px;
  background: white;
  border-top: 1px solid var(--gray-100);
}

.app-mockup-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--gray-400);
  font-size: 16px;
  transition: all var(--transition-fast);
}

.app-mockup-nav-item.active {
  background: var(--google-blue-50);
  color: #4285f4;
}

/* Elementos flotantes decorativos */
.app-mockup-float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.2);
  color: #4285f4;
  font-size: 18px;
  animation: floatBounce 4s ease-in-out infinite;
}

.app-mockup-float-1 {
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.app-mockup-float-2 {
  bottom: 25%;
  left: 5%;
  animation-delay: 1.3s;
}

.app-mockup-float-3 {
  top: 40%;
  right: 0;
  animation-delay: 2.6s;
}

@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Responsive para mockup */
@media (max-width: 767px) {
  .app-mockup-container {
    order: -1;
  }

  .app-mockup-phone {
    width: 220px;
    height: 440px;
    border-radius: 36px;
    padding: 10px;
  }

  .app-mockup-notch {
    width: 80px;
    height: 24px;
    top: 10px;
  }

  .app-mockup-screen {
    border-radius: 26px;
  }

  .app-mockup-header {
    padding: 32px 12px 10px;
  }

  .app-mockup-logo {
    font-size: 14px;
  }

  .app-mockup-content {
    padding: 10px;
    gap: 8px;
  }

  .app-mockup-card {
    padding: 8px;
    gap: 8px;
  }

  .app-mockup-card-img {
    width: 44px;
    height: 44px;
  }

  .app-mockup-float {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .app-mockup-float-1 {
    top: 5%;
    right: 5%;
  }

  .app-mockup-float-2 {
    bottom: 30%;
    left: 0;
  }

  .app-mockup-float-3 {
    top: 45%;
    right: -5%;
  }
}

/* Reduced motion para app download */
@media (prefers-reduced-motion: reduce) {
  .app-mockup-float {
    animation: none;
  }
}

/* ============================================
   CAFETERIA CARDS - Mobile Responsive Fix
   Added to fix cards overflowing on mobile
   ============================================ */

/* Mobile & Tablet: Stack vertically, prevent overflow */
@media (max-width: 1023px) {
  /* Card container - prevent horizontal overflow */
  .card-minimal {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Flex container inside card - force column on mobile */
  .card-minimal > .flex {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Image section - full width, fixed height */
  .card-minimal .card-image-minimal {
    width: 100% !important;
    height: 180px !important;
    border-radius: 24px 24px 0 0 !important;
    flex-shrink: 0 !important;
  }

  .card-minimal .card-image-minimal img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Content section - proper padding */
  .card-minimal > .flex > .flex-1 {
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Actions section - full width, top border */
  .card-minimal .card-actions-minimal {
    width: 100% !important;
    padding: 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: none !important;
  }

  /* Hide mini map on mobile */
  .card-minimal .mini-map-minimal {
    display: none !important;
  }

  /* Buttons container - wrap on mobile */
  .card-minimal .card-actions-minimal > .flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Buttons - proper sizing on mobile */
  .card-minimal .card-actions-minimal .btn-google-primary-sm,
  .card-minimal .card-actions-minimal .btn-google-outline-sm {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  /* Distance badge - adjust position */
  .card-minimal .badge-distancia-container {
    margin-top: 8px !important;
  }

  /* Info row - wrap on mobile */
  .card-minimal .flex.items-center.gap-4 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Extra small screens - stack buttons vertically */
@media (max-width: 400px) {
  .card-minimal .card-actions-minimal > .flex {
    flex-direction: column !important;
  }

  .card-minimal .card-actions-minimal .btn-google-primary-sm,
  .card-minimal .card-actions-minimal .btn-google-outline-sm {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* Cafeterias grid - proper containment on mobile */
@media (max-width: 767px) {
  #cafeterias-grid {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure cards don't overflow */
  #cafeterias-grid .card-minimal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Sections proper spacing */
  .main-content > section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================
   HERO RESPONSIVE - Mobile overflow fixes
   Added to fix content spilling on mobile
   ============================================ */

/* Global overflow control */
html,
body {
  overflow-x: hidden !important;
}

.main-container,
.main-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Hero container - overflow hidden */
.hero-minimal {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Hero inner container */
.hero-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Hero elements - prevent overflow */
.hero-badge-minimal,
.hero-title-minimal,
.hero-subtitle-minimal {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Hero buttons container */
.hero-buttons-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 340px !important;
  box-sizing: border-box !important;
}

/* Mobile specific hero styles */
@media (max-width: 640px) {
  .main-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-minimal {
    border-radius: var(--radius-xl) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-minimal > div,
  .hero-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    min-height: 280px !important;
  }

  .hero-badge-minimal {
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }

  .hero-badge-dot-minimal {
    flex-shrink: 0 !important;
  }

  .hero-title-minimal {
    font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .hero-subtitle-minimal {
    max-width: 100% !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Botones en stack vertical en movil */
  .hero-minimal .flex.flex-col.sm\:flex-row,
  .hero-buttons-container {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 240px !important;
    gap: 10px !important;
  }

  .hero-minimal .flex.flex-col.sm\:flex-row > a,
  .hero-buttons-container > a {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
  }

  /* Floating badge responsive */
  .hero-floating-badge {
    top: 12px !important;
    right: 12px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }

  .hero-floating-badge::before {
    width: 6px !important;
    height: 6px !important;
  }

  /* Scroll indicator responsive */
  .hero-scroll-indicator {
    bottom: 12px !important;
    font-size: 10px !important;
  }

  .hero-scroll-indicator i {
    font-size: 16px !important;
  }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 374px) {
  .hero-minimal > div,
  .hero-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero-title-minimal {
    font-size: 1.375rem !important;
  }

  .hero-subtitle-minimal {
    font-size: 0.8125rem !important;
  }

  .hero-buttons-container {
    max-width: 200px !important;
  }
}

/* ============================================
   MAP SECTION - RESPONSIVE FIX (Final Overrides)
   Arregla el overflow del mapa y panel en movil
   ============================================ */

/* Contenedor de la seccion del mapa - clase helper para el responsive */
.map-grid-section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Grid del mapa - padding lateral en movil */
.map-grid-section > .grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .map-grid-section > .grid {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Override map-section-minimal para responsive */
.map-section-minimal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.map-container-minimal {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .map-section-minimal {
    border-radius: var(--radius-xl);
  }
}

/* Override location-panel-minimal para responsive */
.location-panel-minimal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .location-panel-minimal {
    padding: 20px 16px;
  }
}

@media (max-width: 640px) {
  .location-panel-minimal {
    border-radius: var(--radius-xl);
    padding: 16px;
  }
}

/* Botones del panel de ubicacion - responsive con wrap */
.location-panel-minimal .flex.flex-col.gap-3 {
  width: 100%;
}

.location-panel-minimal .btn-google-primary,
.location-panel-minimal .btn-google-secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  box-sizing: border-box;
}

/* Moviles pequenos - botones mas compactos */
@media (max-width: 400px) {
  .location-panel-minimal .btn-google-primary,
  .location-panel-minimal .btn-google-secondary {
    padding: 12px 14px;
    font-size: 13px;
    gap: 6px;
  }

  .location-panel-minimal .btn-google-primary span,
  .location-panel-minimal .btn-google-secondary span {
    white-space: normal;
    word-break: break-word;
  }
}

/* ============================================
   APP DOWNLOAD SECTION - RESPONSIVE FIXES
   ============================================ */

/* Mobile: Stack layout, contenido centrado */
@media (max-width: 767px) {
  .app-download-section {
    padding: 40px 16px !important;
  }

  .app-download-container {
    width: 100% !important;
    overflow: hidden !important;
  }

  .app-download-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .app-download-text {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .app-download-title {
    font-size: 1.5rem !important;
  }

  .app-download-subtitle {
    font-size: 14px !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  /* Botones App Store - responsive wrap */
  .app-store-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .app-store-btn {
    flex: 1 1 45% !important;
    min-width: 140px !important;
    max-width: 160px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .app-store-btn i {
    font-size: 20px !important;
  }

  .app-store-btn-small {
    font-size: 8px !important;
  }

  .app-store-btn-large {
    font-size: 13px !important;
  }

  /* Formulario de email responsive */
  .app-notify-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .app-notify-input-group {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .app-notify-input {
    width: 100% !important;
  }

  .app-notify-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Mockup del telefono - mas pequeno en mobile */
  .app-mockup-container {
    order: -1 !important;
    padding: 10px !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  .app-mockup-phone {
    width: 200px !important;
    height: 400px !important;
    border-radius: 32px !important;
    padding: 8px !important;
  }

  .app-mockup-notch {
    width: 70px !important;
    height: 20px !important;
    top: 8px !important;
  }

  .app-mockup-screen {
    border-radius: 24px !important;
  }

  .app-mockup-header {
    padding: 28px 10px 8px !important;
  }

  .app-mockup-logo {
    font-size: 12px !important;
  }

  .app-mockup-content {
    padding: 8px !important;
    gap: 6px !important;
  }

  .app-mockup-card {
    padding: 6px !important;
    gap: 6px !important;
  }

  .app-mockup-card-img {
    width: 36px !important;
    height: 36px !important;
  }

  .app-mockup-nav {
    padding: 8px 6px !important;
  }

  .app-mockup-nav-item {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  /* Elementos flotantes - ocultar en movil pequeno */
  .app-mockup-float {
    display: none !important;
  }
}

/* Pantallas muy pequenas (menos de 360px) */
@media (max-width: 359px) {
  .app-download-section {
    padding: 32px 12px !important;
  }

  .app-store-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .app-store-btn {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    justify-content: center !important;
  }

  .app-mockup-container {
    max-width: 240px !important;
  }

  .app-mockup-phone {
    width: 180px !important;
    height: 360px !important;
  }
}