/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Main colors */
  --awa-primary: rgb(35, 88, 137);
  --awa-primary-dark: rgb(43, 90, 141);
  --awa-primary-darker: rgb(31, 78, 121);
  --awa-bg-blue: rgb(221, 235, 247);
  --awa-bg-white: #ffffff;
  --awa-text-light: rgb(243, 244, 246);
  --awa-orange: #ed7d31;
  --awa-orange-hover: #d26923;
  --awa-orange-active: #c25d1b;
  --awa-purple: #7030A0;
  --awa-purple-hover: #5c2785;
  --awa-purple-active: #4a1f6b;

  /* Typography */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Nunito", var(--font-primary);

  /* Responsive typography with clamp(min, preferred, max) */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.35rem);
  --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

  /* Responsive spacing */

  --spacing-section: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  
  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-fast: 0.2s ease;
}

/* ========================================
   BASE STYLES
   ======================================== */
body {
  font-family: var(--font-primary);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.container a {
  text-decoration: none;
}

/* ========================================
   NAVBAR
   ======================================== */
.navbar-nav .nav-link {
  font-size: 1.1rem;
  transition: all 0.5s;
}

@media screen and (min-width: 1024px) {
  .navbar-nav .nav-item {
    padding: 0 1rem;
  }

  .navbar-brand {
    font-size: calc(1.5rem + 0.1vw);
  }
}

/* ========================================
   FOOTER
   ======================================== */
section.footer-start {
  background: url("/static/home/Imagen13.webp") 100% 0;
  background-size: cover;
  background-color: var(--awa-primary);
  color: var(--awa-text-light);
  font-size: var(--fs-base);
}

/* Fallback for browsers without WebP support */
@supports not (background-image: url("/static/home/Imagen13.webp")) {
  section.footer-start {
    background-image: url("/static/home/Imagen13.png");
  }
}

section.footer-end {
  background-color: var(--awa-primary-darker);
  color: var(--awa-text-light);
  font-size: var(--fs-base);
}

.rev-phone {
  unicode-bidi: bidi-override;
  direction: rtl;
  user-select: all;
  cursor: pointer;
}

/* ========================================
   BUTTONS
   ======================================== */
.orange-btn {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--awa-orange);
  --bs-btn-border-color: var(--awa-orange);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--awa-orange-hover);
  --bs-btn-hover-border-color: var(--awa-orange-hover);
  --bs-btn-focus-shadow-rgb: 210, 105, 35;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--awa-orange-active);
  --bs-btn-active-border-color: var(--awa-orange-active);
}

.purple-btn {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--awa-purple);
  --bs-btn-border-color: var(--awa-purple);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--awa-purple-hover);
  --bs-btn-hover-border-color: var(--awa-purple-hover);
  --bs-btn-focus-shadow-rgb: 112, 48, 160;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--awa-purple-active);
  --bs-btn-active-border-color: var(--awa-purple-active);
}

/* ========================================
   CHECKMARKS LISTS
   ======================================== */
ul.check-style {
  list-style: none;
  padding-left: 0;
}

ul.check-style li {
  position: relative;
  padding-left: 1.25rem;
}

ul.check-style li::before {
  content: '✓';
  position: absolute;
  left: 0;
  width: 0.2rem;
  height: 0.2rem;
  color: currentColor;
}

/* ========================================
   FORMS
   ======================================== */
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: var(--bs-box-shadow);
  background-color: var(--bs-light);
}

.form-control::placeholder {
  color: var(--bs-secondary);
  opacity: 0.8;
}

/* ========================================
    ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
    ACCESSIBILITY: FOCUS VISIBLE
   ======================================== */
:focus-visible {
  outline: 2px solid var(--awa-primary);
  outline-offset: 2px;
}

/* ========================================
   SMOOTH SCROLL (respects prefers-reduced-motion)
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}