/* typography-simple.css */

/* colors */

/* theme-colors.css */

:root {
  /* ========== COLOR PALETTE ========== */
  --color-orange-50: #FFF7ED;
  --color-orange-100: #FFEDD5;
  --color-orange-200: #FED7AA;
  --color-orange-300: #FDBA74;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;  /* primary */
  --color-orange-700: #C2410C;  /* primary-dark */
  --color-orange-800: #9A3412;
  --color-orange-900: #7C2D12;

  /* Neutros */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Dark mode colors */
  --color-dark-1: #1c1311;
  --color-dark-2: #2D1B18;
  --color-dark-3: #3D241F;

  /* ========== LIGHT MODE ========== */
  --color-bg: var(--color-orange-50);
  --color-surface: #FFFFFF;
  --color-text: var(--color-gray-800);
  --color-text-muted: var(--color-gray-600);
  --color-border: var(--color-orange-200);
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-dark-1);
    --color-surface: var(--color-dark-2);
    --color-text: var(--color-gray-100);
    --color-text-muted: var(--color-gray-400);
    --color-border: var(--color-dark-3);
  }
}

/* ========== CLASSES ========== */
.bg-primary { background-color: var(--color-orange-600); }
.text-primary { color: var(--color-orange-600); }
.border-primary { border-color: var(--color-orange-600); }
.fill-primary { fill: var(--color-orange-600); }

.bg-primary-dark { background-color: var(--color-orange-700); }
.text-primary-dark { color: var(--color-orange-700); }

.bg-background { background-color: var(--color-bg); }
.bg-surface { background-color: var(--color-surface); }

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

/* Gradients */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-orange-600), var(--color-orange-700));
}

.bg-gradient-orange {
  background: linear-gradient(135deg, var(--color-orange-500), var(--color-orange-700));
}

/* Shadows with primary color */
.shadow-primary {
  box-shadow: 0 4px 14px 0 rgba(234, 88, 12, 0.39);
}

/* Hover states */
.hover\:bg-primary:hover { background-color: var(--color-orange-600); }
.hover\:bg-primary-dark:hover { background-color: var(--color-orange-700); }
.hover\:text-primary:hover { color: var(--color-orange-600); }

/* Focus states */
.focus\:ring-primary:focus {
  --tw-ring-color: var(--color-orange-600);
}

/* Active states */
.active\:bg-primary-dark:active {
  background-color: var(--color-orange-700);
}
/* end color  */

/* ========== HEADINGS SIMPLES CON CLAMP ========== */

/* H1 - 16px a 48px */
h1 {
  font-size: clamp(1rem, 5vw, 2.5rem) !important;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;

}

/* H2 - 15px a 36px */
h2 {
  font-size: clamp(0.9375rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

/* H3 - 14px a 28px */
h3 {
  font-size: clamp(0.875rem, 3.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* H4 - 13px a 22px */
h4 {
  font-size: clamp(0.8125rem, 2.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

/* H5 - 12px a 18px */
h5 {
  font-size: clamp(0.75rem, 2vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* H6 - 11px a 16px */
h6 {
  font-size: clamp(0.6875rem, 1.5vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  font-size: clamp(1rem, 2.5vw, 1.25rem) !important;  /* 16px - 20px */
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

    .bg-banner {
    background-image: url('/media/images/assets/banner_1.png');
    /* Propiedades adicionales recomendadas */
    background-size: cover; /* o contain, dependiendo de lo que necesites */
    background-position: center;
    background-repeat: no-repeat;
}

.decorative-section {
    background-image: url('/media/images/assets/bg/bglinear2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.bg-red-orange-gradient {
    background: linear-gradient(135deg,
        #DC2626 25%,      /* Red-600 - Rojo intenso */
        #EA580C 50%,     /* Orange-600 - Naranja (tu primary) */
        #F97316 100%     /* Orange-500 - hola test*/
    );
}


  /* CSS más específico */
  #plan-period-toggle[aria-checked="true"] {
    background-color: #EA580C !important;
  }

  #plan-period-toggle[aria-checked="false"] {
    background-color: #d1d5db !important;
  }

  #plan-period-toggle[aria-checked="true"] #plan-period-toggle-slider {
    transform: translateX(20px) !important;
  }