@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 98%; 
    --foreground: 220 50% 10%; 
    --primary: 24 100% 50%; /* Vibrant Orange equivalent #FF6B00 */
    --primary-foreground: 0 0% 100%;
    --secondary: 133 55% 24%; /* Forest Green equivalent #1B5E20 */
    --secondary-foreground: 0 0% 100%;
    --accent: 44 100% 50%; /* Gold equivalent #FFB800 */
    --accent-foreground: 220 50% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 50% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 50% 10%;
    --muted: 220 14% 92%;
    --muted-foreground: 220 10% 40%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 24 100% 50%;
    --radius: 0.75rem;

    /* Método Cliente Todo Dia Branding Palette */
    --deep-navy: #0B2447;
    --forest-green: #1B5E20;
    --vibrant-orange: #FF6B00;
    --gold: #FFB800;
    --light-blue: #E3F2FD;
    --light-green: #E8F5E9;
    --light-orange: #FFF3E0;
    --dark-graphite: #2D3748;
    --light-gray: #F4F5F7;
    --medium-gray: #BFBFBF;

    --font-montserrat: 'Montserrat', sans-serif;
    --font-opensans: 'Open Sans', sans-serif;
  }

  .dark {
    --background: 217 84% 16%; 
    --foreground: 0 0% 100%;
    --primary: 24 100% 50%; 
    --primary-foreground: 0 0% 100%;
    --secondary: 133 55% 24%; 
    --secondary-foreground: 0 0% 100%;
    --accent: 44 100% 50%; 
    --accent-foreground: 220 50% 10%;
    --card: 217 84% 16%;
    --card-foreground: 0 0% 100%;
    --popover: 217 84% 16%;
    --popover-foreground: 0 0% 100%;
    --muted: 0 0% 75%; 
    --muted-foreground: 0 0% 75%;
    --destructive: 0 100% 64%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 30%;
    --input: 0 0% 30%;
    --ring: 24 100% 50%;
  }

  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
    font-size: 16px;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-opensans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-montserrat);
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .touch-target {
    @apply min-h-[48px] min-w-[48px];
  }
  .font-montserrat { font-family: var(--font-montserrat); }
  .font-opensans { font-family: var(--font-opensans); }
  
  .bg-deep-navy { background-color: var(--deep-navy); }
  .text-deep-navy { color: var(--deep-navy); }
  .bg-forest-green { background-color: var(--forest-green); }
  .text-forest-green { color: var(--forest-green); }
  .bg-vibrant-orange { background-color: var(--vibrant-orange); }
  .text-vibrant-orange { color: var(--vibrant-orange); }
  .bg-gold { background-color: var(--gold); }
  .text-gold { color: var(--gold); }
  .bg-light-blue { background-color: var(--light-blue); }
  .bg-light-green { background-color: var(--light-green); }
  .bg-light-orange { background-color: var(--light-orange); }
  .text-dark-graphite { color: var(--dark-graphite); }
  .bg-light-gray { background-color: var(--light-gray); }
  
  .btn-primary {
    @apply bg-vibrant-orange text-white font-montserrat font-bold transition-all duration-300 hover:bg-[#E55A00] hover:scale-105;
  }
  .btn-secondary {
    @apply bg-forest-green text-white font-montserrat font-bold transition-all duration-300 hover:brightness-110 hover:scale-105;
  }
  .btn-tertiary {
    @apply bg-gold text-deep-navy font-montserrat font-bold transition-all duration-300 hover:brightness-110 hover:scale-105;
  }
  
  .card-styled {
    @apply bg-white rounded-[12px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] border border-gray-100 transition-all duration-300 hover:scale-[1.02];
  }

  .section-padding {
    @apply py-[20px] md:py-[40px] lg:py-[80px];
  }

  /* Task specific utilities */
  .hero-logo {
    @apply w-[200px] md:w-[250px] lg:w-[300px] h-auto object-contain mx-auto md:mx-0;
  }
  .logo-image {
    @apply w-full h-auto drop-shadow-xl;
  }
  .promotional-section {
    @apply py-12 md:py-20 lg:py-24 bg-white px-4;
  }
  .promotional-image-container {
    @apply w-full flex justify-center mt-10 mb-8;
  }
  .promotional-image {
    @apply w-full md:w-[80%] max-w-[900px] rounded-[12px] shadow-2xl transition-transform duration-300 hover:scale-[1.02] object-cover;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.8s ease-in forwards;
  }
  .animate-scroll-reveal {
    animation: scrollReveal 0.6s ease forwards;
  }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scrollReveal {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}