/*
===================================
HNROOMS THEME STYLES
===================================
Converted from Vercel v0 Next.js/React design
*/

/*
===================================
CSS VARIABLES
===================================
NOTA: Las variables CSS principales se generan dinámicamente desde el Customizer.
      Ver: inc/customizer/customizer.php -> hnrooms_customizer_css()

      Este archivo solo contiene estilos base que no cambian con el Customizer.
===================================
*/

/*
===================================
GLOBAL STYLES
===================================
*/

/* Body - Aplicar fondo y texto correcto según modo */
body {
  background-color: var(--hnr-background);
  color: var(--hnr-foreground);
  font-family: var(--hnr-font-body);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Asegurar que todo el contenido respete el fondo */
#page,
.site-content {
  background-color: var(--hnr-background);
  color: var(--hnr-foreground);
}

/* Texto muted (secundario) */
.text-muted,
.muted {
  color: var(--hnr-muted);
}

/* Secciones con fondo de color - siempre texto blanco */
.bg-primary,
[style*="background: var(--hnr-primary)"],
[style*="background-color: #004D40"],
.has-primary-background {
  color: #ffffff !important;
}

.bg-primary *,
.has-primary-background * {
  color: #ffffff;
}

.bg-secondary,
[style*="background: var(--hnr-secondary)"],
[style*="background-color: #00a86b"],
.has-secondary-background {
  color: #ffffff !important;
}

.bg-secondary *,
.has-secondary-background * {
  color: #ffffff;
}

/* Asegurar contraste en secciones oscuras */
.bg-dark,
.dark-section {
  background-color: #0f0f0f;
  color: #ffffff;
}

/*
===================================
ELEMENTOR - DARK/LIGHT MODE
===================================
*/

/* Stats Card - Adaptativo según modo */
#hnr-stats-card {
  background-color: var(--hnr-card) !important;
  border: 1px solid var(--hnr-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode #hnr-stats-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/*
IMPORTANTE: NO forzar colores en widgets de Elementor
Los colores establecidos en Elementor deben tener prioridad sobre el Customizer.
Si el usuario no establece un color en Elementor, heredará del body.
*/

/*
COMENTADO: Estas reglas sobrescribían los colores de Elementor
.elementor-widget-heading .elementor-heading-title {
  color: var(--hnr-foreground);
}

.elementor-widget-text-editor {
  color: var(--hnr-foreground);
}
*/

/* Labels y texto secundario */
.elementor-widget-text-editor .text-muted,
.elementor-widget-text-editor [style*="opacity:0.7"],
.elementor-widget-text-editor [style*="opacity: 0.7"] {
  opacity: 0.7;
}

/*
===================================
HEADER & NAVIGATION
===================================
*/

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: transparent;
}

/* Header - Texto adaptativo desde Customizer */
.site-header {
  color: var(--hnr-header-text);
}

.site-header .nav-menu a {
  color: var(--hnr-header-text);
}

.site-header .nav-menu a:hover {
  color: var(--hnr-secondary);
}

/* Mobile menu también usa la variable del Customizer */
.mobile-nav-menu a {
  color: var(--hnr-header-text);
}

.mobile-nav-menu a:hover {
  color: var(--hnr-secondary);
}

/* Header con scroll - Dark Mode */
.site-header.scrolled {
  background-color: rgba(26, 26, 26, 0.95);  /* Fondo oscuro translúcido */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hnr-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Header con scroll - Light Mode */
body.light-mode .site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--hnr-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

/* Logo/Branding */
/* Custom Logo (cuando el usuario sube su logo) */
.custom-logo-link {
  display: inline-block;
  line-height: 0;
}

.custom-logo {
  max-width: 150px;  /* Default: 150px - Editable desde Customizer */
  height: auto;
  /* display se controla por .logo-dark/.logo-light */
}

/* Default Theme Logo */
.default-logo {
  height: 40px;
  width: auto;
  display: block;
}

/* Logos Dark/Light - Mostrar/Ocultar según modo */
/* Modo Oscuro (default) - Mostrar logo dark, ocultar logo light */
.site-header .logo-dark,
.site-footer .logo-dark {
  display: block !important;
}

.site-header .logo-light,
.site-footer .logo-light {
  display: none !important;
}

/* Modo Claro - Ocultar logo dark, mostrar logo light */
body.light-mode .site-header .logo-dark,
body.light-mode .site-footer .logo-dark {
  display: none !important;
}

body.light-mode .site-header .logo-light,
body.light-mode .site-footer .logo-light {
  display: block !important;
}

.site-branding .brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 0;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: var(--hnr-primary);
}

.logo-text {
  color: var(--hnr-primary-foreground);
  font-weight: 700;
  font-size: 0.875rem;
  font-family: var(--hnr-font-sans);
}

.brand-name {
  color: var(--hnr-foreground);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  font-family: var(--hnr-font-sans);
}

/* Navigation Menu */
.nav-menu-wrapper {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  /* Color controlado desde Customizer: var(--hnr-header-text) */
  /* font-size y font-weight controlados desde Customizer */
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  /* Hover usa color secundario del theme */
}

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Theme Toggle Button */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  border: none;
  background: var(--hnr-secondary);
  color: var(--hnr-muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--hnr-primary);
  color: var(--hnr-primary-foreground);
}

.theme-toggle .sun-icon {
  display: block;
}

.theme-toggle .moon-icon {
  display: none;
}

body.light-mode .theme-toggle .sun-icon {
  display: none;
}

body.light-mode .theme-toggle .moon-icon {
  display: block;
}

/* Primary Button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  /* font-family, font-size, font-weight, color, background, border-radius controlados desde Customizer */
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

/* Mobile Menu */
.desktop-menu {
  display: flex;
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.hamburger {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--hnr-foreground);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger .close-icon {
  display: none;
}

.hamburger.active .menu-icon {
  display: none;
}

.hamburger.active .close-icon {
  display: block;
}

.mobile-menu {
  display: none;
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hnr-border);
  padding: 0 1.5rem 1.5rem;
}

body.light-mode .mobile-menu {
  background: rgba(255, 255, 255, 0.95);
}

.mobile-menu.active {
  display: block;
}

.mobile-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu a {
  /* Color controlado desde Customizer: var(--hnr-header-text) */
  /* font-size y font-weight controlados desde Customizer */
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.mobile-nav-menu a:hover {
  /* Hover usa color secundario del theme */
}

.mobile-cta {
  margin-top: 0.5rem;
  width: 100%;
}

@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }
}

/*
===================================
FOOTER
===================================
*/

.site-footer {
  border-top: 1px solid var(--hnr-border);
  background: var(--hnr-surface);
  padding: 4rem 0 0;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .footer-brand {
    grid-column: span 1;
  }
}

.footer-brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-bottom: 1rem;
}

.footer-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: var(--hnr-primary);
}

.footer-logo-text {
  color: var(--hnr-primary-foreground);
  font-weight: 700;
  font-size: 0.875rem;
}

.footer-brand-name {
  color: var(--hnr-foreground);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.footer-description {
  color: var(--hnr-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 320px;
  margin: 1rem 0;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: var(--hnr-card);
  border: 1px solid var(--hnr-border);
  color: var(--hnr-foreground);
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: var(--hnr-card-hover);
  color: var(--hnr-secondary);
  border-color: var(--hnr-secondary);
}

.footer-column {
  grid-column: span 1;
}

.footer-title {
  color: var(--hnr-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: var(--hnr-font-sans);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: var(--hnr-muted);
  /* font-size controlado desde Customizer */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--hnr-foreground);
}

.footer-bottom {
  border-top: 1px solid var(--hnr-border);
  margin-top: 2rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
  }
}

.footer-copyright,
.footer-tagline {
  color: var(--hnr-muted);
  font-size: 0.75rem;
  margin: 0;
  font-weight: 400;
}

.footer-tagline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-tagline::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--hnr-secondary);
  display: inline-block;
}

@media (max-width: 639px) {
  .footer-tagline::before {
    display: none;
  }
}

/* Footer 3 Columnas */
.footer-grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .footer-grid-3col {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
  }
}

.footer-col-about {
  grid-column: span 1;
}

.footer-col-contact,
.footer-col-links {
  grid-column: span 1;
}

/* Footer Contact List */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--hnr-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.footer-contact-item svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--hnr-secondary);
}

.footer-contact-item a {
  color: var(--hnr-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-item a:hover {
  color: var(--hnr-foreground);
}

/*
===================================
LAYOUT
===================================
*/

.site-content {
  /* Landing Page: Sin padding-top para que el Hero empiece desde arriba */
  min-height: 100vh;
  overflow-x: hidden;
}

.site-main {
  background: var(--hnr-background);
}

.fullwidth-template {
  padding: 0;
}

.fullwidth-template .entry-content {
  max-width: none;
}

/*
===================================
ELEMENTOR COMPATIBILITY
===================================
*/

/* Remove default Elementor section padding for full-width sections */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}

/* Ensure Elementor sections respect our design system */
/* COMENTADO: Dejar que Elementor maneje sus propias fuentes
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--hnr-font-sans);
}

.elementor-widget-text-editor {
  font-family: var(--hnr-font-body);
  color: var(--hnr-foreground);
}
*/

/*
  IMÁGENES DE ELEMENTOR - Control Total desde Editor
  Permitir que Elementor maneje width, max-width, height completamente
  Según documentación de Elementor 3.35.9, los controles nativos deben tener prioridad
*/
.elementor-widget-image img,
.elementor-widget-image picture,
.elementor-widget-gallery img {
  /* Resetear restricciones globales del theme */
  max-width: none !important;
  width: auto;
  height: auto;
}

/* Permitir que los estilos inline de Elementor tengan prioridad absoluta */
.elementor-widget-image .elementor-widget-container img[style*="width"],
.elementor-widget-image .elementor-widget-container img[style*="max-width"],
.elementor-widget-image .elementor-widget-container img[style*="height"] {
  /* Los estilos inline de Elementor ya tienen suficiente especificidad */
  display: block;
}

/* Elementor button styling */
.elementor-button {
  font-family: var(--hnr-font-sans);
  border-radius: var(--hnr-radius-lg);
  transition: all 0.3s ease;
}

.elementor-button.elementor-button-primary {
  background: var(--hnr-primary);
  color: var(--hnr-primary-foreground);
}

.elementor-button.elementor-button-primary:hover {
  background: var(--hnr-primary-light);
  transform: scale(1.05);
}

/*
===================================
UTILITY CLASSES FOR ELEMENTOR
===================================
*/

/* These classes can be used in Elementor widgets */

.hnr-card {
  background: var(--hnr-card);
  border: 1px solid var(--hnr-border);
  border-radius: var(--hnr-radius-xl);
  padding: 2rem;
  transition: all 0.3s ease;
}

.hnr-card:hover {
  border-color: rgba(0, 168, 107, 0.4);
  background: var(--hnr-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

body.light-mode .hnr-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.hnr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background: rgba(0, 168, 107, 0.1);
  border: 1px solid rgba(0, 168, 107, 0.2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--hnr-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hnr-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.2;
  animation: glow-pulse 3s ease-in-out infinite;
}

.hnr-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hnr-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.hnr-heading-xl {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hnr-foreground);
  font-family: var(--hnr-font-sans);
}

.hnr-text-primary {
  color: var(--hnr-primary);
}

.hnr-text-muted {
  color: var(--hnr-muted-foreground);
}

/*
===================================
ANIMATION CLASSES
===================================
*/

.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease-out;
}

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

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.7s ease-out;
}

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

.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.7s ease-out;
}

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

/*
===================================
PHONE MOCKUP STYLES
===================================
*/

.phone-mockup {
  position: relative;
  width: 280px;
  height: 570px;
  border-radius: 3rem;
  border: 8px solid #2a2a2a;
  background: #1a1a1a;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.phone-mockup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 24px;
  background: #2a2a2a;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: 10;
}

@media (min-width: 640px) {
  .phone-mockup {
    width: 320px;
    height: 650px;
  }
}

/*
===================================
STORE BUTTONS
===================================
*/

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.store-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: var(--hnr-card);
  border: 1px solid var(--hnr-border);
  border-radius: var(--hnr-radius-lg);
  color: var(--hnr-foreground);
  text-decoration: none;
  font-family: var(--hnr-font-sans);
  transition: all 0.3s ease;
}

.store-button:hover {
  border-color: var(--hnr-secondary);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 168, 107, 0.1);
}

.store-button-icon {
  width: 24px;
  height: 24px;
}

.store-button-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.store-button-label {
  font-size: 0.625rem;
  color: var(--hnr-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.store-button-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hnr-foreground);
}

/*
===================================
RESPONSIVE
===================================
*/

@media (max-width: 1024px) {
  .nav-container {
    padding: 0.875rem 1rem;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    gap: 2rem;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .hnr-heading-xl {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .store-buttons {
    flex-direction: column;
  }

  .store-button {
    width: 100%;
    justify-content: center;
  }
}

/*
===================================
COMPREHENSIVE RESPONSIVE DESIGN
===================================
*/

/* Tablet and below (max-width: 1024px) */
@media (max-width: 1024px) {
  /* Hero Grid - Stack on tablets */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .hero-content h1 {
    font-size: 48px !important;
  }

  /* Features Grid - 2 columns on tablets */
  section#features > .container > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stats Grid - 2 columns on tablets */
  section#stats .container > div > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Get the App title */
  section#get-the-app h2 {
    font-size: 48px !important;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  /* Hero Section */
  section#hero {
    padding: 100px 16px 60px !important;
    min-height: auto !important;
  }

  .hero-content h1 {
    font-size: 36px !important;
    margin-bottom: 24px !important;
  }

  .hero-content p {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* Hide phone mockup on mobile */
  .phone-mockup {
    display: none !important;
  }

  /* Features - Single column */
  section#features {
    padding: 64px 16px !important;
  }

  section#features > .container > div:last-child {
    grid-template-columns: 1fr !important;
  }

  section#features h2 {
    font-size: 32px !important;
  }

  /* Stats - Single column */
  section#stats {
    padding: 48px 16px !important;
  }

  section#stats .container > div > div {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  section#stats .container > div > div > div p:first-child {
    font-size: 32px !important;
  }

  /* App Preview - Adjust scroll */
  section#app-preview {
    padding: 64px 0 !important;
  }

  section#app-preview h2 {
    font-size: 32px !important;
  }

  /* Get the App */
  section#get-the-app {
    padding: 80px 16px !important;
  }

  section#get-the-app h2 {
    font-size: 36px !important;
  }

  section#get-the-app p {
    font-size: 16px !important;
  }

  /* Store buttons - Stack vertically on mobile */
  .btn-app-store-large,
  .btn-google-play-large {
    padding: 14px 28px !important;
  }

  .btn-app-store-large svg,
  .btn-google-play-large svg {
    width: 32px !important;
    height: 32px !important;
  }

  .btn-app-store-large div p:last-child,
  .btn-google-play-large div p:last-child {
    font-size: 18px !important;
  }

  /* For Hosts */
  section#for-hosts {
    padding: 80px 16px !important;
  }

  section#for-hosts h2 {
    font-size: 36px !important;
  }

  section#for-hosts p {
    font-size: 16px !important;
  }

  /* Contact */
  section#contact {
    padding: 64px 16px !important;
  }

  section#contact h2 {
    font-size: 32px !important;
  }

  section#contact > .container > div {
    padding: 32px 24px !important;
  }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
  /* Hero */
  .hero-content h1 {
    font-size: 28px !important;
  }

  .hero-content p {
    font-size: 14px !important;
  }

  /* Store buttons - Full width on small screens */
  .store-buttons {
    width: 100%;
  }

  .btn-app-store,
  .btn-google-play {
    width: 100%;
    justify-content: center;
  }

  section#get-the-app > .container > div:last-child {
    flex-direction: column;
    width: 100%;
  }

  .btn-app-store-large,
  .btn-google-play-large {
    width: 100%;
    justify-content: center;
  }

  /* Features cards */
  .hnr-card {
    padding: 24px !important;
  }

  /* Section titles */
  section#features h2,
  section#contact h2,
  section#app-preview h2 {
    font-size: 28px !important;
  }

  section#get-the-app h2 {
    font-size: 32px !important;
  }

  section#for-hosts h2 {
    font-size: 32px !important;
  }

  /* Badge */
  .hero-content > div:first-child {
    font-size: 10px !important;
  }

  .hero-content > div:first-child span:last-child {
    font-size: 10px !important;
  }
}

/*
===================================
HOVER EFFECTS (Desktop only)
===================================
*/
@media (hover: hover) and (pointer: fine) {
  /* Store button hover effects */
  .btn-app-store:hover,
  .btn-google-play:hover,
  .btn-app-store-large:hover,
  .btn-google-play-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  }

  /* Card hover effects */
  .hnr-card:hover {
    transform: translateY(-4px);
  }
}

/*
===================================
SCROLLBAR STYLING
===================================
*/

/* Hide scrollbar for horizontal scroll sections but keep functionality */
section#app-preview > div:last-child::-webkit-scrollbar {
  height: 8px;
}

section#app-preview > div:last-child::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

section#app-preview > div:last-child::-webkit-scrollbar-thumb {
  background: rgba(0, 168, 107, 0.3);
  border-radius: 10px;
}

section#app-preview > div:last-child::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 168, 107, 0.5);
}

/*
===================================
APP STORE BUTTONS - DARK/LIGHT MODE FIX
===================================
*/

/* Modo Oscuro: Botones con fondo más claro para mejor contraste */
.store-button,
.btn-app-store,
.btn-google-play,
.btn-app-store-large,
.btn-google-play-large {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.store-button:hover,
.btn-app-store:hover,
.btn-google-play:hover,
.btn-app-store-large:hover,
.btn-google-play-large:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hnr-secondary);
  box-shadow: 0 10px 20px rgba(0, 168, 107, 0.2);
}

/* Asegurar que el texto sea visible en modo oscuro */
.store-button-label,
.store-button-name {
  color: #f5f5f5 !important;
}

/* Iconos SVG - Asegurar visibilidad */
.store-button svg,
.btn-app-store svg,
.btn-google-play svg,
.btn-app-store-large svg,
.btn-google-play-large svg {
  fill: #f5f5f5;
  opacity: 0.9;
}

/* Modo Claro: Botones con fondo blanco y borde sólido */
body.light-mode .store-button,
body.light-mode .btn-app-store,
body.light-mode .btn-google-play,
body.light-mode .btn-app-store-large,
body.light-mode .btn-google-play-large {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  color: #0f0f0f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.light-mode .store-button:hover,
body.light-mode .btn-app-store:hover,
body.light-mode .btn-google-play:hover,
body.light-mode .btn-app-store-large:hover,
body.light-mode .btn-google-play-large:hover {
  background: #ffffff;
  border-color: var(--hnr-secondary);
  box-shadow: 0 8px 16px rgba(0, 168, 107, 0.15);
}

/* Texto en modo claro */
body.light-mode .store-button-label,
body.light-mode .store-button-name {
  color: #0f0f0f !important;
}

/* Iconos SVG en modo claro */
body.light-mode .store-button svg,
body.light-mode .btn-app-store svg,
body.light-mode .btn-google-play svg,
body.light-mode .btn-app-store-large svg,
body.light-mode .btn-google-play-large svg {
  fill: #0f0f0f;
  opacity: 0.85;
}

/*
===================================
BOTONES DE DESCARGA EN SECCIONES CON FONDO DE COLOR
===================================
*/

/* Botones en secciones con fondo primario/secundario (verde oscuro/claro) */
.bg-primary .store-button,
.bg-primary .btn-app-store,
.bg-primary .btn-google-play,
.bg-primary .btn-app-store-large,
.bg-primary .btn-google-play-large,
.bg-secondary .store-button,
.bg-secondary .btn-app-store,
.bg-secondary .btn-google-play,
.bg-secondary .btn-app-store-large,
.bg-secondary .btn-google-play-large,
section[style*="background:#004D40"] .store-button,
section[style*="background:#004D40"] .btn-app-store,
section[style*="background:#004D40"] .btn-app-store-large,
section[style*="background:#00a86b"] .store-button,
section[style*="background:#00a86b"] .btn-app-store,
section[style*="background:#00a86b"] .btn-app-store-large {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.bg-primary .store-button:hover,
.bg-primary .btn-app-store:hover,
.bg-primary .btn-google-play:hover,
.bg-primary .btn-app-store-large:hover,
.bg-primary .btn-google-play-large:hover,
.bg-secondary .store-button:hover,
.bg-secondary .btn-app-store:hover,
.bg-secondary .btn-google-play:hover,
.bg-secondary .btn-app-store-large:hover,
.bg-secondary .btn-google-play-large:hover,
section[style*="background:#004D40"] .store-button:hover,
section[style*="background:#004D40"] .btn-app-store:hover,
section[style*="background:#004D40"] .btn-app-store-large:hover,
section[style*="background:#00a86b"] .store-button:hover,
section[style*="background:#00a86b"] .btn-app-store:hover,
section[style*="background:#00a86b"] .btn-app-store-large:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Texto de botones en secciones con fondo de color */
.bg-primary .store-button-label,
.bg-primary .store-button-name,
.bg-secondary .store-button-label,
.bg-secondary .store-button-name,
section[style*="background:#004D40"] .store-button-label,
section[style*="background:#004D40"] .store-button-name,
section[style*="background:#00a86b"] .store-button-label,
section[style*="background:#00a86b"] .store-button-name {
  color: #ffffff !important;
}

/* SVG en botones dentro de secciones con fondo de color */
.bg-primary .store-button svg,
.bg-primary .btn-app-store svg,
.bg-primary .btn-google-play svg,
.bg-secondary .store-button svg,
.bg-secondary .btn-app-store svg,
.bg-secondary .btn-google-play svg,
section[style*="background:#004D40"] svg,
section[style*="background:#00a86b"] svg {
  fill: #ffffff !important;
  opacity: 1;
}