/* FIXES COMPLETOS PARA MÓVILES Y DESKTOP - FIESTACO.TODAY */

/* ===== 1. RESET Y BASE ===== */
* {
  box-sizing: border-box !important;
  max-width: 100vw !important;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ===== 2. HEADER RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Header principal */
  header[style*="padding:10px 32px"] {
    padding: 8px 16px !important;
  }
  
  /* Logo header */
  header img[width="72"] {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Texto del header */
  header span[style*="font-size:22px"] {
    font-size: 18px !important;
  }
  
  /* Botones del header */
  .header-buttons {
    gap: 6px !important;
  }
  
  /* Botón WhatsApp header */
  header a[href*="wa.me"] {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
  
  /* Iconos sociales - ocultar en móviles */
  header a[href*="mailto"],
  header a[href*="instagram"],
  header a[href*="tiktok"] {
    display: none !important;
  }
}

@media (min-width: 769px) {
  /* Header en desktop */
  header[style*="padding:10px 32px"] {
    padding: 12px 24px !important;
  }
}

/* ===== 3. HERO SECTION ===== */
@media (max-width: 768px) {
  /* Hero container */
  section[style*="padding:100px 20px 60px"] {
    padding: 80px 16px 40px !important;
    min-height: 90vh !important;
  }
  
  /* Título principal */
  h1[style*="clamp(48px, 9vw, 84px)"] {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
  }
  
  /* Contenedores de texto */
  div[style*="max-width:560px"],
  div[style*="max-width:540px"] {
    max-width: 100% !important;
    padding-top: 40px !important;
  }
  
  /* Botón CTA hero */
  button[onclick*="scrollToStepContainer"] {
    padding: 14px 28px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
}

/* ===== 4. HOW IT WORKS SECTION ===== */
@media (max-width: 768px) {
  /* Grid de 3 columnas → 1 columna */
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Cards individuales */
  div[style*="border-radius:16px;padding:24px 16px"] {
    padding: 16px 12px !important;
    margin-bottom: 8px !important;
  }
  
  /* Títulos de sección */
  h2[style*="font-size:32px"] {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet: 3 columnas → 2 columnas */
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ===== 5. CONFIGURADOR ===== */
@media (max-width: 768px) {
  /* Container principal */
  div[style*="max-width:900px"] {
    max-width: 100% !important;
    padding: 0 16px !important;
  }
  
  /* Grid de sabores */
  div[style*="grid-template-columns:repeat(auto-fill, minmax(145px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  /* Cards de sabores */
  button[style*="width:80px;height:80px"] div {
    width: 60px !important;
    height: 60px !important;
  }
  
  button[style*="width:80px;height:80px"] span {
    font-size: 13px !important;
  }
  
  /* Títulos del configurador */
  h2[style*="font-size:48px"] {
    font-size: 32px !important;
  }
  
  /* Progress bar */
  div[style*="gap:8px"] {
    gap: 4px !important;
  }
}

/* ===== 6. ADDONS Y DRINKS ===== */
@media (max-width: 768px) {
  /* Grid de addons */
  div[style*="grid-template-columns:repeat(auto-fill, minmax(160px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  /* Cards de addons */
  div[style*="border-radius:12px;padding:20px 16px"] {
    padding: 16px 12px !important;
  }
}

/* ===== 7. FOOTER Y CTA FINAL ===== */
@media (max-width: 768px) {
  /* Container footer */
  div[style*="max-width:700px"] {
    max-width: 100% !important;
    padding: 0 16px !important;
  }
  
  /* Grid de 3 columnas en footer */
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Botón CTA final */
  button[style*="padding:18px 40px"] {
    padding: 14px 32px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  
  /* Footer */
  footer[style*="padding:40px 32px 32px"] {
    padding: 24px 16px 16px !important;
  }
}

/* ===== 8. IMÁGENES RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Imágenes con width fijo */
  img[width="80"],
  img[width="90"],
  img[width="120"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Logo decorativo */
  div[style*="opacity:0.18"] img,
  div[style*="opacity:0.12"] img {
    width: 80px !important;
    height: 80px !important;
  }
}

/* ===== 9. TIPOGRAFÍA RESPONSIVE ===== */
@media (max-width: 768px) {
  body {
    font-size: 14px !important;
  }
  
  h2 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  
  h3 {
    font-size: clamp(16px, 4vw, 20px) !important;
  }
  
  p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  button, a {
    min-height: 44px !important; /* Área táctil mínima */
  }
}

/* ===== 10. UTILIDADES ===== */
/* Prevenir overflow horizontal */
section[style*="width:100vw"] {
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Asegurar que todo sea tappable en móviles */
@media (max-width: 768px) {
  button, 
  a[href], 
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* Animaciones suaves */
* {
  transition: all 0.2s ease !important;
}

/* ===== 11. DESKTOP OPTIMIZATIONS ===== */
@media (min-width: 1025px) {
  /* Limitar ancho máximo en pantallas grandes */
  div[style*="max-width:900px"] {
    max-width: 900px !important;
  }
  
  div[style*="max-width:700px"] {
    max-width: 700px !important;
  }
  
  /* Mejorar espaciado en desktop */
  section[style*="padding:100px 20px 60px"] {
    padding: 120px 40px 80px !important;
  }
}

/* ===== 12. FIXES ESPECÍFICOS PARA COMPONENTES OCULTOS ===== */
/* Asegurar que todos los componentes sean visibles */
section, div[style*="display:flex"], div[style*="display:grid"] {
  overflow: visible !important;
}

/* Prevenir que elementos se salgan del viewport */
@media (max-width: 768px) {
  * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
}