/*
============================================
ESTILOS: APP COOINDEGABO
============================================
Descripcion: Estilos para la seccion de promocion de la App
Autor: Desarrollo Web Cooindegabo

INDICE:
1. Variables CSS (colores, espaciados, fuentes)
2. Reset y estilos base
3. Hero Banner con parallax
4. Seccion de contenido principal
5. Imagen de la app
6. Contenido informativo
7. Lista de beneficios
8. Call to Action y botones de tiendas
9. Animaciones
10. Media Queries (responsivo)

COMO MODIFICAR:
- Cambia los colores en la seccion :root
- Ajusta espaciados modificando las variables --spacing-*
- Para invertir el layout, usa la clase .content-reverse
============================================
*/

/* ============================================
   1. VARIABLES CSS
   ============================================
   Modifica estos valores para cambiar colores y espaciados
   en toda la seccion de forma consistente
============================================ */
:root {
  /* COLORES PRINCIPALES - AMARILLO */
  /* Cambia estos valores para modificar el color principal */
  --color-primary: #f9a825;           /* Amarillo principal */
  --color-primary-dark: #f57f17;      /* Amarillo oscuro para hover */
  --color-primary-light: #ffeb3b;     /* Amarillo claro para acentos */
  
  /* COLORES SECUNDARIOS */
  --color-secondary: #388e3c;         /* Verde Cooindegabo */
  --color-secondary-dark: #2e7d32;    /* Verde oscuro */
  
  /* COLORES DE TEXTO */
  --color-text-dark: #1a1a2e;         /* Texto principal oscuro */
  --color-text-medium: #4a4a4a;       /* Texto secundario */
  --color-text-light: #ffffff;        /* Texto sobre fondos oscuros */
  
  /* COLORES DE FONDO */
  --color-bg-light: #fffde7;          /* Fondo amarillo muy claro */
  --color-bg-white: #ffffff;          /* Fondo blanco */
  --color-bg-overlay: rgba(249, 168, 37, 0.85); /* Overlay amarillo */
  
  /* ESPACIADOS */
  /* Modifica estos valores para ajustar margenes y paddings */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-xxl: 4rem;     /* 64px */
  
  /* BORDES */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-full: 50%;
  
  /* SOMBRAS */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.2);
  --shadow-yellow: 0 8px 30px rgba(249, 168, 37, 0.3);
  
  /* TRANSICIONES */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* FUENTES */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* DIMENSIONES DE IMAGEN */
  /* Ajusta estos valores para cambiar el tamano de la imagen */
  --app-image-width: 400px;
  --app-image-max-width: 100%;
}

/* ============================================
   2. RESET Y ESTILOS BASE
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  color: var(--color-text-dark);
  line-height: 1.6;
}

/* ============================================
   3. HERO BANNER CON PARALLAX
   ============================================
   - Fondo amarillo con imagen
   - Efecto parallax al hacer scroll
   - Para cambiar la imagen, modifica background-image
============================================ */
.hero-app {
  /* Altura del hero - Ajusta segun necesites */
  min-height: 60vh;
  
  /* Imagen de fondo - CAMBIA LA RUTA POR TU IMAGEN */
  background-image: url('imagens-web/heros/hero-app-cooin.png');
  background-size: cover;
  background-position: center;
  
  /* Efecto Parallax - Fija la imagen al hacer scroll */
  background-attachment: fixed;
  
  /* Posicionamiento para el overlay */
  position: relative;
  
  /* Centrar contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Overflow para efectos */
  overflow: hidden;
}

/* Overlay amarillo semi-transparente */
/* Cambia el color y opacidad aqui */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Gradiente amarillo - Modifica los colores aqui */
  background: linear-gradient(
    135deg,
    rgba(249, 168, 37, 0.9) 0%,    /* Amarillo principal */
    rgba(245, 127, 23, 0.50) 100%   /* Amarillo oscuro */
  );
  
  z-index: 1;
}

/* Contenido del hero */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--spacing-xl);
  max-width: 800px;
  
  /* Animacion de entrada */
  animation: fadeInUp 0.8s ease-out;
}

/* Titulo principal del hero */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem); /* Tamano responsivo */
  font-weight: 800;
  color: var(--color-text-light);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: var(--spacing-md);
  letter-spacing: 2px;
}

/* Texto resaltado en el titulo */
.hero-title .highlight {
  /* Gradiente en el texto */
  background: linear-gradient(135deg, #ffffff 0%, #fff9c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Sombra adicional para resaltar */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* Descripcion del hero */
.hero-description {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--color-text-light);
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   4. SECCION DE CONTENIDO PRINCIPAL
   ============================================
   - Layout de dos columnas
   - Imagen a la izquierda, contenido a la derecha
============================================ */
.app-content-section {
  padding: var(--spacing-xxl) var(--spacing-md);
  background-color:white;
  
  /* Fondo decorativo opcional */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(249, 168, 37, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(56, 142, 60, 0.1) 0%, transparent 50%);
}

/* Contenedor principal con grid */
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  
  /* Grid de dos columnas */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

/* ============================================
   INVERTIR POSICIONES
   ============================================
   Para poner la imagen a la derecha y el contenido a la izquierda,
   agrega la clase "content-reverse" al contenedor .app-container
   
   Ejemplo: <div class="app-container content-reverse">
============================================ */
.app-container.content-reverse {
  direction: rtl; /* Invierte el orden de las columnas */
}

.app-container.content-reverse > * {
  direction: ltr; /* Restaura la direccion del texto */
}

/* ============================================
   5. IMAGEN DE LA APP
   ============================================
   - Contenedor con efectos decorativos
   - Imagen con sombra y animacion
============================================ */
.app-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Animacion de entrada */
  animation: fadeInLeft 0.8s ease-out;
}

/* Imagen principal de la app */
.app-image {
  /* TAMANO DE LA IMAGEN - Ajusta estos valores */
  
  height: auto;
  
  /* Sombra y efectos */
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
  
  /* Posicion sobre la decoracion */
  position: relative;
  z-index: 2;
  
  /* Transicion para hover */
  transition: transform var(--transition-normal);
}

/* Efecto hover en la imagen */
.app-image:hover {
  transform: translateY(-10px) scale(1.02);
}

/* Decoracion detras de la imagen */
.image-decoration {
  position: absolute;
  
  /* TAMANO DE LA DECORACION - Ajusta estos valores */
  width: 350px;
  height: 350px;
  
  /* Gradiente circular amarillo */
  background: linear-gradient(
    135deg,
    rgba(249, 168, 37, 0.3) 0%,
    rgba(255, 235, 59, 0.2) 100%
  );
  
  border-radius: var(--border-radius-full);
  
  /* Posicion centrada detras de la imagen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  z-index: 1;
  
  /* Animacion de pulso suave */
  animation: pulse 3s ease-in-out infinite;
}

/* ============================================
   6. CONTENIDO INFORMATIVO
   ============================================
   - Titulo, descripcion, beneficios
============================================ */
.app-info-container {
  /* Animacion de entrada */
  animation: fadeInRight 0.8s ease-out;
}

/* Titulo de la seccion */
.app-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

/* Emoji en el titulo */
.app-title .emoji {
  /* Tamano del emoji - Ajusta aqui */
  font-size: 1.2em;
  margin-right: var(--spacing-xs);
}

/* Nombre de la marca resaltado */
.app-title .brand-name {
  color: var(--color-primary-dark);
  font-weight: 800;
}

/* Texto destacado/resaltado */
.text-highlight {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 600;
  
  /* Color amarillo oscuro para resaltar */
  color: var(--color-primary-dark);
  
  /* Fondo sutil */
  background: linear-gradient(120deg, rgba(249, 168, 37, 0.2) 0%, rgba(249, 168, 37, 0.1) 100%);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  
  /* Borde izquierdo decorativo */
  border-left: 4px solid var(--color-primary);
  
  margin-bottom: var(--spacing-md);
}

/* Descripcion general */
.app-description {
  font-size: 1.05rem;
  color: var(--color-text-medium);
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
}

/* ============================================
   7. LISTA DE BENEFICIOS
   ============================================
   - Lista con iconos de check
   - Cada item tiene titulo en negrita y descripcion
============================================ */
.benefits-container {
  margin-bottom: var(--spacing-lg);
}

/* Titulo de la lista */
.benefits-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
  
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Icono de estrella/sparkle */
.benefits-title .sparkle {
  font-size: 1.3em;
  animation: sparkle 2s ease-in-out infinite;
}

/* Lista de beneficios */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Cada item de beneficio */
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  
  padding: var(--spacing-sm) 0;
  
  /* Borde inferior sutil */
  border-bottom: 1px solid rgba(249, 168, 37, 0.2);
  
  /* Transicion para hover */
  transition: all var(--transition-fast);
}

/* Hover en items */
.benefit-item:hover {
  background-color: rgba(249, 168, 37, 0.1);
  padding-left: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
}

/* Ultimo item sin borde */
.benefit-item:last-child {
  border-bottom: none;
}

/* Icono de check */
.benefit-icon {
  /* Circulo de fondo */
  width: 28px;
  height: 28px;
  min-width: 28px;
  
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  border-radius: var(--border-radius-full);
  
  /* Centrar icono */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Margen superior para alinear con texto */
  margin-top: 2px;
}

/* SVG del check */
.benefit-icon svg {
  width: 16px;
  height: 16px;
  stroke: white;
}

/* Contenido del beneficio */
.benefit-content {
  font-size: 1rem;
  color: var(--color-text-medium);
  line-height: 1.5;
}

/* Texto en negrita */
.benefit-content strong {
  color: var(--color-text-dark);
  font-weight: 600;
}

/* ============================================
   8. CALL TO ACTION Y BOTONES DE TIENDAS
   ============================================
   - Frase motivacional
   - Botones para Play Store y App Store
============================================ */
.cta-container {
  /* Fondo sutil */
  background: linear-gradient(135deg, rgba(56, 142, 60, 0.1) 0%, rgba(46, 125, 50, 0.05) 100%);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  
  /* Borde decorativo */
  border: 2px solid rgba(56, 142, 60, 0.2);
  
  text-align: center;
}

/* Texto de llamada a la accion */
.cta-text {
  font-size: 1.15rem;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
}

.cta-text strong {
  color: var(--color-secondary);
  font-size: 1.25rem;
}

/* Contenedor de botones de tiendas */
.store-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Boton de tienda individual */
.store-button {
  display: inline-block;
  transition: all var(--transition-normal);
  
  /* Sombra suave */
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

/* Hover en botones */
.store-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--shadow-md);
}

/* Active en botones */
.store-button:active {
  transform: translateY(-2px) scale(1.02);
}

/* Logo de tienda */
.store-logo {
  /* TAMANO DE LOS LOGOS - Ajusta estos valores */
  height: 50px;
  width: auto;
  
  display: block;
}

/* ============================================
   9. ANIMACIONES
   ============================================
   Keyframes para las diferentes animaciones
============================================ */

/* Animacion de entrada desde abajo */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animacion de entrada desde la izquierda */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animacion de entrada desde la derecha */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animacion de pulso para la decoracion */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

/* Animacion de brillo para el sparkle */
@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* ============================================
   10. MEDIA QUERIES - RESPONSIVO
   ============================================
   Ajustes para diferentes tamanos de pantalla
============================================ */

/* TABLETS GRANDES (max-width: 1024px) */
@media (max-width: 1024px) {
  .app-container {
    gap: var(--spacing-xl);
  }
  
  .app-image {
    width: 350px;
  }
  
  .image-decoration {
    width: 300px;
    height: 300px;
  }
}

/* TABLETS (max-width: 900px) */
@media (max-width: 900px) {
  /* Cambiar a una sola columna */
  .app-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    text-align: center;
  }
  
  /* Centrar la imagen */
  .app-image-container {
    order: 1; /* Imagen primero en movil */
  }
  
  .app-info-container {
    order: 2; /* Contenido despues */
  }
  
  /* Ajustar texto resaltado */
  .text-highlight {
    text-align: left;
  }
  
  /* Centrar CTA */
  .cta-container {
    text-align: center;
  }
}

/* TABLETS PEQUENAS (max-width: 768px) */
@media (max-width: 768px) {
  /* Hero mas pequeno */
  .hero-app {
    min-height: 50vh;
    
    /* Desactivar parallax en movil para mejor rendimiento */
    background-attachment: scroll;
  }
  
  .hero-content {
    padding: var(--spacing-lg);
  }
  
  /* Seccion de contenido */
  .app-content-section {
    padding: var(--spacing-xl) var(--spacing-sm);
  }
  
  /* Imagen mas pequena */
  .app-image {
    width: 300px;
  }
  
  .image-decoration {
    width: 250px;
    height: 250px;
  }
  
  /* Lista de beneficios */
  .benefit-item {
    padding: var(--spacing-xs) 0;
  }
  
  /* Logos de tiendas */
  .store-logo {
    height: 45px;
  }
}

/* MOVILES (max-width: 576px) */
@media (max-width: 576px) {
  /* Variables ajustadas para movil */
  :root {
    --spacing-xxl: 2.5rem;
    --spacing-xl: 2rem;
  }
  
  /* Hero */
  .hero-app {
    min-height: 45vh;
  }
  
  .hero-content {
    padding: var(--spacing-md);
  }
  
  /* Imagen */
  .app-image {
    width: 250px;
  }
  
  .image-decoration {
    width: 200px;
    height: 200px;
  }
  
  /* Titulo */
  .app-title {
    font-size: 1.5rem;
  }
  
  /* Texto resaltado */
  .text-highlight {
    font-size: 1rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  /* Beneficios */
  .benefit-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
  
  .benefit-icon svg {
    width: 14px;
    height: 14px;
  }
  
  /* CTA */
  .cta-container {
    padding: var(--spacing-md);
  }
  
  /* Logos de tiendas en columna */
  .store-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .store-logo {
    height: 40px;
  }
}

/* MOVILES PEQUENOS (max-width: 400px) */
@media (max-width: 400px) {
  .app-image {
    width: 220px;
  }
  
  .image-decoration {
    width: 180px;
    height: 180px;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
  
  .app-title {
    font-size: 1.3rem;
  }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}