/* ===================================
   EDEN COLIVING - BASE RESPONSIVE CSS
   =================================== */

/* CSS Variables para consistencia */
:root {
  /* Colores de marca */
  --eden-blue: #2D66C7;
  --eden-green: #8ADD6E;
  --eden-light-green: #9AE481;
  --eden-accent-green: #C7F4B0;
  
  /* Breakpoints */
  --mobile-max: 767px;
  --tablet-min: 768px;
  --tablet-max: 1023px;
  --desktop-min: 1024px;
  --desktop-large: 1440px;
  
  /* Espaciados consistentes */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  
  /* Font Families */
  --font-primary: 'Host Grotesk', system-ui, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Typography - Mobile First */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;       /* Aligned with Tailwind .text-xl */
  --font-size-2xl: 24px;      /* Heading medium */
  --font-size-3xl: 30px;      /* Heading large */
  --font-size-4xl: 36px;      /* Heading extra large */
  --font-size-hero: 48px;     /* Hero text mobile */
  --font-size-h1-content: 35px; /* H1 para contenido general */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* Desktop Font Sizes */
  --font-size-xl-desktop: 24px;
  --font-size-2xl-desktop: 32px;
  --font-size-3xl-desktop: 36px;
  --font-size-4xl-desktop: 48px;
  --font-size-hero-desktop: 64px;
  --font-size-h1-content-desktop: 42px; /* H1 contenido desktop */
}

/* ===================================
   RESPONSIVE TYPOGRAPHY OVERRIDES
   =================================== */

@media (min-width: 768px) {
  :root {
    --font-size-xl: var(--font-size-xl-desktop);
    --font-size-2xl: var(--font-size-2xl-desktop);
    --font-size-3xl: var(--font-size-3xl-desktop);
    --font-size-4xl: var(--font-size-4xl-desktop);
    --font-size-hero: var(--font-size-hero-desktop);
    --font-size-h1-content: var(--font-size-h1-content-desktop);
  }
}

/* ===================================
   TYPOGRAPHY BASE CLASSES
   =================================== */

/* Font Family Classes */
.text-primary { 
  font-family: var(--font-primary); 
}

.text-mono { 
  font-family: var(--font-mono); 
}

/* Font Weight Classes */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* Line Height Classes */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* ===================================
   SEMANTIC TYPOGRAPHY CLASSES
   =================================== */

.text-hero {
  font-family: var(--font-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-heading-1 {
  font-family: var(--font-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-heading-2 {
  font-family: var(--font-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-heading-3 {
  font-family: var(--font-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-heading-4 {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-body-large {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-body-small {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-caption {
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* ===================================
   SPECIFIC HEADING CLASSES
   =================================== */

/* H1 para contenido general (más pequeño) */
.h1-content {
  font-family: var(--font-primary);
  font-size: var(--font-size-h1-content);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* H1 para hero/giro (tamaño original grande) */
.h1-hero {
  font-family: var(--font-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* H1 por defecto (tamaño de contenido) */
h1:not(.h1-hero):not(.text-hero) {
  font-family: var(--font-primary);
  font-size: var(--font-size-h1-content);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* ===================================
   HERO BANNER MOBILE OPTIMIZATIONS
   =================================== */

/* ===================================
   HERO BANNER RESPONSIVE OPTIMIZATIONS  
   =================================== */

/* Móvil */
@media (max-width: 767px) {
  #hero-banner {
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 6rem !important;
  }
  
  .hero-content-responsive {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: 100% !important;
    padding: 0 1.5rem !important;
    transform: none !important;
    margin-bottom: 2rem !important;
  }
  
  .hero-title-mobile {
    font-size: 2.25rem !important; /* 36px en lugar de 48px */
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-subtitle-mobile {
    font-size: 1.125rem !important; /* 18px */
    margin-bottom: 1rem !important;
  }
  
  .hero-cta-mobile {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin: 2rem 0 1.5rem 0 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  
  .hero-scroll-responsive {
    position: fixed !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
}

/* Tablet y Desktop */
@media (min-width: 768px) {
  #hero-banner {
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 6rem !important;
  }
  
  .hero-content-responsive {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: 42rem !important; /* Más ancho en desktop */
    padding: 0 2rem !important;
    transform: none !important;
    margin-bottom: 3rem !important;
  }
  
  .hero-cta-mobile {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin: 2rem 0 1.5rem 0 !important;
    width: auto !important;
    text-align: left !important;
  }
  
  .hero-scroll-responsive {
    position: fixed !important;
    bottom: 2rem !important;
    left: 4rem !important; /* Alineado a la izquierda */
    transform: none !important;
    text-align: left !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
}

/* H1 de contenido forzado a 35px en móvil */
@media (max-width: 767px) {
  h1:not(.h1-hero):not(.text-hero) {
    font-size: 35px !important;
  }
}

/* ===================================
   SECTION SPACING MOBILE OPTIMIZATIONS
   =================================== */

@media (max-width: 767px) {
  .about-section-mobile {
    padding-top: 6rem !important; /* Mantener py-24 top */
    padding-bottom: 3rem !important; /* Reducir bottom padding */
  }
  
  .three-steps-mobile {
    padding-bottom: 3rem !important; /* Reducir padding bottom */
  }
  
  .step-item-mobile {
    flex-direction: column !important;
    text-align: center !important;
    padding: 2rem 1.5rem !important;
  }
  
  .step-number-mobile {
    width: 4rem !important; /* 64px */
    height: 4rem !important; /* 64px */
    margin-bottom: 1rem !important;
    font-size: 1.5rem !important; /* 24px en lugar de text-5xl */
  }
  
  .step-content-mobile {
    padding: 0 !important;
  }
  
  .step-title-mobile {
    font-size: 1.25rem !important; /* 20px en lugar de 32px */
    margin-bottom: 0.5rem !important;
  }
  
  .step-description-mobile {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }
  
  .locations-section-mobile {
    padding-bottom: 3rem !important; /* Reducir padding bottom */
  }
  
  /* Passion Section Slider - Solo móvil */
  .passion-desktop {
    display: none !important;
  }
  
  .passion-mobile-slider {
    display: block !important;
  }
  
  .passion-slider-container {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
  }
  
  .passion-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .passion-slide {
    min-width: 100%;
    height: 300px;
  }
  
  .passion-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .passion-nav-bottom {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
  }
  
  
  .passion-dots {
    display: flex;
    gap: 0.5rem;
  }
  
  .passion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .passion-dot.active {
    background: white;
    transform: scale(1.3);
  }
}

/* Desktop - Mantener grid original */
@media (min-width: 768px) {
  .passion-desktop {
    display: grid !important;
  }
  
  .passion-mobile-slider {
    display: none !important;
  }
}

/* ===================================
   TESTIMONIALS MOBILE OPTIMIZATIONS
   =================================== */

@media (max-width: 767px) {
  /* Reposicionar flechas a los bordes laterales en móvil */
  .custom-swiper-button-prev {
    left: -15px !important; /* -15 píxeles hacia la izquierda */
    background: transparent !important;
    color: white !important;
    box-shadow: none !important;
  }
  
  .custom-swiper-button-next {
    right: -10px !important; /* -10 píxeles hacia la derecha */
    background: transparent !important;
    color: white !important;
    box-shadow: none !important;
  }
  
  /* Centrar botón de contacto en móvil */
  .testimonials-cta-mobile {
    text-align: center !important;
  }
  
  .testimonials-cta-mobile a {
    display: inline-block !important;
  }
}

/* ===================================
   UTILITY CLASSES - RESPONSIVE
   =================================== */

/* Container base responsive */
.container-responsive {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: 1200px;
    padding: 0 var(--spacing-lg);
  }
}

/* Grid systems responsivos */
.grid-responsive {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-responsive {
    gap: var(--spacing-lg);
  }
  
  .grid-responsive.grid-2-cols {
    grid-template-columns: 1fr 1fr;
  }
  
  .grid-responsive.grid-3-cols {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .grid-responsive.grid-custom-experiences {
    grid-template-columns: 2fr 2fr 1fr;
  }
}

/* Flexbox utilities */
.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .flex-responsive {
    flex-direction: row;
    align-items: center;
  }
}

/* Posicionamiento responsivo */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.relative-container {
  position: relative;
  overflow: hidden;
}

/* Dimensiones responsivas */
.full-height {
  height: 100vh;
}

.min-height-section {
  min-height: 80vh;
}

@media (max-width: 767px) {
  .full-height {
    height: auto;
    min-height: 70vh;
  }
  
  .min-height-section {
    min-height: auto;
  }
}

/* Colores de marca */
.bg-eden-blue { background-color: var(--eden-blue); }
.bg-eden-green { background-color: var(--eden-green); }
.bg-eden-light-green { background-color: var(--eden-light-green); }
.text-eden-blue { color: var(--eden-blue); }
.text-eden-green { color: var(--eden-green); }
.border-eden-green { border-color: var(--eden-green); }

/* Gradientes responsivos */
.bg-radial-green {
  background: radial-gradient(50% 50% at 50% 50%, var(--eden-accent-green) 0%, #FFFFFF 100%);
}

/* Typography responsive */
.text-responsive {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.text-responsive.text-hero {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .text-responsive.text-hero {
    font-size: var(--font-size-hero);
    line-height: 1.1;
  }
}

/* Spacing utilities */
.py-section {
  padding: var(--spacing-xl) 0;
}

@media (min-width: 768px) {
  .py-section {
    padding: var(--spacing-xxl) 0;
  }
}

/* Visibility utilities */
.hidden-mobile {
  display: none;
}

.hidden-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hidden-mobile {
    display: block;
  }
  
  .hidden-desktop {
    display: none;
  }
}

/* Z-index system */
.z-background { z-index: 0; }
.z-content { z-index: 10; }
.z-overlay { z-index: 20; }
.z-modal { z-index: 30; }
.z-tooltip { z-index: 40; }