/* ============================================================
     Spherica BBVA 2026
     ============================================================ */
:root {
  /* ============================================================
		BBVA SPHERICA COLOR PALETTE
		============================================================ */

  /* Base color tokens (DO NOT use directly in components) */
  --bbva-electric-blue: #001391;
  --bbva-electric-blue-overlay: rgba(0, 19, 145, 0.85);
  --bbva-serene-blue: #85c8ff;
  --bbva-midnight: #070e46;
  --bbva-white: #fff;

  /* Accent tokens */
  --bbva-lime: #88e783;
  --bbva-mandarin: #ffb56b;
  --bbva-canary: #ffe761;
  --bbva-ice: #8be1e9;
  --bbva-purple: #9694ff;

  /* Grey scale */
  --bbva-sand: #f7f8f8;
  --bbva-grey-1: #e2e6ea;
  --bbva-grey-2: #cad1d8;
  --bbva-grey-3: #adb8c2;
  --bbva-grey-4: #46536d;
  --bbva-grey-5: #000519;

  /* ============================================================
     SEMANTIC ALIASES – ALWAYS use these in components
     ============================================================ */
  --bbva-primary-color: var(--bbva-electric-blue);
  --bbva-primary-color-light: var(--bbva-serene-blue);
  --bbva-primary-color-dark: var(--bbva-midnight);
  --bbva-primary-color-overlay: var(--bbva-electric-blue-overlay);
  --bbva-body-background: var(--bbva-sand);
  --bbva-container-background: var(--bbva-white);
  --bbva-positive-default: #0c6dff;
  --bbva-positive-hover: #2165ca;
  --border-alert: #c30a0a;

  /* Optional semantic examples:
     --bbva-bg: var(--bbva-white);
     --bbva-text: var(--bbva-grey-5);
     --bbva-border: var(--bbva-grey-2);
  */

  /* ============================================================
     DEPRECATED TOKENS – scheduled for removal
     DO NOT use in new development.
     ============================================================ */
  --bbva-core-blue: #004481;
  --bbva-core-dark-blue: #043263;
  --bbva-core-light-blue: #1464a5;
  --bbva-medium-blue: #1973b8;
  --bbva-sky-blue: #5bbeff;
  --bbva-600: #121212;
  --bbva-500: #666;
  --bbva-400: #d4d4d4;
  --bbva-300: #d3d3d3;
  --bbva-200: #e9e9e9;
  --bbva-100: #f4f4f4;

  /* Sizes (px) */
    --h1-size: 3rem;
    --h1-weight: 700;
    --h1-line: normal;

    --h2-size: 2.5rem;
    --h2-weight: 700;
    --h2-line: 40px;

    --h3-size: 2rem;
    --h3-weight: 700;
    --h3-line: 40px;

    --h4-size: 20px;
    --h4-line: 32px;
    --h4-weight: 500;

    --p-size: 0.938rem;
    --p-weight: 350;
    --p-line: 24px;
}

/* ============================================================
	 GLOBAL STYLES
   ============================================================ */
body {
  background-color: var(--bbva-body-background);
}

h1 {
  color: var(--bbva-primary-color-dark);
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  margin: 0;
  padding: 0;
}

h2 {
  color: var(--bbva-primary-color-dark);
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  margin: 0;
  padding: 0;
}

h3 {
  color: var(--bbva-primary-color-dark);
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  margin: 0;
  padding: 0;
}

h4 {
  color: var(--bbva-primary-color-dark);
  font-family: var(--font-body-medium);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  margin: 0;
  padding: 0;
  font-weight: var(--h4-weight);
}

p {
  color: var(--bbva-primary-color-dark);
  font-family: var(--font-body);
  font-size: var(--p-size);
  line-height: var(--p-line);
  margin: 0;
  padding: 0;

}

a {
    color: var(--bbva-primary-color);
    text-decoration: none;
    font-size: var(--p-size);
}

@media (max-width: 1024px) {
  h1 {
    font-size: 2rem;
    line-height: 40px;
  }

  h2 {
    font-size: 2rem;
    line-height: 32px;
  }
}

/**
 * Surface container
 *
 * Base UI surface used for cards and content blocks.
 */

.surface {
  background-color: var(--bbva-container-background);
  border-radius: 1rem;
}

.surface-sm {
  background-color: var(--bbva-container-background);
  border-radius: 0.5rem;
}

.surface-dark {
  background-color: var(--bbva-primary-color);
}

/* margins */

.sm-top-margin {
  margin-top: 1rem;
}

.md-top-margin {
  margin-top: 1.5rem;
}

.lg-top-margin {
  margin-top: 2rem;
}

.xl-top-margin {
  margin-top: 3rem;
}

.sm-right-margin {
  margin-right: 1rem;
}

.md-right-margin {
  margin-right: 1.5rem;
}

.lg-right-margin {
  margin-right: 2rem;
}

.sm-left-margin {
  margin-left: 1rem;
}

.md-left-margin {
  margin-left: 1.5rem;
}

.xs-bottom-margin {
  margin-bottom: 0.5rem;
}

.sm-bottom-margin {
  margin-bottom: 1rem;
}

.md-bottom-margin {
  margin-bottom: 1.5rem;
}

.lg-bottom-margin {
  margin-bottom: 2rem;
}
.lgm-bottom-margin {
  margin-bottom: clamp(2rem, 0.4rem + 2.5vw, 2.5rem);
}

/* Alignments */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* sections */

.section__header {
  width: 100%;
  margin: 0 auto 3.5rem auto;
  text-align: center;
  margin-bottom: 40px;
}

.section_img {
  padding: 5.9375rem 0 5.9375rem 0;
}

.section__container {
  display: block;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section__title-cards {
  margin-bottom: 1rem;
  line-height: 2.5rem;
}

.section__subtitle {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  line-height: 2rem;
}

/* Padding for white background containers */
.xs-section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.sm-section {
  padding-top: 3.75rem;
  padding-bottom: 3rem;
}

.section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.section__card {
  margin: 2.5rem 1.5rem 2.5rem;
}

/* Links */

.link {
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  font-family: var(--font-body-medium);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--bbva-primary-color);
  margin: 0;
  padding: 0;
  border: none;
}

.link:hover {
  text-decoration: none;
  border-bottom: none;
  color: var(--bbva-primary-color-dark);
}

@media (max-width: 62rem) {
  .section__subtitle {
    font-size: 0.938rem;
    line-height: 1.5rem;
  }
}