@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/*──────────────────────────  VARIABLES  ──────────────────────────*/
:root{
  /* Light Theme (Defaults) */
  --c-primary: #1d61ff;
  --c-primary-dark: #0f3ab6;
  --c-primary-text-on: #ffffff; /* Text on primary color */
  --c-primary-glow: #e4ecff;

  --c-background: #f7f8fc; /* Main page background */
  --c-surface: #ffffff;    /* Cards, navbar, modals, etc. */
  --c-surface-alt: #f6f0ec; /* e.g., stats box background */
  --c-surface-darker: #e0e7f0; /* e.g., toggle buttons background */

  --c-text-primary: #102239;   /* Primary text color */
  --c-text-secondary: #555555; /* Secondary text (paragraphs) */
  --c-text-muted: #6a738b;    /* Muted text (plan descriptions, etc.) */
  --c-text-on-dark-bg: #e7eafe; /* Text on very dark backgrounds (footer) */
  --c-text-placeholder: #909090;

  --c-border: #cccccc;
  --c-border-light: #e0e7f0;
  --c-shadow-color: rgba(0, 0, 0, 0.06);
  --c-shadow-color-navbar: rgba(0, 0, 0, 0.1);
  --c-shadow-color-details: rgba(0, 0, 0, 0.2);


  --c-faq-bg: var(--c-primary);
  --c-faq-text: var(--c-primary-text-on);
  --c-faq-item-bg: var(--c-surface);
  --c-faq-item-text: var(--c-text-primary); /* This is for the <p> inside details */

  --c-footer-bg: #0b1330;
  --c-footer-text: var(--c-text-on-dark-bg);
  --c-footer-border: #2a3470;

  --c-icon-check: #32c766;
  --c-icon-cross: #e74c3c;

  --radius:8px;
  --transition:.3s ease;
  --maxw:1200px;
}

body.dark-mode {
  --c-primary: #4080ff;
  --c-primary-dark: #2a60d8;
  --c-primary-glow: #2a3f78; /* Darker glow for primary elements */

  --c-background: #121828;
  --c-surface: #1c233a;
  --c-surface-alt: #222b45;
  --c-surface-darker: #30395a;

  --c-text-primary: #e0e7ff;
  --c-text-secondary: #b0b8d0;
  --c-text-muted: #8c9db1;
  --c-text-placeholder: #707a90;

  --c-border: #3a4867;
  --c-border-light: #2a3450;
  --c-shadow-color: rgba(0, 0, 0, 0.25);
  --c-shadow-color-navbar: rgba(0, 0, 0, 0.3);
  --c-shadow-color-details: rgba(0, 0, 0, 0.4);

  --c-faq-bg: var(--c-primary-dark);
  --c-faq-item-bg: var(--c-surface-alt);


  --c-footer-bg: #080f1f;
  --c-footer-border: #1a2448;
}


/*──────────────────────────  RESET  ─────────────────────────────*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui,sans-serif;
  color:var(--c-text-primary);
  background:var(--c-background);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition: background var(--transition), color var(--transition);
}

/*──────────────────────────  UTILIDADES  ────────────────────────*/
section{padding:4rem 1rem}
h1,h2,h3{line-height:1.2}
h2{text-align:center;margin-bottom:2rem;font-size:clamp(1.6rem,3vw,2.3rem)}

.btn{display:inline-block;padding:.9rem 2rem;border-radius:50px;background:var(--c-primary);color:var(--c-primary-text-on);text-decoration:none;font-weight:600;transition: background var(--transition), color var(--transition)}
.btn:hover{background:var(--c-primary-dark)}

.btn--ghost{
  background:transparent;
  border:1px solid var(--c-primary);
  color:var(--c-primary);
  padding:.5rem 1.3rem;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition); /* Ensure all properties transition smoothly */
}
.btn--ghost:hover{
  background-color:var(--c-primary); /* Use background-color for specificity */
  color: var(--c-primary-text-on) !important; /* Force white text on hover */
}
.btn--full{width:100%;text-align:center}
img{max-width:100%;display:block}