/* styles.css */
/* ── Importar Outfit ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
  font-family: 'Outfit', sans-serif !important;  /* ← aplica a TODO */
}

    :root {
     
      
      --yellow:     #FFC900;
      --yellow-btn: #a9f52b;
      --white:      #ffffff;
      --text-dark:  #1a1a2e;
      --radius:     16px;
    }

    html, body {
      width: 100%;
    }

    body {
    font-family: 'Outfit' !important;
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
    background-image: url('../assets/Background/Fondo.png');
    background-size: 100% 100%;       /* ← 100% ancho, 60% alto — ajustá el segundo valor */
    background-repeat: no-repeat;
    background-position: center top;
    }

    /* ---- wrapper centrado a 1440px ---- */
    .page-wrap {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;        /* ← necesario para el absolute */
    }
    

    /* ===================== HEADER ===================== */
    header {
      
      display: flex;
      align-items: center;
    }
    header img.logo {
      height: 52px;
      object-fit: contain;
    }



    
    /* ===================== RESPONSIVE (pantallas < 1440px) ===================== */
    /* @media (max-width: 900px) {
      .s1-hero { flex-direction: column; padding: 32px 24px 24px; }
      .s1-features { flex-direction: column; padding: 0 24px 32px; align-items: center; }
      .s2-cols { flex-direction: column; }
      .s2-photo { width: 100%; max-width: 300px; margin: 0 auto; }
      section.s2, section.s3 { padding: 40px 24px; }
      .s3-header { flex-direction: column; }
      .s3-loan-cards { flex-direction: column; }
      .s3-person { display: none; }
      footer { padding: 20px 24px; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
      .footer-col.social { justify-content: flex-start; }
    } */
    /* ===================== RESPONSIVE GLOBAL ===================== */

/* Tablet grande */
@media (max-width: 1200px) {
  .page-wrap {
    width: 100%;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .page-wrap {
    width: 100%;
    overflow-x: hidden;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  body {
    background-size: cover;
  }
  .page-wrap {
    width: 100%;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  body {
    background-image: none;
    background-color: #0047BB;
  }
}