/* === fonts.css === */
/**
 * Font Definitions for Multi-Brand Storybook
 *
 * This file loads all fonts used across the brands:
 * - Credimoney: Helvetica Neue (local files)
 * - Crediahora: Montserrat (loaded via Google Fonts in preview-head.html)
 * - OleDinero: Poppins (loaded via Google Fonts in preview-head.html)
 * - CreditoAmigo: Seitu (local file)
 * - CreditoClic: Harabara (local file)
 * - CreditoPRO: Open Sans (loaded via Google Fonts in preview-head.html)
 */

/* CreditoAmigo - Seitu (local file) */
@font-face {
  font-family: "Seitu";
  src: url("/fonts/Seitu_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CreditoClic - Harabara (local file) */
@font-face {
  font-family: "Harabara";
  src: url("/fonts/Harabara.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Credimoney - Helvetica Neue (local files) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/fonts/HelveticaNeue-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/fonts/HelveticaNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/fonts/HelveticaNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* CrediZOOM - LemonMilk (local files) */
@font-face {
  font-family: "LemonMilk";
  src: url("/fonts/LEMONMILK-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LemonMilk";
  src: url("/fonts/LEMONMILK-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LemonMilk";
  src: url("/fonts/LEMONMILK-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LemonMilk";
  src: url("/fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* AdobeClean (Credizoom, Mastercredi) - matches production: only 400 + 600 */
@font-face {
  font-family: "AdobeClean";
  src: url("/fonts/AdobeCleanUXRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AdobeClean";
  src: url("/fonts/AdobeCleanBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Coolvetica (Mastercredi headings) */
@font-face {
  font-family: "Coolvetica";
  src: url("/fonts/coolvetica-rg.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto (Credifix - local files) */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* CrediHope - Clash Display (local file) */
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/ClashDisplay-Variable.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Apply theme font-family to body */
body {
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* AdobeClean brands default to font-weight 500 (Bold variant) as body baseline */
html[data-brand="credizoom"],
html[data-brand="mastercredi"] {
  font-weight: 500;
}


/* === layout.css === */
/**
 * Page Layout Containers
 *
 * These styles replicate the MainLayout structure from production
 * to ensure components render with the correct container hierarchy.
 */

/* Global box-sizing reset to match production */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.page-container-parent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  justify-content: space-between;
  margin: 0;
}

.page-container-child {
  flex: 1;
  overflow: hidden;
}


/* === buttons.css === */
/**
 * Global Button Styles
 *
 * Theme-driven button styling using semantic design tokens.
 *
 * Semantic Tokens Used:
 * - --font-family-base: Button font family
 * - --font-size-base: Button font size
 * - --font-weight-bold: Button font weight
 * - --color-brand-primary: Primary brand color for text and outlines
 * - --color-brand-secondary: Secondary brand color for backgrounds
 * - --color-brand-primaryLight: Hover state backgrounds
 * - --color-text-inverse: Text on dark backgrounds
 * - --color-surface-muted: Disabled state backgrounds
 * - --color-text-disabled: Disabled state text
 * - --spacing-xs, --spacing-sm: Button padding
 * - --radius-lg: Button border radius
 * - --transition-duration-normal: Transition timing
 * - --transition-easing: Transition easing function
 */

.btn {
  display: inline-block;
  font-family: var(--font-family-base, inherit);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-bold, 600);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: var(--color-brand-secondary, transparent);
  color: var(--color-brand-primary, inherit);
  border: 2px solid var(--color-brand-secondary, transparent);
  padding: 12px 25px;
  border-radius: var(--radius-lg, var(--btn-border-radius, 0.25rem));
  transition: all var(--transition-duration-normal, 0.3s) var(--transition-easing, ease);
}

.btn-primary-filled {
  background-color: var(--color-brand-secondary, #f8f892);
  color: var(--color-brand-primary, #2e1047);
  border-color: var(--color-brand-secondary, #f8f892);
}

.btn-primary-outline {
  background-color: transparent;
  color: var(--color-brand-primary, #007bff);
  border-color: var(--color-brand-primary, #007bff);
}

.btn-secondary-filled {
  background-color: var(--color-brand-secondary, #6c757d);
  color: var(--color-brand-primary, #000000);
  border-color: var(--color-brand-secondary, #6c757d);
}

.btn-secondary-inverse {
  background-color: transparent;
  color: var(--color-text-inverse, #ffffff);
  border-color: var(--color-brand-secondary, #6c757d);
}

.btn:disabled,
.btn.disabled {
  background-color: var(--color-surface-muted, #e0e0e0);
  color: var(--color-text-disabled, #6c757d);
  border-color: var(--color-surface-muted, #e0e0e0);
  cursor: not-allowed;
  opacity: 0.65;
}

.btn-extra {
  background-color: var(--color-brand-secondary, #f5f5f5);
  color: var(--color-brand-primary, #000000);
  border-color: var(--color-brand-secondary, transparent);
}

/* Brand-specific button border-radius styles */

/* Credimoney: all corners rounded (40px) */
[data-brand="credimoney"] .btn {
  border-radius: 40px;
}

/* Crediahora: all corners rounded (999px pill shape) */
[data-brand="crediahora"] .btn {
  border-radius: 999px;
}

/* Crediahora: primary filled button uses primary color (black) bg with inverse text (white) */
[data-brand="crediahora"] .btn-primary-filled {
  background-color: var(--color-brand-primary, #1d1d1b);
  color: var(--color-text-inverse, #ffffff);
  border-color: var(--color-brand-primary, #1d1d1b);
}

/* OleDinero: asymmetric border-radius with one square corner */
/* Default: bottom-right corner is square (most common) */
[data-brand="oledinero"] .btn {
  border-radius: 40px 40px 0px 40px;
}

/* OleDinero: primary filled button uses outline style (transparent bg, primary color border/text) */
/* Uses bottom-right square corner (same as default) */
[data-brand="oledinero"] .btn-primary-filled {
  background-color: transparent;
  color: var(--color-brand-primary, #032d8f);
  border-color: var(--color-brand-primary, #032d8f);
  border-radius: 40px 40px 0px 40px;
}

/* OleDinero: secondary filled button uses bottom-left square corner */
[data-brand="oledinero"] .btn-secondary-filled {
  border-radius: 40px 40px 40px 0px;
}

/* Alternative: bottom-left corner is square */
[data-brand="oledinero"] .btn.btn-square-left {
  border-radius: 40px 40px 40px 0px;
}

/* MaximaSeguridad OleDinero uses left square corner */
.maxima-seguridad--oledinero .btn {
  border-radius: 40px 40px 40px 0px !important;
}

/* Crediator: pill shape (999px) */
[data-brand="crediator"] .btn {
  border-radius: 999px;
}

/* Crediator: primary filled button uses light pink bg with dark text */
[data-brand="crediator"] .btn-primary-filled {
  background-color: #f2d5e0;
  color: #333333;
  border-color: #f2d5e0;
}

[data-brand="crediator"] .btn-primary-filled:hover {
  background-color: #e8c5d0;
  border-color: #e8c5d0;
}

/* CreditoAmigo: all corners rounded (40px) */
[data-brand="creditoamigo"] .btn {
  border-radius: 40px;
  font-size: 1.2rem;
  /* Production uses larger font for buttons */
  font-weight: 400;
  /* Production uses normal weight */
  padding: 8px 25px;
  /* Production padding */
}

/* CreditoAmigo: primary filled button uses primary color (blue) bg with inverse text (white) */
[data-brand="creditoamigo"] .btn-primary-filled {
  background-color: var(--color-brand-primary, #0000FF);
  color: var(--color-text-inverse, #ffffff);
  border-color: var(--color-brand-primary, #0000FF);
}

/* Credicheck: all corners rounded (40px) */
[data-brand="credicheck"] .btn {
  border-radius: 40px;
  font-size: 1.2rem;
  /* Production uses larger font for buttons */
  font-weight: 400;
  /* Production uses normal weight */
  padding: 8px 25px;
  /* Production padding */
}

/* Credicheck */
[data-brand="credicheck"] .btn-primary-filled {
  background-color: var(--color-brand-primary, #76bc74);
  color: var(--color-text-inverse, #18384e);
  border-color: var(--color-brand-primary, #76bc74);
}


/* CreditoClic: dark teal bg, lime text, 40px radius */
[data-brand="creditoclic"] .btn {
  background-color: #073034;
  color: #ADEF45;
  border-color: transparent;
  border-radius: 40px;
}

[data-brand="creditoclic"] .btn-primary-filled {
  background-color: #073034;
  color: #ADEF45;
  border-color: transparent;
}

/* CreditoPRO: dark gray bg, white text, pill shape */
[data-brand="creditopro"] .btn {
  background-color: #333333;
  color: rgb(243, 243, 243);
  border-color: #333333;
  border-radius: 999px;
}

[data-brand="creditopro"] .btn-primary-filled {
  background-color: #333333;
  color: rgb(243, 243, 243);
  border-color: #333333;
}

/* Credifix: light blue bg, navy text, 10px rounded corners */
[data-brand="credifix"] .btn {
  background-color: #96b4e6;
  color: #182d52;
  border-color: transparent;
  border-radius: 10px;
}

[data-brand="credifix"] .btn-primary-filled {
  background-color: #96b4e6;
  color: #182d52;
  border-color: transparent;
}

[data-brand="credifix"] .btn-extra {
  background-color: #182d52;
  color: #ffffff;
  border-color: #182d52;
}

/* Crediscore: purple bg, white text, pill shape */
[data-brand="crediscore"] .btn {
  background-color: #907ee8;
  color: #ffffff;
  border-color: transparent;
  border-radius: 999px;
}

[data-brand="crediscore"] .btn-primary-filled {
  background-color: #907ee8;
  color: #ffffff;
  border-color: transparent;
}

[data-brand="crediscore"] .btn-extra {
  background-color: #c5e5fc;
  color: #000000;
  border-color: #c5e5fc;
}

/* Creditando: outline style, navy text/border, square corners */
[data-brand="creditando"] .btn {
  background-color: transparent;
  color: #002449;
  border-color: #002449;
  border-radius: 0;
}

[data-brand="creditando"] .btn-extra {
  background-color: #002449;
  color: #c6fd00;
  border-color: #002449;
}

/* Crediticio: dark navy bg, salmon text, 40px radius */
[data-brand="crediticio"] .btn {
  background-color: #13233a;
  color: #ffa573;
  border-color: #13233a;
  border-radius: 40px;
  padding: 8px 25px;
}

[data-brand="crediticio"] .btn-primary-filled {
  background-color: #13233a;
  color: #ffa573;
  border-color: #13233a;
}

[data-brand="crediticio"] .btn-extra {
  background-color: #c5e5fc;
  color: #13233a;
  border-color: #c5e5fc;
}

/* Creditozas: black bg, blue text, pill shape */
[data-brand="creditozas"] .btn {
  background-color: #000000;
  color: #96b4e6;
  border-color: #000000;
  border-radius: 999px;
}

[data-brand="creditozas"] .btn-primary-filled {
  background-color: #000000;
  color: #96b4e6;
  border-color: #000000;
}

[data-brand="creditozas"] .btn-extra {
  background-color: transparent;
  color: #000000;
  border-color: #000000;
}

/* Credizoom: black bg, teal text, pill shape */
[data-brand="credizoom"] .btn {
  background-color: #000000;
  color: #4eb5a4;
  border-color: #000000;
  border-radius: 999px;
  font-size: 16.56px;
}

[data-brand="credizoom"] .btn-primary-filled {
  background-color: #000000;
  color: #4eb5a4;
  border-color: #000000;
}

[data-brand="credizoom"] .btn-extra {
  background-color: #4eb5a4;
  color: #000000;
  border-color: #4eb5a4;
}

/* Credihope: pill-shaped buttons per the brand guideline (28/05/26).
   Fixes low-contrast pairings found in the previous theme (white text on
   Tangerine background was nearly unreadable). */
[data-brand="credihope"] .btn {
  border-radius: 999px;
}

/* Acento: Smoke Black bg with Tangerine text (already the base .btn look
   via --color-brand-secondary/--color-brand-primary, kept explicit here) */
[data-brand="credihope"] .btn {
  background-color: #252827;
  color: #f9b233;
  border-color: #252827;
}

[data-brand="credihope"] .btn:hover {
  background-color: #1a1c1b;
  border-color: #1a1c1b;
}

/* Principal: Tangerine bg with Smoke Black text (was white-on-Tangerine) */
[data-brand="credihope"] .btn-primary-filled {
  background-color: #f9b233;
  color: #252827;
  border-color: #f9b233;
}

[data-brand="credihope"] .btn-primary-filled:hover {
  background-color: #f39200;
  border-color: #f39200;
}

/* Lineal: outlined, Smoke Black border/text (was Tangerine outline) */
[data-brand="credihope"] .btn-primary-outline {
  background-color: transparent;
  color: #252827;
  border-color: #252827;
}

[data-brand="credihope"] .btn-primary-outline:hover {
  background-color: rgba(37, 40, 39, 0.05);
}

/* Secundario: Washed (light) bg with Smoke Black text. This same Washed tone
   is also the default background for the shared "secondary-bg" section
   utility, so a subtle shadow (instead of relying on the fill alone) keeps
   the button visible when it sits on that same-colored background. */
[data-brand="credihope"] .btn-secondary-filled {
  background-color: #f4f4ef;
  color: #252827;
  border-color: #f4f4ef;
  box-shadow: 0 1px 4px rgba(37, 40, 39, 0.2);
}

[data-brand="credihope"] .btn-secondary-filled:hover {
  background-color: #e9e9e2;
  border-color: #e9e9e2;
}

/* Secondary inverse: for use on dark backgrounds */
[data-brand="credihope"] .btn-secondary-inverse {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* Extra: Fuchsia accent bg with Smoke Black text */
[data-brand="credihope"] .btn-extra {
  background-color: #ec8eba;
  color: #252827;
  border-color: #ec8eba;
}

/* Mastercredi: near-black bg, light gray text, 10px radius */
[data-brand="mastercredi"] .btn {
  background-color: #1a1a1a;
  color: #e2e8ed;
  border: none;
  border-radius: 10px;
}

[data-brand="mastercredi"] .btn-primary-filled {
  background-color: #1a1a1a;
  color: #e2e8ed;
  border: none;
}

[data-brand="mastercredi"] .btn-extra {
  background-color: #e2e8ed;
  color: #1a1a1a;
  border: none;
}


/* === backgrounds.css === */
/**
 * Background utility classes for multi-brand SPA
 * These classes modify container backgrounds based on brand theme
 */

/* White background - explicit white for clarity */
.white-bg.container {
  --container-background: #ffffff !important;
  --container-title-h1-color: var(--color-brand-primary) !important;
  --container-title-h2-color: var(--color-brand-primary) !important;
  --container-text-color: var(--color-text-primary) !important;
}

/* Gray background - used across all brands */
.gray-bg.container {
  --container-background: var(--color-brand-primaryLight) !important;
  --container-title-h1-color: var(--color-brand-primary) !important;
  --container-title-h2-color: var(--color-brand-primary) !important;
  --container-text-color: var(--color-text-primary) !important;
}

/* Secondary background - light brand color */
.secondary-bg.container {
  --container-background: var(--color-brand-primaryLight) !important;
  --container-title-h1-color: var(--color-brand-primary) !important;
  --container-title-h2-color: var(--color-brand-primary) !important;
  --container-text-color: var(--color-text-primary) !important;
}

/* Banner background - uses brand-specific background-basic-color-4 for inverted sections */
:root .banner-bg {
  background: var(--color-brand-primaryLight);

  &.container,
  & .container {
    --container-background: var(--color-brand-primaryLight) !important;
    --container-title-h1-color: var(--color-text-inverse);
    --container-title-h2-color: var(--color-text-inverse);
    --container-title-h3-color: var(--color-text-inverse);
    --container-text-color: var(--color-text-inverse);
    --container-text-strong-color: var(--color-text-inverse);
    --container-footer-color: var(--color-text-inverse);
  }

  & strong {
    color: var(--color-text-inverse);
  }

  & .hero-list li {
    color: var(--color-text-inverse);
  }

  & .hero-list__icon {
    --list-icon-color: var(--color-text-inverse);
  }

  & .icon {
    color: var(--color-text-inverse);
  }
}

/* MaximaSeguridad background - light gray for Crediahora */
:root .maxima-seguridad-bg {
  background: #f5f5f5;
}

/* Gradient inverse background - uses brand-specific inverse colors */
:root .bg-gradient-inverse {
  background: var(--bg-gradient-inverse-color, var(--color-brand-primary));

  &.container {
    --container-background: var(--bg-gradient-inverse-color, var(--color-brand-primary)) !important;
    --container-title-h1-color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
    --container-title-h2-color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
    --container-title-h3-color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
    --container-text-color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
    --container-text-strong-color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
    --container-footer-color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
  }

  &.container .btn {
    background-color: transparent !important;
    border-color: var(--color-brand-secondary) !important;
    color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
  }

  &.container .hero-list li,
  & .container .hero-list li {
    color: var(--bg-gradient-inverse-text-color, var(--color-text-inverse)) !important;
  }

  &.container .hero-list__icon,
  & .container .hero-list__icon {
    --list-icon-color: var(--color-brand-secondary) !important;
  }
}

/* Brand-specific overrides */
:root[data-brand="credimoney"] {
  /* Gray background sections */
  & .gray-bg.container {
    --container-background: #f1f1f1 !important;
  }

  & .gray-bg.container .hero-list__icon,
  & .gray-bg .container .hero-list__icon {
    --list-icon-color: var(--color-brand-primary) !important;
  }

  /* Secondary background sections - yellow background */
  & .secondary-bg.container {
    --container-background: var(--color-brand-secondary) !important;
  }

  & .secondary-bg.container .hero-list__icon,
  & .secondary-bg .container .hero-list__icon {
    --list-icon-color: #d8c7ff !important;
  }

  & .secondary-bg.container .btn:not(.btn-extra),
  & .secondary-bg .container .btn:not(.btn-extra) {
    background-color: #d8c7ff !important;
    border-color: #d8c7ff !important;
    color: var(--color-brand-primary) !important;
  }
}

/* Credimoney component-level data-brand support (for Storybook) */
.secondary-bg.container[data-brand="credimoney"] {
  --container-background: var(--color-brand-secondary) !important;
}

.secondary-bg.container[data-brand="credimoney"] .hero-list__icon,
.secondary-bg[data-brand="credimoney"] .container .hero-list__icon {
  --list-icon-color: #d8c7ff !important;
}

.secondary-bg.container[data-brand="credimoney"] .btn:not(.btn-extra),
.secondary-bg[data-brand="credimoney"] .container .btn:not(.btn-extra) {
  background-color: #d8c7ff !important;
  border-color: #d8c7ff !important;
  color: var(--color-brand-primary) !important;
}

:root[data-brand="oledinero"] {
  /* Gray background sections - use neutral gray instead of brand primaryLight */
  & .gray-bg.container {
    --container-background: #f1f1f1 !important;
    --container-text-color: var(--color-brand-primary) !important;
  }

  /* OleDinero buttons on gray-bg need transparent backgrounds with blue borders */
  & .gray-bg.container .btn,
  & .gray-bg .container .btn {
    background-color: transparent !important;
    border-color: var(--color-brand-primary) !important;
    color: var(--color-brand-primary) !important;
  }

  /* OleDinero list items and icons on gray-bg should be blue */
  & .gray-bg.container .hero-list li,
  & .gray-bg .container .hero-list li {
    color: var(--color-brand-primary) !important;
  }

  & .gray-bg.container .hero-list__icon,
  & .gray-bg .container .hero-list__icon {
    --list-icon-color: var(--color-brand-primary) !important;
    color: var(--color-brand-primary) !important;
  }

  /* Exclude ProductosFinancieros which has its own dark blue background styling */
  & .secondary-bg.container:not(.container-productos-financieros) {
    --container-background: #d7ff7b !important;
    --container-text-color: #022d8e !important;
  }

  /* OleDinero text color on secondary-bg (exclude ProductosFinancieros) */
  & .secondary-bg.container:not(.container-productos-financieros) .container__content :is(li, p),
  & .secondary-bg .container:not(.container-productos-financieros) .container__content :is(li, p) {
    color: var(--container-text-color) !important;
  }

  /* OleDinero buttons on secondary-bg need transparent backgrounds with blue borders (exclude ProductosFinancieros) */
  & .secondary-bg.container:not(.container-productos-financieros) .btn,
  & .secondary-bg .container:not(.container-productos-financieros) .btn {
    background-color: transparent !important;
    border-color: var(--color-brand-primary) !important;
    color: var(--color-brand-primary) !important;
  }

  /* OleDinero list icons on secondary-bg should be blue (exclude ProductosFinancieros) */
  & .secondary-bg.container:not(.container-productos-financieros) .hero-list__icon,
  & .secondary-bg .container:not(.container-productos-financieros) .hero-list__icon {
    --list-icon-color: var(--color-brand-primary) !important;
    color: var(--color-brand-primary) !important;
  }
}

/* OleDinero component-level data-brand support (for Storybook) */
[data-brand="oledinero"] .gray-bg.container {
  --container-background: #f1f1f1 !important;
  --container-text-color: #022d8e !important;
}

[data-brand="oledinero"] .gray-bg.container .btn,
[data-brand="oledinero"] .gray-bg .container .btn {
  background-color: transparent !important;
  border-color: #022d8e !important;
  color: #022d8e !important;
}

/* OleDinero list items and icons on gray-bg should be blue */
[data-brand="oledinero"] .gray-bg.container .hero-list li,
[data-brand="oledinero"] .gray-bg .container .hero-list li {
  color: #022d8e !important;
}

[data-brand="oledinero"] .gray-bg.container .hero-list__icon,
[data-brand="oledinero"] .gray-bg .container .hero-list__icon {
  --list-icon-color: #022d8e !important;
  color: #022d8e !important;
}

/* OleDinero list icons on secondary-bg should be blue (for Storybook) */
[data-brand="oledinero"] .secondary-bg.container .hero-list__icon,
[data-brand="oledinero"] .secondary-bg .container .hero-list__icon {
  --list-icon-color: #022d8e !important;
  color: #022d8e !important;
}

/* ============================================================================
   Crediator brand overrides
   ============================================================================ */

:root[data-brand="crediator"] {
  /* Evaluacion section classes - set via CSS since JS camelCase→kebab conversion
     drops hyphens before digits (section0 vs section-0) */
  --evaluacion-section-0-class: gray-bg;
  --evaluacion-section-1-class: white-bg;
  --evaluacion-section-2-class: gray-bg;
  --evaluacion-title-class: banner-bg;

  /* Default container H1/H2 should be dark gray, not pink */
  & .container {
    --container-title-h1-color: #333333;
    --container-title-h2-color: #333333;
  }

  /* White background sections */
  & .white-bg.container {
    --container-title-h1-color: #333333 !important;
    --container-title-h2-color: #333333 !important;
  }

  /* Gray background sections */
  & .gray-bg.container {
    --container-title-h1-color: #333333 !important;
    --container-title-h2-color: #333333 !important;
  }

  /* bg-gradient-inverse: text should be lime green */
  & .bg-gradient-inverse.container {
    --container-title-h1-color: #cdf63e !important;
    --container-title-h2-color: #cdf63e !important;
    --container-text-color: #cdf63e !important;
    --container-text-strong-color: #cdf63e !important;
  }

  /* Secondary background sections - gradient from teal to lime green */
  /* Exclude components that have their own background styling */
  & .secondary-bg.container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) {
    --container-background: linear-gradient(135deg, #93c7bf 0%, #cdf63e 100%) !important;
    background: linear-gradient(135deg, #93c7bf 0%, #cdf63e 100%) !important;
    --container-text-color: #333333 !important;
    --container-title-h1-color: #333333 !important;
    --container-title-h2-color: #333333 !important;
  }

  /* Highlighted text should be pink */
  & .secondary-bg.container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) strong,
  & .secondary-bg .container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) strong {
    color: #f55f99 !important;
  }

  /* Primary button on secondary-bg */
  & .secondary-bg.container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-secondary-filled,
  & .secondary-bg .container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-secondary-filled {
    background-color: #f2d5e0 !important;
    border-color: #f2d5e0 !important;
    color: #333333 !important;
  }

  /* Secondary button (login) on secondary-bg */
  & .secondary-bg.container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-extra,
  & .secondary-bg .container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-extra {
    background-color: #00593f !important;
    border-color: #00593f !important;
    color: #f55f99 !important;
  }

  /* Gray background sections - light gray instead of pink */
  & .gray-bg.container {
    --container-background: #f2f2f2 !important;
  }

  /* Banner background - dark green with white text */
  & .banner-bg {
    background: #00593f !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #00593f !important;
    --container-title-h1-color: #ffffff !important;
    --container-title-h2-color: #ffffff !important;
    --container-title-h3-color: #ffffff !important;
    --container-text-color: #ffffff !important;
    --container-text-strong-color: #ffffff !important;
    --container-footer-color: #ffffff !important;
  }
}

/* Crediator component-level data-brand support (for Storybook) */
.secondary-bg.container[data-brand="crediator"]:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) {
  --container-background: linear-gradient(135deg, #93c7bf 0%, #cdf63e 100%) !important;
  background: linear-gradient(135deg, #93c7bf 0%, #cdf63e 100%) !important;
  --container-text-color: #333333 !important;
}

.secondary-bg.container[data-brand="crediator"]:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) strong,
.secondary-bg[data-brand="crediator"] .container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) strong {
  color: #f55f99 !important;
}

.secondary-bg.container[data-brand="crediator"]:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-secondary-filled,
.secondary-bg[data-brand="crediator"] .container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-secondary-filled {
  background-color: #f2d5e0 !important;
  border-color: #f2d5e0 !important;
  color: #333333 !important;
}

.secondary-bg.container[data-brand="crediator"]:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-extra,
.secondary-bg[data-brand="crediator"] .container:not(.container-productos-financieros):not(.container-videos-curso):not(.container-ventajas-videoid):not(.hero-container-mejora-perfil):not(.hero-container-panel-control) .btn.btn-extra {
  background-color: #00593f !important;
  border-color: #00593f !important;
  color: #f55f99 !important;
}

/* ============================================================================
   Credifix brand overrides — primary is pink but headings should be navy
   ============================================================================ */

:root[data-brand="credifix"] {
  & .container {
    --container-title-h1-color: #182d52;
    --container-title-h2-color: #182d52;
  }

  /* Credifix uses Roboto Light (300) for all H1/H2 headings */
  & .container .container__content h1,
  & .container .container__content h2,
  & .section-services .section__title,
  & .section-news .section__title,
  & .container-text-video h1,
  & .contacto-tramites-online__title,
  & .legal-page h2 {
    font-weight: 800;
  }

  & .white-bg.container {
    --container-title-h1-color: #182d52 !important;
    --container-title-h2-color: #182d52 !important;
  }

  & .gray-bg.container {
    --container-title-h1-color: #182d52 !important;
    --container-title-h2-color: #182d52 !important;
  }

  & .secondary-bg.container {
    --container-background: #d9e4f5 !important;
    --container-title-h1-color: #182d52 !important;
    --container-title-h2-color: #182d52 !important;
  }
}

/* ============================================================================
   Credihope brand overrides — primary (Tangerine, #f9b233) and primaryLight
   (#f8c978) are both light/bright shades of the same orange, so the shared
   white-bg/gray-bg/secondary-bg utilities (background = primaryLight, text =
   primary) collapse into a near-unreadable orange-on-orange look, and
   banner-bg (bg = primaryLight, text = white) is just as unreadable. Force
   Smoke Black headings/text on the light utilities, and give banner-bg a
   Smoke Black background so its white text actually works — matching the
   guideline's dark sections (e.g. the footer).
   ============================================================================ */

:root[data-brand="credihope"] {
  & .container {
    --container-title-h1-color: #252827;
    --container-title-h2-color: #252827;
    --container-text-strong-color: #252827;
    --container-footer-color: #252827;
  }

  & .white-bg.container {
    --container-title-h1-color: #252827 !important;
    --container-title-h2-color: #252827 !important;
  }

  & .gray-bg.container {
    --container-background: #f4f4ef !important;
    --container-title-h1-color: #252827 !important;
    --container-title-h2-color: #252827 !important;
  }

  & .secondary-bg.container {
    --container-background: #f4f4ef !important;
    --container-title-h1-color: #252827 !important;
    --container-title-h2-color: #252827 !important;
    --container-text-color: #252827 !important;
  }

  & .banner-bg {
    background: #252827 !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #252827 !important;
    --container-title-h1-color: #ffffff !important;
    --container-title-h2-color: #ffffff !important;
    --container-title-h3-color: #ffffff !important;
    --container-text-color: #ffffff !important;
    --container-text-strong-color: #ffffff !important;
    --container-footer-color: #ffffff !important;
  }
}

/* Credihope component-level data-brand support (for Storybook, where the
   brand attribute sits on the component root rather than a :root ancestor) */
[data-brand="credihope"] .white-bg.container,
.white-bg.container[data-brand="credihope"] {
  --container-title-h1-color: #252827 !important;
  --container-title-h2-color: #252827 !important;
}

[data-brand="credihope"] .gray-bg.container,
.gray-bg.container[data-brand="credihope"] {
  --container-background: #f4f4ef !important;
  --container-title-h1-color: #252827 !important;
  --container-title-h2-color: #252827 !important;
}

[data-brand="credihope"] .secondary-bg.container,
.secondary-bg.container[data-brand="credihope"] {
  --container-background: #f4f4ef !important;
  --container-title-h1-color: #252827 !important;
  --container-title-h2-color: #252827 !important;
  --container-text-color: #252827 !important;
}

[data-brand="credihope"] .banner-bg.container,
[data-brand="credihope"] .banner-bg .container,
.banner-bg.container[data-brand="credihope"] {
  --container-background: #252827 !important;
  --container-title-h1-color: #ffffff !important;
  --container-title-h2-color: #ffffff !important;
  --container-title-h3-color: #ffffff !important;
  --container-text-color: #ffffff !important;
  --container-text-strong-color: #ffffff !important;
  --container-footer-color: #ffffff !important;
}

/* ============================================================================
   Crediscore brand overrides — primary is purple but headings should be black
   ============================================================================ */

:root[data-brand="crediscore"] {
  & .container {
    --container-title-h1-color: #000000;
    --container-title-h2-color: #000000;
  }

  & .white-bg.container {
    --container-title-h1-color: #000000 !important;
    --container-title-h2-color: #000000 !important;
  }

  & .gray-bg.container {
    --container-title-h1-color: #000000 !important;
    --container-title-h2-color: #000000 !important;
  }

  & .secondary-bg.container {
    --container-background: #e1f1fc !important;
    --container-title-h1-color: #000000 !important;
    --container-title-h2-color: #000000 !important;
  }

  & .banner-bg {
    background: #000000 !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #000000 !important;
    --container-title-h1-color: #907ee8 !important;
    --container-title-h2-color: #907ee8 !important;
    --container-title-h3-color: #907ee8 !important;
    --container-text-color: #907ee8 !important;
    --container-text-strong-color: #907ee8 !important;
    --container-footer-color: #907ee8 !important;
  }
}

/* ============================================================================
   Creditando brand overrides — Manrope ExtraBold (800) for all headings
   ============================================================================ */

:root[data-brand="creditando"] {
  /* Creditando uses Manrope ExtraBold (800) for all H1/H2 headings */
  & .container .container__content h1,
  & .container .container__content h2,
  & .section-services .section__title,
  & .section-news .section__title,
  & .container-text-video h1,
  & .contacto-tramites-online__title,
  & .contacto-hero-form__title,
  & .legal-page h2 {
    font-weight: 800;
  }

  & .banner-bg {
    background: #002449 !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #002449 !important;
    --container-title-h1-color: #ddecee !important;
    --container-title-h2-color: #ddecee !important;
    --container-title-h3-color: #ddecee !important;
    --container-text-color: #ddecee !important;
    --container-text-strong-color: #ddecee !important;
    --container-footer-color: #ddecee !important;
  }
}

/* ============================================================================
   Credizoom brand overrides — primary is teal but H2s should be black
   ============================================================================ */

:root[data-brand="credizoom"] {
  & .container {
    --container-title-h2-color: #000000;
  }

  /* Credizoom uses LemonMilk Medium (500) for all titles */
  /* High-specificity rule to override Container's !important font-family */
  & .container .container__content h1,
  & .container .container__content h2,
  & .container .container__content h3,
  & .section-services .section__title,
  & .section-news .section__title,
  & .container-text-video h1,
  & .contacto-tramites-online__title,
  & .contacto-hero-form__title,
  & .legal-page h2 {
    font-family: "LemonMilk", sans-serif !important;
    font-weight: 500;
  }

  /* Catch-all for headings outside Container (modals, standalone sections) */
  & h1, & h2, & h3 {
    font-family: "LemonMilk", sans-serif !important;
    font-weight: 500;
  }

  /* Body text uses AdobeClean Medium (500) */
  & p, & li, & span, & a, & label, & input, & textarea, & select, & button {
    font-weight: 500;
  }

  & .white-bg.container {
    --container-title-h2-color: #000000 !important;
  }

  & .gray-bg.container {
    --container-title-h2-color: #000000 !important;
  }

  & .secondary-bg.container {
    --container-background: #f4f8f9 !important;
    --container-title-h2-color: #000000 !important;
  }

  & .banner-bg {
    background: #000000 !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #000000 !important;
    --container-title-h1-color: #80e8d7 !important;
    --container-title-h2-color: #80e8d7 !important;
    --container-title-h3-color: #80e8d7 !important;
    --container-text-color: #80e8d7 !important;
    --container-text-strong-color: #80e8d7 !important;
    --container-footer-color: #80e8d7 !important;
  }
}

/* ============================================================================
   Crediticio brand overrides — banner-bg dark navy, secondary-bg coral
   ============================================================================ */

:root[data-brand="crediticio"] {
  & .secondary-bg.container {
    --container-background: #ffa573 !important;
    --container-title-h1-color: #13233a !important;
    --container-title-h2-color: #13233a !important;
    --container-text-color: #13233a !important;
    --container-text-strong-color: #13233a !important;
    --container-footer-color: #13233a !important;
  }

  & .banner-bg {
    background: #13233a !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #13233a !important;
    --container-title-h1-color: #c5e5fc !important;
    --container-title-h2-color: #c5e5fc !important;
    --container-title-h3-color: #c5e5fc !important;
    --container-text-color: #c5e5fc !important;
    --container-text-strong-color: #c5e5fc !important;
    --container-footer-color: #c5e5fc !important;
  }

  /* Beneficios section: light blue bg with dark text */
  & .hero-ley-oportunidad--crediticio.banner-bg {
    background: #e3f2fd !important;
  }

  & .hero-ley-oportunidad--crediticio.banner-bg.container,
  & .hero-ley-oportunidad--crediticio.banner-bg .container {
    --container-background: #e3f2fd !important;
    --container-title-h1-color: #13233a !important;
    --container-title-h2-color: #13233a !important;
    --container-title-h3-color: #13233a !important;
    --container-text-color: #13233a !important;
    --container-text-strong-color: #13233a !important;
    --container-footer-color: #13233a !important;
  }

  & .hero-ley-oportunidad--crediticio.banner-bg .hero-list li {
    color: #13233a !important;
  }

  & .hero-ley-oportunidad--crediticio.banner-bg .hero-list__icon {
    --list-icon-color: #ffa573 !important;
    color: #ffa573 !important;
  }

  & .hero-ley-oportunidad--crediticio.banner-bg strong {
    color: #13233a !important;
  }
}

/* ============================================================================
   Creditozas brand overrides — banner-bg black, secondary-bg light gray
   ============================================================================ */

:root[data-brand="creditozas"] {
  & .secondary-bg.container {
    --container-background: rgba(229, 234, 234, 0.5) !important;
    --container-title-h1-color: #000000 !important;
    --container-title-h2-color: #000000 !important;
    --container-text-color: #000000 !important;
    --container-text-strong-color: #000000 !important;
    --container-footer-color: #000000 !important;
  }

  & .banner-bg {
    background: #000000 !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #000000 !important;
    --container-title-h1-color: #e5eaea !important;
    --container-title-h2-color: #e5eaea !important;
    --container-title-h3-color: #e5eaea !important;
    --container-text-color: #e5eaea !important;
    --container-text-strong-color: #e5eaea !important;
    --container-footer-color: #e5eaea !important;
  }

  /* HeroLeyOportunidad: override white-bg to #f2f4f4 */
  & .hero-ley-oportunidad.white-bg.container {
    --container-background: #f2f4f4 !important;
    background-color: #f2f4f4 !important;
  }
}

/* ============================================================================
   Mastercredi brand overrides — banner-bg should be dark #1a1a1a
   ============================================================================ */

:root[data-brand="mastercredi"] {
  /* Mastercredi uses Coolvetica for all titles */
  & .container .container__content h1,
  & .container .container__content h2,
  & .container .container__content h3,
  & .section-services .section__title,
  & .section-news .section__title,
  & .container-text-video h1,
  & .contacto-tramites-online__title,
  & .contacto-hero-form__title,
  & .legal-page h2 {
    font-family: "Coolvetica", sans-serif !important;
  }

  /* Catch-all for headings outside Container */
  & h1, & h2, & h3 {
    font-family: "Coolvetica", sans-serif !important;
  }

  /* Body text uses AdobeClean with weight 500 */
  & p, & li, & span, & a, & label, & input, & textarea, & select, & button {
    font-weight: 500;
  }

  /* All buttons: 16.56px, 600 weight */
  & .btn {
    font-size: 16.56px !important;
    font-weight: 600 !important;
  }

  & .banner-bg {
    background: #1a1a1a !important;
  }

  & .banner-bg.container,
  & .banner-bg .container {
    --container-background: #1a1a1a !important;
    --container-title-h1-color: #e2e8ed !important;
    --container-title-h2-color: #e2e8ed !important;
    --container-title-h3-color: #e2e8ed !important;
    --container-text-color: #e2e8ed !important;
    --container-text-strong-color: #e2e8ed !important;
    --container-footer-color: #e2e8ed !important;
  }
}

/* ============================================================================
   Creditoplan brand overrides — banner-bg should be dark #1a1a1a
   ============================================================================ */

:root[data-brand="credisolve"] {


  /* Body text uses AdobeClean with weight 500 */
  & p, & li,& label, & input, & textarea, & select,& a, & span {
    font-weight: 400;
  }

  &  button{
    font-weight: 700;
  }

  /* All buttons: 16.56px, 600 weight */
  & .btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-surface-base);
  }
 
  & .banner-bg {
    background: var(--color-brand-primary) !important;
  }

  & .banner-bg {
    & p{
      & strong{
        color: var(--color-brand-primaryLight)  !important;;
      } 
    }
  }
  
  & .hero-container.container,
  & .hero-container .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-text-secondary)  !important;
    --container-text-strong-color: var(--color-text-secondary) !important;
  } 

  & .banner-bg.container,
  & .banner-bg .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-brand-primaryLight)  !important;
    --container-text-strong-color: var(--color-brand-primaryLight) !important;
  } 
}

/* ============================================================================
   Credipay brand overrides — banner-bg should be dark #1a1a1a
   ============================================================================ */

:root[data-brand="credipay"] {


  /* Body text uses AdobeClean with weight 500 */
  & p, & li,& label, & input, & textarea, & select,& a, & span {
    font-weight: 400;
  }

  &  button{
    font-weight: 700;
  }

  /* All buttons: 16.56px, 600 weight */
  & a.btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-surface-base);
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);

    &.btn-primary-outline{
      background: transparent;
      border-color: var(--color-brand-primary);
      color: var(--color-brand-primary);
    }
  }
 
  & .banner-bg {
    background: var(--color-brand-primaryDark) !important;
  }

  & .banner-bg {
    & p{
      font-weight: 800 !important;

      & strong{
        color: var(--color-brand-primaryLight)  !important;;
      } 
    }
  }
  
  & .hero-container.container,
  & .hero-container .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-text-secondary)  !important;
    --container-text-strong-color: var(--color-text-secondary) !important;
  } 

  & .banner-bg.container,
  & .banner-bg .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-brand-primaryLight)  !important;
    --container-text-strong-color: var(--color-brand-primaryLight) !important;
  } 
}


/* ============================================================================
   Creditoplan brand overrides — banner-bg should be dark #1a1a1a
   ============================================================================ */

:root[data-brand="creditoplan"] {


  /* Body text uses AdobeClean with weight 500 */
  & p, & li,& label, & input, & textarea, & select,& a, & span {
    font-weight: 400;
  }

  &  button{
    font-weight: 700;
  }

  /* All buttons: 16.56px, 600 weight */
  & .btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-brand-primaryDark);

    &.btn-primary-filled{
      color: var(--color-brand-primaryLight);
    }
  }
 
  & .banner-bg {
    background: var(--color-brand-primaryDark) !important;
  }

  & .banner-bg {
    & p{
      font-weight: 800 !important;

      & strong{
        color: var(--color-brand-primaryLight)  !important;;
      } 
    }
  }
  
  & .hero-container.container,
  & .hero-container .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-text-secondary)  !important;
    --container-text-strong-color: var(--color-text-secondary) !important;
  } 

  & .banner-bg.container,
  & .banner-bg .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-brand-primaryLight)  !important;
    --container-text-strong-color: var(--color-brand-primaryLight) !important;
  } 
}

/* ============================================================================
   Creditoplan brand overrides — banner-bg should be dark #1a1a1a
   ============================================================================ */

:root[data-brand="credital"] {


  /* Body text uses AdobeClean with weight 500 */
  & p, & li,& label, & input, & textarea, & select,& a, & span {
    font-weight: 400;
  }

  &  button{
    font-weight: 700;
  }

  /* All buttons: 16.56px, 600 weight */
  & .btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-surface-base);
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);

    &.btn-primary-outline{
      background: transparent;
      border-color: var(--color-brand-primary);
      color: var(--color-brand-primary);
    }

    &.btn-primary-filled{
      color: var(--color-brand-primaryLight);
    }
  }
 
  & .banner-bg {
    background: var(--color-text-primary) !important;
  }

  & .banner-bg {
    & p{
      font-weight: 800 !important;

      & strong{
        color: var(--color-brand-primaryLight)  !important;;
      } 
    }
  }
  
  & .hero-container.container,
  & .hero-container .container {
    --container-title-h1-color: var(--color-brand-primary) !important;
    --container-title-h2-color: var(--color-brand-primary)  !important;
    --container-title-h3-color: var(--color-brand-primary)  !important;
    --container-text-color: var(--color-text-primary)  !important;
    --container-text-strong-color: var(--color-text-primary) !important;
  } 

  & .banner-bg.container,
  & .banner-bg .container {
    --container-title-h1-color: var(--color-text-secondary) !important;
    --container-title-h2-color: var(--color-text-secondary)  !important;
    --container-title-h3-color: var(--color-text-secondary)  !important;
    --container-text-color: var(--color-brand-primaryLight)  !important;
    --container-text-strong-color: var(--color-brand-primaryLight) !important;
  } 
}

/* === contract.css === */
.container-contract {
  -webkit-box-shadow: 4px 4px 10px 0px rgba(74, 67, 74, 0.4);
  -moz-box-shadow: 4px 4px 10px 0px rgba(74, 67, 74, 0.4);
  box-shadow: 4px 4px 10px 0px rgba(74, 67, 74, 0.4);
  max-height: 700px;
  max-width: 100%;
  overflow: auto;
  border-radius: 10px;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  background-color: #fff;
}

.header-contract {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding-right: 1rem;
  font-weight: bold;
  z-index: 10;
  display: flex;
  justify-content: end;
  align-items: center;
}

.header-contract img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.content-contract {
  padding: 1.2rem;
  line-height: 1.5;
}

.container-contract p {
  line-height: 2rem;
  letter-spacing: 1px;
}
.container-contract b {
  font-weight: 700;
}

.d-flex {
  display: flex;
}
.header-template {
  font-size: 3rem;
}
.justify-content-center {
  justify-content: center;
}
.mr-1 {
  margin-right: 1rem;
}
.p-right {
  display: grid;
  grid-template-columns: 10% 90%;
}
.p-right .strong {
  grid-column: 1/2;
}
.p-right .span {
  grid-column: 2/3;
}
.text-center {
  text-align: center;
}
.b-right {
  margin-right: 0.5rem;
}
.m-left {
  margin-left: 0.5rem;
}
.li {
  padding: 0.3rem;
}

.table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #000;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.table-header {
  display: contents;
  font-weight: bold;
  color: #000;
}
.table-header {
  display: contents;
}
.t-header {
  background-color: #ffc000;
}
.table-cell {
  border: 1px solid #000;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-cell:first-child {
  font-weight: bold;
  text-align: left;
}
.table-cell:nth-child(2) {
  font-weight: bold;
}
.table-cell:nth-child(3) {
  font-weight: bold;
}
.degree {
  margin-left: 1.5rem;
}
.ul {
  margin: 0;
}
.li {
  line-height: 1rem;
  list-style: circle !important;
}

.fw-underline,
.text-underline {
  text-decoration: underline;
}
.li-s {
  line-height: 1.5rem;
}
.table {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  border: 2px solid #000;
  width: 100%;
  text-align: left;
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.table-header {
  display: contents;
  background-color: #ffd700;
  font-weight: bold;
  text-align: center;
  color: black;
}
.table-row {
  display: contents;
}
.table-cell {
  border: 1px solid #000;
}
.table-cell:nth-child(1) {
  font-weight: bold;
}
.table-cell:nth-child(2) {
  text-align: center;
}
.table-cell:nth-child(3) {
  text-align: center;
  font-weight: bold;
  color: #000;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border: 2px solid black;
  font-weight: bold;
  margin-top: 1rem;
}

.grid-header {
  font-weight: bold;
  background-color: #f2b705;
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.grid-item .green {
  color: green;
}
.grid-item {
  border: 1px solid black;
  padding: 10px;
}
.grid-item .highlight {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.highlight {
  font-weight: bold;
  padding: 10px;
}

/* Mobile responsiveness for contract */
@media (max-width: 600px) {
  .container-contract {
    max-height: 400px;
    border-radius: 6px;
  }

  .content-contract {
    padding: 0.8rem;
    font-size: 0.85rem;
  }

  .container-contract p {
    line-height: 1.6rem;
    letter-spacing: 0;
  }

  .header-contract img {
    width: 80px;
    height: 80px;
  }

  .table {
    grid-template-columns: 1fr;
    font-size: 0.8rem;
  }

  .table-cell {
    padding: 3px;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .p-right {
    grid-template-columns: 1fr;
  }
}


/* === styles.css === */
/**
 * ArticleHeader Styles
 *
 * Styling for the article page header.
 * Features:
 * - Centered subtitle with "Noticias de" text and brand logo
 * - Centered article title (h1)
 * - Brand-specific font families, weights, and colors
 * - Responsive sizing
 */

:root {
  & .article__header {
    --container-background: transparent;
    --container-content-padding-bottom: 0;

    & .container__content {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 0;
    }

    & .article__header-subtitle {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 14px;
    }

    & .article__header-logo {
      height: 20px;
      width: auto;
    }

    & h1 {
      margin: 0;
      text-align: center;
      font-size: clamp(1.5rem, 6vw, 43.2px);
      line-height: 1.2;
    }
  }

  /* Credimoney styles */
  & .article__header--credimoney {
    & .article__header-subtitle {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 400;
      color: rgb(46, 16, 71);
    }

    & h1 {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 300;
      font-size: 43.2px;
      line-height: 51.84px;
      color: rgb(46, 16, 71);
    }
  }

  /* Crediahora styles */
  & .article__header--crediahora {
    & .article__header-subtitle {
      font-family: Montserrat, sans-serif;
      font-weight: 400;
      color: rgb(29, 29, 27);
    }

    & h1 {
      font-family: Montserrat, sans-serif;
      font-weight: 900;
      font-size: 40.32px;
      line-height: 48.384px;
      color: rgb(29, 29, 27);
    }
  }

  /* OleDinero styles */
  & .article__header--oledinero {
    & .article__header-subtitle {
      font-family: Poppins, sans-serif;
      font-weight: 500;
      color: rgb(255, 255, 255);
    }

    & h1 {
      font-family: Poppins, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: rgb(215, 255, 123);
    }
  }

  /* CreditoAmigo styles */
  & .article__header--creditoamigo {
    & .article__header-subtitle {
      font-family: Seitu, sans-serif;
      font-weight: 400;
      color: #1D2C56;
    }

    & h1 {
      font-family: Seitu, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #0000FF;
    }
  }

  /* CreditoClic styles */
  & .article__header--creditoclic {
    & .article__header-subtitle {
      font-family: Harabara, sans-serif;
      font-weight: 400;
      color: #073034;
    }

    & h1 {
      font-family: Harabara, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #073034;
    }
  }

  /* CreditoPRO styles - white text on blue background */
  & .article__header--creditopro {
    & .article__header-subtitle {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      color: #ffffff;
    }

    & h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #ffffff;
    }
  }

  /* Crediator styles */
  & .article__header--crediator {
    & .article__header-subtitle {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      color: #333333;
    }

    & h1 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #f55f99;
    }
  }

  /* Credifix styles */
  & .article__header--credifix {
    & .article__header-subtitle {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      color: #182d52;
    }

    & h1 {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #ff0086;
    }
  }

  /* Crediscore styles */
  & .article__header--crediscore {
    & .article__header-subtitle {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      color: #000000;
    }

    & h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #907ee8;
    }
  }

  /* Creditando styles */
  & .article__header--creditando {
    & .article__header-subtitle {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      color: #002449;
    }

    & h1 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #002449;
    }
  }

  /* Crediticio styles */
  & .article__header--crediticio {
    & .article__header-subtitle {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      color: #000000;
    }

    & h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #13233a;
    }
  }

  /* Creditozas styles */
  & .article__header--creditozas {
    & .article__header-subtitle {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      color: #000000;
    }

    & h1 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #000000;
    }
  }

  /* Credizoom styles */
  & .article__header--credizoom {
    & .article__header-subtitle {
      font-family: "AdobeClean", sans-serif;
      font-weight: 400;
      color: #000000;
    }

    & h1 {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #4eb5a4;
    }
  }

  /* Mastercredi styles */
  & .article__header--mastercredi {
    & .article__header-subtitle {
      font-family: "AdobeClean", sans-serif;
      font-weight: 400;
      color: #1a1a1a;
    }

    & h1 {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #1a1a1a;
    }
  }
}

/* Credicheck styles */
& .article__header--credicheck {
  & .article__header-subtitle {
    font-family: Funnel Display, sans-serif;
    font-weight: 400;
    color: #76bc74;
  }

  & h1 {
    font-family: Funnel Display, sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #18384e;
  }
}

@media (width >=1024px) {
  :root {
    & .article__header {
      & .container__content {
        max-width: 960px;
        height: 446px;
        margin: 0 auto;
        justify-content: center;
      }

      & .article__header-subtitle {
        font-size: 16px;
      }

      & .article__header-logo {
        height: 24px;
      }
    }
  }
}


/* === styles.css === */
/**
 * ArticlePage Component Styles
 *
 * Theme-driven styles for blog article detail page.
 * Supports brand-specific customization via CSS custom properties.
 * Matches production structure with blog-article__header and article__wrapper
 */

:root {
  & .blog-article {
    --blog-article-header-padding-top: 0;
    --blog-article-header-padding-bottom: 65px;
    --blog-article-header-column-flex-gap: 30px;
    --blog-article-header-text-font-size: 1.5rem;
    --blog-article-header-text-column-flex-gap: 20px;
    --blog-article-header-logo-width: 100px;

    --blog-article-horizontal-padding: 15px;
    --blog-article-vertical-padding: 75px;
    --blog-article-max-width: none;
    --blog-article-margin-top: -75px;
    --blog-article-column-flex-gap: 20px;
    --blog-article-text-font-size: 1.2rem;
    --blog-article-text-line-height: 1.5;
    --blog-article-subtitle-font-size: 1.6rem;
    --blog-article-subtitle-line-height: 1.6;

    --blog-article-image-border-radius: 12px;
  }
}

@media (width >=768px) {
  :root {
    & .blog-article {
      --blog-article-max-width: 75%;
      --blog-article-horizontal-padding: 26px;
    }
  }
}

@media (width >=1024px) {
  :root {
    & .blog-article {
      --blog-article-header-padding-top: 0;
    }
  }
}

@media (width >=1300px) {
  :root {
    & .blog-article {
      --blog-article-max-width: 1024px;
    }
  }
}

.blog-article {

  /* Article Header (inside page-header__content) */
  & .blog-article__header {
    display: flex;
    flex-direction: column;
    padding-top: var(--blog-article-header-padding-top);
    padding-bottom: var(--blog-article-header-padding-bottom);
    padding-left: var(--blog-article-horizontal-padding);
    padding-right: var(--blog-article-horizontal-padding);
    max-width: var(--blog-article-max-width);
    margin-left: auto;
    margin-right: auto;
    gap: var(--blog-article-header-column-flex-gap);

    & p {
      display: flex;
      gap: var(--blog-article-header-text-column-flex-gap);
      justify-content: center;
      align-items: center;

      & small {
        font-size: var(--blog-article-header-text-font-size);
      }
    }

    & img {
      width: var(--blog-article-header-logo-width);
    }

    & h1 {
      font-size: var(--text-2xl-font-size);
      line-height: var(--text-2xl-line-height);
      text-align: center;
    }
  }

  /* Article Wrapper */
  & .article__wrapper {
    & article {
      margin-top: var(--blog-article-margin-top);
      margin-left: auto;
      margin-right: auto;
      max-width: var(--blog-article-max-width);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--blog-article-column-flex-gap);
      padding-left: var(--blog-article-horizontal-padding);
      padding-right: var(--blog-article-horizontal-padding);
      padding-bottom: var(--blog-article-vertical-padding);
      font-size: var(--blog-article-text-font-size);
      line-height: var(--blog-article-text-line-height);

      & div {
        display: flex;
        flex-direction: column;
        gap: var(--blog-article-column-flex-gap);
      }

      & h2 {
        font-size: var(--blog-article-subtitle-font-size);
        line-height: var(--blog-article-subtitle-line-height);
        margin: 0;
      }

      & p {
        margin: 0;
      }

      & img {
        border-radius: var(--blog-article-image-border-radius);
      }
    }
  }
}

/* Brand-specific styles */

/* Credimoney */
.blog-article[data-brand="credimoney"] {
  & .blog-article__header {
    & p small {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 24.48px;
      font-weight: 400;
      color: rgb(46, 16, 71);
    }

    & h1 {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 39.6px;
      font-weight: 300;
      line-height: 39.6px;
      color: rgb(46, 16, 71);
    }
  }

  & .article__wrapper article {
    font-family: "Helvetica Neue", sans-serif;
    color: rgb(46, 16, 71);

    & p {
      font-family: "Helvetica Neue", sans-serif;
      color: rgb(46, 16, 71);
    }

    & h2 {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 700;
      color: rgb(46, 16, 71);
    }

    & h3 {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 700;
      color: rgb(46, 16, 71);
    }

    & a {
      color: rgb(216, 199, 255);
    }
  }
}

/* Crediahora */
.blog-article[data-brand="crediahora"] {
  & .blog-article__header {
    & p small {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      color: rgb(29, 29, 27);
    }

    & h1 {
      font-family: "Montserrat", sans-serif;
      font-size: 36px;
      font-weight: 900;
      line-height: 43.2px;
      color: rgb(29, 29, 27);
    }
  }

  & .article__wrapper article {
    font-family: "Montserrat", sans-serif;
    color: rgb(29, 29, 27);

    & p {
      font-family: "Montserrat", sans-serif;
      color: rgb(29, 29, 27);
    }

    & h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: rgb(149, 193, 31);
    }

    & h3 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: rgb(149, 193, 31);
    }

    & a {
      color: rgb(149, 193, 31);
    }
  }
}

/* OleDinero */
.blog-article[data-brand="oledinero"] {
  & .blog-article__header {
    & p small {
      font-family: "Poppins", sans-serif;
      font-size: 24.48px;
      font-weight: 400;
      color: rgb(215, 255, 123);
    }

    & h1 {
      font-family: "Poppins", sans-serif;
      font-size: 43.2px;
      font-weight: 700;
      line-height: 43.2px;
      color: rgb(215, 255, 123);
    }
  }

  & .article__wrapper article {
    font-family: "Poppins", sans-serif;
    color: rgb(2, 45, 142);

    & p {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      color: rgb(2, 45, 142);
    }

    & h2 {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      color: rgb(3, 45, 143);
    }

    & h3 {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      color: rgb(3, 45, 143);
    }

    & a {
      color: rgb(56, 117, 252);
    }
  }
}

/* CreditoAmigo */
.blog-article[data-brand="creditoamigo"] {
  & .blog-article__header {
    & p small {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      color: #1d2c56;
    }

    & h1 {
      font-family: "Montserrat", sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 43.2px;
      color: #1d2c56;
    }
  }

  & .article__wrapper article {
    font-family: "Montserrat", sans-serif;
    color: #1d2c56;

    & img {
      max-width: 600px;
      max-height: 600px;
      margin: 0 auto;
    }

    & p {
      font-family: "Montserrat", sans-serif;
      color: #1d2c56;
    }

    & h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: #1d2c56;
    }

    & h3 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: #1d2c56;
    }

    & a {
      color: #4361ee;
    }
  }
}

/* Credicheck */
.blog-article[data-brand="Credicheck"] {
  & .blog-article__header {
    & p small {
      font-family: "Funnel Display", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      color: #18384e;
    }

    & h1 {
      font-family: "Funnel Display", sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 43.2px;
      color: #18384e;
    }
  }

  & .article__wrapper article {
    font-family: "Funnel Display", sans-serif;
    color: #18384e;

    & img {
      max-width: 600px;
      max-height: 600px;
      margin: 0 auto;
    }

    & p {
      font-family: "Funnel Display", sans-serif;
      color: #18384e;
    }

    & h2 {
      font-family: "Funnel Display", sans-serif;
      font-weight: 700;
      color: #18384e;
    }

    & h3 {
      font-family: "Funnel Display", sans-serif;
      font-weight: 700;
      color: #18384e;
    }

    & a {
      color: #76bc74;
    }
  }
}

/* CreditoClic */
.blog-article[data-brand="creditoclic"] {
  & .blog-article__header {
    & p small {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      color: #073034;
    }

    & h1 {
      font-family: "Montserrat", sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 43.2px;
      color: #073034;
    }
  }

  & .article__wrapper article {
    font-family: "Montserrat", sans-serif;
    color: #073034;

    & img {
      max-width: 600px;
      max-height: 600px;
      margin: 0 auto;
    }

    & p {
      font-family: "Montserrat", sans-serif;
      color: #073034;
    }

    & h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: #073034;
    }

    & h3 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: #073034;
    }

    & a {
      color: #008060;
    }
  }
}

/* CreditoPRO */
.blog-article[data-brand="creditopro"] {
  & .blog-article__header {
    & p small {
      font-family: "Open Sans", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      color: #ffffff;
    }

    & h1 {
      font-family: "Open Sans", sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 43.2px;
      color: #ffffff;
    }
  }

  & .article__wrapper article {
    font-family: "Open Sans", sans-serif;
    color: #333333;

    & img {
      max-width: 600px;
      max-height: 600px;
      margin: 0 auto;
    }

    & p {
      font-family: "Open Sans", sans-serif;
      color: #333333;
    }

    & h2 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #333333;
    }

    & h3 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #333333;
    }

    & a {
      color: #4570AE;
    }
  }
}


/* === styles.css === */
/* Banks Component Styles */

:root {
  & .section-banks {
    width: 100%;
    display: flex;
    align-items: center;
     justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px 0;

    & img {
      max-width: 80px;
      max-height: 40px;
    }
  }

  @media (width >= 500px) {
    & .section-banks {
      & img {
        max-width: 100px;
        max-height: 45px;
      }
    }
  }

  @media (width >= 1024px) {
    & .section-banks {
      gap: 30px;
      justify-content: center;

      & img {
        max-width: 150px;
        max-height: 45px;
      }
    }
  }

  &[data-brand="credizoom"] .section-banks {
    background: #f4f8f9;
    padding: 15px 20px;
    border-radius: 12px;
  }
}

/* Credizoom comparador page: divider above section-banks */
:root[data-brand="credizoom"] [data-page="comparador"] .section-banks {
  position: relative;
}

:root[data-brand="credizoom"] [data-page="comparador"] .section-banks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 1px;
  background-color: rgb(78, 181, 164);
}

/* Mastercredi comparador page: divider above section-banks */
:root[data-brand="mastercredi"] [data-page="comparador"] .section-banks {
  position: relative;
}

:root[data-brand="mastercredi"] [data-page="comparador"] .section-banks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 1px;
  background-color: #1a1a1a;
}


/* === styles.css === */
/**
 * Banner Tarifa Productos Exclusivos Styles
 *
 * Theme-driven styling using CSS custom properties.
 * All visual differences between brands are controlled via CSS variables.
 */

.banner-tarifa-prod-exclusivos {
  background-color: var(--banner-tarifa-bg, #c0e5eb);
  text-align: center;
  padding: var(--banner-tarifa-padding-top, 60px) 0 var(--banner-tarifa-padding-bottom, 100px);
}

.banner-tarifa-prod-exclusivos__container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.banner-tarifa-prod-exclusivos__title {
  font-size: var(--banner-tarifa-title-font-size, 39.6px);
  font-weight: var(--banner-tarifa-title-font-weight, 300);
  color: var(--banner-tarifa-title-color, #2e1047);
  max-width: var(--banner-tarifa-title-max-width, 100%);
  margin: 0 auto;
  line-height: 1.2;
}

.banner-tarifa-prod-exclusivos__subtitle {
  font-size: var(--banner-tarifa-subtitle-font-size, 14.4px);
  font-weight: var(--banner-tarifa-subtitle-font-weight, 400);
  color: var(--banner-tarifa-subtitle-color, #2e1047);
  margin: 0;
}

.banner-tarifa-prod-exclusivos__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.banner-tarifa-prod-exclusivos__item {
  background-color: var(--banner-tarifa-item-bg, rgba(255, 255, 255, 0.2));
  border-radius: 20px;
  padding: 20px 0 40px;
  height: 100px;
  box-sizing: border-box;
  position: relative;
  color: var(--banner-tarifa-item-color, inherit);
}

.banner-tarifa-prod-exclusivos__featured {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(15px, -50%);
  color: var(--banner-tarifa-star-color, currentColor);
}

.banner-tarifa-prod-exclusivos__value {
  display: grid;
  place-items: center;
  height: 100%;
}

.banner-tarifa-discount {
  font-size: var(--banner-tarifa-discount-font-size, 2.5rem);
  font-weight: var(--banner-tarifa-discount-font-weight, inherit);
}

.banner-tarifa-text {
  font-size: var(--banner-tarifa-text-font-size, 1rem);
  font-weight: var(--banner-tarifa-text-font-weight, 500);
}

.banner-tarifa-prod-exclusivos__name {
  font-size: var(--banner-tarifa-name-font-size, 1rem);
  font-weight: var(--banner-tarifa-name-font-weight, 500);
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 10px;
  left: 0;
}

/* Tablet and up */
@media (min-width: 768px) {
  .banner-tarifa-prod-exclusivos__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .banner-tarifa-prod-exclusivos__title {
    max-width: var(--banner-tarifa-title-max-width, 75%);
  }
}

/* Desktop */
@media (min-width: 1300px) {
  .banner-tarifa-prod-exclusivos__container {
    max-width: 80rem;
  }
}

/* Brand-specific styles */

/* Crediahora: dark background with lime green title */
[data-brand="crediahora"] .banner-tarifa-prod-exclusivos {
  background-color: #1d1d1b;
}

[data-brand="crediahora"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(149, 193, 31);
}

[data-brand="crediahora"] .banner-tarifa-prod-exclusivos__subtitle {
  color: #ffffff;
}

[data-brand="crediahora"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* OleDinero: blue background with white text */
[data-brand="oledinero"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(3, 45, 143);
}

[data-brand="oledinero"] .banner-tarifa-prod-exclusivos__title {
  color: #ffffff;
}

[data-brand="oledinero"] .banner-tarifa-prod-exclusivos__subtitle {
  color: #ffffff;
}

[data-brand="oledinero"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Creditoamigo: blue gradient background with white text */
[data-brand="creditoamigo"] .banner-tarifa-prod-exclusivos {
  background: linear-gradient(135deg, rgb(100, 100, 255) 0%, rgb(0, 0, 255) 100%);
}

[data-brand="creditoamigo"] .banner-tarifa-prod-exclusivos__title {
  color: #ffffff;
}

[data-brand="creditoamigo"] .banner-tarifa-prod-exclusivos__subtitle {
  color: #ffffff;
}

[data-brand="creditoamigo"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

[data-brand="creditoamigo"] .banner-tarifa-prod-exclusivos__featured {
  color: #ffffff;
}

/* Credicheck: */
[data-brand="credicheck"] .banner-tarifa-prod-exclusivos {
  background: linear-gradient(135deg, #25af09 0%, #76bc74 100%);
}

[data-brand="credicheck"] .banner-tarifa-prod-exclusivos__title {
  color: #ffffff;
}

[data-brand="credicheck"] .banner-tarifa-prod-exclusivos__subtitle {
  color: #ffffff;
}

[data-brand="credicheck"] .banner-tarifa-prod-exclusivos__item {
  background-color: #edeef433;
  color: #ffffff;
}

[data-brand="credicheck"] .banner-tarifa-prod-exclusivos__featured {
  color: #ffffff;
}

/* Creditoclic: dark teal background with mint green text */
[data-brand="creditoclic"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(7, 48, 52);
}

[data-brand="creditoclic"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(122, 196, 174);
}

[data-brand="creditoclic"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(122, 196, 174);
}

[data-brand="creditoclic"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgb(122, 196, 174);
}

[data-brand="creditoclic"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(122, 196, 174);
}

/* Creditopro: dark blue background with light text */
[data-brand="creditopro"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(27, 74, 130);
}

[data-brand="creditopro"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(243, 243, 243);
}

[data-brand="creditopro"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(243, 243, 243);
}

[data-brand="creditopro"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgb(69, 112, 174);
  color: rgb(243, 243, 243);
}

[data-brand="creditopro"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(243, 243, 243);
}

/* Crediator: dark green background with white/lime text */
[data-brand="crediator"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(0, 89, 63);
}

[data-brand="crediator"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(255, 255, 255);
}

[data-brand="crediator"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(205, 246, 62);
}

[data-brand="crediator"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgb(255, 255, 255);
}

[data-brand="crediator"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(205, 246, 62);
}

/* Credifix: navy background with light blue text */
[data-brand="credifix"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(24, 45, 82);
}

[data-brand="credifix"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(217, 228, 245);
}

[data-brand="credifix"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(150, 180, 230);
}

[data-brand="credifix"] .banner-tarifa-prod-exclusivos__item {
  background-color: #d9e4f5;
  color: #182d52;
}

[data-brand="credifix"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(255, 0, 134);
}

/* Crediscore: black background with purple text */
[data-brand="crediscore"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(0, 0, 0);
}

[data-brand="crediscore"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(144, 126, 232);
}

[data-brand="crediscore"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(144, 126, 232);
}

[data-brand="crediscore"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(144, 126, 232);
}

[data-brand="crediscore"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(144, 126, 232);
}

/* Creditando: navy background with light teal text */
[data-brand="creditando"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(0, 36, 73);
}

[data-brand="creditando"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(221, 236, 238);
}

[data-brand="creditando"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(221, 236, 238);
}

[data-brand="creditando"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(221, 236, 238);
}

[data-brand="creditando"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(198, 253, 0);
}

/* Crediticio: dark navy background with orange/blue text */
[data-brand="crediticio"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(19, 35, 58);
}

[data-brand="crediticio"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(255, 165, 115);
}

[data-brand="crediticio"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(197, 229, 252);
}

[data-brand="crediticio"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(197, 229, 252);
}

[data-brand="crediticio"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(255, 165, 115);
}

/* Creditozas: black background with light gray text */
[data-brand="creditozas"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(0, 0, 0);
}

[data-brand="creditozas"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(229, 234, 234);
}

[data-brand="creditozas"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(229, 234, 234);
}

[data-brand="creditozas"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(229, 234, 234);
}

[data-brand="creditozas"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(150, 180, 230);
}

/* Credizoom: black background with teal text */
[data-brand="credizoom"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(0, 0, 0);
}

[data-brand="credizoom"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(128, 232, 215);
  font-size: 31.68px;
  text-transform: lowercase;
}

:root[data-brand="credizoom"] h3.banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(128, 232, 215);
  font-family: "AdobeClean", sans-serif !important;
  text-transform: none;
}

[data-brand="credizoom"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(128, 232, 215);
}

[data-brand="credizoom"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(78, 181, 164);
}

/* Mastercredi: dark background with light text */
[data-brand="mastercredi"] .banner-tarifa-prod-exclusivos {
  background-color: rgb(26, 26, 26);
}

[data-brand="mastercredi"] .banner-tarifa-prod-exclusivos__title {
  color: rgb(226, 232, 237);
}

[data-brand="mastercredi"] .banner-tarifa-prod-exclusivos__subtitle {
  color: rgb(226, 232, 237);
}

[data-brand="mastercredi"] .banner-tarifa-prod-exclusivos__item {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(226, 232, 237);
}

[data-brand="mastercredi"] .banner-tarifa-prod-exclusivos__featured {
  color: rgb(147, 188, 252);
}


/* === styles.css === */
/**
 * BasicCard Styles
 *
 * Theme-driven card styling using CSS custom properties.
 * All values come from brand theme configuration (config.cljs).
 *
 * Theme Variables Used:
 * - --card-title-color: Title text color
 * - --card-border-color: Border color
 * - --card-background-color: Background color
 * - --card-description-color: Description text color
 * - --card-border-radius: Corner radius
 * - --card-padding: Internal padding
 */

.card-basic {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--card-border-radius);
  padding: var(--card-padding, 35px);
  background: var(--card-background-color);
  border: 2px solid var(--card-border-color);
}

.card-basic__title {
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--card-title-color) !important;
  font-weight: bold;
}

.card-basic__description {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--card-description-color) !important;
}



/* === styles.css === */
.beneficios-comparador {
    --grid-template-columns: repeat(1, 1fr);
    padding: 40px 0px;
    margin: 0 auto;
    width: 100%;
}

.beneficios-comparador h2 {
    text-align: center;
    font-size: var(--text-xl-font-size);
    font-weight: var(--h2-font-weight);
}

.beneficios-comparador p {
    text-align: center;
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
}

.beneficios-comparador__grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    gap: 40px;
}

/* Base grid item styles */
.beneficios-comparador__grid-item {
    background: #e4e6f0;
    border-radius: 12px;
    padding: 25px 15px;
    position: relative;
}

@media (width >= 768px) {
    
  .beneficios-comparador__grid-item {
    padding: 35px 40px;
  }
}

/* Crediahora-specific grid item styles */
.beneficios-comparador[data-brand="crediahora"] .beneficios-comparador__grid-item {
    background: #f5f5f5;
}

/* Creditoclic-specific grid item styles */
.beneficios-comparador[data-brand="creditoclic"] .beneficios-comparador__grid-item {
    background: #eaeeef;
}

/* Creditopro-specific grid item styles */
.beneficios-comparador[data-brand="creditopro"] .beneficios-comparador__grid-item {
    background: #f3f3f3;
}

.beneficios-comparador__grid-item p {
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
    text-align: center;
}

/* OleDinero-specific text weight */
.beneficios-comparador[data-brand="oledinero"] .beneficios-comparador__grid-item p {
    font-weight: 500;
}

.beneficios-comparador__grid-item p b {
    font-weight: var(--font-weight-bold);
}

.beneficios-comparador__grid-item p em {
    font-weight: var(--font-weight-medium);
}

/* Crediahora-specific em weight */
.beneficios-comparador[data-brand="crediahora"] .beneficios-comparador__grid-item p em {
    font-weight: var(--font-weight-bold);
}

/* OleDinero-specific em weight */
.beneficios-comparador[data-brand="oledinero"] .beneficios-comparador__grid-item p em {
    font-weight: 500;
}

/* Base number styles */
.beneficios-comparador__number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: var(--font-weight-medium);
    display: grid;
    width: 50px;
    height: 50px;
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    border-radius: 100%;
    place-items: center;
}

/* Crediahora-specific number styles */
.beneficios-comparador[data-brand="crediahora"] .beneficios-comparador__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

/* Crediator-specific text color */
.beneficios-comparador[data-brand="crediator"] h2,
.beneficios-comparador[data-brand="crediator"] p {
    color: #333333;
}

/* Credifix-specific styles */
.beneficios-comparador[data-brand="credifix"] {
    background-color: #d9e4f5;
    box-shadow: 0 0 0 100vmax #d9e4f5;
    clip-path: inset(0 -100vmax);
}

.beneficios-comparador[data-brand="credifix"] .beneficios-comparador__grid-item {
    background: #ffffff;
}

.beneficios-comparador[data-brand="credifix"] h2,
.beneficios-comparador[data-brand="credifix"] p {
    color: #182d52;
}

.beneficios-comparador[data-brand="credifix"] .beneficios-comparador__number {
    background: #96b4e6;
    color: #182d52;
}

.beneficios-comparador[data-brand="credifix"] .beneficios-comparador__grid-item p em {
    font-weight: 700;
    color: #ff0086;
}

/* Creditando-specific styles */
.beneficios-comparador[data-brand="creditando"] {
    background-color: #ddecee;
    box-shadow: 0 0 0 100vmax #ddecee;
    clip-path: inset(0 -100vmax);
}

.beneficios-comparador[data-brand="creditando"] .beneficios-comparador__grid-item {
    background: #ffffff;
}

.beneficios-comparador[data-brand="creditando"] h2,
.beneficios-comparador[data-brand="creditando"] p {
    color: #002449;
}

.beneficios-comparador[data-brand="creditando"] .beneficios-comparador__number {
    background: #c6fd00;
    color: #002449;
}

/* Crediticio-specific styles */
.beneficios-comparador[data-brand="crediticio"] {
    background-color: #ffffff;
    box-shadow: 0 0 0 100vmax #ffffff;
    clip-path: inset(0 -100vmax);
}

.beneficios-comparador[data-brand="crediticio"] .beneficios-comparador__grid-item {
    background: #e3f2fd;
}

.beneficios-comparador[data-brand="crediticio"] h2 {
    color: #13233a;
    font-weight: 700;
}

.beneficios-comparador[data-brand="crediticio"] p {
    color: #13233a;
}

.beneficios-comparador[data-brand="crediticio"] .beneficios-comparador__number {
    background: #13233a;
    color: #ffa573;
}

.beneficios-comparador__section-banks {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 15px 0;
    margin: 0 auto;
}

.beneficios-comparador__section-banks img {
    max-width: 80px;
    max-height: 40px;
}

@media (width >= 500px) {
    .beneficios-comparador__section-banks img {
        max-width: 100px;
        max-height: 45px;
    }
}

/* Credizoom-specific styles */
.beneficios-comparador[data-brand="credizoom"] .beneficios-comparador__grid-item {
    background: #f4f8f9;
}

.beneficios-comparador[data-brand="credizoom"] .beneficios-comparador__number {
    color: #000000;
}

/* Mastercredi-specific styles */
.beneficios-comparador[data-brand="mastercredi"] h2 {
    font-family: "Coolvetica", sans-serif !important;
    font-size: 39.6px !important;
    font-weight: normal !important;
    color: #1a1a1a;
}

.beneficios-comparador[data-brand="mastercredi"] .beneficios-comparador__grid-item {
    background: #f7f9fa;
}

.beneficios-comparador[data-brand="mastercredi"] .beneficios-comparador__number {
    background: #1a1a1a;
    color: #e2e8ed;
}

@media (width >= 1024px) {

    .beneficios-comparador {
        --grid-template-columns: repeat(3, 1fr);
        max-width: 85%;
        padding-bottom: calc(var(--container-content-padding-vertical) + 70px);
    }

    .beneficios-comparador__section-banks {
        gap: 30px;
        justify-content: center;
    }

    .beneficios-comparador__section-banks img {
        max-width: 150px;
        max-height: 45px;
    }
}

@media (width >= 1600px) {

    .beneficios-comparador {
        max-width: 80rem;
        padding-bottom: 60px;
    }

    
}


/* === styles.css === */
/**
 * BlogHeader Styles
 *
 * Styling for the blog page header.
 * Features:
 * - Centered h1 with text and brand logo
 * - Brand-specific font families, weights, and colors
 * - Responsive sizing
 */

.blog__header.container {
  --container-background: transparent;
  --container-content-padding-bottom: 0;
  background: transparent !important;

  & .container__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 0;
  }

  & h1 {
    margin: 0;
    text-align: center;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
  }

  & .blog__header-logo {
    width: 100px;
    height: auto;
  }
}

/* Credimoney styles */
.blog__header--credimoney {
  & h1 {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-size: 43.2px;
    line-height: 51.84px;
    color: rgb(46, 16, 71);
  }
}

/* Crediahora styles */
.blog__header--crediahora {
  & h1 {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    font-size: 40.32px;
    line-height: 48.384px;
    color: rgb(29, 29, 27);
  }
}

/* OleDinero styles */
.blog__header--oledinero {
  & h1 {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #d7ff7b !important;
  }
}

/* CreditoAmigo styles */
.blog__header--creditoamigo {
  & h1 {
    font-family: Seitu, sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #0000FF;
  }
}

/* CrediCheck styles */
.blog__header--credicheck {
  & h1 {
    font-family: Funnel Display, sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #18384e;
  }
}


/* CreditoClic styles */
.blog__header--creditoclic {
  & h1 {
    font-family: Harabara, sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #073034;
  }
}

/* CreditoPRO styles - white text on blue background */
.blog__header--creditopro {
  & h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #ffffff !important;
  }
}

/* Crediator styles */
.blog__header--crediator {
  & h1 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #333333;
  }
}

/* Credifix styles */
.blog__header--credifix {
  & h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #ff0086;
  }
}

/* Crediscore styles */
.blog__header--crediscore {
  & h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #907ee8;
  }
}

/* Creditando styles */
.blog__header--creditando {
  & h1 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #002449;
  }
}

/* Crediticio styles */
.blog__header--crediticio {
  & h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #13233a;
  }
}

/* Creditozas styles */
.blog__header--creditozas {
  & h1 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #000000;
  }
}

/* Credizoom styles */
.page-header-wrapper--credizoom:has(.blog__header--credizoom) {
  background: #f4f8f9 !important;
}

.blog__header.blog__header--credizoom {
  background: #f4f8f9 !important;

  & h1 {
    font-family: "AdobeClean", sans-serif;
    font-weight: 500;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #4eb5a4;
  }
}

/* Mastercredi styles */
.blog__header--mastercredi {
  & h1 {
    font-family: "AdobeClean", sans-serif;
    font-weight: 700;
    font-size: 43.2px;
    line-height: 51.84px;
    color: #1a1a1a;
  }

  /* #7041: Blog logo 150x17.4px */
  &.container .blog__header-logo {
    width: 150px;
    height: 17.4px;
  }
}


/* === index.css === */
.button-with-image {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;

  &.button-with-image--centered {
    justify-content: center;
  }

  button {
    width: 100%;
  }

  img {
    width: 70px;
    height: auto;
  }

  .bwi-wrapper {
    font-size: var(--text-xs-font-size);
    display: flex;
    align-items: center;
    gap: 20px;
  }

  p {
    font-size: var(--text-xs-font-size);
  }
}


/* === styles.css === */
/**
 * ButtonsCatalog Component Styles
 *
 * Displays a catalog of all button styles available for each brand
 */

.buttons-catalog {
  padding: 40px;
  background: #ffffff;
}

.buttons-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.buttons-catalog__item {
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  transition: box-shadow 0.2s;
}

.buttons-catalog__item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.buttons-catalog__preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  margin-bottom: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 4px;
}

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

.buttons-catalog__name {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.buttons-catalog__class {
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 12px;
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  color: #c7254e;
  word-break: break-word;
}

.buttons-catalog__description {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}


/* === styles.css === */
/* ============================================================
   CanalDeuda Component Design System
   Pixel-perfect replica of canaldeuda-web globals.css
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   CanalDeuda supports dark (default) and light themes.
   Applied automatically via <html data-cd-theme="light|dark">,
   set by ./theme.ts (initCdTheme) based on the OS/browser's
   prefers-color-scheme — no manual toggle. Called once from
   ./Header.tsx, which every CanalDeuda content page renders.
   Values mirror canaldeuda-web's own dark/light modes.
   ────────────────────────────────────────────────────────── */
.cd-page,
.cd-page * {
  --cd-bg: #100f0f;
  /* page background ("white" sections) */
  --cd-tonal: #1e1b1b;
  /* section tonal bg (header pill backdrop, hero, etc.) */
  --cd-primary: #e2d9ff;
  /* main text/titles + primary button bg */
  --cd-secondary: #6b5bcf;
  /* accent / secondary button bg / trust-strip bg */
  --cd-text: #ededed;
  /* body copy */
  --cd-btn-primary-text: #000000;
  /* text color on top of --cd-primary buttons */
  --color-tonal: #1e1b1b;
}

html[data-cd-theme="light"] .cd-page,
html[data-cd-theme="light"] .cd-page * {
  --cd-bg: #ffffff;
  --cd-tonal: #efeeff;
  --cd-primary: #332687;
  --cd-secondary: #b894ff;
  --cd-text: #1a1a1a;
  --cd-btn-primary-text: #ffffff;
  --color-tonal: #efeeff;
}

.cd-page {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cd-text);
  background: var(--cd-bg);
}

/* ── Color utilities ─────────────────────────────────────── */
.cd-text-primary {
  color: var(--cd-primary);
}

.cd-text-secondary {
  color: var(--cd-secondary);
}

.cd-text-white {
  color: #ffffff;
}

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

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

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

/* ── Typography ──────────────────────────────────────────── */
.cd-font-normal {
  font-weight: 400;
}

.cd-font-medium {
  font-weight: 500;
}

.cd-font-semibold {
  font-weight: 600;
}

.cd-font-bold {
  font-weight: 700;
}

.cd-font-extrabold {
  font-weight: 800;
}

.cd-text-sm {
  font-size: 0.875rem;
}

.cd-text-base {
  font-size: 1rem;
}

.cd-text-lg {
  font-size: 1.125rem;
}

.cd-text-xl {
  font-size: 1.25rem;
}

.cd-text-2xl {
  font-size: 1.5rem;
}

.cd-text-3xl {
  font-size: 1.875rem;
}

.cd-text-4xl {
  font-size: 2.25rem;
}

.cd-text-5xl {
  font-size: 3rem;
}

.cd-text-6xl {
  font-size: 3.75rem;
}

.cd-uppercase {
  text-transform: uppercase;
}

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

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

.cd-underline-secondary {
  text-decoration: underline;
  text-decoration-color: var(--cd-secondary);
  text-decoration-thickness: 2px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.cd-btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  border: 1px solid transparent;
  transition: opacity 0.2s ease;
  line-height: 1.5;
  font-size: 1rem;
  font-family: inherit;
  background: none;
}

.cd-btn:hover {
  opacity: 0.85;
}

.cd-btn-primary {
  background-color: var(--cd-primary);
  color: var(--cd-btn-primary-text, black);
  border-color: var(--cd-primary);
  border-radius: 9999px;
}

.cd-btn-outlined {
  background: transparent;
  color: var(--cd-primary);
  border: 1px solid var(--cd-primary);
  border-radius: 9999px;
}

.cd-btn-secondary {
  background-color: var(--cd-secondary);
  color: var(--cd-primary);
  border-color: var(--cd-secondary);
  border-radius: 9999px;
  font-weight: 600;
}

/* ── Container (matches canaldeuda Container component) ───── */
.cd-container {
  margin: 0 auto;
  max-width: 1536px;
  padding: 2.5rem 1rem 4rem;
}

@media (min-width: 640px) {
  .cd-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .cd-container {
    padding-top: 9rem;
    padding-bottom: 6rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ── Responsive display helpers ──────────────────────────── */
/* .cd-lg-only  = only visible on lg+ (hidden on mobile) */
/* .cd-sm-only  = only visible below lg (hidden on desktop) */
.cd-lg-only {
  display: none !important;
}

.cd-xl-only {
  display: none !important;
}

@media (min-width: 1024px) {
  .cd-lg-only {
    display: block !important;
  }

  .cd-sm-only {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .cd-xl-only {
    display: block !important;
  }

  .cd-to-xl {
    display: none !important;
  }
}

/* flex variants */
.cd-lg-flex {
  display: none !important;
}

@media (min-width: 1024px) {
  .cd-lg-flex {
    display: flex !important;
  }
}

.cd-xl-flex {
  display: none !important;
}

@media (min-width: 1280px) {
  .cd-xl-flex {
    display: flex !important;
  }
}

/* ── Sliding banner ──────────────────────────────────────── */
.cd-sliding-background {
  background: url('/img/ASEAD_BANNER_LOGOS_3.svg') repeat-x;
  background-size: auto 100%;
  height: 100px;
  width: 8350px;
  background-color: var(--cd-secondary);
  animation: cd-slide 30s linear infinite;
}

.cd-slider-wrapper {
  overflow: hidden;
}

@keyframes cd-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-2000px, 0, 0);
  }
}

/* ── Triangle clip (speech bubble arrow) ─────────────────── */
.cd-triangulo-clip {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* ── Header ──────────────────────────────────────────────── */
.cd-header-pill {
  background-color: var(--cd-bg);
  border-radius: 9999px;
  max-width: 1800px;
  margin: 0 auto;
}

.cd-header-desktop {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .cd-header-desktop {
    display: flex;
  }
}

.cd-header-mobile-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .cd-header-mobile-bar {
    display: none;
  }
}

.cd-nav-link {
  color: var(--cd-primary);
  text-decoration: none;
  font-weight: 500;
}

.cd-nav-link:hover {
  opacity: 0.75;
}

/* Dropdown */
.cd-details-menu {
  position: relative;
}

.cd-details-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--cd-primary);
  font-weight: 500;
}

.cd-details-menu summary::-webkit-details-marker {
  display: none;
}

.cd-dropdown-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 11rem;
  top: 100%;
}

.cd-dropdown-inner {
  border-radius: 0.375rem;
  border: 1px solid #f3f4f6;
  background-color: var(--cd-bg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-top: 0.75rem;
  padding: 0.5rem;
  font-size: 0.875rem;
}

.cd-dropdown-inner a {
  display: block;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: var(--cd-primary);
  text-decoration: none;
  font-weight: 400;
}

.cd-dropdown-inner a:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

/* Mobile menu overlay */
.cd-mobile-menu {
  position: fixed;
  inset: 0;
  background-color: var(--cd-tonal);
  z-index: 50;
  overflow-y: auto;
  padding: 2rem;
}

.cd-mobile-menu-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cd-primary);
  font-size: 2rem;
  line-height: 1;
}

.cd-mobile-nav-link {
  display: block;
  color: var(--cd-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.125rem;
}

/* Mobile accordion */
.cd-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--cd-primary);
  font-weight: 600;
  font-size: 1.125rem;
}

.cd-accordion summary::-webkit-details-marker {
  display: none;
}

.cd-accordion-panel {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.875rem;
}

.cd-accordion-panel a {
  color: var(--cd-primary);
  text-decoration: none;
}

/* ── Footer ──────────────────────────────────────────────── */
.cd-footer-wrapper {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 1rem 1.5rem;
}

@media (min-width: 640px) {
  .cd-footer-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .cd-footer-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.cd-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 2rem;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  padding: 4rem 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .cd-footer-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 5rem 0;
    text-align: left;
  }
}

.cd-footer-link {
  display: block;
  color: var(--cd-primary);
  text-decoration: none;
  font-size: 1.125rem;
  transition: opacity 0.2s;
}

.cd-footer-link:hover {
  opacity: 0.75;
}

.cd-footer-link-bold {
  font-weight: 600;
}

/* ── AdviceForm ──────────────────────────────────────────── */
.cd-advice-form {
  background-color: var(--cd-primary);
  color: #100f0f;
}

.cd-input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 9999px;
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #100f0f;
}

.cd-input:focus {
  outline: 1px solid var(--cd-primary);
}

/* ── Grid helpers ────────────────────────────────────────── */
.cd-grid-2-xl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* Switches to 2 columns at the same "lg" breakpoint as the rest of the
   design system (cd-lg-only, cd-grid-3-lg, header, etc). Previously this
   waited until 1280px, so widths like ~1024–1279px (common laptop/
   half-screen sizes) rendered as a single, left-aligned column with a
   large empty gap next to it. */
@media (min-width: 1024px) {
  .cd-grid-2-xl {
    grid-template-columns: 1fr 1fr;
  }
}

.cd-grid-3-lg {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .cd-grid-3-lg {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.cd-grid-2-md {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .cd-grid-2-md {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Benefit/Step cards ──────────────────────────────────── */
.cd-benefit-card {
  background-color: var(--cd-bg);
  padding: 1.75rem;
  border-radius: 0.75rem;
  display: flex;
  gap: 1rem;
}

.cd-check-circle {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--cd-secondary);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: white;
  font-size: 1.2rem;
}

/* Step card with top icon */
.cd-step-card {
  background-color: var(--cd-bg);
  padding: 0 2.5rem 2.5rem;
  padding-top: 6rem;
  border-radius: 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.cd-step-icon-top {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Home hero text — centered on mobile, left-aligned once the
   hero image shows up alongside it at desktop ──────────────── */
.cd-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .cd-hero-content {
    align-items: flex-start;
    text-align: left;
  }
}

.cd-hero-cta {
  justify-content: center;
}

@media (min-width: 1024px) {
  .cd-hero-cta {
    justify-content: flex-start;
  }
}

/* ── Solution cards (home page) ──────────────────────────── */
.cd-solution-card {
  background-color: var(--cd-tonal);
  border-radius: 0.75rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem;
  /* Centered, uniform width on mobile. The staggered "staircase" offset
     is a desktop-only flourish — applied below at 1024px+. */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .cd-solution-card {
    border-radius: 9999px;
  }
}

@media (min-width: 1024px) {
  .cd-solution-card--offset {
    margin-right: 7rem;
  }
}

.cd-solution-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background-color: var(--cd-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  img {
    position: relative;
    top: 3px;
    left: 3px;
    transform: scale(0.83);
  }
}

/* ── Review carousel card ────────────────────────────────── */
.cd-review-card {
  background-color: var(--cd-tonal);
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  border-top-right-radius: 8rem;
  overflow: hidden;
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── TestFreeCard ────────────────────────────────────────── */
.cd-test-card {
  background-color: var(--color-tonal);
  color: var(--cd-primary);
  border-radius: 0.75rem;
  padding: 3.5rem 1.5rem 0;
  display: grid;
  gap: 2rem;
  position: relative;
}

@media (min-width: 1024px) {
  .cd-test-card {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 6rem 2.5rem;
  }
}

/* ── Contact tab panel ───────────────────────────────────── */
.cd-tab-panel {
  background-color: var(--cd-bg);
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.cd-tab-header {
  background-color: var(--cd-secondary);
  display: flex;
}

.cd-tab-btn {
  color: #ffffff;
  font-weight: 700;
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 1.25rem 2rem;
  flex: 1;
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.25rem;
  font-family: inherit;
}

/* ── List with secondary bullet color ────────────────────── */
.cd-list-secondary {
  list-style-type: disc;
  padding-left: 1rem;
}

.cd-list-secondary li::marker {
  color: var(--cd-secondary);
}

/* ── Disclosure / FAQ accordion ──────────────────────────── */
.cd-disclosure {
  background-color: var(--cd-tonal);
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 1.5rem;
  flex: 1;
}

.cd-disclosure-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  color: var(--cd-primary);
  text-align: left;
  padding: 0;
}

.cd-disclosure-panel {
  padding-top: 1.5rem;
}

/* ── Before/After comparison (renegociar) ────────────────── */
.cd-comparison-card {
  background-color: var(--cd-bg);
  border-radius: 0.75rem;
  padding: 1.5rem 2rem 1rem;
  flex: 1;
  position: relative;
}

.cd-comparison-stat {
  padding: 0.5rem 2rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Legal pages: cookie/browser tables (matches canaldeuda.es exactly —
   these keep their own fixed light styling regardless of dark/light mode,
   same as production) ───────────────────────────────────────────────── */
.cd-legal-table {
  margin: 1.25rem 0 1.5rem;
  border: 1px solid #4d4d4d;
}

.cd-legal-table-bar {
  background-color: #8a8a8a;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem;
  font-size: 0.9rem;
}

.cd-legal-table-bar--sub {
  background-color: #b7cde0;
  color: #1a1a1a;
}

.cd-legal-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #1a1a1a;
}

.cd-legal-table table thead th {
  background-color: #cfe6f7;
  border: 1px solid #4d4d4d;
  padding: 0.4rem;
}

.cd-legal-table table td {
  border: 1px solid #4d4d4d;
  padding: 0.6rem 0.75rem;
  vertical-align: top;
  font-size: 0.95rem;
}

.cd-legal-table table a {
  color: #1a4fa0;
}

.cd-legal-table--2col td:first-child {
  width: 22%;
  font-weight: 600;
  background-color: #f2f2f2;
}

.cd-legal-highlight-box {
  background-color: #efeeff;
  color: #332687;
  border: 1px solid #4d4d4d;
  text-align: center;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
}


/* === index.css === */
.custom-chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.chatbot-toggle-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.2s ease;
}

.chatbot-toggle-btn:hover {
  transform: scale(1.05);
  background-color: #0069d9;
}

.chatbot-window {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 350px;
  height: 450px;
  background-color: #f5f8fb;
  border-radius: 10px;
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overrides para react-chatbot-kit */
.react-chatbot-kit-chat-container {
  width: 100% !important;
  height: 100% !important;
}

.react-chatbot-kit-chat-inner-container {
  height: 100% !important;
  background-color: #f5f8fb !important;
}

.react-chatbot-kit-chat-header {
  background-color: #007bff !important;
  color: white !important;
  padding: 15px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.react-chatbot-kit-chat-message-container {
  padding: 15px 15px 30px 15px !important;
  overflow-y: auto !important;
  height: calc(100% - 60px) !important;
  scroll-behavior: smooth;
}

/* Scrollbar personalizado para que se vea premium */
.react-chatbot-kit-chat-message-container::-webkit-scrollbar {
  width: 6px;
}

.react-chatbot-kit-chat-message-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.react-chatbot-kit-chat-input-container {
  display: none !important;
}

.react-chatbot-kit-chat-input {
  border: 1px solid #ddd !important;
  padding: 8px 12px !important;
  border-radius: 20px !important;
}

.react-chatbot-kit-chat-btn-send {
  background-color: #007bff !important;
}

.react-chatbot-kit-chat-bot-avatar-container {
  display: none !important;
}

.react-chatbot-kit-chat-bot-message {
  background-color: #fff !important;
  color: #4a4a4a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  margin-left: 0 !important;
  margin-top: 0.5rem;
  padding: .5em;
}

.react-chatbot-kit-chat-bot-message-arrow {
  border-right: 8px solid #fff !important;
}

.react-chatbot-kit-user-chat-message {
  background-color: #007bff !important;
}

.react-chatbot-kit-user-chat-message-arrow {
  border-left: 8px solid #007bff !important;
}

/* Opciones del árbol de decisión */
.chatbot-options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-left: 45px;
}

.chatbot-option-btn {
  background: white;
  border: 1px solid #007bff;
  color: #007bff;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chatbot-option-btn:hover {
  background: #007bff;
  color: white;
}

/* Estilos para los enlaces explicativos */
.chatbot-links-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.chatbot-link {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}

.chatbot-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.chatbot-link i {
  font-size: 12px;
}

.react-chatbot-kit-chat-bot-message span {
  padding: .5em;
}

/* === styles.css === */
:root {
  & .content-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-top: 25px;
  }

  & .container-video {
    max-width: 80rem;
    margin: 0 auto;
    margin-top: 1rem;
    display: grid;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    align-items: initial;
    padding: var(--body-padding-horizontal);
    gap: 3rem;
  }

  & .container-text-video {
    max-width: 700px;
  }

  & .credito-button {
    padding: 12px 32px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid transparent;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  /* Credimoney brand styles */
  & .container-video--credimoney {
    & .container-text-video {
      & h1 {
        font-family: "Helvetica Neue", sans-serif;
        font-weight: 300;
        color: #f8f892;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Helvetica Neue", sans-serif;
        font-weight: 400;
        color: rgb(46, 16, 71);
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list .hero-list__icon {
        color: rgb(46, 16, 71);
      }
    }

    & .credito-button {
      background-color: rgb(248, 248, 146);
      color: rgb(46, 16, 71);
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: rgb(238, 238, 126);
      }
    }
  }

  /* Crediahora brand styles */
  & .container-video--crediahora {
    & .container-text-video {
      & h1 {
        font-weight: 900;
      }

      & p {
        font-weight: 400;
        line-height: 24px;
        font-size: 14px;
      }
    }

    & .credito-button {
      background-color: rgb(29, 29, 27);
      color: rgb(245, 245, 245);
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: rgb(50, 50, 48);
      }
    }
  }

  /* OleDinero brand styles */
  & .container-video--oledinero {
    & .container-text-video {
      & h1 {
        font-weight: 700;
        color: rgb(215, 255, 123);
      }

      & p {
        font-weight: 600;
        color: rgb(255, 255, 255);
        line-height: 24px;
        font-size: 14px;
      }

      & .hero-list li {
        color: rgb(255, 255, 255);
      }

      & .hero-list .hero-list__icon {
        color: #d7ff7b;
      }
    }

    & .credito-button {
      background-color: transparent;
      color: rgb(255, 255, 255);
      border: 2px solid #d7ff7b;
      border-radius: 40px 40px 0px;
      font-weight: 500;

      &:hover {
        background-color: rgba(215, 255, 123, 0.1);
      }
    }
  }

  /* CreditoAmigo brand styles */
  & .container-video--creditoamigo {
    & .container-text-video {
      & h1 {
        font-family: Seitu, sans-serif;
        font-weight: 700;
        color: #0000FF;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: Seitu, sans-serif;
        font-weight: 400;
        color: #1D2C56;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #1D2C56;
      }

      & .hero-list .hero-list__icon {
        color: #0000FF;
      }
    }

    & .credito-button {
      background-color: #0000FF;
      color: #ffffff;
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: #1D2C56;
      }
    }
  }

  & .container-video--credicheck {
    & .container-text-video {
      & h1 {
        font-family: Funnel Display, sans-serif;
        font-weight: 700;
        color: #18384e;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: Funnel Display, sans-serif;
        font-weight: 400;
        color: #18384e;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #18384e;
      }

      & .hero-list .hero-list__icon {
        color: #76bc74;
      }
    }

    & .credito-button {
      background-color: #76bc74;
      color: #ffffff;
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: #18384e;
      }
    }
  }

  /* CreditoClic brand styles */
  & .container-video--creditoclic {
    & .container-text-video {
      & h1 {
        font-family: Harabara, sans-serif;
        font-weight: 700;
        color: #073034;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: Harabara, sans-serif;
        font-weight: 400;
        color: #073034;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #073034;
      }

      & .hero-list .hero-list__icon {
        color: #7AC4AE;
      }
    }

    & .credito-button {
      background-color: #073034;
      color: #ADEF45;
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: #22767C;
      }
    }
  }

  /* CreditoPRO brand styles - white text on blue background */
  & .container-video--creditopro {
    & .container-text-video {
      & h1 {
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        color: #ffffff;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        color: #ffffff;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #ffffff;
      }

      & .hero-list .hero-list__icon {
        color: #ffffff;
      }
    }

    & .credito-button {
      background-color: #333333;
      color: rgb(243, 243, 243);
      border-radius: 999px;
      font-weight: 600;

      &:hover {
        background-color: #444444;
      }
    }
  }

  /* Crediator brand styles */
  & .container-video--crediator {
    & .container-text-video {
      & h1 {
        font-family: "Manrope", sans-serif;
        font-weight: 800;
        color: #333333;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Manrope", sans-serif;
        font-weight: 400;
        color: #333333;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #333333;
      }

      & .hero-list .hero-list__icon {
        color: #f55f99;
      }
    }

    & .credito-button {
      background-color: #f2d5e0;
      color: #333333;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #e8c5d0;
      }
    }
  }
}

:root {

  /* Credizoom brand styles */
  & .container-video--credizoom {
    & .container-text-video {
      & h1 {
        font-family: "LemonMilk", sans-serif;
        font-weight: 500;
        color: #4eb5a4;
        font-size: 36px;
        line-height: 1.2;
      }

      & p {
        font-family: "AdobeClean", sans-serif;
        font-weight: 500;
        color: #000000;
        line-height: 1.5;
        font-size: 18px;
      }

      & .hero-list li {
        color: #000000;
      }

      & .hero-list .hero-list__icon {
        color: #4eb5a4;
      }
    }

    & .credito-button {
      background-color: #000000;
      color: #4eb5a4;
      border-radius: 999px;
      font-weight: 500;

      &:hover {
        background-color: #333333;
      }
    }
  }

  /* Credifix brand styles */
  & .container-video--credifix {
    & .container-text-video {
      & h1 {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        color: #182d52;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        color: #182d52;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #182d52;
      }

      & .hero-list .hero-list__icon {
        color: #ff0086;
      }
    }

    & .credito-button {
      background-color: #96b4e6;
      color: #182d52;
      border-radius: 10px;
      font-weight: 700;

      &:hover {
        background-color: #86a4d6;
      }
    }
  }

  /* Crediscore brand styles */
  & .container-video--crediscore {
    & .container-text-video {
      & h1 {
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        color: #000000;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #000000;
      }

      & .hero-list .hero-list__icon {
        color: #907ee8;
      }
    }

    & .credito-button {
      background-color: #907ee8;
      color: #ffffff;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #7a6ed0;
      }
    }
  }

  /* Creditando brand styles */
  & .container-video--creditando {
    & .container-text-video {
      & h1 {
        font-family: "Manrope", sans-serif;
        font-weight: 800;
        color: #002449;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Manrope", sans-serif;
        font-weight: 600;
        color: #002449;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #002449;
      }

      & .hero-list .hero-list__icon {
        color: #c6fd00;
      }
    }

    & .credito-button {
      background-color: transparent;
      color: #002449;
      border: 2px solid #002449;
      border-radius: 0;
      font-weight: 700;

      &:hover {
        background-color: rgba(0, 36, 73, 0.1);
      }
    }
  }

  /* Crediticio brand styles */
  & .container-video--crediticio {
    & .container-text-video {
      & h1 {
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        color: #13233a;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        color: #13233a;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #13233a;
      }

      & .hero-list .hero-list__icon {
        color: #ffa573;
      }
    }

    & .credito-button {
      background-color: #13233a;
      color: #ffa573;
      border-radius: 999px;
      font-weight: 600;

      &:hover {
        background-color: #1a2e4a;
      }
    }
  }

  /* Creditozas brand styles */
  & .container-video--creditozas {
    & .container-text-video {
      & h1 {
        font-family: "Manrope", sans-serif;
        font-weight: 800;
        color: #000000;
        font-size: 2.75rem;
        line-height: 1.1;
      }

      & p {
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: #000000;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #000000;
      }

      & .hero-list .hero-list__icon {
        color: #96b4e6;
      }
    }

    & .credito-button {
      background-color: #000000;
      color: #96b4e6;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #333333;
      }
    }
  }

  /* Mastercredi brand styles */
  & .container-video--mastercredi {
    & .container-text-video {
      & h1 {
        font-family: "Coolvetica", sans-serif;
        font-weight: 700;
        color: #1a1a1a;
        font-size: 43.2px;
        line-height: 1.1;
      }

      & p {
        font-family: "AdobeClean", sans-serif;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 1.5;
        font-size: 22.32px;
      }

      & .hero-list li {
        color: #1a1a1a;
      }

      & .hero-list .hero-list__icon {
        color: #1a1a1a;
      }
    }

    & .credito-button {
      background-color: #1a1a1a;
      color: #e2e8ed;
      border-radius: 10px;
      font-weight: 600;

      &:hover {
        background-color: #333333;
      }
    }
  }

  & .container-video--credisolve {
    & .container-text-video {
      & h1 {
        font-weight: 700;
      
      }

      & p {
        font-weight: 500;
      }

      & .hero-list li {
        font-weight: normal;
      }
/* 
      & .hero-list .hero-list__icon {
        color: #1a1a1a;
      } */
    }

    & .credito-button {
      background-color: #1a1a1a;
      color: #e2e8ed;
      border-radius: 10px;
      font-weight: 600;

      &:hover {
        background-color: #333333;
      }
    }
  }
}

/* Credihope brand styles
   .react-player now has a global aspect-ratio (Video/styles.css), so no
   base override is needed here. On mobile, though, a full-viewport-width
   16:9 video still reads as oversized next to the rest of this page's
   content, so credihope gets its own smaller fixed height there.
   Fixed height (not max-height) is deliberate: combining max-height with
   aspect-ratio + width:100% on a replaced element makes the browser
   recompute width from the clamped height instead of honoring width:100%,
   overflowing the container. */
@media (max-width: 799px) {
  [data-brand="credihope"] .container-video .react-player {
    aspect-ratio: unset;
    width: 100%;
    height: 240px;
    object-fit: cover;
  }
}

/* BREAKPOINTS*/
/* FOR TABLET AND DESKTOP*/
@media (min-width: 800px) {
  :root {
    & .container-video {
      grid-auto-flow: column;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 3rem;
      padding: 60px 20px;
    }

    & .container-text-video {
      flex: 1 1 calc(48% - 1rem);
      order: -1;

      & p {
        margin-bottom: 10px;
      }
    }
  }
}


/* === styles.css === */
/* CoachingFinancieroHeroPanelUsuario Styles */

.container-panel-usuario {
  font-family: var(--font-family);
}

/* Creditozas: hide panel de usuario entirely */
:root[data-brand="creditozas"] .container-panel-usuario.container-parent {
  display: none;
}

/* Mastercredi: hide panel de usuario entirely */
:root[data-brand="mastercredi"] .container-panel-usuario.container-parent {
  display: none;
}

.hero-panel-usuario {
  & .col {
    & h2 {
      font-family: var(--font-family);
      font-size: 25.92px;
      font-weight: 300;
      line-height: 31.104px;
      margin-bottom: 0;
    }

    & p {
      font-family: var(--font-family);
      font-size: 22.32px;
      font-weight: 700;
      line-height: 29.016px;
    }
  }

  & .col-img {
    & img {
      max-width: 450px;
    }
  }
}


/* === styles.css === */
/**
 * CoachingFinancieroQueAprendere Styles
 *
 * Semantic Tokens Used:
 * - --font-family-base: Base font family
 * - --color-brand-primary: Card title color
 * - --color-text-secondary: Card description color
 */

/* Default styles (Credimoney) */
.container-que-aprendere__title {
  font-family: var(--font-family-base) !important;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.04rem;
  text-align: center;
  margin: 2.04rem auto;
  max-width: 90%;
  text-wrap: balance;
}

.container-que-aprendere__subtitle {
  font-family: var(--font-family-base) !important;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.61rem;
  text-align: center;
  margin: 0 auto;
  max-width: 80%;
  text-wrap: balance;
}

.container-que-aprendere {
  & .container-que-aprendere__buttons {
    text-align: center;
  }

  & .swiper {
    overflow: visible !important;
  }

  & .swiper-slide {
    height: auto;
  }

  & .card-basic {
    --card-basic-padding: 35px;
    --card-basic-gap: 20px;
    --card-basic-title-color: var(--color-brand-primary);
    --card-basic-description-color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--card-basic-gap);
    border-radius: 20px;
    padding: var(--card-basic-padding);
    background: var(--color-brand-primary);
    box-sizing: border-box;
    border: 0;
    height: 100%;

    & .card-basic__title {
      margin: 0;
      font-size: 22.32px;
      line-height: 29.016px;
    }

    & .card-basic__description {
      margin: 0;
      font-size: 16.56px;
      line-height: 23.184px;
    }
  }
}

.container-que-aprendere .my-swiper .swiper,
.container-que-aprendere .my-swiper .swiper .swiper-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (width >=768px) {
  .container-que-aprendere__title {
    max-width: 50%;
  }

  .container-que-aprendere__subtitle {
    max-width: 70%;
  }
}

@media (width >=1024px) {
  .container-que-aprendere__title {
    max-width: 70%;
  }

  .container-que-aprendere__subtitle {
    max-width: 70%;
  }
}

@media (width >=1300px) {
  .container-que-aprendere__title {
    max-width: 50%;
  }

  .container-que-aprendere__subtitle {
    max-width: 50%;
  }
}

/* Crediahora brand-specific styles */
[data-brand='crediahora'] {
  & .container-que-aprendere__title {
    font-weight: 700;
  }

  & .card-basic {

    & .card-basic__title {
      font-size: 24.48px;
      font-weight: 700;
    }
  }

  & .my-swiper {
    --swiper-wrapper-pagination-bullet-active-bg-color: rgb(149, 193, 31);
  }
}

/* OleDinero brand-specific styles */
[data-brand='oledinero'] {
  & .container-que-aprendere__title {
    font-weight: 700;
    color: rgb(2, 45, 142);
  }

  & .container-que-aprendere__subtitle {
    font-weight: 500;
    color: rgb(2, 45, 142);
  }

  & .card-basic {
    background: rgb(202, 211, 255) !important;
  }
}

/* Creditoamigo brand-specific styles */
[data-brand='creditoamigo'] {
  & .card-basic {
    background-color: #e3e5f6 !important;

    & .card-basic__title {
      font-family: "Seitu", sans-serif;
      font-weight: 500;
      color: #0000ff !important;
    }

    & .card-basic__description {
      color: #4d4d4d !important;
    }
  }
}

[data-brand='credicheck'] {
  & .card-basic {
    background: #e3e5f6;

    & .card-basic__title {
      font-family: "Funnel Display", sans-serif;
      font-weight: 500;
      color: #76bc74 !important;
    }

    & .card-basic__description {
      color: #4d4d4d !important;
    }
  }
}

/* Creditoclic brand-specific styles */
[data-brand='creditoclic'] {
  & .card-basic {
    background: #eaeeef !important;

    & .card-basic__title {
      font-weight: 600;
      color: #073034 !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #073034 !important;
    }
  }
}

/* Creditopro brand-specific styles */
[data-brand='creditopro'] {
  & .card-basic {
  
    & .card-basic__title {
      font-weight: 800;
      color: #ffffff !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #ffffff !important;
    }
  }
}

/* Crediator brand-specific styles */
[data-brand='crediator'] {
  & .card-basic {
    & .card-basic__title {
      font-weight: 700;
       color: #ffffff !important;
    }

    & .card-basic__description {
       color: #ffffff !important;
    }
  }
}

/* Credifix brand-specific styles */
[data-brand='credifix'] {
  & .card-basic {
    background-color: #d9e4f5 !important;

    & .card-basic__title {
      font-weight: 500;
      color: var(--color-brand-secondary) !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: var(--color-brand-secondary) !important;
    }
  }
}

/* Crediscore brand-specific styles */
[data-brand='crediscore'] {
  & .card-basic {
    background-color: var(--color-brand-secondaryLight) !important;

    & .card-basic__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 500;
      color: #000000 !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #000000 !important;
    }
  }
}

/* Creditando brand-specific styles */
[data-brand='creditando'] {
  & .card-basic {
    background: #ddecee;

    & .card-basic__title {
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      color: #002449 !important;
    }

    & .card-basic__description {
      font-weight: 600;
      color: #002449 !important;
    }
  }
}

/* Crediticio brand-specific styles */
[data-brand='crediticio'] {
  & .card-basic {
    background: #e3f2fd;

    & .card-basic__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #13233a !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #13233a !important;
    }
  }
}

/* Creditozas brand-specific styles */
[data-brand='creditozas'] {
  & .card-basic {
     background: var(--color-brand-secondaryLight) !important;
  }
}

/* Credizoom brand-specific styles */
:root[data-brand='credizoom'] h3.container-que-aprendere__title {
  text-transform: none;
  font-family: "AdobeClean", sans-serif !important;
  font-size: 24.48px;
  font-weight: 500;
}

[data-brand='credizoom'] {
  & .card-basic {
    background: #f4f8f9;

    & .card-basic__title {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #000000 !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #000000 !important;
    }
  }
}

/* Mastercredi brand-specific styles */
[data-brand='mastercredi'] {
  & .card-basic {
   background-color: var(--color-brand-secondary) !important;
  }
}

/* ===== BUTTON STYLES ===== */

/* Credimoney: yellow button with dark purple text */
.container-que-aprendere .btn{
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-surface-base) !important;  
}

[data-brand='credimoney'] .container-que-aprendere .btn {
  background-color: rgb(248, 248, 146) !important;
  border-color: rgb(248, 248, 146) !important;
  color: rgb(46, 16, 71) !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
}

[data-brand='credimoney'] .container-que-aprendere .btn:hover {
  background-color: #e9e97a !important;
  border-color: #e9e97a !important;
}

/* Crediahora: black button with white text, pill shape */
[data-brand='crediahora'] .container-que-aprendere .btn {
  background-color: rgb(29, 29, 27) !important;
  border-color: transparent !important;
  color: rgb(245, 245, 245) !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

[data-brand='crediahora'] .container-que-aprendere .btn:hover {
  background-color: #333 !important;
}

/* OleDinero: outline button with blue border */
[data-brand='oledinero'] .container-que-aprendere .btn {
  background-color: transparent !important;
  border: 2px solid rgb(3, 45, 143) !important;
  color: rgb(3, 45, 143) !important;
  padding: 12px 25px !important;
  border-radius: 40px 40px 0px 40px !important;
  font-weight: 500 !important;
}

[data-brand='oledinero'] .container-que-aprendere .btn:hover {
  background-color: rgb(3, 45, 143) !important;
  color: #ffffff !important;
}

/* Creditoamigo: blue button */
[data-brand='creditoamigo'] .container-que-aprendere .btn {
  background-color: #0000ff !important;
  border: 2px solid #0000ff !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
  font-weight: 400 !important;
}

/* Credicheck: blue button */
[data-brand='credicheck'] .container-que-aprendere .btn {
  background-color: #76bc74 !important;
  border: 2px solid #76bc74 !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
  font-weight: 400 !important;
}

/* Creditoclic: outline button */
[data-brand='creditoclic'] .container-que-aprendere .btn {
  background-color: transparent !important;
  border: 2px solid #073034 !important;
  color: #073034 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
}

/* Creditopro: dark button */
[data-brand='creditopro'] .container-que-aprendere .btn {
  background-color: #333333 !important;
  border: 2px solid #333333 !important;
  color: #f3f3f3 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Crediator: pink button */
[data-brand='crediator'] .container-que-aprendere .btn {
  background-color: #f2d5e0 !important;
  border: 2px solid transparent !important;
  color: #333333 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Credifix: blue button */
[data-brand='credifix'] .container-que-aprendere .btn {
  background-color: #96b4e6 !important;
  border: 2px solid transparent !important;
  color: #182d52 !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

/* Crediscore: purple button */
[data-brand='crediscore'] .container-que-aprendere .btn {
  background-color: #907ee8 !important;
  border: 2px solid transparent !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Creditando: outline button */
[data-brand='creditando'] .container-que-aprendere .btn {
  background-color: transparent !important;
  border: 2px solid #002449 !important;
  color: #002449 !important;
  padding: 12px 25px !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
}

/* Crediticio: dark navy button */
[data-brand='crediticio'] .container-que-aprendere .btn {
  background-color: #13233a !important;
  border: 2px solid #13233a !important;
  color: #ffa573 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
}

/* Creditozas: black button */
[data-brand='creditozas'] .container-que-aprendere .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #96b4e6 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Credizoom: black button */
[data-brand='credizoom'] .container-que-aprendere .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
}

/* Mastercredi: dark button */
[data-brand='mastercredi'] .container-que-aprendere .btn {
  background-color: #1a1a1a !important;
  border: none !important;
  color: #e2e8ed !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}


/* === styles.css === */
/**
 * CoachingFinancieroVideosCurso Styles
 *
 * Semantic Tokens Used:
 * - --font-family-base: Base font family
 */

/* Default styles (Credimoney) */
.container-videos-curso {
  font-family: var(--font-family-base) !important;

  & h1,
  & h1[class*='sb-'] {
    font-family: var(--font-family-base) !important;
    font-size: 3rem;
    font-weight: 300;
    line-height: 3.6rem;
    text-align: center;
    margin: 0;
  }

  & h2,
  & h2[class*='sb-'] {
    font-family: var(--font-family-base) !important;
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 2.75rem;
    text-align: center;
    margin: 0;
  }

  & .container__content > p,
  & p[class*='sb-'] {
    font-family: var(--font-family-base) !important;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.61rem;
    margin: 0;
  }

  & .curso-video-card {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    & img {
      object-fit: cover;
      width: 100%;
    }

    & p {
      color: #000;
      font-family: var(--font-family-base) !important;
      font-weight: 400;
      font-size: 1.4rem;
      line-height: 1.96rem;
      text-align: center;
    }
  }

  /* This was "width: fit-content", which only looks right when Swiper's
     own JS sets an inline pixel width on the slide (slidesPerView as a
     number does this) — that inline style wins over this rule regardless,
     so it's normally inert. But whenever Swiper's JS hasn't applied that
     inline width yet (or doesn't run at all), "fit-content" forces a
     shrink-to-fit width calculation with no definite anchor anywhere in
     this chain (.curso-video-card has no width of its own either), and a
     percentage-width replaced element (.react-player, width: 100%) inside
     an indefinite containing block falls back to its own native pixel
     size — 1280px for these source videos — massively overflowing a
     mobile viewport width. width: 100% is Swiper's own default anyway, so
     this is a safe, definite fallback whether or not Swiper's JS runs. */
  & .swiper-slide {
    width: 100%;
    max-width: 100%;
  }

  & .container-videos-curso__buttons {
    text-align: center;
  }
}

.container-videos-curso .my-swiper .swiper,
.container-videos-curso .my-swiper .swiper .swiper-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Crediahora brand-specific styles */
[data-brand='crediahora'] .container-videos-curso {
  & h1,
  & h1[class*='sb-'] {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 3.36rem;
  }

  & h2,
  & h2[class*='sb-'] {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 3rem;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* OleDinero brand-specific styles */
[data-brand='oledinero'] .container-videos-curso {
  background-color: #ffffff !important;

  & h1,
  & h1[class*='sb-'] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 3.6rem;
  }

  & h2,
  & h2[class*='sb-'] {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 2.75rem;
  }

  & .container__content > p,
  & p[class*='sb-'] {
    font-weight: 500;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Creditoamigo brand-specific styles */
[data-brand='creditoamigo'] .container-videos-curso {
  & h1,
  & h1[class*='sb-'] {
    font-weight: 500;
    color: #0000ff;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 500;
    color: #0000ff;
  }
}

/* Creditoclic brand-specific styles */
[data-brand='creditoclic'] .container-videos-curso {
  background-color: #eaeeef !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 600;
    color: #073034;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 500;
    color: #073034;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Creditopro brand-specific styles */
[data-brand='creditopro'] .container-videos-curso {
  background-color: #f3f3f3 !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 800;
    color: #333333;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 800;
    color: #333333;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Crediator brand-specific styles */
[data-brand='crediator'] .container-videos-curso {
  background-color: #f2f2f2 !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 800;
    color: #333333;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 800;
    color: #333333;
  }

  & .curso-video-card p {
    font-weight: 600;
  }
}

/* Credifix brand-specific styles */
[data-brand='credifix'] .container-videos-curso {
  background-color: #d9e4f5 !important;

  & h1,
  & h1[class*='sb-'] {
    color: #182d52;
  }

  & h2,
  & h2[class*='sb-'] {
    color: #182d52;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Crediscore brand-specific styles */
[data-brand='crediscore'] .container-videos-curso {
  background-color: #e1f1fc !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 700;
    color: #000000;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 700;
    color: #000000;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Creditando brand-specific styles */
[data-brand='creditando'] .container-videos-curso {
  background-color: #ddecee !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 500;
    color: #002449;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 800;
    color: #002449;
  }

  & .curso-video-card p {
    font-weight: 600;
  }
}

/* Crediticio brand-specific styles */
[data-brand='crediticio'] .container-videos-curso {
  background-color: #ffa573 !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 700;
    color: #13233a;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 700;
    color: #13233a;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Creditozas brand-specific styles */
[data-brand='creditozas'] .container-videos-curso {
  background-color: rgba(229, 234, 234, 0.5) !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 800;
    color: #000000;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 800;
    color: #000000;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Credizoom brand-specific styles */
[data-brand='credizoom'] .container-videos-curso {
  background-color: #f4f8f9 !important;

  & h1,
  & h1[class*='sb-'] {
    font-family: "LemonMilk", sans-serif;
    font-weight: 500;
    color: #000000 !important;
    font-size: 36px;
    line-height: 1.2;
  }

  & h2,
  & h2[class*='sb-'] {
    font-family: "LemonMilk", sans-serif;
    font-weight: 500;
    color: #000000 !important;
    font-size: 31.68px;
    line-height: 1.2;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Mastercredi brand-specific styles */
[data-brand='mastercredi'] .container-videos-curso {
  & h1,
  & h1[class*='sb-'] {
    font-weight: 700;
    color: #1a1a1a;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 700;
    color: #1a1a1a;
  }

  & .curso-video-card p {
    font-weight: 500;
  }
}

/* Credihope brand-specific styles */
[data-brand='credihope'] .container-videos-curso {
  background-color: #f4f4ef !important;

  & h1,
  & h1[class*='sb-'] {
    font-weight: 700;
    color: #252827;
  }

  & h2,
  & h2[class*='sb-'] {
    font-weight: 700;
    color: #252827;
  }

  & .container__content > p,
  & p[class*='sb-'] {
    color: #252827;
  }

  & .curso-video-card {
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(37, 40, 39, 0.12);

    & p {
      color: #252827;
      font-weight: 500;
    }
  }

  /* .react-player has a global aspect-ratio now (Video/styles.css), so no
     base override needed here — just the mobile-specific size below. */
}

/* Mobile renders these cards full-viewport-width (.curso-videos-mobile
   below, one per row) instead of the 3-per-row desktop swipe, so even at
   a correct 16:9 ratio each video still reads as huge relative to
   everything else on a small screen. Cap it with a fixed height rather
   than max-height: combining max-height with aspect-ratio + width:100%
   on a replaced element makes the browser recompute width from the
   clamped height instead of honoring width:100%, overflowing the card. */
@media (max-width: 767px) {
  [data-brand="credihope"] .container-videos-curso .curso-video-card .react-player {
    aspect-ratio: unset;
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
}

.curso-videos-mobile {
  display: flex;
  flex-direction: column;
  gap: 2em;
  justify-content: center;
  align-items: center;
}


/* === styles.css === */
.container {
  & .comparator-plan-card {
    --currency-top: -10px;
    --currency-left: -6px;
    --decimal-top: -10px;
    --decimal-left: 5px;

    --card-background: var(--color-brand-primaryLight);
    --card-title-color: var(--color-brand-primary);
    --card-text-color: var(--color-text-primary);
    --card-amount-color: var(--color-brand-primary);
    --card-exclusive-available-color: var(--color-text-inverse);

    color: var(--card-text-color);
    background: var(--card-background);
    padding: 25px 20px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;

    & h3 {
      color: var(--card-title-color);
      font-size: 1.8em;
      text-align: center;
    }

    & .comparator-plan-card__icon {
      width: 50px;
      height: 50px;
      margin: 0 auto -10px auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-white, #fff);
      color: var(--color-brand-primary, #032d8f);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--color-brand-primary, #032d8f);

      & svg {
        width: 24px;
        height: 24px;
      }
    }

    &.comparator-plan-card--popular .comparator-plan-card__icon {
      color: var(--color-brand-primary, #032d8f);
      border-color: transparent;
    }

    & .comparator-plan-card__description {
      text-align: justify;
      font-size: medium;
      margin: 0;
      min-height: 60px;
    }

    & .comparator-plan-card__amount {
      position: relative;
      text-align: center;
      color: var(--card-amount-color);

      & .comparator-plan-card__amount-currency {
        position: relative;
        top: var(--currency-top);
        left: var(--currency-left);
      }

      & .comparator-plan-card__amount-big-part {
        font-size: var(--text-3xl-font-size);
        font-weight: var(--font-weight-bold);
      }

      & .comparator-plan-card__amount-decimal-part {
        position: relative;
        position: relative;
        top: var(--decimal-top);
        left: var(--decimal-left);
      }

      & .comparator-plan-card__amount-old {
        display: block;
        text-decoration: line-through;
        font-size: var(--text-sm-font-size);
        color: var(--text-color-muted, #888);
        opacity: 0.7;
        margin-top: 5px;
      }

      & .comparator-plan-card__amount-monthly {
        display: block;
        font-size: var(--text-sm-font-size);
        opacity: 0.8;
        margin-top: 5px;
      }
    }

    & .comparator-plan-card__buttons {
      text-align: center;

      & .btn {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 25px;
        padding-right: 25px;
        border-radius: 50px;
      }
    }

    & .comparator-plan-card__features {
      font-size: var(--text-xs-font-size);
      display: flex;
      flex-direction: column;
      gap: 5px;
      list-style: none;
      padding-left: 0;
      flex: 1;
    }

    & .comparator-plan-card__features li {
      font-size: 12px;
    }

    & .comparator-plan-card__exclusive {
      font-size: var(--text--sm-font-size);
      text-align: center;
      border-radius: 30px;
      font-size: 0.75rem;
      padding: 6px 5px;

      &.comparator-plan-card__exclusive__available {
        background: var(--color-brand-primary);
        color: var(--card-exclusive-available-color);
        line-height: 0.8rem;

        & span {
          font-size: 1rem;
        }
      }
    }

    & .comparator-plan-card__conditions {
      font-size: small;
      text-align: center;
      color: var(--color-brand-primary);
      text-decoration: underline;
    }

    &.comparator-plan-card--popular {
      --card-title-color: var(--color-text-inverse);
      --card-text-color: var(--color-text-inverse);
      --card-amount-color: var(--color-text-inverse);
      --card-exclusive-available-color: var(--color-text-inverse);
      --toggle-label-color: rgba(255, 255, 255, 0.5);
      --toggle-label-active-color: var(--color-text-inverse);
      --toggle-switch-bg: rgba(255, 255, 255, 0.25);
      --toggle-switch-on-bg: var(--color-brand-secondary);

      padding-top: 35px;
      padding-bottom: 35px;
      background: var(--color-surface-elevated);

      & :is(li, p) {
        color: var(--card-text-color);
      }

      & .comparator-plan-card__amount {
        color: var(--color-brand-secondary);
      }

      & .comparator-plan-card__amount-big-part {
        font-size: var(--text-3xl-font-size);
      }

      & .comparator-plan-card__features {
        font-size: var(--text-sm-font-size);
      }

      & .comparator-plan-card__description {
        font-size: var(--text--base-font-size);
      }

      & .comparator-plan-card__buttons {
        & .btn {
          --btn-background: var(--color-brand-secondary);
          --btn-border-color: var(--color-brand-secondary);
          --btn-text-color: var(--color-brand-primary);
        }
      }

      & .comparator-plan-card__exclusive {
        &.comparator-plan-card__exclusive__available {
          background: var(--color-brand-secondary);
          color: var(--color-brand-primary);
        }
      }

      & .comparator-plan-card__conditions {
        & a {
          color: var(--color-text-inverse);
        }
      }
    }
  }
}

@media (width >=1024px) {
  .comparator-plan-card {
    --currency-top: -25px;
    --currency-left: -6px;
    --decimal-top: -25px;
    --decimal-left: 4px;
  }
}

/* =============================================================================
 * Credihope brand-specific overrides
 * Was missing entirely, so regular cards defaulted to primaryLight bg with
 * primary-colored title/amount (both shades of the same Tangerine orange —
 * unreadable), and the "popular" card defaulted to a white/near-white
 * elevated surface with inverse (white) title/text/amount — literally white
 * text on a white card.
 * ============================================================================= */
[data-brand="credihope"] .comparator-plan-card {
  --card-background: #f4f4ef;
  --card-title-color: #ea5648;
  --card-text-color: #252827;
  --card-amount-color: #ea5648;
  --card-exclusive-available-color: #252827;
  /* The "1 mes / 1 año" toggle defaults its active label to
     --color-brand-primary (Tangerine), which is too light to read on this
     Washed card. */
  --toggle-label-color: rgba(37, 40, 39, 0.5);
  --toggle-label-active-color: #252827;
}

[data-brand="credihope"] .container .comparator-plan-card h3 {
  color: #ea5648;
}

[data-brand="credihope"] .comparator-plan-card.comparator-plan-card--popular {
  /* Highlighted plan: solid Tangerine card with Smoke Black text/toggle. */
  background: #f9b233;
  --card-title-color: #252827;
  --card-text-color: #252827;
  --card-amount-color: #252827;
  --card-exclusive-available-color: #ffffff;
  --toggle-label-color: rgba(37, 40, 39, 0.6);
  --toggle-label-active-color: #252827;
}

[data-brand="credihope"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #252827;
}

[data-brand="credihope"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #252827;
  color: #ffffff;
}

/* The card's own CTA button (btn-primary-filled = Tangerine bg) was
   invisible against this same-color Tangerine card background. Force it to
   the dark "Acento" look here so it stands out. */
[data-brand="credihope"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn.btn-primary-filled {
  background-color: #252827 !important;
  border-color: #252827 !important;
  color: #f9b233 !important;
}

/* =============================================================================
 * CreditoPRO brand-specific overrides
 * Card backgrounds are swapped: regular cards = light gray, platino = primary blue
 * ============================================================================= */
[data-brand="creditopro"] .comparator-plan-card {
  /* Regular cards use light gray background */
  --card-background: var(--color-surface-elevated);
  --card-title-color: var(--color-brand-primary);
  --card-amount-color: var(--color-brand-primary);
}

[data-brand="creditopro"] .container .comparator-plan-card h3 {
  /* Override container h3 color with card-specific color */
  color: var(--color-brand-primary);
}

[data-brand="creditopro"]
  .comparator-plan-card
  .comparator-plan-card__buttons
  .btn {
  /* Regular cards: dark gray bg with white text */
  --btn-background: rgb(51, 51, 51);
  --btn-border-color: rgb(51, 51, 51);
  --btn-text-color: rgb(243, 243, 243);
}

[data-brand="creditopro"] .comparator-plan-card.comparator-plan-card--popular {
  /* Platino card uses primary blue background with white text */
  background: var(--color-brand-primary);
  --card-title-color: var(--color-text-inverse);
  --card-text-color: var(--color-text-inverse);
  --card-amount-color: var(--color-text-inverse);
}

[data-brand="creditopro"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: var(--color-text-inverse);
}

[data-brand="creditopro"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount {
  color: var(--color-text-inverse);
}

[data-brand="creditopro"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  --btn-background: var(--color-surface-elevated);
  --btn-border-color: var(--color-surface-elevated);
  --btn-text-color: var(--color-brand-primary);
}

[data-brand="creditopro"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: var(--color-surface-elevated);
  color: var(--color-brand-primary);
}

/* =============================================================================
 * CreditoClic brand-specific overrides
 * Regular cards = light gray bg with purple titles, Platino = dark teal bg
 * ============================================================================= */
[data-brand="creditoclic"] .comparator-plan-card {
  /* Regular cards use light gray background with purple titles */
  --card-background: var(--color-surface-elevated);
  --card-title-color: #af9fcd;
  --card-amount-color: #af9fcd;
}

[data-brand="creditoclic"] .container .comparator-plan-card h3 {
  color: #af9fcd;
}

[data-brand="creditoclic"] .comparator-plan-card.comparator-plan-card--popular {
  /* Platino card uses dark teal background with lime/white text */
  background: var(--color-brand-primary);
  --card-title-color: #adef45;
  --card-text-color: var(--color-text-inverse);
  --card-amount-color: var(--color-text-inverse);
}

[data-brand="creditoclic"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #adef45;
}

[data-brand="creditoclic"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount {
  color: var(--color-text-inverse);
}

[data-brand="creditoclic"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  --btn-background: var(--color-surface-elevated);
  --btn-border-color: var(--color-surface-elevated);
  --btn-text-color: var(--color-brand-primary);
}

[data-brand="creditoclic"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: var(--color-surface-elevated);
  color: var(--color-brand-primary);
}

/* =============================================================================
 * CreditoAmigo brand-specific overrides
 * Regular cards = near-white bg with pure blue titles
 * ============================================================================= */
[data-brand="creditoamigo"] .comparator-plan-card {
  /* Regular cards use near-white background with pure blue titles */
  --card-background: #f7f7f7;
  --card-title-color: #0000ff;
  --card-amount-color: #0000ff;
}

[data-brand="creditoamigo"] .container .comparator-plan-card h3 {
  color: #0000ff;
}

[data-brand="creditoamigo"]
  .comparator-plan-card.comparator-plan-card--popular {
  /* Platino card uses slightly different light bg with dark blue text */
  --card-background: #eff0f5;
  --card-title-color: #0000ff;
  --card-text-color: #1d2c56;
  --card-amount-color: #0000ff;

  --toggle-label-color: rgba(29, 44, 86, 0.6);
  --toggle-label-active-color: #0000ff;
  --toggle-switch-bg: rgba(29, 44, 86, 0.2);
  --toggle-switch-on-bg: #0000ff;
}

[data-brand="creditoamigo"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #0000ff;
}

/* =============================================================================
 * Crediator brand-specific overrides
 * Platino card uses pink background instead of bright lime green
 * ============================================================================= */
[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular {
  background: #f55f99 !important;
  --card-title-color: #ffffff;
  --card-text-color: #ffffff;
  --card-amount-color: #ffffff;

  --toggle-label-color: rgba(255, 255, 255, 0.6);
  --toggle-label-active-color: #ffffff;
  --toggle-switch-bg: rgba(255, 255, 255, 0.3);
  --toggle-switch-on-bg: #ffffff; /* White toggle */
}

[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3,
[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  p,
[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  li,
[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount,
[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__conditions,
[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .one-time-save-badge {
  color: #ffffff !important;
}

[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  --btn-background: #ffffff; /* White button */
  --btn-border-color: #ffffff;
  --btn-text-color: #f55f99; /* Pink text */
  background: var(--btn-background) !important;
  border-color: var(--btn-border-color) !important;
  color: var(--btn-text-color) !important;
}

[data-brand="crediator"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #ffffff !important;
  color: #f55f99 !important;
}

/* =============================================================================
 * Credifix brand-specific overrides
 * ============================================================================= */
[data-brand="credifix"]
  .container
  .comparator-plan-card.comparator-plan-card--popular {
  /* Use the brand's magenta/pink color for the toggle to contrast with white thumb */
  --toggle-switch-on-bg: #ff0086;
}

[data-brand="credifix"] .comparator-plan-card h3 {
  font-size: 1.8em !important;
}

[data-brand="creditoamigo"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #0000ff;
}

/* =============================================================================
 * Credicheck brand-specific overrides
 * Regular cards = near-white bg with pure blue titles
 * ============================================================================= */
[data-brand="credicheck"] .comparator-plan-card {
  /* Regular cards use near-white background with pure blue titles */
  --card-background: #edeef4;
  --card-title-color: #76bc74;
  --card-amount-color: #76bc74;
  border-radius: 150px 150px 0 0;
}

[data-brand="credicheck"] .container .comparator-plan-card h3,
[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #76bc74;
}

[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular {
  /* Platino card uses slightly different light bg with dark blue text */
  background: #e4e4e4 !important;
  --card-title-color: #76bc74;
  --card-text-color: #18384e;
  --card-amount-color: #76bc74;
}

[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  p,
[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  li,
[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount {
  color: #18384e; /* Make sure text is dark blue */
}

[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount-big-part {
  color: #76bc74 !important; /* The price number should be green */
}

[data-brand="credicheck"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #76bc74 !important;
  color: #18384e !important;
}

[data-brand="credicheck" i] .comparator-plan-card__conditions a {
  color: #18384e !important;
}

/* Credicheck: a diagonal corner ribbon still looked off against this card's
   150px arch-shaped border-radius even after the earlier repositioning
   fix (kept above in git history / superseded here), so replace the
   "Popular" indicator entirely with a small pill badge under the plan
   name instead of a corner ribbon. The card is a flex column, so the
   ribbon element is taken out of absolute positioning and given a flex
   `order` alongside its siblings to land it directly under the h3 title. */
[data-brand="credicheck" i] .comparator-plan-card__icon {
  order: 1;
}

[data-brand="credicheck" i] .comparator-plan-card h3 {
  order: 2;
}

[data-brand="credicheck" i] .comparator-plan-card__ribbon {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  display: flex;
  justify-content: center;
  order: 3;
  margin-top: -10px;
}

[data-brand="credicheck" i] .comparator-plan-card__ribbon span {
  position: static;
  display: inline-block;
  width: auto;
  left: auto;
  top: auto;
  padding: 4px 18px;
  border-radius: 999px;
  transform: none;
  box-shadow: none;
  font-size: 0.75rem;
}

[data-brand="credicheck" i] .comparator-plan-card__description {
  order: 4;
}

[data-brand="credicheck" i] .comparator-plan-card__amount,
[data-brand="credicheck" i] .comparator-plan-card__one-time {
  order: 5;
}

[data-brand="credicheck" i] .comparator-plan-card__buttons {
  order: 6;
}

[data-brand="credicheck" i] .comparator-plan-card__features {
  order: 7;
}

[data-brand="credicheck" i] .comparator-plan-card__conditions {
  order: 8;
}

/* Mastercredi: h3 uses AdobeClean 16.56px weight 600, not Coolvetica */
[data-brand="mastercredi"] .container .comparator-plan-card h3 {
  font-family: "AdobeClean", sans-serif !important;
  font-size: 1.8em !important;
  font-weight: 600 !important;
}

/* Mastercredi: trial plan amount is not bold */
[data-brand="mastercredi"]
  .container
  .comparator-plan-card.comparator-plan-card__prueba
  .comparator-plan-card__amount-big-part {
  font-weight: 400 !important;
}

/* =============================================================================
 * Credisolve brand-specific overrides
 * ============================================================================= */

[data-brand="credisolve" i] .comparator-plan-card {
  border: 1px solid #eaeaea;
}

[data-brand="credisolve" i]
  .container
  .comparator-plan-card.comparator-plan-card--popular {
  --card-title-color: #e62095;
  --card-text-color: #333333;
  --card-amount-color: #162b36;

  --toggle-label-color: rgba(51, 51, 51, 0.6);
  --toggle-label-active-color: #e62095;
  --toggle-switch-bg: rgba(51, 51, 51, 0.2);
  --toggle-switch-on-bg: #e62095;
}

.container.plan-amigo-includes-credisolve
  .comparator-plan-card:not(.comparator-plan-card--popular),
.container.plan-amigo-includes-creditoplan
  .comparator-plan-card:not(.comparator-plan-card--popular),
.container.plan-amigo-includes-credital
  .comparator-plan-card:not(.comparator-plan-card--popular) {
  color: #000000 !important;
}

.container.plan-amigo-includes-credisolve
  .comparator-plan-card:not(.comparator-plan-card--popular)
  h3,
.container.plan-amigo-includes-creditoplan
  .comparator-plan-card:not(.comparator-plan-card--popular)
  h3,
.container.plan-amigo-includes-credital
  .comparator-plan-card:not(.comparator-plan-card--popular)
  h3 {
  color: #000000 !important;
}

.container.plan-amigo-includes-credisolve
  .comparator-plan-card:not(.comparator-plan-card--popular)
  .comparator-plan-card__description,
.container.plan-amigo-includes-creditoplan
  .comparator-plan-card:not(.comparator-plan-card--popular)
  .comparator-plan-card__description,
.container.plan-amigo-includes-credital
  .comparator-plan-card:not(.comparator-plan-card--popular)
  .comparator-plan-card__description {
  color: #000000 !important;
}

[data-brand="credisolve" i]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount {
  color: #162b36 !important;
}

[data-brand="credisolve" i]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__conditions
  a {
  color: #e62095 !important;
}

[data-brand="credisolve" i]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  --btn-background: #162b36;
  --btn-border-color: #162b36;
  --btn-text-color: #ffffff;
  background: var(--btn-background) !important;
  border-color: var(--btn-border-color) !important;
  color: var(--btn-text-color) !important;
}

[data-brand="credisolve" i]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #162b36 !important;
  color: #ffffff !important;
}

[data-brand="credisolve" i]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available
  span {
  color: #e62095;
}

[data-brand="credital"] .comparator-plan-card.comparator-plan-card--popular {
  background-color: #a318e1;
  color: #fff;
}

[data-brand="credital"] .comparator-plan-card--popular .btn-primary-filled {
  background: #f2e6f9 !important;
  color: #000 !important;
}

[data-brand="credital"] .comparator-plan-card .comparator-plan-card--popular {
  color: #fff !important;
}

/* =============================================================================
 * Credipay brand-specific overrides
 * Regular cards = default bg with dark text and blue titles
 * Popular card = cyan bg with dark blue text
 * ============================================================================= */
[data-brand="credipay"] .comparator-plan-card {
  --card-text-color: #333333;
}

[data-brand="credipay"] .comparator-plan-card:not(.comparator-plan-card--popular) {
  background-color: #f5f5f5;
  border: 1px solid #eaeeef;
}


[data-brand="credipay"] .comparator-plan-card.comparator-plan-card--popular {
  background-color: var(--color-brand-primary) !important;
  --card-title-color: #ffffff;
  --card-text-color: #ffffff;
  --card-amount-color: #ffffff;

  --toggle-label-color: rgba(255, 255, 255, 0.6);
  --toggle-label-active-color: #ffffff;
  --toggle-switch-bg: rgba(255, 255, 255, 0.2);
  --toggle-switch-on-bg: #ffffff;
}

[data-brand="credipay"]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #ffffff !important;
}

[data-brand="credipay"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount {
  color: #ffffff !important;
}

[data-brand="credipay"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  --btn-background: #ffffff;
  --btn-border-color: #ffffff;
  --btn-text-color: #1564e9;
  background: var(--btn-background) !important;
  border-color: var(--btn-border-color) !important;
  color: var(--btn-text-color) !important;
}

[data-brand="credipay"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #1564e9 !important;
  color: #ffffff !important;
}

[data-brand="credipay"]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__conditions a {
  color: #ffffff !important;
}

[data-brand="creditoplan"] .comparator-plan-card.comparator-plan-card--popular {
  background: #1d4d51;
}

[data-brand="creditoplan"]
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #fff !important;
}

[data-brand="creditoplan"]
  .comparator-plan-card.comparator-plan-card--popular
  .btn-primary-filled {
  background-color: #fff !important;
  color: #1d4d51 !important;
}


/* =============================================================================
 * One-time payment — toggle pill switch design
 * ============================================================================= */

/* Fade + subtle slide-up for elements that appear/change on toggle */
@keyframes oneTimeFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comparator-plan-card__one-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Row: pill + save badge */
.one-time-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 10px; /* Leave smaller space so badge is closer */
  flex-direction: column;
}

/* The pill that wraps "1 mes | switch | 1 año" — no border */
.one-time-toggle-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
}

.one-time-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--toggle-label-color, #888888);
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.one-time-toggle-label.active {
  color: var(--toggle-label-active-color, var(--color-brand-primary, #032d8f));
}

/* The toggle switch button itself */
.one-time-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--toggle-switch-bg, #cccccc);
  cursor: pointer;
  transition: background 0.25s ease;
  padding: 0;
  flex-shrink: 0;
}

.one-time-toggle-switch.on {
  background: var(--toggle-switch-on-bg, var(--color-brand-primary, #032d8f));
}

.one-time-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
  display: block;
}

.one-time-toggle-switch.on .one-time-toggle-thumb {
  transform: translateX(20px);
}

/* "Ahorra 20%" badge positioned absolutely below "1 año" */
.one-time-save-badge {
  /*position: absolute;
  bottom: -4px; 
  right: 0px;*/
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-brand-primary, #032d8f);
  background-color: var(--color-brand-primary-light, rgba(3, 45, 143, 0.1));
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.comparator-plan-card--popular .one-time-save-badge {
  color: var(--card-amount-color, #ffffff);
  background-color: rgba(255, 255, 255, 0.2);
}

.one-time-save-badge--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Price block: centred column */
.one-time-price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  animation: oneTimeFadeIn 0.3s ease both;
}

.one-time-price-old {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: line-through;
  color: #999999;
}

.one-time-price-main {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--card-amount-color, #000000);
  line-height: 1.1;
}

.one-time-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--card-text-color, #333333);
  text-decoration: underline;
  margin-top: 4px;
}

.one-time-period-label {
  font-size: 0.82rem;
  color: var(--card-text-color);
  opacity: 0.7;
  font-weight: 500;
}
/* =============================================================================
 * Tooltip for Subscription Permanence Disclaimer
 * ============================================================================= */
.comparator-plan-tooltip-container {
  position: relative;
  text-align: center;
  margin-bottom: 8px;
  outline: none; /* remove focus outline for mouse clicks */
  cursor: pointer;
  user-select: none;
}

.comparator-plan-tooltip-trigger {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--card-text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: opacity 0.2s;
}

.comparator-plan-tooltip-trigger:hover {
  opacity: 0.8;
}

.comparator-plan-tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 260px;
  background-color: #333333;
  color: #ffffff;
  text-align: left;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.75rem;
  line-height: 1.4;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    transform 0.3s,
    visibility 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  font-weight: normal;
}

/* Tooltip arrow */
.comparator-plan-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}

/* Show tooltip on hover, active (tap), or focus-within */
.comparator-plan-tooltip-container:hover .comparator-plan-tooltip-content,
.comparator-plan-tooltip-container:active .comparator-plan-tooltip-content,
.comparator-plan-tooltip-container:focus-within
  .comparator-plan-tooltip-content,
.comparator-plan-tooltip-container.visible .comparator-plan-tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

/* =============================================================================
 * Popular Ribbon
 * ============================================================================= */
.comparator-plan-card {
  position: relative; /* ensure card handles absolute children like ribbon */
  overflow: hidden; /* crop the ribbon to the rounded corners */
}

.comparator-plan-card__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.comparator-plan-card__ribbon span {
  position: absolute;
  display: block;
  width: 180px;
  padding: 6px 0;
  background-color: var(--ribbon-bg, #e74c3c);
  color: var(--ribbon-text, #ffffff);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  left: -20px;
  top: 25px;
  transform: rotate(45deg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
 * CreditPerfect brand-specific overrides
 * ============================================================================= */
[data-brand="creditperfect" i]
  .comparator-plan-card.comparator-plan-card--popular {
  background: #ffffff;
  --card-title-color: #ec008c; /* Pink title */
  --card-text-color: #000000;
  --card-amount-color: #000000;
  border: 1px solid #000000;
  padding-top: 25px; /* reset padding */
  padding-bottom: 25px;
}

[data-brand="creditperfect" i]
  .container
  .comparator-plan-card.comparator-plan-card--popular
  h3 {
  color: #ec008c !important;
  font-size: 1.8em;
}

[data-brand="creditperfect" i]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount {
  color: #000000 !important;
}

[data-brand="creditperfect" i]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount-big-part {
  color: #000000 !important;
}

[data-brand="creditperfect" i]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #f0f0f0 !important;
  color: #555555 !important;
  border: 1px solid #777777 !important;
  font-style: italic;
}

[data-brand="creditperfect" i]
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__conditions
  a {
  color: #7d48a3 !important; /* purple conditions link */
}


/* === styles.css === */
/**
 * ComparadorPrestamoCard Component Styles
 *
 * Multi-brand styles for loan comparison cards
 */

:root {
  & .comparador-prestamo-card {
    --padding-top: 20px;
    --padding-bottom: 10px;
    --padding-horizontal: 8px;
    --image-max-width: 70px;
    --list-conditions-gap: 5px;
    --list-conditions-img-height: 13px;
    --list-conditions-item-gap: 0px;
    --text-font-size: var(--text-sm-font-size, 14px);
    --text-2lg-font-size: 1.7rem;
    --header-flex-direction: column;
    --body-flex-direction: column;
    --card-background: var(--color-brand-primaryLight, #ffffff);
    --card-text-color: var(--color-brand-primary);

    background: var(--card-background);
    color: var(--card-text-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--padding-top) var(--padding-horizontal) var(--padding-bottom);
    border-radius: 25px;
    position: relative;
    font-size: var(--text-font-size);

    & :is(p, a) {
      font-size: var(--text-font-size);
    }

    & header {
      display: flex;
      flex-direction: var(--header-flex-direction);
      gap: 8px;
      align-items: center;
    }

    & .comparador-prestamo-card__description {
      align-items: start;
      justify-content: start;
      display: flex;
      flex-grow: 1;
      gap: 15px;

      & img {
        max-width: var(--image-max-width);
      }
    }

    & p.comparador-prestamo-card__approval_possibility {
      font-size: 0.9rem;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      margin: 0;

      & span {
        font-weight: var(--font-weight-semibold, 600);
        color: var(--card-text-color);
        font-size: var(--text-2lg-font-size, 20px);
      }
    }

    & .comparador-prestamo-card__body {
      display: flex;
      flex-direction: var(--body-flex-direction);
      gap: 8px;
    }

    & .comparador-prestamo-card__link {
      text-align: center;
      margin: 0;

      & a {
        color: var(--card-text-color);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    & ul {
      align-items: center;
      display: flex;
      justify-content: space-between;
      gap: var(--list-conditions-gap);
      list-style: none;
      padding: 0;
      margin: 0;

      & li {
        align-items: center;
        display: flex;
        gap: var(--list-conditions-item-gap);

        & svg {
          color: var(--card-text-color);
          height: var(--list-conditions-img-height);
          margin-top: 0px;
        }
      }
    }

    & .comparador-prestamo-card__best-option {
      background: var(--card-text-color);
      color: #ffffff;
      display: flex;
      align-items: center;
      align-self: start;
      gap: 5px;
      border-radius: 9999px;
      padding: 8px 10px;
      position: absolute;
      top: 0;
      left: 40px;
      transform: translateY(-50%);

      & span {
        margin-bottom: 0px;
        font-weight: var(--font-weight-semibold, 600);
      }
    }
  }

  /* Credimoney brand styles */
  &[data-brand="credimoney"] {
    & .comparador-prestamo-card {
      --card-background: #c0e5eb; /* rgb(192, 229, 235) - light cyan/turquoise */
      --card-text-color: #2e1047;
    }

    & .comparador-prestamo-card--credimoney {
      font-family: "Helvetica Neue", sans-serif;
    }
  }

  /* Crediahora brand styles */
  &[data-brand="crediahora"] {
    & .comparador-prestamo-card {
      --card-background: rgba(150, 150, 150, 0.1); /* Semi-transparent gray */
      --card-text-color: #95c11f; /* Green - primary accent color */
    }

    & .comparador-prestamo-card--crediahora {
      font-family: "Montserrat", sans-serif;
    }
  }

  /* OleDinero brand styles */
  &[data-brand="oledinero"] {
    & .comparador-prestamo-card {
      --card-background: #ffffff;
      --card-text-color: #032d8f;
    }

    & .comparador-prestamo-card--oledinero {
      font-family: "Poppins", sans-serif;
    }
  }

  /* Credifix brand styles */
  &[data-brand="credifix"] {
    & .comparador-prestamo-card {
      --card-background: #d9e4f5;
      --card-text-color: #182d52;
    }

    & .comparador-prestamo-card--credifix {
      font-family: "Roboto", sans-serif;

      & .comparador-prestamo-card__best-option {
        background: #ff0086;
        color: #182d52;
      }

      & .comparador-prestamo-card__approval_possibility span {
        color: #ff0086;
      }

      & .comparador-prestamo-card__link a {
        color: #ff0086;
      }

      & ul li svg {
        color: #ff0086;
      }
    }
  }

  /* Creditando brand styles */
  &[data-brand="creditando"] {
    & .comparador-prestamo-card {
      --card-background: #ddecee;
      --card-text-color: #002449;
    }

    & .comparador-prestamo-card--creditando {
      font-family: "Manrope", sans-serif;

      & .comparador-prestamo-card__best-option {
        background: #002449;
        color: #c6fd00;
      }

      & .comparador-prestamo-card__link a {
        color: #002449;
      }

      & ul li svg {
        color: #c6fd00;
      }
    }
  }

  /* Crediticio brand styles */
  &[data-brand="crediticio"] {
    & .comparador-prestamo-card {
      --card-background: #e3f2fd;
      --card-text-color: #13233a;
    }

    & .comparador-prestamo-card--crediticio {
      font-family: "Open Sans", sans-serif;

      & .comparador-prestamo-card__best-option {
        background: #13233a;
        color: #ffa573;
      }

      & .comparador-prestamo-card__link a {
        color: #13233a;
      }

      & ul li svg {
        color: #13233a;
      }
    }
  }

  &[data-brand="creditozas"] {
    & .comparador-prestamo-card {
      --card-background: #f2f4f4;
      --card-text-color: #000000;
    }
  }

  /* Credihope: was missing an override, so both the card background AND all
     of its text/icons/links defaulted to shades of the same Tangerine
     orange (primaryLight bg + primary text), making the loan details
     unreadable against the card. Card text stays Smoke Black (dark, safe on
     the light Washed card); the "best option" ribbon uses Tangerine bg with
     dark text (good contrast either way). */
  &[data-brand="credihope"] {
    & .comparador-prestamo-card {
      --card-background: #f4f4ef;
      --card-text-color: #252827;
    }

    & .comparador-prestamo-card--credihope .comparador-prestamo-card__best-option {
      background: #f9b233;
      color: #252827;
    }
  }
}

@media (width >= 1024px) {
  :root {
    & .comparador-prestamo-card {
      --padding-top: 25px;
      --padding-bottom: 15px;
      --padding-horizontal: 10px;
      --list-conditions-gap: 5px;
      --list-conditions-img-height: 13px;
      --list-conditions-item-gap: 0px;
      --text-font-size: var(--text-sm-font-size, 14px);
      --image-max-width: 90px;
    }
  }
}

@media (width >= 1300px) {
  :root {
    & .comparador-prestamo-card {
      --image-max-width: 120px;
      --header-flex-direction: row;
      --body-flex-direction: row;

      gap: 25px;

      & header {
        gap: 50px;
      }

      & .comparador-prestamo-card__description {
        flex-grow: 1;
        gap: 40px;
      }

      & p.comparador-prestamo-card__approval_possibility {
        min-width: 130px;
        max-width: 185px;
      }

      & .comparador-prestamo-card__body {
        justify-content: space-between;

        & ul {
          gap: 15px;
        }
      }
    }
  }
}


/* === styles.css === */
/**
 * ContactoHeroForm Styles
 *
 * Styling for the contact form component.
 * Features:
 * - Responsive layout with optional image
 * - Form inputs with rounded borders
 * - Phone number input with +34 prefix
 * - Brand-specific colors and typography
 * - Success and error states
 * - User exists warning state
 */

:root {
  & .contacto-hero-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    box-sizing: border-box;
  }

  /* CreditoPRO specific alignment to match production */
  & .contacto-hero-form--creditopro {
    align-items: anchor-center;
  }

  & .contacto-hero-form__image {
    display: none;
  }

  & .contacto-hero-form__container {
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    border-radius: 16px;
    padding: 30px 24px;
    background-color: white;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (max-width: 576px) {
    & .contacto-hero-form__container {
      padding: 24px 16px;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }
  }

  & .contacto-hero-form__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 24px;
  }

  @media (max-width: 576px) {
    & .contacto-hero-form__title {
      font-size: 1.45rem;
      margin-bottom: 20px;
    }
  }

  & .contacto-hero-form__success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  & .contacto-hero-form__success-icon-clock {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #155724;
  }

  & .contacto-hero-form__success-text {
    text-align: left;
  }

  & .contacto-hero-form__card {
    width: 100%;
  }

  & .contacto-hero-form__card-body {
    & a {
      text-decoration: underline;
    }
  }

  & .contacto-hero-form__alert {
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  & .contacto-hero-form__alert--warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    opacity: 1;
    animation: fadeInWarning 1s ease-in forwards;
  }

  & .contacto-hero-form__alert--danger {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
  }

  @keyframes fadeInWarning {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.8;
    }
  }

  & .contacto-hero-form__btn-link {
    background: none;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
  }

  & .contacto-hero-form__form {
    display: grid;
    gap: 12px;
  }

  & .contacto-hero-form__form--disabled {
    pointer-events: none;
    opacity: 0.5;
    animation: fadeInCard 1s ease-in forwards;
  }

  @keyframes fadeInCard {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.5;
    }
  }

  & .contacto-hero-form__input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;

    & label {
      font-size: 0.88rem;
      font-weight: 600;
      color: #333333;

      & sup {
        color: #dc3545;
        margin-left: 2px;
      }
    }
  }

  & .contacto-hero-form__input {
    height: 42px;
    padding: 0 16px;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    background-color: #f8f9fa;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;

    &:focus {
      border-color: #007bff;
      background-color: #ffffff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    }

    &:not(textarea) {
      height: 42px;
    }
  }

  & .contacto-hero-form__phone-group {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    align-items: center;
  }

  & .contacto-hero-form__phone-prefix {
    background: #e9ecef;
    border: 1.5px solid #dee2e6;
    border-right: none;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    height: 42px;
    box-sizing: border-box;
  }

  & .contacto-hero-form__input--phone {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-left: 12px;
  }

  & .contacto-hero-form__textarea {
    height: auto !important;
    min-height: 110px;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    resize: none;
    background-color: #f8f9fa !important;
    border: 1.5px solid #dee2e6 !important;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;

    &:focus {
      background-color: #ffffff !important;
      border-color: #007bff !important;
    }
  }

  & .contacto-hero-form__check-group {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: flex-start;
    margin-top: 4px;
  }

  & .contacto-hero-form__check-wrapper {
    display: flex;
    align-items: center;
    height: 20px;
  }

  & .contacto-hero-form__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
  }

  & .contacto-hero-form__check-label {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #495057;
    cursor: pointer;
  }

  & .contacto-hero-form__link {
    font-weight: 700;
    color: inherit;
  }

  & .contacto-hero-form__submit {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 12px;
    border: none;
    font-size: 0.95rem;
    border-radius: 8px;
    background-color: #76bc74;
    color: #ffffff;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      background-color: #65a763;
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }

    &:disabled {
      background-color: #e9ecef;
      color: #adb5bd;
      opacity: 0.55;
      cursor: not-allowed;
    }
  }

  /* Credimoney brand styles */
  & .contacto-hero-form--credimoney {
    & .contacto-hero-form__title {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 300;
      color: rgb(46, 16, 71);
    }

    & .contacto-hero-form__submit--credimoney {
      background-color: rgb(248, 248, 146);
      color: rgb(46, 16, 71);
      border: 2px solid rgb(248, 248, 146);
      border-radius: 40px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: rgb(238, 238, 126);
      }
    }
  }

  /* Crediahora brand styles */
  & .contacto-hero-form--crediahora {
    & .contacto-hero-form__title {
      font-family: Montserrat, sans-serif;
      font-weight: 900;
      color: rgb(29, 29, 27);
    }

    & .contacto-hero-form__submit--crediahora {
      background-color: rgb(29, 29, 27);
      color: rgb(245, 245, 245);
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: rgb(50, 50, 48);
      }
    }
  }

  /* OleDinero brand styles */
  & .contacto-hero-form--oledinero {
    & .contacto-hero-form__title {
      font-family: Poppins, sans-serif;
      font-weight: 700;
      color: rgb(2, 45, 142);
    }

    & .contacto-hero-form__submit--oledinero {
      background-color: rgba(0, 0, 0, 0);
      color: rgb(3, 45, 143);
      border: 2px solid rgb(3, 45, 143);
      border-radius: 40px 40px 40px 0px;
      font-size: 16.56px;
      font-weight: 500;

      &:hover:not(:disabled) {
        background-color: rgba(3, 45, 143, 0.05);
      }
    }
  }

  /* Crediator brand styles */
  & .contacto-hero-form--crediator {
    & .contacto-hero-form__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #333333;
    }

    & .contacto-hero-form__submit--crediator {
      background-color: #f55f99;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #e04a84;
      }
    }
  }

  /* Credifix brand styles */
  & .contacto-hero-form--credifix {
    & .contacto-hero-form__title {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      color: #182d52;
    }

    & .contacto-hero-form__submit--credifix {
      background-color: #96b4e6;
      color: #182d52;
      border: none;
      border-radius: 10px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #7a9bd4;
      }
    }

    & .contacto-hero-form__link--privacy {
      color: #ff0086;
    }

    & .contacto-hero-form__link--consent {
      color: #182d52;
    }
  }

  /* Crediscore brand styles */
  & .contacto-hero-form--crediscore {
    & .contacto-hero-form__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #907ee8;
    }

    & .contacto-hero-form__submit--crediscore {
      background-color: #907ee8;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #7a68d0;
      }
    }
  }

  /* Creditando brand styles */
  & .contacto-hero-form--creditando {
    & .contacto-hero-form__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #002449;
    }

    & .contacto-hero-form__submit--creditando {
      background-color: #002449;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #001a33;
      }
    }
  }

  /* Crediticio brand styles */
  & .contacto-hero-form--crediticio {
    & .contacto-hero-form__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #13233a;
    }

    & .contacto-hero-form__submit--crediticio {
      background-color: #13233a;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #0d1829;
      }
    }
  }

  /* Creditozas brand styles */
  & .contacto-hero-form--creditozas {
    & .contacto-hero-form__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #000000;
    }

    & .contacto-hero-form__submit--creditozas {
      background-color: #000000;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #333333;
      }
    }
  }

  /* Credizoom brand styles */
  & .contacto-hero-form--credizoom {
    & .contacto-hero-form__title {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #4eb5a4;
    }

    & .contacto-hero-form__submit--credizoom {
      background-color: #4eb5a4;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #3d9a8b;
      }
    }
  }

  /* Mastercredi brand styles */
  & .contacto-hero-form--mastercredi {
    /* #7043: Separate card from image (matching other brands) */
    gap: 80px;

    & .contacto-hero-form__title {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      color: #1a1a1a;
    }

    & .contacto-hero-form__submit--mastercredi {
      background-color: #1a1a1a;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-size: 14.4px;
      font-weight: 700;

      &:hover:not(:disabled) {
        background-color: #333333;
      }
    }
  }
}

@media (min-width: 1000px) {
  :root {
    & .contacto-hero-form {
      display: grid;
      grid-template-columns: 475px 515px;
      grid-auto-flow: column;
      align-items: center;
      justify-content: space-between;
      max-width: 80rem;
      width: 80rem;
      margin: auto;
      padding-bottom: 0;
    }

    & .contacto-hero-form__image {
      display: block;
      width: 475px;
      height: 700px;
      object-fit: cover;
      border-radius: 0;
    }

    & .contacto-hero-form__container {
      margin: 0;
      max-width: 515px;
    }

    /* Crediahora specific image dimensions */
    & .contacto-hero-form--crediahora {
   
      & .contacto-hero-form__image {
        width: 722px;
        height: 629px;
      }
    }

    /* Crediticio specific image dimensions */
    & .contacto-hero-form--crediticio {
      grid-template-columns: 359px 515px;

      & .contacto-hero-form__image {
        width: 359px;
        height: 599px;
      }
    }

    /* Credisolve specific layout */
    & .contacto-hero-form--credisolve {
      width: 80rem;
      grid-template-columns: 1fr 515px;
      gap: 60px;
      padding-top: 50px;
      padding-bottom: 50px;

      & .contacto-hero-form__image {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: bottom center;
        align-self: end;
        margin-bottom: -50px;
      }
    }

    /* Credital specific layout */
    & .contacto-hero-form--credital {
      width: 80rem;
      grid-template-columns: 1fr 515px;
      gap: 60px;
      padding-top: 50px;
      padding-bottom: 50px;

      & .contacto-hero-form__image {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: bottom center;
        align-self: end;
        margin-bottom: -50px;
      }
    }

  }
}

/* Brand-specific layouts for desktop - outside :root nesting for better browser compatibility */
@media (min-width: 1000px) {
  .contacto-hero-form--creditopro {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--creditopro .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--credimoney {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--credimoney .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--credital {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--credital .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--oledinero {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--oledinero .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--creditoamigo {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--creditoamigo .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--credicheck {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--credicheck .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--creditoclic {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--creditoclic .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--crediahora {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }


  .contacto-hero-form--creditozas {
    align-items: anchor-center;
    gap: 80px;
    justify-content: center;
  }

  .contacto-hero-form--creditozas .contacto-hero-form__container {
    margin-left: 80px;
  }

  .contacto-hero-form--credizoom {
    gap: 80px;
    justify-content: center;
  }
}

/* Consent modal overlay */
.contacto-hero-form__modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.contacto-hero-form__modal {
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  max-width: 600px;
  width: 90%;
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.contacto-hero-form__modal h3 {
  margin: 0 0 15px;
  font-size: 1.2rem;
  color: #182d52;
}

.contacto-hero-form__modal-body p,
.contacto-hero-form__modal-body ul {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
  margin: 0 0 15px;
}

.contacto-hero-form__modal-body ul {
  list-style: none;
  padding-left: 0;
}

.contacto-hero-form__modal-body li {
  margin-bottom: 6px;
}

.contacto-hero-form__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.contacto-hero-form__modal-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.contacto-hero-form__modal-btn--secondary {
  background: #e9ecef;
  color: #333;
}

.contacto-hero-form__modal-btn--primary {
  background: #96b4e6;
  color: #182d52;
}


/* === styles.css === */
/**
 * ContactoTramitesOnline Styles
 *
 * Styling for the online procedures section on the contact page.
 * Features:
 * - 2-column grid layout on desktop
 * - Icon + text layout for each item
 * - Semi-transparent white background
 * - Responsive padding and gaps
 */

:root {
  & .contacto-tramites-online {
    padding: 100px var(--body-padding-horizontal);
  }

  & .contacto-tramites-online__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 45px;
  }

  & .contacto-tramites-online__title {
    text-align: center;
    margin: 0 auto;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  & .contacto-tramites-online__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(255, 255, 255, 0.6);
    padding: 40px 15px;
    border-radius: 20px;
  }

  & .contacto-tramites-online__col {
    display: flex;
    flex-direction: column;
    gap: 30px 20px;
  }

  & .contacto-tramites-online__item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  & .contacto-tramites-online__icon {
    min-width: 25px;
    max-height: 25px;
    flex-shrink: 0;
  }

  & .contacto-tramites-online__item-content {
    flex: 1;
  }

  & .contacto-tramites-online__item-title {
    font-size: 18.72px;
    border-bottom: 1px solid #ddd;
    margin: 0 0 15px 0;
    padding-bottom: 0px;
  }

  & .contacto-tramites-online__item-description {
    font-size: 12.96px;
    font-weight: 400;
    margin: 0 0 5px 0;
    line-height: 18.144px;
  }

  & .contacto-tramites-online__item-link {
    font-size: 12.96px;
    text-decoration: none;
    color: inherit;
    font-weight: 400;

    &:hover {
      text-decoration: underline;
    }
  }

  /* Credimoney brand styles */
  & .contacto-tramites-online--credimoney {
    & .contacto-tramites-online__title {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 300;
      font-size: 39.6px;
      color: rgb(46, 16, 71);
    }

    & .contacto-tramites-online__icon {
      color: rgb(46, 16, 71);
    }

    & .contacto-tramites-online__item-title {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 700;
      color: rgb(46, 16, 71);
      border-bottom-color: rgb(46, 16, 71);
    }

    & .contacto-tramites-online__item-description {
      font-family: "Helvetica Neue", sans-serif;
      color: rgb(46, 16, 71);
    }

    & .contacto-tramites-online__item-link {
      color: rgb(46, 16, 71);
    }
  }

  /* Crediahora brand styles */
  & .contacto-tramites-online--crediahora {
    & .contacto-tramites-online__title {
      font-family: Montserrat, sans-serif;
      font-weight: 900;
      font-size: 36px;
      color: rgb(29, 29, 27);
    }

    & .contacto-tramites-online__icon {
      color: rgb(149, 193, 31);
    }

    & .contacto-tramites-online__item-title {
      font-family: Montserrat, sans-serif;
      font-weight: 700;
      color: rgb(29, 29, 27);
      border-bottom-color: rgb(149, 193, 31);
    }

    & .contacto-tramites-online__item-description {
      font-family: Montserrat, sans-serif;
      color: rgb(29, 29, 27);
    }

    & .contacto-tramites-online__item-link {
      color: rgb(149, 193, 31);
    }
  }

  /* Crediator brand styles */
  & .contacto-tramites-online--crediator {
    & .contacto-tramites-online__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #333333;
    }

    & .contacto-tramites-online__icon {
      color: #f55f99;
    }

    & .contacto-tramites-online__item-title {
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      color: #333333;
      border-bottom-color: #f55f99;
    }

    & .contacto-tramites-online__item-description {
      font-family: "Manrope", sans-serif;
      color: #333333;
    }

    & .contacto-tramites-online__item-link {
      color: #f55f99;
    }
  }

  /* Credifix brand styles */
  & .contacto-tramites-online--credifix {
    & .contacto-tramites-online__title {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      color: #182d52;
    }

    & .contacto-tramites-online__icon {
      color: #ff0086;
    }

    & .contacto-tramites-online__item-title {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      color: #182d52;
      border-bottom-color: #ff0086;
    }

    & .contacto-tramites-online__item-description {
      font-family: "Roboto", sans-serif;
      color: #182d52;
    }

    & .contacto-tramites-online__item-link {
      color: #ff0086;
    }
  }

  /* Crediscore brand styles */
  & .contacto-tramites-online--crediscore {
    & .contacto-tramites-online__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #000000;
    }

    & .contacto-tramites-online__icon {
      color: rgba(144, 126, 232, 1);
    }

    & .contacto-tramites-online__item-title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #000000;
      border-bottom-color: rgba(144, 126, 232, 1);
    }

    & .contacto-tramites-online__item-description {
      font-family: "Open Sans", sans-serif;
      color: #000000;
    }

    & .contacto-tramites-online__item-link {
      color: rgba(144, 126, 232, 1);
    }
  }

  /* Credizoom brand styles */
  & .contacto-tramites-online--credizoom {
    & .contacto-tramites-online__title {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .contacto-tramites-online__icon {
      color: #4eb5a4;
    }

    & .contacto-tramites-online__item-title {
      font-family: "AdobeClean", sans-serif !important;
      font-weight: 500;
      color: #000000;
      text-transform: capitalize;
      border-bottom-color: #4eb5a4;
    }

    & .contacto-tramites-online__item-description {
      font-family: "AdobeClean", sans-serif;
      color: #000000;
    }

    & .contacto-tramites-online__item-link {
      color: #4eb5a4;
    }
  }

  /* OleDinero brand styles */
  & .contacto-tramites-online--oledinero {
    & .contacto-tramites-online__title {
      font-family: Poppins, sans-serif;
      font-weight: 700;
      font-size: 39.6px;
      color: rgb(3, 45, 143);
    }

    & .contacto-tramites-online__icon {
      color: rgb(3, 45, 143);
    }

    & .contacto-tramites-online__item-title {
      font-family: Poppins, sans-serif;
      font-weight: 600;
      color: rgb(2, 45, 142);
      border-bottom-color: rgb(3, 45, 143);
    }

    & .contacto-tramites-online__item-description {
      font-family: Poppins, sans-serif;
      font-weight: 500;
      color: rgb(2, 45, 142);
    }

    & .contacto-tramites-online__item-link {
      font-weight: 500;
      color: rgb(3, 45, 143);
    }
  }
}

@media (width >= 500px) {
  :root {
    & .contacto-tramites-online__list {
      padding: 60px;
      border-radius: 40px;
      gap: 60px;
    }

    & .contacto-tramites-online__col {
      gap: 40px;
    }
  }
}

@media (width >= 768px) {
  :root {
    & .contacto-tramites-online__list {
      flex-direction: row;
    }

    & .contacto-tramites-online__col {
      flex: 1;
    }
  }
}

@media (width >= 1300px) {
  :root {
    & .contacto-tramites-online__list {
      padding: 80px 150px;
      gap: 120px;
    }

    & .contacto-tramites-online__col {
      gap: 80px;
    }
  }
}

/* #7044: Mastercredi - dark bg, light title */
.contacto-tramites-online--mastercredi {
  background-color: #1a1a1a !important;

  & h2 {
    color: #e2e8ed !important;
  }
}


/* === styles.css === */
/**
 * Container Styles
 *
 * Core layout component using semantic design tokens.
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Headings (h1, h2), strong text, footer text
 * - --color-text-primary: Body text, h3 headings
 * - --color-brand-primaryLight: Icon decorations
 * - --font-family-base: Font family for all text
 * - --font-weight-bold: Bold text weight
 */

:root {
  & .container {
    width: 100%;
    max-width: 100%;
    --container-background: #ffffff;
    --container-title-h1-color: var(--color-brand-primary);
    --container-title-h2-color: var(--color-brand-primary);
    --container-title-h3-color: var(--color-text-primary);
    --container-text-color: var(--color-text-primary);
    --container-text-strong-color: var(--color-brand-primary);
    --container-footer-color: var(--color-brand-primary);

    & .btn {
      &:first-child {
        --btn-border-radius: 40px;

        &.btn-secondary-filled {
          --btn-border-radius: 40px;
        }
      }
    }

    & .container__content {
      --container-content-max-width: none;
      --container-content-column-flex-gap: 30px;
      --container-content-padding-vertical: var(--body-padding-vertical);
      --container-content-padding-bottom: var(--body-padding-vertical);
      --container-content-padding-horizontal: var(--body-padding-horizontal);

      & strong {
        font-weight: var(--font-weight-bold);
      }
    }
  }
}

@media (width >= 1024px) {
  :root {
    & .container {
      & .container__content {
        --container-content-column-flex-gap: 45px;
        --container-content-max-width: var(--body-max-width, 80rem);
        /* Verified against production (oledinero.es): once the content box
           is capped by max-width and centered with auto margins, it no
           longer needs extra padding on top - that just pushes the content
           in further than production and breaks the alignment between
           sections that do vs. don't add their own padding here. */
        --container-content-padding-horizontal: 0;
      }
    }
  }
}

:root {
  /* Canonical content width used to center every section (header logo,
     hero text, FAQ, footer columns, ...) so their left/right edges line up
     across the whole page. Matches production's own 80rem (this app's root
     font-size is 14.4px, so 80rem = 1152px, confirmed live on oledinero.es). */
  --body-max-width: 80rem;
  /* Only meant to keep content off the raw screen edge on narrower
     viewports, before --body-max-width above starts constraining the box.
     Once that box is centered with its own auto margins, this shouldn't
     keep growing - verified live against oledinero.es, which uses 0px
     extra padding at those wider sizes. */
  --body-padding-horizontal: 15px;
}

@media (width >= 768px) {
  :root {
    --body-padding-horizontal: 1rem;
  }
}

@media (width >= 1600px) {
  :root {
    & .container {
      & .container__content {
        --container-content-max-width: var(--body-max-width, 80rem);
      }
    }
  }
}

.container {
  background: var(--container-background);
  font-family: var(--font-family-base) !important;

  & .container__content {
    position: relative;
    margin: 0 auto;
    padding: var(--container-content-padding-vertical)
      var(--container-content-padding-horizontal)
      var(--container-content-padding-bottom);
    max-width: var(--container-content-max-width);

    display: flex;
    flex-direction: column;
    gap: var(--container-content-column-flex-gap);
    color: var(--container-text-color);
    font-family: var(--font-family-base) !important;

    & h1 {
      color: var(--container-title-h1-color);
      font-family: var(--font-family-base) !important;
      margin-bottom: 0;
    }

    & h2 {
      color: var(--container-title-h2-color);
      font-family: var(--font-family-base);
      margin-bottom: 0;
    }

    & h3 {
      color: var(--container-title-h3-color);
      font-family: var(--font-family-base) !important;
      margin-bottom: 0;
    }

    & :is(li, p) {
      color: var(--container-text-color);
      font-family: var(--font-family-base) !important;
    }

    & .container__icon-top {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-50%);
      color: var(--color-brand-primaryLight);
    }

    & .my-swiper {
      &:not(:has(.my-swiper__prevBtn)) {
        --swiper-wrapper-max-width: 100%;
      }
    }

    & footer {
      color: var(--container-footer-color);
    }
  }

  &.container-parent {
    & > .container__content {
      padding-top: 0;
      padding-bottom: 0;
      gap: 0;

      & .container {
        background: transparent;

        & .container__content {
          padding-left: 0;
          padding-right: 0;
          padding-top: 0;
          max-width: none;
        }
      }
    }
  }
}


/* === styles.css === */
/**
 * CookieBanner Component Styles
 *
 * Custom overrides for vanilla-cookieconsent library.
 * Uses CSS custom properties for brand theming.
 */

/* Override primary button colors */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: var(--cookie-button-border-radius, 40px);
}

#cc-main .cm__btn--primary,
#cc-main .pm__btn--primary {
  background-color: var(--cookie-button-primary-bg, var(--color-brand-primary, #007bff));
  border-color: var(--cookie-button-primary-border, var(--color-brand-primary, #007bff));
  color: var(--cookie-button-primary-color, #fff);
}

#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
  background-color: var(--cookie-button-primary-hover-bg, var(--color-brand-primary-dark, #0056b3));
  border-color: var(--cookie-button-primary-hover-border, var(--color-brand-primary-dark, #0056b3));
}

/* Override secondary button colors */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
  background-color: var(--cookie-button-secondary-bg, transparent);
  border-color: var(--cookie-button-secondary-border, var(--color-brand-primary, #007bff));
  color: var(--cookie-button-secondary-color, var(--color-brand-primary, #007bff));
}

#cc-main .cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover {
  background-color: var(--cookie-button-secondary-hover-bg, var(--color-brand-primary, #007bff));
  color: var(--cookie-button-secondary-hover-color, #fff);
}

/* Override link colors */
#cc-main a {
  color: var(--cookie-link-color, var(--color-brand-primary, #007bff));
}

#cc-main a:hover {
  color: var(--cookie-link-hover-color, var(--color-brand-primary-dark, #0056b3));
}

/* Override toggle colors */
#cc-main .pm__section--toggle .pm__toggle--on {
  background-color: var(--cookie-toggle-on-bg, var(--color-brand-primary, #007bff));
}

/* Modal title */
#cc-main .cm__title,
#cc-main .pm__title {
  color: var(--cookie-title-color, var(--text-color, #343a40));
}

/* Modal description */
#cc-main .cm__desc,
#cc-main .pm__desc {
  color: var(--cookie-text-color, #6c757d);
}

/* Section titles in preferences modal */
#cc-main .pm__section-title {
  color: var(--cookie-section-title-color, var(--text-color, #343a40));
}

/* Floating cookie settings button - matches production style */
.cookie-settings-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2147483645;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  padding: 0;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cookie-settings-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.cookie-settings-btn:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}


/* === styles.css === */
html {
  scroll-behavior: smooth;
}

.customer-service {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-header {
  text-align: center;
  margin-bottom: 3rem;
}

.service-header h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.service-header p {
  font-size: 1.2rem;
  color: #666;
}

/* Brand-specific header styles (color and font-family) */
.customer-service[data-brand="credimoney"] .service-header h2,
.customer-service[data-brand="credimoney"] .contact-methods h2 {
  color: #2e1047;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
}

.customer-service[data-brand="crediahora"] .service-header h2,
.customer-service[data-brand="crediahora"] .contact-methods h2 {
  color: #1D1D1B;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
}

.customer-service[data-brand="oledinero"] .service-header h2,
.customer-service[data-brand="oledinero"] .contact-methods h2 {
  color: #022d8e;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding: 0.5rem;
}

.option-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.option-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.option-card.active {
  border-color: var(--credimoney-primary, #6b4ce6);
  background-color: #f8f9fa;
}

.customer-service[data-brand="crediahora"] .option-card.active {
  border-color: var(--crediahora-primary, #ff6b35);
}

.customer-service[data-brand="oledinero"] .option-card.active {
  border-color: var(--oledinero-primary, #00a86b);
}

.option-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
}

.option-card h3 {
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.option-card p {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.support-form {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.support-form h3 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.support-form .btn {
  display: block;
  min-width: 200px;
  margin: 1.5rem auto;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.support-form .btn-primary {
  background-color: var(--credimoney-primary, #6b4ce6);
  color: white;
}

.customer-service[data-brand="crediahora"] .support-form .btn-primary {
  background-color: var(--crediahora-primary, #ff6b35);
}

.customer-service[data-brand="oledinero"] .support-form .btn-primary {
  background-color: var(--oledinero-primary, #00a86b);
}

.support-form .btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.support-form .form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.support-form .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
}

.support-form .alert {
  margin: 1.5rem 0;
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
}

.support-form .alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.support-form .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.support-form .alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.support-form form {
  max-width: 400px;
  margin: 0 auto;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-top: 0.25rem;
  font-size: 1rem;
}

.form-control:focus {
  outline: none;
  border-color: var(--credimoney-primary, #6b4ce6);
  box-shadow: 0 0 0 2px rgba(107, 76, 230, 0.1);
}

.customer-service[data-brand="crediahora"] .form-control:focus {
  border-color: var(--crediahora-primary, #ff6b35);
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.1);
}

.customer-service[data-brand="oledinero"] .form-control:focus {
  border-color: var(--oledinero-primary, #00a86b);
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.1);
}

input[type="file"].form-control {
  padding: 0.5rem;
  background: #f8f9fa;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.contact-methods {
  margin: 2rem 0;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  scroll-margin-top: 50px;
}

.contact-methods h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.contact-grid-50-50 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-card-50-50 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card-50-50:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.contact-card-50-50 h4 {
  margin: 0 0 0.5rem;
  color: #333;
}

.contact-card-50-50 p {
  margin: 8px 0;
  color: #333;
  font-weight: 500;
}

.contact-card-50-50 small {
  display: block;
  margin-top: 8px;
  color: #888;
}

.content-area {
  scroll-margin-top: 70px;
}

.contextual-faq {
  padding-top: 2rem;
  border-top: 1px solid #dee2e6;
  margin-top: 2rem;
}

.contextual-faq h4 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
  font-size: 1.5rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.faq-card {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-card:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.faq-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
}

.faq-question {
  flex: 1;
  color: #2c3e50;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  padding: 0 1rem;
}

.faq-card.expanded .faq-answer {
  max-height: 500px;
  margin-top: 1rem;
  opacity: 1;
}

.faq-answer p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .customer-service {
    padding: 1rem;
  }

  .options-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .service-header h2 {
    font-size: 2rem;
  }

  .contact-grid-50-50 {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .support-form {
    padding: 1.5rem;
    margin: 1rem auto;
  }
}

/* Disputes Table */
.disputes-table {
  margin: 1rem 0;
  overflow-x: auto;
}

.disputes-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.disputes-table__table th,
.disputes-table__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

.disputes-table__table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.disputes-table__table tr:hover {
  background: #f1f3f5;
  cursor: pointer;
}

.disputes-table__message {
  padding: 1rem !important;
  background: #f8f9fa;
  color: #555;
  font-style: italic;
}

.disputes-table__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.disputes-table__pagination button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.disputes-table__pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button variants */
.btn-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.support-form .btn-danger {
  background-color: #dc3545;
  color: white;
}

.support-form .btn-danger:hover {
  background-color: #c82333;
}

.support-form .btn-secondary {
  background-color: #6c757d;
  color: white;
}

.support-form .btn-secondary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Alert warning */
.support-form .alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

/* Loading and error states */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #dee2e6;
  border-top-color: var(--color-primary, #6b4ce6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-container {
  text-align: center;
  padding: 2rem;
}

.error-container p {
  color: #dc3545;
  margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .support-form {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .support-form h3,
  .support-form .btn,
  .support-form .alert {
    grid-column: 1 / -1;
  }

  .support-form form {
    grid-column: 1;
  }

  .contextual-faq {
    grid-column: 2;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  .support-form:not(:has(form)) .contextual-faq {
    grid-column: 1 / -1;
  }
}


/* === styles.css === */
/* ChartDoughnut component styles */

.chart-doughnut {
  display: grid;
  gap: 17px;
}

.chart-doughnut__amount {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
}

.chart-doughnut__chart {
  position: relative;
  height: 300px;
  display: grid;
  justify-content: center;
  width: 100%;
}

.chart-doughnut__chart canvas {
  max-width: 300px;
  width: 100% !important;
}

/* Brand-specific styles */
.chart-doughnut[data-brand="credimoney"] .chart-doughnut__amount {
  color: rgb(46, 16, 71);
}

.chart-doughnut[data-brand="oledinero"] .chart-doughnut__amount {
  color: rgb(2, 36, 115);
}

.chart-doughnut[data-brand="crediahora"] .chart-doughnut__amount {
  color: #94c21f;

}

/* === styles.css === */
/* ChartLine component styles */

.chart-line {
  margin-top: 38px;
  display: grid;
  gap: 30px;
}

.chart-line__component canvas {
  max-width: 100%;
  width: 100% !important;
  max-height: 300px !important;
}


/* === styles.css === */
/* CircleBarGroup component styles */

.circle-group {
  margin-top: 20px;
}

.circle-group__container {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.circle-group__item {
  position: relative;
  width: 150px;
}

.circle-group__item .CircularProgressbar-text {
  font-size: 1rem;
  dominant-baseline: middle;
  text-anchor: middle;
}

.circle-group__item__subtext {
  text-align: center;
  font-weight: bold;
  margin-top: 0.5rem;
}

.circle-group__item__title {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  z-index: 1;
}

@media (width >= 500px) {
  .circle-group__container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width >= 1000px) {
  .circle-group__container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* Brand-specific styles */
.circle-group[data-brand="credimoney"] .circle-group__item__title {
  color: rgb(46, 16, 71);
}

.circle-group[data-brand="credimoney"] .circle-group__item__subtext {
  color: rgb(46, 16, 71);
}

.circle-group[data-brand="crediahora"] .circle-group__item__title {
  color: #94c21f;
}

.circle-group[data-brand="crediahora"] .circle-group__item__subtext {
  color: #94c21f;
}

.circle-group[data-brand="oledinero"] .circle-group__item__title {
  color: rgb(2, 36, 115);
}

.circle-group[data-brand="oledinero"] .circle-group__item__subtext {
  color: rgb(2, 36, 115);
}


/* === styles.css === */
/* DSection component styles */

.dsection {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 14.4px;
  border-radius: 10px;
  padding: 43.2px;
  background-color: transparent;
}

.dsection__container {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3rem;
}

.dsection__title {
  font-size: 2.5rem;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  color: var(--color-text-primary, #000000);
}


/* Brand-specific styles */
.dsection[data-brand="credimoney"] {
  background-color: #ffffff;

  & .dsection__title {
    color: rgb(46, 16, 71);
  }
}

.dsection[data-brand="crediahora"] {
  background-color: #ffffff;

  & .dsection__title {
    color: rgb(29, 29, 27);
  }
}

.dsection[data-brand="oledinero"] {
  background-color: #ffffff;

  & .dsection__title {
    color: rgb(2, 36, 115);
  }
}


/* === styles.css === */
/* DWelcome component styles */

.dwelcome {
  display: grid;
  justify-content: center;
  background-color: #caf0f7;
  padding: 20px;
}

.dwelcome img {
  margin: auto;
  margin-bottom: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.dwelcome p {
  color: #333;
}

.dwelcome p strong.active {
  color: #4bba24;
}

.dwelcome-container {
  display: grid;
  grid-auto-flow: row;
  justify-content: start;
  gap: 0 30px;
}

.text--gold {
  color: #d2b600;
}

.dwelcome-profile {
  display: grid;
  gap: 15px;
  align-items: center;
  margin-top: 20px;
}

@media (width >= 768px) {
  .dwelcome-profile {
    grid-auto-flow: column;
    gap: 20px;
  }
}

.dwelcome-profile .btn {
  background-color: rgb(20, 67, 219);
  color: #fff;
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
}

.dwelcome-profile .progress {
  position: relative;
  flex: 1;
  height: 1.6rem;
  margin: 0;
  background-color: rgba(250, 250, 250, 0.3);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (width >= 768px) {
  .dwelcome-profile .progress {
    width: 350px;
  }
}

.dwelcome-profile .progress-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 20px;
  text-align: center;
  border-radius: 4px;
  display: grid;
  justify-content: center;
  align-content: center;
  font-weight: bold;
  z-index: 1;
}

.dwelcome-profile button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 auto;
  height: 35px;
  border-radius: 4px;
  width: 100%;
  padding: 8px 16px;
  transition: background-color 0.2s;
}

.dwelcome-profile button:hover {
  opacity: 0.9;
}

@media (width >= 768px) {
  .dwelcome-profile button {
    width: 180px;
  }
}

.dwelcome-content p {
  font-size: 1.5rem;
  margin: 8px 0;
}

@media (width >= 768px) {
  .dwelcome img {
    margin: 0;
    width: 100px;
    height: 100px;
  }

  .dwelcome-container {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
  }
}

/* Progress bar animations */
.progress-bar {
  height: 100%;
  transition: width 0.6s ease;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.progress-bar-striped,
.progress-striped .progress-bar {
  background-image: linear-gradient(
    45deg,
    hsla(0, 0%, 95%, 0.8) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 95%, 0.8) 0,
    hsla(0, 0%, 95%, 0.8) 75%,
    transparent 0,
    transparent
  );
  background-size: 40px 40px;
}

.progress-bar.active,
.progress.active .progress-bar {
  animation: progress-animation 2s linear infinite;
}

@keyframes progress-animation {
  0% {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Brand-specific styles */
.dwelcome[data-brand="credimoney"] {
  background-color: rgb(192, 229, 235);
}

.dwelcome[data-brand="credimoney"] p {
  color: rgb(46, 16, 71);
}

.dwelcome[data-brand="credimoney"] .btn {
  background-color: rgb(46, 16, 71);
}

.dwelcome[data-brand="crediahora"] {
  background-color: rgb(29, 29, 27);
}

.dwelcome[data-brand="crediahora"] p {
  color: rgb(245, 245, 245);
}

.dwelcome[data-brand="crediahora"] .btn {
  background-color: #95c11f;
  color: rgb(29, 29, 27);
}

.dwelcome[data-brand="oledinero"] {
  background-color: rgb(2, 36, 115);
}

.dwelcome[data-brand="oledinero"] p {
  color: rgb(255, 255, 255);
}

.dwelcome[data-brand="oledinero"] .btn {
  background-color: rgb(215, 255, 123);
  color: rgb(2, 36, 115);
}


/* === styles.css === */
/* Expenses component styles */

.expenses {
  display: grid;
  gap: 40px;
}

.expenses h2 {
  text-align: center;
  font-weight: normal;
  font-size: 1.5rem;
}

.expenses-content img {
  display: none;
}

@media (width >=768px) {
  .expenses {
    grid-auto-flow: column;
  }

  .expenses-content {
    display: grid;
    padding: 0 3%;
  }

  .expenses-content img {
    display: block;
    margin: auto;
    max-width: 278px;
  }
}

/* Brand-specific styles */
.expenses[data-brand="credimoney"] h2 {
  color: rgb(46, 16, 71);
}

.expenses[data-brand="oledinero"] h2 {
  color: rgb(2, 36, 115);
}

.expenses[data-brand="crediahora"] h2 {
  color: #94c21f;
}

/* === styles.css === */
/* ImageGroup component styles */

.image-group {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.image-group img {
  height: 56px;
  object-fit: contain;
  max-width: 87px;
}

@media (width >= 768px) {
  .image-group {
    align-items: center;
    justify-content: space-around;
  }

  .image-group img {
    height: 80px;
    max-width: 175px;
  }
}


/* === index.css === */
.edit-profile {
  height: 100%;
  overflow: hidden;

  .edit-profile-top {
    font-size: 1.1rem;
    padding-top: 0;
    text-align: center;

    .edit-profile-top-image {
      position: relative;
      padding-bottom: 30px;

      svg {
        width: 264px;
      }

      img {
        position: relative;
        z-index: 2;
        bottom: -13px;
      }

      .grafana-gauge,
      .undefined-gauge {
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
      }

      img {
        margin: auto;
      }
    }
  }

  .text-gold {
    color: var(--color-excellent-dark);
  }

  .edit-profile-body {
    padding: var(--bs-modal-padding);
    /* padding-left: 50px; */
  }

  .edit-profile-body-welcome {
    padding: var(--bs-modal-padding);
    h4 {
      margin: 10px 0;
    }
  }

  .edit-profile-list {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
  }

  .edit-profile-item {
    position: relative;
    display: grid;
    justify-content: space-between;
    grid-auto-flow: column;
    align-items: center;
    padding-left: 25px;

    &.edit-profile-item--excelent {
      .edit-profile-item__number {
        border-color: var(--color-excellent-dark);
        color: var(--color-excellent-dark);
      }

      .edit-profile-item__progress {
        color: var(--color-excellent-dark);
      }
    }

    .edit-profile-item__number {
      position: absolute;
      font-size: 0.75rem;
      left: -15px;
      color: var(--color-excellent-dark);
      border: solid 2px var(--color-excellent-dark);
      border-radius: 50%;
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit-profile-item__text {
      margin: 0;
    }

    .edit-profile-item__number {
      border-color: var(--bs-warning);
      color: var(--bs-warning);
    }

    .edit-profile-item__progress {
      color: var(--bs-warning);
    }

    .edit-profile-item__edit {
      display: grid;
      grid-auto-flow: column;
      gap: 10px;
      cursor: pointer;
    }

    & hr {
      margin: 1rem 0;
      color: inherit;
      border: 0;
      border-top: var(--bs-border-width) solid;
      opacity: 0.25;
    }
  }
}

@media (width > 768px) {
  .edit-profile {
    & .edit-profile-item {
      & .edit-profile-item__number {
        left: -40px;
      }
    }

    .edit-profile-body {
      padding: var(--bs-modal-padding);
    }

    .edit-profile-top {
      padding-top: 30px;

      .edit-profile-top-image {
        svg {
          width: 300px;
        }
        img {
          bottom: 0;
        }
      }
    }
  }

  .edit-profile-list {
    padding-left: 40px;
  }
}


/* === index.css === */
.edit-profile-area__container {
  display: grid;
  gap: 0.5rem;
  max-height: 400px;

  .edit-profile-area__item {
    position: relative;

    input {
      width: 100%;
      border: 1px solid rgb(18 18 18 / 23%);
      border-radius: 4px;
      padding: 1rem 0.75rem;
      padding-top: 1.625rem;
      padding-bottom: 0.625rem;
      margin: 0;
      &:disabled {
        pointer-events: none;
      }
    }

    label {
      position: absolute;
      top: 2px;
      left: 0;
      z-index: 1;
      color: rgba(var(--bs-body-color-rgb), 0.65);
      transform: translateY(0rem) translateX(0.75rem);
      font-size: 0.8rem;
    }
  }
}

@media (width >=768px) {
  .edit-profile-area__container {
    grid-template-columns: repeat(2, 1fr);

    .edit-profile-area__item {
      label {
        width: 92%;
        line-height: 1.1;
      }

      input {
        padding: 1.5325rem 0.7rem 0.625rem;
      }
    }
  }
}

.modal-body {
  position: relative;
}
.modal {
  .modal-loader {
    position: absolute;
    background-color: rgba(250, 250, 250, 0.6);
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    svg {
      position: absolute;
      height: 250px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
  }
}


/* === styles.css === */
/* Offers component styles */

.offers {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

.offer-column {
  flex: 1 1 100%;
  max-width: 100%;
}

.offer-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer-image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

.offer-image-container a {
  display: flex;
  justify-content: center;
}

.offer-image {
  width: 250px;
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
}

.product-category {
  font-size: 0.9em;
  color: #007bff;
}

.offer-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.offer-title {
  font-size: 1em;
  color: #6c757d;
  margin-bottom: 8px;
}

.offer-subtitle {
  font-size: 1.25em;
  color: #000;
  margin-bottom: 12px;
}

.offer-button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 300px;
}

.offer-button:hover {
  background-color: #0056b3;
}

.offers-loading {
  text-align: center;
  padding: 40px;
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .offers {
    flex-direction: unset;
    justify-content: center;
  }

  .offer-column {
    flex: 1 1 45%;
    max-width: 45%;
  }
}

@media (min-width: 1200px) {
  .offers .offer-card {
    flex-direction: row;
  }

  .offers .offer-image {
    max-width: 200px;
  }
}

/* Brand-specific styles */
.offers[data-brand="credimoney"] .offer-title {
  color: rgb(46, 16, 71);
}

.offers[data-brand="credimoney"] .offer-button {
  background-color: rgb(46, 16, 71);
}

.offers[data-brand="credimoney"] .offer-button:hover {
  opacity: 0.9;
}

.offers[data-brand="credimoney"] .product-category {
  color: rgb(46, 16, 71);
}

.offers[data-brand="crediahora"] .offer-card {
  background-color: #ffffff;
  border-color: #ccc;
}

.offers[data-brand="crediahora"] .offer-title {
  color: rgb(29, 29, 27);
}

.offers[data-brand="crediahora"] .offer-subtitle {
  color: rgb(29, 29, 27);
}

.offers[data-brand="crediahora"] .offer-button {
  background-color: #95c11f;
  color: rgb(29, 29, 27);
}

.offers[data-brand="crediahora"] .offer-button:hover {
  opacity: 0.9;
}

.offers[data-brand="crediahora"] .product-category {
  color: #95c11f;
}

.offers[data-brand="crediahora"] .offers-loading {
  color: rgb(29, 29, 27);
}

.offers[data-brand="oledinero"] .offer-title {
  color: rgb(2, 36, 115);
}

.offers[data-brand="oledinero"] .offer-button {
  background-color: rgb(215, 255, 123);
  color: rgb(2, 36, 115);
}

.offers[data-brand="oledinero"] .offer-button:hover {
  opacity: 0.9;
}

.offers[data-brand="oledinero"] .product-category {
  color: rgb(2, 36, 115);
}


/* === styles.css === */
/* Performance component styles */

.performance .performance-list {
  display: grid;
  gap: 0.5rem;
}

.performance .performance-list li {
  display: flex;
  justify-content: space-between;
  font-size: x-large;
}

@media (width >= 768px) {
  .performance-list {
    grid-auto-flow: column;
  }

  .performance-list li {
    flex-direction: column-reverse;
    align-items: center;
  }
}

/* Brand-specific styles */
.performance[data-brand="credimoney"] .performance-list li {
  color: rgb(46, 16, 71);
}

.performance[data-brand="oledinero"] .performance-list li {
  color: rgb(2, 36, 115);
}

.performance[data-brand="crediahora"] .performance-list li {
  color: #94c21f;
}


/* === styles.css === */
/* Puntuacion component styles */

.puntuacion {
  display: grid;
  gap: 2rem;
}

.puntuacion-list {
  display: grid;
  gap: 0.7rem;
}

.puntuacion__box {
  position: relative;
}

.puntuacion__box-gauge {
  display: grid;
  justify-content: center;
}

.puntuacion__box-gauge .radial-gauge svg {
  height: 100% !important;
}

.puntuacion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.puntuacion-item__title {
  font-size: 15px;
  font-weight: 500;
}

.puntuacion-item__bar {
  width: 117px;
  height: 20px;
  border-radius: 10px;
}

.puntuacion-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-left: 40px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f9f9f9;
  max-width: 100%;
}

.puntuacion-quote .score-bar {
  position: absolute;
  left: -20px;
  width: 4px;
  height: 100px;
  border-radius: 10px;
  margin-right: 20px;
}

.puntuacion-quote .score-bar.malo {
  background: linear-gradient(0deg, red, #ffcccb);
}

.puntuacion-quote .score-bar.bueno {
  background: linear-gradient(0deg, orange, #ffeb3b);
}

.puntuacion-quote .score-bar.excelente {
  background: linear-gradient(0deg, green, #a5d6a7);
}

.puntuacion-quote__title {
  margin: 0;
  font-size: 24px;
  color: #4a148c;
}

.puntuacion-quote__subtitle {
  position: relative;
  margin: 5px 0;
  font-size: 18px;
  color: #ff3d00;
}

.puntuacion-quote__text {
  margin: 10px 0 0;
  font-size: 16px;
  color: #333;
}

.excellent {
  background: #05ce05;
}

.good {
  background: #32c532;
}

.regular {
  background: #e6da2a;
}

.warning {
  background: #d65003;
}

.bad {
  background: #e63232;
}

@media (width >= 768px) {
  .puntuacion .puntuacion-item__bar {
    width: 55%;
    height: 1.2rem;
  }
}

@media (width >= 1200px) {
  .puntuacion {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .puntuacion-list {
    padding-top: 46px;
    gap: 1.2rem;
  }

  .puntuacion-quote {
    width: 95%;
  }

  .puntuacion-item__title {
    font-size: 1rem;
    margin: 0;
  }
}

/* Brand-specific styles */
.puntuacion[data-brand="credimoney"] .puntuacion-item__title {
  color: rgb(46, 16, 71);
}

.puntuacion[data-brand="credimoney"] .puntuacion-quote__title {
  color: rgb(46, 16, 71);
}

.puntuacion[data-brand="crediahora"] .puntuacion-item__title {
  color: rgb(29, 29, 27);
}

.puntuacion[data-brand="crediahora"] .puntuacion-quote {
  background-color: #f9f9f9;
  border-color: #ddd;
}

.puntuacion[data-brand="crediahora"] .puntuacion-quote__title {
  color: rgb(29, 29, 27);
}

.puntuacion[data-brand="crediahora"] .puntuacion-quote__subtitle {
  color: #ff3d00;
}

.puntuacion[data-brand="crediahora"] .puntuacion-quote__text {
  color: #333;
}

.puntuacion[data-brand="oledinero"] .puntuacion-item__title {
  color: rgb(2, 36, 115);
}

.puntuacion[data-brand="oledinero"] .puntuacion-quote__title {
  color: rgb(2, 36, 115);
}


/* === styles.css === */
/* RadialGaugeComponent styles */

.radial-gauge-component {
  width: 100%;
  margin: auto;
}

.radial-gauge-component svg {
  width: 100%;
  height: 100%;
}

.radial-gauge-component .radial-gauge {
  width: 100%;
  height: 100%;
}

@media (width >= 768px) {
  .radial-gauge-component {
    width: 100%;
    max-width: 390px;
  }

  .radial-gauge svg {
    width: 300px;
    height: 100%;
  }
}


/* === styles.css === */
/* RadioGroup component styles */

.radio-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 200px;
  margin: auto;
}

.radio-group label {
  position: relative;
  display: block;
  transform: translateX(-26%);
}

.radio-group input {
  display: none;
}

.radio-text {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-brand-primary);
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  border-radius: 0.25rem;
  cursor: pointer;
}

.radio-text.radio-text--checked {
  color: #fff;
  background-color: var(--color-brand-primary);
}

/* Brand-specific styles */
.radio-group[data-brand="credimoney"] .radio-text {
  color: rgb(46, 16, 71);
}

.radio-group[data-brand="credimoney"] .radio-text--checked {
  background-color: rgb(46, 16, 71);
  color: #fff;
}

.radio-group[data-brand="crediahora"] .radio-text {
  color: #95c11f;
}

.radio-group[data-brand="crediahora"] .radio-text--checked {
  background-color: #95c11f;
  color: rgb(29, 29, 27);
}

.radio-group[data-brand="oledinero"] .radio-text {
  color: rgb(2, 36, 115);
}

.radio-group[data-brand="oledinero"] .radio-text--checked {
  background-color: rgb(215, 255, 123);
  color: rgb(2, 36, 115);
}


/* === styles.css === */
/**
 * DashboardNavbar Styles
 *
 * Theme-driven navbar styling using CSS custom properties.
 * All values come from brand theme configuration (config.cljs).
 *
 * Theme Variables Used:
 * - --navbar-background: Background color with opacity
 * - --navbar-shadow: Box shadow
 * - --navbar-text-color: Default text color
 * - --navbar-active-color: Active item color
 * - --navbar-active-border: Active item border
 * - --navbar-hover-color: Hover state color
 * - --navbar-dropdown-bg: Dropdown background
 * - --navbar-dropdown-border: Dropdown border
 * - --navbar-subitem-active-bg: Active subitem background
 * - --navbar-subitem-active-text: Active subitem text
 * - --navbar-notification-bg: Notification badge background
 * - --navbar-notification-text: Notification badge text
 */

.dnavbar-container {
  position: relative;
  width: inherit;
  padding: 0;
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: auto auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.dnavbar {
  position: sticky !important;
  top: 0;
  background: var(--navbar-background);
  padding: 1rem 0;
  box-shadow: var(--navbar-shadow);
  width: 100%;
  z-index: 10;
}

.dnavbar-logo-link {
  text-decoration: none;
  color: inherit;
}

.dnavbar-logo {
  width: 100px;
  max-width: 100%;
  height: auto;
}

.dnavbar-icon--burger {
  display: grid;
  justify-self: end;
  font-size: 30px;
  color: var(--navbar-text-color);
  cursor: pointer;
}

.dnavbar img {
  cursor: pointer;
}

.dnavbar .dnavbar-list-item--active,
.dnavbar .dnavbar-list-active {
  color: var(--navbar-active-color) !important;
}

.dnavbar-list {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  justify-content: flex-start;
  align-self: baseline;
  gap: 5px;
  padding: 0;
  margin: 0;
  color: var(--navbar-text-color);
  margin-top: 20px;
  grid-column: 1/3;
  justify-content: normal;
}

.dnavbar-list > li {
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
  color: var(--navbar-text-color);
  white-space: nowrap;
  justify-items: left;
}

.dnavbar-list > li.dnavbar-item--sublist {
  position: relative;
  cursor: pointer;
  justify-content: flex-start;
}

.dnavbar-list > li button {
  cursor: pointer;
  background-color: unset !important;
  border: none;
  padding: 0.5rem 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.dnavbar-list > li button:hover {
  color: var(--navbar-hover-color) !important;
}

.dnavbar-list > li button.dnavbar-list-item--active {
  color: var(--navbar-active-color) !important;
  pointer-events: none;
  border-bottom: 2px solid var(--navbar-active-border) !important;
  background-color: unset !important;
}

.dnavbar-list > li button.dnavbar-list-item--hidden {
  display: none;
}

.dnavbar-list.dnavbar-list--hidden {
  display: none;
}

.dnavbar-list .dnavbar-list-active .dnavbar-item__title {
  border-bottom: 2px solid var(--navbar-active-border) !important;
}

/* Dropdown Submenu */
.dnavbar-sublist {
  display: none;
  position: absolute;
  padding-top: 17px;
  max-width: 95%;
  width: 100%;
  left: 50%;
  transform: translate(-50%, 16px);
}

.dnavbar-sublist > ul {
  display: grid;
  grid-auto-flow: row;
  justify-content: normal;
  background: var(--navbar-dropdown-bg);
  width: 100%;
  margin: 0;
  border: 1px solid var(--navbar-dropdown-border);
  border-top: 3px solid var(--navbar-dropdown-border);
  border-radius: 8px;
  padding: 0;
  list-style: none;
}

.dnavbar-sublist li {
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
}

.dnavbar-sublist .dnavbar-sublist--active {
  background-color: var(--navbar-subitem-active-bg);
  pointer-events: none;
}

.dnavbar-sublist .dnavbar-sublist--active button {
  color: var(--navbar-subitem-active-text);
}

.dnavbar-sublist li button {
  color: var(--navbar-text-color);
  text-decoration: none;
  display: grid;
  align-items: center;
  align-content: center;
  grid-auto-flow: column;
  grid-auto-columns: 50px auto;
  justify-content: flex-start;
  padding: 8px 0;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.dnavbar-sublist li:last-child {
  border-top: 1px solid var(--navbar-dropdown-border);
  padding-top: 10px;
}

.dnavbar-item--sublist {
  width: 100%;
  justify-content: normal;
}

.dnavbar-item--sublist:hover > .dnavbar-sublist {
  display: block;
}

/* Notification Badge */
.notify-btn {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.notify-btn i {
  font-size: 1.25rem;
}

.notify-count {
  position: absolute;
  top: 0;
  left: 25px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.7rem;
  line-height: 18px;
  color: var(--navbar-notification-text);
  background: var(--navbar-notification-bg);
  border-radius: 999px;
  text-align: center;
  pointer-events: none;
}

.notify-count:empty,
.notify-count[data-count='0'] {
  display: none;
}

/* Fade-in animation */
.fade--in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive Design */
@media (min-width: 768px) {
  .dnavbar-item--sublist .dnavbar-sublist {
    width: 200px;
    max-width: unset;
    right: 0;
    left: unset;
    transform: translateY(16px);
  }

  .dnavbar .dnavbar-list {
    right: 0;
    color: var(--navbar-text-color);
    width: 210px;
    left: auto;
    grid-column: unset;
  }

  .dnavbar .dnavbar-list > li {
    cursor: pointer;
  }

  .dnavbar .dnavbar-logo {
    width: 144px;
  }

  .dnavbar .dnavbar-icon--burger {
    display: none;
  }

  .dnavbar .dnavbar-list {
    justify-content: end;
    grid-auto-flow: column;
    align-items: center;
    gap: 25px;
    height: 100%;
    margin-top: 0;
  }

  .dnavbar .dnavbar-list.dnavbar-list--hidden {
    display: grid;
  }
}


/* === styles.css === */
/**
 * DashboardPage Styles
 *
 * Full-page dashboard layout combining DashboardNavbar with content sections.
 */

.dashboard-page {
  min-height: 100vh;
  width: 100%;
}

/* Matches .panel-header__container's fixed horizontal padding (same
   HeaderNav sits above this content) instead of a max-width + auto-margin
   box - the two used different centering schemes (120px fixed padding here
   vs. a 1400px-capped, auto-centered box) that drift apart at wide
   viewports, leaving the header's logo/menu out of line with the welcome
   card and sections below it. */
.dashboard-page__content {
  max-width: none;
  margin: 0;
  padding: 0 120px 100px;
}

@media (max-width: 1200px) {
  .dashboard-page__content {
    padding: 0 60px 100px;
  }
}

@media (max-width: 1024px) {
  .dashboard-page__content {
    padding: 0 30px 100px;
  }
}

.dashboard-page__welcome {
  margin-bottom: 0;
}

/* Loading state */
.dashboard-page-loading {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}

.dashboard-page-loading .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.dashboard-page-loading .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: #2e1047;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Error state */
.dashboard-page-error {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}

.dashboard-page-error .error-container {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.dashboard-page-error h2 {
  color: #dc3545;
  margin-bottom: 1rem;
}

.dashboard-page-error p {
  color: #666;
  margin-bottom: 1.5rem;
}

.dashboard-page-error button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 0.5rem;
}

.dashboard-page-error .btn-primary {
  background-color: #2e1047;
  color: white;
}

.dashboard-page-error .btn-primary:hover {
  background-color: #3d1560;
}

.dashboard-page-error .btn-secondary {
  background-color: #6c757d;
  color: white;
}

.dashboard-page-error .btn-secondary:hover {
  background-color: #5a6268;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Brand-specific backgrounds */
[data-brand="credimoney"].dashboard-page-loading,
[data-brand="credimoney"].dashboard-page-error {
  background: linear-gradient(to bottom, rgb(192, 229, 235) 0%, #f5f5f5 300px);
}

[data-brand="oledinero"].dashboard-page-loading,
[data-brand="oledinero"].dashboard-page-error {
  background: linear-gradient(to bottom, rgb(2, 36, 115) 0%, #f5f5f5 300px);
}

[data-brand="oledinero"] .dashboard-page-loading .spinner {
  border-top-color: rgb(215, 255, 123);
}

[data-brand="crediahora"] .dashboard-page-loading .spinner {
  border-top-color: #95c11f;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dashboard-page__content {
    padding: 0 15px 60px;
  }
}


/* === styles.css === */
/* EmailForgotten Component Styles */

.email-forgotten {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  max-width: 500px;
  margin: 0 auto;
}

.email-forgotten h1 {
  font-size: 43.2px;
  font-weight: 300;
  line-height: 51.84px;
  margin-bottom: 30px;
  text-align: center;
}

.email-forgotten input {
  width: 100%;
  padding: 14.4px 10.8px;
  background-color: rgb(232, 240, 254);
  border: 1px solid #ddd;
  border-radius: 9999px;
  font-size: 14.4px;
  height: 50.92px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.email-forgotten input:focus {
  outline: none;
  border-color: var(--color-primary, #ffd700);
}

.email-forgotten .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: fit-content;
  padding: 12px 25px;
  font-size: 14.4px;
  font-weight: 700;
  border: 2px solid;
  border-radius: 40px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.email-forgotten .btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.email-forgotten .alert {
  width: 100%;
  margin-bottom: 15px;
}

/* Brand-specific styles */

/* Credimoney */
.email-forgotten[data-brand="credimoney"] {
  & h1 {
    color: rgb(46, 16, 71);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 300;
  }

  & input {
    color: rgb(46, 16, 71);
    border-color: rgb(216, 199, 255);
    font-family: "Helvetica Neue", sans-serif;
  }

  & .btn {
    background-color: rgb(248, 248, 146);
    color: rgb(46, 16, 71);
    border-color: rgb(248, 248, 146);
    border-radius: 40px;
    font-family: "Helvetica Neue", sans-serif;
  }
}

/* Crediahora */
.email-forgotten[data-brand="crediahora"] {
  & h1 {
    color: rgb(29, 29, 27);
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 40.32px;
    line-height: 48.384px;
  }

  & input {
    color: rgb(29, 29, 27);
    border-color: rgb(245, 245, 245);
    font-family: "Montserrat", sans-serif;
  }

  & .btn {
    background-color: rgb(29, 29, 27);
    color: rgb(245, 245, 245);
    border-color: transparent;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
  }
}

/* OleDinero */
.email-forgotten[data-brand="oledinero"] {
  & h1 {
    color: rgb(215, 255, 123);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
  }

  & input {
      background-color: rgb(232, 240, 254);
      color: rgb(2, 45, 142);
      border: 1px solid rgb(255, 255, 255);
      font-family: Poppins, sans-serif;
      font-weight: 500;
      padding: 15px 25px;

      &::placeholder {
         color: rgb(2, 45, 142);
      }

      &::-ms-input-placeholder {
        color: rgb(2, 45, 142);
      }
  }

  & .btn {
    background-color: rgba(0, 0, 0, 0);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(215, 255, 123);
    border-radius: 40px 40px 40px 0px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
  }
}

/* CreditoAmigo */
.email-forgotten[data-brand="creditoamigo"] {
  & h1 {
    color: rgb(0, 0, 255);
    font-family: "Seitu", sans-serif;
    font-weight: 700;
  }

  & input {
    background-color: rgb(232, 240, 254);
    color: #1D2C56;
    border: 1px solid #0000FF;
    font-family: Seitu, sans-serif;
    padding: 15px 25px;
    
    &::placeholder {
      color: #073034;
    }

    &::-ms-input-placeholder {
      color: #073034;
    }
  }

  & .btn {
    background-color: #0000FF;
    color: #ffffff;
    border-color: #0000FF;
    border-radius: 40px;
    font-family: Seitu, sans-serif;
  }
}

/* CreditoClic */
.email-forgotten[data-brand="creditoclic"] {
  & h1 {
    color: rgb(7, 48, 52);
    font-family: "Harabara", sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 43.2px;
  }

  & input {
    background-color: rgb(232, 240, 254);
    color: #073034;
    border: 1px solid #073034;
    font-family: Harabara, sans-serif;
    padding: 15px 25px;

      &::placeholder {
        color: #073034;
      }

      &::-ms-input-placeholder {
        color: #073034;
      }
  }

  & .btn {
    background-color: #073034;
    color: #ADEF45;
    border-color: #073034;
    border-radius: 40px;
    font-family: Harabara, sans-serif;
  }
}

/* CreditoPRO */
.email-forgotten[data-brand="creditopro"] {
  & h1 {
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
  }

  & input {
      background-color: rgb(232, 240, 254);
      color: #333333;
      border: 1px solid #ffffff;
      font-family: "Open Sans", sans-serif;
      padding: 15px 25px;

      &::placeholder {
         color: #333333;
      }

      &::-ms-input-placeholder {
         color: #333333;
      }
  }

  & .btn {
    background-color: #333333;
    color: rgb(243, 243, 243);
    border-color: #333333;
    border-radius: 999px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
  }
}

/* Crediator */
.email-forgotten[data-brand="crediator"] {
  & h1 {
    color: rgb(51, 51, 51);
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 43.2px;
  }

  & input {
    color: rgb(51, 51, 51);
    border-color: rgb(255, 255, 255);
    font-family: "Manrope", sans-serif;
  }

  & .btn {
    background-color: rgb(242, 213, 224);
    color: rgb(51, 51, 51);
    border-color: transparent;
    border-radius: 999px;
    font-family: "Manrope", sans-serif;
  }
}

/* Credifix */
.email-forgotten[data-brand="credifix"] {
  & h1 {
    color: rgb(24, 45, 82);
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 36px;
    line-height: 43.2px;
  }

  & input {
    color: rgb(24, 45, 82);
    border-color: rgb(217, 228, 245);
    font-family: "Roboto", sans-serif;
  }

  & .btn {
    background-color: rgb(150, 180, 230);
    color: rgb(24, 45, 82);
    border-color: transparent;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
  }
}

/* Crediscore */
.email-forgotten[data-brand="crediscore"] {
  & h1 {
    color: rgb(0, 0, 0);
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43.2px;
  }

  & input {
    color: rgb(0, 0, 0);
    border-color: rgb(255, 255, 255);
    font-family: "Open Sans", sans-serif;
  }

  & .btn {
    background-color: rgb(144, 126, 232);
    color: rgb(255, 255, 255);
    border-color: transparent;
    border-radius: 999px;
    font-family: "Open Sans", sans-serif;
  }
}

/* Creditando */
.email-forgotten[data-brand="creditando"] {
  & h1 {
    color: #002449;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
  }

  & input {
    background-color: rgb(232, 240, 254);
    color: #002449;
    border: 1px solid #002449;
    font-family: "Manrope", sans-serif;
    padding: 15px 25px;
    
    &::placeholder {
      color: #073034;
    }

    &::-ms-input-placeholder {
      color: #073034;
    }

  }

  & .btn {
    background-color: #002449;
    color: #ffffff;
    border-color: #002449;
    border-radius: 0;
    font-family: "Manrope", sans-serif;
  }
}

/* Crediticio */
.email-forgotten[data-brand="crediticio"] {
  & h1 {
    color: rgb(19, 35, 58);
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  & input {
    color: rgb(0, 0, 0);
    border-color: rgb(255, 165, 115);
    font-family: "Open Sans", sans-serif;
  }

  & .btn {
    background-color: rgb(19, 35, 58);
    color: rgb(255, 165, 115);
    border-color: rgb(19, 35, 58);
    border-radius: 40px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
  }
}

/* Creditozas */
.email-forgotten[data-brand="creditozas"] {
  & h1 {
    color: rgb(0, 0, 0);
    font-family: "Manrope", sans-serif;
    font-weight: 800;
  }

  & input {
    color: rgb(0, 0, 0);
    border-color: rgb(229, 234, 234);
    font-family: "Manrope", sans-serif;
  }

  & .btn {
    background-color: rgb(0, 0, 0);
    color: rgb(150, 180, 230);
    border-color: rgb(0, 0, 0);
    border-radius: 999px;
    font-family: "Manrope", sans-serif;
  }
}

/* Credizoom */
.email-forgotten[data-brand="credizoom"] {
  & h1 {
    color: rgb(78, 181, 164);
    font-family: "LemonMilk", sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 43.2px;
  }

  & input {
    color: rgb(0, 0, 0);
    border-color: rgb(128, 232, 215);
    font-family: "AdobeClean", sans-serif;
  }

  & .btn {
    background-color: rgb(0, 0, 0);
    color: rgb(78, 181, 164);
    border-color: rgb(0, 0, 0);
    border-radius: 999px;
    font-family: "AdobeClean", sans-serif;
    font-weight: 500;
  }
}

/* Mastercredi */
.email-forgotten[data-brand="mastercredi"] {
  & h1 {
    color: rgb(26, 26, 26);
    font-family: "Coolvetica", sans-serif;
    font-weight: 700;
  }

  & input {
    color: rgb(26, 26, 26);
    border-color: rgb(226, 232, 237);
    font-family: "AdobeClean", sans-serif;
  }

  & .btn {
    background-color: rgb(26, 26, 26);
    color: rgb(226, 232, 237);
    border: none;
    border-radius: 10px;
    font-family: "AdobeClean", sans-serif;
    font-weight: 600;
  }
}

.email-forgotten[data-brand="credicheck"] {
  & h1 {
    color: #18384e;
    font-family: "Funnel Display", sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
  }

  & input {
    background-color: transparent;
    color: rgb(0, 0, 0);
    border-color: rgb(255, 255, 255);
    font-family: "Funnel Display", sans-serif;
    font-size: 16px;
    padding: 16px 12px;
    height: 56.39px;
  }

  & .btn {
    background-color: #76bc74;
    color: rgb(255, 255, 255);
    border-color: #76bc74;
    border-radius: 40px;
    font-family: "Funnel Display", sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding: 8px 25px;
  }
}


/* === styles.css === */
/**
 * Errors Component Styles
 *
 * Alert message styling with brand-specific customization.
 * Supports different alert types: danger, warning, success, info.
 */

.alert {
  position: relative;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 15px;

  & .alert__text {
    font-size: 0.8rem !important;
    text-align: left !important;
    margin: 0;
  }

  &.alert-danger {
    background-color: #f8d7da;
    border-color: #f1aeb5;
    color: #58151c;
  }

  &.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
  }

  &.alert-success {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
  }

  &.alert-info {
    background-color: #d1e7dd;
    border-color: #d1ecf1;
    color: #0c5460;
  }
}

.alert-container {
  display: grid;
  gap: 10px;
}

/* Fade-in animation */
.fade--in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* === styles.css === */
:root {
  --section-calculamos-title-font-size: 1.6rem;
  --section-calculamos-title-padding: 40px 0;
}

.container-como-calculamos__wrapper {
  & .container-como-calculamos {
    --section-order-font-size: 2rem;
    --section-order-size: 45px;
    --row-image-max-height: 650px;

    &:not(:first-child, :last-child) {
      --container-content-padding-vertical: 30px;
    }
  }
}

@media (width >= 1300px) {
  :root {
    --section-calculamos-title-font-size: 2.2rem;
    --section-calculamos-title-padding: 80px 0;
  }

  .container-como-calculamos__wrapper {
    & .container-como-calculamos {
      --row-image-max-height: 650px;
      --section-order-font-size: 3rem;
      --section-order-size: 65px;
    }
  }
}

.container-como-calculamos__title {
  --container-content-padding-vertical: var(
    --section-calculamos-title-padding
  );
  --container-content-padding-bottom: var(--section-calculamos-title-padding);

  text-align: center;
  font-size: var(--section-calculamos-title-font-size);
  font-weight: var(--font-weight-medium);
  text-wrap: balance;
}

.container-como-calculamos {
  & h2 {
    color: var(--color-brand-primary);
    font-size: var(--text-xl-font-size);
    line-height: var(--text-xl-line-height);
    font-weight: var(--font-weight-light);
    text-wrap: balance;
  }

  & p {
    font-weight: var(--font-weight-medium);
  }

  & :global(.col) {
    gap: 0;
  }
}

.container-como-calculamos__wrapper {
  & .container-como-calculamos__order {
    background: var(--color-brand-primary);
    font-size: var(--section-order-font-size);
    color: var(--color-text-inverse);
    padding-top: 5px;
    border-radius: 100%;
    width: var(--section-order-size);
    height: var(--section-order-size);
    display: grid;
    place-items: center;
  }
}

/* Crediahora-specific styles */
.container-como-calculamos__wrapper[data-brand='crediahora'] {
  & .container-como-calculamos {
    & h2 {
      font-family: var(--font-family-h2);
      color: var(--color-text-primary);
      line-height: var(--text-2xl-line-height);
      font-weight: var(--font-weight-dark);
    }

    & p {
      font-weight: var(--font-weight-bold);
    }
  }

  & .container-como-calculamos__order {
    background: #95c11f;
    padding-top: 0;
    font-weight: var(--font-weight-bold);
  }

  & .container-como-calculamos__title {
    font-weight: var(--font-weight-bold);

    &.banner-bg {
      background: var(--background-basic-color-4);
    }
  }
}

/* OleDinero-specific styles */
.container-como-calculamos__wrapper[data-brand='oledinero'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: var(--font-weight-bold);
    }
  }
}

/* Credimoney-specific styles */
.container-como-calculamos__wrapper[data-brand='credimoney'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: 300;
    }
  }

  & .container-como-calculamos__order {
    color: #d8c7ff;
  }
}

/* Creditoamigo-specific styles */
.container-como-calculamos__wrapper[data-brand='creditoamigo'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: 500;
    }
  }
}

/* Creditoclic-specific styles */
.container-como-calculamos__wrapper[data-brand='creditoclic'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: 500;
    }
  }

  & .container-como-calculamos__order {
    color: #adef45;
  }
}

/* Creditopro-specific styles */
.container-como-calculamos__wrapper[data-brand='creditopro'] {
  & .container-como-calculamos {
    & h2 {
      color: #333333;
      font-weight: 800;
    }
  }

  & .container-como-calculamos__order {
    background: #4570ae;
  }
}

/* Crediator-specific styles */
.container-como-calculamos__wrapper[data-brand='crediator'] {
  & .container-como-calculamos {
    & h2 {
      color: #333333;
      font-weight: 800;
    }
  }

  & .container-como-calculamos__order {
    background: #00593f;
    color: #cdf63e;
  }
}

/* Credifix-specific styles */
.container-como-calculamos__wrapper[data-brand='credifix'] {
  & .container-como-calculamos__title {
    background-color: #182d52 !important;
  }

  & .container-como-calculamos {
    background-color: #d9e4f5 !important;

    & h2 {
      color: #182d52;
      font-weight: 300;
    }
  }

  & .container-como-calculamos:nth-child(even) {
    background-color: #ffffff !important;
  }

  & .container-como-calculamos__order {
    background: #96b4e6;
    color: #182d52;
  }
}

/* Crediscore-specific styles */
.container-como-calculamos__wrapper[data-brand='crediscore'] {
  & .container-como-calculamos {
    & h2 {
      color: #000000;
      font-weight: 700;
    }
  }

  & .container-como-calculamos__order {
    background: #c5e5fc;
    color: #000000;
  }
}

/* Creditando-specific styles */
.container-como-calculamos__wrapper[data-brand='creditando'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: 800;
    }
  }

  & .container-como-calculamos__order {
    color: #c6fd00;
  }
}

/* Crediticio-specific styles */
.container-como-calculamos__wrapper[data-brand='crediticio'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: 700;
    }
  }

  & .container-como-calculamos__order {
    color: #ffa573;
  }
}

/* Creditozas-specific styles */
.container-como-calculamos__wrapper[data-brand='creditozas'] {
  & .container-como-calculamos {
    & h2 {
      font-weight: 800;
    }
  }

  & .container-como-calculamos__order {
    color: #e5eaea;
  }
}

/* Credizoom-specific styles */

.container-como-calculamos__wrapper[data-brand='credizoom'] {
  & .container-como-calculamos {
    & h2 {
      color: #000000;
      font-weight: 500;
    }
  }

  & .container-como-calculamos__order {
    color: #000000;
  }
}

/* Mastercredi-specific styles */
.container-como-calculamos__wrapper[data-brand='mastercredi'] {
  & .container-como-calculamos {
    & h2 {
      font-size: 39.6px !important;
      font-weight: 700;
    }

    & p {
      font-size: 22.32px !important;
    }
  }
}

/* Disable button hover effects for all brands - removed broken :global() rules */



/* === styles.css === */
:root {
  --panel-usuario-images-flex-direction: column;
  --panel-usuario-column-text-margin-bottom: 0;
}

@media (width >= 768px) {
  :root {
    --panel-usuario-images-flex-direction: row;
  }
}

@media (width >= 1024px) {
  :root {
    & .container-panel-usuario {
      --hero-row-gap: 0;

      & > .container__content {
        & > .row {
          --row-flex-direction: row;
        }
      }
    }
  }
}

@media (width >= 1400px) {
  :root {
    & .container-panel-usuario {
      & .row {
        --row-text-column-gap: 100px;
        --row-flex-direction: row;
        --row-text-column-flex: 1.1;
        --panel-usuario-column-text-margin-bottom: 100px;
      }

      & .col-img {
        flex: 1;
      }
    }
  }
}

.container-panel-usuario {
  /* Use container background variable, default to white */
  background-color: var(--container-background, #ffffff);

  /* Crediahora uses the secondary background color */
  &[data-brand="crediahora"] {
    background-color: var(--background-basic-color-2, #f5f5f5);
  }

  & .header-panel-usuario {
    & .container__content {
      padding: 0;
      margin: 40px 0 0;
      max-width: 100%;
    }
  }

  & > .container__content {
    gap: 50px;
    padding-top: 0;

    & > .row {
      padding-top: 30px;

      & .container-panel-usuario__images {
        display: flex;
        flex-direction: var(--panel-usuario-images-flex-direction);
        gap: 10px;
        margin-top: 30px;

        & > div:first-child {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        & img {
          max-width: 100%;
          height: auto;
        }
      }

      & > .col {
        justify-content: center;
        margin-bottom: var(--panel-usuario-column-text-margin-bottom);
      }

      & .col-img {
        position: relative;
        place-items: center end;

        & img {
          margin: 0;
        }
      }
    }
  }
}

/* Scale hero image to fill container height */
.container-panel-usuario.hero-image-full .col-img {
  position: relative;
}

.container-panel-usuario.hero-image-full .col-img img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: none;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center right;
}

/* Override HeroContainer row gap and column flex for panel-usuario */
@media (width >= 1024px) {
  .container-panel-usuario.hero-image-full {
    --hero-row-gap: 0 !important;
  }

  .container-panel-usuario.hero-image-full > .container__content > .row > .col {
    flex: 1.1;
  }

  .container-panel-usuario.hero-image-full > .container__content > .row > .col-img {
    flex: 1;
  }
}

/* Creditando: constrain panel usuario right image, aligned to right edge */
:root[data-brand="creditando"] .container-panel-usuario .col-img img {
  max-width: 533px;
  max-height: 600px;
  left: auto;
}

/* Creditozas: light gray background + constrain image */
.container-panel-usuario[data-brand="creditozas"] {
  background-color: #f2f4f4;
}

/* Credizoom: light gray-blue background */
.container-panel-usuario[data-brand="credizoom"] {
  background-color: #f4f8f9;
}

:root[data-brand="creditozas"] .container-panel-usuario .col-img img {
  max-width: 680px;
  max-height: 468px;
}

/* Mastercredi: image flush to the far right edge of viewport */
@media (width >= 1024px) {
  :root[data-brand="mastercredi"] .container-panel-usuario.hero-image-full > .container__content {
    margin: 0;
    width: 100%;
  }
}

:root[data-brand="mastercredi"] .container-panel-usuario .col-img img {
  position: relative;
  object-fit: fill;
  max-width: 100%;
  max-height: 600px;
  width: auto;
  height: auto;
}


/* === styles.css === */
/**
 * FaqList Component Styles
 *
 * Theme-driven styling using CSS custom properties.
 * Matches the exact structure from the original brand implementations.
 */

:root {
  --faq-list-column-gap: 20px;
  --faq-question-font-size: var(--text-base-font-size);
  --faq-question-row-gap: 10px;
  --faq-answer-padding: 25px 0 25px 40px;
  --faq-button-bg: var(--color-primary, #6b21a8);
  --faq-button-text: #ffffff;
  --faq-button-border-radius: 30px;
  --faq-button-padding: 12px 32px;
  --faq-button-hover-bg: var(--color-primary-dark, #581c87);
}

.faq-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 40px var(--body-padding-horizontal);
}

/* Inside SectionFaq (HeroContainer), the container should fill the column */
.faqs-section .faq-list-container {
  max-width: 100%;
  padding: 0;
  align-items: stretch;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--faq-list-column-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;

  & li {
    list-style: none;

    & .faq-list__question-wrapper {
      display: flex;
      align-items: center;
      gap: var(--faq-question-row-gap);

      & .faq-list__question {
        /* This was previously an <a href="#">, which this app's SPA router
           (reitit-frontend, click-interception on <a> tags even when the
           React onClick called preventDefault()) treated as a real
           navigation, running its on-navigate callback that does
           `window.scrollTo 0 0` on every route match - jumping the whole
           page to the top on every accordion click. A <button> isn't
           intercepted by the router, so it can't trigger that. These reset
           the browser's default button chrome so it still looks like plain
           text, same as before. */
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        font: inherit;
        text-align: left;
        cursor: pointer;

        font-weight: var(--faq-question-weight, 700);
        font-size: var(--faq-question-font-size);
        color: var(--faq-question-color);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      & .faq-list__icon {
        color: var(--faq-icon-color);
        align-self: flex-start;
        margin-top: var(--faq-icon-margin-top);
        width: 14px;
        height: 14px;
        flex-shrink: 0;
      }
    }

    & .faq-list__answer {
      display: none;
      padding: var(--faq-answer-padding);
      font-size: var(--faq-answer-font-size, var(--text-base-font-size)) !important;
      font-weight: var(--faq-answer-weight, 400) !important;
      color: var(--faq-answer-color);

      &.active {
        display: block;
      }
    }

    &:last-child {
      & .faq-list__answer {
        padding-bottom: 0;
      }
    }
  }
}

/* Button wrapper and styling */
.faq-list__button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
}

.faq-list__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--faq-button-bg);
  color: var(--faq-button-text);
  padding: var(--faq-button-padding);
  border-radius: var(--faq-button-border-radius);
  font-weight: 600;
  font-size: var(--text-base-font-size, 16px);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;

  &:hover {
    background-color: var(--faq-button-hover-bg);
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
  }
}

/* Brand-specific styles */

/* Credimoney */
.faq-list-container--credimoney {
  --faq-question-color: rgb(46, 16, 71);
  --faq-answer-color: rgb(46, 16, 71);
  --faq-icon-color: rgb(248, 248, 146);
  --faq-button-bg: rgb(248, 248, 146);
  --faq-button-text: rgb(46, 16, 71);
  font-family: "Helvetica Neue", sans-serif;
}

/* Crediahora */
.faq-list-container--crediahora {
  --faq-question-color: rgb(29, 29, 27);
  --faq-answer-color: rgb(29, 29, 27);
  --faq-icon-color: rgb(149, 193, 31);
  --faq-button-bg: rgb(149, 193, 31);
  --faq-button-text: rgb(29, 29, 27);
  font-family: "Montserrat", sans-serif;
}

/* OleDinero */
.faq-list-container--oledinero {
  --faq-question-color: rgb(3, 45, 143);
  --faq-answer-color: rgb(3, 45, 143);
  --faq-icon-color: rgb(215, 255, 123);
  --faq-button-bg: rgb(3, 45, 143);
  --faq-button-text: rgb(255, 255, 255);
  font-family: "Poppins", sans-serif;
}

/* CreditoAmigo */
.faq-list-container--creditoamigo {
  --faq-question-color: #1D2C56;
  --faq-answer-color: #1D2C56;
  --faq-icon-color: #0000FF;
  --faq-button-bg: #0000FF;
  --faq-button-text: #ffffff;
  font-family: "Seitu", sans-serif;
}

/* CrediCheck */
.faq-list-container--credicheck {
  --faq-question-color: #18384e;
  --faq-answer-color: #18384e;
  --faq-icon-color: #76bc74;
  --faq-button-bg: #76bc74;
  --faq-button-text: #ffffff;
  font-family: "Funnel Display", sans-serif;
}

/* CreditoClic */
.faq-list-container--creditoclic {
  --faq-question-color: #073034;
  --faq-answer-color: #073034;
  --faq-icon-color: #af9fcd;
  --faq-button-bg: #073034;
  --faq-button-text: #ffffff;
  font-family: "Harabara", sans-serif;
}

/* CreditoPRO */
.faq-list-container--creditopro {
  --faq-question-color: #333333;
  --faq-answer-color: #333333;
  --faq-icon-color: #4570ae;
  --faq-button-bg: #1B4A82;
  --faq-button-text: #ffffff;
  font-family: "Open Sans", sans-serif;
}

/* Crediator */
.faq-list-container--crediator {
  --faq-question-color: #333333;
  --faq-answer-color: #333333;
  --faq-icon-color: #f55f99;
  --faq-button-bg: #f55f99;
  --faq-button-text: #ffffff;
  font-family: "Manrope", sans-serif;
}

/* Credifix */
.faq-list-container--credifix {
  --faq-question-color: #182d52;
  --faq-answer-color: #182d52;
  --faq-icon-color: #ff0086;
  --faq-button-bg: #ff0086;
  --faq-button-text: #ffffff;
  font-family: "Roboto", sans-serif;
}

/* Crediscore */
.faq-list-container--crediscore {
  --faq-question-color: #000000;
  --faq-answer-color: #000000;
  --faq-icon-color: #907ee8;
  --faq-button-bg: #907ee8;
  --faq-button-text: #ffffff;
  font-family: "Open Sans", sans-serif;
}

/* Creditando */
.faq-list-container--creditando {
  --faq-question-color: #002449;
  --faq-answer-color: #002449;
  --faq-icon-color: #c6fd00;
  --faq-button-bg: #002449;
  --faq-button-text: #ffffff;
  font-family: "Manrope", sans-serif;
}

/* Crediticio */
.faq-list-container--crediticio {
  --faq-question-color: #13233a;
  --faq-answer-color: #000000;
  --faq-icon-color: #ffa573;
  --faq-button-bg: #13233a;
  --faq-button-text: #ffffff;
  font-family: "Open Sans", sans-serif;
}

/* Creditozas */
.faq-list-container--creditozas {
  --faq-question-color: #000000;
  --faq-answer-color: #000000;
  --faq-icon-color: #96b4e6;
  --faq-button-bg: #000000;
  --faq-button-text: #ffffff;
  font-family: "Manrope", sans-serif;
}

/* Credizoom */
.faq-list-container--credizoom {
  --faq-question-color: #000000;
  --faq-answer-color: #000000;
  --faq-icon-color: #4eb5a4;
  --faq-button-bg: #4eb5a4;
  --faq-button-text: #ffffff;
  font-family: "AdobeClean", sans-serif;
}

/* Mastercredi */
.faq-list-container--mastercredi {
  --faq-question-color: #1a1a1a;
  --faq-answer-color: #1a1a1a;
  --faq-icon-color: #1a1a1a;
  --faq-button-bg: #1a1a1a;
  --faq-button-text: #ffffff;
  font-family: "AdobeClean", sans-serif;
}


@media (width >= 768px) {
  .faq-list-container {
       max-width: 50%;
  }
}

/* === styles.css === */
/**
 * FirmaDigitalHeroVideoId Styles
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Primary brand color for icons, text, headings
 * - --font-family-base: Base font family
 * - --font-size-lg: Large font size
 * - --font-weight-regular: Regular font weight
 * - --font-weight-semibold: Semibold/medium font weight
 */

/* Credimoney brand styles - no border on cards, gray background */
.container-firma-digital-videoid[data-brand="credimoney"] .hero-container-videoid .card-basic {
  border: none;
  background: #eeeeee88;
}

/* Crediahora brand styles - no border on cards */
.container-firma-digital-videoid[data-brand="crediahora"] .hero-container-videoid .card-basic {
  border: none;
}

/* OleDinero brand styles - no border on cards */
.container-firma-digital-videoid[data-brand="oledinero"] .hero-container-videoid .card-basic {
  border: none;
}

/* Brand-specific font-weight overrides for h4 */
.container-firma-digital-videoid[data-brand="crediahora"] .hero-container-videoid .row-need h4 {
  font-weight: 700;
}

.container-firma-digital-videoid[data-brand="oledinero"] .hero-container-videoid .row-need h4 {
  font-weight: 500;
}

/* Brand-specific font styles for "100% online" text */
.container-firma-digital-videoid[data-brand="crediahora"] .hero-container-videoid .row-need .col:last-child p {
  font-size: 1.15rem;
  /* 16.56px at base 14.4px */
  font-weight: 400;
}

.container-firma-digital-videoid[data-brand="oledinero"] .hero-container-videoid .row-need .col:last-child p {
  font-size: 1.4rem;
  /* 20.16px at base 14.4px */
  font-weight: 600;
}

/* Brand-specific color overrides for Crediahora */
.container-firma-digital-videoid[data-brand="crediahora"] .hero-container-videoid svg {
  color: rgb(149, 193, 31);
}

.container-firma-digital-videoid[data-brand="crediahora"] .hero-container-videoid .row-videoid .col:first-child span {
  color: rgb(149, 193, 31);
}

.container-firma-digital-videoid[data-brand="crediahora"] .hero-container-videoid .row-need h4 {
  color: rgb(149, 193, 31);
}

/* Brand-specific background color for OleDinero cards */
.container-firma-digital-videoid[data-brand="oledinero"] .hero-container-videoid .card-basic {
  background-color: #f6f6f6;
}

/* Creditoamigo brand styles - card with gray bg, no border */
.container-firma-digital-videoid[data-brand="creditoamigo"] .hero-container-videoid .card-basic {
  border: none;
  background: #eeeeee88;
}

.container-firma-digital-videoid[data-brand="creditoamigo"] .hero-container-videoid .row-need h4 {
  font-weight: 500;
}

.container-firma-digital-videoid[data-brand="creditoamigo"] .hero-container-videoid .row-need .col:last-child p {
  font-size: 1.33rem;
  font-weight: 400;
}

/* Credicheck brand styles - card with gray bg, no border */
.container-firma-digital-videoid[data-brand="credicheck"] .hero-container-videoid .card-basic {
  border: none;
  background: #edeef488;
}

.container-firma-digital-videoid[data-brand="credicheck"] .hero-container-videoid .row-need h4 {
  font-weight: 500;
}

.container-firma-digital-videoid[data-brand="credicheck"] .hero-container-videoid .row-need .col:last-child p {
  font-size: 1.33rem;
  font-weight: 400;
}

/* Creditoclic brand styles */
.container-firma-digital-videoid[data-brand="creditoclic"] .hero-container-videoid .card-basic {
  border: none;
  background: #eaeeef;
}

.container-firma-digital-videoid[data-brand="creditoclic"] .hero-container-videoid svg {
  color: #7ac4ae;
}

.container-firma-digital-videoid[data-brand="creditoclic"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #7ac4ae;
}

.container-firma-digital-videoid[data-brand="creditoclic"] .hero-container-videoid .row-need h4 {
  font-weight: 500;
  color: #7ac4ae;
}

.container-firma-digital-videoid[data-brand="creditoclic"] .hero-container-videoid .row-need .col:last-child p {
  font-size: 1rem;
  font-weight: 500;
}

/* Creditopro brand styles */
.container-firma-digital-videoid[data-brand="creditopro"] .hero-container-videoid .card-basic {
  border: none;
  background: #f3f3f3;
}

.container-firma-digital-videoid[data-brand="creditopro"] .hero-container-videoid svg {
  color: #4570ae;
}

.container-firma-digital-videoid[data-brand="creditopro"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #4570ae;
}

.container-firma-digital-videoid[data-brand="creditopro"] .hero-container-videoid .row-need h4 {
  font-weight: 500;
  color: #4570ae;
}

.container-firma-digital-videoid[data-brand="creditopro"] .hero-container-videoid .row-need .col:last-child p {
  font-size: 1rem;
  font-weight: 400;
}

/* Credifix brand styles */
.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid .card-basic {
  border: none;
  background: #d9e4f5;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid img {
  width: 100%;
  max-width: 560px;
  max-height: 389px;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid svg {
  color: #ff0086;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #ff0086;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid .row-need h4 {
  font-weight: 300;
  font-size: 1.7rem;
  color: #ff0086;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid .row-need p {
  font-size: 1.15rem;
  font-weight: 700;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid .row-need .col:last-child p {
  color: #182d52;
}

.container-firma-digital-videoid[data-brand="credifix"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 20px 35px;
  gap: 10px;
}

/* Crediscore brand styles */
.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid .card-basic {
  border: none;
  background-color: var(--color-brand-secondary);
}

.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid svg {
  color: #907ee8;
}

.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #907ee8;
}

.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid .row-need h4 {
  font-weight: 700;
  font-size: 1.7rem;
  color: #000000;
}

.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid .row-need p {
  font-size: 1.15rem;
  font-weight: 400;
}

.container-firma-digital-videoid[data-brand="crediscore"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 20px 35px;
  gap: 10px;
}

.container-firma-digital-videoid {
  & .hero-container-videoid {
    background: #ffffff;

    & svg {
      color: var(--color-brand-primary);
      margin: 0 auto;
    }

    & .container-col-img {
      flex: 0 0 40%;
    }

    & .card-basic {
      text-align: var(--text-align, center);
    }

    & .row-videoid {
      --grid-template-columns: repeat(1, 1fr);

      display: grid;
      grid-template-columns: var(--grid-template-columns);
      gap: 30px;

      & .col {
        &:first-child {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          text-align: var(--text-align, center);

          & span {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-brand-primary);
          }
        }

        & p {
          margin: 0;
          text-align: var(--text-align, center);
        }
      }
    }

    & .row-need {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      gap: 15px;
      margin: 0;

      & h4 {
        --text-align: center;
        font-family: var(--font-family-base);
        font-size: 1.7rem;
        /* 24.48px at base 14.4px */
        font-weight: var(--font-weight-regular);
        color: var(--color-brand-primary);
        text-align: var(--text-align);
        margin: 0;
      }

      & .col {
        display: flex;
        flex-direction: column;

        & .card-basic {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }

        &:last-child {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 20px;
          width: 100%;
          
          & .card-basic {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
          }

          & p {
            font-family: var(--font-family-base);
            font-size: 1.55rem;
            /* 22.32px at base 14.4px */
            font-weight: 700;
            color: var(--color-brand-primary);
            margin: 0;
          }

          & a.btn {
            width: 100%;
          }
        }
      }
    }
  }
}

@media (width >=768px) {
  .container-firma-digital-videoid {
    & .hero-container-videoid {
      & .row-videoid {
        --grid-template-columns: 100px 1fr;
        --text-align: left;
      }

      & .row-need {
        flex-direction: row;
        align-items: stretch;

        & .col {
          flex: 1;
          --text-align: left;

          &:last-child {
            --text-align: center;
          }
        }
      }
    }
  }
}

/* Creditando brand styles (match credifix sizing) */
.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid .card-basic {
  border: none;
  background: #ddecee;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid img {
  width: 100%;
  max-width: 560px;
  max-height: 392px;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid svg {
  color: #002449;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #002449;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid .row-need h4 {
  font-weight: 300;
  font-size: 1.7rem;
  color: #002449;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid .row-need p {
  font-size: 1.15rem;
  font-weight: 700;
}

.container-firma-digital-videoid[data-brand="creditando"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 15px 20px;
  gap: 8px;
}

/* Crediticio brand styles */
.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid .card-basic {
  border: none;
  background: #e3f2fd;
}

.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid svg {
  color: #13233a;
}

.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #13233a;
}

.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid .row-need h4 {
  font-weight: 700;
  font-size: 1.7rem;
  color: #13233a;
}

.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid .row-need p {
  font-size: 1.15rem;
  font-weight: 400;
}

.container-firma-digital-videoid[data-brand="crediticio"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 15px 20px;
  gap: 8px;
}

/* Creditozas brand styles */
.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid .card-basic {
  border: none;
  background: #f2f4f4;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid img {
  width: 100%;
  max-width: 544px;
  max-height: 461px;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid svg {
  color: #96b4e6;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #000000;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid .row-need h4 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: #000000;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid .row-need p {
  font-size: 1.15rem;
  font-weight: 400;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 20px 35px;
  gap: 10px;
}

.container-firma-digital-videoid[data-brand="creditozas"] .hero-container-videoid .row-need .col:last-child .card-basic {
  min-height: 100%;
}

/* Credizoom brand styles */
.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid .card-basic {
  border: none;
  background: #f4f8f9;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid img {
  width: 100%;
  max-width: 560px;
  max-height: 373px;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid svg {
  color: #4eb5a4;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #4eb5a4;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid .row-need h4 {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: #000000;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid .row-need p {
  font-size: 1.15rem;
  font-weight: 500;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 20px 35px;
  gap: 10px;
}

.container-firma-digital-videoid[data-brand="credizoom"] .hero-container-videoid .row-need .col:last-child .card-basic {
  min-height: 100%;
}

/* Mastercredi brand styles */
.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid {
  background: #ffffff;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .card-basic {
  border: none;
  background: #f7f9fa;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid svg {
  color: #1a1a1a;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-videoid .col:first-child span {
  color: #1a1a1a;
  font-size: 24.48px !important;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-videoid .col p {
  font-size: 16.56px !important;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-need h4 {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: #1a1a1a;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-need p {
  font-size: 16.56px !important;
  font-weight: 500;
}



/* Mastercredi: compact row-need layout */
@media (width >=768px) {
  .container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-need {
    align-items: flex-start;
    gap: 30px;
  }
}


/* === styles.css === */
/* Brand-specific h2 title styles */
.container-ventajas-videoid[data-brand="credimoney"] h2 {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 2.75rem;
  /* 39.6px at base 14.4px */
  font-weight: 300;
}

.container-ventajas-videoid[data-brand="crediahora"] h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  /* 36px at base 14.4px */
  font-weight: 900;
}

.container-ventajas-videoid[data-brand="oledinero"] h2 {
  font-family: "Poppins", sans-serif;
  font-size: 2.75rem;
  /* 39.6px at base 14.4px */
  font-weight: 700;
}

/* Creditoamigo brand styles */
.container-ventajas-videoid[data-brand="creditoamigo"] h2 {
  font-family: "Seitu", sans-serif;
  font-size: 2.22rem;
  font-weight: 500;
  color: #0000ff;
}

.container-ventajas-videoid[data-brand="creditoamigo"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="creditoamigo"] .card-basic__title {
  color: #0000ff !important;
  font-weight: 500;
}

.container-ventajas-videoid[data-brand="creditoamigo"] .card-basic__description {
  color: #4d4d4d !important;
}

/* Credicheck brand styles */
.container-ventajas-videoid[data-brand="credicheck"] h2 {
  font-family: "Funnel Display", sans-serif;
  font-size: 2.22rem;
  font-weight: 500;
  color: #18384e;
}

.container-ventajas-videoid[data-brand="credicheck"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="credicheck"] .card-basic__title {
  color: #18384e !important;
  font-weight: 500;
}

.container-ventajas-videoid[data-brand="credicheck"] .card-basic__description {
  color: #4d4d4d !important;
}


/* Creditoclic brand styles */
.container-ventajas-videoid[data-brand="creditoclic"] h2 {
  font-family: "Harabara", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #073034;
}

.container-ventajas-videoid[data-brand="creditoclic"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="creditoclic"] .card-basic__title {
  color: #073034 !important;
  font-weight: 600;
}

.container-ventajas-videoid[data-brand="creditoclic"] .card-basic__description {
  color: #073034 !important;
  font-weight: 500;
}

/* Creditopro brand styles */
.container-ventajas-videoid[data-brand="creditopro"] h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #333333;
}

.container-ventajas-videoid[data-brand="creditopro"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="creditopro"] .card-basic__title {
  color: #333333 !important;
  font-weight: 800;
}

.container-ventajas-videoid[data-brand="creditopro"] .card-basic__description {
  color: #333333 !important;
  font-weight: 500;
}

/* Crediahora cards: remove border and add plus icon */
.container-ventajas-videoid[data-brand="crediahora"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="crediahora"] .card-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  fill: rgb(149, 193, 31);
}

.container-ventajas-videoid {
  & h2 {
    text-align: center;
    margin: 0;
  }

  & ul {
    --flex-gap: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-gap);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;

    & li {
      --max-item-width: 33%;
      --item-width: auto;

      width: var(--item-width);

      & .card-basic {
        background: var(--color-brand-primary);
        position: relative;
        padding: 35px 35px 55px;
        gap: 10px;
        height: 100%;
        box-sizing: border-box;

        & .card-basic__title {
          font-size: 1.3rem !important;
          margin: 0;
          line-height: 1.3;
        }

        & .card-basic__description {
          font-size: 1.15rem !important;
          margin: 0;
          line-height: 1.4;
        }
      }
    }
  }

  & .container-ventajas-videoid__buttons {
    text-align: center;
    margin: 0;
  }
}

@media (width >=768px) {
  .container-ventajas-videoid {
    & ul {
      & li {
        --item-width: calc(var(--max-item-width) - var(--flex-gap));
      }
    }
  }
}

/* ===== BUTTON STYLES ===== */

/* Creditoamigo: blue button */
.container-ventajas-videoid[data-brand="creditoamigo"] .btn {
  background-color: #0000ff !important;
  border: 2px solid #0000ff !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Credicheck: green button */
.container-ventajas-videoid[data-brand="credicheck"] .btn {
  background-color: #18384e !important;
  border: 2px solid #18384e !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Creditoclic: outline button */
.container-ventajas-videoid[data-brand="creditoclic"] .btn {
  background-color: transparent !important;
  border: 2px solid #073034 !important;
  color: #073034 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Creditopro: dark button */
.container-ventajas-videoid[data-brand="creditopro"] .btn {
  background-color: #333333 !important;
  border: 2px solid #333333 !important;
  color: #f3f3f3 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Crediator brand styles */
.container-ventajas-videoid[data-brand="crediator"] {
  background-color: #f2f2f2 !important;
}

.container-ventajas-videoid[data-brand="crediator"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  color: #333333;
}

.container-ventajas-videoid[data-brand="crediator"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="crediator"] .card-basic__title {
  font-weight: 700;
}


/* Crediator: pink button */
.container-ventajas-videoid[data-brand="crediator"] .btn {
  background-color: #f2d5e0 !important;
  border: 2px solid transparent !important;
  color: #333333 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Credifix brand styles */
.container-ventajas-videoid[data-brand="credifix"] {
  background-color: #d9e4f5 !important;
}

.container-ventajas-videoid[data-brand="credifix"] h2 {
  font-family: "Roboto", sans-serif;
  font-size: 2.75rem;
  font-weight: 300;
  color: #182d52;
}

.container-ventajas-videoid[data-brand="credifix"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="credifix"] .card-basic__title {
  color: #182d52 !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="credifix"] .card-basic__description {
  color: #182d52 !important;
}

.container-ventajas-videoid[data-brand="credifix"] .card-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  fill: #ff0086;
  color: #ff0086;
}

/* Credifix: blue button */
.container-ventajas-videoid[data-brand="credifix"] .btn {
  background-color: #96b4e6 !important;
  border: 2px solid transparent !important;
  color: #182d52 !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
}

/* Crediscore brand styles */
.container-ventajas-videoid[data-brand="crediscore"] {
  background: var(--color-brand-secondaryLight) !important;
}

.container-ventajas-videoid[data-brand="crediscore"] h2 {
  font-size: 2.75rem;
  font-weight: 700;
  color: #000000;
}

.container-ventajas-videoid[data-brand="crediscore"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="crediscore"] .card-basic__title {
  color: #000000 !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="crediscore"] .card-basic__description {
  color: #000000 !important;
}

.container-ventajas-videoid[data-brand="crediscore"] .card-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  fill: #907ee8;
  color: #907ee8;
}

/* Crediscore: purple button */
.container-ventajas-videoid[data-brand="crediscore"] .btn {
  background-color: #907ee8 !important;
  border: 2px solid transparent !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Creditando brand styles */
.container-ventajas-videoid[data-brand="creditando"] {
  background-color: #ddecee !important;
}

.container-ventajas-videoid[data-brand="creditando"] h2 {
  font-weight: 800;
  color: #002449;
}

.container-ventajas-videoid[data-brand="creditando"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="creditando"] .card-basic__title {
  color: var(--color-brand-primaryLight) !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="creditando"] .card-basic__description {
  color: var(--color-brand-primaryLight) !important;
}

/* Creditando: outline button */
.container-ventajas-videoid[data-brand="creditando"] .btn {
  background-color: transparent !important;
  border: 2px solid #002449 !important;
  color: #002449 !important;
  padding: 12px 25px !important;
  border-radius: 0 !important;
}

/* Crediticio brand styles */
.container-ventajas-videoid[data-brand="crediticio"] {
  background-color: #c5e5fc !important;
}

.container-ventajas-videoid[data-brand="crediticio"] h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #13233a;
}

.container-ventajas-videoid[data-brand="crediticio"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="crediticio"] .card-basic__title {
  color: var(--color-brand-primaryLight) !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="crediticio"] .card-basic__description {
  color: var(--color-brand-primaryLight) !important;
}

.container-ventajas-videoid[data-brand="crediticio"] .card-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  fill: #ffa573;
  color: #ffa573;
}

/* Crediticio: dark navy button */
.container-ventajas-videoid[data-brand="crediticio"] .btn {
  background-color: #13233a !important;
  border: 2px solid #13233a !important;
  color: #ffa573 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Creditozas brand styles */
.container-ventajas-videoid[data-brand="creditozas"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  color: #000000;
}

.container-ventajas-videoid[data-brand="creditozas"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="creditozas"] .card-basic__title {
  color: #000000 !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="creditozas"] .card-basic__description {
  color: #000000 !important;
}

/* Creditozas: black button */
.container-ventajas-videoid[data-brand="creditozas"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #96b4e6 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Credizoom brand styles */
.container-ventajas-videoid[data-brand="credizoom"] h2 {
  font-family: "AdobeClean", sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: #000000;
}

.container-ventajas-videoid[data-brand="credizoom"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="credizoom"] .card-basic__title {
  color: #000000 !important;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
}

.container-ventajas-videoid[data-brand="credizoom"] .card-basic__description {
  color: #000000 !important;
  font-family: "AdobeClean", sans-serif;
}

/* Credizoom: black button */
.container-ventajas-videoid[data-brand="credizoom"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Mastercredi brand styles */
.container-ventajas-videoid[data-brand="mastercredi"] h2 {
  font-family: "Coolvetica", sans-serif;
  font-size: 39.6px !important;
  font-weight: 700;
  color: #1a1a1a;
}

.container-ventajas-videoid[data-brand="mastercredi"] .card-basic {
  border: none;
}

.container-ventajas-videoid[data-brand="mastercredi"] .card-basic__title {
  color: #1a1a1a !important;
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="mastercredi"] .card-basic__description {
  color: #1a1a1a !important;
  font-family: "AdobeClean", sans-serif;
}

/* Mastercredi: hide plus icon on cards */
.container-ventajas-videoid[data-brand="mastercredi"] .svg-inline--fa.fa-plus.card-icon {
  display: none !important;
}

/* Mastercredi: dark button */
.container-ventajas-videoid[data-brand="mastercredi"] .btn {
  background-color: #1a1a1a !important;
  border: none !important;
  color: #e2e8ed !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
}


/* === styles.css === */
/**
 * Footer Component Styles
 *
 * Complete production-matching styles with CSS custom properties.
 * Based on e3-credimoney/e3-crediahora/e3-eledinero footer implementations.
 */

/* CSS Variables */
.footer {
  --text-color: var(--color-text-secondary, #666666);
  --padding-top: 50px;
  --padding-vertical: 60px;
  --padding-horizontal: 40px;
  --header-flex-gap: 20px;
  --logo-max-height: 50px;
  --logo-max-width: 145px;
  --header-banner-flex-gap: 20px;
  --header-banner-text-font-size: 1.4rem;
  --header-banner-apps-flex-gap: 40px;
  --header-banner-apps-img-max-height: 35px;
  --header-payment-methods-column-flex-gap: 10px;
  --header-payment-methods-text-font-size: 0.9rem;
  --header-payment-methods-images-flex-gap: 10px;
  --header-payment-methods-images-max-width: 50px;
  --footer-column-flex-gap: 20px;
  --footer-copyright-font-size: 0.9rem;
  --footer-poweredBy-flex-gap: 10px;
  --footer-logos-flex-gap: 15px;
  --content-submenus-flex-gap: 25px;
  --content-submenus-item-flex-gap: 7px;
  --content-submenus-title-font-size: 1.2rem;
  --content-submenus-title-line-height: 1.4;
  --content-submenus-title-margin-bottom: 10px;
  --content-submenus-title-font-weight: 600;
}

/* Container */
.footer-container {
  background-color: var(--footer-background, var(--color-surface-elevated, #e0e0e0));
  width: 100%;
}

.footer {
  color: var(--text-color);
  max-width: var(--body-max-width, 80rem);
  margin: 0 auto;
  padding: 50px var(--body-padding-horizontal, 1rem) 50px;
}

.footer__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: left;
}

/* Small Text (Company Address) */
.footer__small-text p {
  color: var(--footer-address-color, var(--footer-link-color, var(--color-text-inverse, rgba(255, 255, 255, 0.8))));
  line-height: 1.2;
  font-size: 11.52px;
  margin: 0;
}

.footer__small-text small {
  font-size: 11.52px;
  line-height: 1.2;
}

.footer__aviso-legal-link {
  color: var(--footer-link-color, var(--color-text-inverse, rgba(255, 255, 255, 0.8)));
  text-decoration: none;
}

.footer__aviso-legal-link:hover {
  text-decoration: underline;
}

/* Header Section */
.footer header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-flex-gap);
}

.footer__logo {
  max-height: var(--logo-max-height);
  max-width: var(--logo-max-width);
  filter: var(--footer-logo-filter, none);
}

.footer__header__column-payment-methods {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:0px;
  /*gap: var(--header-payment-methods-column-flex-gap);*/
  font-size: var(--header-payment-methods-text-font-size);
  text-align: center;
  color: var(--footer-payment-text-color, var(--footer-text-color, var(--color-text-inverse, #ffffff)));
}

.footer__header__payment-methods {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--header-payment-methods-images-flex-gap);
  text-align: center;
}

/* Payment method icons - mask-image with brand-specific colors */
.footer__payment-icon:first-child{
  height: 75px;
}

.footer__payment-icon {
  display: inline-block;
  width: 59px;
  height: 25px;
  background-color: var(--footer-payment-methods-icon-color, var(--footer-text-color, currentColor));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Legacy: Payment method icons - SVG with filter (deprecated) */
.footer__payment-icon-svg {
  width: 59px;
  height: auto;
  object-fit: contain;
  filter: var(--footer-payment-methods-icon-filter, none);
}

/* Section Divider */
.section-divider {
  width: 100%;
  height: 1px;
  background-color: var(--footer-divider-color, var(--footer-border-color, rgba(255, 255, 255, 0.2)));
  margin: 10px 0;
}

/* Navigation Columns */
.footer__column-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--content-submenus-flex-gap);
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--content-submenus-flex-gap);
}

.footer__column h4 {
  color: var(--footer-header-color, var(--footer-text-color, var(--color-text-inverse, #ffffff)));
  font-family: "Open Sans", sans-serif;
  font-size: 17.28px;
  font-weight: 700;
  line-height: var(--content-submenus-title-line-height);
  margin: 0 0 var(--content-submenus-title-margin-bottom) 0;
}

.footer__column ul {
  display: flex;
  flex-direction: column;
  gap: var(--content-submenus-item-flex-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__column li {
  color: var(--footer-link-color, var(--color-text-inverse, rgba(255, 255, 255, 0.8)));
  font-family: "Open Sans", sans-serif;
  font-feature-settings: normal;
  font-size: 14.4px;
  font-synthesis: none;
  font-variation-settings: normal;
  font-weight: 500;
}

.footer__column a {
  color: var(--footer-link-color, var(--color-text-inverse, rgba(255, 255, 255, 0.8)));
  font-family: "Open Sans", sans-serif;
  font-feature-settings: normal;
  font-size: 14.4px;
  font-synthesis: none;
  font-variation-settings: normal;
  font-weight: 500;
  text-decoration: none;
}

.footer__column p {
  color: var(--footer-link-color, var(--color-text-inverse, rgba(255, 255, 255, 0.8)));
  font-family: "Open Sans", sans-serif;
  font-feature-settings: normal;
  font-size: 14.4px;
  font-synthesis: none;
  font-variation-settings: normal;
  font-weight: 500;
  margin: 0;
}

/* Certification Logos */
.footer__certification-logos {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 10px;
  margin-top: 20px;
}

.footer__certification-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* GDPR icon - recolor using background with mask-image */
.footer__gdpr-icon {
  display: inline-block;
  height: 60px;
  width: auto;
  min-width: 60px;
  background-color: var(--footer-gdpr-icon-color, var(--footer-text-color, currentColor));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Bottom Footer */
.footer footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--footer-column-flex-gap);
}

.footer__copyright {
  font-size: var(--footer-copyright-font-size);
  text-align: center;
  color: var(--footer-bottom-text-color, var(--footer-text-color, var(--color-text-inverse, #ffffff)));
}

.footer__powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--footer-poweredBy-flex-gap);
  color: var(--footer-bottom-text-color, var(--footer-text-color, var(--color-text-inverse, #ffffff)));
}

/* Visible site version identifier ("Web Version X.Y"). */
.footer__version {
  margin-top: 0.25rem;
  font-size: var(--footer-copyright-font-size);
  text-align: center;
  opacity: 0.7;
  color: var(--footer-bottom-text-color, var(--footer-text-color, var(--color-text-inverse, #ffffff)));
}

/* Made in Spain heart icon - recolor using background with mask-image */
.footer__heart-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--footer-heart-icon-color, var(--footer-text-color, currentColor));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}

.footer__payment-logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Security/payment logos - SVG with brand-specific colors */
.footer__security-icon-svg {
  height: 55px;
  width: auto;
  object-fit: contain;
  filter: var(--footer-security-icons-filter, none);
  flex-shrink: 0;
}

/* Specific width for Mastercard icon (3rd icon) */
.footer__security-icon-svg:nth-child(3) {
  width: 80px;
  height: auto;
}

/* Color variant: smaller sizes for low-res PNGs */
/* 1st: Verified by Visa 59x34 */
.footer__security-icon-svg[src*="-color"]:nth-child(1) {
  width: 59px;
  height: 34px;
}

/* 2nd: 3D Secure 34x44 */
.footer__security-icon-svg[src*="-color"]:nth-child(2) {
  width: 34px;
  height: 44px;
}

/* 3rd: Mastercard SecureCode 66x22 */
.footer__security-icon-svg[src*="-color"]:nth-child(3) {
  width: 66px;
  height: 22px;
}

/* 4th: PCI DSS 57x25 */
.footer__security-icon-svg[src*="-color"]:nth-child(4) {
  width: 57px;
  height: 25px;
}

/* Security/payment logos - mask-image with brand-specific colors */
.footer__security-icon {
  display: inline-block;
  height: 30px;
  width: 80px;
  background-color: var(--footer-security-icons-color, var(--footer-text-color, currentColor));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Specific sizes for security icons */
.footer__security-icon--3d {
  width: 40px;
}

.footer__security-icon--mastercard {
  width: 100px;
}

/* Registration Mode */
.footer--registro .footer__content > :nth-child(-n+3) {
  display: none;
}

.footer__small-text--registro {
  text-align: center;
  margin-top: 20px;
}


/* Responsive: Tablet (768px+) */
@media (width >= 768px) {
 

  .footer__column-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer {
    padding: 60px var(--body-padding-horizontal, 1rem);
  }

}

/* Responsive: Desktop (1024px+) */
@media (width >= 1024px) {
  .footer__column-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer header {
    flex-direction: row;
    --logo-max-width: 144px;
  }

  .footer__header__column-payment-methods {
    text-align: left;
  }

  .footer__header__payment-methods {
    justify-content: flex-start;
  }

  .footer {
    --padding-horizontal: 8%;
    /* Matches Container's .container__content and HeaderNav (0px here at
       this breakpoint, verified against oledinero.es) - once max-width +
       auto margin already center this box, extra padding just pushes the
       columns in further than the header/hero above, breaking alignment. */
    padding-left: 0;
    padding-right: 0;
  }
}

/* Responsive: Large Desktop (1440px+) */
@media (width >= 1440px) {
  .footer footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  .footer__payment-logos {
    justify-content: flex-end;
  }

  .footer__copyright {
    text-align: left;
  }

  .footer__powered-by {
    justify-content: center;
  }

  /* Version sits on its own full-width centred row below the copyright row,
     so it doesn't take a grid column and bump the payment logos to a new row. */
  .footer__version {
    grid-column: 1 / -1;
    order: 1;
  }

  .footer {
    --header-banner-apps-img-max-height: 50px;
    --content-submenus-flex-gap: 20px;
  }
}

/* Credifix: Use color PNG icons without filter (icon-variant: color) */
:root[data-brand="credifix"] .footer__payment-icon-svg,
:root[data-brand="credifix"] .footer__security-icon-svg {
  filter: none !important;
}

/* Crediscore: Use color PNG icons without filter (icon-variant: color) */
:root[data-brand="crediscore"] .footer__payment-icon-svg,
:root[data-brand="crediscore"] .footer__security-icon-svg {
  filter: none !important;
}

/* Credifix: Pink divider lines */
:root[data-brand="credifix"] .section-divider {
  background-color: rgba(150, 180, 230, 1);
}

/* Credihope: logo-dark.svg has no intrinsic width/height attributes (only a
   viewBox), unlike every other brand's footer logo which is a .png with a
   real intrinsic pixel size. With only max-width/max-height set (no width/
   height) on .footer__logo, this SVG's replaced-element box resolves to
   0x0 here (verified live in devtools), so the logo silently disappears.
   Give it an explicit width so it always has a definite size; height:auto
   preserves its aspect ratio at both breakpoints. */
:root[data-brand="credihope"] .footer__logo {
  width: var(--logo-max-width);
  height: auto;
  max-width: 100%;
}

/* === index.css === */
.form-dropzone__container {
  position: relative;
  width: auto;
  display: flex;
  justify-content: center;

  & .dropzone__icon-check {
    display: none;
    color: #fff;
    font-size: 27px;

    &.dropzone__icon-check--active {
      display: flex;
    }
  }

  & .dropzone__icon-bin {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-23px, -15px);
    font-size: 44px;
    z-index: 5;

    &.dropzone__icon-bin--active {
      display: block;
    }
  }
}

.form-dropzone__wrapper {
  position: relative;

  .icon-wrapped {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50%, -50%);
  }

  & .dropzone {
    background: var(--background-basic-color-1);
    border: 2px solid rgba(134, 135, 135, 24%);
    background: rgba(135, 134, 134 , 11%);
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    max-width: 100%;
    padding-bottom: 30px;
    display: grid;
    place-items: center;
    height: 280px;

    & input {
      width: 100%;
    }

    & .form-dropzone__icon {
      & svg {
        width: 40px;
      }

      & i {
        font-size: 70px;
      }
    }

    & img {
      width: 100%;
      height: 197px;
      object-fit: cover;
    }

    & .form-dropzone__text {
      font-size: var(--text-lg-font-size);
    }

    & .form-dropzone__subtext {
      font-size: var(--text-sm-font-size);
    }
  }
}

.page-registro,
.page-registro__dni {
  & .banner {
    display: flex;
    margin: auto;
    margin-top: auto;
    justify-content: center;
    align-items: center;
  }

  .page-registro__dropzone-group {
    display: grid;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    grid-template-columns: 1fr;
    color: #8d8d8da7;

    .form-dropzone__wrapper {
      max-width: 390px;
      width: 100%;
    }
  }
}

@media (width >= 600px) {
  .page-registro,
  .page-registro__dni {
    .page-registro__dropzone-group {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (width >=900px) {
  .page-registro,
  .page-registro__dni {
    .page-registro__dropzone-group {
      flex-wrap: nowrap;

      & .dropzone {
        max-width: 700px;
        width: 100%;
      }
    }
  }
}


/* === index.css === */
.form-text-wrapper {
  --input-padding-vertical: 15px;
  position: relative;

  & label {
    display: block;
    margin-bottom: 8px;
  }

  & :is(input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="tel"], select[id="gender"]) {
    background: transparent;
    padding: var(--input-padding-vertical) 25px;
    border-radius: 9999px;
    width: 100%;
    outline: none;

    &::placeholder {
      color: var(--text-basic-color-3);
      opacity: 1;
    }

    &::-ms-input-placeholder {
      /* Edge 12 -18 */
      color: var(--text-basic-color-3);
    }
  }

  &:has(svg) {
    & :is(input[type="text"], input[type="email"]) {
      --input-padding-left: 60px;
    }

    & svg {
      position: absolute;
      top: 50%;
      left: 25px;
      transform: translateY(-50%);
      color: var(--color-brand-primary);
    }
  }
}

@media (width >=1024px) {
  .form-text-wrapper {
    --input-padding-vertical: 22px;
  }
}

/* === styles.css === */
/**
 * GenericPageHeader Styles
 *
 * Unified styling for page headers across different pages.
 * Features:
 * - Centered title and subtitle
 * - Brand-specific font families, weights, and colors
 * - Responsive sizing
 * - Fixed container height on desktop
 */

:root {
  & .page-header {
    --container-background: transparent;
    --container-content-padding-bottom: 0;

    & .container__content {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-bottom: 0;
    }

    & h1 {
      margin: 0;
      text-align: center;
    }

    & p {
      margin: 0 auto;
      text-align: center;
    }
  }

  /* Credimoney styles */
  & .page-header--credimoney {
    & h1 {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 300;
      font-size: 43.2px;
      line-height: 51.84px;
      color: rgb(46, 16, 71);
    }

    & .container__content p {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: rgb(46, 16, 71);

      & strong {
        font-weight: 700;
        color: rgb(46, 16, 71);
      }
    }
  }

  /* Crediahora styles */
  & .page-header--crediahora {
    & h1 {
      font-family: Montserrat, sans-serif;
      font-weight: 900;
      font-size: 40.32px;
      line-height: 48.384px;
      color: rgb(29, 29, 27);
    }

    & .container__content p {
      font-family: Montserrat, sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: rgb(29, 29, 27);

      & strong {
        font-weight: 700;
        color: rgb(29, 29, 27);
      }
    }
  }

  /* OleDinero styles */
  & .page-header--oledinero {
    & h1 {
      font-family: Poppins, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: rgb(215, 255, 123);
    }

    & .container__content p {
      font-family: Poppins, sans-serif;
      font-weight: 500;
      font-size: 20.16px;
      line-height: 26.208px;
      color: rgb(255, 255, 255);

      & strong {
        font-weight: 700;
        color: rgb(255, 255, 255);
      }
    }
  }

  /* Credicheck styles */
  & .page-header--credicheck {
    & h1 {
      font-family: Funnel Display, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #76bc74;
    }

    & .container__content p {
      font-family: Funnel Display, sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #18384e;

      & strong {
        font-weight: 700;
        color: #18384e;
      }
    }
  }

  /* CreditoAmigo styles */
  & .page-header--creditoamigo {
    & h1 {
      font-family: Seitu, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #0000FF;
    }

    & .container__content p {
      font-family: Seitu, sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #1D2C56;

      & strong {
        font-weight: 700;
        color: #1D2C56;
      }
    }
  }

  /* CreditoClic styles */
  & .page-header--creditoclic {
    & h1 {
      font-family: Harabara, sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #073034;
    }

    & .container__content p {
      font-family: Harabara, sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #073034;

      & strong {
        font-weight: 700;
        color: #073034;
      }
    }
  }

  /* CreditoPRO styles - white text on blue background */
  & .page-header--creditopro {
    & h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #ffffff;
    }

    & .container__content p {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #ffffff;

      & strong {
        font-weight: 700;
        color: #ffffff;
      }
    }
  }

  /* Crediator styles */
  & .page-header--crediator {
    & h1 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #333333;
    }

    & .container__content p {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #333333;

      & strong {
        font-weight: 700;
        color: #333333;
      }
    }
  }

  /* Credifix styles */
  & .page-header--credifix {
    & h1 {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #182d52;
    }

    & .container__content p {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #182d52;

      & strong {
        font-weight: 700;
        color: #182d52;
      }
    }
  }

  /* Crediscore styles */
  & .page-header--crediscore {
    & h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #000000;
    }

    & .container__content p {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #000000;

      & strong {
        font-weight: 700;
        color: #000000;
      }
    }
  }

  /* Creditando styles */
  & .page-header--creditando {
    & h1 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #002449;
    }

    & .container__content p {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #002449;

      & strong {
        font-weight: 700;
        color: #002449;
      }
    }
  }

  /* Crediticio styles */
  & .page-header--crediticio {
    & h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #13233a;
    }

    & .container__content p {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #000000;

      & strong {
        font-weight: 700;
        color: #000000;
      }
    }
  }

  /* Creditozas styles */
  & .page-header--creditozas {
    & h1 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #000000;
    }

    & .container__content p {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #000000;

      & strong {
        font-weight: 700;
        color: #000000;
      }
    }
  }

  /* Credizoom styles - title is ALL CAPS and uses brand color */
  & .page-header--credizoom {
    & h1 {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #4eb5a4;
      text-transform: uppercase;
    }

    & .container__content p {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #000000;

      & strong {
        font-weight: 700;
        color: #000000;
      }
    }
  }

  /* Mastercredi styles */
  & .page-header--mastercredi {
    & h1 {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      font-size: 43.2px;
      line-height: 51.84px;
      color: #1a1a1a;
    }

    & .container__content p {
      font-family: "AdobeClean", sans-serif;
      font-weight: 400;
      font-size: 22.32px;
      line-height: 29.016px;
      color: #1a1a1a;

      & strong {
        font-weight: 700;
        color: #1a1a1a;
      }
    }
  }
}

@media (width >=1024px) {
  :root {
    & .page-header {
      & .container__content {
        max-width: 960px;
        margin: 0 auto;
        justify-content: center;
      }
    }

    & .page-header--mastercredi {
      & .container__content {
        max-width: calc(100% - 260px);
      }
    }
  }
}


/* === styles.css === */
:root {
  --header-arrow-divider-font-size: 35px;
  --header-arrow-divider-bg-color: var(--color-brand-primary);
}

@media (width >=1024px) {
  :root {
    --header-arrow-divider-font-size: 50px;
  }
}

.header-arrow-divider {
  font-size: var(--header-arrow-divider-font-size);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 10;

  & svg {
    background-color: var(--header-arrow-divider-bg-color);
    border-radius: 100%;
    width: auto !important;
  }
}

/* Brand-specific styles for Credimoney */
.header-arrow-divider--credimoney {
  color: rgb(192, 229, 235);

  & svg {
    background-color: rgb(46, 16, 71);
  }
}

/* Brand-specific styles for Crediahora */
.header-arrow-divider--crediahora {
  color: rgb(149, 193, 31);

  & svg {
    background-color: rgb(255, 255, 255);
  }
}

/* Brand-specific styles for OleDinero */
.header-arrow-divider--oledinero {
  color: rgb(3, 45, 143);

  & svg {
    background-color: rgb(215, 255, 123);
  }
}

/* Brand-specific styles for CreditoAmigo */
.header-arrow-divider--creditoamigo {
  color: #0000FF;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Credicheck */
.header-arrow-divider--credicheck {
  color: #76bc74;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for CreditoClic */
.header-arrow-divider--creditoclic {
  color: #073034;

  & svg {
    background-color: rgb(175, 159, 205);
  }
}

/* Brand-specific styles for CreditoPRO */
.header-arrow-divider--creditopro {
  color: #4570ae;

  & svg {
    background-color: #f3f3f3;
  }
}

/* Brand-specific styles for Crediator */
.header-arrow-divider--crediator {
  color: #f55f99;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Credifix */
.header-arrow-divider--credifix {
  color: #ff0086;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Crediscore */
.header-arrow-divider--crediscore {
  color: #907ee8;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Creditando - inverted colors */
.header-arrow-divider--creditando {
  color: #c6fd00;

  & svg {
    background-color: #002449;
  }
}

/* Brand-specific styles for Crediticio */
.header-arrow-divider--crediticio {
  color: #ffa573;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Creditozas */
.header-arrow-divider--creditozas {
  color: #96b4e6;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Credizoom */
.header-arrow-divider--credizoom {
  color: #4eb5a4;

  & svg {
    background-color: #ffffff;
  }
}

/* Brand-specific styles for Mastercredi (#7040) */
.header-arrow-divider--mastercredi {
  & svg {
    background-color: #e2e8ed;
  }
}

/* Brand-specific styles for Creditoplan */
.header-arrow-divider--creditoplan {
  & svg {
    background-color: #fff;
  }
}

/* Brand-specific styles for Credisolve */
.header-arrow-divider--credisolve {
  & svg {
    background-color: #fff;
  }
}

/* Brand-specific styles for Credipay */
.header-arrow-divider--credipay {
  & svg {
    background-color: #fff;
  }
}

/* Brand-specific styles for Credital */
.header-arrow-divider--credital {
  & svg {
    background-color: #fff;
  }
}


/* === styles.css === */
/**
 * HeaderNav Component Styles
 *
 * Theme-driven public navigation header styling using CSS custom properties.
 * All brand-specific values come from theme configuration (config.cljs).
 */

.header-nav {
  --page-header-navs-flex-gap: 50px;
  --page-header-main-nav-flex-gap: 40px;
  --page-header-nav-auth-flex-gap: 10px;
  --page-header-nav-auth-button-padding-vertical: 11px;
  --page-header-nav-auth-button-padding-horizontal: 20px;
  --page-header-nav-auth-button-border-radius: 50px;
  --page-header-nav-auth-button-text-color: #ffffff;
  --page-header-logo-width: 140px;
  --page-header-mobile-menu-button-height: 24px;
}

.header-nav {
  position: relative;
  z-index: 100;
  background-color: var(--navbar-background, transparent);
}

.header-nav__content {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-top: var(--header-padding-top);
  padding-bottom: var(--header-padding-bottom);
  padding-left: var(--body-padding-horizontal);
  padding-right: var(--body-padding-horizontal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: 85px;
}

@media (width >= 1024px) {
  .header-nav__content {
    max-width: var(--body-max-width, 80rem);
    /* Matches Container's .container__content and production (oledinero.es
       measured live: 0px here at this breakpoint) - the max-width + auto
       margin above already centers this box, so extra padding here would
       just push the logo in further than the sections below it. */
    padding-left: 0;
    padding-right: 0;
  }
}

@media (width >= 1600px) {
  .header-nav__content {
    max-width: var(--body-max-width, 80rem);
  }
}

.header-nav__logo {
  width: var(--page-header-logo-width);
}

/* Mobile Row (Logo + Menu Button) */
.header-nav__mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: var(--page-header-mobile-row-margin-bottom);
}

.header-nav__mobile-button {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

/* ── Animated hamburger → X ── */
.header-nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  position: relative;
}

.header-nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--navbar-text-color, var(--color-brand-secondary));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.25s ease,
              width     0.35s ease;
  transform-origin: center;
}

/* Open → morph lines into X */
.header-nav__mobile-button--open .header-nav__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header-nav__mobile-button--open .header-nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header-nav__mobile-button--open .header-nav__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Bigger, more tappable logo + hamburger on mobile */
@media (max-width: 599px) {

  .header-nav__mobile-button {
    padding: 6px;
    margin: -6px;
  }

  .header-nav__hamburger {
    width: 30px;
    height: 18px;
  }
}

/* Bigger, more tappable logo + hamburger on mobile (all brands). Brands that
   cap the logo by height on mobile (e.g. creditopro) keep their own rule. */
@media (max-width: 599px) {
  .header-nav__logo {
    width: 120px;
  }

  .header-nav__mobile-button {
    padding: 6px;
    margin: -6px;
  }

  .header-nav__mobile-button svg {
    width: 32px;
    height: 32px;
  }
}

/* Navigation */
.header-nav__navigation {
  display: flex;
  gap: var(--page-header-navs-flex-gap);
}

.header-nav__main-nav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--page-header-main-nav-flex-gap);
}

.header-nav__main-nav-item {
  position: relative;
}

.header-nav__main-nav-link {
  color: var(--navbar-link-color, var(--navbar-text-color, var(--color-brand-secondary)));
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.header-nav__main-nav-link--has-dropdown::after {
  content: "▾";
  font-size: 0.7rem;
  margin-left: 0.15rem;
}

/* Dropdown */
.header-nav__dropdown {
  position: relative;
  display: none;
}

.header-nav__main-nav-item:hover>.header-nav__dropdown {
  display: block;
}

.header-nav__dropdown-items {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 8px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-surface-elevated, #eaeaea);
  min-width: 240px;
  animation: dropdownFade 0.2s ease forwards;
}

.header-nav__dropdown-items--multi-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 16px;
  min-width: 480px;
}

/* Invisible bridge so hover doesn't break when moving mouse down */
.header-nav__dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.header-nav__dropdown-item {
  margin: 0;
  border: none;
}

.header-nav__dropdown-item a {
  padding: 10px 16px;
  display: block;
  color: var(--color-text-primary, #333);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border-radius: 8px;
}

.header-nav__dropdown-item a:hover {
  background-color: var(--color-surface-elevated, #f4f4f4);
  color: var(--color-brand-primary);
}

/* Multi-section Dropdown (Servicios y Productos style) */
.header-nav__dropdown--sections {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
  z-index: 1000;
}

.header-nav__dropdown-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-surface-elevated, #eaeaea);
  overflow: visible;
  padding: 16px 24px;
  min-width: 320px;
  width: max-content;
  animation: dropdownFade 0.2s ease forwards;
}

.header-nav__dropdown-section {
  display: grid;
  grid-template-columns: 80px max-content;
  gap: 20px;
  padding: 8px 0;
  align-items: start;
}

.header-nav__dropdown-section:not(:last-child) {
  border-bottom: 2px solid #e0e0e0;
}

.header-nav__dropdown-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary, #333);
  padding: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.8;
}

.header-nav__dropdown-section-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.header-nav__dropdown-section-items .header-nav__dropdown-item {
  border-bottom: none;
}

.header-nav__dropdown-section-items .header-nav__dropdown-item a {
  padding: 2px 0;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--color-text-primary, #333);
  display: block;
  line-height: 1.6;
}

.header-nav__dropdown-section-items .header-nav__dropdown-item a:hover {
  background-color: transparent;
  color: var(--color-brand-primary);
}

/* Crediahora brand - dropdown items should be green (secondary color) */
/* Section titles (Servicios, Productos) stay bold black */
[data-brand="crediahora"] .header-nav__dropdown-section-items .header-nav__dropdown-item a {
  color: var(--color-brand-secondary, #95C11F);
}

[data-brand="crediahora"] .header-nav__dropdown-section-items .header-nav__dropdown-item a:hover {
  color: var(--color-brand-primary, #1D1D1B);
}

/* Auth Nav */
.header-nav__auth-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--page-header-nav-auth-flex-gap);
}

/* On mobile/tablet the header uses the hamburger menu — which already holds
   the login/register links (.mobile-menu__auth) — so hide the top auth
   buttons there. Desktop (>=1300px, where the hamburger is hidden and the
   full nav shows) keeps them unchanged. */
@media (max-width: 1299px) {
  .header-nav__auth-nav {
    display: none;
  }
}

.header-nav__auth-link {
  padding: var(--page-header-nav-auth-button-padding-vertical) var(--page-header-nav-auth-button-padding-horizontal);
  border: 2px solid var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary)));
  border-radius: var(--page-header-nav-auth-button-border-radius);
  text-decoration: none;
  white-space: nowrap;
  /* Default: non-highlighted state */
  background-color: transparent;
  color: var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary)));
}

.header-nav__auth-link--highlighted {
  /* Highlighted state: filled background */
  /* Use explicit highlight vars if set, otherwise fall back to navbar-auth-button-color/navbar-text-color */
  background-color: var(--navbar-auth-button-highlight-bg, var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary))));
  color: var(--navbar-auth-button-highlight-text, var(--navbar-background, #ffffff));
}

.header-nav__auth-link:hover {
  opacity: 0.9;
}

/* Registration Header */
.header-nav--registro {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 12;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.header-nav--registro .header-nav__content {
  padding-top: 0;
  padding-bottom: 0;
}

.header-nav--registro .header-nav__mobile-button {
  display: none;
}

.header-nav--registro nav {
  display: none !important;
}

.header-nav--registro .header-nav__mobile-row {
  margin: 0 !important;
}

.header-nav__title {
  display: none;
}

.header-nav__title--registro {
  display: grid;
  max-width: 500px;
  width: 100%;
  text-align: right;
}

.header-nav__title--registro::first-letter {
  text-transform: uppercase;
}

.header-nav__divider {
  display: block;
}

.header-nav__title--icon {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: end;
  gap: 1rem;
}

.header-nav__title--icon svg {
  font-size: 1.8rem;
}

/* ════════════════════════════════════════════
   MOBILE MENU
   ════════════════════════════════════════════ */

/* Slide-down animation */
@keyframes slideDownMenu {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel: drops from header, full width, full remaining height ── */
.mobile-menu {
  position: fixed;
  top: 85px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100vh - 85px);
  background: var(--mobile-menu-bg, #fff);
  overflow-y: auto;
  padding: var(--body-padding-horizontal);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-top: 1px solid var(--color-surface-elevated, #e5e7eb);
  z-index: 10000;
  animation: slideDownMenu 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
}

/* ── Nav list ── */
.mobile-menu__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__nav-item {
  border-bottom: 1px solid var(--color-surface-elevated, #e5e7eb);
}

/* Row: label + optional chevron */
.mobile-menu__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-brand="oledinero"] .mobile-menu__link,
[data-brand="creditopro"] .mobile-menu__link{
  color: var(--color-text-secondary, #555);
}

.mobile-menu__link {
  flex: 1;
  display: block;
  padding: 1rem 0;
  color: var(--navbar-link-color, var(--navbar-text-color, var(--color-brand-secondary)));
  text-decoration: none;
  font-size: var(--text-lg-font-size, 1.1rem);
  font-weight: var(--font-weight-medium, 500);
}

[data-brand="oledinero"] .mobile-menu__chevron,
[data-brand="credimoney"] .mobile-menu__chevron,
[data-brand="creditopro"] .mobile-menu__chevron {
  color: var(--color-text-secondary, #555);
}

/* Chevron */
.mobile-menu__chevron {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  color: var(--navbar-link-color, var(--color-brand-secondary));
  line-height: 0;
}

.mobile-menu__chevron svg {
  display: block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu__chevron--open svg {
  transform: rotate(180deg);
}

/* ── Accordion submenu ── */
.mobile-menu__submenu-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu__submenu-wrapper--open {
  max-height: 600px;
}

.mobile-menu__subnav {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem 1rem;
}

.mobile-menu__sublink {
  display: block;
  padding: 0.45rem 0;
  color: var(--color-text-secondary, #555);
  text-decoration: none;
  font-size: var(--text-base-font-size, 0.95rem);
}

.mobile-menu__sublink:hover {
  color: var(--color-brand-primary);
}

/* Grouped sections */
.mobile-menu__sections {
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

.mobile-menu__section {
  margin-bottom: 0.5rem;
}

.mobile-menu__section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0.5rem 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Auth section (gray band at the bottom) ── */
.mobile-menu__auth-section {
  background: var(--color-surface-elevated, #f4f4f4);
  margin: 1.5rem -1.5rem -2rem;
  padding: 1.25rem 1.5rem 2rem;
}

[data-brand="credimoney"] .mobile-menu__auth-section,
[data-brand="creditoamigo"] .mobile-menu__auth-section,
[data-brand="creditoclic"] .mobile-menu__auth-section,
[data-brand="creditopro"] .mobile-menu__auth-section{
  background-color: transparent;
}

.mobile-menu__auth {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-brand="oledinero"] .mobile-menu__auth-link,
[data-brand="creditopro"] .mobile-menu__auth-link {
  color: var(--color-text-secondary, #555);
  border-color: var(--color-text-secondary, #555);
}

.mobile-menu__auth-link {
  display: block;
  text-align: center;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border: 2px solid var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary)));
  border-radius: 50px;
  font-weight: var(--font-weight-semibold, 600);
  background-color: transparent;
  color: var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary)));
  transition: opacity 0.15s ease;
}

.mobile-menu__auth-link:hover {
  opacity: 0.85;
}

.mobile-menu__auth-link--highlighted {
  background-color: var(--navbar-auth-button-highlight-bg, var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary))));
  color: var(--navbar-auth-button-highlight-text, var(--navbar-background, #ffffff));
}

/* Responsive: 600px+ */
@media (min-width: 600px) {
  .header-nav__content {
    flex-direction: row;
  }

  .header-nav--registro .header-nav__title--registro .header-nav__divider {
    display: none;
  }

  .header-nav--registro .header-nav__title--registro {
    font-size: 1.3rem;
  }
}

/* Dark background variant - for pages with dark headers (e.g., oledinero Plan Amigo) */
.header-nav--dark-bg .header-nav__main-nav-item>a {
  color: #ffffff;
}

.header-nav--dark-bg .header-nav__hamburger-line {
  background-color: #ffffff;
}

.header-nav--dark-bg .header-nav__auth-link {
  border-color: #d7ff7b;
  color: #d7ff7b;
}

.header-nav--dark-bg .header-nav__auth-link--highlighted {
  background-color: #d7ff7b;
  color: #022d8e;
}

/* Light background variant - for pages with light headers (e.g., Legal pages) */
/* Uses primary color for text instead of secondary/navbar-text-color */
.header-nav--light .header-nav__main-nav-item>a {
  color: var(--primary-color, var(--color-brand-primary));
}

.header-nav--light .header-nav__hamburger-line {
  background-color: var(--primary-color, var(--color-brand-primary));
}

.header-nav--light .header-nav__auth-link {
  border-color: var(--primary-color, var(--color-brand-primary));
  color: var(--primary-color, var(--color-brand-primary));
}

.header-nav--light .header-nav__auth-link--highlighted {
  background-color: var(--primary-color, var(--color-brand-primary));
  color: #ffffff;
}

.header-nav--light .mobile-menu__link {
  color: var(--primary-color, var(--color-brand-primary));
}

.header-nav--light .mobile-menu__auth-link {
  border-color: var(--primary-color, var(--color-brand-primary));
  color: var(--primary-color, var(--color-brand-primary));
}

.header-nav--light .mobile-menu__auth-link--highlighted {
  background-color: var(--primary-color, var(--color-brand-primary));
  color: #ffffff;
}

/* Responsive: 1300px+ (Desktop) */
@media (min-width: 1300px) {
  .header-nav__mobile-button {
    display: none !important;
  }

  .header-nav__main-nav {
    display: flex !important;
  }

  .header-nav__main-nav-item:hover>.header-nav__dropdown {
    display: block;
  }

  .header-nav__dropdown {
    position: relative;
  }

}

/* Creditozas: larger logo */
:root[data-brand="creditozas"] .header-nav {
  --page-header-logo-width: 144px;
}

/* Mastercredi: larger logo */
:root[data-brand="mastercredi"] .header-nav {
  --page-header-logo-width: 144px;
}

[data-brand="creditopro"] .header-nav {
  padding-top: 20px;
}

/* creditopro's logo asset is near-square (447x352); at the default 120px
   logo width it renders ~94px tall. On mobile the header switches to a
   stacked (column) layout with a fixed 85px height, so the oversized logo
   overflows and pushes the auth buttons (Inicia sesion / Registrate) down
   over the hero title. Constrain the logo by height on mobile so it fits,
   and drop the extra top padding that was masking the same issue. */
@media (max-width: 599px) {
  [data-brand="creditopro"] .header-nav__logo {
    width: auto;
    height: 36px;
  }

  [data-brand="creditopro"] .header-nav {
    padding-top: 0;
  }

  [data-brand="credizoom"] .header-nav__logo{
    width: 85px;
  }

  [data-brand="credizoom"] .header-nav__content{
    padding-top: 2rem;
  }
  
}

[data-brand="credizoom"] .header-nav__main-nav-item>a {
  font-weight: 500;
}

/* === styles.css === */
/* HeaderPanelUsuario Component Styles */

:root {
  & .header-panel-usuario {
    background-color: transparent;

    & .container__content {
      padding-bottom: 40px;
      gap: 0px;

      & h2 {
        margin-top: 0;
        margin-bottom: 0;
      }

      & p {
        font-weight: var(--font-weight-light);
        font-size: var(--text-base-font-size);
        margin-top: 0;
        margin-bottom: 10px;

        & a {
          color: var(--color-brand-primary);
          font-weight: var(--font-weight-regular);
          text-decoration: none;
        }
      }

      & .divider {
        height: 1px;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  /* Credimoney brand styles */
  & .header-panel-usuario--credimoney {
    & .container__content {
      & h2 {
        font-family: "Helvetica Neue", sans-serif;
        font-size: 39.6px;
        font-weight: 300;
        color: #2e1047;
      }

      & p {
        font-family: "Helvetica Neue", sans-serif;
        font-size: 16.56px;
        font-weight: 300;
        color: #2e1047;

        & a {
          font-weight: 400;
          color: #2e1047;
          text-decoration: none;
        }
      }

      & .divider--credimoney {
        background-color: #2e1047;
      }
    }
  }

  /* Crediahora brand styles */
  & .header-panel-usuario--crediahora {

    & .container__content {
      & h2 {
        font-family: "Montserrat", sans-serif;
        font-size: 36px;
        font-weight: 900;
        color: #1d1d1b;
      }

      & p {
        font-family: "Montserrat", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #1d1d1b;

        & a {
          font-weight: 400;
          color: #95c11f;
          text-decoration: none;
        }
      }

      & .divider--crediahora {
        background-color: #95c11f;
      }
    }
  }

  /* OleDinero brand styles */
  & .header-panel-usuario--oledinero {
    & .container__content {
      & h2 {
        font-family: "Poppins", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #032d8f;
      }

      & p {
        font-family: "Poppins", sans-serif;
        font-size: 16.56px;
        font-weight: 300;
        color: #032d8f;

        & a {
          font-weight: 400;
          color: #032d8f;
          text-decoration: none;
        }
      }

      & .divider--oledinero {
        background-color: #032d8f;
      }
    }
  }

  /* Crediator brand styles */
  & .header-panel-usuario--crediator {
    & .container__content {
      & h2 {
        font-family: "Manrope", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #333333;
      }

      & p {
        font-family: "Manrope", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #333333;

        & a {
          font-weight: 600;
          color: #f55f99;
          text-decoration: none;
        }
      }

      & .divider--crediator {
        background-color: #f55f99;
      }
    }
  }

  /* Credifix brand styles */
  & .header-panel-usuario--credifix {
    background-color: #ffffff;

    & .container__content {
      & h2 {
        font-family: "Roboto", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #182d52;
      }

      & p {
        font-family: "Roboto", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #182d52;

        & a {
          font-weight: 600;
          color: #ff0086;
          text-decoration: none;
        }
      }

      & .divider--credifix {
        background-color: #ff0086;
      }
    }
  }

  /* Crediscore brand styles */
  & .header-panel-usuario--crediscore {
    & .container__content {
      & h2 {
        font-family: "Open Sans", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #000000;
      }

      & p {
        font-family: "Open Sans", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #000000;

        & a {
          font-weight: 600;
          color: #907ee8;
          text-decoration: none;
        }
      }

      & .divider--crediscore {
        background-color: #907ee8;
      }
    }
  }

  /* Creditando brand styles */
  & .header-panel-usuario--creditando {
    background-color: #ffffff;

    & .container__content {
      & h2 {
        font-family: "Manrope", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #002449;
      }

      & p {
        font-family: "Manrope", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #002449;

        & a {
          font-weight: 600;
          color: #c6fd00;
          text-decoration: none;
        }
      }

      & .divider--creditando {
        background-color: #c6fd00;
      }
    }
  }

  /* Crediticio brand styles */
  & .header-panel-usuario--crediticio {
    & .container__content {
      & h2 {
        font-family: "Open Sans", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #13233a;
      }

      & p {
        font-family: "Open Sans", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #000000;

        & a {
          font-weight: 600;
          color: #ffa573;
          text-decoration: none;
        }
      }

      & .divider--crediticio {
        background-color: #ffa573;
      }
    }
  }

  /* Creditozas brand styles */
  & .header-panel-usuario--creditozas {
    & .container__content {
      & h2 {
        font-family: "Manrope", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #000000;
      }

      & p {
        font-family: "Manrope", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #000000;

        & a {
          font-weight: 600;
          color: #96b4e6;
          text-decoration: none;
        }
      }

      & .divider--creditozas {
        background-color: #96b4e6;
      }
    }
  }

  /* Credizoom brand styles */
  & .header-panel-usuario--credizoom {

    & .container__content {
      & h2 {
        font-family: "AdobeClean", sans-serif;
        font-size: 31.68px;
        font-weight: 500;
        color: #000000;
        text-transform: uppercase;
      }

      & p {
        font-family: "AdobeClean", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #000000;

        & a {
          font-weight: 600;
          color: #4eb5a4;
          text-decoration: none;
        }
      }

      & .divider--credizoom {
        background-color: #4eb5a4;
      }

      & .btn-primary-filled {
        background-color: #4eb5a4;
        color: #000000;
      }
    }
  }

  /* Mastercredi brand styles */
  & .header-panel-usuario--mastercredi {
    & .container__content {
      & h2 {
        font-family: "AdobeClean", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #1a1a1a;
      }

      & p {
        font-family: "AdobeClean", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        color: #1a1a1a;

        & a {
          font-weight: 600;
          color: #1a1a1a;
          text-decoration: none;
        }
      }

      & .divider--mastercredi {
        background-color: #1a1a1a;
      }
    }
  }

  /* Creditoamigo brand styles */
  & .header-panel-usuario--creditoamigo {
    & .container__content {
      & h2 {
        font-family: "Seitu", sans-serif;
        font-size: 39.6px;
        font-weight: 500;
        color: #000000;
      }

      & p {
        font-family: "Seitu", sans-serif;
        font-size: 16.56px;
        font-weight: 300;
        color: #000000;

        & a {
          font-weight: 400;
          color: #0000ff;
          text-decoration: none;
        }
      }

      & .divider--creditoamigo {
        background-color: #0000ff;
      }
    }
  }

  /* Credicheck brand styles */
  & .header-panel-usuario--credicheck {
    & .container__content {
      & h2 {
        font-family: "Seitu", sans-serif;
        font-size: 39.6px;
        font-weight: 500;
        color: #000000;
      }

      & p {
        font-family: "Seitu", sans-serif;
        font-size: 16.56px;
        font-weight: 300;
        color: #000000;

        & a {
          font-weight: 400;
          color: #76bc74;
          text-decoration: none;
        }
      }

      & .divider--credicheck {
        background-color: #76bc74;
      }
    }
  }

  /* Creditoclic brand styles */
  & .header-panel-usuario--creditoclic {
    & .container__content {
      & h2 {
        font-family: "Harabara", sans-serif;
        font-size: 39.6px;
        font-weight: 500;
        color: #073034;
      }

      & p {
        font-family: "Montserrat", sans-serif;
        font-size: 16.56px;
        font-weight: 500;
        color: #073034;

        & a {
          font-weight: 600;
          color: #7ac4ae;
          text-decoration: none;
        }
      }

      & .divider--creditoclic {
        background-color: #7ac4ae;
      }
    }
  }

  /* Creditopro brand styles */
  & .header-panel-usuario--creditopro {
    & .container__content {
      & h2 {
        font-family: "Open Sans", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #333333;
      }

      & p {
        font-family: "Open Sans", sans-serif;
        font-size: 16.56px;
        font-weight: 300;
        color: #333333;

        & a {
          font-weight: 600;
          color: #4570ae;
          text-decoration: none;
        }
      }

      & .divider--creditopro {
        background-color: #4570ae;
      }
    }
  }

  /* Credipay brand styles */
  & .header-panel-usuario--credipay {
    padding-top: 50px;
    & .container__content {
      & h2 {
        font-weight: 800;
      }

      & p {
        font-size: 16.56px;
        font-weight: 400;

      }

      & .divider--credipay {
        background-color: var(--color-brand-primary);
      }
    }
  }

}

/* Credifix page-specific exceptions */
[data-page="certificado-insolvencia"] .header-panel-usuario--credifix {
  background-color: #d9e4f5;
}

/* Credizoom page-specific exceptions */
[data-page="certificado-insolvencia"] .header-panel-usuario--credizoom {
  background-color: #f4f8f9;
}


/* === styles.css === */
.help-support-page {
  background-color: var(--grey-50, #f9fafb);
  padding: 3rem 0;
}

.help-support-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.help-support-sidebar {
  flex: 0 0 280px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1.5rem 0;
}

.help-support-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-support-menu li {
  padding: 0;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.help-support-menu li a {
  display: flex;
  flex: 1;
  padding: 1rem 1.5rem;
  color: var(--text-color, #4b5563);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.help-support-menu li:hover {
  background-color: var(--grey-100, #f3f4f6);
}

.help-support-menu li:hover a {
  color: var(--text-dark, #111827);
}

.help-support-menu li.active {
  background-color: var(--primary-light, #e0e7ff);
  border-left-color: var(--primary-color, #4f46e5);
}

.help-support-menu li.active a {
  color: var(--primary-color, #4338ca);
  font-weight: 600;
}

.help-support-main {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 2.5rem;
  min-height: 450px;
}

.help-support-content {
  max-width: 100%;
}

.help-support-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--primary-color, #1f2937);
  border-bottom: 1px solid var(--grey-200, #e5e7eb);
  padding-bottom: 1rem;
  font-size: 1.8rem;
}

.help-support-content h3 {
  margin-bottom: 1rem;
  color: var(--text-dark, #374151);
  font-size: 1.2rem;
  font-weight: 500;
}

.help-support-ol {
  padding-left: 1.5rem;
}

.help-support-ol li {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--text-color, #4b5563);
}

.help-support-textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--grey-300, #d1d5db);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 1.5rem;
}

.help-support-textarea:focus {
  outline: none;
  border-color: var(--primary-color, #4f46e5);
  box-shadow: 0 0 0 3px var(--primary-light, rgba(79, 70, 229, 0.1));
}

.btn-cancelar,
.btn-soporte {
  background-color: var(--primary-color, #4f46e5);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-cancelar:hover,
.btn-soporte:hover {
  background-color: var(--primary-dark, #4338ca);
}

/* Grid and Cards for Landing */
.help-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.help-support-card {
  background: white;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.help-support-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--primary-color, #4f46e5);
}

.help-support-card-icon {
  font-size: 2.5rem;
  color: var(--primary-color, #4f46e5);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-support-card-title {
  font-weight: 600;
  color: var(--text-dark, #1f2937);
  font-size: 1.1rem;
}

.menu-icon {
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

.menu-text {
  flex: 1;
}

.menu-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.menu-link-toggle {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 1rem 1.5rem;
  color: var(--text-color, #4b5563);
  font-weight: 500;
  font-size: 1.05rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.3s ease;
  width: 100%;
}

.help-support-menu li:hover .menu-link-toggle {
  color: var(--text-dark, #111827);
}

.help-support-menu li.active .menu-link-toggle {
  color: var(--primary-color, #4338ca);
  font-weight: 600;
}

.submenu-arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  color: inherit;
}

/* Submenu Styles */
.help-support-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--grey-50, #f8f9fa);
  border-left: 4px solid transparent;
}

.help-support-submenu li {
  border-left: none !important;
}

.help-support-submenu li a {
  padding: 0.5rem 1.5rem 0.5rem 3.25rem !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--text-color, #6b7280) !important;
}

.help-support-submenu li:hover {
  background-color: var(--grey-100, #e9ecef);
}

.help-support-submenu li:hover a {
  color: var(--primary-color, #4f46e5) !important;
}

.help-support-submenu li.active-sub {
  background-color: var(--grey-100, #f3f4f6);
}

.help-support-submenu li.active-sub a {
  color: var(--primary-color, #4338ca) !important;
  font-weight: 600 !important;
}

/* Mobile Toggle */
.help-support-mobile-toggle {
  display: none;
  width: 100%;
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 8px;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark, #1f2937);
  cursor: pointer;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 1rem;
  z-index: 100;
}

.help-support-mobile-toggle span {
  font-size: 1rem;
  color: var(--primary-color, #4f46e5);
}

/* Responsive */
@media (max-width: 768px) {
  .help-support-layout {
    flex-direction: column;
    gap: 0;
  }

  .help-support-mobile-toggle {
    display: flex;
  }

  .help-support-sidebar {
    flex: none;
    width: 100%;
    position: sticky;
    top: 4.5rem; /* Just below the sticky toggle */
    z-index: 90;
    margin-bottom: 2rem;
    display: none;
    background: white;
    padding: 1rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--grey-200, #e5e7eb);
    border-radius: 8px;
  }

  .help-support-sidebar.is-open {
    display: block;
  }

  .help-support-main {
    padding: 1.5rem;
  }

  .help-support-grid {
    grid-template-columns: 1fr;
  }
}

/* === styles.css === */
/**
 * HeroContainer Component Styles
 *
 * Theme-driven container for hero sections with image.
 * Supports full-width image layouts and responsive design.
 */

:root {
  & .hero-container {
    --hero-text-font-size: var(--text-lg-font-size);
    --hero-text-line-height: var(--text-lg-line-height);
    --hero-buttons-flex-gap: 10px;
    --hero-buttons-flex-direction: column;
    --hero-buttons-font-size: var(--text-base-font-size);
    --hero-image-full-column-text-padding-bottom: 0;
    --hero-row-gap: 40px;
    --hero-flex-direction: column;

    &.hero-image-full {
      --hero-row-gap: 0;
    }
  }
}

@media (width >= 1024px) {
  :root {
    & .hero-container {
      --hero-buttons-flex-gap: 10px;
      --hero-image-full-column-text-padding-bottom: 0;
      --hero-row-gap: 40px;

      &.hero-image-full {
        --hero-row-gap: 40px;
      }
    }
  }
}

@media (width >= 1440px) {
  :root {
    & .hero-container {
      --hero-flex-direction: row;

      & .hero-container__buttons {
        --hero-buttons-flex-direction: row;
      }
    }
  }
}

.hero-container {
  & .row {
    display: flex;
    flex-direction: var(--hero-flex-direction, column);
  }

  & .container-row {
    gap: var(--hero-row-gap);
    justify-content: center;
    /* The global `.row` helper applies -15px side margins (Bootstrap gutter)
       that are meant to be cancelled by 15px container padding. The hero's
       .container__content has 0 horizontal padding (full-bleed background),
       so those negative margins instead push the row 15px past each edge,
       causing horizontal scroll and leaving content only ~5px from the side.
       Reset them: the .container-col already supplies the content inset. */
    margin-left: 0;
    margin-right: 0;
  }

  & .container__content {
    padding-top: var(--container-content-padding-vertical);
    padding-bottom: var(--container-content-padding-vertical);
  }

  @media (max-width: 767px) {
    & .container__content {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }

  &.hero-image-full {
    display: flex;

    & .container__content {
      padding-top: 0;
      padding-bottom: var(--hero-image-full-column-text-padding-bottom);
      padding-left: 0;
      padding-right: 0;
      gap: 20px;
    }

    & .container-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding-top: 60px;
      padding-bottom: 60px;
      padding-left: var(--container-content-padding-horizontal);
      padding-right: var(--container-content-padding-horizontal);
    }

    @media (max-width: 768px) {
      & .container-col {
        padding-top: 40px;
        padding-bottom: 40px;
        gap:20px;
        & .row{
          margin: 0;
        }
      }
    }

  }

  & .col {
    flex: 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;

    & p {
      font-weight: var(--font-weight-semibold);
      font-size: var(--hero-text-font-size);
      line-height: var(--hero-text-line-height);
      text-wrap: balance;
      margin-bottom: 0;
      margin-top: 0;

      & strong {
        font-weight: var(--font-weight-bold);
      }
    }
  }

  @media (max-width: 768px) {
      & .col {
        gap: 15px;
      }
  }

  & .col-img {
    flex: 1;
    min-width: 0;
    position: relative;
    display: grid;
    place-items: center;
    grid-template-columns: repeat(1, 1fr);

    & img {
      margin: 0 auto;
      max-width: 100%;
      max-height: 600px;
      height: auto;
    }
  }

  & .hero-container__buttons {
    display: flex;
    flex-direction: var(--hero-buttons-flex-direction);
    gap: var(--hero-buttons-flex-gap);
    font-size: var(--hero-buttons-font-size);
    align-items: start;
  }
}

@media (width >= 1024px) {
  .hero-container {
    &.hero-image-full {
      & > .container__content {
        --padding-horizontal: calc(
          (100% - var(--container-content-max-width)) / 2
        );

        max-width: none;
        width: 100%;
        margin: 0;
        padding-left: var(--padding-horizontal);
        padding-right: 0;

        & .col-img {
          flex: 1.4;
        }
      }

      &.hero-container-reversed {
        & > .container__content {
          max-width: none;
          margin: 0;
          padding-left: 0;
          padding-right: var(--padding-horizontal);
        }
      }
    }

    &.hero-container-reversed {
      & > .container__content {
        & > .row {
          flex-direction: row-reverse;

          & .col-img {
            place-items: center start;
          }
        }
      }
    }
  }
}


/* === styles.css === */
/**
 * HeroExpertos Component Styles
 *
 * Styles for the expert team hero section.
 * Brand-specific typography, colors, and list icon styles.
 */

.hero-container-expertos {
  & ul {
    & li {
      & svg {
        color: var(--color-text-inverse);
      }
    }
  }

  /* Constrain image size to match production */
  & .col-img img {
    max-width: 700px;
    max-height: 600px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Mobile: scale down heading font sizes */
  & h2 {
    font-size: clamp(1.8rem, 5vw, 2.75rem);
    line-height: 1.2;
  }
}

/* Mobile: hero stays column until 1440px (same as production) */
@media (max-width: 1439px) {
  .hero-container-expertos .row {
    flex-direction: column !important;
  }
}

/* Mobile: scale down brand-specific heading sizes */
@media (max-width: 767px) {
  .hero-container-expertos h2 {
    font-size: clamp(1.5rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }
}

/* Credimoney */
.hero-container-expertos[data-brand="credimoney"] {
  & ul li svg {
    color: var(--color-brand-primaryLight);
  }
}

/* Crediahora */
.hero-container-expertos[data-brand="crediahora"] {
  & h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    color: rgb(29, 29, 27);

    /* Subtitle/eyebrow text - smaller and lighter */
    & small {
      display: block;
      font-size: 24px;
      font-weight: 400;
      line-height: 1.3;
      margin-bottom: 4px;
    }

    /* Emphasized text in main title */
    & em {
      font-style: normal;
    }
  }

  & ul li {
    font-family: "Montserrat", sans-serif;
    font-size: 16.56px;
    color: rgb(29, 29, 27);
  }

  & ul li svg {
    color: rgb(149, 193, 31);
  }
}

/* OleDinero */
.hero-container-expertos[data-brand="oledinero"] {
  & h2 {
    font-family: "Poppins", sans-serif;
    font-size: 43.2px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(2, 45, 142);
  }

  & ul li {
    font-family: "Poppins", sans-serif;
    font-size: 16.56px;
    font-weight: 700;
    color: rgb(2, 45, 142);
  }

  & ul li svg {
    color: rgb(56, 117, 252);
  }
}

/* CreditoAmigo */
.hero-container-expertos[data-brand="creditoamigo"] {
  & h2 {
    font-family: "Seitu", sans-serif;
    font-size: 43.2px;
    font-weight: 500;
    line-height: 43.2px;
    color: rgb(0, 0, 255);
  }

  & ul li {
    font-family: "Open Sans", sans-serif;
    font-size: 16.56px;
    font-weight: 700;
    color: rgb(29, 44, 86);
    align-items: flex-start;
  }

  & ul li svg,
  & ul li .hero-list__icon {
    color: rgb(0, 0, 255);
    margin-top: 2px;
    width: 14px;
    min-width: 14px;
    height: 14px;
  }

  & .hero-container__buttons .btn {
    background-color: #0000ff !important;
    border-color: #0000ff !important;
    color: rgb(255, 255, 255) !important;
  }
}

.hero-container-expertos[data-brand="credicheck"] {
  & h2 {
    font-family: "Funnel Display", sans-serif;
    font-size: 43.2px;
    font-weight: 500;
    line-height: 43.2px;
    color: #76bc74;
  }

  & ul li {
    font-family: "Open Sans", sans-serif;
    font-size: 16.56px;
    font-weight: 700;
    color: #18384e;
    align-items: flex-start;
  }

  & ul li svg,
  & ul li .hero-list__icon {
    color: #76bc74;
    margin-top: 2px;
    width: 14px;
    min-width: 14px;
    height: 14px;
  }

  & .hero-container__buttons .btn {
    background-color: #76bc74 !important;
    border-color: #76bc74 !important;
    color: rgb(255, 255, 255) !important;
  }

  & .col-img img,
  & .col-img .hero-container__image {
    border-radius: 40px;
  }
}

/* Credicheck — the portrait renders oversized on mobile (the column
   stacks full-width and the image is allowed up to 600px tall), so hide it
   below desktop and let the text/list take the full width instead. */
@media (max-width: 767px) {
  .hero-container-expertos[data-brand="credicheck"] .col-img {
    display: none;
  }
}

/* CreditoClic */
.hero-container-expertos[data-brand="creditoclic"] {

  /* Larger image size for creditoclic */
  & .col-img {
    flex: 1.5;
  }

  & .col-img img,
  & .col-img .hero-container__image {
    max-width: 933px !important;
    max-height: 525px !important;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  & h2 {
    font-family: "Harabara", sans-serif;
    font-size: 43.2px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(7, 48, 52);
  }

  & ul li {
    font-family: "Open Sans", sans-serif;
    font-size: 16.56px;
    font-weight: 700;
    color: rgb(7, 48, 52);
    align-items: flex-start;
  }

  & ul li svg,
  & ul li .hero-list__icon {
    color: #af9fcd;
    margin-top: 2px;
    width: 14px;
    min-width: 14px;
    height: 14px;
  }

  /* Third line text color */
  & ul li strong {
    color: #af9fcd;
  }

  & .hero-container__buttons .btn {
    background-color: transparent !important;
    border: 2px solid rgb(7, 48, 52) !important;
    color: rgb(7, 48, 52) !important;
  }
}

/* CreditoPRO */
.hero-container-expertos[data-brand="creditopro"] {
  & h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 43.2px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(69, 112, 174);
  }

  & ul li {
    font-family: "Open Sans", sans-serif;
    font-size: 16.56px;
    font-weight: 400;
    color: rgb(51, 51, 51);
    align-items: flex-start;
  }

  /* Ensure all text in list items has consistent color */
  & ul li span {
    color: rgb(51, 51, 51);
  }

  /* Third line text color */
  & ul li strong {
    color: #4570ae;
  }

  & ul li svg,
  & ul li .hero-list__icon {
    color: #4570ae;
    margin-top: 2px;
    width: 14px;
    min-width: 14px;
    height: 14px;
  }

  & .hero-container__buttons .btn {
    color: rgb(243, 243, 243) !important;
  }
}

/* ========================================
   NEW BRANDS - 8 brand styles
   ======================================== */

/* Crediator */
.hero-container-expertos[data-brand="crediator"] {
  & h2 {

    font-weight: 800;
  }

  & p {
    font-weight: normal;
    font-size: var(--font-size-xl);
  }

  & ul li {
    font-weight: 400;
  }

  & ul li svg {
    color: rgb(0, 89, 63);
  }

  & .hero-container__buttons .btn {
    background-color: #f2d5e0 !important;
    border-color: transparent !important;
    color: rgb(51, 51, 51) !important;
  }
}

/* Credifix */
.hero-container-expertos[data-brand="credifix"] {
  & h2 {

    font-weight: 800 !important;
  }

  & p {
    font-weight: normal;
    font-size: var(--font-size-xl);
  }

  & ul li {
    font-weight: 400;
  }

  & ul li svg {
    color: rgb(255, 0, 134);
  }

  & .hero-container__buttons .btn {
    background-color: #96b4e6 !important;
    border-color: transparent !important;
    color: rgb(24, 45, 82) !important;
    border-radius: 10px !important;
  }
}

/* Crediscore */
.hero-container-expertos[data-brand="crediscore"] {
  & h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 28.8px;
    font-weight: 700;
    line-height: 34.56px;
    color: rgb(0, 0, 0);
  }

  & ul li {
    font-family: "Open Sans", sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    color: rgb(0, 0, 0);
  }

  & ul li svg {
    color: rgb(144, 126, 232);
  }

  & .hero-container__buttons .btn {
    background-color: #907ee8 !important;
    border-color: transparent !important;
    color: rgb(255, 255, 255) !important;
  }
}

/* Creditando */
.hero-container-expertos[data-brand="creditando"] {

  & ul li svg {
    color: rgb(0, 36, 73);
  }

  & .hero-container__buttons .btn {
    background-color: transparent !important;
    border: 2px solid rgb(0, 36, 73) !important;
    color: rgb(0, 36, 73) !important;
    border-radius: 0px !important;
  }
}

/* Crediticio */
.hero-container-expertos[data-brand="crediticio"] {
  & h2 {
    font-size: 28.8px;
    font-weight: 700;
  }

  & ul li {
    font-weight: 600;
  }

  & ul li svg {
    color: var(--color-brand-secondary);
  }

  & .hero-container__buttons .btn {
    background-color: var(--color-brand-primary) !important;
    border-color: transparent !important;
    color: var(--color-brand-secondary) !important;
    border-radius: 40px !important;
  }
}

/* Creditozas */
.hero-container-expertos[data-brand="creditozas"] {
  & h2 {
    font-family: "Manrope", sans-serif;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 34.56px;
    color: rgb(0, 0, 0);
  }

  & ul li {
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 400;
    color: rgb(0, 0, 0);
  }

  & ul li svg {
    color: rgb(150, 180, 230);
  }

  & .hero-container__buttons .btn {
    background-color: #000000 !important;
    border-color: transparent !important;
    color: #96b4e6 !important;
  }
}

/* Credizoom */
.hero-container-expertos[data-brand="credizoom"] {
  & h2 {
    font-size: 31.68px;
    line-height: 38.016px;
    color: rgb(0, 0, 0);
    text-transform: uppercase;
  }

  & ul li {
    font-family: "AdobeClean", sans-serif;
    font-size: 16.56px;
    font-weight: 500;
    color: rgb(0, 0, 0);
  }

  & ul li svg {
    color: rgb(0, 0, 0);
  }

  & .hero-container__buttons .btn {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #4eb5a4 !important;
    border-radius: 999px !important;
    text-transform: capitalize !important;
  }
}

/* Credital — mobile: remove bottom padding below image */
@media (max-width: 1439px) {
  .hero-container-expertos[data-brand="credital"] {
    & .container__content {
      padding-bottom: 0 !important;
    }

    & .col-img {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
  }
}

/* Credital */
.hero-container-expertos[data-brand="credital"] {
  & h2 {
    font-weight: 700;
    color: var(--color-text-primary);
  }

  & ul li svg {
    color: #A318E1;
  }

  & .hero-container__buttons .btn {
    background-color: #A318E1 !important;
    border-color: #A318E1 !important;
    color: #ffffff !important;
  }

  @media (width >= 1440px) {
    & .col-img {
      place-items: end center !important;
      padding: 0 !important;
      margin-bottom: calc(-1 * var(--container-content-padding-vertical));

      & img {
        max-height: none;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
      }
    }
  }
}

/* Credisolve */
.hero-container-expertos[data-brand="credisolve"] {
  @media (width >= 1440px) {
    & .col-img {
      place-items: end center !important;
      padding: 0 !important;
      margin-bottom: calc(-1 * var(--container-content-padding-vertical));

      & img {
        max-height: none;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
      }
    }
  }
}

/* Mastercredi */
.hero-container-expertos[data-brand="mastercredi"] {
  & h2 {
    font-family: "Coolvetica", sans-serif;
    font-size: 39.6px;
    font-weight: 700;
    line-height: 47.52px;
    color: rgb(26, 26, 26);
  }

  & ul li {
    font-family: "AdobeClean", sans-serif;
    font-size: 16.56px;
    font-weight: 600;
    color: rgb(26, 26, 26);
  }

  & ul li .hero-list__icon svg {
    color: #1a1a1a !important;
  }

  & .hero-container__buttons .btn {
    background-color: #1a1a1a !important;
    border-color: transparent !important;
    color: #e2e8ed !important;
    border-radius: 10px !important;
  }
}

/* Credihope: brand entry was missing entirely, so the icons fell through to
   the base rule at the top of this file (`& ul li svg { color: var(--color-
   text-inverse) }`, i.e. white) - invisible since this hero always renders
   on a white background (`white-bg` class, applied for every brand). Give
   it a concrete, visible color like every other brand below does. */
.hero-container-expertos[data-brand="credihope"] {
  & ul li svg,
  & ul li .hero-list__icon {
    color: #f9b233;
  }
}

/* Credipay — mobile: remove bottom padding below image */
@media (max-width: 1439px) {
  .hero-container-expertos[data-brand="credipay"] {
    & .container__content {
      padding-bottom: 0 !important;
    }

    & .col-img {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
  }
}

.hero-container-expertos[data-brand="credipay"] {

  @media (width >= 1440px) {
    & .col-img {
      place-items: end center !important;
      padding: 0 !important;
      margin-bottom: calc(-1 * var(--container-content-padding-vertical));

    }
  }
}

/* === styles.css === */
/**
 * HeroHerramientas Styles
 *
 * Minimal styles specific to the HeroHerramientas component.
 * Most styling is inherited from HeroContainer with classes:
 * - hero-image-full: Makes the image full width
 * - secondary-bg: Uses the secondary background color (Credimoney)
 * - white-bg: Uses white background (Crediahora)
 * - secondary-bg2: Uses secondary background with image (OleDinero)
 */

.hero-container-herramientas {
  /* Specific styles for herramientas hero if needed */
  /* Most styling comes from HeroContainer base styles */
  /* Button border-radius handled globally in buttons.css */
}

/* Image column should be larger (flex: 1.5) to match production */
/* More specific selector to override HeroContainer's default flex: 1.2 */
.hero-container-herramientas.hero-image-full .container__content .col-img {
  flex: 1.5 1 0%;
}

/* OleDinero-specific background with image */
.hero-container-herramientas.secondary-bg2 .container__content {
  background: url("/images/bg/fondo-06.png");
  background-position: right;
  background-size: cover;
}

/* Credimoney */
.hero-container-herramientas[data-brand="credimoney"] {
  & h2 {

    font-weight: 700;
  }

  & p {
    font-weight: 400;
  }
}

/* Crediahora */
.hero-container-herramientas[data-brand="crediahora"] {
  & h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 43.2px;
    color: rgb(29, 29, 27);
  }

  & p {
    font-family: "Montserrat", sans-serif;
    font-size: 16.56px;
    font-weight: 600;
    line-height: 24.84px;
    color: rgb(29, 29, 27);
  }
}

/* OleDinero */
.hero-container-herramientas[data-brand="oledinero"] {
  & h2 {
    font-family: "Poppins", sans-serif;
    font-size: 43.2px;
    font-weight: 700;
    line-height: 51.84px;
    color: rgb(2, 45, 142);
  }

  & p {
    font-family: "Poppins", sans-serif;
    font-size: 16.56px;
    font-weight: 600;
    line-height: 24.84px;
    color: rgb(2, 45, 142);
  }
}

/* Creditoamigo - blue text, Seitu font */
.hero-container-herramientas[data-brand="creditoamigo"] {
  & h2 {
    font-family: Seitu, sans-serif;
    font-size: 44px;
    font-weight: 500;
    line-height: 44px;
    color: rgb(0, 0, 255);
  }

  & p {
    font-family: Seitu, sans-serif;
    font-size: 20.8px;
    font-weight: 400;
    line-height: 27.04px;
    color: rgb(0, 0, 0);
  }

  & .btn {
    background-color: rgb(0, 0, 255);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(0, 0, 255);
    border-radius: 40px;
    font-family: Seitu, sans-serif;
    font-size: 19.2px;
    font-weight: 400;

    &:hover {
      background-color: rgb(0, 0, 200);
      border-color: rgb(0, 0, 200);
    }
  }
}

/* Credicheck - blue text, Funnel Display font */
.hero-container-herramientas[data-brand="credicheck"] {
  & h2 {
    font-family: "Funnel Display", sans-serif;
    font-size: 44px;
    font-weight: 500;
    line-height: 44px;
    color: #76bc74;
  }

  & p {
    font-family: "Funnel Display", sans-serif;
    font-size: 20.8px;
    font-weight: 400;
    line-height: 27.04px;
    color: rgb(0, 0, 0);
  }

  & .btn {
    background-color: #76bc74;
    color: rgb(255, 255, 255);
    border: 2px solid #76bc74;
    border-radius: 40px;
    font-family: "Funnel Display", sans-serif;
    font-size: 19.2px;
    font-weight: 400;

    &:hover {
      background-color: #76bc74;
      border-color: #76bc74;
    }
  }
}

/* Creditoclic - dark teal text, Harabara/Montserrat fonts */
.hero-container-herramientas[data-brand="creditoclic"] {
  & h2 {
    font-family: Harabara, sans-serif;
    font-size: 31.68px;
    font-weight: 500;
    line-height: 38.016px;
    color: rgb(7, 48, 52);
  }

  & p {
    font-family: Montserrat, sans-serif;
    font-size: 18.72px;
    font-weight: 500;
    line-height: 24.336px;
    color: rgb(7, 48, 52);
  }

  & .btn {
    background-color: transparent;
    color: rgb(7, 48, 52);
    border: 2px solid rgb(7, 48, 52);
    border-radius: 999px;
    font-family: Montserrat, sans-serif;
    font-size: 16.56px;
    font-weight: 500;

    &:hover {
      background-color: rgb(7, 48, 52);
      color: #ffffff;
    }
  }
}

/* Creditopro - dark gray text, Open Sans font */
.hero-container-herramientas[data-brand="creditopro"] {
  --container-background: #f3f3f3 !important;

  & h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 39.6px;
    font-weight: 800;
    line-height: 39.6px;
    color: rgb(51, 51, 51);
  }

  & p {
    font-family: "Open Sans", sans-serif;
    font-size: 22.32px;
    font-weight: 400;
    line-height: 29.016px;
    color: rgb(51, 51, 51);
  }

  & .btn {
    background-color: rgb(51, 51, 51);
    color: rgb(243, 243, 243);
    border: 2px solid rgb(51, 51, 51);
    border-radius: 999px;
    font-family: "Open Sans", sans-serif;
    font-size: 16.56px;
    font-weight: 700;

    &:hover {
      background-color: rgb(30, 30, 30);
      border-color: rgb(30, 30, 30);
    }
  }

  & .hero-container__image {
    margin-top: -100px;
  }
}

/* Crediator - dark text, Manrope font, pink button */
.hero-container-herramientas[data-brand="crediator"] {
  & h2 {
    font-family: "Manrope", sans-serif;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 34.56px;
    color: rgb(51, 51, 51);
  }

  & p {
    font-family: "Manrope", sans-serif;
    font-size: 17.28px;
    font-weight: 600;
    line-height: 22.464px;
    color: rgb(51, 51, 51);
  }

  & .btn {
    background-color: rgb(242, 213, 224);
    color: rgb(51, 51, 51);
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
  }
}

/* Credifix - navy text, Roboto font, blue button */
.hero-container-herramientas[data-brand="credifix"] {
  background-color: #ffffff !important;

  &>.container__content {
    padding-bottom: 40px;
  }

  & .container-col {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  & .col-img {
    margin-top: -30px;
  }

  & .col-img img {
    max-width: 100%;
  }

  & h2 {
    font-family: "Roboto", sans-serif;
    font-size: 28.8px;
    font-weight: 300;
    line-height: 34.56px;
    color: rgb(24, 45, 82);
  }

  & p {
    font-family: "Roboto", sans-serif;
    font-size: 17.28px;
    font-weight: 500;
    line-height: 22.464px;
    color: rgb(24, 45, 82);
  }

  & .btn {
    background-color: rgb(150, 180, 230);
    color: rgb(24, 45, 82);
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 14.4px;
    font-weight: 500;
  }
}

/* Crediscore - black text, Open Sans font, purple button */
.hero-container-herramientas[data-brand="crediscore"] {
  & h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 28.8px;
    font-weight: 700;
    line-height: 34.56px;
    color: rgb(0, 0, 0);
  }

  & p {
    font-family: "Open Sans", sans-serif;
    font-size: 17.28px;
    font-weight: 500;
    line-height: 22.464px;
    color: rgb(0, 0, 0);
  }

  & .btn {
    background-color: rgb(144, 126, 232);
    color: rgb(255, 255, 255);
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: "Open Sans", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
  }
}

/* Creditando - navy text, Manrope font, outline button */
.hero-container-herramientas[data-brand="creditando"] {
  & h2 {
    font-family: "Manrope", sans-serif;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 34.56px;
    color: rgb(0, 36, 73);
  }

  & p {
    font-family: "Manrope", sans-serif;
    font-size: 17.28px;
    font-weight: 600;
    line-height: 22.464px;
    color: rgb(0, 36, 73);
  }

  & .btn {
    background-color: transparent;
    color: rgb(0, 36, 73);
    border: 2px solid rgb(0, 36, 73);
    border-radius: 0px;
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
  }
}

/* Crediticio - light blue background, navy text, Open Sans font, navy button with orange text */
.hero-container-herramientas[data-brand="crediticio"] {
  background-color: #e3f2fd;

  & h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 28.8px;
    font-weight: 700;
    line-height: 34.56px;
    color: rgb(19, 35, 58);
  }

  & p {
    font-family: "Open Sans", sans-serif;
    font-size: 20.16px;
    font-weight: 600;
    line-height: 26.208px;
    color: rgb(19, 35, 58);
  }

  & .btn {
    background-color: rgb(19, 35, 58);
    color: rgb(255, 165, 115);
    border: 2px solid rgb(19, 35, 58);
    border-radius: 40px;
    font-family: "Open Sans", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
  }
}

/* Creditozas - black text, Manrope font, black button with blue text */
.hero-container-herramientas[data-brand="creditozas"] {
  & h2 {
    font-family: "Manrope", sans-serif;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 34.56px;
    color: rgb(0, 0, 0);
  }

  & p {
    font-family: "Manrope", sans-serif;
    font-size: 20.16px;
    font-weight: 500;
    line-height: 26.208px;
    color: rgb(0, 0, 0);
  }

  & .btn {
    background-color: rgb(0, 0, 0);
    color: rgb(150, 180, 230);
    border: 2px solid rgb(0, 0, 0);
    border-radius: 999px;
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
  }
}

/* Credizoom - black text, LemonMilk/AdobeClean fonts, black button with teal text */
.hero-container-herramientas[data-brand="credizoom"] {
  & h2 {
    font-size: 28.8px;
    line-height: 34.56px;
    color: rgb(0, 0, 0);
  }

  & p {
    font-family: "AdobeClean", sans-serif;
    font-size: 17.28px;
    font-weight: 500;
    line-height: 22.464px;
    color: rgb(0, 0, 0);
  }

  & .btn {
    background-color: rgb(0, 0, 0);
    color: rgb(78, 181, 164);
    border: 2px solid rgb(0, 0, 0);
    border-radius: 999px;
    font-family: "AdobeClean", sans-serif;
    font-size: 14.4px;
    font-weight: 500;
  }
}

/* Mastercredi - dark text, Coolvetica/AdobeClean fonts, dark button with light text */
.hero-container-herramientas[data-brand="mastercredi"] {
  & h2 {
    font-family: "Coolvetica", sans-serif;
    font-size: 39.6px;
    font-weight: 700;
    line-height: 47.52px;
    color: rgb(26, 26, 26);
  }

  & p {
    font-family: "AdobeClean", sans-serif;
    font-size: 22.32px;
    font-weight: 600;
    line-height: 29.016px;
    color: rgb(26, 26, 26);
  }

  & .btn {
    background-color: rgb(26, 26, 26);
    color: rgb(226, 232, 237);
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: "AdobeClean", sans-serif;
    font-size: 16.56px;
    font-weight: 600;
  }
}


/* === styles.css === */
:root {
  & .hero-container-imagina {
    position: relative;

    & .container__icon-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 69px;
      height: 69px;
      z-index: 1;
    }

    & .hero-container__image {
      --margin-top: 0;
      max-width: 100%;
      height: auto;
      max-height: 600px;
    }

    & .hero-container__image {
      margin-top: var(--margin-top);
    }

    & h2 {
      text-align: center;
      text-wrap: balance;
    }

    /* OleDinero - texto blanco sobre fondo azul oscuro, Poppins */
    &.hero-container-imagina--oledinero {
      background-color: rgb(2, 36, 115);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: rgb(2, 36, 115);
      }

      & h2 {
        color: #ffffff;
        font-size: 39.6px;
        font-weight: 700;
        font-family: Poppins, sans-serif;
        line-height: 39.6px;
      }

      & p {
        color: #ffffff;
        font-size: 20.16px;
        font-weight: 500;
        font-family: Poppins, sans-serif;
        line-height: 28.224px;
      }

      & footer {
        color: #ffffff;
        font-size: 20.16px;
        font-weight: 500;
        font-family: Poppins, sans-serif;
        line-height: 28.224px;
      }

      & .hero-list li {
        color: #ffffff;
        font-size: 16.56px;
        font-weight: 500;
        font-family: Poppins, sans-serif;
        line-height: 23.184px;
      }

      & .hero-list__icon {
        color: rgb(211, 254, 123);
      }
    }

    /* Crediahora - texto oscuro, Montserrat */
    &.hero-container-imagina--crediahora {
      background-color: rgb(245, 245, 245);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: rgb(117, 185, 15);
      }

      & h2 {
        color: rgb(29, 29, 27);
        font-size: 36px;
        font-weight: 900;
        font-family: Montserrat, sans-serif;
        line-height: 43.2px;
      }

      & p {
        color: rgb(29, 29, 27);
        font-size: 14.4px;
        font-weight: 400;
        font-family: Montserrat, sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: rgb(29, 29, 27);
        font-size: 18.72px;
        font-weight: 700;
        font-family: Montserrat, sans-serif;
        line-height: 26.208px;
      }
    }

    /* Credimoney - fondo amarillo, texto morado oscuro */
    &.hero-container-imagina--credimoney {
      background-color: rgb(248, 248, 146);

      & .col.container-col {
        width: 100%;
        max-width: 700px;
      }

      & .container__icon-top {
        color: rgb(216, 199, 255);
      }

      & h2 {
        font-weight: 800;
      }

      & p {
        font-weight: 400;
      }

      & footer {
        font-size: 22.32px;
        font-weight: 400;
        line-height: 31.248px;
      }
    }

    /* Creditoamigo - texto negro con h2/footer azul, Seitu */
    &.hero-container-imagina--creditoamigo {
      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: rgb(0, 0, 255);
      }

      & h2 {
        color: rgb(0, 0, 255);
        font-size: 44px;
        font-weight: 500;
        font-family: Seitu, sans-serif;
        line-height: 44px;
      }

      & p {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 400;
        font-family: Seitu, sans-serif;
        line-height: 20.8px;
      }

      & footer {
        color: rgb(0, 0, 255);
        font-size: 20.8px;
        font-weight: 500;
        font-family: Seitu, sans-serif;
        line-height: 29.12px;
      }
    }

    /* Credicheck - texto negro con h2/footer azul, Funnel Display */
    &.hero-container-imagina--credicheck {
      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #18384e;
      }

      & h2 {
        color: #18384e;
        font-size: 44px;
        font-weight: 500;
        font-family: Funnel Display, sans-serif;
        line-height: 44px;
      }

      & p {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 400;
        font-family: Funnel Display, sans-serif;
        line-height: 20.8px;
      }

      & footer {
        color: #18384e;
        font-size: 20.8px;
        font-weight: 500;
        font-family: Funnel Display, sans-serif;
        line-height: 29.12px;
      }
    }

    /* Creditoclic - texto teal oscuro, Harabara */
    &.hero-container-imagina--creditoclic {
      background-color: rgb(234, 238, 239);
      background-image: url('/images/bg/bg-section-right.png');
      background-repeat: no-repeat;
      background-position: right top;

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #7AC4AE;
      }

      & h2 {
        color: rgb(7, 48, 52);
        font-size: 31.68px;
        font-weight: 500;
        font-family: Harabara, sans-serif;
        line-height: 38.016px;
      }

      & p {
        color: rgb(7, 48, 52);
        font-size: 14.4px;
        font-weight: 500;
        font-family: Montserrat, sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: rgb(7, 48, 52);
        font-size: 18.72px;
        font-weight: 500;
        font-family: Montserrat, sans-serif;
        line-height: 26.208px;
      }
    }

    /* Creditopro - texto gris oscuro, Open Sans */
    &.hero-container-imagina--creditopro {
      background-color: rgb(243, 243, 243);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #4570AE;
      }

      & h2 {
        color: rgb(51, 51, 51);
        font-size: 39.6px;
        font-weight: 800;
        font-family: "Open Sans", sans-serif;
        line-height: 39.6px;
      }

      & p {
        color: rgb(51, 51, 51);
        font-size: 14.4px;
        font-weight: 400;
        font-family: "Open Sans", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: rgb(51, 51, 51);
        font-size: 22.32px;
        font-weight: 500;
        font-family: "Open Sans", sans-serif;
        line-height: 31.248px;
      }
    }

    /* Crediator - texto gris, Manrope */
    &.hero-container-imagina--crediator {
      background-color: rgb(242, 242, 242);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: var(--color-brand-primary);
      }

      & h2 {
        font-weight: 800;
      }

      & p {
        font-weight: 400;
      }

      & footer {
        font-size: 22.32px;
        font-weight: 500;
        line-height: 31.248px;
        color: var(--color-text-primary);
      }
    }

    /* Credifix - texto azul oscuro, Roboto */
    &.hero-container-imagina--credifix {
      background-color: rgb(217, 228, 245);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: var(--color-brand-primary);
      }

      & h2 {
        font-weight: 800;
      }

      & p {
        font-weight: 400;
      }

      & footer {
        color: var(--color-brand-secondary);
        font-size: 22.32px;
        font-weight: 500;
        line-height: 31.248px;
      }
    }

    /* Crediscore - texto negro, Open Sans */
    &.hero-container-imagina--crediscore {
      background-color: rgb(225, 241, 252);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #907ee8;
      }

      & h2 {
        color: #000000;
        font-size: 31.68px;
        font-weight: 700;
        font-family: "Open Sans", sans-serif;
        line-height: 38.016px;
      }

      & p {
        color: #000000;
        font-size: 14.4px;
        font-weight: 500;
        font-family: "Open Sans", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #000000;
        font-size: 18.72px;
        font-weight: 500;
        font-family: "Open Sans", sans-serif;
        line-height: 26.208px;
      }
    }

    /* Creditando - texto azul oscuro, Manrope */
    &.hero-container-imagina--creditando {
      background-color: rgb(221, 236, 238);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #002449;
      }

      & h2 {
        color: #002449;
        font-size: 31.68px;
        font-weight: 800;
        font-family: "Manrope", sans-serif;
        line-height: 38.016px;
      }

      & p {
        color: #002449;
        font-size: 14.4px;
        font-weight: 600;
        font-family: "Manrope", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #002449;
        font-size: 18.72px;
        font-weight: 600;
        font-family: "Manrope", sans-serif;
        line-height: 26.208px;
      }
    }

    /* Crediticio - texto negro, h2 azul oscuro, Open Sans */
    &.hero-container-imagina--crediticio {
      background-color: rgb(227, 242, 253);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: var(--color-brand-primary);
      }

      & h2 {
        font-weight: 700;
      }

      & p {
        font-weight: 600;
      }

      & footer {
        color: var(--color-brand-primary);
        font-size: 22.32px;
        font-weight: 500;
        line-height: 31.248px;
      }
    }

    /* Creditozas - texto negro, Manrope */
    &.hero-container-imagina--creditozas {
      background-color: rgba(229, 234, 234, 0.5);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #96b4e6;
      }

      & h2 {
        color: #000000;
        font-size: 39.6px;
        font-weight: 800;
        font-family: "Manrope", sans-serif;
        line-height: 39.6px;
      }

      & p {
        color: #000000;
        font-size: 14.4px;
        font-weight: 500;
        font-family: "Manrope", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #000000;
        font-size: 22.32px;
        font-weight: 500;
        font-family: "Manrope", sans-serif;
        line-height: 31.248px;
      }
    }

    /* Credizoom - texto negro, LemonMilk h2, AdobeClean body */
    &.hero-container-imagina--credizoom {
      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #4eb5a4;
      }

      & h2 {
        color: #000000;
        font-size: 31.68px;
        line-height: 38.016px;
        text-transform: uppercase;
      }

      & p {
        color: #000000;
        font-size: 14.4px;
        font-weight: 500;
        font-family: "AdobeClean", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #000000;
        font-size: 18.72px;
        font-weight: 500;
        font-family: "AdobeClean", sans-serif;
        line-height: 26.208px;
      }
    }

    /* Mastercredi - texto gris oscuro, Coolvetica h2, AdobeClean body */
    &.hero-container-imagina--mastercredi {
      background-color: rgb(247, 249, 250);

      & .col.container-col {
        width: 100%;
        max-width: 680px;
      }

      & .container__icon-top {
        color: #1a1a1a;
      }

      & h2 {
        color: #1a1a1a;
        font-size: 39.6px;
        font-weight: 700;
        font-family: Coolvetica, sans-serif;
        line-height: 39.6px;
      }

      & p {
        color: #1a1a1a;
        font-size: 14.4px;
        font-weight: 600;
        font-family: "AdobeClean", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #1a1a1a;
        font-size: 22.32px;
        font-weight: 500;
        font-family: "AdobeClean", sans-serif;
        line-height: 31.248px;
      }
    }
     /* Credisolve - light cyan background, blue text */
    &.hero-container-imagina--credisolve {

      & .container__icon-top {
        color: var(--color-brand-primaryDark);
      }

      & h2 {
        font-weight: 800;
      }

      & p {
        font-weight: 400;
      }

      & footer {
        font-size: 22.32px;
        font-weight: 400;
        line-height: 31.248px;
      }
    }

     /* Credisolve - light cyan background, blue text */
    &.hero-container-imagina--creditoplan {

      & .container__icon-top {
        color: var(--color-brand-primaryDark);
      }

      & h2 {
        font-weight: 800;
      }

      & p {
        font-weight: 400;
      }

      & footer {
        font-size: 22.32px;
        font-weight: 400;
        line-height: 31.248px;
      }
    }

    /* Credipay - light cyan background, blue text */
    &.hero-container-imagina--credipay {
      background-color: rgb(192, 229, 235);

      & .col.container-col {
        width: 100%;
        max-width: 700px;
      }

      & .container__icon-top {
        color: #00dfdb;
      }

      & h2 {
        font-weight: 800;
      }

      & p {
        font-weight: 400;
      }

      & footer {
        font-size: 22.32px;
        font-weight: 400;
        line-height: 31.248px;
      }
    }
  }
}

@media (width >= 1024px) {
  :root {
    & .hero-container-imagina {
      & .hero-container__image {
        --margin-top: -130px;
      }
    }
  }
}


/* === styles.css === */
/**
 * HeroLeyOportunidad Component Styles
 *
 * Multi-brand styles for hero "ley segunda oportunidad" section
 */

.hero-ley-oportunidad {
  & .col {
    gap: 15px;
  }

  & h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0;
    text-wrap: balance;
  }

  & p {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (width >=1024px) {
  .hero-ley-oportunidad {
    & h2 {
      line-height: 1;
    }
  }
}

:root {

  /* Credimoney brand styles */
  &[data-brand="credimoney"] {
    & .hero-ley-oportunidad--credimoney {
      & h2 {
        font-weight: 300;
      }
    }
  }

  /* Crediahora brand styles */
  &[data-brand="crediahora"] {
    & .hero-ley-oportunidad--crediahora {
      & h2 {
        font-weight: 900;
      }
    }
  }

  /* Oledinero brand styles */
  &[data-brand="oledinero"] {
    & .hero-ley-oportunidad--oledinero {
      & h2 {
        font-weight: 700;
      }
    }
  }

  /* Creditoamigo brand styles */
  &[data-brand="creditoamigo"] {
    & .hero-ley-oportunidad--creditoamigo {
      & h2 {
        font-weight: 500;
      }
    }
  }

  /* Credicheck brand styles */
  &[data-brand="credicheck"] {
    & .hero-ley-oportunidad--credicheck {
      & h2 {
        font-weight: 500;
      }
    }
  }

  /* Creditoclic brand styles */
  &[data-brand="creditoclic"] {
    & .hero-ley-oportunidad--creditoclic {
      & h2 {
        font-weight: 500;
      }
    }
  }

  /* Creditopro brand styles */
  &[data-brand="creditopro"] {
    & .hero-ley-oportunidad--creditopro {
      & h2 {
        font-weight: 800;
      }
    }
  }

  /* Credifix brand styles */
  &[data-brand="credifix"] {
    & .hero-ley-oportunidad--credifix {
      background-color: #ffffff;

      & h2 {
        font-weight: 300;
      }
    }
  }

  /* Mastercredi brand styles */
  &[data-brand="mastercredi"] {
    & .hero-ley-oportunidad--mastercredi {
      --container-background: #f7f9fa !important;
      background: #f7f9fa !important;

      & h2 {
        font-family: "Coolvetica", sans-serif !important;
        font-size: 39.6px !important;
        font-weight: normal !important;
        color: #1a1a1a !important;
      }

      & p {
        font-family: "AdobeClean", sans-serif;
        font-size: 22.32px !important;
        color: #1a1a1a !important;
      }

      & .hero-list li {
        color: #1a1a1a !important;
        font-family: "AdobeClean", sans-serif;
        align-items: center;
      }

      & .hero-list__icon {
        --list-icon-color: #1a1a1a !important;
        color: #1a1a1a !important;
      }
    }
  }

  /* Credizoom brand styles */
  &[data-brand="credizoom"] {
    & .hero-ley-oportunidad--credizoom {
      --container-background: #f4f8f9 !important;
      background: #f4f8f9 !important;

      & h2 {
        color: #000000 !important;
      }

      & p {
        color: #000000 !important;
      }

      & .hero-list li {
        color: #000000 !important;
        align-items: center;
      }

      & .hero-list__icon {
        --list-icon-color: #4eb5a4 !important;
        color: #4eb5a4 !important;
      }
    }
  }
}

/* #6965: Credizoom desktop layout fix */
@media (width >=1024px) {
  :root[data-brand="credizoom"] .hero-ley-oportunidad--credizoom.hero-image-full>.container__content {
    margin: 0;
    --container-content-column-flex-gap: 30px;
    --container-content-max-width: none;
    --container-content-padding-horizontal: var(--body-padding-horizontal);
  }

  :root[data-brand="credizoom"] .hero-ley-oportunidad--credizoom .container-row {
    padding-left: 242px;
    padding-right: 0;
  }

  :root[data-brand="credizoom"] .hero-ley-oportunidad--credizoom .container-col {
    flex: 1;
    padding-left: 0;
    padding-right: 0;
  }

  :root[data-brand="credizoom"] .hero-ley-oportunidad--credizoom .col-img {
    flex: 1;
  }
}

/* Mastercredi desktop layout fix - prevent content from being crushed */
@media (width >=1024px) {
  :root[data-brand="mastercredi"] .hero-ley-oportunidad--mastercredi.hero-image-full>.container__content {
    margin: 0;
    width: 100%;

    & .container-row>.col {
      flex: 1 1 0%;
    }

    & .container-row>.col-img {
      flex: 1.2 1 0%;
    }
  }
}

@media (width >=1024px) {
  :root {

    /* Credimoney desktop styles */
    &[data-brand="credimoney"] {
      & .hero-ley-oportunidad--credimoney {
        & h2 {
          font-size: 2.75rem;
        }
      }
    }

    /* Crediahora desktop styles */
    &[data-brand="crediahora"] {
      & .hero-ley-oportunidad--crediahora {
        & h2 {
          font-size: 2.5rem;
        }
      }
    }

    /* Oledinero desktop styles */
    &[data-brand="oledinero"] {
      & .hero-ley-oportunidad--oledinero {
        & h2 {
          font-size: 2.75rem;
        }
      }
    }

    /* Creditoamigo desktop styles */
    &[data-brand="creditoamigo"] {
      & .hero-ley-oportunidad--creditoamigo {
        & h2 {
          font-size: 2.5rem;
        }
      }
    }

    /* Credicheck desktop styles */
    &[data-brand="credicheck"] {
      & .hero-ley-oportunidad--credicheck {
        & h2 {
          font-size: 2.5rem;
        }
      }
    }

    /* Creditoclic desktop styles */
    &[data-brand="creditoclic"] {
      & .hero-ley-oportunidad--creditoclic {
        & h2 {
          font-size: 2.5rem;
        }
      }
    }

    /* Creditopro desktop styles */
    &[data-brand="creditopro"] {
      & .hero-ley-oportunidad--creditopro {
        & h2 {
          font-size: 2.5rem;
        }
      }
    }

    /* Credifix desktop styles */
    &[data-brand="credifix"] {
      & .hero-ley-oportunidad--credifix {
        & h2 {
          font-size: 2.5rem;
        }
      }
    }
  }
}


/* === styles.css === */
:root {
  & .hero-list {
    --hero-list-flex-gap: 12px;
    --hero-list-item-flex-gap: 10px;
    --hero-list-item-font-size: var(--text-base-font-size);
    --hero-list-item-line-height: var(--text-base-line-height);
    --hero-list-icon-width: 25px;
    --hero-list-item-color: var(--container-text-color);
    --hero-list-item-strong-color: var(--container-text-strong-color);
  }
}

.hero-list {
  display: flex;
  flex-direction: column;
  gap: var(--hero-list-flex-gap);
  padding-left: 0;
  list-style: none;

  & li {
    display: flex;
    align-items: center;
    gap: var(--hero-list-item-flex-gap);
    font-size: var(--hero-list-item-font-size);
    line-height: var(--hero-list-item-line-height);
    font-weight: var(--font-weight-semibold);
    text-wrap: balance;
    color: var(--hero-list-item-color);

    & strong {
      font-weight: inherit;
      color: var(--hero-list-item-strong-color);
    }

    & .hero-list__icon {
      --list-icon-color: var(--color-brand-secondary);

      align-self: flex-start;
      width: var(--hero-list-icon-width);
      color: var(--list-icon-color);

      & svg {
        min-width: 100%;
        display: block;
      }

      &.hero-list__icon--credimoney {
        width: 14px;
        height: 29px;

        & svg {
          width: 14px;
          height: 29px;
        }
      }

      &.hero-list__icon--crediahora {
        width: 21px;
        height: 20px;

        & svg {
          width: 21px;
          height: 20px;
        }
      }

      &.hero-list__icon--oledinero {
        width: 14px;
        height: 14px;

        & svg {
          width: 14px;
          height: 14px;
        }
      }

       &.hero-list__icon--credital {
        width: 15px;
        height: 15px;

        & svg {
          width: 15px;
          height: 15px;
        }
      }

      &.hero-list__icon--credipay {
        width: 15px;
        height: 15px;

        & svg {
          width: 15px;
          height: 15px;
        }
      }

       &.hero-list__icon--creditoplan {
        width: 15px;
        height: 15px;
        align-self: center;
        & svg {
          width: 15px;
          height: 15px;
          color: var(--list-icon-color);
        }
      }
    }
  }

  /* Credimoney brand styles */
  &.hero-list--credimoney {
    &.hero-list--credipay {
      padding: 0;
      margin: 0;
    }
    
    & li {
      font-weight: 400;
    }

    & .hero-list__icon {
      --list-icon-color: var(--color-brand-secondary);
    }
  }

  /* Crediahora brand styles */
  &.hero-list--crediahora {
    & li {
      font-family: "Montserrat", sans-serif;
      font-feature-settings: normal;
      font-size: 16.56px;
      font-synthesis-position: none;
      font-synthesis-small-caps: none;
      font-synthesis-style: none;
      font-synthesis-weight: none;
      font-variation-settings: normal;
      font-weight: 400;
      color: #1d1d1b;
      line-height: 23.184px;
    }
  }

  /* OleDinero brand styles */
  &.hero-list--oledinero {
    & li {
      font-family: "Poppins", sans-serif;
      font-feature-settings: normal;
      font-size: 16.56px;
      font-synthesis-position: none;
      font-synthesis-small-caps: none;
      font-synthesis-style: none;
      font-synthesis-weight: none;
      font-variation-settings: normal;
      font-weight: 500;
      color: #ffffff;
      line-height: 23.184px;
    }

  }

  /* CreditoClic brand styles */
  &.hero-list--creditoclic {
    & li {
      font-family: "Open Sans", sans-serif;
      font-size: 16.56px;
      font-weight: 700;
      color: #073034;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #af9fcd;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #af9fcd;
      width: 14px;
      min-width: 14px;
      height: 14px;
      margin-top: 4px;

      & svg {
        width: 14px;
        height: 14px;
      }
    }
  }

  /* CreditoPRO brand styles */
  &.hero-list--creditopro {
    & li {

      font-weight: 400;
      align-items: flex-start;

      & strong {
        color: #f3f3f3;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #f3f3f3;
      width: 14px;
      min-width: 14px;
      height: 14px;
      margin-top: 4px;

      & svg {
        width: 14px;
        height: 14px;
      }
    }
  }

  /* Crediator brand styles */
  &.hero-list--crediator {
    & li {
      font-family: "Manrope", sans-serif;
      font-size: 16.56px;
      font-weight: 600;
      color: #333333;
      line-height: 23.184px;
      align-items: center;

      & strong {
        color: #333333;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #f55f99;
      align-self: center;
      width: 18px;
      min-width: 18px;
      height: 37px;

      & svg {
        width: 18px;
        height: 37px;
      }
    }
  }

  /* Credifix brand styles */
  &.hero-list--credifix {
    & li {
      font-family: "Roboto", sans-serif;
      font-size: 16.56px;
      font-weight: 400;
      color: #182d52;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #182d52;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #ff0086;
      width: 20px;
      min-width: 20px;
      height: 20px;
      margin-top: 2px;

      & svg {
        width: 20px;
        height: 20px;
      }
    }
  }

  /* Crediscore brand styles */
  &.hero-list--crediscore {
    & li {
      font-family: "Open Sans", sans-serif;
      font-size: 16.56px;
      font-weight: 400;
      color: #000000;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #000000;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #907ee8;
      width: 20px;
      min-width: 20px;
      height: 17px;
      margin-top: 4px;

      & svg {
        width: 20px;
        height: 17px;
      }
    }
  }

  /* Creditando brand styles */
  &.hero-list--creditando {
    & li {
      font-family: "Manrope", sans-serif;
      font-size: 16.56px;
      font-weight: 600;
      color: #002449;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #002449;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #002449;
      width: 20px;
      min-width: 20px;
      height: 14px;
      margin-top: 2px;

      & svg {
        width: 20px;
        height: 14px;
      }
    }
  }

  /* Crediticio brand styles */
  &.hero-list--crediticio {
    & li {
      font-size: 16.56px;
      font-weight: 400;
      color: #000000;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #13233a;
      }
    }

    & .hero-list__icon {
      --list-icon-color: var(--color-brand-secondary);
      width: 14px;
      min-width: 14px;
      height: 15px;
      margin-top: 5px;

      & svg {
        width: 15px;
        height: 15px;
      }
    }
  }

  /* Creditozas brand styles */
  &.hero-list--creditozas {
    & li {
      font-family: "Manrope", sans-serif;
      font-size: 16.56px;
      font-weight: 600;
      color: #000000;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #000000;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #000000;
      width: 18px;
      min-width: 18px;
      height: 22px;
      margin-top: 2px;

      & svg {
        width: 23px;
        height: 22px;
      }
    }
  }

  /* Credizoom brand styles */
  &.hero-list--credizoom {
    & li {
      font-family: "AdobeClean", sans-serif;
      font-size: 16.56px;
      font-weight: 400;
      color: #000000;
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #4eb5a4;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #4eb5a4;
      width: 28px;
      min-width: 28px;
      height: 33px;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;

      & svg {
        width: 28px;
        height: 33px;
      }
    }
  }

  /* Mastercredi brand styles */
  &.hero-list--mastercredi {
    padding: 0;
    margin: 0;

    & li {
      font-family: "AdobeClean", sans-serif;
      font-size: 16.56px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 23.184px;
      align-items: center;

      & strong {
        color: #1a1a1a;
        font-weight: 400;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #e2e8ed;
      width: 14px;
      min-width: 14px;
      height: 3px;
      align-self: flex-start;
      margin-top: 8px;

      & svg {
        color: #e2e8ed;
        width: 14px;
        height: 3px;
        display: block;
      }
    }
  }

   /* Credital brand styles */
  &.hero-list--credital {
    padding: 0;
    margin: 0;

    & li {
      font-weight: 500;

       & strong {
          color: var(--color-text-primary);
       }
    }
    & .hero-list__icon {
      align-self: center;
      & svg {
        color:  var(--color-brand-primaryDark);
        width: 10px;
        height: 10px;
        display: block;
      }
    }
  }

     /* Credipay brand styles */
  &.hero-list--credipay {
    padding: 0;
    margin: 0;

    & li {
      & span{
        font-weight: 400 !important;
      }
      
      & strong {
        color: var(--color-brand-primary);
      }
    }
    & .hero-list__icon {
      align-self: center;
      & svg {
        color:  var(--color-brand-primary);
        width: 10px;
        height: 10px;
        display: block;
      }
    }
  }

}


/* === styles.css === */
.hero-panel-amigo {}

/* Crediahora: outer container with gray background */
.hero-panel-amigo--crediahora {
  background: #f5f5f5;
}

.hero-panel-amigo .row {
  position: relative;
  padding: 60px var(--container-content-padding-horizontal);
  border-radius: 40px;
}

/* Credimoney: cyan/teal background */
.hero-panel-amigo--credimoney .row {
  background: #c0e5eb;
}

/* Crediahora: white background */
.hero-panel-amigo--crediahora .row {
  background: #ffffff;
}

/* Oledinero: lime green background */
.hero-panel-amigo--oledinero .row {
  background: #d7ff7b;
}

.hero-panel-amigo h2 {
  font-size: var(--text-2xl-font-size);
  line-height: var(--text-2xl-line-height);
  font-weight: var(--h2-font-weight);
  margin-bottom: 0;
}

.hero-panel-amigo__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (width >=1024px) {
  .hero-panel-amigo__list {
    margin-right: 100px;
  }
}

.hero-panel-amigo .col-img img {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
  height: auto;
}

@media (width >=1024px) {
  .hero-panel-amigo .col-img img {
    margin-top: -320px;
    margin-bottom: -320px;
    max-height: 600px;
    width: auto;
  }
}

/* Credimoney: smaller image */
@media (width >=1024px) {
  .hero-panel-amigo--credimoney .col-img img {
    max-height: 380px;
  }
}

.hero-panel-amigo__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base-font-size);
  line-height: var(--text-base-line-height);
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

.hero-panel-amigo__extra {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: var(--color-brand-primary);
}

/* Crediahora: green color for plus icon */
.hero-panel-amigo--crediahora .hero-panel-amigo__extra {
  color: rgb(149, 193, 31);
}

/* Credifix: pink color for plus icon */
.hero-panel-amigo--credifix .hero-panel-amigo__extra,
.hero-panel-amigo--credifix .hero-panel-amigo__extra a {
  color: #ff0086;
}

/* Mastercredi: light gray background for inner row */
.hero-panel-amigo--mastercredi .row {
  background: #f7f9fa;
}

.hero-panel-amigo--mastercredi h2 {
  color: #1a1a1a;
  font-family: "Coolvetica", sans-serif;
  font-weight: 700;
  font-size: 39.6px !important;
}

.hero-panel-amigo--mastercredi .hero-panel-amigo__list li {
  font-family: "AdobeClean", sans-serif;
  color: #1a1a1a;
}

.hero-panel-amigo--mastercredi .hero-panel-amigo__extra,
.hero-panel-amigo--mastercredi .hero-panel-amigo__extra a {
  color: #1a1a1a;
}

.hero-panel-amigo--mastercredi .btn {
  background-color: #1a1a1a !important;
  border: none !important;
  color: #e2e8ed !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Crediahora and Oledinero: lighter font weight for list items */
.hero-panel-amigo--crediahora .hero-panel-amigo__list li,
.hero-panel-amigo--oledinero .hero-panel-amigo__list li {
  font-weight: 400;
}

/* ===== BUTTON STYLES ===== */

/* Credimoney: yellow button with dark purple text */
.hero-panel-amigo--credimoney .btn {
  background-color: #f8f892 !important;
  border-color: #f8f892 !important;
  color: #2e1047 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

.hero-panel-amigo--credimoney .btn:hover {
  background-color: #e9e97a !important;
  border-color: #e9e97a !important;
}

/* Crediahora: black button with white text, pill shape */
.hero-panel-amigo--crediahora .btn {
  background-color: #1d1d1b !important;
  border-color: transparent !important;
  color: #f5f5f5 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.hero-panel-amigo--crediahora .btn:hover {
  background-color: #333 !important;
}

/* OleDinero: outline button with blue border */
.hero-panel-amigo--oledinero .btn {
  background-color: transparent !important;
  border: 2px solid rgb(3, 45, 143) !important;
  color: rgb(3, 45, 143) !important;
  padding: 12px 25px !important;
  border-radius: 40px 40px 0px 40px !important;
  font-weight: 500 !important;
}

.hero-panel-amigo--oledinero .btn:hover {
  background-color: rgb(3, 45, 143) !important;
  color: #ffffff !important;
}

/* Creditoamigo: white row background, blue heading */
.hero-panel-amigo--creditoamigo .row {
  background: #ffffff;
}

.hero-panel-amigo--creditoamigo .btn {
  background-color: #0000ff !important;
  border: 2px solid #0000ff !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Credicheck: white row background, blue heading */
.hero-panel-amigo--credicheck .row {
  background: #ffffff;
}

.hero-panel-amigo--credicheck .btn {
  background-color: #76bc74 !important;
  border: 2px solid #76bc74 !important;
  color: #ffffff !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Creditoclic: transparent row background, dark teal text */
.hero-panel-amigo--creditoclic .row {
  background: #eaeeef;
}

.hero-panel-amigo--creditoclic .btn {
  background-color: transparent !important;
  border: 2px solid #073034 !important;
  color: #073034 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Creditopro: white row background, dark text */
.hero-panel-amigo--creditopro .row {
  background: #f3f3f3;
}

.hero-panel-amigo--creditopro .btn {
  background-color: #333333 !important;
  border: 2px solid #333333 !important;
  color: #f3f3f3 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Credifix: light blue outer, white inner */
.hero-panel-amigo--credifix {
  background: #d9e4f5;
}

.hero-panel-amigo--credifix .row {
  background: #ffffff;
}

.hero-panel-amigo--credifix h2 {
  color: #182d52;
  font-family: "Roboto", sans-serif;
}

.hero-panel-amigo--credifix .hero-panel-amigo__list li {
  font-family: "Roboto", sans-serif;
  color: #182d52;
}

.hero-panel-amigo--credifix .btn {
  background-color: #96b4e6 !important;
  border: none !important;
  color: #182d52 !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Crediticio: orange row background, dark text */
.hero-panel-amigo--crediticio .row {
  background: #ffa573;
}

.hero-panel-amigo--crediticio h2 {
  color: #13233a;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.hero-panel-amigo--crediticio .hero-panel-amigo__list li {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

.hero-panel-amigo--crediticio .hero-panel-amigo__extra,
.hero-panel-amigo--crediticio .hero-panel-amigo__extra a {
  color: #13233a;
}

.hero-panel-amigo--crediticio .btn {
  background-color: #13233a !important;
  border: 2px solid #13233a !important;
  color: #ffa573 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Creditozas: light gray row background */
.hero-panel-amigo--creditozas .row {
  background: #e5eaea;
}

.hero-panel-amigo--creditozas h2 {
  color: #000000;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.hero-panel-amigo--creditozas .hero-panel-amigo__list li {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

.hero-panel-amigo--creditozas .hero-panel-amigo__extra,
.hero-panel-amigo--creditozas .hero-panel-amigo__extra a {
  color: #000000;
}

.hero-panel-amigo--creditozas .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #96b4e6 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Credizoom: #f4f8f9 outer background, white row background */
.hero-panel-amigo--credizoom {
  background: #f4f8f9;
}

.hero-panel-amigo--credizoom .row {
  background: #ffffff;
}

.hero-panel-amigo--credizoom h2 {
  color: #000000;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
}

.hero-panel-amigo--credizoom .hero-panel-amigo__list li {
  font-family: "AdobeClean", sans-serif;
  color: #000000;
}

.hero-panel-amigo--credizoom .hero-panel-amigo__extra,
.hero-panel-amigo--credizoom .hero-panel-amigo__extra a {
  color: #4eb5a4;
}

.hero-panel-amigo--credizoom .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
}


/* === styles.css === */
/* HeroPanelControl specific styles */

.hero-container-panel-control {
  /* Component-specific styles can be added here */
  /* Most styles come from hero-image-full and secondary-bg classes */
}

/* Match production: image fills container width to reach right edge */
.hero-container-panel-control .container__content .col {
  flex: 1 1 40%;
}

.hero-container-panel-control .container__content .col-img {
  flex: 4 1 0%;
}

.hero-container-panel-control .col-img img {
  width: 100%;
  max-height: none;
  margin: 0;
}

.faqs-section .col-img img {
  width: 100%;
  max-height: none;
  margin: 0;
}

/* Brand-specific h2 styles */

[data-brand="crediahora"] .hero-container-panel-control h2 {
  font-weight: 900;
}

[data-brand="crediahora"] .hero-container-panel-control p {
    font-weight: normal;
    font-size: var(--font-size-xl);
}


[data-brand="oledinero"] .hero-container-panel-control h2 {
  font-weight: 700;
}

[data-brand="oledinero"] .hero-container-panel-control p {
  font-weight: normal;
  font-size: var(--font-size-xl);
}

[data-brand="oledinero"] .hero-container-panel-control .hero-list li {
  font-weight: 500;
}

/* OleDinero: bullet circles should be primary blue on secondary-bg */
[data-brand="oledinero"] .hero-container-panel-control .hero-list__icon {
  --list-icon-color: #032d8f;
}

/* Credimoney: secondary button (login) should use cyan-light background */
.hero-container-panel-control[data-brand="credimoney"] h2 {
  font-weight: 800;
}

.hero-container-panel-control[data-brand="credimoney"] p {
  font-weight: normal;
  font-size: var(--font-size-xl);
}

.secondary-bg.hero-container-panel-control[data-brand="credimoney"] .btn.btn-extra {
  background-color: #c0e5eb;
  border-color: #c0e5eb;
  color: #2e1047;
}

/* CreditoAmigo brand styles */
[data-brand="creditoamigo"] .hero-container-panel-control {
  background-color: #F0F1F7 !important;
}

[data-brand="creditoamigo"] .hero-container-panel-control h2 {

  font-weight: 700;
}

[data-brand="creditoamigo"] .hero-container-panel-control p {
   font-weight: normal;
  font-size: var(--font-size-xl);
}



[data-brand="creditoamigo"] .hero-container-panel-control .hero-list__icon {
  --list-icon-color: var(--color-brand-secondary);
}

[data-brand="creditoamigo"] .hero-container-panel-control .hero-list li strong {
  color: #0000FF;
  font-weight: 500;
}

[data-brand="creditoamigo"] .hero-container-panel-control .btn {
  background-color: #0000FF;
  border-color: #0000FF;
  color: #ffffff;
}

/* Credicheck brand styles */
[data-brand="credicheck"] .hero-container-panel-control {
  background-color: #edeef4 !important;
}

[data-brand="credicheck"] .hero-container-panel-control h2 {
  font-family: "Funnel Display", sans-serif !important;
  font-size: 44px;
  font-weight: 500;
  line-height: 44px;
  color: #76bc74;
}

[data-brand="credicheck"] .hero-container-panel-control p {
  font-family: "Funnel Display", sans-serif;
  font-size: 20.8px;
  font-weight: 400;
  color: #000000;
}

[data-brand="credicheck"] .hero-container-panel-control .hero-list li {
  font-family: "Funnel Display", sans-serif;
  font-size: 18.4px;
  font-weight: 500;
  color: #000000;
}

[data-brand="credicheck"] .hero-container-panel-control .hero-list__icon {
  --list-icon-color: #18384e;
}

[data-brand="credicheck"] .hero-container-panel-control .hero-list li strong {
  color: #76bc74;
  font-weight: 500;
}

[data-brand="credicheck"] .hero-container-panel-control .btn {
  background-color: #76bc74;
  border-color: #76bc74;
  color: #ffffff;
}

/* CreditoClic brand styles */
[data-brand="creditoclic"] .hero-container-panel-control {
  background-color: #EAEEEF !important;
  background-image: url('/images/bg/bg-section-right.png');
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: cover;
}

[data-brand="creditoclic"] .hero-container-panel-control h2 {
  font-weight: 500;
}

[data-brand="creditoclic"] .hero-container-panel-control p {
  font-weight: normal;
  font-size: var(--font-size-xl);
}

[data-brand="creditoclic"] .hero-container-panel-control .hero-list li {
  font-weight: 500;
}

[data-brand="creditoclic"] .hero-container-panel-control .hero-list__icon {
  --list-icon-color: #7AC4AE;
}

[data-brand="creditoclic"] .hero-container-panel-control .hero-list li strong {
  color: #073034;
  font-weight: 600;
}

[data-brand="creditoclic"] .hero-container-panel-control .btn {
  background-color: transparent;
  border: 2px solid #073034;
  border-radius: 999px;
  color: #073034;
}

/* CreditoPRO brand styles */
[data-brand="creditopro"] .hero-container-panel-control {
  background-color: #FFFFFF !important;
}

[data-brand="creditopro"] .hero-container-panel-control h2 {
  font-weight: 800;
}

[data-brand="creditopro"] .hero-container-panel-control p {

  font-weight: 400;
}

[data-brand="creditopro"] .hero-container-panel-control .hero-list li {
  font-weight: 400;
}

[data-brand="creditopro"] .hero-container-panel-control .hero-list__icon {
  --list-icon-color: #4570AE;
}

[data-brand="creditopro"] .hero-container-panel-control .hero-list li strong {
  color: #4570AE;
  font-weight: 700;
}

[data-brand="creditopro"] .hero-container-panel-control .btn {
  background-color: #333333;
  border: 2px solid #333333;
  border-radius: 999px;
  color: #F3F3F3;
}

/* ========================================
   NEW BRANDS - 8 brand styles
   ======================================== */

/* Crediator brand styles */
.container.secondary-bg.hero-container-panel-control[data-brand="crediator"] {
  background-color: #ffffff !important;
  background: rgb(255, 255, 255) url('/images/bg/bg-header.png') no-repeat 100% 100% / cover !important;
}

.hero-container-panel-control[data-brand="crediator"] h2 {
  font-weight: 800;
  color: #333333;
}

.hero-container-panel-control[data-brand="crediator"] p {
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: #333333;
}

.hero-container-panel-control[data-brand="crediator"] .hero-list li {
  font-weight: 400;
  color: #333333;
}

.hero-container-panel-control[data-brand="crediator"] .hero-list__icon {
  --list-icon-color: #f55f99;
}

.hero-container-panel-control[data-brand="crediator"] .hero-list li strong {
  color: #f55f99 !important;
  font-weight: 700;
}

/* Crediator primary button: light pink background with dark text */
.container.secondary-bg.hero-container-panel-control[data-brand="crediator"] .btn:not(.btn-extra) {
  background-color: #f2d5e0 !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  color: #333333 !important;
}

/* Crediator secondary button (login): dark green background with lime text */
.container.secondary-bg.hero-container-panel-control[data-brand="crediator"] .btn.btn-extra {
  background-color: #00593f !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  color: #cdf63e !important;
}

/* Credisolve secondary button (login): dark green background with lime text */
.container.secondary-bg.hero-container-panel-control[data-brand="credisolve"] .btn.btn-extra {
  background: var(--paso-a-paso-item-order-background-even) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Credifix brand styles */
.container.secondary-bg.hero-container-panel-control[data-brand="credifix"] {
  background: rgb(217, 228, 245) url('/images/bg/bg-header-2.png') no-repeat 100% 100% / cover !important;
}

@media (max-width: 768px) {
  .container.secondary-bg.hero-container-panel-control[data-brand="credifix"] {
    background: rgb(217, 228, 245) url('/images/bg/bg-header-2.png') no-repeat 0px -120px / cover !important;
  }
}

.hero-container-panel-control[data-brand="credifix"] h2 {
  font-weight: 800;
}

.hero-container-panel-control[data-brand="credifix"] p {
  font-weight: normal;
  font-size: var(--font-size-xl);
}


.hero-container-panel-control[data-brand="credifix"] .hero-list__icon {
  --list-icon-color: #ff0086;
}

.hero-container-panel-control[data-brand="credifix"] .hero-list li strong {
  color: #182d52;
  font-weight: 500;
}

/* Credifix button: solid blue-gray background */
.container.secondary-bg.hero-container-panel-control[data-brand="credifix"] .btn.btn-primary-filled {
  background-color: var(--paso-a-paso-button-bg, #d8c7ff) !important;
  color: var(--paso-a-paso-button-color, #2e1047) !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="credifix"] .btn.btn-extra {
  background-color: #96b4e6 !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  color: #182d52 !important;
}


@media (width >=1024px) {

  .hero-container-panel-control[data-brand="credifix"] .col-img {
    flex: 2 !important;
    place-items: center flex-end !important;
    min-width: 0 !important;

    & img{
      width: 80%;
    }
  }
}

/* Crediscore brand styles */
.container.secondary-bg.hero-container-panel-control[data-brand="crediscore"] {
  background-color: #e1f1fc !important;
  background: #e1f1fc !important;
}

.hero-container-panel-control[data-brand="crediscore"] h2 {
  font-weight: 700;
}

.hero-container-panel-control[data-brand="crediscore"] p {
  font-weight: normal;
  font-size: var(--font-size-xl);
}


.hero-container-panel-control[data-brand="crediscore"] .hero-list__icon {
  --list-icon-color: #907ee8;
}

.hero-container-panel-control[data-brand="crediscore"] .hero-list li strong {
  color: #000000;
  font-weight: 500;
}

/* Crediscore buttons */
.container.secondary-bg.hero-container-panel-control[data-brand="crediscore"] .btn:not(.btn-extra) {
  background-color: #907ee8 !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  color: #ffffff !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="crediscore"] .btn.btn-extra {
  background-color: #c5e5fc !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  color: #000000 !important;
}

/* Creditando brand styles - light mint background with dark navy text */
.container.secondary-bg.hero-container-panel-control[data-brand="creditando"] {
  background-color: #ddecee !important;
  background: #ddecee !important;
}

.hero-container-panel-control[data-brand="creditando"] p {
    font-weight: normal;
    font-size: var(--font-size-xl);
}


.hero-container-panel-control[data-brand="creditando"] .hero-list__icon {
  --list-icon-color: #002449;
}

.hero-container-panel-control[data-brand="creditando"] .hero-list li strong {
  color: #002449;
  font-weight: 700;
}

/* Creditando buttons */
.container.secondary-bg.hero-container-panel-control[data-brand="creditando"] .btn:not(.btn-extra) {
  background-color: transparent !important;
  border: 2px solid #002449 !important;
  border-radius: 0px !important;
  color: #002449 !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="creditando"] .btn.btn-extra {
  background-color: #002449 !important;
  border: 2px solid #002449 !important;
  border-radius: 0px !important;
  color: #c6fd00 !important;
}

/* Crediticio brand styles - light blue background */
.container.secondary-bg.hero-container-panel-control[data-brand="crediticio"] {
  background-color: #e3f2fd !important;
  background: #e3f2fd !important;
}

.hero-container-panel-control[data-brand="crediticio"] h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 28.8px;
  font-weight: 700;
  line-height: 34.56px;
  color: #13233a;
}

.hero-container-panel-control[data-brand="crediticio"] p {
  font-family: "Open Sans", sans-serif;
  font-size: 20.16px;
  font-weight: 600;
  line-height: 26.208px;
  color: #13233a;
}

.hero-container-panel-control[data-brand="crediticio"] .hero-list li {
  font-family: "Open Sans", sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  color: #13233a;
}

.hero-container-panel-control[data-brand="crediticio"] .hero-list__icon {
  --list-icon-color: #ffa573;
}

.hero-container-panel-control[data-brand="crediticio"] .hero-list li strong {
  color: #13233a;
  font-weight: 700;
}


/* Crediticio buttons */
.container.secondary-bg.hero-container-panel-control[data-brand="crediticio"] .btn:not(.btn-extra) {
  background-color: #c5e5fc !important;
  border: 2px solid #c5e5fc !important;
  border-radius: 40px !important;
  color: #13233a !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="crediticio"] .btn.btn-extra {
  background-color: #13233a !important;
  border: 2px solid #13233a !important;
  border-radius: 40px !important;
  color: #ffa573 !important;
}

/* Creditozas brand styles - semi-transparent mint background */
.container.secondary-bg.hero-container-panel-control[data-brand="creditozas"] {
  background-color: rgba(229, 234, 234, 0.5) !important;
  background: rgba(229, 234, 234, 0.5) !important;
}

.hero-container-panel-control[data-brand="creditozas"] h2 {
  font-weight: 800;
}

.hero-container-panel-control[data-brand="creditozas"] p {
  font-weight: normal;
  font-size: var(--font-size-xl);
}

.hero-container-panel-control[data-brand="creditozas"] .hero-list__icon {
  --list-icon-color: #96b4e6;
}

.hero-container-panel-control[data-brand="creditozas"] .hero-list li strong {
  color: #000000;
  font-weight: 700;
}

/* Creditozas buttons */
.container.secondary-bg.hero-container-panel-control[data-brand="creditozas"] .btn.btn-secondary-filled {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 999px !important;
  color: #96b4e6 !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="creditozas"] .btn.btn-primary-filled {
  background-color: #f2f4f4 !important;
  border: 2px solid #000000 !important;
  border-radius: 999px !important;
  color: #000000 !important;
}

/* Credizoom brand styles - light gray background with teal accents */
.container.secondary-bg.hero-container-panel-control[data-brand="credizoom"] {
  background-color: #f4f8f9 !important;
  background: #f4f8f9 !important;
}

.hero-container-panel-control[data-brand="credizoom"] h2 {
  font-size: 31.68px;
  line-height: 38.016px;
  color: #000000;
  text-transform: uppercase;
}

.hero-container-panel-control[data-brand="credizoom"] p {
  font-family: "AdobeClean", sans-serif;
  font-size: 18.72px;
  font-weight: 500;
  line-height: 24.336px;
  color: #000000;
}

.hero-container-panel-control[data-brand="credizoom"] .hero-list li {
  font-family: "AdobeClean", sans-serif;
  font-size: 16.56px;
  font-weight: 500;
  color: #000000;
}

.hero-container-panel-control[data-brand="credizoom"] .hero-list__icon {
  --list-icon-color: #4eb5a4;
  background-color: transparent;
  border-radius: 0;
  width: 30px;
  min-width: 30px;
  height: 32px;
}

.hero-container-panel-control[data-brand="credizoom"] .hero-list__icon svg {
  width: 30px;
  height: 32px;
}

.hero-container-panel-control[data-brand="credizoom"] .hero-list li strong {
  color: #000000;
  font-weight: 500;
}

/* Credizoom buttons */
.container.secondary-bg.hero-container-panel-control[data-brand="credizoom"] .btn:not(.btn-extra):not(.btn-primary-filled) {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 999px !important;
  color: #4eb5a4 !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="credizoom"] .btn.btn-primary-filled,
.container.secondary-bg.hero-container-panel-control[data-brand="credizoom"] .btn.btn-extra {
  background-color: #4eb5a4 !important;
  border: 2px solid #4eb5a4 !important;
  border-radius: 999px !important;
  color: #000000 !important;
}

/* Mastercredi brand styles - light background with dark accents */
.container.secondary-bg.hero-container-panel-control[data-brand="mastercredi"] {
  background-color: #f7f9fa !important;
  background: #f7f9fa !important;
}

.hero-container-panel-control[data-brand="mastercredi"] h2 {
  font-weight: 700;
}

.hero-container-panel-control[data-brand="mastercredi"] p {
   font-weight: normal;
  font-size: var(--font-size-xl);
}



.hero-container-panel-control[data-brand="mastercredi"] .hero-list__icon {
  --list-icon-color: #1a1a1a;
}

.hero-container-panel-control[data-brand="mastercredi"] .hero-list li strong {
  color: #1a1a1a;
  font-weight: 700;
}

/* Mastercredi: image flush right at constrained size */
.hero-container-panel-control[data-brand="mastercredi"] .col-img {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 !important;
}

.hero-container-panel-control[data-brand="mastercredi"] .col-img img {
  max-width: 930px;
  max-height: 600px;
  margin-left: auto !important;
  margin-right: 0 !important;
}


/* Mastercredi buttons */
.container.secondary-bg.hero-container-panel-control[data-brand="mastercredi"] .btn-secondary-filled {
  background-color: #e2e8ed !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #1a1a1a !important;
}

.container.secondary-bg.hero-container-panel-control[data-brand="mastercredi"] .btn-primary-filled {
  background-color: #1a1a1a !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #e2e8ed !important;
}


/* Credital brand styles - light background with dark accents */
.container.secondary-bg.hero-container-panel-control[data-brand="credital"] {
  background-color: #EAEEEF !important;
}


.hero-container-panel-control[data-brand="credital"] h2 {
  font-family: 'Source Serif 4', serif !important;
  color: var(--color-text-primary);
  font-weight: 700;
}

.hero-container-panel-control[data-brand="credital"] h2 em{
  font-style: normal;
}

.hero-container-panel-control[data-brand="credital"] p{
  margin-top: 0;
}

.hero-container-panel-control[data-brand="credital"] ul li span strong{
  color: var(--color-text-primary);
}

/*Credisolve*/

.hero-container-panel-control[data-brand="credisolve"]{
  background: var(--color-surface-elevated);
}

.hero-container-panel-control[data-brand="credisolve"] h2 {
  font-weight: 800;
}

.hero-container-panel-control[data-brand="credisolve"] h2 em{
  font-style: normal;
}

/* Credipay brand styles - light background with dark accents */

.hero-container-panel-control[data-brand="credipay"] h2 {
  font-weight: 800;
}

.hero-container-panel-control[data-brand="credipay"] h2 em{
  font-style: normal;
}

.hero-container-panel-control[data-brand="credipay"] p{
 font-weight: normal;
 font-size: var(--font-size-xl);
}

/* === styles.css === */
/**
 * HeroPanelUsuario Component Styles
 *
 * Multi-brand styles for hero panel usuario section
 */

:root {
  & .hero-panel-usuario {

    /* Override the default max-height from HeroContainer */
    & .hero-container__image {
      max-height: 475px;
    }

    /* Remove padding from HeaderPanelUsuario container content */
    & .header-panel-usuario {
      & .container__content {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    /* Main title and subtitle base styles */
    & .hero-panel-usuario__main-title {
      margin: 0 0 10px 0;
    }

    & .hero-panel-usuario__main-subtitle {
      margin: 0 0 20px 0;
    }

    /* Bank logos styling */
    & .hero-panel-usuario__bank-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
      margin-bottom: 20px;
    }

    & .hero-panel-usuario__bank-logo {
      height: 24px;
      width: auto;
      object-fit: contain;
      opacity: 0.7;
    }
  }

  /* Credimoney brand styles */
  &[data-brand="credimoney"] {
    & .hero-panel-usuario--credimoney {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Helvetica Neue", sans-serif;
        font-size: 39.6px;
        font-weight: 300;
        color: #2e1047;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Helvetica Neue", sans-serif;
        font-size: 22.32px;
        font-weight: 700;
        color: #2e1047;
        line-height: 29.016px;
      }

      & .btn {
        font-family: "Helvetica Neue", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #f8f892;
        color: #2e1047;
        padding: 12px 25px;
        border-radius: 40px;
        border: 2px solid #f8f892;
      }
    }
  }

  /* Crediahora brand styles */
  &[data-brand="crediahora"] {
    & .hero-panel-usuario--crediahora {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Montserrat", sans-serif;
        font-size: 36px;
        font-weight: 900;
        color: #1d1d1b;
        line-height: 43.2px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Montserrat", sans-serif;
        font-size: 18.72px;
        font-weight: 400;
        color: #1d1d1b;
        line-height: 24.336px;
      }

      & .btn {
        font-family: "Montserrat", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #1d1d1b;
        color: #f5f5f5;
        padding: 12px 25px;
        border-radius: 999px;
        border: 2px solid transparent;
      }
    }
  }

  /* Oledinero brand styles */
  &[data-brand="oledinero"] {
    & .hero-panel-usuario--oledinero {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Poppins", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #022d8e;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Poppins", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #022d8e;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Poppins", sans-serif;
        font-size: 16.56px;
        font-weight: 500;
        line-height: 23.184px;
        background-color: transparent;
        color: #032d8f;
        padding: 12px 25px;
        border-radius: 40px 40px 0px 40px;
        border: 2px solid #032d8f;
      }
    }
  }

  /* Crediator brand styles */
  &[data-brand="crediator"] {
    & .hero-panel-usuario--crediator {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Manrope", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #f55f99;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Manrope", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #333333;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Manrope", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #f2d5e0;
        color: #333333;
        padding: 12px 25px;
        border-radius: 999px;
        border: none;
      }
    }
  }

  /* Credifix brand styles */
  &[data-brand="credifix"] {
    & .hero-panel-usuario--credifix {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Roboto", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #ff0086;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Roboto", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #182d52;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Roboto", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #96b4e6;
        color: #182d52;
        padding: 12px 25px;
        border-radius: 10px;
        border: none;
      }

      & .col-img {
        place-items: center flex-end;
      }
    }
  }

  /* Crediscore brand styles */
  &[data-brand="crediscore"] {
    & .hero-panel-usuario--crediscore {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Open Sans", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #907ee8;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Open Sans", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #000000;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Open Sans", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #907ee8;
        color: #ffffff;
        padding: 12px 25px;
        border-radius: 999px;
        border: none;
      }
    }
  }

  /* Creditando brand styles */
  &[data-brand="creditando"] {
    & .hero-panel-usuario--creditando {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Manrope", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #002449;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Manrope", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #002449;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Manrope", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: transparent;
        color: #002449;
        padding: 12px 25px;
        border-radius: 0;
        border: 2px solid #002449;
      }
    }
  }

  /* Crediticio brand styles */
  &[data-brand="crediticio"] {
    & .hero-panel-usuario--crediticio {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Open Sans", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #13233a;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Open Sans", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #000000;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Open Sans", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #13233a;
        color: #ffffff;
        padding: 12px 25px;
        border-radius: 999px;
        border: none;
      }
    }
  }

  /* Creditozas brand styles */
  &[data-brand="creditozas"] {
    & .hero-panel-usuario--creditozas {
      background-color: #e5eaea;

      & .hero-panel-usuario__main-title {
        font-family: "Manrope", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #000000;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Manrope", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #000000;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Manrope", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #000000;
        color: #ffffff;
        padding: 12px 25px;
        border-radius: 999px;
        border: none;
      }
    }
  }

  /* Credizoom brand styles */
  &[data-brand="credizoom"] {
    & .hero-panel-usuario--credizoom {
      background-color: #f4f8f9;

      & h2 {
        font-family: "AdobeClean", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #4eb5a4;
        line-height: 39.6px;
        margin-bottom: 20px;
      }

      & p {
        font-family: "AdobeClean", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #000000;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "AdobeClean", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #000000;
        color: #4eb5a4;
        padding: 12px 25px;
        border-radius: 999px;
        border: none;
      }
    }
  }

  /* Credicheck brand styles */
  &[data-brand="credicheck"] {
    & .hero-panel-usuario--credicheck {
      background-color: transparent;

      & .hero-panel-usuario__main-title {
        font-family: "Funnel Display", sans-serif;
        font-size: 39.6px;
        font-weight: 500;
        color: #000000;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Funnel Display", sans-serif;
        font-size: 20.16px;
        font-weight: 300;
        color: #000000;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Funnel Display", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        line-height: 23.184px;
        background-color: #76bc74;
        color: #ffffff;
        padding: 12px 25px;
        border-radius: 40px;
        border: 2px solid #76bc74;
      }
    }
  }

  /* Creditoamigo brand styles */
  &[data-brand="creditoamigo"] {
    & .hero-panel-usuario--creditoamigo {
      background-color: transparent;

      & .hero-panel-usuario__main-title {
        font-family: "Seitu", sans-serif;
        font-size: 39.6px;
        font-weight: 500;
        color: #000000;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Seitu", sans-serif;
        font-size: 20.16px;
        font-weight: 300;
        color: #000000;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Seitu", sans-serif;
        font-size: 16.56px;
        font-weight: 400;
        line-height: 23.184px;
        background-color: #0000ff;
        color: #ffffff;
        padding: 12px 25px;
        border-radius: 40px;
        border: 2px solid #0000ff;
      }
    }
  }

  /* Creditoclic brand styles */
  &[data-brand="creditoclic"] {
    & .hero-panel-usuario--creditoclic {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "Harabara", sans-serif;
        font-size: 39.6px;
        font-weight: 500;
        color: #073034;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Montserrat", sans-serif;
        font-size: 20.16px;
        font-weight: 500;
        color: #073034;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Montserrat", sans-serif;
        font-size: 16.56px;
        font-weight: 500;
        line-height: 23.184px;
        background-color: transparent;
        color: #073034;
        padding: 12px 25px;
        border-radius: 999px;
        border: 2px solid #073034;
      }
    }
  }

  /* Creditopro brand styles */
  &[data-brand="creditopro"] {
    & .hero-panel-usuario--creditopro {
      background-color: #f3f3f3;

      & .hero-panel-usuario__main-title {
        font-family: "Open Sans", sans-serif;
        font-size: 39.6px;
        font-weight: 800;
        color: #333333;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "Open Sans", sans-serif;
        font-size: 20.16px;
        font-weight: 300;
        color: #333333;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "Open Sans", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #333333;
        color: #f3f3f3;
        padding: 12px 25px;
        border-radius: 999px;
        border: 2px solid #333333;
      }
    }
  }

  /* Mastercredi brand styles */
  &[data-brand="mastercredi"] {
    & .hero-panel-usuario--mastercredi {
      background-color: #ffffff;

      & .hero-panel-usuario__main-title {
        font-family: "AdobeClean", sans-serif;
        font-size: 39.6px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 39.6px;
      }

      & .hero-panel-usuario__main-subtitle {
        font-family: "AdobeClean", sans-serif;
        font-size: 20.16px;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 26.208px;
      }

      & .btn {
        font-family: "AdobeClean", sans-serif;
        font-size: 16.56px;
        font-weight: 700;
        line-height: 23.184px;
        background-color: #1a1a1a;
        color: #ffffff;
        padding: 12px 25px;
        border-radius: 10px;
        border: none;
      }
    }
  }
}


/* === styles.css === */
/**
 * HeroPlanAmigo Component Styles
 *
 * Brand-specific styles for Plan Amigo hero section.
 * Most styling is handled by HeroContainer and HeroList components.
 */

.hero-container-plan-amigo {
  background: #ffffff;

  & .container__content {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  & .container-col {
    width: 100%;
    max-width: 538px;
  }

  & .col-img {
    flex: 1.6;
  }

  & .hero-container__image {
    max-width: 100%;
    height: auto;
    max-height: 600px;
  }

  & h2 {
    & img {
      width: 255px;
      max-width: 60%;
    }
  }

  /* List item font size to match production (16.56px = 1.15rem at 14.4px base) */
  & .hero-list li {
    font-size: 1.15rem;
  }
}

/* ===== CREDIMONEY BRAND ===== */
section.hero-container-plan-amigo[data-brand="credimoney"] {
  background-color: #ffffff;
}

/* Credimoney Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="credimoney"] .container-col p {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.55rem;
  /* 22.32px */
  font-weight: 700;
  line-height: 1.3;
  color: rgb(46, 16, 71);
  text-wrap: balance;
}

/* Credimoney Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="credimoney"] .hero-list li {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 700;
  color: rgb(46, 16, 71);
}

/* Credimoney Plan Amigo list icon - light purple */
section.hero-container-plan-amigo[data-brand="credimoney"] .hero-list__icon {
  color: #d8c7ff;
}

/* Credimoney Plan Amigo button - yellow to match production */
section.hero-container-plan-amigo[data-brand="credimoney"] .btn {
  background-color: #f8f892 !important;
  border-color: #f8f892 !important;
  color: #2e1047 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

section.hero-container-plan-amigo[data-brand="credimoney"] .btn:hover {
  background-color: #e8e882 !important;
  border-color: #e8e882 !important;
}

/* ===== CREDIAHORA BRAND ===== */
section.hero-container-plan-amigo[data-brand="crediahora"] {
  background-color: #f5f5f5;
}

/* Crediahora Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="crediahora"] .container-col p {
  font-family: Montserrat, sans-serif;
  font-size: 1.3rem;
  /* 18.72px */
  font-weight: 400;
  line-height: 1.3;
  color: rgb(29, 29, 27);
  text-wrap: balance;
}

/* Crediahora Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="crediahora"] .hero-list li {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  color: rgb(29, 29, 27);
}

/* Crediahora Plan Amigo list icon - green */
section.hero-container-plan-amigo[data-brand="crediahora"] .hero-list__icon {
  color: rgb(149, 193, 31);
}

/* Crediahora Plan Amigo button - black with white text */
section.hero-container-plan-amigo[data-brand="crediahora"] .btn {
  background-color: #1d1d1b !important;
  border-color: transparent !important;
  color: #f5f5f5 !important;
  border-radius: 999px !important;
  padding: 12px 25px !important;
  font-weight: 700 !important;
}

section.hero-container-plan-amigo[data-brand="crediahora"] .btn:hover {
  background-color: #333 !important;
  border-color: #333 !important;
}

/* ===== OLEDINERO BRAND ===== */
section.hero-container-plan-amigo[data-brand="oledinero"] {
  background-color: #ffffff;
}

/* OleDinero Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="oledinero"] .container-col p {
  font-family: Poppins, sans-serif;
  font-size: 1.4rem;
  /* 20.16px */
  font-weight: 600;
  line-height: 1.3;
  color: rgb(2, 45, 142);
  text-wrap: balance;
}

/* OleDinero Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="oledinero"] .hero-list li {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  color: rgb(2, 45, 142);
}

/* OleDinero Plan Amigo list icon */
section.hero-container-plan-amigo[data-brand="oledinero"] .hero-list__icon {
  color: rgb(3, 45, 143);
}

/* OleDinero logo should use dark mode (inverted) */
section.hero-container-plan-amigo[data-brand="oledinero"] h2 img {
  filter: none;
}

/* OleDinero Plan Amigo button - outline style with special border-radius */
section.hero-container-plan-amigo[data-brand="oledinero"] .btn {
  background-color: transparent !important;
  border: 2px solid rgb(3, 45, 143) !important;
  color: rgb(3, 45, 143) !important;
  border-radius: 40px 40px 0px 40px !important;
  padding: 12px 25px !important;
  font-weight: 500 !important;
}

section.hero-container-plan-amigo[data-brand="oledinero"] .btn:hover {
  background-color: rgb(3, 45, 143) !important;
  color: #ffffff !important;
}

/* Custom border-radius for OleDinero Plan Amigo button */
/* Use with: class="btn btn-primary-outline btn-plan-amigo-oledinero" */
.btn-plan-amigo-oledinero {
  border-radius: 40px 40px 0px 40px !important;
}

/* Custom style for Crediator Plan Amigo button */
.btn-plan-amigo-crediator {
  background-color: #f2d5e0 !important;
  color: #333333 !important;
  border-color: transparent !important;
}

/* ===== CREDITOAMIGO BRAND ===== */
section.hero-container-plan-amigo[data-brand="creditoamigo"] {
  background-color: #ffffff;
}

/* Creditoamigo Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="creditoamigo"] .container-col p {
  font-family: Seitu, sans-serif;
  font-size: 20.8px;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(0, 0, 0);
  text-wrap: balance;
}

/* Creditoamigo Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="creditoamigo"] .hero-list li {
  font-family: Seitu, sans-serif;
  font-weight: 500;
  color: rgb(0, 0, 0);
}

/* Crediamigo Plan Amigo list icon - light purple-blue */
section.hero-container-plan-amigo[data-brand="creditoamigo"] .hero-list__icon {
  color: #8297fd;
}

/* Crediamigo Plan Amigo button - blue filled */
section.hero-container-plan-amigo[data-brand="creditoamigo"] .btn {
  background-color: rgb(0, 0, 255) !important;
  border: 2px solid rgb(0, 0, 255) !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 40px !important;
  padding: 12px 25px !important;
}

section.hero-container-plan-amigo[data-brand="creditoamigo"] .btn:hover {
  background-color: rgb(0, 0, 200) !important;
  border-color: rgb(0, 0, 200) !important;
}

/* ===== CREDICHECK BRAND ===== */
section.hero-container-plan-amigo[data-brand="credicheck"] {
  background-color: #ffffff;
}

/* Credicheck Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="credicheck"] .container-col p {
  font-family: Funnel Display, sans-serif;
  font-size: 20.8px;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(0, 0, 0);
  text-wrap: balance;
}

/* Credicheck Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="credicheck"] .hero-list li {
  font-family: Funnel Display, sans-serif;
  font-weight: 500;
  color: rgb(0, 0, 0);
}

/* Credicheck Plan Amigo list icon - light purple-blue */
section.hero-container-plan-amigo[data-brand="credicheck"] .hero-list__icon {
  color: #b9dab2;
}

/* Credicheck Plan Amigo button - blue filled */
section.hero-container-plan-amigo[data-brand="credicheck"] .btn {
  background-color: #76bc74 !important;
  border: 2px solid #76bc74 !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 40px !important;
  padding: 12px 25px !important;
}

section.hero-container-plan-amigo[data-brand="credicheck"] .btn:hover {
  background-color: #b9dab2 !important;
  border-color: #b9dab2 !important;
}

/* ===== CREDITOCLIC BRAND ===== */
section.hero-container-plan-amigo[data-brand="creditoclic"] {
  background-color: #ffffff;
}

/* Creditoclic Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="creditoclic"] .container-col p {
  font-family: Montserrat, sans-serif;
  font-size: 18.72px;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(7, 48, 52);
  text-wrap: balance;
}

/* Creditoclic Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="creditoclic"] .hero-list li {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  color: rgb(7, 48, 52);
}

/* Creditoclic Plan Amigo list icon - mint green */
section.hero-container-plan-amigo[data-brand="creditoclic"] .hero-list__icon {
  color: rgb(122, 196, 174);
}

/* Creditoclic Plan Amigo button - outline style */
section.hero-container-plan-amigo[data-brand="creditoclic"] .btn {
  background-color: transparent !important;
  border: 2px solid rgb(7, 48, 52) !important;
  color: rgb(7, 48, 52) !important;
  border-radius: 999px !important;
  padding: 12px 25px !important;
  font-weight: 500 !important;
}

section.hero-container-plan-amigo[data-brand="creditoclic"] .btn:hover {
  background-color: rgb(7, 48, 52) !important;
  color: #ffffff !important;
}

/* ===== CREDITOPRO BRAND ===== */
section.hero-container-plan-amigo[data-brand="creditopro"] {
  background-color: #ffffff;
}

/* Creditopro Plan Amigo description text */
section.hero-container-plan-amigo[data-brand="creditopro"] .container-col p {
  font-family: "Open Sans", sans-serif;
  font-size: 22.32px;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(51, 51, 51);
  text-wrap: balance;
}

/* Creditopro Plan Amigo list items */
section.hero-container-plan-amigo[data-brand="creditopro"] .hero-list li {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: rgb(51, 51, 51);
}

/* Creditopro Plan Amigo list icon - blue */
section.hero-container-plan-amigo[data-brand="creditopro"] .hero-list__icon {
  color: rgb(69, 112, 174);
}

/* Creditopro Plan Amigo button - dark gray filled */
section.hero-container-plan-amigo[data-brand="creditopro"] .btn {
  background-color: rgb(51, 51, 51) !important;
  border: 2px solid rgb(51, 51, 51) !important;
  color: rgb(243, 243, 243) !important;
  border-radius: 999px !important;
  padding: 12px 25px !important;
  font-weight: 700 !important;
}

section.hero-container-plan-amigo[data-brand="creditopro"] .btn:hover {
  background-color: rgb(30, 30, 30) !important;
  border-color: rgb(30, 30, 30) !important;
}

/* ===== CREDIFIX BRAND ===== */
[data-page="certificado-insolvencia"] section.hero-container-plan-amigo[data-brand="credifix"] {
  background-color: #d9e4f5;
}

section.hero-container-plan-amigo[data-brand="credifix"] .container-col p {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #182d52;
  text-wrap: balance;
}

section.hero-container-plan-amigo[data-brand="credifix"] .hero-list li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #182d52;
}

section.hero-container-plan-amigo[data-brand="credifix"] .hero-list__icon {
  color: #ff0086;
}

section.hero-container-plan-amigo[data-brand="credifix"] .btn {
  background-color: #96b4e6 !important;
  border: none !important;
  color: #182d52 !important;
  border-radius: 10px !important;
  padding: 12px 25px !important;
  font-weight: 600 !important;
}

section.hero-container-plan-amigo[data-brand="credifix"] .btn:hover {
  background-color: #7a9bd4 !important;
}

/* ===== CREDITANDO BRAND ===== */
section.hero-container-plan-amigo[data-brand="creditando"] {
  background-color: #ddecee;
}

section.hero-container-plan-amigo[data-brand="creditando"] .container-col p {
  font-family: "Manrope", sans-serif;
  color: #002449;
}

section.hero-container-plan-amigo[data-brand="creditando"] .hero-list li {
  font-family: "Manrope", sans-serif;
  color: #002449;
}

section.hero-container-plan-amigo[data-brand="creditando"] .hero-list__icon {
  color: #c6fd00;
}

section.hero-container-plan-amigo[data-brand="creditando"] .btn {
  background-color: transparent;
  color: #002449;
  border: 2px solid #002449;
  border-radius: 0;
}

/* ===== CREDITICIO BRAND ===== */
section.hero-container-plan-amigo[data-brand="crediticio"] {
  background-color: #e3f2fd;
}

section.hero-container-plan-amigo[data-brand="crediticio"] .container-col p {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

section.hero-container-plan-amigo[data-brand="crediticio"] .hero-list li {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

section.hero-container-plan-amigo[data-brand="crediticio"] .hero-list__icon {
  color: #ffa573;
}

section.hero-container-plan-amigo[data-brand="crediticio"] .btn {
  background-color: #13233a;
  color: #ffa573;
  border: 2px solid #13233a;
  border-radius: 999px;
}

/* ===== CREDITOZAS BRAND ===== */
section.hero-container-plan-amigo[data-brand="creditozas"] {
  background-color: #f2f4f4;
}

section.hero-container-plan-amigo[data-brand="creditozas"] .container-col p {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

section.hero-container-plan-amigo[data-brand="creditozas"] .hero-list li {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

section.hero-container-plan-amigo[data-brand="creditozas"] .hero-list__icon {
  color: #96b4e6;
}

section.hero-container-plan-amigo[data-brand="creditozas"] .btn {
  background-color: #000000;
  color: #96b4e6;
  border: 2px solid #000000;
  border-radius: 999px;
}

/* ===== CREDIZOOM BRAND ===== */
section.hero-container-plan-amigo[data-brand="credizoom"] {
  background-color: #f4f8f9;
}

section.hero-container-plan-amigo[data-brand="credizoom"] .container-col p {
  font-family: "AdobeClean", sans-serif;
  font-size: 20.16px;
  font-weight: 600;
  line-height: 1.3;
  color: #000000;
  text-wrap: balance;
}

section.hero-container-plan-amigo[data-brand="credizoom"] .hero-list li {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: #000000;
}

section.hero-container-plan-amigo[data-brand="credizoom"] .hero-list__icon {
  color: #4eb5a4;
}

section.hero-container-plan-amigo[data-brand="credizoom"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  border-radius: 999px !important;
  padding: 12px 25px !important;
  font-weight: 500 !important;
}

/* ===== MASTERCREDI BRAND ===== */
section.hero-container-plan-amigo[data-brand="mastercredi"] {
  background-color: #ffffff;
}

section.hero-container-plan-amigo[data-brand="mastercredi"] .container-col p {
  font-family: "AdobeClean", sans-serif;
  font-size: 22.32px;
  font-weight: 500;
  line-height: 1.3;
  color: #1a1a1a;
  text-wrap: balance;
}

section.hero-container-plan-amigo[data-brand="mastercredi"] .hero-list li {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: #1a1a1a;
}

section.hero-container-plan-amigo[data-brand="mastercredi"] .hero-list__icon {
  color: #1a1a1a;
}

section.hero-container-plan-amigo[data-brand="mastercredi"] .btn {
  background-color: #1a1a1a !important;
  border: none !important;
  color: #e2e8ed !important;
  border-radius: 10px !important;
  padding: 12px 25px !important;
  font-weight: 600 !important;
}


/* === HeroPuntosAFavor.css === */
.hero-puntos-a-favor {
}

/* Credimoney: light blue background with dark purple text */
.hero-puntos-a-favor[data-brand="credimoney"] {
    background: #c0e5eb;
    color: #2e1047;
}

.hero-puntos-a-favor[data-brand="credimoney"] h2 {
    color: #2e1047;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 39.6px;
    font-weight: 300;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="credimoney"] .hero-puntos-a-favor__list li {
    color: #2e1047;
}

/* Crediahora: dark background with off-white text */
.hero-puntos-a-favor[data-brand="crediahora"] {
    background: #1d1d1b;
    color: #f5f5f5;
}

.hero-puntos-a-favor[data-brand="crediahora"] h2 {
    color: #f5f5f5;
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="crediahora"] .hero-puntos-a-favor__list li {
    color: #f5f5f5;
}

/* OleDinero: blue background with white text */
.hero-puntos-a-favor[data-brand="oledinero"] {
    background: rgb(3, 45, 143);
    color: #ffffff;
}

.hero-puntos-a-favor[data-brand="oledinero"] h2 {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 39.6px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="oledinero"] .hero-puntos-a-favor__list li {
    color: #ffffff;
}

.hero-puntos-a-favor h2 {
    font-size: var(--text-2xl-font-size);
    line-height: var(--text-2xl-line-height);
    font-weight: var(--h2-font-weight);
    margin-bottom: 0;
}

.hero-puntos-a-favor .col {
    flex: 2;
}

.hero-puntos-a-favor .col-img {
    flex: 1;
}

.hero-puntos-a-favor .hero-container__image {
    align-self: end;
    transform: scale(1);
    transform-origin: bottom center;
}

.hero-puntos-a-favor__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-puntos-a-favor__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
    font-weight: var(--font-weight-semibold);
    text-wrap: balance;
}

.hero-puntos-a-favor__icon {
    width: 14px;
    flex-shrink: 0;
}

/* Credimoney: dark purple icons on yellow background */
.hero-puntos-a-favor[data-brand="credimoney"] .hero-puntos-a-favor__icon {
    color: rgb(46, 16, 71);
}

/* Crediahora: off-white icons on dark background */
.hero-puntos-a-favor[data-brand="crediahora"] .hero-puntos-a-favor__icon {
    color: #f5f5f5;
}

/* OleDinero: white icons on dark blue gradient */
.hero-puntos-a-favor[data-brand="oledinero"] .hero-puntos-a-favor__icon {
    color: #ffffff;
}

/* Crediator: dark green background with lime text */
.hero-puntos-a-favor[data-brand="crediator"] {
    background: #00593f;
    color: #cdf63e;
}

.hero-puntos-a-favor[data-brand="crediator"] h2 {
    color: #cdf63e;
    font-family: "Manrope", sans-serif;
    font-size: 39.6px;
    font-weight: 800;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="crediator"] .hero-puntos-a-favor__list li {
    color: #cdf63e;
}

.hero-puntos-a-favor[data-brand="crediator"] .hero-puntos-a-favor__icon {
    color: #cdf63e;
}

/* Credifix: dark navy background with blue text */
.hero-puntos-a-favor[data-brand="credifix"] {
    background: #182d52;
    color: #96b4e6;
}

.hero-puntos-a-favor[data-brand="credifix"] h2 {
    color: #96b4e6;
    font-family: "Roboto", sans-serif;
    font-size: 39.6px;
    font-weight: 300;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="credifix"] .hero-puntos-a-favor__list li {
    color: #96b4e6;
}

.hero-puntos-a-favor[data-brand="credifix"] .hero-puntos-a-favor__icon {
    color: #96b4e6;
}

/* Crediticio: dark navy background with light blue text */
.hero-puntos-a-favor[data-brand="crediticio"] {
    background: #13233a;
    color: #c5e5fc;
}

.hero-puntos-a-favor[data-brand="crediticio"] h2 {
    color: #c5e5fc;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="crediticio"] .hero-puntos-a-favor__list li {
    color: #c5e5fc;
}

.hero-puntos-a-favor[data-brand="crediticio"] .hero-puntos-a-favor__icon {
    color: #ffa573;
}

/* Creditozas: black background with light gray text */
.hero-puntos-a-favor[data-brand="creditozas"] {
    background: #000000;
    color: #e5eaea;
}

.hero-puntos-a-favor[data-brand="creditozas"] h2 {
    color: #e5eaea;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="creditozas"] .hero-puntos-a-favor__list li {
    color: #e5eaea;
}

.hero-puntos-a-favor[data-brand="creditozas"] .hero-puntos-a-favor__icon {
    color: #96b4e6;
}

/* Mastercredi: dark background with light gray text */
.hero-puntos-a-favor[data-brand="mastercredi"] {
    background: #1a1a1a;
    color: #e2e8ed;
}

.hero-puntos-a-favor[data-brand="mastercredi"] h2 {
    color: #e2e8ed;
    font-family: "Coolvetica", sans-serif !important;
    font-size: 39.6px !important;
    font-weight: normal;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="mastercredi"] .hero-puntos-a-favor__list li {
    color: #e2e8ed;
    font-family: "AdobeClean", sans-serif;
}

.hero-puntos-a-favor[data-brand="mastercredi"] .hero-puntos-a-favor__icon {
    color: #e2e8ed;
}

/* Credizoom: black background with teal text */
.hero-puntos-a-favor[data-brand="credizoom"] {
    background: #000000;
    color: #80e8d7;
}

.hero-puntos-a-favor[data-brand="credizoom"] h2 {
    color: #80e8d7;
    font-family: "AdobeClean", sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.hero-puntos-a-favor[data-brand="credizoom"] .hero-puntos-a-favor__list li {
    color: #80e8d7;
}

.hero-puntos-a-favor[data-brand="credizoom"] .hero-puntos-a-favor__icon {
    color: #80e8d7;
}


/* === styles.css === */
.hero-que-consigues {}

/* Brand-specific backgrounds using data-brand attribute */
.hero-que-consigues[data-brand="credimoney"] {
  background: #d8c7ff;
  color: rgb(46, 16, 71);
}

.hero-que-consigues[data-brand="credimoney"] h2 {
  color: rgb(46, 16, 71);
}

.hero-que-consigues[data-brand="credimoney"] .btn {
  background-color: #f8f892 !important;
  border: none !important;
  color: rgb(46, 16, 71) !important;
}

.hero-que-consigues[data-brand="credimoney"] .hero-que-consigues__icon {
  color: #f8f892;
}

/* Crediahora - white background */
.hero-que-consigues[data-brand="crediahora"] {
  background: #ffffff;
  color: var(--color-brand-primary, #1d1d1b);
}

.hero-que-consigues[data-brand="crediahora"] h2 {
  color: var(--color-brand-primary, #1d1d1b);
}

.hero-que-consigues[data-brand="crediahora"] .hero-que-consigues__list li {
  color: var(--color-brand-primary, #1d1d1b);
}

.hero-que-consigues[data-brand="crediahora"] .hero-que-consigues__icon {
  color: var(--color-brand-secondary, #a0d911);
}

/* OleDinero - gradient inverse background */
.hero-que-consigues[data-brand="oledinero"] {
  background: var(--bg-gradient-inverse-color, #022d8e);
  color: var(--bg-gradient-inverse-text-color, #ffffff);
}

.hero-que-consigues[data-brand="oledinero"] h2 {
  color: var(--bg-gradient-inverse-text-color, #ffffff);
}

.hero-que-consigues[data-brand="oledinero"] .hero-que-consigues__list li {
  color: var(--bg-gradient-inverse-text-color, #ffffff);
}

.hero-que-consigues[data-brand="oledinero"] .hero-que-consigues__icon {
  color: var(--color-brand-secondary, #d4f451);
}

/* Creditoamigo - white background */
.hero-que-consigues[data-brand="creditoamigo"] {
  background: #ffffff;
  color: #000000;
}

.hero-que-consigues[data-brand="creditoamigo"] h2 {
  color: #0000ff;
}

.hero-que-consigues[data-brand="creditoamigo"] .hero-que-consigues__list li {
  color: #000000;
}

.hero-que-consigues[data-brand="creditoamigo"] .hero-que-consigues__icon {
  color: #000000;
}

.hero-que-consigues[data-brand="creditoamigo"] .btn {
  background-color: #0000ff !important;
  border: 2px solid #0000ff !important;
  color: #ffffff !important;
  border-radius: 40px !important;
}

/* Credicheck - white background */
.hero-que-consigues[data-brand="credicheck"] {
  background: #ffffff;
  color: #000000;
}

.hero-que-consigues[data-brand="credicheck"] h2 {
  color: #76bc74;
}

.hero-que-consigues[data-brand="credicheck"] .hero-que-consigues__list li {
  color: #000000;
}

.hero-que-consigues[data-brand="credicheck"] .hero-que-consigues__icon {
  color: #000000;
}

.hero-que-consigues[data-brand="credicheck"] .btn {
  background-color: #76bc74 !important;
  border: 2px solid #76bc74 !important;
  color: #ffffff !important;
  border-radius: 40px !important;
}

/* Creditoclic - white background */
.hero-que-consigues[data-brand="creditoclic"] {
  background: #ffffff;
  color: #073034;
}

.hero-que-consigues[data-brand="creditoclic"] h2 {
  color: #073034;
}

.hero-que-consigues[data-brand="creditoclic"] .hero-que-consigues__list li {
  color: #073034;
}

.hero-que-consigues[data-brand="creditoclic"] .hero-que-consigues__icon {
  color: #7ac4ae;
}

.hero-que-consigues[data-brand="creditoclic"] .btn {
  background-color: transparent !important;
  border: 2px solid #073034 !important;
  color: #073034 !important;
  border-radius: 999px !important;
}

/* Creditopro - light gray background */
.hero-que-consigues[data-brand="creditopro"] {
  background: #f3f3f3;
  color: #333333;
}

.hero-que-consigues[data-brand="creditopro"] h2 {
  color: #333333;
}

.hero-que-consigues[data-brand="creditopro"] .hero-que-consigues__list li {
  color: #333333;
}

.hero-que-consigues[data-brand="creditopro"] .hero-que-consigues__icon {
  color: #4570ae;
}

.hero-que-consigues[data-brand="creditopro"] .btn {
  background-color: #333333 !important;
  border: 2px solid #333333 !important;
  color: #f3f3f3 !important;
  border-radius: 999px !important;
}

.hero-que-consigues .row {
  gap: 40px;
}

.hero-que-consigues .col {
  flex: 1;
}

.hero-que-consigues .col-img {
  flex: 1;
}

.hero-que-consigues h2 {
  font-size: var(--text-2xl-font-size);
  line-height: var(--text-2xl-line-height);
  font-weight: var(--h2-font-weight);
  margin-bottom: 0;
}

.hero-que-consigues .col-img img {
  max-width: 100%;
  height: auto;
}

.hero-que-consigues__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-que-consigues__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base-font-size);
  line-height: var(--text-base-line-height);
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

.hero-que-consigues__icon {
  align-self: flex-start;
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.hero-que-consigues__icon svg {
  min-width: 100%;
}

/* Credifix - white background */
.hero-que-consigues[data-brand="credifix"] {
  background: #ffffff;
  color: #182d52;
}

.hero-que-consigues[data-brand="credifix"] h2 {
  color: #182d52;
}

.hero-que-consigues[data-brand="credifix"] .hero-que-consigues__list li {
  color: #182d52;
}

.hero-que-consigues[data-brand="credifix"] .hero-que-consigues__icon {
  color: #ff0086;
}

.hero-que-consigues[data-brand="credifix"] .btn {
  background-color: #96b4e6 !important;
  border: none !important;
  color: #182d52 !important;
  border-radius: 10px !important;
}

/* Crediticio - light blue background */
.hero-que-consigues[data-brand="crediticio"] {
  background: #e3f2fd;
  color: #13233a;
}

.hero-que-consigues[data-brand="crediticio"] h2 {
  color: #13233a;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.hero-que-consigues[data-brand="crediticio"] .hero-que-consigues__list li {
  color: #13233a;
}

.hero-que-consigues[data-brand="crediticio"] .hero-que-consigues__icon {
  color: #ffa573;
}

.hero-que-consigues[data-brand="crediticio"] .btn {
  background-color: #13233a !important;
  border: none !important;
  color: #ffa573 !important;
  border-radius: 999px !important;
}

/* Creditozas - light gray background */
.hero-que-consigues[data-brand="creditozas"] {
  background: #f2f4f4;
  color: #000000;
}

.hero-que-consigues[data-brand="creditozas"] h2 {
  color: #000000;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.hero-que-consigues[data-brand="creditozas"] .hero-que-consigues__list li {
  color: #000000;
}

.hero-que-consigues[data-brand="creditozas"] .hero-que-consigues__icon {
  color: #96b4e6;
}

.hero-que-consigues[data-brand="creditozas"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #96b4e6 !important;
  border-radius: 999px !important;
}

/* Credizoom brand styles */
.hero-que-consigues[data-brand="credizoom"] {
  background: #ffffff;
  color: #000000;
}

.hero-que-consigues[data-brand="credizoom"] h2 {
  color: #000000;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
}

.hero-que-consigues[data-brand="credizoom"] .hero-que-consigues__list li {
  color: #000000;
  gap: 20px;
}

.hero-que-consigues[data-brand="credizoom"] .hero-que-consigues__icon {
  width: 20px;
  min-width: 20px;
}

.hero-que-consigues[data-brand="credizoom"] .hero-que-consigues__icon {
  color: #4eb5a4;
}

.hero-que-consigues[data-brand="credizoom"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  border-radius: 999px !important;
}

/* Mastercredi brand styles */
.hero-que-consigues[data-brand="mastercredi"] {
  background: #f7f9fa;
  color: #1a1a1a;
}

.hero-que-consigues[data-brand="mastercredi"] h2 {
  color: #1a1a1a;
  font-family: "Coolvetica", sans-serif;
  font-weight: 700;
  font-size: 39.6px !important;
}

.hero-que-consigues[data-brand="mastercredi"] .hero-que-consigues__list li {
  color: #1a1a1a;
}

.hero-que-consigues[data-brand="mastercredi"] .hero-que-consigues__icon {
  color: #1a1a1a;
}

.hero-que-consigues[data-brand="mastercredi"] .btn {
  background-color: #1a1a1a !important;
  border: none !important;
  color: #e2e8ed !important;
  border-radius: 10px !important;
}

/* Credipay brand styles */
.hero-que-consigues[data-brand="credipay"] {
  background: rgb(192, 229, 235);
  color: #1564e9;
}

.hero-que-consigues[data-brand="credipay"] h2 {
  color: #1564e9;
}

.hero-que-consigues[data-brand="credipay"] .hero-que-consigues__list li {
  color: #1564e9;
}

.hero-que-consigues[data-brand="credipay"] .hero-que-consigues__icon {
  color: #00dfdb;
}

.hero-que-consigues[data-brand="credipay"] .btn {
  background-color: #1564e9 !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 40px !important;
}


/* === styles.css === */
/* HeroQuieroUnPrestamo Component Styles */

.hero-quiero-un-prestamo.container {

  /* Base styles - ensure content background is transparent */
  &>.container__content {
    background-color: transparent !important;
  }
}

:root {

  /* Credimoney brand styles */
  & .hero-quiero-un-prestamo--credimoney {
    background-color: #c0e5eb;

    & h2 {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 39.6px;
      font-weight: 300;
      color: #2e1047;
      line-height: 39.6px;
      margin: 0;
    }

    & p {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 22.32px;
      font-weight: 700;
      color: #2e1047;
      line-height: 29.016px;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & .btn {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 16.56px;
      font-weight: 700;
      line-height: 23.184px;
      background-color: #f8f892;
      color: #2e1047;
      padding: 12px 25px;
      border-radius: 40px;
      border: 2px solid #f8f892;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Crediahora brand styles */
  & .hero-quiero-un-prestamo--crediahora {
    background-color: #ffffff;

    & h2 {
      font-family: "Montserrat", sans-serif;
      font-size: 36px;
      font-weight: 900;
      color: #1d1d1b;
      line-height: 43.2px;
      margin: 0;
    }

    & p {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      color: #1d1d1b;
      line-height: 24.336px;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & .btn {
      font-family: "Montserrat", sans-serif;
      font-size: 16.56px;
      font-weight: 700;
      line-height: 23.184px;
      background-color: #1d1d1b;
      color: #f5f5f5;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid transparent;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* OleDinero brand styles */
  & .hero-quiero-un-prestamo--oledinero {
    background-color: rgba(238, 238, 238, 0.533);
    background-image: url("/images/bg/fondo-06.png");
    background-position: 100% 50%;
    background-size: cover;

    & .container__content h2 {
      font-family: "Poppins", sans-serif;
      font-size: 39.6px;
      font-weight: 700;
      color: #022d8e !important;
      line-height: 39.6px;
      margin: 0;
    }

    & .container__content p {
      font-family: "Poppins", sans-serif;
      font-size: 20.16px;
      font-weight: 600;
      color: #022d8e !important;
      line-height: 26.208px;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Poppins", sans-serif;
      font-size: 1.15rem;
      line-height: 1.4;
      font-weight: 500;
      color: #022d8e !important;
    }

    & .btn {
      font-family: "Poppins", sans-serif;
      font-size: 16.56px;
      font-weight: 500;
      line-height: 23.184px;
      background-color: transparent;
      color: #032d8f;
      padding: 12px 25px;
      border-radius: 40px 40px 0px 40px;
      border: 2px solid #032d8f;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Credicheck brand styles */
  & .hero-quiero-un-prestamo--credicheck {
    background-color: #ffffff;

    & h2 {
      font-family: "Funnel Display", sans-serif;
      font-weight: 500;
      color: #000000;
      margin: 0;
    }

    & p {
      font-family: "Funnel Display", sans-serif;
      font-weight: 300;
      color: #000000;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Funnel Display", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .btn {
      font-family: "Funnel Display", sans-serif;
      font-weight: 400;
      background-color: #76bc74;
      color: #ffffff;
      padding: 12px 25px;
      border-radius: 40px;
      border: 2px solid #76bc74;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Creditoamigo brand styles */
  & .hero-quiero-un-prestamo--creditoamigo {
    background-color: #ffffff;

    & h2 {
      font-family: "Seitu", sans-serif;
      font-weight: 500;
      color: #000000;
      margin: 0;
    }

    & p {
      font-family: "Seitu", sans-serif;
      font-weight: 300;
      color: #000000;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Seitu", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .btn {
      font-family: "Seitu", sans-serif;
      font-weight: 400;
      background-color: #0000ff;
      color: #ffffff;
      padding: 12px 25px;
      border-radius: 40px;
      border: 2px solid #0000ff;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Creditoclic brand styles */
  & .hero-quiero-un-prestamo--creditoclic {
    background-color: #ffffff;

    & h2 {
      font-family: "Harabara", sans-serif;
      font-weight: 500;
      color: #073034;
      margin: 0;
    }

    & p {
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      color: #073034;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      color: #073034;
    }

    & .btn {
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      background-color: transparent;
      color: #073034;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid #073034;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Creditopro brand styles */
  & .hero-quiero-un-prestamo--creditopro {
    background-color: #f3f3f3;

    & h2 {
      font-family: "Open Sans", sans-serif;
      font-weight: 800;
      color: #333333;
      margin: 0;
    }

    & p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #333333;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      color: #333333;
    }

    & .btn {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      background-color: #333333;
      color: #f3f3f3;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid #333333;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Crediator brand styles */
  & .hero-quiero-un-prestamo--crediator {
    background-color: #ffffff;

    & h2 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #333333;
      margin: 0;
    }

    & p {
      font-family: "Manrope", sans-serif;
      font-weight: 500;
      color: #333333;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Manrope", sans-serif;
      font-weight: 600;
      color: #333333;
    }

    & .btn {
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      background-color: #f2d5e0;
      color: #333333;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid transparent;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Credifix brand styles */
  & .hero-quiero-un-prestamo--credifix {
    background-color: #ffffff;

    & h2 {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      color: #182d52;
      margin: 0;
    }

    & p {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      color: #182d52;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      color: #182d52;
    }

    & .btn {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      background-color: #96b4e6;
      color: #182d52;
      padding: 12px 25px;
      border-radius: 10px;
      border: 2px solid transparent;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Crediscore brand styles */
  & .hero-quiero-un-prestamo--crediscore {
    background-color: #ffffff;
    padding-top: 40px;

    & h2 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #000000;
      margin: 0;
    }

    & p {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      color: #000000;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Open Sans", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .btn {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      background-color: #907ee8;
      color: #ffffff;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid transparent;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Creditando brand styles */
  & .hero-quiero-un-prestamo--creditando {
    background-color: #ffffff;

    & h2 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #002449;
      margin: 0;
    }

    & p {
      font-family: "Manrope", sans-serif;
      font-weight: 500;
      color: #002449;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Manrope", sans-serif;
      font-weight: 600;
      color: #002449;
    }

    & .btn {
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      background-color: transparent;
      color: #002449;
      padding: 12px 25px;
      border-radius: 0;
      border: 2px solid #002449;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Crediticio brand styles */
  & .hero-quiero-un-prestamo--crediticio {
    background-color: #e3f2fd;

    & h2 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #13233a;
      margin: 0;
    }

    & p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #13233a;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      color: #13233a;
    }

    & .btn {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      background-color: #13233a;
      color: #ffa573;
      padding: 12px 25px;
      border-radius: 40px;
      border: 2px solid #13233a;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      max-width: 631px;
      max-height: 600px;
      object-fit: contain;
      margin: 0 0 0 auto;
    }
  }

  /* Creditozas brand styles */
  & .hero-quiero-un-prestamo--creditozas {
    background-color: rgba(229, 234, 234, 0.5);

    & h2 {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #000000;
      margin: 0;
    }

    & p {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      color: #000000;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "Manrope", sans-serif;
      font-weight: 400;
      color: #000000;
    }

    & .btn {
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      background-color: #000000;
      color: #96b4e6;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid #000000;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }

  /* Credizoom brand styles */
  & .hero-quiero-un-prestamo--credizoom {
    background-color: #ffffff;

    & h2 {
      color: #000000 !important;
      margin: 0;
    }

    & p {
      font-family: "AdobeClean", sans-serif;
      font-weight: 400;
      color: #000000;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .btn {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      background-color: #000000;
      color: #4eb5a4;
      padding: 12px 25px;
      border-radius: 999px;
      border: 2px solid #000000;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin: 0;
      padding: 0;
      margin-left: auto;
      margin-right: 0;
    }

    & .section-banks {
      background: transparent;
      border-radius: 0;
      padding: 15px 0;
    }
  }

  /* Mastercredi brand styles */
  & .hero-quiero-un-prestamo--mastercredi {
    background-color: #f7f9fa;

    & h2 {
      font-family: "Coolvetica", sans-serif !important;
      font-size: 39.6px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
    }

    & p {
      font-family: "AdobeClean", sans-serif;
      font-size: 22.32px;
      font-weight: 400;
      color: #1a1a1a;
      margin: 0;
    }

    & ul {
      margin: 0;
    }

    & li {
      font-family: "AdobeClean", sans-serif;
      font-weight: 600;
      color: #1a1a1a;
    }

    & .btn {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      background-color: #1a1a1a;
      color: #e2e8ed;
      padding: 12px 25px;
      border-radius: 10px;
      border: none;
    }

    & .col-img {
      place-items: center end;
    }

    & .col-img img {
      margin-left: auto;
      margin-right: 0;
    }
  }
}


/* === styles.css === */
/**
 * HeroSalirSituaciones Component Styles
 *
 * Multi-brand styles for hero "salir de estas situaciones" section
 */

.hero-salir-situaciones {
  & .col-img {
    flex: 1.8;
  }

  & h2 {
    font-size: 2rem;
    line-height: 1.2;
  }
}

@media (width >=1024px) {
  .hero-salir-situaciones {
    & h2 {
      line-height: 1;
    }
  }
}

/* ===== CREDIMONEY ===== */
.hero-salir-situaciones[data-brand="credimoney"],
.hero-salir-situaciones--credimoney {
  & h2 {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: #2e1047;
  }
}

/* Credimoney with bg-gradient-inverse: light purple background */
.hero-salir-situaciones[data-brand="credimoney"].bg-gradient-inverse,
.hero-salir-situaciones--credimoney.bg-gradient-inverse {
  --container-background: #d8c7ff !important;
  background: #d8c7ff !important;

  & h2 {
    color: #2e1047 !important;
  }

  & .hero-list li {
    color: #2e1047 !important;
  }

  & .hero-list__icon {
    --list-icon-color: #f8f892 !important;
    color: #f8f892 !important;
  }

  & .btn {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #2e1047 !important;
    border-radius: 40px !important;
  }
}

/* ===== CREDIAHORA ===== */
.hero-salir-situaciones[data-brand="crediahora"],
.hero-salir-situaciones--crediahora {
  & h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    color: #1d1d1b;
  }
}

/* Crediahora with gray-bg */
.hero-salir-situaciones[data-brand="crediahora"].gray-bg,
.hero-salir-situaciones--crediahora.gray-bg {
  --container-background: #f5f5f5 !important;
  background: #f5f5f5 !important;

  & h2 {
    color: #1d1d1b !important;
  }

  & .hero-list li {
    color: #1d1d1b !important;
  }

  & .hero-list__icon {
    --list-icon-color: #95c11f !important;
    color: #95c11f !important;
  }

  & .btn {
    background-color: #1d1d1b !important;
    border-color: #1d1d1b !important;
    color: #f5f5f5 !important;
    border-radius: 999px !important;
  }
}

/* ===== OLEDINERO ===== */
.hero-salir-situaciones[data-brand="oledinero"],
.hero-salir-situaciones--oledinero {
  & h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #ffffff;
  }
}

/* OleDinero with secondary-bg */
.hero-salir-situaciones[data-brand="oledinero"].secondary-bg,
.hero-salir-situaciones--oledinero.secondary-bg {
  --container-background: #d7ff7b !important;
  background: #d7ff7b !important;

  & h2 {
    color: #032d8f !important;
  }

  & .hero-list li {
    color: #032d8f !important;
  }

  & .hero-list__icon {
    --list-icon-color: #032d8f !important;
    color: #032d8f !important;
  }

  & .btn {
    background-color: transparent !important;
    border: 2px solid #032d8f !important;
    color: #032d8f !important;
    border-radius: 40px 40px 0px 40px !important;
  }
}

/* ===== CREDITOAMIGO ===== */
.hero-salir-situaciones[data-brand="creditoamigo"],
.hero-salir-situaciones--creditoamigo {
  & h2 {
    font-family: "Seitu", sans-serif;
    font-weight: 500;
    color: #0000ff;
  }

  & .hero-list li {
    color: #000000;
  }

  & .hero-list__icon {
    --list-icon-color: #000000;
    color: #000000;
  }

  & .btn {
    background-color: #0000ff;
    border-color: #0000ff;
    color: #ffffff;
    border-radius: 40px;
  }
}

/* ===== CREDICHECK ===== */
.hero-salir-situaciones[data-brand="credicheck"],
.hero-salir-situaciones--credicheck {
  & h2 {
    font-family: "Funnel Display", sans-serif;
    font-weight: 500;
    color: #76bc74;
  }

  & .hero-list li {
    color: #000000;
  }

  & .hero-list__icon {
    --list-icon-color: #000000;
    color: #000000;
  }

  & .btn {
    background-color: #76bc74;
    border-color: #76bc74;
    color: #ffffff;
    border-radius: 40px;
  }
}

/* ===== CREDITOCLIC ===== */
.hero-salir-situaciones[data-brand="creditoclic"],
.hero-salir-situaciones--creditoclic {
  & h2 {
    font-family: "Harabara", sans-serif;
    font-weight: 500;
    color: #073034;
  }
}

/* Creditoclic with gray-bg-right */
.hero-salir-situaciones[data-brand="creditoclic"].gray-bg-right,
.hero-salir-situaciones--creditoclic.gray-bg-right {
  --container-background: #eaeeef !important;
  background: #eaeeef !important;

  & h2 {
    color: #073034 !important;
  }

  & .hero-list li {
    color: #073034 !important;
  }

  & .hero-list__icon {
    --list-icon-color: #7ac4ae !important;
    color: #7ac4ae !important;
  }

  & .btn {
    background-color: transparent !important;
    border: 2px solid #073034 !important;
    color: #073034 !important;
    border-radius: 999px !important;
  }
}

/* ===== CREDITOPRO ===== */
.hero-salir-situaciones[data-brand="creditopro"],
.hero-salir-situaciones--creditopro {
  & h2 {
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    color: #333333;
  }

  & .hero-list li {
    color: #333333;
  }

  & .hero-list__icon {
    --list-icon-color: #4570ae;
    color: #4570ae;
  }

  & .btn {
    background-color: #333333;
    border-color: #333333;
    color: #f3f3f3;
    border-radius: 999px;
  }
}

/* ===== CREDITOZAS ===== */
.hero-salir-situaciones[data-brand="creditozas"],
.hero-salir-situaciones--creditozas {
  --container-background: #ffffff !important;
  background-color: #ffffff !important;

  & h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    color: #000000;
  }

  & .hero-list li {
    color: #000000;
  }

  & .hero-list__icon {
    --list-icon-color: #96b4e6;
    color: #96b4e6;
  }

  & .btn {
    background-color: #000000;
    border-color: #000000;
    color: #96b4e6;
    border-radius: 999px;
  }
}

@media (width >=1024px) {

  /* Credimoney desktop */
  .hero-salir-situaciones[data-brand="credimoney"] h2,
  .hero-salir-situaciones--credimoney h2 {
    font-size: 2.75rem;
  }

  /* Crediahora desktop */
  .hero-salir-situaciones[data-brand="crediahora"] h2,
  .hero-salir-situaciones--crediahora h2 {
    font-size: 2.5rem;
  }

  /* OleDinero desktop */
  .hero-salir-situaciones[data-brand="oledinero"] h2,
  .hero-salir-situaciones--oledinero h2 {
    font-size: 2.75rem;
  }

  /* Creditoamigo desktop */
  .hero-salir-situaciones[data-brand="creditoamigo"] h2,
  .hero-salir-situaciones--creditoamigo h2 {
    font-size: 2.5rem;
  }

  /* Credicheck desktop */
  .hero-salir-situaciones[data-brand="credicheck"] h2,
  .hero-salir-situaciones--credicheck h2 {
    font-size: 2.5rem;
  }

  /* Creditoclic desktop */
  .hero-salir-situaciones[data-brand="creditoclic"] h2,
  .hero-salir-situaciones--creditoclic h2 {
    font-size: 2.5rem;
  }

  /* Creditopro desktop */
  .hero-salir-situaciones[data-brand="creditopro"] h2,
  .hero-salir-situaciones--creditopro h2 {
    font-size: 2.5rem;
  }
}

/* ===== CREDIZOOM ===== */
.hero-salir-situaciones[data-brand="credizoom"],
.hero-salir-situaciones--credizoom {
  --container-background: #ffffff !important;
  background: #ffffff !important;

  & h2 {
    color: #000000 !important;
  }

  & .hero-list li {
    color: #000000 !important;
  }

  & .hero-list__icon {
    --list-icon-color: #4eb5a4 !important;
    color: #4eb5a4 !important;
  }

  & .btn {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #4eb5a4 !important;
    border-radius: 999px !important;
  }
}

/* ===== MASTERCREDI ===== */
:root[data-brand="mastercredi"] .hero-salir-situaciones.banner-bg,
.hero-salir-situaciones[data-brand="mastercredi"],
.hero-salir-situaciones--mastercredi {
  --container-background: #ffffff !important;
  --container-title-h1-color: #1a1a1a !important;
  --container-title-h2-color: #1a1a1a !important;
  --container-text-color: #1a1a1a !important;
  --container-text-strong-color: #1a1a1a !important;
  background: #ffffff !important;

  & h2 {
    font-family: "Coolvetica", sans-serif !important;
    font-size: 39.6px !important;
    font-weight: normal !important;
    color: #1a1a1a !important;
  }

  & .hero-list li {
    color: #1a1a1a !important;
    font-family: "AdobeClean", sans-serif;
  }

  & .hero-list__icon {
    --list-icon-color: #1a1a1a !important;
    color: #1a1a1a !important;
  }

  & .btn {
    background-color: #1a1a1a !important;
    border: none !important;
    color: #e2e8ed !important;
    border-radius: 10px !important;
  }
}


/* === styles.css === */
:root {
  & .hero-sobre-nosotros {
    max-width: var(--body-max-width, 80rem);
    margin: 0 auto;
    margin-top: 1rem;
    display: grid;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    align-items: initial;
    padding: 2rem;
    gap: 3rem;
  }

  & .hero-sobre-nosotros__text {
    max-width: 608.4px;
    color: #333;
  }

  & .hero-sobre-nosotros__text p {
    line-height: 24px;
    font-size: 16.56px;
    margin-bottom: 10px;
  }

  & .hero-sobre-nosotros__text-bold {
    font-weight: 700;
  }

  & .hero-sobre-nosotros__button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
  }

  & .hero-sobre-nosotros__button {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    text-align: center;
  }

  /* Credimoney styles */
  & .hero-sobre-nosotros--credimoney {
    & .hero-sobre-nosotros__button {
      background-color: #f8f892;
      color: #2e1047;
      border: 2px solid #f8f892;
      border-radius: 40px;
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      padding: 8px 25px;

      &:hover {
        background-color: #f0e657;
        border-color: #f0e657;
      }
    }
  }

  /* Crediahora styles */
  & .hero-sobre-nosotros--crediahora {
    & .hero-sobre-nosotros__button {
      background-color: #1d1d1b;
      color: #f5f5f5;
      border: 2px solid transparent;
      border-radius: 999px;
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      padding: 14px 40px;

      &:hover {
        background-color: #000000;
      }
    }
  }

  /* OleDinero styles */
  & .hero-sobre-nosotros--oledinero {
    & .hero-sobre-nosotros__button {
      background-color: rgb(255, 255, 255);
      color: rgb(3, 45, 143);
      border: 2px solid rgb(3, 45, 143);
      border-radius: 40px 40px 0px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 14.4px;
      padding: 8px 25px;

      &:hover {
        background-color: rgb(3, 45, 143);
        color: #ffffff;
      }
    }
  }

  /* Creditoamigo styles - blue filled button */
  & .hero-sobre-nosotros--creditoamigo {
    & .hero-sobre-nosotros__button {
      background-color: rgb(0, 0, 255);
      color: rgb(255, 255, 255);
      border: 2px solid rgb(0, 0, 255);
      border-radius: 40px;
      font-family: Seitu, sans-serif;
      font-weight: 400;
      font-size: 16px;
      padding: 8px 25px;

      &:hover {
        background-color: rgb(0, 0, 200);
        border-color: rgb(0, 0, 200);
      }
    }
  }

  /* Credicheck styles - blue filled button */
  & .hero-sobre-nosotros--credicheck {
    & .hero-sobre-nosotros__button {
      background-color: #76bc74;
      color: rgb(255, 255, 255);
      border: 2px solid #76bc74;
      border-radius: 40px;
      font-family: Funnel Display, sans-serif;
      font-weight: 400;
      font-size: 16px;
      padding: 8px 25px;

      &:hover {
        background-color: #b9dab2;
        border-color: #b9dab2;
      }
    }
  }

  /* Creditoclic styles - outlined button */
  & .hero-sobre-nosotros--creditoclic {
    & .hero-sobre-nosotros__button {
      background-color: transparent;
      color: rgb(7, 48, 52);
      border: 2px solid rgb(7, 48, 52);
      border-radius: 999px;
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      font-size: 14.4px;
      padding: 12px 25px;

      &:hover {
        background-color: rgb(7, 48, 52);
        color: #ffffff;
      }
    }
  }

  /* Creditopro styles - dark filled button */
  & .hero-sobre-nosotros--creditopro {
    & .hero-sobre-nosotros__button {
      background-color: rgb(51, 51, 51);
      color: rgb(243, 243, 243);
      border: 2px solid rgb(51, 51, 51);
      border-radius: 999px;
      font-family: "Open Sans", sans-serif;
      font-size: 14.4px;
      font-weight: 700;
      padding: 12px 25px;

      &:hover {
        background-color: rgb(30, 30, 30);
        border-color: rgb(30, 30, 30);
      }
    }
  }

  /* Crediator styles - light pink button */
  & .hero-sobre-nosotros--crediator {
    & .hero-sobre-nosotros__button {
      background-color: #f2d5e0;
      color: #333333;
      border: 2px solid transparent;
      border-radius: 999px;
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      padding: 14px 40px;

      &:hover {
        background-color: #e8c0cf;
      }
    }
  }

  /* Credifix styles - light blue button */
  & .hero-sobre-nosotros--credifix {
    & .hero-sobre-nosotros__button {
      background-color: #96b4e6;
      color: #182d52;
      border: 2px solid transparent;
      border-radius: 10px;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 14.4px;
      padding: 14px 40px;

      &:hover {
        background-color: #7ea2db;
      }
    }
  }

  /* Crediscore styles - purple filled button */
  & .hero-sobre-nosotros--crediscore {
    & .hero-sobre-nosotros__button {
      background-color: #907ee8;
      color: #ffffff;
      border: 2px solid transparent;
      border-radius: 999px;
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      padding: 14px 40px;

      &:hover {
        background-color: #7a68d0;
      }
    }
  }

  /* Creditando styles - outlined dark blue button */
  & .hero-sobre-nosotros--creditando {
    & .hero-sobre-nosotros__button {
      background-color: transparent;
      color: #002449;
      border: 2px solid #002449;
      border-radius: 0px;
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      padding: 12px 25px;

      &:hover {
        background-color: #002449;
        color: #ffffff;
      }
    }
  }

  /* Crediticio styles - dark blue button with orange text */
  & .hero-sobre-nosotros--crediticio {
    & .hero-sobre-nosotros__button {
      background-color: #13233a;
      color: #ffa573;
      border: 2px solid #13233a;
      border-radius: 40px;
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      font-size: 14.4px;
      padding: 8px 25px;

      &:hover {
        background-color: #0d1829;
        border-color: #0d1829;
      }
    }
  }

  /* Creditozas styles - black button with light blue text */
  & .hero-sobre-nosotros--creditozas {
    & .hero-sobre-nosotros__button {
      background-color: #000000;
      color: #96b4e6;
      border: 2px solid #000000;
      border-radius: 999px;
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      padding: 12px 25px;

      &:hover {
        background-color: #333333;
        border-color: #333333;
      }
    }
  }

  /* Credizoom styles - black button with teal text */
  & .hero-sobre-nosotros--credizoom {
    & .hero-sobre-nosotros__button {
      background-color: #000000;
      color: #4eb5a4;
      border: 2px solid #000000;
      border-radius: 999px;
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      font-size: 14.4px;
      padding: 12px 25px;

      &:hover {
        background-color: #333333;
        border-color: #333333;
      }
    }
  }

  /* Mastercredi styles - dark button with off-white text */
  & .hero-sobre-nosotros--mastercredi {
    /* #7046: No padding top/bottom */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    & .hero-sobre-nosotros__button {
      background-color: #1a1a1a;
      color: #e2e8ed;
      border: none;
      border-radius: 10px;
      font-family: "AdobeClean", sans-serif;
      font-weight: 600;
      font-size: 14.4px;
      padding: 12px 25px;

      &:hover {
        background-color: #333333;
      }
    }
  }

    /* Credisolve styles - light pink button */
  & .hero-sobre-nosotros--credisolve {
    & .hero-sobre-nosotros__button {
      border: 2px solid transparent;
      padding: var(--btn-padding);
      border-radius: var(--btn-border-radius, 999px);
      background-color: var(--color-brand-secondary, #162b36);
      color: #ffffff;
      border-color: var(--color-brand-secondary, transparent);
      &:hover {
        background-color: var(--color-brand-secondary, #162b36);
      }
    }
  }

   /* Credital styles - light pink button */
  & .hero-sobre-nosotros--credital {
    & .hero-sobre-nosotros__button {
      border: 2px solid transparent;
      padding: var(--btn-padding);
      border-radius: var(--btn-border-radius, 999px);
      background-color: var(--color-brand-secondary, #162b36);
      color: #ffffff;
      border-color: var(--color-brand-secondary, transparent);
      &:hover {
        background-color: var(--color-brand-secondary, #162b36);
      }
    }
  }

     /* Credipay styles - light pink button */
  & .hero-sobre-nosotros--credipay {
    & .hero-sobre-nosotros__button {
      border: 2px solid transparent;
      padding: var(--btn-padding);
      border-radius: var(--btn-border-radius, 999px);
      background-color: var(--color-brand-primary, #162b36);
      color: #ffffff;
      border-color: var(--color-brand-primary, transparent);
      &:hover {
        background-color: var(--color-brand-primary, #162b36);
      }
    }
  }

      /* Creditoplan styles - light pink button */
  & .hero-sobre-nosotros--creditoplan {
    & .hero-sobre-nosotros__button {
      border: 2px solid transparent;
      padding: var(--btn-padding);
      border-radius: var(--btn-border-radius, 999px);
      background-color: var(--color-brand-secondary, #162b36);
      color: #ffffff;
      border-color: var(--color-brand-secondary, transparent);
      &:hover {
        background-color: var(--color-brand-secondary, #162b36);
      }
    }
  }
}

/* BREAKPOINTS*/
/* FOR TABLET AND DESKTOP*/
@media (min-width: 800px) {
  :root {
    & .hero-sobre-nosotros {
      grid-auto-flow: column;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 3rem;
      padding: 100px var(--body-padding-horizontal, 2rem);
    }

    & .hero-sobre-nosotros__text {
      order: -1;
    }

    & .hero-sobre-nosotros__text p {
      margin-bottom: 10px;
    }
  }
}

/* Matches Container's .container__content and HeaderNav (0px here at this
   breakpoint, verified against oledinero.es) - once max-width + auto margin
   already center this box, extra horizontal padding just pushes the text/
   video in further than the page header above, breaking alignment. */
@media (min-width: 1024px) {
  :root {
    & .hero-sobre-nosotros {
      padding-left: 0;
      padding-right: 0;
    }
  }
}


/* === credital-page.css === */
/* CrediTal page-level styles
   Specific layout overrides to ensure it's different from Creditoplan.
*/

:root[data-brand="credital"] .page-home .page-header .hero-container {
  --row-image-column-flex: 1.2;
  --hero-header-image-margin-bottom: 0;
  --hero-header-image-transform: none;
  --row-image-column-place-items: center right;
  background-color: #eaeeef; /* Light gray-blue from original */
}

:root[data-brand="credital"] .page-home .hero-container-panel-control {
  /* Give it its own personality */
  --hero-buttons-flex-direction: row;
  border-left: 8px solid #A318E1; 
  padding-left: 20px;
}

:root[data-brand="credital"] .page-home .hero-container-panel-control .hero-container__image {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

@media (min-width: 1024px) {
  :root[data-brand="credital"] .page-home .page-header .container-row {
    gap: 80px; /* More breathing room */
  }
}

/* End of credital page-level styles */


/* === creditoplan-page.css === */
/* Creditoplan page-level styles (converted to plain CSS)
   Adapted from creditoplan.es/src/pages/1-Home/styles.css
*/

:root[data-brand="creditoplan"] .page-home .page-header .hero-container {
  --row-image-column-flex: 1;
  --hero-header-image-margin-bottom: 0;
  --hero-header-image-transform: none;
  --row-image-column-place-items: end center;
}

:root[data-brand="creditoplan"] .page-home .hero-container-panel-control {
  --hero-buttons-flex-direction: column;
  position: relative;
}

:root[data-brand="creditoplan"] .page-home .hero-container-panel-control .container-col {
  flex-basis: 40%;
}

:root[data-brand="creditoplan"] .page-home .hero-container-panel-control .container-col-img {
  place-items: center flex-end;
  flex-basis: 60%;
  padding-bottom: 40px;
}

:root[data-brand="creditoplan"] .page-home .hero-container-panel-control .hero-container__image {
  width: 100%;
  max-height: none;
  margin-top: 0;
}

@media (min-width: 768px) {
  :root[data-brand="creditoplan"] .page-home .page-header .hero-container {
    --row-image-column-place-items: end flex-start;
  }

  :root[data-brand="creditoplan"] .page-home .hero-container-panel-control .hero-container__image {
    margin-top: -120px;
  }
}

@media (min-width: 1024px) {
  :root[data-brand="creditoplan"] .page-home .page-header .hero-container {
    --hero-header-image-margin-bottom: 0;
    --row-image-column-flex: 2;
  }

  :root[data-brand="creditoplan"] .page-home .hero-container-panel-control .container-col-img {
    padding-bottom: 0;
  }
}

@media (min-width: 1300px) {
  :root[data-brand="creditoplan"] .page-home .page-header .hero-container {
    --hero-header-image-transform: none;
  }
}

:root[data-brand="creditoplan"] .page-home .page-header .hero-container {
  background: transparent;
}

:root[data-brand="creditoplan"] .page-home .page-header .hero-container .row .col-img {
  flex: var(--row-image-column-flex);
}

:root[data-brand="creditoplan"] .page-home .page-header .hero-container .row .hero-container__image {
  transform: var(--hero-header-image-transform);
  transform-origin: center bottom;
  margin-bottom: var(--hero-header-image-margin-bottom);
  margin-left: 0;
  margin-right: 0;
}

:root[data-brand="creditoplan"] .page-home .hero-container-panel-control .col-img {
  place-items: center start;
}

/* End of creditoplan page-level styles */


/* === styles.css === */
/* HomeHeroHeader Component Styles */

:root {
  & .hero-container-header {
    /* Override container background to allow brand background to show through */
    --container-background: transparent;

    /* Themeable accents for the mobile home pattern (overridable per brand) */
    --hero-accent-color: var(--color-primary, #f55f99);
    --hero-badge-bg: #eef7ef;
    --hero-badge-color: #333333;
    --hero-badge-highlight: #1f9d57;
  }
}

/* Accent period (or any <span class="home-hero-header__accent">) in the title */
.home-hero-header__title .home-hero-header__accent {
  color: var(--hero-accent-color);
}

/* ============================================================
   MOBILE HOME PATTERN — badge · checklist · Trustpilot · disclaimer
   Fase 1: SCOPED TO CREDIATOR ONLY so every other brand renders exactly
   as before. The new pieces are hidden everywhere by default and revealed
   for crediator on mobile; desktop keeps the existing hero untouched.
   To roll this out to all brands (Fase 2), drop the `--crediator` scoping.
   ============================================================ */
.home-hero-header__badge,
.home-hero-header__trustpilot,
.home-hero-header__disclaimer,
.home-hero-header__cta-text--mobile {
  display: none;
}

@media (max-width: 1023px) {
  /* Text-only hero on mobile: drop the image and the subtitle */
  .hero-container-header .col-img {
    display: none !important;
  }

  .hero-container-header .hero-container-header__subtitle {
    display: none;
  }

  /* Reduce the top spacing (the generic mobile rule sets 40px). */
  :root .hero-container-header.hero-container-header .container-col {
    padding-top: 16px !important;
  }

  /* Free-trial pill (centred to match the full-width CTA) */
  .hero-container-header .home-hero-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    margin-bottom: 30px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--hero-badge-bg);
    color: var(--hero-badge-color);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.2;
    width: 100%;
    justify-content: center;
  }

  .home-hero-header__badge-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .home-hero-header__badge .home-hero-header__badge-highlight,
  .home-hero-header__badge strong {
    color: var(--hero-badge-highlight);
    font-weight: 700;
  }

  /* Checklist: lime check-in-a-circle instead of the brand shape icon,
     with a visible divider line between the 4 items */
  .hero-container-header .hero-list {
    display: grid;
    gap: 0;
    margin: 4px 0;
  }

  .hero-container-header .hero-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    line-height: 1.35;
    padding: 13px 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .hero-container-header .hero-list li:last-child {
    border-bottom: 0;
  }

  .home-hero-header--crediator .hero-list__icon {
    display: none; /* hide the brand shape icon on mobile */
  }

  .home-hero-header--crediator .hero-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23cdf63e'/><path d='M17.5 8.5l-6 6-3-3' stroke='%231d1d1b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Trustpilot block (bigger stars) */
  .hero-container-header .home-hero-header__trustpilot {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .hero-container-header .home-hero-header__trustpilot .trustpilot-rating__stars-img {
    width: 175px;
  }

  .hero-container-header .home-hero-header__trustpilot .trustpilot-rating__label {
    font-size: 16px;
  }

  /* Full-width primary CTA */
  .hero-container-header .hero-container__buttons {
    width: 100%;
  }

  .hero-container-header .hero-container__buttons .btn {
    width: 100%;
    text-align: center;
    padding: 17px 18px;
    border-radius: 999px;
    font-size: 18.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Saturated-pink CTA. Compound selector (both container classes) to
     outrank the desktop crediator button rule, which is nested under :root. */
  :root .home-hero-header--crediator.hero-container-header .hero-container__buttons .btn {
    background-color: var(--color-primary, #f55f99) !important;
    border-color: var(--color-primary, #f55f99) !important;
    color: #ffffff !important;
  }

  /* Swap the CTA label to the mobile-only text */
  .hero-container-header .home-hero-header__cta-text--desktop {
    display: none;
  }

  .hero-container-header .home-hero-header__cta-text--mobile {
    display: inline;
  }

  /* Less side margin: the crediator desktop content padding (80/30px) pushes
     the hero content ~100px from the left edge on mobile. Collapse it and let
     the column's own inset (~20px) provide the side margin. (Compound selector
     with .hero-container-header to outrank the desktop crediator rule.) */
  :root .hero-container-header.hero-container-header.hero-image-full > .container__content {
    padding-left: 0;
    padding-right: 0;
  }

  /* Bigger headline on mobile, pulled closer to the pill. Client asked to
     reduce the title<->pill gap further on mobile (issue #2). */
  :root .hero-container-header.hero-container-header .home-hero-header__title {
    font-size: clamp(2.15rem, 9vw, 2.6rem);
    line-height: 1.15;
    margin-top: -28px;
  }

  /* Disclaimer under the CTA */
  .hero-container-header .home-hero-header__disclaimer {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
    font-size: 15px;
    color: #6b6b6b;
  }
}

/* Pantallas muy angostas (<320px, ej. iPhone SE en 319px visible por el
   scrollbar de Safari): el boton CTA con white-space:nowrap no entra con
   el font-size de 18.5px que usamos para el resto del rango movil y
   desborda horizontalmente. Reducimos solo aqui para no achicar el boton
   en telefonos/tablets mas anchos donde si entra. */
@media (max-width: 320px) {
  .hero-container-header .hero-container__buttons .btn {
    font-size: 15.5px !important;
  }
}

.home-hero-header__title {
  margin-bottom: 0;
  text-align: left;
  text-wrap: balance;
  /* Scale down on mobile — desktop size set per brand */
  font-size: clamp(1.6rem, 6vw, 2.7rem);
  line-height: 1.2;
}

.home-hero-header__subtitle {
  margin-bottom: 0;
  font-weight: var(--font-weight-semibold, 600);
  font-size: clamp(0.85rem, 2.5vw, 1.15rem);
}

/* Mobile: hero image should not overflow */
@media (max-width: 1023px) {
  .hero-container-header .col-img img {
    max-height: 350px;
    width: auto;
  }

  .hero-container-header .container-col {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Credimoney brand styles */
.home-hero-header--credimoney {
  & .container__content {
      & h1{
        font-weight: 500;
        margin-bottom: 0;
        font-size: 3rem;

        & em{
          color:var(--color-brand-primary);
        }
      }

      & .home-hero-header__subtitle {
        font-weight: 700;
        font-size: var(--font-size-xl);
      }


    } 
}

/* Crediahora brand styles */
.home-hero-header--crediahora {
    background: var(--color-brand-primaryLight);
    & .container__content {
      & h1{
        font-weight: 800;
        margin-bottom: 0;
        font-size: 3rem;

        & em{
          color:var(--color-brand-primary);
        }
      }

      & .home-hero-header__subtitle {
        font-weight: 500;
        font-size: var(--font-size-xl);
      }


      & .col-img {
        place-items: end center !important;
        padding: 0 !important;
        margin-bottom: calc(-1 * var(--container-content-padding-vertical));

        & img {
          max-height: none;
          height: 100%;
          object-fit: contain;
          object-position: bottom center;
        }
      }
    } 
}

/* OleDinero brand styles - uses light colors for dark background */
:root {
  & .home-hero-header--oledinero {
    /* Override container text colors for dark background */
    --container-title-h1-color: #d7ff7b;
    --container-text-color: #ffffff;

    & .home-hero-header__title {
      font-family: "Poppins", sans-serif;
      font-size: clamp(1.6rem, 6vw, 43.2px);
      font-weight: 700;
      line-height: 1.2;
      color: #d7ff7b;
    }

    & .home-hero-header__subtitle {
      color: #ffffff;
      font-size: var(--font-size-xl);
    }
  }
}

/* CreditoAmigo brand styles */
.home-hero-header--creditoamigo {
  & .home-hero-header__title {
    font-family: "Seitu", sans-serif;
    font-size: clamp(1.6rem, 6vw, 48px);
    font-weight: 500;
    line-height: 1.2;
    color: #0000FF;
  }

  & .home-hero-header__subtitle {
    color: #1D2C56;
    font-size: var(--font-size-xl);
  }
}

/* CreditoClic brand styles */
.home-hero-header--creditoclic {
  & .home-hero-header__title {
    font-family: "Harabara", sans-serif;
    font-size: clamp(1.6rem, 6vw, 43.2px);
    font-weight: 700;
    line-height: 1.2;
    color: #073034;
  }

  & .home-hero-header__subtitle {
    color: #073034;
    font-size: var(--font-size-xl);
  }

  & .hero-container__buttons .btn {
    background-color: transparent !important;
    border: 2px solid rgb(7, 48, 52) !important;
    color: rgb(7, 48, 52) !important;
  }
}

/* Credicheck brand styles */
.home-hero-header--credicheck {
  & .home-hero-header__title {
    font-family: "Funnel Display", sans-serif;
    font-size: clamp(1.6rem, 6vw, 48px);
    font-weight: 500;
    line-height: 1.2;
    color: #76bc74;
  }

  & .home-hero-header__subtitle {
    color: #b9dab2;
    font-size: var(--font-size-xl);
  }
}


/* CreditoPRO brand styles - light text on blue background */
:root {
  & .home-hero-header--creditopro {
    /* Override container text colors for blue background */
    --container-title-h1-color: rgb(243, 243, 243);
    --container-text-color: rgb(243, 243, 243);

    & .home-hero-header__title {
      font-family: "Open Sans", sans-serif;
      font-size: clamp(1.6rem, 6vw, 43.2px);
      font-weight: 700;
      line-height: 1.2;
      color: rgb(243, 243, 243);
    }

    & .home-hero-header__subtitle {
      color: rgb(243, 243, 243);
      font-size: var(--font-size-xl);
    }

    & .hero-container__buttons .btn {
      background-color: #333333 !important;
      border-color: #333333 !important;
      color: rgb(243, 243, 243) !important;
    }

    & .hero-container__buttons .btn:hover {
      background-color: #1B4A82 !important;
      border-color: #1B4A82 !important;
    }

    & .hero-list li {
      color: rgb(243, 243, 243);
    }
  }
}

/* Crediator brand styles */
:root .home-hero-header--crediator {
  --container-title-h1-color: #333333;
  & .container__content {
      & .col-img {
          place-items: end center !important;
          padding: 0 !important;
          margin-bottom: calc(-1 * var(--container-content-padding-vertical));
      }
  }
  & .home-hero-header__title {
    font-weight: 800;
    margin:0;
  }

  & .home-hero-header__subtitle {
    font-size: 22.32px;
    font-weight: 600;
    line-height: 29.016px;
    margin: 0;
  }

  & .hero-list {
    margin: 0;
  }

  & .hero-container__buttons .btn {
    background-color: #f2d5e0 !important;
    border-color: #f2d5e0 !important;
    color: #333333 !important;
    font-size: 16.56px;
  }

  & .container-col {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  & .container-row {
    gap: 50px;
  }

  &.hero-image-full .col-img {
    flex: 1;
  }

}

/* Credifix brand styles */
:root .home-hero-header--credifix {
  --container-title-h1-color: var(--color-brand-secondary);

  & .home-hero-header__title {
    font-weight: 400 !important;
    margin-bottom: 0;
  }

  & .home-hero-header__subtitle {
    font-weight: 500 !important;
    color: var(--color-brand-secondary);
    font-size: var(--font-size-xl);
  }

  & .hero-container__buttons .btn {
    background-color: #96b4e6 !important;
    border-color: #96b4e6 !important;
    color: var(--color-brand-secondary) !important;
  }

  /* Image flush with bottom border of container */
  & .col-img {
    place-items: end flex-start !important;
    padding: 0 !important;
    margin-bottom: calc(-1 * var(--container-content-padding-vertical));
  }
}

/* Crediscore brand styles */
:root .home-hero-header--crediscore {
  --container-title-h1-color: #000000;

  & .home-hero-header__title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0;
  }

  & .home-hero-header__subtitle {
    font-weight: 500;
    font-size: var(--font-size-xl);
  }

  & .hero-container__buttons .btn {
    background-color: var(--color-brand-primary) !important;
    border-color:  var(--color-brand-primary)  !important;
    color: #ffffff !important;
  }

  & .col-img {
    place-items: end flex-start !important;
    padding: 0 !important;
    margin-bottom: calc(-1 * var(--container-content-padding-vertical));
  }
}

/* Creditando brand styles */
.home-hero-header--creditando {
  & .home-hero-header__title {
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.6rem, 6vw, 43.2px);
    font-weight: 800;
    line-height: 1.2;
    color: #002449;
  }

  & .home-hero-header__subtitle {
    color: #002449;
    font-size: var(--font-size-xl);
  }

  & .hero-container__buttons .btn {
    background-color: transparent !important;
    border: 2px solid #002449 !important;
    color: #002449 !important;
  }
}

/* Crediticio brand styles */
:root .home-hero-header--crediticio {
  --container-title-h1-color: #000000;

  & .home-hero-header__title {
    font-family: "Open Sans", sans-serif;
    font-size: clamp(1.6rem, 6vw, 43.2px);
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
  }

  & .home-hero-header__subtitle {
    color: #000000;
    font-size: var(--font-size-xl);
  }

  & .hero-container__buttons .btn {
    background-color: #13233a !important;
    border-color: #13233a !important;
    color: #ffa573 !important;
  }
}

/* Creditozas brand styles */
.home-hero-header--creditozas {
  & .home-hero-header__title {
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.6rem, 6vw, 43.2px);
    font-weight: 800;
    line-height: 1.2;
    color: #000000;
  }

  & .home-hero-header__subtitle {
    color: #000000;
    font-size: var(--font-size-xl);
  }

  & .hero-container__buttons .btn {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #96b4e6 !important;
  }
}

/* Credizoom brand styles */
.home-hero-header--credizoom .home-hero-header__title {
  color: #4eb5a4;
}

.home-hero-header--credizoom .home-hero-header__subtitle {
  color: #000000;
}

.home-hero-header--credizoom .hero-container__buttons .btn {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #4eb5a4 !important;
}

.home-hero-header--credizoom .container-row .col.container-col,
.home-hero-header--credizoom .container-row .col-img.container-col-img {
  flex: 1 1 0 !important;
}

/* Mastercredi brand styles */
.home-hero-header--mastercredi .home-hero-header__title {
  font-family: "AdobeClean", sans-serif;
  font-size: clamp(1.6rem, 6vw, 43.2px);
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
}

.home-hero-header--mastercredi .home-hero-header__subtitle {
  color: #1a1a1a;
  font-size: 22.32px;
  font-weight: 600 !important;
  padding: 0;
  margin: 0;
}

.home-hero-header--mastercredi .hero-container__buttons .btn {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #e2e8ed !important;
  font-size: 16.56px;
  font-weight: 600;
}

@media (width >=1024px) {
  .home-hero-header--mastercredi {
    & .container-col {
      width: 555px;
      min-width: 555px;
      height: 616px;
    }

    & .col-img {
      width: 555px;
      min-width: 555px;
      height: 616px;
    }
  }
}

/* CrediTal brand styles */

.home-hero-header--credital {
    background: #EAEEEF;
    & .container__content {
      & h1{
        font-family: 'Source Serif 4', serif !important;
        font-weight: 700;
        margin-bottom: 0;
        color:var(--color-text-primary);
        font-size: 3rem;

        & em{
          font-style: normal;
          color:var(--color-brand-primary);
        }
      }

      & .home-hero-header__subtitle {
        color: #34323F;
        font-weight: 500;
        font-size: var(--font-size-xl);
      }

      & .hero-container__buttons .btn {
        background-color: var(--color-brand-primary) !important;
        border-color: var(--color-brand-primary) !important;
        color: var(--color-surface-base) !important;
      }

      & .col-img {
        place-items: end center !important;
        padding: 0 !important;
        margin-bottom: calc(-1 * var(--container-content-padding-vertical));

        & img {
          max-height: none;
          height: 100%;
          object-fit: contain;
          object-position: bottom center;
        }
      }
  }
}


/* Credisolve brand styles */
:root .home-hero-header--credisolve {
  background: var(--color-surface-elevated);
  .home-hero-header__title{
    font-weight: 800 !important;
    & em{
      color: var(--color-primary, #e62095) !important;
    }
  }

  .home-hero-header__subtitle{
    font-size: var(--font-size-xl);
    font-weight: 600 !important;
  }
  .hero-list__icon{
    width: 25px;
  }

  & li {
    font-weight: normal;
  }


  & .hero-container__buttons .btn{
    background: var(--paso-a-paso-item-order-background-even) !important;
    color: #fff !important;
    border: none;
  }

  & .col-img {
    place-items: end center !important;
    padding: 0 !important;
    margin-bottom: calc(-1 * var(--container-content-padding-vertical));

    & img {
      max-height: none;
      height: 100%;
      object-fit: contain;
      object-position: bottom center;
    }
  }

}

/* Credipay brand styles */
.home-hero-header--credipay {
    background: var(--color-brand-primaryLight);
    & .container__content {
      & h1{
        font-weight: 800;
        margin-bottom: 0;
        font-size: 3rem;

        & em{
          color:var(--color-brand-primary);
        }
      }

      & .home-hero-header__subtitle {
        font-weight: 500;
        font-size: var(--font-size-xl);
      }


      & .col-img {
        place-items: end center !important;
        padding: 0 !important;
        margin-bottom: calc(-1 * var(--container-content-padding-vertical));

        & img {
          max-height: none;
          height: 100%;
          object-fit: contain;
          object-position: bottom center;
        }
      }
    } 
}

/* Creditoplan brand styles */
.home-hero-header--creditoplan {
    background: var(--color-brand-primaryLight);
     & .container__content {
      & h1{
        font-weight: 800;
        margin-bottom: 0;
        font-size: 3rem;

        & em{
          color:var(--color-brand-primary);
        }
      }

      & .home-hero-header__subtitle {
        font-weight: 500;
        font-size: var(--font-size-xl);
      }


      & .col-img {
        place-items: end center !important;
        padding: 0 !important;
        margin-bottom: calc(-1 * var(--container-content-padding-vertical));

        & img {
          max-height: none;
          height: 100%;
          object-fit: contain;
          object-position: bottom center;
        }
      }
  } 
}


/* === index.css === */
.icon-wrapped {
    background-color: var(--color-brand-primary);
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    & path {
        fill: white;
    }
}

/* === styles.css === */
/* Estilos simplificados para maxima estabilidad */
.image-capture-simple-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.image-capture-preview-box {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  aspect-ratio: 1.586;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-capture-preview-box:active {
  background: #e2e8f0;
}

.image-capture-preview-box.has-image {
  border-style: solid;
  border-color: #10b981;
  background: #000;
  cursor: default;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

.icon-large {
  font-size: 3rem;
  color: #94a3b8;
}

.upload-text {
  font-weight: 600;
  color: #1e293b;
  font-size: 1.1rem;
}

.upload-subtext {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.btn-upload-action {
  margin-top: 10px;
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 99px;
  font-weight: 600;
  pointer-events: none; /* El click lo maneja el contenedor */
}

/* Spinner de carga */
.image-capture-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  color: #3b82f6;
}

.image-capture-simple-container .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================
   MODAL DE RECORTE (MOBILE STABLE VERSION)
   ========================================= */

.crop-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999999; /* Maxima prioridad */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none; /* Crucial: evita scroll del body */
}

/* Envuelve header + area de recorte + controles. En movil ocupa el 100%
   del overlay (identico al comportamiento anterior, sin wrapper). En
   escritorio (ver media query abajo) se le pone un tamano fijo, para que
   .crop-area-container dentro no herede flex:1 de un overlay a pantalla
   completa: react-easy-crop calcula el rectangulo real de recorte a
   partir del tamano de su contenedor, y con un contenedor del tamano de
   un monitor el documento aparecia mucho mas grande que la guia visual
   (.crop-guide-box) y no habia forma de alejar el zoom lo suficiente
   para que el DNI cupiera. */
.crop-modal-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (min-width: 768px) {
  .crop-modal-overlay {
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.75);
    padding: 24px;
  }

  .crop-modal-content {
    width: 460px;
    max-width: 100%;
    height: 680px;
    max-height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  }
}

/* Header Fijo */
.crop-header {
  flex-shrink: 0;
  height: 60px;
  background-color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  z-index: 20;
}

.close-text-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px;
}

/* Area Central (Cropper) - Absolute Positioning para evitar saltos */
.crop-area-container {
  flex: 1;
  min-height: 0; /* deja que se achique dentro de .crop-modal-content acotado en escritorio */
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

/* Margen real entre el borde del contenedor y lo que react-easy-crop trata
   como su "container" para calcular el area de recorte. Como la libreria
   ignora el padding de un ancestro (su propio nodo interno es
   position:absolute con inset:0), el margen tiene que venir de un
   envoltorio con tamano propio, no de padding en .crop-area-container. */
.crop-area-inset {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
}


/* Area de recorte REAL de react-easy-crop (classes.cropAreaClassName),
   con el mismo look que antes tenia la guia decorativa (.crop-guide-box,
   ya no existe): borde punteado + oscurecido del exterior. La libreria ya
   le pone position/tamano/box-shadow por defecto (ver
   reactEasyCrop_CropArea en su CSS); aqui solo sobreescribimos el estilo
   visual, nunca el tamano/posicion — eso lo sigue calculando la libreria
   para garantizar que el recorte real este siempre dentro de la imagen. */
.dni-real-crop-area {
  border: 2px dashed rgba(255, 255, 255, 0.6) !important;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
}

/* Etiqueta orientativa, centrada sobre el contenedor (ya no es hija del
   area de recorte real, que la dibuja react-easy-crop). Puramente
   informativa: no define ningun tamano de recorte. */
.crop-guide-label-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop-guide-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  text-align: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 99px;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.crop-tips {
  position: absolute;
  top: 20px; /* Arriba para que no moleste al encuadrar */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #fbbf24; /* Amber-400 */
  font-weight: 500;
  font-size: 0.95rem;
  z-index: 15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    transparent 100%
  );
  padding: 10px 0 30px 0;
}

/* Barra de Controles Inferior */
.crop-controls-bar {
  flex-shrink: 0;
  height: auto;
  min-height: 80px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 10px));
  background-color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  z-index: 20;
}

.rotation-buttons {
  display: flex;
  gap: 12px;
}

.control-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #334155;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.control-btn:active {
  background: #475569;
  transform: scale(0.95);
}

.confirm-crop-btn {
  flex: 1;
  background: #3b82f6;
  color: white;
  border: none;
  height: 48px;
  border-radius: 99px; /* Pill shape */
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
  cursor: pointer;
}

.confirm-crop-btn:active {
  background: #2563eb;
  transform: scale(0.98);
}

/* Acciones sobre la imagen */
.preview-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-capture-preview-box.has-image:hover .preview-actions,
.image-capture-preview-box.has-image:active .preview-actions {
  opacity: 1;
}

.success-badge {
  align-self: flex-end;
  background: #10b981;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.clear-btn {
  align-self: flex-end;
  background: #ef4444;
  color: white;
  border: none;
  width: 44px;
  height: 44px; /* Touch target optimizado */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
}

.error-message-box {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-capture-crop__btn {
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

.image-capture-crop__btn--primary {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

.image-capture-crop__btn--primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
}


/* === styles.css === */
/**
 * InformeSolvenciaEresFiable Component Styles
 *
 * Styles for the "Are you reliable" section
 * Responsive grid layout for feature items
 */

:root {
  --eres-fiable-text-max-width: 100%;
  --eres-fiable-list-grid-template: repeat(1, 1fr);
}

@media (width >=1024px) {
  :root {
    --eres-fiable-text-max-width: 75%;
    --eres-fiable-list-grid-template: repeat(3, 1fr);
  }
}

.container-eres-fiable {
  padding: 0;
}

.container-eres-fiable h2 {
  max-width: var(--eres-fiable-text-max-width);
  margin: 0 auto;
  text-align: center;
}

.container-eres-fiable p {
  max-width: var(--eres-fiable-text-max-width);
  margin: 0 auto;
  text-align: center;
}

.container-eres-fiable ul {
  display: grid;
  grid-template-columns: var(--eres-fiable-list-grid-template);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.container-eres-fiable ul li {
  display: flex;
  gap: 10px;
  padding: 18px 10px;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  align-items: center;
  font-size: 14.4px;
}

.container-eres-fiable__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-eres-fiable__icons {
  display: flex;
  gap: 50px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.container-eres-fiable__buttons {
  text-align: center;
  margin: 0;
}

.container-eres-fiable__buttons .btn {
  font-size: 14.4px;
  font-weight: 700;
  padding: 12px 25px;
  border: none;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Credimoney specific styles */
.container-eres-fiable[data-brand="credimoney"] {
  background-color: rgb(192, 229, 235);
}

:root .container-eres-fiable[data-brand="credimoney"].banner-bg.container {
  --container-text-color: rgb(46, 16, 71);
  --container-title-h2-color: rgb(46, 16, 71);
}

.container-eres-fiable[data-brand="credimoney"] h2 {
  font-size: 39.6px;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: rgb(46, 16, 71);
}

.container-eres-fiable[data-brand="credimoney"] p {
  font-size: 16.56px;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: rgb(46, 16, 71);
}

.container-eres-fiable[data-brand="credimoney"] ul li {
  font-family: "Helvetica Neue", sans-serif;
  color: rgb(46, 16, 71);
}

.container-eres-fiable[data-brand="credimoney"] .container-eres-fiable__icons {
  color: rgb(46, 16, 71);
}

.container-eres-fiable[data-brand="credimoney"] .container-eres-fiable__buttons .btn {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border-radius: 40px;
}

/* Crediahora specific styles */
.container-eres-fiable[data-brand="crediahora"] {
  background-color: rgb(29, 29, 27);
}

:root .container-eres-fiable[data-brand="crediahora"].banner-bg.container {
  --container-text-color: rgb(245, 245, 245);
  --container-title-h2-color: rgb(245, 245, 245);
}

.container-eres-fiable[data-brand="crediahora"] h2 {
  font-size: 36px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  color: rgb(245, 245, 245);
}

.container-eres-fiable[data-brand="crediahora"] p {
  font-size: 16.56px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: rgb(245, 245, 245);
}

.container-eres-fiable[data-brand="crediahora"] ul li {
  background-color: rgb(245, 245, 245);
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: rgb(29, 29, 27);
}

.container-eres-fiable[data-brand="crediahora"] .container-eres-fiable__icons {
  color: rgb(245, 245, 245);
}

.container-eres-fiable[data-brand="crediahora"] .container-eres-fiable__buttons .btn {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border-radius: 999px;
}

/* OleDinero specific styles */
.container-eres-fiable[data-brand="oledinero"] {
  background-color: rgb(215, 255, 123);
}

:root .container-eres-fiable[data-brand="oledinero"].banner-bg.container {
  --container-text-color: rgb(2, 45, 142);
  --container-title-h2-color: rgb(3, 45, 143);
}

.container-eres-fiable[data-brand="oledinero"] h2 {
  font-size: 39.6px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: rgb(3, 45, 143);
}

.container-eres-fiable[data-brand="oledinero"] p {
  font-size: 16.56px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: rgb(2, 45, 142);
}

.container-eres-fiable[data-brand="oledinero"] ul li {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: rgb(2, 45, 142);
}

.container-eres-fiable[data-brand="oledinero"] .container-eres-fiable__icons {
  color: rgb(2, 45, 142);
}

.container-eres-fiable[data-brand="oledinero"] .container-eres-fiable__buttons .btn {
  background-color: transparent;
  color: rgb(3, 45, 143);
  border: 2px solid rgb(3, 45, 143);
  border-radius: 40px 40px 0px;
  font-weight: 500;
}

/* Creditoamigo specific styles */
:root .container-eres-fiable[data-brand="creditoamigo"].banner-bg.container {
  --container-text-color: rgb(0, 0, 0);
  --container-title-h2-color: rgb(0, 0, 255);
}

.container-eres-fiable[data-brand="creditoamigo"] h2 {
  font-size: 32px;
  font-family: "Seitu", sans-serif;
  font-weight: 500;
  color: rgb(0, 0, 255);
}

.container-eres-fiable[data-brand="creditoamigo"] p {
  font-size: 16px;
  font-family: "Seitu", sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

.container-eres-fiable[data-brand="creditoamigo"] ul li {
  font-family: "Seitu", sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

.container-eres-fiable[data-brand="creditoamigo"] .container-eres-fiable__icons {
  color: rgb(0, 0, 0);
}

.container-eres-fiable[data-brand="creditoamigo"] .container-eres-fiable__buttons .btn {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 255);
  border-radius: 40px;
  font-weight: 400;
}

/* Credicheck specific styles */
:root .container-eres-fiable[data-brand="credicheck"].banner-bg.container {
  --container-text-color: rgb(0, 0, 0);
  --container-title-h2-color: #76bc74;
}

.container-eres-fiable[data-brand="credicheck"] h2 {
  font-size: 32px;
  font-family: "Funnel Display", sans-serif;
  font-weight: 500;
  color: #76bc74;
}

.container-eres-fiable[data-brand="credicheck"] p {
  font-size: 16px;
  font-family: "Funnel Display", sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

.container-eres-fiable[data-brand="credicheck"] ul li {
  font-family: "Funnel Display", sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

.container-eres-fiable[data-brand="credicheck"] .container-eres-fiable__icons {
  color: rgb(0, 0, 0);
}

.container-eres-fiable[data-brand="credicheck"] .container-eres-fiable__buttons .btn {
  background-color: #76bc74;
  color: rgb(255, 255, 255);
  border: 2px solid #76bc74;
  border-radius: 40px;
  font-weight: 400;
}

/* Creditoclic specific styles */
.container-eres-fiable[data-brand="creditoclic"] {
  background-color: rgb(255, 255, 255);
}

:root .container-eres-fiable[data-brand="creditoclic"].banner-bg.container {
  --container-text-color: rgb(7, 48, 52);
  --container-title-h2-color: rgb(7, 48, 52);
}

.container-eres-fiable[data-brand="creditoclic"] h2 {
  font-size: 28.8px;
  font-family: "Harabara", sans-serif;
  font-weight: 500;
  color: rgb(7, 48, 52);
}

.container-eres-fiable[data-brand="creditoclic"] p {
  font-size: 14.4px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: rgb(7, 48, 52);
}

.container-eres-fiable[data-brand="creditoclic"] ul li {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: rgb(7, 48, 52);
  background-color: rgb(234, 238, 239);
}

.container-eres-fiable[data-brand="creditoclic"] .container-eres-fiable__icons {
  color: rgb(7, 48, 52);
}

.container-eres-fiable[data-brand="creditoclic"] .container-eres-fiable__buttons .btn {
  background-color: transparent;
  color: rgb(255, 255, 255);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 999px;
  font-weight: 500;
}

/* Creditopro specific styles */
.container-eres-fiable[data-brand="creditopro"] {
  background-color: rgb(255, 255, 255);
}

:root .container-eres-fiable[data-brand="creditopro"].banner-bg.container {
  --container-text-color: rgb(51, 51, 51);
  --container-title-h2-color: rgb(51, 51, 51);
}

.container-eres-fiable[data-brand="creditopro"] h2 {
  font-size: 28.8px;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  color: rgb(51, 51, 51);
}

.container-eres-fiable[data-brand="creditopro"] p {
  font-size: 14.4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(51, 51, 51);
}

.container-eres-fiable[data-brand="creditopro"] ul li {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(69, 112, 174);
  background-color: rgb(243, 243, 243);
}

.container-eres-fiable[data-brand="creditopro"] .container-eres-fiable__icons {
  color: rgb(51, 51, 51);
}

.container-eres-fiable[data-brand="creditopro"] .container-eres-fiable__buttons .btn {
  background-color: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
  border: 2px solid rgb(51, 51, 51);
  border-radius: 999px;
}

/* Crediator specific styles */
.container-eres-fiable[data-brand="crediator"] {
  background-color: rgb(0, 89, 63);
}

:root .container-eres-fiable[data-brand="crediator"].banner-bg.container {
  --container-text-color: rgb(205, 246, 62);
  --container-title-h2-color: rgb(205, 246, 62);
}

.container-eres-fiable[data-brand="crediator"] h2 {
  font-size: 28.8px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: rgb(205, 246, 62);
}

.container-eres-fiable[data-brand="crediator"] p {
  font-size: 14.4px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: rgb(205, 246, 62);
}

.container-eres-fiable[data-brand="crediator"] ul li {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: rgb(51, 51, 51);
  background-color: rgb(242, 242, 242);
}

.container-eres-fiable[data-brand="crediator"] .container-eres-fiable__icons {
  color: rgb(205, 246, 62);
}

.container-eres-fiable[data-brand="crediator"] .container-eres-fiable__buttons .btn {
  background-color: transparent;
  color: rgb(255, 255, 255);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 999px;
}

/* Credifix specific styles */
.container-eres-fiable[data-brand="credifix"] {
  background-color: rgb(24, 45, 82);
}

:root .container-eres-fiable[data-brand="credifix"].banner-bg.container {
  --container-text-color: rgb(150, 180, 230);
  --container-title-h2-color: rgb(150, 180, 230);
}

.container-eres-fiable[data-brand="credifix"] h2 {
  font-size: 28.8px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: rgb(150, 180, 230);
}

.container-eres-fiable[data-brand="credifix"] p {
  font-size: 14.4px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: rgb(150, 180, 230);
}

.container-eres-fiable[data-brand="credifix"] ul li {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: rgb(24, 45, 82);
  background-color: rgb(217, 228, 245);
}

.container-eres-fiable[data-brand="credifix"] .container-eres-fiable__icons {
  color: rgb(150, 180, 230);
}

.container-eres-fiable[data-brand="credifix"] .container-eres-fiable__buttons .btn {
  background-color: rgb(150, 180, 230);
  color: rgb(24, 45, 82);
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 500;
}

/* Crediscore specific styles */
.container-eres-fiable[data-brand="crediscore"] {
  background-color: rgb(0, 0, 0);
}

:root .container-eres-fiable[data-brand="crediscore"].banner-bg.container {
  --container-text-color: rgb(144, 126, 232);
  --container-title-h2-color: rgb(144, 126, 232);
}

.container-eres-fiable[data-brand="crediscore"] h2 {
  font-size: 28.8px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: rgb(144, 126, 232);
}

.container-eres-fiable[data-brand="crediscore"] p {
  font-size: 14.4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(144, 126, 232);
}

.container-eres-fiable[data-brand="crediscore"] ul li {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(0, 0, 0);
  background-color: rgb(225, 241, 252);
}

.container-eres-fiable[data-brand="crediscore"] .container-eres-fiable__icons {
  color: rgb(144, 126, 232);
}

.container-eres-fiable[data-brand="crediscore"] .container-eres-fiable__buttons .btn {
  background-color: rgb(144, 126, 232);
  color: rgb(255, 255, 255);
  border: 2px solid transparent;
  border-radius: 999px;
}

/* Creditando specific styles */
.container-eres-fiable[data-brand="creditando"] {
  background-color: rgb(0, 36, 73);
}

:root .container-eres-fiable[data-brand="creditando"].banner-bg.container {
  --container-text-color: rgb(221, 236, 238);
  --container-title-h2-color: rgb(221, 236, 238);
}

.container-eres-fiable[data-brand="creditando"] h2 {
  font-size: 28.8px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: rgb(221, 236, 238);
}

.container-eres-fiable[data-brand="creditando"] p {
  font-size: 14.4px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: rgb(198, 253, 0);
}

.container-eres-fiable[data-brand="creditando"] ul li {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: rgb(0, 36, 73);
  background-color: rgb(221, 236, 238);
}

.container-eres-fiable[data-brand="creditando"] .container-eres-fiable__icons {
  color: rgb(198, 253, 0);
}

.container-eres-fiable[data-brand="creditando"] .container-eres-fiable__buttons .btn {
  background-color: transparent;
  color: rgb(255, 255, 255);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 0px;
}

/* Crediticio specific styles */
.container-eres-fiable[data-brand="crediticio"] {
  background-color: rgb(19, 35, 58);
}

:root .container-eres-fiable[data-brand="crediticio"].banner-bg.container {
  --container-text-color: rgb(197, 229, 252);
  --container-title-h2-color: rgb(197, 229, 252);
}

.container-eres-fiable[data-brand="crediticio"] h2 {
  font-size: 28.8px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: rgb(197, 229, 252);
}

.container-eres-fiable[data-brand="crediticio"] p {
  font-size: 14.4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(197, 229, 252);
}

.container-eres-fiable[data-brand="crediticio"] ul li {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(19, 35, 58);
  background-color: rgb(255, 165, 115);
}

.container-eres-fiable[data-brand="crediticio"] .container-eres-fiable__icons {
  color: rgb(197, 229, 252);
}

.container-eres-fiable[data-brand="crediticio"] .container-eres-fiable__buttons .btn {
  background-color: rgb(255, 165, 115);
  color: rgb(19, 35, 58);
  border: 2px solid rgb(19, 35, 58);
  border-radius: 40px;
  font-weight: 600;
}

/* Creditozas specific styles */
.container-eres-fiable[data-brand="creditozas"] {
  background-color: rgb(0, 0, 0);
}

:root .container-eres-fiable[data-brand="creditozas"].banner-bg.container {
  --container-text-color: rgb(229, 234, 234);
  --container-title-h2-color: rgb(229, 234, 234);
}

.container-eres-fiable[data-brand="creditozas"] h2 {
  font-size: 28.8px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: rgb(229, 234, 234);
}

.container-eres-fiable[data-brand="creditozas"] p {
  font-size: 14.4px;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  color: rgb(229, 234, 234);
}

.container-eres-fiable[data-brand="creditozas"] ul li {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  color: rgb(0, 0, 0);
  background-color: rgb(150, 180, 230);
}

.container-eres-fiable[data-brand="creditozas"] .container-eres-fiable__icons {
  color: rgb(229, 234, 234);
}

.container-eres-fiable[data-brand="creditozas"] .container-eres-fiable__buttons .btn {
  background-color: rgb(150, 180, 230);
  color: rgb(0, 0, 0);
  border: 2px solid rgb(150, 180, 230);
  border-radius: 999px;
}

/* Credizoom specific styles */
.container-eres-fiable[data-brand="credizoom"] {
  background-color: rgb(0, 0, 0);
}

:root .container-eres-fiable[data-brand="credizoom"].banner-bg.container {
  --container-text-color: rgb(128, 232, 215);
  --container-title-h2-color: rgb(128, 232, 215);
}

.container-eres-fiable[data-brand="credizoom"] h2 {
  font-size: 28.8px;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: rgb(128, 232, 215);
}

.container-eres-fiable[data-brand="credizoom"] p {
  font-size: 14.4px;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: rgb(128, 232, 215);
}

.container-eres-fiable[data-brand="credizoom"] ul li {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: rgb(0, 0, 0);
  background-color: rgb(244, 248, 249);
}

.container-eres-fiable[data-brand="credizoom"] .container-eres-fiable__icons {
  color: rgb(128, 232, 215);
}

.container-eres-fiable[data-brand="credizoom"] .container-eres-fiable__buttons .btn {
  background-color: rgb(78, 181, 164);
  color: rgb(0, 0, 0);
  border: 2px solid rgb(78, 181, 164);
  border-radius: 999px;
  font-weight: 500;
}

/* Mastercredi specific styles */
.container-eres-fiable[data-brand="mastercredi"] {
  background-color: rgb(26, 26, 26);
}

:root .container-eres-fiable[data-brand="mastercredi"].banner-bg.container {
  --container-text-color: rgb(226, 232, 237);
  --container-title-h2-color: rgb(226, 232, 237);
}

.container-eres-fiable[data-brand="mastercredi"] h2 {
  font-size: 39.6px;
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: rgb(226, 232, 237);
}

.container-eres-fiable[data-brand="mastercredi"] p {
  font-size: 16.56px;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: rgb(226, 232, 237);
}

.container-eres-fiable[data-brand="mastercredi"] ul li {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: rgb(26, 26, 26);
  background-color: rgb(226, 232, 237);
}

.container-eres-fiable[data-brand="mastercredi"] .container-eres-fiable__icons {
  color: rgb(226, 232, 237);
}

.container-eres-fiable[data-brand="mastercredi"] .container-eres-fiable__buttons .btn {
  background-color: rgb(226, 232, 237);
  color: rgb(26, 26, 26);
  border-radius: 10px;
  font-weight: 600;
}

/*CREDISOLVE*/

:root .container-eres-fiable[data-brand="credisolve"].banner-bg.container {
  background-color: var(--color-brand-primary);
}

.container-eres-fiable[data-brand="credisolve"] ul li{
  color:var(--color-brand-primaryDark);
}

.container-eres-fiable[data-brand="credisolve"] h2 {
  font-weight: 800;
  color: var(--color-brand-primaryLight);
}

.container-eres-fiable[data-brand="credisolve"] .container-eres-fiable__buttons a{
  border: 2px solid var(--color-surface-base);
}

/*CREDITOPLAN*/

:root .container-eres-fiable[data-brand="creditoplan"].banner-bg.container {
  background-color: var(--color-brand-primary);
}

.container-eres-fiable[data-brand="creditoplan"] ul li{
  color:var(--color-brand-primaryDark);
}

.container-eres-fiable[data-brand="creditoplan"] h2 {
  font-weight: 800;
  color: var(--color-brand-primaryLight);
}

.container-eres-fiable[data-brand="credital"] h2 {
  font-weight: 800;
  color: var(--color-brand-primaryLight);
}

.container-eres-fiable[data-brand="credital"] p {
  font-weight: 400;
}

.container-eres-fiable[data-brand="credital"] ul li span{
     color: var(--color-text-primary);
}

/*CREDIPAY*/
.container-eres-fiable[data-brand="credipay"] h2{
   color: var(--container-text-color);
}

.container-eres-fiable[data-brand="credipay"] ul li{
  color:var(--color-brand-primaryDark);
}

/* === styles.css === */
/**
 * InformeSolvenciaPanelUsuario Component Styles
 *
 * Styles for the "What's in the solvency report" panel
 * Uses container-panel-usuario class for consistency with other panel components
 */

.container-panel-usuario {
  /* Use container background variable, default to white */
  background: var(--container-background, rgb(255, 255, 255));
  padding: 0;
}

.container-panel-usuario .my-swiper .swiper,
.container-panel-usuario .my-swiper .swiper .swiper-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override grey background from EvaluacionFinancieraPanelUsuario - all brands should have white */
:root[data-brand="crediahora"] .container-panel-usuario {
  background: rgb(255, 255, 255) !important;
}

/* Remove background and border from navigation arrows */
.container-panel-usuario .my-swiper__nextBtn,
.container-panel-usuario .my-swiper__prevBtn {
  background: none;
  border: none;
  padding: 0;
  color: rgb(204, 204, 204);
}

.container-panel-usuario .my-swiper__nextBtn svg,
.container-panel-usuario .my-swiper__prevBtn svg {
  width: 48px;
  height: 48px;
}

/* Brand-specific arrow styles */
:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(149, 193, 31);
}

:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__nextBtn svg,
:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__prevBtn svg {
  width: 26px;
  height: 26px;
}

:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__nextBtn {
  right: -60px;
}

:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__prevBtn {
  left: -60px;
}

/* Crediahora bullet color */
:root[data-brand="crediahora"] .container-panel-usuario .my-swiper__bullet.my-swiper__activeBullet {
  background-color: rgb(149, 193, 31);
}

:root[data-brand="oledinero"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="oledinero"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(3, 45, 143);
}

.container-panel-usuario h2 {
  text-align: left;
  margin: 0;
}

/* Brand-specific h2 styles */
:root[data-brand="crediahora"] .container-panel-usuario h2 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: rgb(29, 29, 27) !important;
}

:root[data-brand="oledinero"] .container-panel-usuario h2 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 39.6px !important;
  color: rgb(3, 45, 143) !important;
}

/* Card styles */
.container-panel-usuario .card-basic {
 background-color: var(--color-brand-primary);
  padding: 35px;
  border-radius: 20px;
  border: none;
  height: 100%;
}

.container-panel-usuario .card-basic__title {
  font-size: 22.32px !important;
  line-height: 29.016px !important;
  font-weight: 700;
  font-family: "Helvetica Neue", sans-serif !important;
  color: rgb(46, 16, 71);
  margin: 0 !important;
}


:root[data-brand="oledinero"] .container-panel-usuario .card-basic__title {
  font-family: "Poppins", sans-serif !important;
  font-size: 20.16px !important;
  color: rgb(3, 45, 143) !important;
}

:root[data-brand="credital"] .container-panel-usuario .card-basic {
 background-color: var(--color-brand-secondary);
}

.container-panel-usuario .card-basic__description {
  font-size: 16.56px !important;
  line-height: 23.184px !important;
  font-weight: 400;
  font-family: "Helvetica Neue", sans-serif !important;
  color: rgb(46, 16, 71);
  margin: 0 !important;
}

:root[data-brand="oledinero"] .container-panel-usuario .card-basic__description {
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(3, 45, 143) !important;
}

.container-panel-usuario__footer {
  font-size: 22.32px;
  font-weight: 700;
  font-family: "Helvetica Neue", sans-serif;
  line-height: 29.016px;
  color: rgb(46, 16, 71);
  text-align: center;
  margin: 0;
}

.container-panel-usuario__footer em {
  font-weight: 700;
  font-style: normal;
}

/* Brand-specific footer styles */
:root[data-brand="crediahora"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Montserrat", sans-serif !important;
  color: rgb(29, 29, 27) !important;
}

:root[data-brand="oledinero"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Poppins", sans-serif !important;
  color: rgb(3, 45, 143) !important;
}

/* Brand-specific footer em styles */
:root[data-brand="crediahora"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(149, 193, 31) !important;
}

:root[data-brand="oledinero"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(215, 255, 123) !important;
}

.container-panel-usuario__buttons {
  text-align: center;
  margin: 0;
}

.container-panel-usuario__buttons .btn {
  font-size: 14.4px;
  font-weight: 700;
  background-color: var(--color-brand-primary);
  color: var(--color-surface-base);
  border-radius: 40px;
  padding: 12px 25px;
  border: none;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Brand-specific button styles */
:root[data-brand="crediahora"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border-radius: 999px;
}

:root[data-brand="oledinero"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: transparent;
  color: rgb(3, 45, 143);
  border: 2px solid rgb(3, 45, 143);
  border-radius: 40px 40px 0px;
  font-weight: 500;
}

/* Creditoamigo brand styles */
:root[data-brand="creditoamigo"] .container-panel-usuario h2 {
  font-family: "Seitu", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(0, 0, 255) !important;
}

:root[data-brand="creditoamigo"] .container-panel-usuario .card-basic__title {
  font-family: "Seitu", sans-serif !important;
  font-weight: 500;
  color: rgb(0, 0, 255) !important;
}

:root[data-brand="creditoamigo"] .container-panel-usuario .card-basic__description {
  font-family: "Seitu", sans-serif !important;
  font-weight: 400;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditoamigo"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Seitu", sans-serif !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditoamigo"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(0, 0, 255) !important;
}

:root[data-brand="creditoamigo"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 255);
  border-radius: 40px;
  font-weight: 400;
}

/* Credicheck brand styles */
:root[data-brand="credicheck"] .container-panel-usuario h2 {
  font-weight: 500 !important;
  color: var(--card-title-color) !important;
}

:root[data-brand="credicheck"] .container-panel-usuario .card-basic__title {
  font-weight: 500;
  color: var(--card-title-color) !important;
}

:root[data-brand="credicheck"] .container-panel-usuario .card-basic__description {
  font-weight: 400;
  color: var(--card-title-color)!important;
}

:root[data-brand="credicheck"] .container-panel-usuario .container-panel-usuario__footer {
  color: var(--card-title-color) !important;
}

:root[data-brand="credicheck"] .container-panel-usuario .container-panel-usuario__footer em {
  color: #76bc74 !important;
}

:root[data-brand="credicheck"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: #76bc74;
  color: rgb(255, 255, 255);
  border: 2px solid #76bc74;
  border-radius: 40px;
  font-weight: 400;
}

/* Creditoclic brand styles */
:root[data-brand="creditoclic"] .container-panel-usuario h2 {
  font-family: "Harabara", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(7, 48, 52) !important;
}

:root[data-brand="creditoclic"] .container-panel-usuario .card-basic__title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600;
  color: rgb(7, 48, 52) !important;
}

:root[data-brand="creditoclic"] .container-panel-usuario .card-basic__description {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500;
  color: rgb(7, 48, 52) !important;
}

:root[data-brand="creditoclic"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Montserrat", sans-serif !important;
  color: rgb(7, 48, 52) !important;
}

:root[data-brand="creditoclic"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(122, 196, 174) !important;
}

:root[data-brand="creditoclic"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: transparent;
  color: rgb(7, 48, 52);
  border: 2px solid rgb(7, 48, 52);
  border-radius: 999px;
  font-weight: 500;
}

:root[data-brand="creditoclic"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="creditoclic"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(7, 48, 52);
}

/* Creditopro brand styles */
:root[data-brand="creditopro"] .container-panel-usuario h2 {
  font-weight: 800 !important;
}

:root[data-brand="creditopro"] .container-panel-usuario .card-basic__title {
  font-weight: 800;
}

:root[data-brand="creditopro"] .container-panel-usuario .card-basic__description {
  font-weight: 500;
}

:root[data-brand="creditopro"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Open Sans", sans-serif !important;
  color: rgb(51, 51, 51) !important;
}

:root[data-brand="creditopro"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(69, 112, 174) !important;
}

:root[data-brand="creditopro"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
  border: 2px solid rgb(51, 51, 51);
  border-radius: 999px;
}

/* Crediator brand styles - use :root[data-brand] since container-panel-usuario has no data-brand attr */
:root[data-brand="crediator"] .container-panel-usuario h2 {
  font-weight: 800 !important;
  color: rgb(51, 51, 51) !important;
}

/* :root[data-brand="crediator"] .container-panel-usuario .card-basic__title {
  font-family: "Manrope", sans-serif !important;
  font-weight: 700;
  color: rgb(51, 51, 51) !important;
}

:root[data-brand="crediator"] .container-panel-usuario .card-basic__description {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600;
  color: rgb(51, 51, 51) !important;
}

:root[data-brand="crediator"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Manrope", sans-serif !important;
  color: rgb(51, 51, 51) !important;
} */

:root[data-brand="crediator"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(245, 95, 153) !important;
}

:root[data-brand="crediator"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(242, 213, 224);
  color: rgb(51, 51, 51);
  border: 2px solid transparent;
  border-radius: 999px;
}

:root[data-brand="crediator"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="crediator"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(185, 225, 234);
}

/* Credifix brand styles */
:root[data-brand="credifix"] .container-panel-usuario h2 {
  font-family: "Roboto", sans-serif !important;
  font-weight: 300 !important;
  color: rgb(24, 45, 82) !important;
}

:root[data-brand="credifix"] .container-panel-usuario .card-basic__title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500;
  color: rgb(24, 45, 82) !important;
}

:root[data-brand="credifix"] .container-panel-usuario .card-basic__description {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500;
  color: rgb(24, 45, 82) !important;
}

:root[data-brand="credifix"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Roboto", sans-serif !important;
  color: rgb(24, 45, 82) !important;
}

:root[data-brand="credifix"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(255, 0, 134) !important;
}

:root[data-brand="credifix"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(150, 180, 230);
  color: rgb(24, 45, 82);
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 500;
}

:root[data-brand="credifix"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="credifix"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(150, 180, 230);
}

/* Crediscore brand styles */
:root[data-brand="crediscore"] .container-panel-usuario h2 {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="crediscore"] .container-panel-usuario .card-basic__title {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="crediscore"] .container-panel-usuario .card-basic__description {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="crediscore"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Open Sans", sans-serif !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="crediscore"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(144, 126, 232) !important;
}

:root[data-brand="crediscore"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(144, 126, 232);
  color: rgb(255, 255, 255);
  border: 2px solid transparent;
  border-radius: 999px;
}

:root[data-brand="crediscore"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="crediscore"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(225, 241, 252);
}

/* Creditando brand styles */
:root[data-brand="creditando"] .container-panel-usuario .card-basic {
  background-color: var(--background-basic-color2);
}

:root[data-brand="creditando"] .container-panel-usuario h2 {
  font-weight: 800 !important;
}

:root[data-brand="creditando"] .container-panel-usuario .card-basic__title {
  font-weight: 700;
}

:root[data-brand="creditando"] .container-panel-usuario .card-basic__description {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600;
}


:root[data-brand="creditando"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: transparent;
  color: rgb(0, 36, 73);
  border: 2px solid rgb(0, 36, 73);
  border-radius: 0px;
}

:root[data-brand="creditando"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="creditando"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(0, 36, 73);
}

/* Crediticio brand styles */
:root[data-brand="crediticio"] .container-panel-usuario h2 {
  font-weight: 700 !important;
  color: var(--color-brand-primary) !important;
}

:root[data-brand="crediticio"] .container-panel-usuario .card-basic__title {
  font-weight: 700;
  color: var(--color-brand-primaryLight) !important;
}

:root[data-brand="crediticio"] .container-panel-usuario .card-basic__description {
  font-weight: 500;
  color: var(--color-brand-primaryLight) !important;
}

:root[data-brand="crediticio"] .container-panel-usuario .container-panel-usuario__footer {
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="crediticio"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(19, 35, 58) !important;
}

:root[data-brand="crediticio"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(19, 35, 58);
  color: rgb(255, 165, 115);
  border: 2px solid rgb(19, 35, 58);
  border-radius: 40px;
  font-weight: 600;
}

:root[data-brand="crediticio"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="crediticio"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(255, 165, 115);
}

/* Creditozas brand styles */
:root[data-brand="creditozas"] .container-panel-usuario h2 {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditozas"] .container-panel-usuario .card-basic__title {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditozas"] .container-panel-usuario .card-basic__description {
  font-family: "Manrope", sans-serif !important;
  font-weight: 500;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditozas"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Manrope", sans-serif !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditozas"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="creditozas"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(0, 0, 0);
  color: rgb(150, 180, 230);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 999px;
}

/* Credizoom brand styles */
:root[data-brand="credizoom"] [data-page="informe-solvencia"] .container-panel-usuario {
  background-color: #ffffff;
}

:root[data-brand="credizoom"] .container-panel-usuario h2 {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 500 !important;
  font-size: 31.68px !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="credizoom"] .container-panel-usuario .card-basic__title {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 500;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="credizoom"] .container-panel-usuario .card-basic__description {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 500;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="credizoom"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "AdobeClean", sans-serif !important;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="credizoom"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(78, 181, 164) !important;
}

:root[data-brand="credizoom"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(0, 0, 0);
  color: rgb(78, 181, 164);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 999px;
  font-weight: 500;
}

/* Mastercredi brand styles */
:root[data-brand="mastercredi"] .container-panel-usuario h2 {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 700 !important;
  color: rgb(26, 26, 26) !important;
}

:root[data-brand="mastercredi"] .container-panel-usuario .card-basic__title {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 700;
  color: rgb(26, 26, 26) !important;
}

:root[data-brand="mastercredi"] .container-panel-usuario .card-basic__description {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 500;
  color: rgb(26, 26, 26) !important;
}

:root[data-brand="mastercredi"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "AdobeClean", sans-serif !important;
  font-size: 24.48px !important;
  color: rgb(26, 26, 26) !important;
  margin-bottom: 20px !important;
}

:root[data-brand="mastercredi"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(26, 26, 26) !important;
}

:root[data-brand="mastercredi"] .container-panel-usuario .container-panel-usuario__buttons .btn {
  background-color: rgb(26, 26, 26);
  color: rgb(226, 232, 237);
  border-radius: 10px;
  font-weight: 600;
}

:root[data-brand="mastercredi"] .container-panel-usuario .my-swiper__nextBtn,
:root[data-brand="mastercredi"] .container-panel-usuario .my-swiper__prevBtn {
  color: rgb(26, 26, 26);
}

@media (min-width: 768px) {
  .container-panel-usuario {
    padding: 0;
  }
}


/* === styles.css === */
/* Legal Pages Styles */

.legal-page {
  padding: 2rem 0px;
  max-width: var(--body-max-width, 1400px);
  margin: 0 auto;
  color: var(--text-color, var(--primary-color, #333));
  font-family: var(--font-family, inherit);
  font-size: 1.15rem;
  /* Match production ~16.56px */
  line-height: 1.6;

  & table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

.legal-page__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.legal-page__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color, #007bff);
  border-radius: 50%;
  animation: legal-spin 1s linear infinite;
}

@keyframes legal-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.legal-page h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  color: var(--text-color, var(--primary-color, inherit));
}

.legal-page h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-color, var(--primary-color, inherit));
}

.legal-page .justified-text {
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  line-height: 1.6;
}

.legal-page p {
  margin-bottom: 1rem;
}

.legal-page ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.legal-page li {
  margin-bottom: 0.5rem;
}

.legal-page a {
  color: var(--primary-color, #007bff);
  text-decoration: none;
}

.legal-page a:hover {
  text-decoration: underline;
}

/* Table styles for terms and conditions */
.legal-page .table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #000;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.legal-page .table-header {
  display: contents;
  font-weight: bold;
  color: #000;
}

.legal-page .t-header {
  background-color: #a7a7a7;
}

.legal-page .table-cell {
  border: 1px solid #000;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-page .table-cell:first-child {
  font-weight: bold;
  text-align: left;
}

.legal-page .table-row {
  display: contents;
}

/* Comparison grid */
.legal-page .comparison-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border: 2px solid black;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.legal-page .grid-header {
  font-weight: bold;
  background-color: #f2b705;
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.legal-page .grid-item {
  border: 1px solid black;
  padding: 10px;
}

.legal-page .grid-item .green {
  color: green;
}

.legal-page .grid-item .highlight {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.legal-page .highlight {
  font-weight: bold;
  padding: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .legal-page {
    padding: 1rem;
    font-size: 1rem;
  }

  .legal-page .table {
    grid-template-columns: 1fr;
  }

  .legal-page .comparison-grid {
    grid-template-columns: 1fr;
  }
}

/* Utility classes */
.legal-page .mb-2 {
  margin-bottom: 0.5rem;
}

.legal-page .mb-3 {
  margin-bottom: 1rem;
}

.legal-page .mb-4 {
  margin-bottom: 1.5rem;
}

.legal-page .mb-5 {
  margin-bottom: 3rem;
}

.legal-page .my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.legal-page .my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.legal-page .ms-3 {
  margin-left: 1rem;
}

.legal-page .ms-5 {
  margin-left: 3rem;
}

.legal-page .py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.legal-page .fs-5 {
  font-size: 1.25rem;
}

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

/* Brand-specific styles */

/* Credimoney */
.legal-page[data-brand="credimoney"] {
  font-family: "Helvetica Neue", sans-serif;
  color: rgb(46, 16, 71);
}

.legal-page[data-brand="credimoney"] h2,
.legal-page[data-brand="credimoney"] h3 {
  color: rgb(46, 16, 71);
}

.legal-page[data-brand="credimoney"] a {
  color: rgb(248, 248, 146);
}

.legal-page[data-brand="credimoney"] .t-header {
  background-color: #d8c7ff;
}

/* Crediahora */
.legal-page[data-brand="crediahora"] {
  font-family: "Montserrat", sans-serif;
  color: rgb(29, 29, 27);
}

.legal-page[data-brand="crediahora"] h2,
.legal-page[data-brand="crediahora"] h3 {
  color: rgb(29, 29, 27);
}

.legal-page[data-brand="crediahora"] a {
  color: rgb(149, 193, 31);
}

.legal-page[data-brand="crediahora"] .t-header {
  background-color: #95c11f;
}

/* OleDinero */
.legal-page[data-brand="oledinero"] {
  font-family: "Poppins", sans-serif;
  color: rgb(3, 45, 143);
}

.legal-page[data-brand="oledinero"] h2,
.legal-page[data-brand="oledinero"] h3 {
  color: rgb(3, 45, 143);
}

.legal-page[data-brand="oledinero"] a {
  color: rgb(215, 255, 123);
}

.legal-page[data-brand="oledinero"] .t-header {
  background-color: #d7ff7b;
}

/* CreditoAmigo */
.legal-page[data-brand="creditoamigo"] {
  font-family: "Seitu", sans-serif;
  color: #1D2C56;
}

.legal-page[data-brand="creditoamigo"] h2,
.legal-page[data-brand="creditoamigo"] h3 {
  color: #0000FF;
}

.legal-page[data-brand="creditoamigo"] a {
  color: #0000FF;
}

.legal-page[data-brand="creditoamigo"] .t-header {
  background-color: #c8cffa;
}

/* Credicheck */
.legal-page[data-brand="credicheck"] {
  font-family: "Funnel Display", sans-serif;
  color: #18384e;
}

.legal-page[data-brand="credicheck"] h2,
.legal-page[data-brand="credicheck"] h3 {
  color: #76bc74;
}

.legal-page[data-brand="credicheck"] a {
  color: #76bc74;
}

.legal-page[data-brand="credicheck"] .t-header {
  background-color: #76bc74;
}

/* CreditoClic */
.legal-page[data-brand="creditoclic"] {
  font-family: "Harabara", sans-serif;
  color: #073034;
}

.legal-page[data-brand="creditoclic"] h2,
.legal-page[data-brand="creditoclic"] h3 {
  color: #073034;
}

.legal-page[data-brand="creditoclic"] a {
  color: #af9fcd;
}

.legal-page[data-brand="creditoclic"] .t-header {
  background-color: #af9fcd;
}

/* CreditoPRO */
.legal-page[data-brand="creditopro"] {
  font-family: "Open Sans", sans-serif;
  color: #333333;
}

.legal-page[data-brand="creditopro"] h2,
.legal-page[data-brand="creditopro"] h3 {
  color: #1B4A82;
}

.legal-page[data-brand="creditopro"] a {
  color: #4570ae;
}

.legal-page[data-brand="creditopro"] .t-header {
  background-color: #4570ae;
}

/* Crediator */
.legal-page[data-brand="crediator"] {
  font-family: "Manrope", sans-serif;
  color: #333333;
}

.legal-page[data-brand="crediator"] h2,
.legal-page[data-brand="crediator"] h3 {
  color: #00593f;
}

.legal-page[data-brand="crediator"] a {
  color: #f55f99;
}

.legal-page[data-brand="crediator"] .t-header {
  background-color: #f5fdf9;
}

/* Credifix */
.legal-page[data-brand="credifix"] {
  font-family: "Roboto", sans-serif;
  color: #182d52;
}

.legal-page[data-brand="credifix"] h2,
.legal-page[data-brand="credifix"] h3 {
  color: #182d52;
}

.legal-page[data-brand="credifix"] a {
  color: #ff0086;
}

.legal-page[data-brand="credifix"] .t-header {
  background-color: #ff0086;
}

/* Crediscore */
.legal-page[data-brand="crediscore"] {
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

.legal-page[data-brand="crediscore"] h2,
.legal-page[data-brand="crediscore"] h3 {
  color: #907ee8;
}

.legal-page[data-brand="crediscore"] a {
  color: #907ee8;
}

.legal-page[data-brand="crediscore"] .t-header {
  background-color: #907ee8;
}

/* Creditando */
.legal-page[data-brand="creditando"] {
  font-family: "Manrope", sans-serif;
  color: #002449;
}

.legal-page[data-brand="creditando"] h2,
.legal-page[data-brand="creditando"] h3 {
  color: #002449;
}

.legal-page[data-brand="creditando"] a {
  color: #c6fd00;
}

.legal-page[data-brand="creditando"] .t-header {
  background-color: #c6fd00;
}

/* Crediticio */
.legal-page[data-brand="crediticio"] {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

.legal-page[data-brand="crediticio"] h2,
.legal-page[data-brand="crediticio"] h3 {
  color: #13233a;
}

.legal-page[data-brand="crediticio"] a {
  color: #ffa573;
}

.legal-page[data-brand="crediticio"] .t-header {
  background-color: #ffa573;
}

/* Creditozas */
.legal-page[data-brand="creditozas"] {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

.legal-page[data-brand="creditozas"] h2,
.legal-page[data-brand="creditozas"] h3 {
  color: #000000;
}

.legal-page[data-brand="creditozas"] a {
  color: #96b4e6;
}

.legal-page[data-brand="creditozas"] .t-header {
  background-color: #96b4e6;
}

/* Credizoom */
.legal-page[data-brand="credizoom"] {
  font-family: "AdobeClean", sans-serif;
  color: #000000;
}

.legal-page[data-brand="credizoom"] h2,
.legal-page[data-brand="credizoom"] h3 {
  color: #4eb5a4;
}

.legal-page[data-brand="credizoom"] a {
  color: #4eb5a4;
}

.legal-page[data-brand="credizoom"] .t-header {
  background-color: #4eb5a4;
}

/* Mastercredi */
.legal-page[data-brand="mastercredi"] {
  font-family: "AdobeClean", sans-serif;
  color: #1a1a1a;
}

.legal-page[data-brand="mastercredi"] h2,
.legal-page[data-brand="mastercredi"] h3 {
  color: #1a1a1a;
}

.legal-page[data-brand="mastercredi"] a {
  color: #1a1a1a;
}

.legal-page[data-brand="mastercredi"] .t-header {
  background-color: #93bcfc;
}

.legal-page[data-brand="credihope"] .t-header {
  background-color: #eb8cb9;
}

.legal-page[data-brand="credipay"] .t-header {
  background-color: #1564e9;
}

.legal-page[data-brand="credital"] .t-header {
  background-color: #a318e1;
}

.legal-page[data-brand="creditoplan"] .t-header {
  background-color: #c9e2d8;
}

.legal-page[data-brand="credisolve"] .t-header {
  background-color: #e62095;
}


/* CanalDeuda — follows its own dark/light theme (--cd-* vars from
   ../CanalDeuda/styles.css), instead of a fixed color like every other
   brand above, since its page background flips between black and white. */
.legal-page[data-brand="canaldeuda"] {
  color: var(--cd-text, #ededed);
}

.legal-page[data-brand="canaldeuda"] h2,
.legal-page[data-brand="canaldeuda"] h3 {
  color: var(--cd-primary, #e2d9ff);
}

.legal-page[data-brand="canaldeuda"] a {
  color: var(--cd-secondary, #6b5bcf);
}


/* === styles.css === */
/* LegalPageLayout Styles */

.legal-page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.legal-page-layout__content {
  flex: 1;
  padding-top: 20px;
}


/* === styles.css === */
/* LegalPageLayoutPrivate Styles */

.legal-page-layout-private {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.legal-page-layout-private__content {
  flex: 1;
  padding-top: 20px;
}


/* === styles.css === */
/**
 * ListadoErrores Component Styles
 *
 * Theme-driven styles for the credit scoring errors section
 */

/* Wrapper styles */
.listado-errores-wrapper.hero-container-listado-errores {
  /* Default transparent, will be overridden by brand-specific styles */
  --container-background: transparent;
  background: var(--container-background);
}

/* HeaderPanelUsuario inside the wrapper should be transparent */
.listado-errores-wrapper .header-panel-usuario {
  background: transparent;
}

/* Inner HeroContainer should be transparent */
.hero-container-listado-errores-content {
  background: transparent;
}

.hero-container-listado-errores-content .container__content {
  padding-top: 20px;
  padding-bottom: 100px;
}

.hero-container-listado-errores-content .container__content .container-row {
  gap: var(--hero-row-gap);
}

.hero-container-listado-errores-content .container__content .container-row .col,
.hero-container-listado-errores-content .container__content .container-row .col-img {
  flex: 1;
}

.hero-container-listado-errores-content .container__content .container-row .col {
  justify-content: center;
}

.hero-container-listado-errores-content .container__content .container-col {
  display: flex;
  flex-direction: column;
  gap: var(--hero-row-gap);
  justify-content: flex-start;
}

.hero-container-listado-errores-content .container__content .container-col>* {
  margin: 0;
}

.hero-container-listado-errores-content .container__content .container-col h2 {
  text-wrap: balance;
}

/* ===== CREDIMONEY BRAND ===== */
.listado-errores-wrapper[data-brand="credimoney"] {
  --container-background: #c0e5eb;
}

.listado-errores-wrapper[data-brand="credimoney"] .container-col h2 {
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 39.6px !important;
  font-weight: 300 !important;
  color: #2e1047 !important;
}

.listado-errores-wrapper[data-brand="credimoney"] .container-col p {
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 22.32px !important;
  font-weight: 700 !important;
  color: #2e1047 !important;
}

/* ===== CREDIAHORA BRAND ===== */
.listado-errores-wrapper[data-brand="crediahora"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="crediahora"] .container-col h2 {
  font-family: "Montserrat", sans-serif !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #1d1d1b !important;
}

.listado-errores-wrapper[data-brand="crediahora"] .container-col p {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18.72px !important;
  font-weight: 400 !important;
  color: #1d1d1b !important;
}

/* ===== OLEDINERO BRAND ===== */
.listado-errores-wrapper[data-brand="oledinero"] {
  --container-background: #f5f5f5;
  background: url("/images/bg/fondo-06.png");
  background-position: right;
  background-size: cover;
}

.listado-errores-wrapper[data-brand="oledinero"] .container-col h2 {
  font-family: "Poppins", sans-serif !important;
  font-size: 39.6px !important;
  font-weight: 700 !important;
  color: #032d8f !important;
  line-height: 1.2 !important;
}

.listado-errores-wrapper[data-brand="oledinero"] .container-col p {
  font-family: "Poppins", sans-serif !important;
  font-size: 20.16px !important;
  font-weight: 600 !important;
  color: #032d8f !important;
}

/* ===== CREDITOAMIGO BRAND ===== */
.listado-errores-wrapper[data-brand="creditoamigo"] {
  --container-background: #eeeff4;
}

.listado-errores-wrapper[data-brand="creditoamigo"] .container-col h2 {
  font-family: "Seitu", sans-serif !important;
  font-weight: 500 !important;
  color: #000000 !important;
}

.listado-errores-wrapper[data-brand="creditoamigo"] .container-col p {
  font-family: "Seitu", sans-serif !important;
  font-weight: 300 !important;
  color: #000000 !important;
}

/* ===== CREDICHECK BRAND ===== */
.listado-errores-wrapper[data-brand="credicheck"] {
  --container-background: #edeef4;
}

.listado-errores-wrapper[data-brand="credicheck"] .container-col h2 {
  font-family: "Funnel Display", sans-serif !important;
  font-weight: 500 !important;
  color: #000000 !important;
}

.listado-errores-wrapper[data-brand="credicheck"] .container-col p {
  font-family: "Funnel Display", sans-serif !important;
  font-weight: 300 !important;
  color: #000000 !important;
}

/* ===== CREDITOCLIC BRAND ===== */
.listado-errores-wrapper[data-brand="creditoclic"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="creditoclic"] .container-col h2 {
  font-family: "Harabara", sans-serif !important;
  font-weight: 500 !important;
  color: #073034 !important;
}

.listado-errores-wrapper[data-brand="creditoclic"] .container-col p {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500 !important;
  color: #073034 !important;
}

/* ===== CREDITOPRO BRAND ===== */
.listado-errores-wrapper[data-brand="creditopro"] {
  --container-background: #f3f3f3;
}

.listado-errores-wrapper[data-brand="creditopro"] .container-col h2 {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 800 !important;
  color: #333333 !important;
}

.listado-errores-wrapper[data-brand="creditopro"] .container-col p {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 300 !important;
  color: #333333 !important;
}

/* ===== CREDIATOR BRAND ===== */
.listado-errores-wrapper[data-brand="crediator"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="crediator"] .container-col h2 {
  font-family: "Manrope", sans-serif !important;
  font-size: 31.68px !important;
  font-weight: 800 !important;
  color: #333333 !important;
}

.listado-errores-wrapper[data-brand="crediator"] .container-col p {
  font-family: "Manrope", sans-serif !important;
  font-size: 18.72px !important;
  font-weight: 600 !important;
  color: #333333 !important;
}

/* ===== CREDIFIX BRAND ===== */
.listado-errores-wrapper[data-brand="credifix"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="credifix"] .container-col h2 {
  font-family: "Roboto", sans-serif !important;
  font-weight: 300 !important;
  color: #182d52 !important;
}

.listado-errores-wrapper[data-brand="credifix"] .container-col p {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  color: #182d52 !important;
}

/* ===== CREDISCORE BRAND ===== */
.listado-errores-wrapper[data-brand="crediscore"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="crediscore"] .container-col h2 {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.listado-errores-wrapper[data-brand="crediscore"] .container-col p {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

/* ===== CREDITANDO BRAND ===== */
.listado-errores-wrapper[data-brand="creditando"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="creditando"] .container-col h2 {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  color: #002449 !important;
}

.listado-errores-wrapper[data-brand="creditando"] .container-col p {
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  color: #002449 !important;
}

/* ===== CREDITICIO BRAND ===== */
.listado-errores-wrapper[data-brand="crediticio"] {
  --container-background: #e3f2fd;
}

.listado-errores-wrapper[data-brand="crediticio"] .container-col h2 {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  color: #13233a !important;
}

.listado-errores-wrapper[data-brand="crediticio"] .container-col p {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 300 !important;
  color: #13233a !important;
}

/* ===== CREDITOZAS BRAND ===== */
.listado-errores-wrapper[data-brand="creditozas"] {
  --container-background: rgba(229, 234, 234, 0.5);
}

.listado-errores-wrapper[data-brand="creditozas"] .container-col h2 {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  color: #000000 !important;
}

.listado-errores-wrapper[data-brand="creditozas"] .container-col p {
  font-family: "Manrope", sans-serif !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

/* ===== CREDIZOOM BRAND ===== */
.listado-errores-wrapper[data-brand="credizoom"] {
  --container-background: #ffffff;
}

.listado-errores-wrapper[data-brand="credizoom"] .container-col h2 {
  color: #000000 !important;
}

.listado-errores-wrapper[data-brand="credizoom"] .container-col p {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

.listado-errores-wrapper[data-brand="credizoom"] .col-img img {
  max-width: 560px;
  max-height: 383px;
}

/* ===== MASTERCREDI BRAND ===== */
.listado-errores-wrapper[data-brand="mastercredi"] {
  --container-background: #f7f9fa;
}

.listado-errores-wrapper[data-brand="mastercredi"] .container-col h2 {
  font-family: "Coolvetica", sans-serif !important;
  font-size: 39.6px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.listado-errores-wrapper[data-brand="mastercredi"] .container-col p {
  font-family: "AdobeClean", sans-serif !important;
  font-size: 22.32px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
}

/* ===== BUTTON STYLES ===== */

/* Credimoney: white background with purple text */
.listado-errores-wrapper[data-brand="credimoney"] .btn {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #2e1047 !important;
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 16.56px !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Crediahora: black background with light text */
.listado-errores-wrapper[data-brand="crediahora"] .btn {
  background-color: #1d1d1b !important;
  border-color: #1d1d1b !important;
  color: #f5f5f5 !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 16.56px !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* OleDinero: transparent background with blue border */
.listado-errores-wrapper[data-brand="oledinero"] .btn {
  background-color: transparent !important;
  border: 2px solid #032d8f !important;
  color: #032d8f !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16.56px !important;
  font-weight: 500 !important;
  padding: 12px 25px !important;
  border-radius: 40px 40px 0px 40px !important;
}

/* Creditoamigo */
.listado-errores-wrapper[data-brand="creditoamigo"] .btn {
  background-color: #0000ff !important;
  border: 2px solid #0000ff !important;
  color: #ffffff !important;
  font-family: "Seitu", sans-serif !important;
  font-weight: 400 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Credicheck */
.listado-errores-wrapper[data-brand="credicheck"] .btn {
  background-color: #76bc74 !important;
  border: 2px solid #76bc74 !important;
  color: #ffffff !important;
  font-family: "Funnel Display", sans-serif !important;
  font-weight: 400 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Creditoclic */
.listado-errores-wrapper[data-brand="creditoclic"] .btn {
  background-color: transparent !important;
  border: 2px solid #073034 !important;
  color: #073034 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Creditopro */
.listado-errores-wrapper[data-brand="creditopro"] .btn {
  background-color: #333333 !important;
  border: 2px solid #333333 !important;
  color: #f3f3f3 !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Crediator */
.listado-errores-wrapper[data-brand="crediator"] .btn {
  background-color: #f2d5e0 !important;
  border: 2px solid transparent !important;
  color: #333333 !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Credifix */
.listado-errores-wrapper[data-brand="credifix"] .btn {
  background-color: #96b4e6 !important;
  border: 2px solid transparent !important;
  color: #182d52 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
}

/* Crediscore */
.listado-errores-wrapper[data-brand="crediscore"] .btn {
  background-color: #907ee8 !important;
  border: 2px solid transparent !important;
  color: #ffffff !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Creditando */
.listado-errores-wrapper[data-brand="creditando"] .btn {
  background-color: transparent !important;
  border: 2px solid #002449 !important;
  color: #002449 !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 0 !important;
}

/* Crediticio */
.listado-errores-wrapper[data-brand="crediticio"] .btn {
  background-color: #13233a !important;
  border: 2px solid #13233a !important;
  color: #ffa573 !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 40px !important;
}

/* Creditozas */
.listado-errores-wrapper[data-brand="creditozas"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #96b4e6 !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Credizoom */
.listado-errores-wrapper[data-brand="credizoom"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 999px !important;
}

/* Mastercredi */
.listado-errores-wrapper[data-brand="mastercredi"] .btn {
  background-color: #1a1a1a !important;
  border: none !important;
  color: #e2e8ed !important;
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 10px !important;
}

@media (width >=1024px) {
  .hero-container-listado-errores-content {
    --row-image-max-width: 80%;
  }
}


/* === index.css === */
.loader-bg {
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 15;
    padding: 20px;
    overflow: hidden;
    svg {
        fill: var(--color-brand-primary);
    }
}

/* === styles.css === */
/**
 * LoaderCircle Component Styles
 *
 * Full-screen overlay for loading spinner.
 * Includes fallback CSS spinner animation.
 */

/* Overlay fullscreen */
.loader-container {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  z-index: 15;
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

/* Fallback spinner simple */
.loader-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
  border: 6px solid rgba(0, 0, 0, 0.1);
  border-top-color: #48b348;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Brand-specific fallback spinner colors */
.loader-container[data-brand='credimoney'] .loader-ring {
  border-top-color: #2e1047;
}

.loader-container[data-brand='crediahora'] .loader-ring {
  border-top-color: #95c11f;
}

.loader-container[data-brand='oledinero'] .loader-ring {
  border-top-color: #3875fc;
}


/* === LoaderMessage.css === */
.loader-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dots-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots-loader span {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background-color: #333;
  border-radius: 50%;
  display: inline-block;
  animation: dotsAnimation 1.4s infinite ease-in-out both;
}

.dots-loader span:nth-child(1) {
  animation-delay: -0.32s;
}
.dots-loader span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes dotsAnimation {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}


/* === LoadingButton.css === */
.btn-check-payment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  margin-top: 1.5rem;
  transition: all 0.3s ease;
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
}

.btn-check-payment.disabled,
.btn-check-payment:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.btn-check-payment.loading {
  cursor: wait;
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* === styles.css === */
/**
 * LoadingButton Styles
 *
 * Theme-driven button styling using semantic design tokens.
 *
 * Semantic Tokens Used:
 * - --color-brand-secondary: Primary button background
 * - --color-brand-primary: Primary button text
 * - --color-brand-primaryLight: Hover state background
 * - --color-surface-muted: Disabled state background
 * - --color-text-disabled: Disabled state text
 * - --spacing-xs, --spacing-sm: Button padding
 * - --font-size-base: Button font size
 * - --font-weight-bold: Button font weight
 * - --radius-lg: Button border radius
 * - --transition-duration-normal: Transition timing
 */

.loading-button {
  /* Position and layout */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;

  /* Themed properties - using semantic design tokens */
  background-color: var(--color-brand-secondary);
  color: var(--color-brand-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-lg);
  transition: all var(--transition-duration-normal) ease;

  /* Non-themed properties */
  cursor: pointer;
  border: none;
  outline: none;
}

/* Hover state - only applies when not disabled or loading */
.loading-button:not(.disabled):not(.loading):hover {
  background-color: var(--color-brand-primaryLight);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Focus state for accessibility */
.loading-button:focus-visible {
  outline: 2px solid var(--color-brand-primaryLight);
  outline-offset: 2px;
}

/* Disabled state */
.loading-button.disabled,
.loading-button:disabled {
  background-color: var(--color-surface-muted);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.loading-button.disabled:hover,
.loading-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Loading state */
.loading-button.loading {
  cursor: wait;
}

/* Spinner animation */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--color-surface-elevated);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .loading-button {
    font-size: calc(var(--font-size-base) * 0.9);
    padding: calc(var(--spacing-xs) * 0.8) calc(var(--spacing-sm) * 0.8);
  }
}


/* === styles.css === */
/**
 * MaximaSeguridad Styles
 *
 * Component-specific styling using semantic design tokens.
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Primary brand color for overlay backgrounds, button text, headings
 * - --color-brand-secondary: Secondary color for icon, button backgrounds
 * - --color-brand-primaryLight: Light brand color for OleDinero/Credimoney overlay backgrounds
 * - --color-text-primary: Body text, list item text
 * - --font-weight-regular: Regular font weight for list items
 * - --font-weight-bold: Bold font weight for overlay text
 */

:root {
  & .maxima-seguridad {
    --maxima-seguridad-flex-direction: column;
    --maxima-seguridad-padding-top: 120px;
    --maxima-seguridad-padding-bottom: 120px;
    --maxima-seguridad-padding-horizontal: 15px;
    --maxima-seguridad-body-flex-gap: 25px;
    --maxima-seguridad-body-border-radius: 300px;
    --maxima-seguridad-body-background-color: #fafafa;
    --maxima-seguridad-body-height: auto;
    --maxima-seguridad-list-flex-gap: 20px;
    --maxima-seguridad-list-item-flex-gap: 15px;
    --maxima-seguridad-list-item-font-size: 1.1rem;
    --maxima-seguridad-list-item-line-height: 1.5rem;
    --maxima-seguridad-corner-icon-width: 75px;
    --maxima-seguridad-corner-icon-height: auto;
    --maxima-seguridad-corner-icon-left: 0;
    --maxima-seguridad-corner-icon-top: 0;

    --maxima-seguridad-content-width: auto;
    --maxima-seguridad-body-padding-right: var(--maxima-seguridad-padding-horizontal);
    --maxima-seguridad-overlay-padding-vertical: 70px;
    --maxima-seguridad-overlay-padding-horizontal: 20px;
    --maxima-seguridad-overlay-width: auto;
    --maxima-seguridad-overlay-height: auto;
    --maxima-seguridad-overlay-margin-top: -80px;
    --maxima-seguridad-overlay-margin-right: var(--maxima-seguridad-padding-horizontal);
    --maxima-seguridad-overlay-margin-left: var(--maxima-seguridad-padding-horizontal);
    --maxima-seguridad-overlay-button-padding: 5px 15px;
    --maxima-seguridad-overlay-border-radius: 300px 300px 0 0;
    --maxima-seguridad-overlay-column-flex-gap: 20px;
    --maxima-seguridad-overlay-background-color: var(--color-brand-primary);
    --maxima-seguridad-overlay-text-font-size: 16px;
    --maxima-seguridad-overlay-text-width: 70%;
    --maxima-seguridad-overlay-image-max-height: 150px;
    --maxima-seguridad-overlay-image-margin-top: 0;
    --maxima-seguridad-overlay-icon-color: var(--color-brand-secondary);
    --maxima-seguridad-overlay-button-background: var(--color-brand-secondary);
    --maxima-seguridad-overlay-button-border-color: var(--color-brand-secondary);
    --maxima-seguridad-overlay-button-text-color: var(--color-brand-primary);

    &.container {
      --container-title-h2-color: var(--color-brand-primary);
      --container-text-color: var(--color-text-primary);

      & .container__content {
        --container-content-padding-vertical: 70px;
        --container-content-padding-bottom: 70px;

        & .maxima-seguridad__body {
          & .maxima-seguridad__corner-icon {
            transform: translate(30px, -35px);
          }
        }
      }
    }
  }

  /* Credimoney bg-gradient: background image visible en mobile y desktop */
  & .maxima-seguridad--credimoney.bg-gradient {
    background-image: url("/images/bg/fondo.png");
    background-size: cover;
    background-position: center;
  }
}

@media (width >=768px) {
  :root {
    & .maxima-seguridad {
      &.container {
        & .container__content {
          --container-content-padding-vertical: 100px;
          --container-content-padding-bottom: 100px;
        }
      }

      --maxima-seguridad-padding-top: 75px;
      --maxima-seguridad-padding-bottom: 75px;
      --maxima-seguridad-padding-horizontal: 50px;
      --maxima-seguridad-body-padding-right: 100px;
      --maxima-seguridad-corner-icon-left: 0;
      --maxima-seguridad-flex-direction: row;
      --maxima-seguridad-overlay-margin-top: 0;
      --maxima-seguridad-overlay-margin-right: 0;
      --maxima-seguridad-overlay-padding-horizontal: 20px;
      --maxima-seguridad-overlay-padding-vertical: 30px;
      --maxima-seguridad-overlay-width: 350px;
      --maxima-seguridad-overlay-margin-left: -50px;
      --maxima-seguridad-body-border-radius: 30px 0 0 30px;
      --maxima-seguridad-overlay-border-radius: 0 30px 30px 0;
      --maxima-seguridad-overlay-image-max-height: 200px;
      --maxima-seguridad-overlay-image-margin-top: 0px;
      --maxima-seguridad-overlay-text-width: 100%;
      --maxima-seguridad-corner-icon-width: 75px;
    }

    /* Credimoney-specific overrides to match production */
    & .maxima-seguridad--credimoney {
      &.container {
        & .container__content {
          --container-content-padding-vertical: 70px;
          --container-content-padding-bottom: 70px;
        }
      }

      --maxima-seguridad-padding-top: 68px;
      --maxima-seguridad-padding-bottom: 68px;
      --maxima-seguridad-padding-horizontal: 120px;
      --maxima-seguridad-body-padding-right: 300px;
      --maxima-seguridad-body-flex-gap: 25px;
      --maxima-seguridad-body-border-radius: 300px 0 0 300px;
      --maxima-seguridad-body-background-color: #fafafa;
      --maxima-seguridad-overlay-width: 250px;
      --maxima-seguridad-overlay-margin-left: -125px;
      --maxima-seguridad-overlay-border-radius: 300px 300px 0 0;
      --maxima-seguridad-overlay-column-flex-gap: 20px;
      --maxima-seguridad-corner-icon-width: 100px;
      --maxima-seguridad-corner-icon-height: 93px;
    }

      /* Credizoom: overlay uses secondary (lavender), button uses primaryDark (deep purple) */
      & .maxima-seguridad--credizoom {
      --maxima-seguridad-overlay-background-color: var(--color-text-primary);
      --maxima-seguridad-overlay-padding-horizontal:30px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
      --maxima-seguridad-overlay-border-radius: 20px;
      --maxima-seguridad-body-border-radius : 30px;
    }


      /* Crediscore: overlay uses secondary (lavender), button uses primaryDark (deep purple) */
    & .maxima-seguridad--crediscore {
      --maxima-seguridad-overlay-background-color: var(--color-brand-primary);
      --maxima-seguridad-overlay-padding-horizontal:30px;
      --maxima-seguridad-overlay-image-max-height: auto;
      --maxima-seguridad-corner-icon-width: 100px;
      --maxima-seguridad-corner-icon-height: 84px;
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
      --maxima-seguridad-overlay-border-radius: 0px 999px 999px 0px;
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-overlay-image-margin-top: 0px;
      --maxima-seguridad-corner-icon-top: -20px;
      --maxima-seguridad-overlay-image-margin-top: -80px;
    }

     /* Crediticio: overlay uses secondary (lavender), button uses primaryDark (deep purple) */
    & .maxima-seguridad--crediticio {
      --maxima-seguridad-overlay-background-color: var(--color-brand-secondary);
      --maxima-seguridad-overlay-padding-horizontal:30px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
      --maxima-seguridad-overlay-border-radius: 0px 999px 999px 0px;
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-overlay-image-margin-top: 0px;
    }

    /* Crediahora-specific: overlay uses secondary color (green), not primary (dark) */
    & .maxima-seguridad--crediahora {
      --maxima-seguridad-body-background-color: #ffffff;
      --maxima-seguridad-overlay-background-color: var(--color-brand-secondary);
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
      /* Button uses primary color (black) background with white text */
      --maxima-seguridad-overlay-button-background: var(--color-brand-primary);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primary);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
    }

    /* Creditopro-specific: same layout as crediahora (overlay tangent to body) */
    & .maxima-seguridad--creditopro {
      --maxima-seguridad-overlay-width: 300px;
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
    }

    /* OleDinero-specific: negative margin for overlay */
    & .maxima-seguridad--oledinero {
      --maxima-seguridad-overlay-margin-left: -125px;
      --maxima-seguridad-body-height: 427.4px;
    }

    /* Credimoney bg-gradient uses background image */
    & .maxima-seguridad--credimoney.bg-gradient {
      background-image: url("/images/bg/fondo.png");
      background-size: cover;
      background-position: center;
    }

    /* Credimoney overlay background color */
    & .maxima-seguridad--credimoney {
      --maxima-seguridad-overlay-background-color: rgb(192, 229, 235);
    }

    /* OleDinero bg-gradient uses background image */
    & .maxima-seguridad--oledinero.bg-gradient {
      background-image: url("/images/bg/fondo-05.png");
    }

    /* Crediator-specific:*/

    & .maxima-seguridad--creadiator {
        --maxima-seguridad-overlay-width: 300px;
    }

    /* Crediahora-specific: overlay uses secondary color (green), not primary (dark) */
    & .maxima-seguridad--credisolve {
      --maxima-seguridad-overlay-background-color: var(--color-brand-secondary);
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
      /* Button uses primary color (black) background with white text */
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
    }

    /* Credital: overlay uses secondary (lavender), button uses primaryDark (deep purple) */
    & .maxima-seguridad--credital {
      --maxima-seguridad-overlay-background-color: var(--color-text-primary);
      --maxima-seguridad-overlay-padding-horizontal:30px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
      --maxima-seguridad-overlay-border-radius: 20px;
      --maxima-seguridad-body-border-radius : 30px;
    }

     /* Credipay: overlay uses secondary (lavender), button uses primaryDark (deep purple) */
    & .maxima-seguridad--credipay {
      --maxima-seguridad-overlay-background-color: var(--color-text-primary);
      --maxima-seguridad-overlay-padding-horizontal:30px;
      --maxima-seguridad-corner-icon-width: 60px;
      --maxima-seguridad-corner-icon-height: 84px;
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: #ffffff;
      --maxima-seguridad-overlay-border-radius: 0px 999px 999px 0px;
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-overlay-image-margin-top: 0px;
    }

       /* Creditoplan-specific: overlay uses secondary color (green), not primary (dark) */
    & .maxima-seguridad--creditoplan {
      --maxima-seguridad-overlay-background-color: var(--color-brand-secondary);
      --maxima-seguridad-overlay-height: 359.6px;
      --maxima-seguridad-body-height: 359.6px;
      --maxima-seguridad-corner-icon-width: 80px;
      --maxima-seguridad-corner-icon-height: 84px;
      
      /* Button uses primary color (black) background with white text */
      --maxima-seguridad-overlay-button-background: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-border-color: var(--color-brand-primaryDark);
      --maxima-seguridad-overlay-button-text-color: var(--color-brand-primaryDark);
    }

  }
}

@media (width >=1024px) {
  :root {
    & .maxima-seguridad {
      --maxima-seguridad-padding-horizontal: 35px;
      --maxima-seguridad-corner-icon-left: 0;
      --maxima-seguridad-content-width: 1000px;
      --maxima-seguridad-overlay-padding-horizontal: 30px;
      --maxima-seguridad-overlay-margin-top: 0;
      --maxima-seguridad-overlay-margin-right: 0;
      --maxima-seguridad-overlay-width: 350px;

      & .container__content {
        --container-content-padding-vertical: 100px;
        --container-content-padding-bottom: 100px;
      }
    }

    /* Credimoney-specific overrides to match production */
    & .maxima-seguridad--credimoney {
      --maxima-seguridad-padding-horizontal: 120px;
      --maxima-seguridad-overlay-width: 250px;

      & .container__content {
        --container-content-padding-vertical: 70px;
        --container-content-padding-bottom: 70px;
      }
    }

    /* Crediahora-specific: use Container's natural max-width instead of fixed width */
    & .maxima-seguridad--crediahora {
      --maxima-seguridad-content-width: 1100px;
      --maxima-seguridad-overlay-height: 359.6px;
    }

    /* Creditopro-specific: same layout as crediahora */
    & .maxima-seguridad--creditopro {
      --maxima-seguridad-content-width: 1100px;
      --maxima-seguridad-overlay-width: 300px;
      --maxima-seguridad-overlay-height: 359.6px;
    }

    /* OleDinero-specific overrides to match production */
    & .maxima-seguridad--oledinero {
      --maxima-seguridad-content-width: 1000px;
      --maxima-seguridad-padding-top: 80px;
      --maxima-seguridad-padding-bottom: 80px;
      --maxima-seguridad-padding-horizontal: 120px;
      --maxima-seguridad-body-padding-right: 150px;
      --maxima-seguridad-body-flex-gap: 25px;
      --maxima-seguridad-body-background-color: #fafafa;
      --maxima-seguridad-body-border-radius: 300px 100px 0 300px;
      --maxima-seguridad-overlay-padding-vertical: 70px;
      --maxima-seguridad-overlay-padding-horizontal: 40px;
      --maxima-seguridad-overlay-width: 237px;
      --maxima-seguridad-overlay-height: 330px;
      --maxima-seguridad-overlay-background-color: var(--color-brand-primaryLight);
      --maxima-seguridad-overlay-border-radius: 200px 200px 200px 0;
      --maxima-seguridad-corner-icon-width: 100px;
      --maxima-seguridad-corner-icon-height: 100px;
      --maxima-seguridad-overlay-column-flex-gap: 20px;
      --maxima-seguridad-overlay-margin-left: -125px;
      --maxima-seguridad-overlay-icon-color: rgb(3, 45, 143);
      --maxima-seguridad-overlay-button-background: rgb(202, 211, 255);
      --maxima-seguridad-overlay-button-border-color: rgb(3, 45, 143);
      --maxima-seguridad-overlay-button-text-color: rgb(3, 45, 143);
      --maxima-seguridad-body-height: 427.4px;
    }
  }
}

@media (width >=1400px) {
  :root {
    & .maxima-seguridad {
      --maxima-seguridad-content-width: 1100px;
      --maxima-seguridad-overlay-padding-vertical: 30px;
      --maxima-seguridad-overlay-padding-horizontal: 20px;
      --maxima-seguridad-overlay-width: 350px;
    }

    /* Credimoney-specific overrides to match production */
    & .maxima-seguridad--credimoney {
      --maxima-seguridad-overlay-width: 250px;
      --maxima-seguridad-overlay-padding-vertical: 82px;
      --maxima-seguridad-overlay-padding-horizontal: 40px;
      --maxima-seguridad-overlay-background-color: rgb(192, 229, 235);
    }

    /* Crediahora-specific: use Container's natural max-width instead of fixed width */
    & .maxima-seguridad--crediahora {
      --maxima-seguridad-content-width: 1100px;
      --maxima-seguridad-overlay-height: 359.6px;
    }

    /* Creditopro-specific: same layout as crediahora */
    & .maxima-seguridad--creditopro {
      --maxima-seguridad-content-width: 1100px;
      --maxima-seguridad-overlay-width: 300px;
      --maxima-seguridad-overlay-height: 359.6px;
    }

    /* OleDinero-specific: keep same overrides as 1024px */
    & .maxima-seguridad--oledinero {
      --maxima-seguridad-content-width: 1100px;
      --maxima-seguridad-overlay-padding-vertical: 70px;
      --maxima-seguridad-overlay-padding-horizontal: 40px;
      --maxima-seguridad-overlay-width: 237px;
      --maxima-seguridad-overlay-height: 330px;
      --maxima-seguridad-overlay-margin-left: -125px;
      --maxima-seguridad-overlay-icon-color: rgb(3, 45, 143);
      --maxima-seguridad-overlay-button-background: rgb(202, 211, 255);
      --maxima-seguridad-overlay-button-border-color: rgb(3, 45, 143);
      --maxima-seguridad-overlay-button-text-color: rgb(3, 45, 143);
      --maxima-seguridad-body-height: 427.4px;
      --maxima-seguridad-overlay-background-color: var(--color-brand-primaryLight);
    }

     /* Credital-specific: keep same overrides as 1024px */
    & .maxima-seguridad--credital {
        --maxima-seguridad-overlay-padding-horizontal: 30px;
        --maxima-seguridad-overlay-column-flex-gap:20px;
        --maxima-seguridad-overlay-image-margin-top: 0px;
    }
  }
}

:root {
  & .maxima-seguridad {
    & .img-logo {
      max-width: 150px;
    }

    & .container__content {
      display: flex;
      flex-direction: var(--maxima-seguridad-flex-direction);
      gap: 0;
      align-items: center;
      /* Default: center for OleDinero */

      & .maxima-seguridad__body {
        position: relative;
        background: var(--maxima-seguridad-body-background-color);
        padding: var(--maxima-seguridad-padding-top) var(--maxima-seguridad-body-padding-right) var(--maxima-seguridad-padding-bottom) var(--maxima-seguridad-padding-horizontal);
        border-radius: var(--maxima-seguridad-body-border-radius);
        min-height: var(--maxima-seguridad-body-height);
        max-height: var(--maxima-seguridad-body-height);
        /* border: 2px solid var(--color-text-primary); */

        display: flex;
        flex-direction: column;
        gap: var(--maxima-seguridad-body-flex-gap);

        & .maxima-seguridad__corner-icon {
          position: absolute;
          width: var(--maxima-seguridad-corner-icon-width);
          height: var(--maxima-seguridad-corner-icon-height);
          left: var(--maxima-seguridad-corner-icon-left);
          top: var(--maxima-seguridad-corner-icon-top);

          & img {
            max-width: 100%;
            max-height: 100%;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        & .maxima-seguridad__title {
          text-align: center;
        }

        & ul {
          display: flex;
          flex-direction: column;
          gap: var(--maxima-seguridad-list-flex-gap);
          padding: 0;
          margin: 0;
          list-style: none;

          & li {
            display: flex;
            gap: var(--maxima-seguridad-list-item-flex-gap);
            align-items: start;

            & span.maxima-seguridad__list__item-icon {
              display: grid;
              min-width: 35px;
              place-items: center;

              & svg {
                min-width: 15px;
                max-width: 100%;
                max-height: 20px;
                color: var(--color-brand-primary);
              }

              & img {
                max-width: 30px;
                max-height: 30px;
                object-fit: contain;
              }
            }

            & span.maxima-seguridad__list__item-text {
              flex-grow: 1;
              font-size: var(--maxima-seguridad-list-item-font-size);
              line-height: var(--maxima-seguridad-list-item-line-height);
              font-weight: var(--font-weight-regular);

              & img {
                max-height: 20px;
              }

              & span {
                color: var(--color-text-primary);
              }

              & .maxima-seguridad__trust-logo {
                width: 84px;
                height: 20px;
                margin-top: 8px;
                display: block;
              }
            }
          }
        }
      }

      & .maxima-seguridad__overlay {
        background-color: var(--maxima-seguridad-overlay-background-color);
        margin-right: var(--maxima-seguridad-overlay-margin-right);
        margin-top: var(--maxima-seguridad-overlay-margin-top);
        margin-left: var(--maxima-seguridad-overlay-margin-left);
        border-radius: var(--maxima-seguridad-overlay-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--maxima-seguridad-overlay-column-flex-gap);
        text-align: center;
        padding: var(--maxima-seguridad-overlay-padding-vertical) var(--maxima-seguridad-overlay-padding-horizontal);
        min-width: var(--maxima-seguridad-overlay-width);
        max-width: var(--maxima-seguridad-overlay-width);
        min-height: var(--maxima-seguridad-overlay-height);
        max-height: var(--maxima-seguridad-overlay-height);
        z-index: 1;
        /* border: 2px solid var(--color-text-primary); */

        & svg {
          color: var(--maxima-seguridad-overlay-icon-color);
          max-width: 60px;
        }

        & img {
          max-width: 140px;
          max-height: var(--maxima-seguridad-overlay-image-max-height);
          transform-origin: right bottom;
          margin-top: var(--maxima-seguridad-overlay-image-margin-top);
        }

        & p {
          margin: 0;
          font-size: var(--maxima-seguridad-overlay-text-font-size);
          width: var(--maxima-seguridad-overlay-text-width);
          text-wrap: balance;
          font-weight: var(--font-weight-bold);
          color: var(--color-text-primary);

          & strong {
            color: var(--color-text-primary);
            font-weight: var(--font-weight-bold);
          }
        }

        & .btn {
          padding: var(--maxima-seguridad-overlay-button-padding);
          text-transform: capitalize;
          background: var(--maxima-seguridad-overlay-button-background);
          border-color: var(--maxima-seguridad-overlay-button-border-color);
          color: var(--maxima-seguridad-overlay-button-text-color);
        }
      }
    }
  }

}

@media (width >=768px) {
  :root {
    & .maxima-seguridad {
      &.container {
        & .container__content {
          position: relative;

          & .maxima-seguridad__body {
            margin: 0 auto;
            justify-content: center;

            /* & ul {
              & li {
                & span.maxima-seguridad__list__item-icon {
                  margin-left: 30px;
                }
              }
            } */

            & .maxima-seguridad__corner-icon {
              margin-left: 0;
            }

            & .maxima-seguridad__title {
              text-align: left;
            }
          }
        }
      }

      /* Credimoney-specific: use border-box to match production */
      &.maxima-seguridad--credimoney {
        & .container__content {
          align-items: stretch;
          /* Overlay height matches body height */

          & .maxima-seguridad__overlay {
            box-sizing: border-box;
          }

          & .maxima-seguridad__body {
            box-sizing: border-box;

            & ul {
              & li {
                & span.maxima-seguridad__list__item-icon {
                  margin-left: 0;
                  /* Credimoney doesn't have left margin */
                }
              }
            }
          }
        }
      }

      /* Crediahora-specific: use border-box for overlay to match production */
      &.maxima-seguridad--crediahora {
         background: var(--color-brand-primaryLight);
        & .container__content {
          align-items: stretch;
          /* Overlay height matches body height */

          & .maxima-seguridad__overlay {
            box-sizing: border-box;
            justify-content: center;
          }

          & .maxima-seguridad__body {
            box-sizing: border-box;
          }
        }
      }

      /* Creditopro-specific: same layout as crediahora (overlay tangent to body) */
      &.maxima-seguridad--creditopro {
        & .container__content {
          align-items: stretch;
          /* Overlay height matches body height */

          & .maxima-seguridad__overlay {
            box-sizing: border-box;
          }

          & .maxima-seguridad__body {
            box-sizing: border-box;
          }
        }
      }

      /* OleDinero-specific: use border-box to match production */
      &.maxima-seguridad--oledinero {
        & .container__content {
          & .maxima-seguridad__overlay {
            box-sizing: border-box;
          }

          & .maxima-seguridad__body {
            box-sizing: border-box;

            /* OleDinero has larger list icons than Crediahora */
            & ul li span.maxima-seguridad__list__item-icon {
              & img {
                max-width: 25px;
                max-height: 30px;
              }

              & svg {
                max-width: 25px;
                max-height: 30px;
              }
            }
          }
        }
      }

      /* Crefix-specific: use border-box for overlay to match production */
      &.maxima-seguridad--credifix {
        & .container__content {
          align-items: stretch;
          /* Overlay height matches body height */

          & .maxima-seguridad__overlay {
            box-sizing: border-box;
          }

          & .maxima-seguridad__body {
            box-sizing: border-box;
          }
        }
      }

      /* Credital-specific: same layout as credisolve (overlay tangent to body) */
      &.maxima-seguridad--credital {
        & .container__content {
        
          & .maxima-seguridad__overlay {
            box-sizing: border-box;
          }

          & .maxima-seguridad__body {
            box-sizing: border-box;
          }
        }
      }

    
    }
  }
}

@media (width >=1024px) {
  :root {
    & .maxima-seguridad {
      &.container {
        & .container__content {
          & .maxima-seguridad__body {
            & .maxima-seguridad__corner-icon {
              transform: translate(30px, -35px);
            }
          }
        }
      }
    }
  }
}

/* =====================================================
   Brand-specific styles for new brands
   ===================================================== */

@media (max-width: 768px) {
  /* Crediahora brand styles */

  [data-brand="crediahora"] .hero-container-panel-control h2{
    margin-bottom: 0;
  }

  [data-brand="crediahora"] .hero-container-panel-control p {
    margin-bottom: 0;
    margin-top: 0;
  }

  .home-hero-header--crediahora{
      & .home-hero-header__title {
        font-size: 34px;
        margin-top: 0;
        margin-bottom: 0;
        & em{
          color:var(--color-brand-secondary);
        }
      }

      & p {
        margin:0;
        font-size: 20px !important;
      }
  }

  .maxima-seguridad[data-brand="crediahora"] {
    & .container__content {
      background: var(--maxima-seguridad-body-background-color);
      & .maxima-seguridad__body {
        background: var(--container-background);
        border-radius: 25px 25px 0 0;
        padding-top: 70px;

        & .maxima-seguridad__corner-icon {
          transform: translate(30px, -25px) !important;
          & img {
            width: 40px;
          }
        }
      }
      & .maxima-seguridad__overlay {
        width: 100%;
        border-radius: 0 0 25px 25px;
        background-color: var(--color-brand-secondary);
        padding: 50px 20px 20px;
        gap: 15px;
        & img {
          max-width: 170px;
          margin-bottom: 20px;
        }
        & .btn {
          background: var(--color-brand-primary);
          border-color: var(--color-brand-primary);
          color: var(--color-surface-overlay);
          padding: 5px 40px;
        }
      }

  
    }
  }

   /* Credifix brand styles */

  .home-hero-header--credifix{
      & .home-hero-header__title {
        font-size: 34px !important;
        margin-top: 0;
        margin-bottom: 0;
        & em{
          color:var(--color-brand-secondary);
          font-weight: 700;
        }
      }

      & p {
        margin:0;
        font-size: 20px !important;
      }
  }

   /* Credimoney brand styles */

  .home-hero-header--credimoney{
      & .home-hero-header__title {
        font-size: 34px !important;
        margin-top: 0;
        margin-bottom: 0;
      }

      & p {
        margin:0;
        font-size: 20px !important;
      }
  }

}
/* Creditopro brand styles */
.maxima-seguridad[data-brand="creditopro"] {
  &.bg-gradient {
    background: linear-gradient(135deg, rgb(97, 142, 190) 30%, rgb(203, 212, 223) 70%) !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__title h2 {
        color: rgb(69, 112, 174) !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 800 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: rgb(51, 51, 51) !important;
        font-family: "Open Sans", sans-serif !important;

        & span {
          color: rgb(51, 51, 51) !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: rgb(69, 112, 174) !important;
      }
    }

    & .maxima-seguridad__overlay {
      --maxima-seguridad-overlay-background-color: #1B4A82;
      background-color: #1B4A82 !important;
      justify-content: center;

      & p {
        color: rgb(243, 243, 243) !important;

        & strong {
          color: rgb(243, 243, 243) !important;
        }
      }

      & svg {
        color: rgb(243, 243, 243) !important;
      }

      & .btn {
        background-color: rgb(243, 243, 243) !important;
        border-color: rgb(243, 243, 243) !important;
        color: rgb(69, 112, 174) !important;
        border-radius: 999px !important;
      }
    }
  }
}

/* Creditoclic brand styles */
.maxima-seguridad[data-brand="creditoclic"] {
  &.bg-gradient {
    background: linear-gradient(135deg, rgb(173, 239, 69) 30%, rgb(213, 225, 226) 70%) !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__title h2 {
        color: rgb(122, 196, 174) !important;
        font-family: Harabara, sans-serif !important;
        font-weight: 500 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: rgb(7, 48, 52) !important;
        font-family: Montserrat, sans-serif !important;

        & span {
          color: rgb(7, 48, 52) !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: rgb(122, 196, 174) !important;
      }
    }

    & .maxima-seguridad__overlay {
      --maxima-seguridad-overlay-background-color: #EAEEEF;
      background-color: #EAEEEF !important;
      border-radius: 20px !important;

      & p {
        color: rgb(7, 48, 52) !important;

        & strong {
          color: rgb(7, 48, 52) !important;
        }
      }

      & svg {
        color: #AF9FCD !important;
      }

      & .btn {
        background-color: transparent !important;
        border-color: rgb(7, 48, 52) !important;
        color: rgb(7, 48, 52) !important;
        border-radius: 999px !important;
      }
    }
  }
}

/* Creditoamigo brand styles */
.maxima-seguridad[data-brand="creditoamigo"] {
  &.bg-gradient {
    background: linear-gradient(135deg, rgb(0, 0, 255), rgba(0, 0, 255, 0.2)) !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__title h2 {
        color: rgb(0, 0, 255) !important;
        font-family: Seitu, sans-serif !important;
        font-weight: 500 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: rgb(0, 0, 0) !important;
        font-family: Seitu, sans-serif !important;

        & span {
          color: rgb(0, 0, 0) !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: rgb(0, 0, 255) !important;
      }
    }

    & .maxima-seguridad__overlay {
      --maxima-seguridad-overlay-background-color: #e3e5f6;
      background-color: #e3e5f6 !important;
      border-radius: 20px !important;

      & p {
        color: rgb(0, 0, 0) !important;

        & strong {
          color: rgb(0, 0, 0) !important;
        }
      }

      & svg {
        color: #0000ff !important;
      }

      & .btn {
        background-color: #0000ff !important;
        border: 2px solid #0000ff !important;
        color: rgb(255, 255, 255) !important;
        border-radius: 40px !important;
      }
    }

    @media (max-width: 768px) {
      & .maxima-seguridad__overlay{
          gap: 15px;
          padding: 40px 20px;
      }

    }
  }
}

/* Credicheck brand styles */
.maxima-seguridad[data-brand="credicheck"] {
  &.bg-gradient {
    background: linear-gradient(135deg, #76bc74, rgba(118, 188, 116, 0.2)) !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      border-radius: 30px !important;
      & .maxima-seguridad__title h2 {
        color: #76bc74 !important;
        font-family: "Funnel Display", sans-serif !important;
        font-weight: 500 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: rgb(0, 0, 0) !important;
        font-family: "Funnel Display", sans-serif !important;

        & span {
          color: rgb(0, 0, 0) !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #76bc74 !important;
      }
    }

    & .maxima-seguridad__overlay {
      --maxima-seguridad-overlay-background-color: #edeef4;
      background-color: #edeef4 !important;
      border-radius: 50% 50% 0 0 !important;

      & p {
        color: rgb(0, 0, 0) !important;

        & strong {
          color: rgb(0, 0, 0) !important;
        }
      }

      & svg {
        color: #76bc74 !important;
      }

      & .btn {
        background-color: #76bc74 !important;
        border: 2px solid #76bc74 !important;
        color: rgb(255, 255, 255) !important;
        border-radius: 40px !important;
      }
    }
  }
}

/* Crediator brand styles */
.maxima-seguridad[data-brand="crediator"] {
  &.bg-gradient {
    background-image: url("/images/bg/bg-maxima-seguridad-1.png") !important;
    background-size: cover !important;
    background-position: center;
  }

  & .container__content {
    & .maxima-seguridad__body {
      width: 100%;
      & .maxima-seguridad__title h2 {
        color: #f55f99 !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 800 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        font-weight: 700;
        & span {
          color: #333333 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #f55f99 !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #f2f2f2 !important;
      border-radius: 20px !important;

      & p {
        color: #333333 !important;

        & strong {
          color: #f55f99 !important;
        }
      }

      & svg {
        color: #333333 !important;
      }

      & .btn {
        background-color: rgb(147, 199, 191) !important;
        border: none !important;
        color: #333333 !important;
        border-radius: 999px !important;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: normal !important;

      & .maxima-seguridad__body {
        border-radius: 30px !important;
        padding: 75px 100px 75px 35px !important;
        box-sizing: border-box !important;
      }

    }
  }
}

/* Credifix brand styles */
.maxima-seguridad[data-brand="credifix"] {
  &.bg-gradient {
    background-image: url("/images/bg/bg-header-2.png") !important;
    background-size: cover !important;
    background-position: center !important;

    @media (max-width: 768px) {
      background-position: right !important;
      transform: scaleX(-1);

      & > * {
        transform: scaleX(-1);
      }
    }
  }

  & .container__content {
    & .maxima-seguridad__body {
      & h2.maxima-seguridad__title {
        color: #182d52 !important;
        font-family: "Roboto", sans-serif !important;
        font-feature-settings: normal !important;
        font-size: 31.68px !important;
        font-synthesis-position: none !important;
        font-synthesis-small-caps: none !important;
        font-synthesis-style: none !important;
        font-synthesis-weight: none !important;
        font-variation-settings: normal !important;
        font-weight: 300 !important;
        margin: 0;
      }

      & .maxima-seguridad__corner-icon{
        transform: translate(30px, -15px) !important;

        & img{
              max-width: 20px;
        }
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #182d52 !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: bold !important;
        & span {
          color: #182d52 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #ff0086 !important;
      }

      & ul li:nth-child(1) span.maxima-seguridad__list__item-icon :is(svg, img) {
        width: 23px !important;
        height: 28px !important;
      }

      & ul li:nth-child(2) span.maxima-seguridad__list__item-icon :is(svg, img) {
        width: 22px !important;
        height: 28px !important;
      }

      & ul li:nth-child(3) span.maxima-seguridad__list__item-icon :is(svg, img) {
        width: 23px !important;
        height: 24px !important;
      }

      & ul li:nth-child(4) span.maxima-seguridad__list__item-icon :is(svg, img) {
        width: 18px !important;
        height: 30px !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: var(--color-brand-secondary) !important;
      border-top-right-radius: 20px !important;
      border-bottom-right-radius: 20px !important;
      & p {
        color: #ffffff !important;

        & strong {
          color: #ffffff !important;
        }
      }

       & img {
          margin-top: -55px;
          max-height: 280px;
          height: 280px;
       }

      & svg {
        color: #ff0086 !important;
        width: 54px !important;
        height: 43.2px !important;
        max-width: none !important;
      }

      & .btn {
        background-color: #96b4e6 !important;
        border: none !important;
        color: #182d52 !important;
        border-radius: 10px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        font-family: "Roboto", sans-serif !important;
        font-feature-settings: normal !important;
        font-size: 14.4px !important;
        font-synthesis-position: none !important;
        font-synthesis-small-caps: none !important;
        font-synthesis-style: none !important;
        font-synthesis-weight: none !important;
        font-variation-settings: normal !important;
        font-weight: 600 !important;
      }
    }
  }

}

/* Crediscore brand styles */
.maxima-seguridad[data-brand="crediscore"] {
  &.bg-gradient {
    background-image: url("/images/bg/bg-maxima-seguridad-5.png") !important;
    background-size: cover !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
    
      & ul li span.maxima-seguridad__list__item-icon img {
        filter: invert(58%) sepia(27%) saturate(1086%) hue-rotate(212deg) brightness(96%) contrast(93%) !important;
      }


    

    }

    & .maxima-seguridad__overlay {
    
      & p {
        color: #000000 !important;

        & strong {
          color: #000000 !important;
        }
      }

      & svg {
        color: #907ee8 !important;
      }

      & .btn {
        background-color: #C5E5FC !important;
        border: none !important;
        color: #000 !important;
        border-radius: 999px !important;
      }

      & img{
        max-width: 180px;
      }
    }
  }



  @media (width >=768px) {
    & .container__content {
      align-items: center !important;

      & .maxima-seguridad__overlay {
            padding: 0px 50px 0px 0px;
            gap: 15px;
            justify-content: center;
      }
    }
  }
}

/* Creditando brand styles */
.maxima-seguridad[data-brand="creditando"] {
  &.bg-gradient {
    background-image: url("/images/bg/bg-maxima-seguridad-2.png") !important;
    background-size: cover !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__title h2 {
        font-weight: 800 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #002449 !important;
        font-family: "Manrope", sans-serif !important;

        & span {
          color: #002449 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #c6fd00 !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #ddecee !important;
      border-radius: 0px !important;

      & p {
        color: #002449 !important;

        & strong {
          color: #002449 !important;
        }
      }

      & svg {
        color: #c6fd00 !important;
      }

      & .btn {
        background-color: transparent !important;
        border: 2px solid #002449 !important;
        color: #002449 !important;
        border-radius: 0px !important;
      }
    }
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__corner-icon {
        position: static !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 10px !important;

        & img {
          width: 150px !important;
          height: auto !important;
          object-fit: contain !important;
        }
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: normal !important;
      gap: 0px !important;

      & .maxima-seguridad__body {
        border-radius: 0px !important;
      }

      & .maxima-seguridad__overlay {
        justify-content: center;
      }
    }
  }
}

/* Crediticio brand styles */
.maxima-seguridad[data-brand="crediticio"] {
  background: var(--color-brand-primaryLight);
  & .container__content {
    & .maxima-seguridad__body {
      background-color: var(--color-surface-base)  !important;
    }

    & .maxima-seguridad__overlay {

      & .btn {
        background-color: var(--color-brand-primary) !important;
        border: none !important;
        color: var(--color-brand-secondary)  !important;
        border-radius: 40px !important;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: normal !important;

      & .maxima-seguridad__overlay {
      
       padding: 0px 50px 0px 0px;
       gap: 15px;
       justify-content: center;
      }
    }
  }
}

/* Creditozas brand styles */
.maxima-seguridad[data-brand="creditozas"] {
  &.bg-gradient {
    background-image: url("/images/bg/bg-maxima-seguridad-3.png") !important;
    background-size: cover !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__title h2 {
        font-weight: 800 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #000000 !important;
        font-family: "Manrope", sans-serif !important;

        & span {
          color: #000000 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #96b4e6 !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #e5eaea !important;
      border-radius: 0px 40px 40px 0px;

      & p {
        color: #000000 !important;

        & strong {
          color: #000000 !important;
        }
      }

      & svg {
        color: #96b4e6 !important;
      }

      & .btn {
        background-color: #000000 !important;
        border: none !important;
        color: #96b4e6 !important;
        border-radius: 999px !important;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: normal !important;
      gap: 0px !important;


      & .maxima-seguridad__overlay {
       justify-content: center;
      }
    }
  }
}

/* Credizoom brand styles */
.maxima-seguridad[data-brand="credizoom"] {
  &.bg-gradient {
    background: linear-gradient(135deg, rgb(97, 142, 190) 30%, rgb(203, 212, 223) 70%) !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      width: 100%;
      & h2.maxima-seguridad__title {
        color: #4eb5a4 !important;
        font-size: 28.8px !important;
        text-transform: uppercase !important;
        margin-top: 0px;
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #4eb5a4 !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #dcfff8 !important;
      border: 2px solid #000000 !important;
      min-height: 300px;
      justify-content: center;
  
      & svg {
        color: #000000 !important;
        max-width: 90px;
      }

      & .btn {
        background-color: #000000 !important;
        border: none !important;
        color: #4eb5a4 !important;
        border-radius: 999px !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
      }
    }
  }

}

/* Mastercredi brand styles */
.maxima-seguridad[data-brand="mastercredi"] {
  &.bg-gradient {
    background-image: url("/images/bg/bg-maxima-seguridad-4.png") !important;
    background-size: cover !important;
    background-position: 100% 0% !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      width: 100%;
      & .maxima-seguridad__corner-icon {
        position: static !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 10px !important;

        & img {
          width: 150px !important;
          height: auto !important;
          object-fit: contain !important;
        }
      }

      & .maxima-seguridad__title h2 {
        color: #1a1a1a !important;
        font-family: "AdobeClean", sans-serif !important;
        font-weight: 700 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #1a1a1a !important;
        font-family: "AdobeClean", sans-serif !important;

        & span {
          color: #1a1a1a !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon {
        width: 39px;
        height: 20px;

        & svg {
          color: #1a1a1a !important;
          width: 39px;
          height: 20px;
        }
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #93bcfc !important;
      border-radius: 40px !important;

      & p {
        color: #1a1a1a !important;
        font-size: 17.28px;

        & strong {
          color: #1a1a1a !important;
        }
      }

      & svg {
        color: #1a1a1a !important;
      }

      & .btn {
        background-color: #1a1a1a !important;
        border: none !important;
        color: #e2e8ed !important;
        border-radius: 10px !important;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: center !important;

      & .maxima-seguridad__body {
        border-radius: 40px !important;
        box-sizing: border-box !important;
      }

      & .maxima-seguridad__overlay {
        min-width: 300px !important;
        max-width: 300px !important;
        margin-left: -200px !important;
        padding: 30px !important;
        box-sizing: border-box !important;
      }
    }
  }
}

/* Credisolve brand styles */
.maxima-seguridad[data-brand="credisolve"] {

  &.bg-gradient {
   background: var(--paso-a-paso-item-order-background-even) !important;
  }

  & .container__content {
    & .maxima-seguridad__overlay {
      --maxima-seguridad-overlay-background-color: var(--color-brand-primary);
      background-color: var(--color-brand-primary) !important;
      justify-content: center;
      & p {
        color: rgb(243, 243, 243) !important;

        & strong {
          color: rgb(243, 243, 243) !important;
        }
      }

      & svg {
        color: rgb(243, 243, 243) !important;
      }

      & .btn {
        background-color: var(--color-brand-primaryDark) !important;
        border:  var(--color-brand-primaryDark) !important;
        color: var(--color-surface-overlay) !important;
        padding: 12px 40px !important;
      }
    }
  }

}

/* Credipay brand styles */
.maxima-seguridad[data-brand="credipay"] {
 background: var(--color-brand-primaryLight);
 & .container__content {
    & .maxima-seguridad__overlay {
      background: var(--color-brand-primary) !important;
      justify-content: center;
  
       & p {
        color: rgb(243, 243, 243) !important;

        & strong {
          color: rgb(243, 243, 243) !important;
        }
      }

      & svg {
        color: rgb(243, 243, 243) !important;
      }

      & .btn {
        background-color: var(--color-brand-secondary) !important;
        border:  var(--color-brand-secondary) !important;
        color: var(--color-brand-primaryDark) !important;
        padding: 12px 40px !important;
      }
    }
  }

}

/* Credipay brand styles */
.maxima-seguridad[data-brand="creditoplan"] {
  & .container__content {
    & .maxima-seguridad__overlay {
      background: var(--color-brand-primary) !important;
      justify-content: center;
       & img {
          max-width: 60px;
       }

       & p {
        color: rgb(243, 243, 243) !important;

        & strong {
          color: rgb(243, 243, 243) !important;
        }
      }

      & svg {
        color: rgb(243, 243, 243) !important;
      }

      & .btn {
        background-color: var(--color-brand-primaryLight) !important;
        border:  var(--color-brand-primaryLight) !important;
        color: var(--color-brand-primary) !important;
        padding: 12px 40px !important;
      }
    }
  }

}

/* Crediahora — mobile only */
@media (max-width: 768px) {
  .maxima-seguridad[data-brand="crediahora"] {
    & .container__content {
      background: var(--maxima-seguridad-body-background-color);
      & .maxima-seguridad__body {
        background: var(--container-background);
        border-radius: 25px 25px 0 0;
        padding-top: 70px;

        & .maxima-seguridad__corner-icon {
          transform: translate(30px, -25px) !important;
          & img {
            width: 40px;
          }
        }
      }
      & .maxima-seguridad__overlay {
        width: 100%;
        border-radius: 0 0 25px 25px;
        background-color: var(--color-brand-secondary);
        padding: 50px 20px 30px 20px;
        gap: 15px;
        & img {
          max-width: 170px;
          margin-bottom: 20px;
        }
        & .btn {
          background: var(--color-brand-primary);
          border-color: var(--color-brand-primary);
          color: var(--color-surface-overlay);
          padding: 5px 40px;
        }
      }
    }
  }

  .maxima-seguridad[data-brand="credifix"] {
    & .container__content {
      & .maxima-seguridad__body {
        border-radius: 25px 25px 0 0;
        padding-top: 35px;

        & .maxima-seguridad__corner-icon {
          transform: translate(30px, -20px) !important;
          & img {
            width: 26px;
          }
        }
      }
      & .maxima-seguridad__overlay {
        width: 100%;
        border-radius: 0 0 25px 25px;
        background-color: var(--color-brand-secondary) !important;
        padding: 50px 20px 20px;
        gap: 15px;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        & img {
          max-width: 170px;
          margin-top: -75px;
          margin-bottom: 0;
        }
        & .btn {
          background: var(--color-brand-primary);
          border-color: var(--color-brand-primary);
          color: var(--color-surface-overlay);
          padding: 5px 40px;
        }
      }
    }
  }

  .maxima-seguridad[data-brand="credimoney"] {
    background-position: right !important;
    & .container__content {
      & .maxima-seguridad__body {
        padding-top: 100px;
        padding-left: 40px;
        padding-right: 40px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        & .maxima-seguridad__corner-icon {
          transform: translate(30px, 0) !important;
          & img {
            width: 80px;
          }
        }
      }
      & .maxima-seguridad__overlay {
        background-color: var(--footer-link-color);
        padding-bottom: 40px;
        padding-top: 50px;
        padding-left: 25px;
        padding-right: 25px;
        width: 250px;
        gap: 15px;
        & img {
          max-width: 170px;
          margin-bottom: 20px;
        }
        & .btn {
          background: var(--color-brand-secondary);
          border-color: var(--color-brand-secondary);
          color: var(--color-text-primary);
          padding: 5px 40px;
          border-bottom-left-radius: 0px;
        }
      }
    }
  }
}

/* Credital brand styles */
.maxima-seguridad[data-brand="credital"] {
  & .container__content {
    & .maxima-seguridad__body {
      & .maxima-seguridad__title h2 {
        color: var(--color-brand-primary) !important;
        font-family: "Montserrat", sans-serif !important;
        font-weight: 700 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: var(--color-text-primary) !important;
        font-family: "Montserrat", sans-serif !important;

        & span {
          color: var(--color-text-primary) !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: var(--color-brand-primary) !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: var(--color-text-primary);
      & p {
        color: #ffffff !important;

        & strong {
          color: #ffffff !important;
        }
      }

      & svg {
        color: #ffffff !important;
      }

      & .btn {
        background-color: var(--color-brand-primaryDark) !important;
        border: var(--color-brand-primaryDark) !important;
        color: #ffffff !important;
        padding: 5px 40px !important;
      }
    }
  }
}

/* Credipay brand styles */
.maxima-seguridad[data-brand="credipay"] {
  & .container__content {
    & .maxima-seguridad__overlay {
      padding: 0px 50px 0px 0px;
      gap:15px;
      justify-content: center;
      & p {
        & strong {
          color: #ffffff !important;
        }
      }
    }
  }
}

/* Credihope brand styles - was missing entirely, so it fell through to the
   unbranded defaults: no section background (.bg-gradient class was applied
   by brand.edn but had no matching rule here), and mismatched auto heights
   on .maxima-seguridad__body/.maxima-seguridad__overlay left the overlay
   card floating above the body instead of tucked into it like every other
   brand's welded two-tone shape. */
.maxima-seguridad[data-brand="credihope"] {
  /* Same soft Tangerine/Fuchsia/Berry-Red radial-gradient wash already used
     for credihope's page headers (brand.edn :page-header-bg-image), so this
     section gets a brand-appropriate background instead of plain white. */
  &.bg-gradient {
    background-color: #f4f4ef;
    background-image:
      radial-gradient(at 20% 20%, rgba(249, 178, 51, 0.18) 0%, transparent 45%),
      radial-gradient(at 75% 75%, rgba(226, 96, 156, 0.18) 0%, transparent 45%),
      radial-gradient(at 50% 45%, rgba(234, 86, 72, 0.12) 0%, transparent 50%),
      linear-gradient(135deg, #ffffff 0%, #fff8ed 20%, #fff2ea 45%, #fff2f8 75%, #ffffff 100%);
    background-position: 0% 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (width >= 768px) {
  .maxima-seguridad[data-brand="credihope"] {
    & .container__content {
      /* Stretch makes the overlay match the body's height exactly (like
         credimoney/oledinero's fixed-height weld), so the two pieces read
         as one continuous shape instead of a floating card. */
      align-items: stretch;

      & .maxima-seguridad__body {
        border-radius: 30px 0 0 30px;
        box-sizing: border-box;
      }

      & .maxima-seguridad__overlay {
        /* Flat left edge + negative margin tucks this under the body's
           flat right edge, matching the welded look on credimoney.es /
           oledinero.es. */
        border-radius: 0 30px 30px 0;
        margin-left: -50px;
        box-sizing: border-box;
        /* align-items: stretch above makes this box as tall as the body,
           so its content (logo, text, button) needs to be centered inside
           that extra height instead of packing to the top. */
        justify-content: center;
      }
    }
  }
}

 @media (max-width: 1024px) {

  /*CREDITANDO*/
  .maxima-seguridad--creditando .maxima-seguridad__body {
    border-radius:0 !important;
    padding-top: 30px !important;
  }

  .maxima-seguridad--creditando .maxima-seguridad__overlay {
     width: 100% !important;
     padding-top: 20px;
     padding-bottom: 30px;
  }
  

  /*CREDITOZAS*/
    
  .maxima-seguridad--creditozas .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 50px !important;
  }

  .maxima-seguridad--creditozas .maxima-seguridad__overlay {
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 0 0 40px 40px !important;
        padding: 40px 20px !important;
    }

  /*MASTERCREDI*/
  .maxima-seguridad--mastercredi .maxima-seguridad__body {
    border-radius: 40px !important;
    padding-top: 50px !important;
  }

   /*CREDIATOR*/
   .maxima-seguridad--crediator .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--crediator .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--crediator .maxima-seguridad__overlay {
    width: 100% !important;
    min-width: 100% !important;
    padding: 20px 20px 30px!important;

  }


  /*CREDITAL*/
   .maxima-seguridad--credizoom .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--credizoom .maxima-seguridad__body {
    border-radius: 30px !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--credizoom .maxima-seguridad__overlay {
    width: 80% !important;
    min-width: 80% !important;
    border-radius:40px !important;
    padding: 40px 10px !important;
  }
  
  .maxima-seguridad--credital .maxima-seguridad__overlay img{
    max-width: 100px !important;
  }

  .maxima-seguridad--credizoom .maxima-seguridad__corner-icon {
    transform:none !important;
    width: 60px !important;
    height: 60px !important;
    top: -30px !important;
    left: 0px !important;
  }
  
  /*CREDISOLVE*/

  .maxima-seguridad--credisolve .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--credisolve .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--credisolve .maxima-seguridad__overlay {
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 40px 40px !important;
    padding: 40px 20px!important;
  }

  .maxima-seguridad--credisolve .maxima-seguridad__body ul {
    margin: 20px 0 0 0 !important;
  }

  .maxima-seguridad--credisolve .maxima-seguridad__body ul li  span.maxima-seguridad__list__item-icon {
    place-items: center !important;
  }

  /*CREDITOPLAN*/

  .maxima-seguridad--creditoplan .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--creditoplan .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--creditoplan .maxima-seguridad__overlay {
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 40px 40px !important;
    padding: 40px 20px!important;
  }

  .maxima-seguridad--creditoplan .maxima-seguridad__body ul {
    margin: 20px 0 0 0 !important;
  }

  .maxima-seguridad--creditoplan .maxima-seguridad__body ul li  span.maxima-seguridad__list__item-icon {
    place-items: center !important;
  }

  /*CREDIPAY*/
   .maxima-seguridad--credipay .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--credipay .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--credipay .maxima-seguridad__overlay {
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 999px 999px !important;
    padding: 20px 20px 50px!important;

    & img {
      width: 100px;
    }
  }

  /*CREDITOPLAN*/
  .maxima-seguridad--creditoplan .maxima-seguridad__body ul {
    margin: 20px 0 0 0 !important;
  }

  .maxima-seguridad--creditoplan .maxima-seguridad__body ul li  span.maxima-seguridad__list__item-icon {
    place-items: center !important;
  }
  
  /*CREDITAL*/
   .maxima-seguridad--credital .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--credital .maxima-seguridad__body {
    border-radius: 30px !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--credital .maxima-seguridad__overlay {
    width: 80% !important;
    min-width: 80% !important;
    border-radius:40px !important;
    padding: 40px 10px !important;
  }
  
  .maxima-seguridad--credital .maxima-seguridad__overlay img{
    max-width: 100px !important;
  }

  .maxima-seguridad--credital .maxima-seguridad__corner-icon {
    transform:none !important;
    width: 60px !important;
    height: 60px !important;
    top: -30px !important;
    left: 0px !important;
  }

  /*CREDISCORE*/

   .maxima-seguridad--crediscore .container__content {
    flex-direction: column !important;
    min-height: auto !important;
  }
  
  .maxima-seguridad--crediscore .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 50px !important;
  }
  
  .maxima-seguridad--crediscore .maxima-seguridad__overlay {
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 999px 999px !important;
    padding: 40px 20px!important;

    & img {
      max-height: 190px !important;
      max-width: 100% !important;
      margin-top: -65px !important;
    }
  }

  /*CREDITICIO*/

   .maxima-seguridad--crediticio .maxima-seguridad__body {
    border-radius: 40px 40px 0 0 !important;
    padding-top: 70px !important;
    & .maxima-seguridad__list__item-icon{
     & img {
       width: 80% !important;
     }
    }
  }
  
  .maxima-seguridad--crediticio .maxima-seguridad__overlay {
    background-color: var(--color-brand-secondary) !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 999px 999px !important;
    padding: 20px 20px 50px!important;

    & img {
      width: 80px !important;
      max-width: 80px !important;
    }
  }

} 

/* === styles.css === */
/**
 * MejoraPerfilCrediticio Component Styles
 *
 * Theme-driven styles for the "¿Qué es el scoring crediticio?" section
 */

:root {
  & .hero-container-mejora-perfil {
    /* Default transparent, will be overridden by brand theme */
    --container-background: transparent;

    & .container__content {
      height: 520px;
      padding-top: 100px;
      padding-bottom: 100px;
      box-sizing: border-box;

      & .container-row {
        height: 320px;
        box-sizing: border-box;

        & .col,
        & .col-img {
          flex: 1;
        }

        & .col {
          justify-content: center;
        }

        & .col-img {
          height: 600px;
          margin-top: -140px;
          margin-bottom: -140px;
        }

        & .col-img img {
          max-width: 100%;
          height: 600px;
        }
      }

      & .container-col {
        &>* {
          margin: 0;
        }

        & h2 {
          text-wrap: balance;
        }

        & .hero-list {
          width: 100%;
          padding: 0;
          margin: 0;
        }
      }
    }
  }

  /* Credimoney: lavender/purple background */
  &[data-brand="credimoney"] {
    & .hero-container-mejora-perfil {
      --container-background: #d8c7e8;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Helvetica Neue", sans-serif !important;
          font-size: 39.6px !important;
          font-weight: 300 !important;
          color: #2e1047 !important;
        }
      }

      & .btn {
        background-color: #f8df3c !important;
        color: #2e1047 !important;
        border: 2px solid #f8df3c !important;
        border-radius: 50px !important;
        padding: 11px 20px !important;
        font-size: 14.4px !important;
        font-weight: 400 !important;
      }
    }
  }

  /* Crediahora: light gray background */
  &[data-brand="crediahora"] {
    & .hero-container-mejora-perfil {
      --container-background: #f5f5f5;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Montserrat", sans-serif !important;
          font-size: 36px !important;
          font-weight: 900 !important;
          color: #1d1d1b !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #1d1d1b !important;
        color: #ffffff !important;
        border: 2px solid #1d1d1b !important;
        border-radius: 50px !important;
        padding: 11px 20px !important;
        font-size: 14.4px !important;
        font-weight: 400 !important;
      }
    }
  }

  /* OleDinero: yellow-green background */
  &[data-brand="oledinero"] {
    & .hero-container-mejora-perfil {
      --container-background: #d7ff7b;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Poppins", sans-serif !important;
          font-size: 39.6px !important;
          font-weight: 700 !important;
          color: #032d8f !important;
          line-height: 51.84px !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: transparent !important;
        color: #032d8f !important;
        border: 2px solid #032d8f !important;
        border-radius: 40px 40px 0px !important;
        padding: 12px 25px !important;
        font-size: 16.56px !important;
        font-weight: 500 !important;
      }
    }
  }

  /* Creditoamigo: light purple background */
  &[data-brand="creditoamigo"] {
    & .hero-container-mejora-perfil {
      --container-background: #c8cffa;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Seitu", sans-serif !important;
          font-weight: 500 !important;
          color: #000000 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #0000ff !important;
        color: #ffffff !important;
        border: 2px solid #0000ff !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-family: "Seitu", sans-serif !important;
        font-weight: 400 !important;
      }
    }
  }

  /* Credicheck */
  &[data-brand="credicheck"] {
    & .hero-container-mejora-perfil {
      --container-background: #edeef4;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Funnel Display", sans-serif !important;
          font-weight: 500 !important;
          color: #000000 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #76bc74 !important;
        color: #ffffff !important;
        border: 2px solid #76bc74 !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-family: "Funnel Display", sans-serif !important;
        font-weight: 400 !important;
      }
    }
  }

  /* Creditoclic: teal accent background */
  &[data-brand="creditoclic"] {
    & .hero-container-mejora-perfil {
      --container-background: #7ac4ae;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Harabara", sans-serif !important;
          font-weight: 500 !important;
          color: #073034 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: transparent !important;
        color: #073034 !important;
        border: 2px solid #073034 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Montserrat", sans-serif !important;
        font-weight: 500 !important;
      }
    }
  }

  /* Creditopro: light gray background */
  &[data-brand="creditopro"] {
    & .hero-container-mejora-perfil {
      --container-background: #f3f3f3;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Open Sans", sans-serif !important;
          font-weight: 800 !important;
          color: #333333 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #333333 !important;
        color: #f3f3f3 !important;
        border: 2px solid #333333 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Crediator: light teal background */
  &[data-brand="crediator"] {
    & .hero-container-mejora-perfil {
      --container-background: #f2f2f2 !important;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Manrope", sans-serif !important;
          font-weight: 800 !important;
          color: #333333 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #f2d5e0 !important;
        color: #333333 !important;
        border: 2px solid transparent !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Credifix: medium blue background */
  &[data-brand="credifix"] {
    & .hero-container-mejora-perfil {
      --container-background: #96b4e6;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Roboto", sans-serif !important;
          font-weight: 300 !important;
          color: #182d52 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #96b4e6 !important;
        color: #182d52 !important;
        border: 2px solid #96b4e6 !important;
        border-radius: 10px !important;
        padding: 12px 25px !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Crediscore: light blue background */
  &[data-brand="crediscore"] {
    & .hero-container-mejora-perfil {
      --container-background: #c5e5fc;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Open Sans", sans-serif !important;
          font-weight: 700 !important;
          color: #000000 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #907ee8 !important;
        color: #ffffff !important;
        border: 2px solid transparent !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Creditando: lime green background */
  &[data-brand="creditando"] {
    & .hero-container-mejora-perfil {
      --container-background: #c6fd00;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Manrope", sans-serif !important;
          font-weight: 800 !important;
          color: #002449 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: transparent !important;
        color: #002449 !important;
        border: 2px solid #002449 !important;
        border-radius: 0 !important;
        padding: 12px 25px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Crediticio: orange accent background */
  &[data-brand="crediticio"] {
    & .hero-container-mejora-perfil {
      --container-background: #ffa573;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Open Sans", sans-serif !important;
          font-weight: 700 !important;
          color: #13233a !important;
        }
      }

      & .col-img {
        overflow: visible !important;

        & img {
          max-width: 680px !important;
          max-height: 508px !important;
          object-fit: contain !important;
        }
      }

      & .btn {
        background-color: #13233a !important;
        color: #ffa573 !important;
        border: 2px solid #13233a !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Creditozas: blue accent background */
  &[data-brand="creditozas"] {
    & .hero-container-mejora-perfil {
      --container-background: #96b4e6;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Manrope", sans-serif !important;
          font-weight: 800 !important;
          color: #000000 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #000000 !important;
        color: #96b4e6 !important;
        border: 2px solid #000000 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Credizoom: light teal background */
  &[data-brand="credizoom"] {
    & .hero-container-mejora-perfil {
      --container-background: #dcfff8;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          color: #000000 !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #000000 !important;
        color: #4eb5a4 !important;
        border: 2px solid #000000 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "AdobeClean", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Mastercredi: blue accent background */
  &[data-brand="mastercredi"] {
    & .hero-container-mejora-perfil {
      --container-background: #93bcfc;

      & .container-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;

        &>* {
          margin: 0 !important;
        }

        & h2 {
          font-family: "Coolvetica", sans-serif !important;
          font-size: 39.6px !important;
          font-weight: 700 !important;
          color: #1a1a1a !important;
        }
      }

      & .col-img {
        overflow: visible !important;
      }

      & .btn {
        background-color: #1a1a1a !important;
        color: #e2e8ed !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 12px 25px !important;
        font-family: "AdobeClean", sans-serif !important;
        font-weight: 700 !important;
      }
    }
  }
}

@media (width >=1024px) {
  :root {
    & .hero-container-mejora-perfil {
      --row-image-max-width: 60%;
    }
  }
}

 @media (max-width: 768px) {
    :root {
    & .hero-container-mejora-perfil {
       height: auto;
      & .container__content{
          height: auto;
          padding-top: 60px;
          padding-bottom: 60px;
        & .container-row {
          height: auto !important;
          & .col-img {
            margin:0;
            height: auto;
            
          }
           & .col-img img {
            max-width: 100%;
            height: auto;
           }
        }
      }
    }
  }
} 

.hero-container-mejora-perfil {
  /* Apply the background color from the CSS variable */
  background: var(--container-background);
  height: 520px;
  box-sizing: border-box;
}


/* === index.css === */
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgb(255 255 255 / 77%);
  width: 100%;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  overflow-y: auto;

  .modal-wrapper--sm {
    z-index: 15;
  }
}

:root {
  --color-excellent-dark: #00B300;
}

.modal {
  --bs-modal-padding: 1rem;
  position: relative;
  border: 2px solid rgb(4 4 4 / 15%);
  display: grid;
  background-color: #fff;
  max-width: 600px;
  width: 90vw;
  border-radius: 8px;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
  margin-top: -80px;

  &.modal--loader {
    max-width: 500px;
    width: 90vw;

    .modal-body {
      min-height: 150px;
      font-size: 1.3rem;
    }
  }

  .modal-body {
    overflow-y: auto;
    min-height: 0;
    padding: var(--bs-modal-padding);
  }

  .edit-profile--welcome {
    .modal-body {
      padding-bottom: 35px;
    }
  }

  .edit-profile {
    .modal-body {
      height: auto;
      max-height: 500px;
    }
  }

  .edit-profile-area {
    max-height: max-content;

    .modal-body {
      height: 100%;
    }
  }

  &.modal--sm {
    width: 90vw;
    max-width: calc(650px* 0.7);
    z-index: 101;
    max-height: 80vh;
  }

  & .modal__close {
    position: absolute;
    padding: 0 7px;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--color-brand-primary);
    font-size: 23px;
    z-index: 13;
    cursor: pointer;
  }

  .modal__input-group {
    display: flex;
    flex-direction: column;
    justify-items: center;
    gap: 15px;
    padding: 20px;
  }

  .modal__button-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  input {
    padding: 14px 25px;
    border-radius: 9999px;
    width: 100%;
    outline: none;
    background-color: rgb(158 182 203 / 19%);
    margin-top: 5px;
  }

  input:disabled {
    background-color: rgb(158 182 203 / 51%);
  }

  input[type="checkbox"] {
    width: auto;
    padding: 7px;
    cursor: pointer;
  }

  .btn--modal {
    margin: 10px auto 0;
  }

  .modal-header {
    padding: var(--bs-modal-padding);
    border-bottom: 1px solid rgb(4 4 4 / 15%);
  }

  .modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - (0.5rem * .5));
    border-top: 1px solid rgb(4 4 4 / 15%);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
  }

  .pncpsw__required {
    margin-top: 25px;

    h5 {
      font-weight: 600;
      margin-bottom: 10px;
    }
  }
}


@media (min-width: 768px) {
  .modal {
    margin-top: 0;

    & .edit-profile .modal-body,
    .modal-body {
      height: auto;
    }
  }
}

@keyframes fadeInModal {
  0% {
    filter: opacity(0);
    top: 30px;
  }

  20% {
    filter: opacity(0);
    top: 30px;
  }

  50% {
    filter: opacity(0.4);
    top: 0;
  }

  75% {
    filter: opacity(1);
    top: 0;
  }

  100% {
    filter: opacity(1);
    top: 0;
  }
}

@keyframes fadeOutModal {
  0% {
    filter: opacity(1);
    top: 0px;
  }

  100% {
    filter: opacity(0);
    top: 30px;
  }
}

.modal--loading-out {
  opacity: 1;
  top: 30px;
  animation: fadeOutModal 1.8s ease forwards;
}

.modal--loading-in {
  opacity: 1;
  top: 30px;
  animation: fadeInModal 1.8s ease forwards;
}

.modal--loading {
  h3 {
    text-align: center;
    color: var(--color-brand-primary);
    font-size: 1.5rem;
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: 500;
  }

  .loader-bg {
    position: relative;
    width: auto;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;

    svg {
      margin: 0 auto;
    }
  }

  .modal-body {
    font-size: 1.1rem !important;
  }

  .modal-text {
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.modal-body--short {
  min-height: unset !important;

  p {

    margin-bottom: 1.5rem !important;
    margin-top: 1rem;
    line-height: 1.5 !important;
    font-size: calc(1.275rem + .3vw) !important;
  }
}

@keyframes moveForward {
  0% {
    transform: translateX(-64px);
  }

  100% {
    transform: translateX(500px);
  }
}

.loader-container-modal {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #000;

  img {
    width: 64px;
    aspect-ratio: auto 64 / 64;
    height: 64px;
    animation: moveForward 3s linear infinite;
    margin-bottom: -5px;
  }
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-2000px, 0, 0);
  }
}

.modal-footer-img-wrapper {
  overflow: hidden;
  width: 100%;
}

.modal-footer-img {
  background: var(--color-brand-primary) url("/images/deuda/despachos.png") no-repeat;
  background-size: auto 70%;
  background-position-y: center;
  height: 70px;
  width: 8350px;
  animation: slide 30s linear infinite;
}


/* === styles.css === */
/* ModalInfo overlay */
.modal-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Modal box */
.modal-info {
  background: #fff;
  border-radius: 18px;
  width: min(92vw, 960px);
  padding: clamp(16px, 2.2vw, 28px);
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Close button */
.modal-info__close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  /* Sit above the modal content. The content (e.g. .product-video-coaching)
     is position:relative with auto z-index and comes after this button in the
     DOM, so without an explicit z-index its (transparent) box paints on top and
     swallows taps on the ✕ — the real hit area ends up offset to the blank
     corner above/right of the glyph. */
  z-index: 10;
  /* Solid, centred touch target: the ✕ glyph's ink is small and sits
     off-centre in its line box, so render it dead-centre in a 44x44 box
     (min recommended tap size) instead of relying on padding + glyph metrics. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: #333;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Animation: slideDown (default) */
.modal-info--slideDown {
  animation: modalInfoSlideDown 0.4s ease forwards;
}

@keyframes modalInfoSlideDown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation: fadeIn */
.modal-info--fadeIn {
  animation: modalInfoFadeIn 0.4s ease forwards;
}

@keyframes modalInfoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animation: zoomIn */
.modal-info--zoomIn {
  animation: modalInfoZoomIn 0.4s ease forwards;
}

@keyframes modalInfoZoomIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* === index.css === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  background: #ffffff;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #111827;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
}

.close-button:hover {
  color: #374151;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  color: #4b5563;
  line-height: 1.6;
}

/* ── Timeline Styles ── */
.timeline {
  position: relative;
  padding: 1rem 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 120px;
  width: 2px;
  background: #e5e7eb;
}

.tm-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tm-items>li {
  position: relative;
  margin-bottom: 3rem;
}

.tm-box {
  padding-left: 150px;
  position: relative;
}

.tm-box h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
}

/* Date Header */
.tm-box>.list-unstyled>h4:first-child {
  position: absolute !important;
  left: 0 !important;
  top: -28px !important;
  background-color: #fff !important;
  padding-right: 10px;
  font-size: 0.9rem;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

.tm-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tm-box ul li {
  margin-bottom: 1.5rem;
  position: relative;
}

/* Time indicator dot on the line */
.tm-box ul li::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3b82f6;
  z-index: 2;
}

.tm-box ul li h4 {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.tm-box ul li p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: #374151;
}

/* Labels */
.label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
  margin-right: 5px;
  text-transform: uppercase;
}

.label-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.label-danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.label-success {
  background-color: #d1fae5;
  color: #065f46;
}

.label-info {
  background-color: #dbeafe;
  color: #1e40af;
}

.modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

/* ── Popup Block Helpers ── */
.white-popup-block {
  background: #FFF;
  padding: 20px;
  text-align: left;
  max-width: 650px;
  margin: 20px auto;
  position: relative;
}

.white-popup-block-md {
  max-width: 900px;
}

/* ── Grid Helpers ── */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-lg-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 100%;
  max-width: 100%;
}

.modal-body th,
.modal-body td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.modal-body th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #374151;
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: flex-end;
  background-color: #f9fafb;
}

.button--status {
  padding: 0.625rem 1.25rem;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.button--status:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}

/* ── Error Variants ── */
.modal-content--error {
  border-top: 5px solid #ef4444;
}

.modal-content--error .modal-header h2 {
  color: #ef4444;
}

.button--error {
  background-color: #ef4444;
}

.button--error:hover {
  background-color: #dc2626;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-body-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
}

.success-icon-circle {
  width: 80px;
  height: 80px;
  background-color: #ecfdf5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #10b981;
  box-shadow: 0 0 0 8px #f0fdf4;
}

.success-icon-circle svg {
  width: 40px;
  height: 40px;
}

.success-message {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.modal-body-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
}

.error-icon-circle {
  width: 80px;
  height: 80px;
  background-color: #fef2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #ef4444;
  box-shadow: 0 0 0 8px #fef2f2;
}

.error-icon-circle svg {
  width: 40px;
  height: 40px;
}

.error-message {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

/* ── Documents Styles ── */
.container-documents {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #f3f4f6;
}

.container-documents h3 {
  font-size: 1.1rem;
  color: #111827;
  margin-bottom: 1rem;
  font-weight: 600;
}

.list-documents {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.item-document {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.item-document:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-2px);
}

.link-document {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  color: #374151;
  text-decoration: none;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 500;
  width: 100%;
}

.link-document svg {
  color: #2563eb;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.link-document span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spinner {
  animation: spin 1s linear infinite;
  color: #2563eb;
  font-size: 1.25rem;
  flex-shrink: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.link-document:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.link-document.loading {
  background: #eff6ff;
}

.client-data-stats {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  border: 1px solid #e5e7eb;
}

.client-data-stats p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: #374151;
  display: flex;
  justify-content: space-between;
}

.client-data-stats p strong {
  color: #111827;
  font-weight: 700;
}

/* Links in timeline */
a.status-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  display: inline-block;
}

a.status-link:hover {
  opacity: 0.85;
}

a.status-link-text {
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.15s ease;
}

a.status-link-text:hover {
  color: #1d4ed8;
}

/* === styles.css === */
/**
 * PageHeader Component Styles
 *
 * Wrapper styling for the page header section that contains:
 * - Background image/color
 * - HeaderNav navigation
 * - Content header component
 */

.page-header-wrapper {
  position: relative;
  width: 100%;
  min-height: auto;
}

.page-header-wrapper__content {
  position: relative;
  z-index: 1;
  padding-top: 0px;
}

/* Brand-specific styling */

/* Credimoney: Purple background with pattern */
.page-header-wrapper--credimoney {
  background-size: auto;
}

/* Crediahora: Solid gray background */
.page-header-wrapper--crediahora {
  background: #f5f5f5 !important;
}

/* OleDinero: Blue background with pattern */
.page-header-wrapper--oledinero {
  background-size: auto;
}

/* CreditoPRO: Blue background with pattern - match production positioning */
.page-header-wrapper--creditopro {
  background-position: 100% 0% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Credicheck: Gradient background */
.page-header-wrapper--credicheck {
  background-size: 100% 100%;
}


/* CreditoAmigo: Gradient background */
.page-header-wrapper--creditoamigo {
  background-size: 100% 100%;
}



/* === DashboardPageLayout.css === */
/**
 * DashboardPageLayout Styles
 *
 * Provides the background and layout context for authenticated dashboard pages.
 * This represents the actual production environment where DashboardNavbar is used.
 */

.dashboard-page-layout {
  min-height: 100vh;
  background-color: #f5f5f5;
  overflow-x: hidden;
}

.dashboard-page-layout__nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

.dashboard-page-layout__main {
  max-width: var(--body-max-width, 1400px);
  margin: 0 auto;
  padding: 2rem var(--body-padding-horizontal, 1rem);
}

.dashboard-page-layout__placeholder {
  text-align: center;
  padding: 2rem 0;
}

.dashboard-page-layout__placeholder h2 {
  color: var(--text-basic-color-1, #333);
  margin-bottom: 1rem;
}

.dashboard-page-layout__placeholder p {
  color: var(--text-basic-color-2, #666);
  margin-bottom: 2rem;
}

.dashboard-page-layout__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.dashboard-card {
  background: #ffffff;
  border: 1px solid var(--background-basic-color-3, #e0e0e0);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dashboard-card h3 {
  color: var(--color-brand-primary);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.dashboard-card p {
  color: var(--text-basic-color-2, #666);
  font-size: 0.95rem;
}


/* === PublicPageLayout.css === */
/**
 * PublicPageLayout Styles
 *
 * Provides the background gradient and layout context for public pages.
 * This represents the actual production environment where HeaderNav is used.
 */

.public-page-layout {
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(
    180deg,
    var(--color-brand-primary) 0%,
    var(--color-brand-primary) 30%,
    #ffffff 30%,
    #ffffff 100%
  );
}

.public-page-layout__header {
  position: relative;
  background: transparent;
}

.public-page-layout__header-content {
  max-width: var(--body-max-width, 80rem);
  margin: 0 auto;
  padding: 2rem var(--body-padding-horizontal, 1rem);
  color: var(--color-text-inverse, #ffffff);
}

.public-page-layout__header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.public-page-layout__header-content p {
  font-size: 1.2rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.public-page-layout__main {
  max-width: var(--body-max-width, 80rem);
  margin: 0 auto;
  padding: 0 var(--body-padding-horizontal, 1rem);
}

@media (width >= 768px) {
  .public-page-layout__header-content h1 {
    font-size: 3rem;
  }
}


/* === styles.css === */
/* Aside component styles - Matching production */

.panel-aside {
  width: 220px;
  min-width: 220px;
  padding: 20px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* User Profile */
.panel-aside__user {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.panel-aside__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.panel-aside__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.panel-aside__email {
  margin: 0;
  color: #666;
  font-size: 14px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.panel-aside__logout {
  margin-top: 10px;
  padding: 10px 25px;
  background-color: var(--color-primary, #ffd700);
  color: #fff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: opacity 0.2s;
}

.panel-aside__logout:hover {
  opacity: 0.9;
}

/* Navigation */
.panel-aside__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.panel-aside__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background-color: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.2s;
}

/* Notification badge */
.panel-aside__badge {
  position: absolute;
  top: 8px;
  left: 32px;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007bff;
}

.panel-aside__nav-item i {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.panel-aside__nav-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.panel-aside__nav-item--active {
  background-color: var(--color-primary-light, #f0f7ff);
  color: var(--color-primary, #2e1047);
  font-weight: 600;
}

.panel-aside__nav-link {
  text-decoration: none;
}

/* Brand-specific styles */
.panel-aside[data-brand="credimoney"] {
  --color-primary: rgb(46, 16, 71);
  --color-primary-light: rgba(46, 16, 71, 0.1);
}

.panel-aside[data-brand="credimoney"] .panel-aside__logout {
  background-color: #ffd700;
  color: rgb(46, 16, 71);
}

.panel-aside[data-brand="crediahora"] {
  --color-primary: #95c11f;
  --color-primary-light: rgba(149, 193, 31, 0.1);
}

.panel-aside[data-brand="crediahora"] .panel-aside__logout {
  background-color: #95c11f;
  color: rgb(29, 29, 27);
}

.panel-aside[data-brand="oledinero"] {
  --color-primary: rgb(2, 36, 115);
  --color-primary-light: rgba(2, 36, 115, 0.1);
}

.panel-aside[data-brand="oledinero"] .panel-aside__logout {
  background-color: rgb(215, 255, 123);
  color: rgb(2, 36, 115);
}

.panel-aside[data-brand="creditoamigo"] {
  --color-primary: rgb(0, 0, 255);
  --color-primary-light: rgba(0, 0, 255, 0.1);
}

.panel-aside[data-brand="creditoamigo"] .panel-aside__logout {
  background-color: rgb(0, 0, 255);
  color: #fff;
}

.panel-aside[data-brand="credicheck"] {
  --color-primary: #76bc74;
  --color-primary-light: rgba(118, 188, 116, 0.1);
}

.panel-aside[data-brand="credicheck"] .panel-aside__logout {
  background-color: #76bc74;
  color: #fff;
}

.panel-aside[data-brand="creditoclic"] {
  --color-primary: rgb(7, 48, 52);
  --color-primary-light: rgba(7, 48, 52, 0.1);
}

.panel-aside[data-brand="creditoclic"] .panel-aside__logout {
  background-color: rgb(7, 48, 52);
  color: #fff;
}

.panel-aside[data-brand="creditopro"] {
  --color-primary: rgb(51, 51, 51);
  --color-primary-light: rgba(51, 51, 51, 0.1);
}

.panel-aside[data-brand="creditopro"] .panel-aside__logout {
  background-color: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
}

.panel-aside[data-brand="crediator"] {
  --color-primary: rgb(242, 213, 224);
  --color-primary-light: rgba(242, 213, 224, 0.2);
}

.panel-aside[data-brand="crediator"] .panel-aside__logout {
  background-color: rgb(242, 213, 224);
  color: rgb(51, 51, 51);
}

.panel-aside[data-brand="credifix"] {
  --color-primary: rgb(24, 45, 82);
  --color-primary-light: rgba(24, 45, 82, 0.1);
}

.panel-aside[data-brand="credifix"] .panel-aside__logout {
  background-color: rgb(150, 180, 230);
  color: rgb(24, 45, 82);
}

.panel-aside[data-brand="crediscore"] {
  --color-primary: rgb(144, 126, 232);
  --color-primary-light: rgba(144, 126, 232, 0.1);
}

.panel-aside[data-brand="crediscore"] .panel-aside__logout {
  background-color: rgb(144, 126, 232);
  color: #fff;
}

.panel-aside[data-brand="creditando"] {
  --color-primary: rgb(0, 36, 73);
  --color-primary-light: rgba(0, 36, 73, 0.1);
}

.panel-aside[data-brand="creditando"] .panel-aside__logout {
  background-color: rgb(0, 36, 73);
  color: #fff;
}

.panel-aside[data-brand="crediticio"] {
  --color-primary: rgb(19, 35, 58);
  --color-primary-light: rgba(19, 35, 58, 0.1);
}

.panel-aside[data-brand="crediticio"] .panel-aside__logout {
  background-color: rgb(19, 35, 58);
  color: rgb(255, 165, 115);
}

.panel-aside[data-brand="creditozas"] {
  --color-primary: rgb(0, 0, 0);
  --color-primary-light: rgba(0, 0, 0, 0.05);
}

.panel-aside[data-brand="creditozas"] .panel-aside__logout {
  background-color: rgb(0, 0, 0);
  color: rgb(150, 180, 230);
}

.panel-aside[data-brand="credizoom"] {
  --color-primary: rgb(0, 0, 0);
  --color-primary-light: rgba(78, 181, 164, 0.1);
}

.panel-aside[data-brand="credizoom"] .panel-aside__logout {
  background-color: rgb(0, 0, 0);
  color: rgb(78, 181, 164);
}

.panel-aside[data-brand="mastercredi"] {
  --color-primary: rgb(26, 26, 26);
  --color-primary-light: rgba(26, 26, 26, 0.1);
}

.panel-aside[data-brand="mastercredi"] .panel-aside__logout {
  background-color: rgb(26, 26, 26);
  color: rgb(226, 232, 237);
}

/* Responsive - hide aside on mobile, navigation is in the header */
@media (max-width: 900px) {
  .panel-aside {
    display: none;
  }
}


/* === styles.css === */
/* HeaderNav component styles - Matching production */

.panel-header {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.panel-header__container {
  max-width: none;
  margin: 0;
  padding: 15px 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header__logo img {
  width: 100px;
  height: auto;
}

.panel-header__burger {
  display: grid;
  justify-self: end;
  font-size: 30px;
  color: #333;
  cursor: pointer;
}

.panel-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.panel-header__nav--hidden {
  display: none;
}

.panel-header__link {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  transition: opacity 0.2s;
}

.panel-header__link:hover {
  opacity: 0.8;
}

.panel-header__link--active {
  padding-bottom: 3px;
  border-bottom: 2px solid var(--panel-active-color, #333);
}

.panel-header__dropdown {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

/* Hide dropdown by default */
.panel-header__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 10px 0;
  min-width: 200px;
  z-index: 1000;
  border: 1px solid var(--panel-active-color, #333);
  border-top-width: 3px;
}

/* Invisible bridge to prevent hover gap */
.panel-header__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

/* Show dropdown on hover (desktop) or via JS toggle class (mobile) */
.panel-header__dropdown:hover > .panel-header__dropdown-menu,
.panel-header__dropdown--open > .panel-header__dropdown-menu {
  display: block;
}

.panel-header__dropdown-item {
  color: #130e0e;
  text-decoration: none;
  display: grid;
  align-items: center;
  align-content: center;
  grid-auto-flow: column;
  grid-auto-columns: 50px auto;
  justify-content: flex-start;
  padding: 8px 20px;
  font-size: 14px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}

.panel-header__dropdown-item:hover {
  background-color: #f5f5f5;
}

.panel-header__dropdown-item.panel-header__dropdown-logout {
  color: #130e0e;
}

.panel-header__dropdown-divider {
  border-top: 1px solid var(--panel-active-color, #333);
  margin: 0;
  padding-top: 10px;
}

/* Brand-specific styles */
.panel-header[data-brand="credimoney"] {
  --panel-active-color: rgb(46, 16, 71);
}

.panel-header[data-brand="crediahora"] {
  --panel-active-color: #95c11f;
}

.panel-header[data-brand="oledinero"] {
  --panel-active-color: rgb(2, 36, 115);
}

/* Mobile: burger + collapsible nav */
@media (max-width: 767px) {
  .panel-header__container {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    padding: 12px 15px;
  }

  .panel-header__nav {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 15px;
  }

  .panel-header__nav .panel-header__link {
    padding: 8px 0;
    font-size: 14px;
  }

  .panel-header__dropdown {
    width: 100%;
  }

  .panel-header__dropdown-menu {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    min-width: unset;
    box-shadow: none;
    border: 1px solid var(--panel-active-color, #333);
    border-top-width: 3px;
    border-radius: 8px;
    margin-top: 5px;
  }
}

/* Desktop: hide burger, always show nav */
@media (min-width: 768px) {
  .panel-header__burger {
    display: none;
  }

  .panel-header__nav,
  .panel-header__nav.panel-header__nav--hidden {
    display: flex;
  }

  .panel-header__logo img {
    width: 144px;
  }
}

@media (max-width: 1200px) and (min-width: 768px) {
  .panel-header__container {
    padding: 15px 60px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .panel-header__container {
    padding: 15px 30px;
  }
}


/* === styles.css === */
/* PSection component styles - Matching production */

.psection {
  background-color: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.psection__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.psection__content {
  width: 100%;
}

@media (max-width: 768px) {
  .psection {
    padding: 15px;
  }
}

/* Brand-specific styles */
.psection[data-brand="credimoney"] .psection__title {
  color: #2e1047;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
}

.psection[data-brand="crediahora"] .psection__title {
  color: #1D1D1B;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
}

.psection[data-brand="oledinero"] .psection__title {
  color: #022d8e;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}


/* === PanelDeControl.css === */
/* PanelDeControl main component styles - Matching production */

.panel-de-control {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  overflow-x: hidden;
}

/* Container wrapper for centered content */
.panel-de-control__container {
  max-width: none;
  width: 100%;
  margin: 20px 0 0;
  padding: 0 120px;
}

/* Main layout: sidebar + content */
.panel-de-control__layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 0;
}

/* Main content area */
.panel-de-control__main {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0; /* Prevent flex item from overflowing */
}

/* Responsive */
@media (max-width: 1200px) {
  .panel-de-control__container {
    padding: 0 60px;
    margin-top: 15px;
  }
}

@media (max-width: 1024px) {
  .panel-de-control__container {
    padding: 0 30px;
  }

  .panel-de-control__layout {
    gap: 15px;
  }
}

@media (max-width: 900px) {
  .panel-de-control__layout {
    flex-direction: column;
  }

  .panel-de-control__main {
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .panel-de-control__container {
    padding: 0 15px;
    margin-top: 10px;
  }
}


/* === styles.css === */
/* RInput component styles */

.rinput {
  margin-bottom: 15px;
}

.rinput__label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
}

.rinput__field {
  width: 100%;
  padding: 12px 15px;
  background-color: var(--color-primary-light, #e8f4f8);
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
}

.rinput__field:disabled {
  cursor: default;
  opacity: 1;
}

/* Brand-specific styles */
.rinput[data-brand="credimoney"] .rinput__field {
  background-color: rgba(46, 16, 71, 0.05);
}

.rinput[data-brand="crediahora"] .rinput__field {
  background-color: rgba(149, 193, 31, 0.1);
}

.rinput[data-brand="oledinero"] .rinput__field {
  background-color: rgba(2, 36, 115, 0.05);
}


/* === DocumentsSection.css === */
/* DocumentsSection component styles */

.documents-section__table {
  width: 100%;
  border-collapse: collapse;
}

.documents-section__table thead tr {
  border-bottom: 2px solid #e0e0e0;
}

.documents-section__table th {
  text-align: left;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.documents-section__th-download {
  text-align: right;
}

.documents-section__table tbody tr {
  border-bottom: 1px solid #e0e0e0;
}

.documents-section__table td {
  padding: 12px 10px;
  color: #333;
  font-size: 14px;
}

.documents-section__status {
  color: #28a745;
  font-weight: 500;
}

.documents-section__ph {
  color: #666;
}

.documents-section__date {
  color: #666;
}

.documents-section__td-download {
  text-align: right;
}

.documents-section__download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: var(--color-primary, #ffd700);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
}

.documents-section__download-link:hover {
  opacity: 0.9;
}

.documents-section__download-link i {
  font-size: 14px;
}

/* Brand-specific styles */
.documents-section[data-brand="credimoney"] .documents-section__download-link {
  background-color: #ffd700;
  color: rgb(46, 16, 71);
}

.documents-section[data-brand="crediahora"] .documents-section__download-link {
  background-color: #95c11f;
  color: rgb(29, 29, 27);
}

.documents-section[data-brand="oledinero"] .documents-section__download-link {
  background-color: rgb(215, 255, 123);
  color: rgb(2, 36, 115);
}

.documents-section[data-brand="creditozas"] .documents-section__download-link {
  background-color: #000000;
  color: #ffffff;
}

.documents-section[data-brand="creditando"] .documents-section__download-link {
  background-color: transparent;
  color: #002449;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .documents-section__table {
    display: block;
    overflow-x: auto;
  }

  .documents-section__download-link span {
    display: none;
  }
}


/* === NotificationsSection.css === */
/* NotificationsSection component styles */

.notifications-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Missing Fields Section (Datos por actualizar este mes) */
.missing-fields {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  margin-top: 12px;
  width: 100%;
  background-color: #fff;
}

.missing-fields__item {
  display: grid;
  gap: 10px;
  justify-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem 1rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.missing-fields__item:last-child {
  border-bottom: none;
}

.missing-fields__updated {
  color: #333;
  font-weight: 400;
}

.missing-fields__title {
  color: #333;
}

.missing-fields__item button {
  margin-top: 1rem;
  background-color: #f8f892;
  color: #2e1047;
  border: none;
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.missing-fields__item button:hover {
  background-color: #e8e882;
}

@media (min-width: 768px) {
  .missing-fields__item {
    align-items: center;
    flex-direction: row;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr auto;
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  .missing-fields__item button {
    margin-top: 0;
  }
}

/* Emails Section */
.emails-section__empty {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.emails-section {
  width: 100%;
  overflow-x: hidden;
  margin-top: 12px;
}

.emails-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  overflow: hidden;
}

.emails-accordion__item {
  overflow: hidden;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}

.emails-accordion__item:last-child {
  border-bottom: none;
}

.emails-accordion__header {
  position: relative;
  cursor: pointer;
  padding: 1rem 1.25rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-right: 8rem;
}

.emails-accordion__header:hover {
  background-color: #f8f9fa;
}

.emails-accordion__item--open .emails-accordion__header {
  background-color: #f8f9fa;
}

.emails-accordion__date {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #2e1047;
  font-weight: 500;
}

.emails-accordion__subject {
  white-space: normal;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 400;
  width: 100%;
  color: #333;
}

.emails-accordion__body {
  padding: 1rem 1.25rem;
  background-color: #f8f9fa;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.emails-accordion__content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  margin-bottom: 1rem;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  white-space: normal;
  font-size: 0.95rem;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
}

.emails-accordion__content a {
  color: #2e1047;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.emails-accordion__content a:hover {
  text-decoration: none;
}

.emails-accordion__meta {
  font-size: 0.85rem;
  color: #666;
  margin-top: 1rem;
}

.emails-accordion__meta p {
  margin: 0 0 0.25rem 0;
}

/* Email loading state */
.emails-section__loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}

/* Email pagination */
.emails-section__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
}

.emails-section__pagination button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.emails-section__pagination button:hover:not(:disabled) {
  background-color: #f0f0f0;
}

.emails-section__pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.emails-section__pagination-info {
  font-size: 0.9rem;
  color: #666;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .emails-accordion__date {
    font-size: 0.75rem;
    right: 0.75rem;
  }

  .emails-accordion__header {
    padding: 1rem 4rem 1rem 1rem;
  }

  .emails-accordion__subject {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .emails-accordion__body {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }

  .emails-accordion__content {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }
}

@media screen and (max-width: 360px) {
  .emails-accordion__date {
    font-size: 0.7rem;
  }

  .emails-accordion__header {
    padding: 0.75rem 3.5rem 0.75rem 0.75rem;
  }

  .emails-accordion__subject {
    font-size: 0.8rem;
  }
}


/* === ProfileSection.css === */
/* ProfileSection component styles */

.profile-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 768px) {
  .profile-section__grid {
    grid-template-columns: 1fr;
  }
}

.profile-section__column {
  width: 100%;
}

.profile-section__subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
  font-weight: 500;
}

.profile-section__password-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-section__password {
  max-width: 500px;
}

.profile-section__password-field {
  margin-bottom: 15px;
}

.profile-section__label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
}

.profile-section__input {
  width: 100%;
  padding: 12px 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
}

.profile-section__input:focus {
  outline: none;
  border-color: var(--color-primary, #ffd700);
}

.profile-section__save-btn {
  margin-top: 15px;
  padding: 12px 30px;
  background-color: var(--color-primary, #ffd700);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  width: fit-content;
}

.profile-section__save-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.profile-section__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Requirements section */
.profile-section__requirements {
  max-width: 500px;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.profile-section__requirements-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.profile-section__requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-section__requirements-list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.profile-section__requirements-list li:last-child {
  margin-bottom: 0;
}

/* Brand-specific styles */
.profile-section__password-container[data-brand="credimoney"] .profile-section__save-btn {
  background-color: #ffd700;
  color: rgb(46, 16, 71);
}

.profile-section__password-container[data-brand="crediahora"] .profile-section__save-btn {
  background-color: #95c11f;
  color: rgb(29, 29, 27);
}

.profile-section__password-container[data-brand="oledinero"] .profile-section__save-btn {
  background-color: rgb(215, 255, 123);
  color: rgb(2, 36, 115);
}


/* === SubscriptionSection.css === */
/* SubscriptionSection component styles - Matching production e3-remoto */

/* ============================================
   Plan Section
   ============================================ */
.subscription-plan {
  width: 100%;
  padding-top: 20px;
  display: grid;
  justify-items: baseline;
  gap: 15px;
}

.subscription-plan__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.subscription-plan__title {
  margin: 0;
  font-weight: normal;
  font-size: 1.5rem;
}

.subscription-plan__name {
  color: #d2b600; /* Gold color for plan name */
}

.subscription-plan__date {
  font-size: 0.90rem;
  font-weight: 500;
  color: #555;
  margin-right: 0.8rem;
}

.subscription-plan__summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.subscription-plan__summary-header p {
  margin: 0;
}

/* Progress Bar */
.subscription-plan__progress-bar {
  display: flex;
  width: 90%;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 16px;
}

.subscription-plan__month {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.subscription-plan__month--paid {
  background-color: #28a745;
}

.subscription-plan__month--refunded {
  background-color: #17a2b8;
}

.subscription-plan__month--rejected {
  background-color: #dc3545;
}

.subscription-plan__month--unpaid {
  background-color: #adb5bd;
  color: black;
}

/* Navigation Buttons */
.subscription-plan__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.subscription-plan__nav button {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.subscription-plan__nav button:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.subscription-plan__nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Legend */
.subscription-plan__legend {
  width: 100%;
  margin-top: 1rem;
}

.subscription-plan__legend-list {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.subscription-plan__legend-item {
  position: relative;
  padding-left: 25px;
  font-size: 0.9rem;
}

.subscription-plan__legend-item::before {
  position: absolute;
  content: "";
  z-index: 1;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 50%;
}

.subscription-plan__legend-item--paid::before {
  background-color: #28a745;
}

.subscription-plan__legend-item--rejected::before {
  background-color: #dc3545;
}

.subscription-plan__legend-item--refunded::before {
  background-color: #17a2b8;
}

.subscription-plan__legend-item--unpaid::before {
  background-color: #6c757d;
}

/* Cancel Button */
.subscription-plan__cancel-btn {
  padding: 12px 24px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 1rem;
}

.subscription-plan__cancel-btn:hover {
  background-color: #c82333;
}

/* ============================================
   Credit Cards Section
   ============================================ */
.subscription-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  padding: 1rem;
}

.subscription-card {
  background: linear-gradient(135deg, #2c3e50, #4ca1af);
  color: white;
  min-width: 300px;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  font-family: "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.subscription-card__top {
  display: flex;
  justify-content: flex-end;
}

.subscription-card__logo {
  width: 60px;
  height: auto;
}

.subscription-card__number {
  font-size: 1.4rem;
  letter-spacing: 2px;
  text-align: center;
}

.subscription-card__footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.subscription-card__holder span,
.subscription-card__expiry span {
  font-size: 0.75rem;
  color: #fff;
  opacity: 0.8;
}

.subscription-card__holder strong,
.subscription-card__expiry strong {
  display: block;
  font-size: 1rem;
  color: #fff;
}

.subscription-cards__empty {
  width: 100%;
}

.subscription-cards__empty h5 {
  color: #e53935;
  font-weight: 500;
}

/* ============================================
   Payment History Table
   ============================================ */
.subscription-history__table {
  width: 100%;
  border-collapse: collapse;
}

.subscription-history__table thead tr {
  border-bottom: 2px solid #e0e0e0;
}

.subscription-history__table th {
  text-align: left;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.subscription-history__table tbody tr {
  border-bottom: 1px solid #e0e0e0;
}

.subscription-history__table td {
  padding: 12px 10px;
  color: #333;
  font-size: 14px;
}

.subscription-history__status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.subscription-history__status--paid {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.subscription-history__status--rejected {
  background-color: #ffebee;
  color: #c62828;
}

.subscription-history__status--refunded {
  background-color: #e3f2fd;
  color: #1565c0;
}

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

.subscription-history__pdf-icon {
  font-size: 23px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.subscription-history__pdf-icon:hover {
  opacity: 0.7;
}

.subscription-history__pdf-link {
  text-decoration: none;
  color: inherit;
}

.subscription-history__pdf-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.subscription-history__pdf-btn:hover .subscription-history__pdf-icon {
  opacity: 0.7;
}

.subscription-history__pdf-icon--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .subscription-plan__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .subscription-plan__legend-list {
    flex-direction: column;
    gap: 10px;
  }

  .subscription-card {
    width: 100%;
    min-width: auto;
  }

  .subscription-history__table {
    display: block;
    overflow-x: auto;
  }

  .subscription-plan__progress-bar {
    width: 100%;
    flex-wrap: wrap;
    height: auto;
  }

  .subscription-plan__month {
    min-width: 70px;
    padding: 8px 4px;
  }
}

@media (min-width: 768px) {
  .subscription-plan__legend-list {
    flex-direction: row;
  }
}


/* === styles.css === */
/**
 * PanelUsuario Component Styles
 *
 * Multi-brand styles for user panel with loan comparison cards
 */

:root {
  & .panel-usuario-container {
    & .hero-container-comparador-prestamo {
      & .hero-container__image {
        max-width: 300px;
      }

      &>.container__content {
        &>.row {
          flex-direction: column-reverse;
          gap: 0;

          &>.col {
            flex: 1 1 0%;
          }

          &>.col-img {
            flex: 1 1 0%;
          }
        }
      }
    }

    & .panel-usuario-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }

  /* Credimoney brand styles */
  &[data-brand="credimoney"] {
    & .panel-usuario-container--credimoney {
      background-color: rgb(247, 241, 246);
      /* Light lavender background */
    }
  }

  /* Crediahora brand styles */
  &[data-brand="crediahora"] {
    & .panel-usuario-container--crediahora {
      /* Brand-specific overrides if needed */
    }
  }

  /* OleDinero brand styles */
  &[data-brand="oledinero"] {
    & .panel-usuario-container--oledinero {
      background-image: url("https://oledinero.es/images/bg/fondo-06.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  }

  /* Creditoamigo brand styles */
  &[data-brand="creditoamigo"] {
    & .panel-usuario-container--creditoamigo {
      background-color: #f0f1f7;
    }
  }

  /* Credicheck brand styles */
  &[data-brand="credicheck"] {
    & .panel-usuario-container--credicheck {
      background-color: #edeef4;
    }
  }

  /* Creditoclic brand styles */
  &[data-brand="creditoclic"] {
    & .panel-usuario-container--creditoclic {
      background-color: #eaeeef;
    }
  }

  /* Creditopro brand styles */
  &[data-brand="creditopro"] {
    & .panel-usuario-container--creditopro {
      background-color: #f3f3f3;
    }
  }

  /* Crediator brand styles */
  &[data-brand="crediator"] {
    & .panel-usuario-container--crediator {
      background-color: #f2f2f2;
    }
  }

  /* Credifix brand styles */
  &[data-brand="credifix"] {
    & .panel-usuario-container--credifix {
      background-color: #ffffff;
    }
  }

  /* Crediscore brand styles */
  &[data-brand="crediscore"] {
    & .panel-usuario-container--crediscore {
      background-color: #e1f1fc;
    }
  }

  /* Creditando brand styles */
  &[data-brand="creditando"] {
    & .panel-usuario-container--creditando {
      background-color: #ffffff;
    }
  }

  /* Crediticio brand styles */
  &[data-brand="crediticio"] {
    & .panel-usuario-container--crediticio {
      background-color: #ffffff;
    }
  }

  /* Creditozas brand styles */
  &[data-brand="creditozas"] {
    & .panel-usuario-container--creditozas {
      background-color: #ffffff;
    }
  }

  /* Credizoom brand styles */
  &[data-brand="credizoom"] {
    & .panel-usuario-container--credizoom {
      background-color: #f4f8f9;
    }
  }

  /* Mastercredi brand styles */
  &[data-brand="mastercredi"] {
    & .panel-usuario-container--mastercredi {
      background-color: #f7f9fa;
    }
  }
}

@media (width >=768px) {
  :root {
    & .panel-usuario-container {
      & .hero-container-comparador-prestamo {
        & .hero-container__image {
          max-width: var(--row-image-max-width);
        }

        &>.container__content {
          &>.row {
            flex-direction: row-reverse;
            gap: 60px;

            &>.col {
              flex: 1 1 0%;
            }

            &>.col-img {
              flex: 1 1 0%;
            }
          }
        }
      }
    }
  }
}


/* === styles.css === */
/**
 * ParaQueScoring Component Styles
 *
 * Theme-driven styles for the "Para qué sirve el scoring crediticio" section
 */

:root {
  & .hero-container-para-que {
    /* Default transparent, will be overridden by brand theme */
    --container-background: transparent;

    & .container__content {
      padding-top: 100px;
      padding-bottom: 100px;

      & .container-row {
        gap: var(--hero-row-gap);

        & .col,
        & .col-img {
          flex: 1;
        }

        & .col {
          justify-content: center;
        }

        & .container-col {
          display: flex;
          flex-direction: column;
          gap: var(--hero-row-gap);
          justify-content: flex-start;
          align-items: flex-start;
          width: 100%;
          max-width: 816px;
          flex: none;
        }

        & .col-img img {
          max-width: 450px;
          width: 100%;
          height: auto;
        }
      }

      & .container-col {

        &>* {
          margin: 0;
        }

        & h2 {
          text-wrap: balance;
        }

        & .hero-list {
          width: 100%;
          padding: 0;
          margin: 0;
        }
      }
    }
  }

  /* Credimoney: light purple/pink background */
  &[data-brand="credimoney"] {
    & .hero-container-para-que {
      --container-background: #f7f1f6;

      & .container-col {
        & h2 {
          font-family: "Helvetica Neue", sans-serif !important;
          font-size: 39.6px !important;
          font-weight: 300 !important;
          color: #2e1047 !important;
        }
      }

      /* Credimoney button: white background with purple text */
      & .btn {
        background-color: #ffffff !important;
        color: #2e1047 !important;
        border: 2px solid #ffffff !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-size: 14.4px !important;
        font-weight: 700 !important;
      }

      /* Credimoney list icons: purple color */
      & .hero-list__icon {
        --list-icon-color: #2e1047 !important;
        color: #2e1047 !important;
      }
    }
  }

  /* Crediahora: light gray background */
  &[data-brand="crediahora"] {
    & .hero-container-para-que {
      --container-background: #f5f5f5;

      & .container-col {
        & h2 {
          font-family: "Montserrat", sans-serif !important;
          font-size: 36px !important;
          font-weight: 900 !important;
          color: #1d1d1b !important;
        }
      }
    }
  }

  /* OleDinero: white background */
  &[data-brand="oledinero"] {
    & .hero-container-para-que {
      --container-background: #ffffff;

      & .container-col {
        & h2 {
          font-family: "Poppins", sans-serif !important;
          font-size: 39.6px !important;
          font-weight: 700 !important;
          color: #032d8f !important;
          line-height: 1.2 !important;
        }
      }

      /* OleDinero button: transparent with blue border */
      & .btn {
        background-color: transparent !important;
        border: 2px solid #032d8f !important;
        color: #032d8f !important;
        font-family: "Poppins", sans-serif !important;
        font-size: 14.4px !important;
        font-weight: 500 !important;
        padding: 12px 25px !important;
        border-radius: 40px 40px 0px 40px !important;
      }

      /* OleDinero list items: blue text on white background */
      & .hero-list li {
        color: #032d8f !important;
      }

      /* OleDinero list icons: blue color */
      & .hero-list__icon {
        --list-icon-color: #032d8f !important;
        color: #032d8f !important;
      }
    }
  }

  /* Creditoamigo: light lavender background */
  &[data-brand="creditoamigo"] {
    & .hero-container-para-que {
      --container-background: #f0f1f7;

      & .container-col {
        & h2 {
          font-family: "Seitu", sans-serif !important;
          font-weight: 500 !important;
          color: #000000 !important;
        }
      }

      & .btn {
        background-color: #0000ff !important;
        color: #ffffff !important;
        border: 2px solid #0000ff !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-family: "Seitu", sans-serif !important;
        font-weight: 400 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #0000ff !important;
        color: #0000ff !important;
      }
    }
  }

  /* Credicheck: */
  &[data-brand="credicheck"] {
    & .hero-container-para-que {
      --container-background: #edeef4;

      & .container-col {
        & h2 {
          font-family: "Funnel Display", sans-serif !important;
          font-weight: 500 !important;
          color: #000000 !important;
        }
      }

      & .btn {
        background-color: #76bc74 !important;
        color: #ffffff !important;
        border: 2px solid #76bc74 !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-family: "Funnel Display", sans-serif !important;
        font-weight: 400 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #76bc74 !important;
        color: #76bc74 !important;
      }
    }
  }

  /* Creditoclic: light gray-teal background */
  &[data-brand="creditoclic"] {
    & .hero-container-para-que {
      --container-background: #eaeeef;

      & .container-col {
        & h2 {
          font-family: "Harabara", sans-serif !important;
          font-weight: 500 !important;
          color: #073034 !important;
        }
      }

      & .btn {
        background-color: transparent !important;
        color: #073034 !important;
        border: 2px solid #073034 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Montserrat", sans-serif !important;
        font-weight: 500 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #7ac4ae !important;
        color: #7ac4ae !important;
      }
    }
  }

  /* Creditopro: light gray background */
  &[data-brand="creditopro"] {
    & .hero-container-para-que {
      --container-background: #f3f3f3;

      & .container-col {
        & h2 {
          font-family: "Open Sans", sans-serif !important;
          font-weight: 800 !important;
          color: #333333 !important;
        }
      }

      & .btn {
        background-color: #333333 !important;
        color: #f3f3f3 !important;
        border: 2px solid #333333 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #4570ae !important;
        color: #4570ae !important;
      }
    }
  }

  /* Crediator: light gray background */
  &[data-brand="crediator"] {
    & .hero-container-para-que {
      --container-background: #f2f2f2;

      & .container-col {
        & h2 {
          font-family: "Manrope", sans-serif !important;
          font-weight: 800 !important;
          color: #333333 !important;
        }
      }

      & .btn {
        background-color: #f2d5e0 !important;
        color: #333333 !important;
        border: 2px solid transparent !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #f55f99 !important;
        color: #f55f99 !important;
      }
    }
  }

  /* Credifix: light blue background */
  &[data-brand="credifix"] {
    & .hero-container-para-que {
      --container-background: #d9e4f5;

      & .container-col {
        & h2 {
          font-family: "Roboto", sans-serif !important;
          font-weight: 300 !important;
          color: #182d52 !important;
        }
      }

      & .btn {
        background-color: #96b4e6 !important;
        color: #182d52 !important;
        border: 2px solid transparent !important;
        border-radius: 10px !important;
        padding: 12px 25px !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #ff0086 !important;
        color: #ff0086 !important;
      }
    }
  }

  /* Crediscore: light blue background */
  &[data-brand="crediscore"] {
    & .hero-container-para-que {
      --container-background: #e1f1fc;

      & .container-col {
        & h2 {
          font-family: "Open Sans", sans-serif !important;
          font-weight: 700 !important;
          color: #000000 !important;
        }
      }

      & .btn {
        background-color: #907ee8 !important;
        color: #ffffff !important;
        border: 2px solid transparent !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #907ee8 !important;
        color: #907ee8 !important;
      }
    }
  }

  /* Creditando: light teal background */
  &[data-brand="creditando"] {
    & .hero-container-para-que {
      --container-background: #ddecee;

      & .container-col {
        & h2 {
          font-family: "Manrope", sans-serif !important;
          font-weight: 800 !important;
          color: #002449 !important;
        }
      }

      & .btn {
        background-color: transparent !important;
        color: #002449 !important;
        border: 2px solid #002449 !important;
        border-radius: 0 !important;
        padding: 12px 25px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #c6fd00 !important;
        color: #c6fd00 !important;
      }
    }
  }

  /* Crediticio: white background */
  &[data-brand="crediticio"] {
    & .hero-container-para-que {
      --container-background: #ffffff;

      & .container-col {
        & h2 {
          font-family: "Open Sans", sans-serif !important;
          font-weight: 700 !important;
          color: #13233a !important;
        }
      }

      & .btn {
        background-color: #13233a !important;
        color: #ffa573 !important;
        border: 2px solid #13233a !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #ffa573 !important;
        color: #ffa573 !important;
      }
    }
  }

  /* Creditozas: white background */
  &[data-brand="creditozas"] {
    & .hero-container-para-que {
      --container-background: #ffffff;

      & .container-col {
        & h2 {
          font-family: "Manrope", sans-serif !important;
          font-weight: 800 !important;
          color: #000000 !important;
        }
      }

      & .btn {
        background-color: #000000 !important;
        color: #96b4e6 !important;
        border: 2px solid #000000 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #96b4e6 !important;
        color: #96b4e6 !important;
      }
    }
  }

  /* Credizoom: white background */
  &[data-brand="credizoom"] {
    & .hero-container-para-que {
      --container-background: #ffffff;

      & .container-col {
        & h2 {
          color: #000000 !important;
        }
      }

      & .btn {
        background-color: #000000 !important;
        color: #4eb5a4 !important;
        border: 2px solid #000000 !important;
        border-radius: 999px !important;
        padding: 12px 25px !important;
        font-family: "AdobeClean", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #4eb5a4 !important;
        color: #4eb5a4 !important;
      }

      & .section-banks {
        background: transparent;
      }
    }
  }

  /* Mastercredi: light gray background */
  &[data-brand="mastercredi"] {
    & .hero-container-para-que {
      --container-background: #f7f9fa;

      & .container-col {
        & h2 {
          font-family: "Coolvetica", sans-serif !important;
          font-size: 39.6px !important;
          font-weight: 700 !important;
          color: #1a1a1a !important;
        }
      }

      & .btn {
        background-color: #1a1a1a !important;
        color: #e2e8ed !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 12px 25px !important;
        font-family: "AdobeClean", sans-serif !important;
        font-weight: 700 !important;
      }

      & .hero-list__icon {
        --list-icon-color: #1a1a1a !important;
        color: #1a1a1a !important;
      }
    }
  }
}

@media (width >=1024px) {
  :root {
    & .hero-container-para-que {
      --row-image-max-width: 60%;
    }
  }
}

.hero-container-para-que {
  /* Apply the background color from the CSS variable */
  background: var(--container-background);
}


/* === styles.css === */
/* Partners component styles */

.container-partners {
  --text-font-size: 20.16px;
  --icon-color: var(--color-brand-primary);

  & .container-partners__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 30px;

    & p {
      font-size: var(--text-font-size);
      line-height: 28.224px;
      text-align: center;
    }

    & .partners__logos {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      gap: 20px;
      color: var(--icon-color);

      & .partners__logo {
        display: grid;
        place-items: center;
      }

      & svg,
      & img {
        height: 40px;
        max-width: 100%;
      }
    }
  }
}

@media (width >=768px) {
  :root {
    .container-partners {
      width: 100%;
      max-width: 100vw;
      margin: 0;
      padding: 0;
    }
  }
}

@media (width >=1024px) {
  :root {
    .container-partners {
      & .container__content {
        --container-content-padding-vertical: 60px;
        --container-content-padding-bottom: 60px;
      }
    }
  }
}

@media (width >=1440px) {
  .container-partners {
    & .container-partners__content {
      flex-direction: row;
      justify-content: space-between;

      & p {
        width: 40%;
        text-align: left;
      }

      & .partners__logos {
        width: auto;
        display: flex;
        align-items: center;
        gap: 50px;

        & svg,
        & img {
          height: 50px;
        }
      }
    }
  }
}

/* Brand-specific styles */
.container-partners[data-brand="credimoney"] {
  background-color: #c0e5eb !important;

  & .container-partners__content p {
    color: var(--color-brand-primary) !important;

    & strong {
      color: var(--color-brand-primary)  !important;
    }
  }

  & .partners__logos {
    --icon-color: var(--color-brand-primary);

    /* Filter to convert SVG to dark purple #2e1047 */
    & img {
      filter: brightness(0) saturate(100%) invert(8%) sepia(25%) saturate(4738%) hue-rotate(267deg) brightness(97%) contrast(107%);
    }
  }
}

.container-partners[data-brand="crediahora"] {
  background-color: rgb(29, 29, 27) !important;

  & .container-partners__content p {
    font-family: Montserrat, sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(245, 245, 245) !important;
    font-weight: 700 !important;
  }

  & .partners__logos {
    --icon-color: #95C11F;

    /* Filter to convert SVG to lime green #95C11F */
    & img {
      filter: brightness(0) saturate(100%) invert(70%) sepia(55%) saturate(550%) hue-rotate(37deg) brightness(95%) contrast(92%);
    }
  }
}

.container-partners[data-brand="oledinero"] {
  background-color: rgb(2, 36, 115) !important;

  & .container-partners__content p {
    font-family: Poppins, sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(255, 255, 255) !important;
    font-weight: 500 !important;
  }

  & .partners__logos {
    --icon-color: #d7ff7b;

    /* Filter to convert SVG to lime yellow #d7ff7b */
    & img {
      filter: brightness(0) saturate(100%) invert(92%) sepia(57%) saturate(495%) hue-rotate(32deg) brightness(107%) contrast(102%);
    }
  }
}

.container-partners[data-brand="creditoamigo"] {
  background: linear-gradient(135deg, rgb(178, 177, 240) 0%, rgb(0, 0, 255) 70%, rgb(0, 0, 255) 100%) !important;

  & .container-partners__content p {
    font-family: Seitu, sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(255, 255, 255) !important;
    font-weight: 400 !important;

    & strong {
      color: rgb(255, 255, 255) !important;
    }
  }

  & .partners__logos {
    --icon-color: #ffffff;

    /* Filter to convert SVG to white */
    & img {
      filter: brightness(0) saturate(100%) invert(100%);
    }
  }
}

.container-partners[data-brand="credicheck"] {
  background: linear-gradient(135deg, #edeef4 0%, #76bc74 70%, #76bc74 100%) !important;

  & .container-partners__content p {
    font-family: "Funnel Display", sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(255, 255, 255) !important;
    font-weight: 400 !important;

    & strong {
      color: rgb(255, 255, 255) !important;
    }
  }

  & .partners__logos {
    --icon-color: #ffffff;

    /* Filter to convert SVG to white */
    & img {
      filter: brightness(0) saturate(100%) invert(100%);
    }
  }
}

.container-partners[data-brand="creditoclic"] {
  background-color: rgb(122, 196, 174) !important;

  & .container-partners__content p {
    font-family: Montserrat, sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(7, 48, 52) !important;
    font-weight: 500 !important;

    & strong {
      color: rgb(7, 48, 52) !important;
    }
  }

  & .partners__logos {
    --icon-color: rgb(7, 48, 52);

    /* Filter to convert SVG to dark teal #073034 */
    & img {
      filter: brightness(0) saturate(100%) invert(14%) sepia(28%) saturate(1218%) hue-rotate(139deg) brightness(97%) contrast(99%);
    }
  }
}

.container-partners[data-brand="creditopro"] {
  background-color: rgb(27, 74, 130) !important;

  & .container-partners__content p {
    font-family: "Open Sans", sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(243, 243, 243) !important;
    font-weight: 400 !important;

    & strong {
      color: rgb(243, 243, 243) !important;
    }
  }

  & .partners__logos {
    --icon-color: rgb(243, 243, 243);

    /* Filter to convert SVG to light gray #f3f3f3 */
    & img {
      filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(103%) contrast(90%);
    }
  }
}

.container-partners[data-brand="crediator"] {
  background-color: var(--color-brand-secondary) !important;

  & .container-partners__content {
    padding: 20px 0;
  }

  & .container-partners__content p {
    color: var(--color-state-success) !important;

    & strong {
      color: var(--color-state-success) !important;
      font-weight: 700 !important;
    }
  }

  & .partners__logos {

    /* Crediator uses brand-specific two-tone SVGs - no filter needed */
    & img {
      filter: none;
    }
  }
}

.container-partners[data-brand="credifix"] {
  background-color: #182d52 !important;

  & .container-partners__content {
    padding: 20px 0 !important;

    & p {
      font-family: "Roboto", sans-serif !important;
      font-size: 20.16px !important;
      color: #96b4e6 !important;
      font-weight: 300 !important;

      & strong {
        color: #96b4e6 !important;
      }
    }

    & .partners__logos {
      --icon-color: #96b4e6;

      /* Filter to convert SVG to light blue #96B4E6 */
      & img {
        filter: brightness(0) saturate(100%) invert(74%) sepia(11%) saturate(1232%) hue-rotate(182deg) brightness(94%) contrast(91%);
      }
    }
  }
}

.container-partners[data-brand="crediscore"] {
  background-color: #000000 !important;

  & .container-partners__content p {
    font-family: "Open Sans", sans-serif !important;
    font-size: 20.16px !important;
    color: #907ee8 !important;
    font-weight: 400 !important;

    & strong {
      color: #907ee8 !important;
    }
  }

  & .partners__logos {

    /* Crediscore uses brand-specific two-tone SVGs - no filter needed */
    & img {
      filter: none;
    }
  }
}

.container-partners[data-brand="creditando"] {
  background-color: #002449 !important;

  & .container-partners__content p {
    font-family: "Manrope", sans-serif !important;
    font-size: 20.16px !important;
    color: #c6fd00 !important;
    font-weight: 400 !important;

    & strong {
      color: #ffffff !important;
    }
  }

  & .partners__logos {
    --icon-color: #DDECEE;

    /* Filter to convert SVG to light cyan #DDECEE */
    & img {
      filter: brightness(0) saturate(100%) invert(80%) sepia(88%) saturate(27%) hue-rotate(132deg) brightness(99%) contrast(96%);
    }
  }
}

.container-partners[data-brand="crediticio"] {
  background-color: #13233a !important;

  & .container-partners__content p {
    font-family: "Open Sans", sans-serif !important;
    font-size: 20.16px !important;
    color: #ffa573 !important;
    font-weight: 500 !important;

    & strong {
      color: #ffa573 !important;
    }
  }

  & .partners__logos {

    /* Crediticio uses brand-specific two-tone SVGs - no filter needed */
    & img {
      filter: none;
    }
  }
}

.container-partners[data-brand="creditozas"] {
  background-color: #000000 !important;

  & .container-partners__content p {
    font-family: "Manrope", sans-serif !important;
    font-size: 20.16px !important;
    color: #e5eaea !important;
    font-weight: 500 !important;

    & strong {
      color: #e5eaea !important;
    }
  }

  & .partners__logos {
    --icon-color: #E5EAEA;

    /* Filter to convert SVG to light gray #E5EAEA */
    & img {
      filter: brightness(0) saturate(100%) invert(100%) sepia(57%) saturate(73%) hue-rotate(130deg) brightness(96%) contrast(90%);
    }
  }
}

.container-partners[data-brand="credizoom"] {
  background-color: #000000 !important;

  & .container-partners__content {
    padding: 0;
  }

  & .container-partners__content p {
    font-family: "AdobeClean", sans-serif !important;
    font-size: 20.16px !important;
    color: #80e8d7 !important;
    font-weight: 500 !important;

    & strong {
      color: #80e8d7 !important;
    }
  }

  & .partners__logos {
    --icon-color: #80E8D7;

    /* Filter to convert SVG to teal #80E8D7 */
    & img {
      filter: brightness(0) saturate(100%) invert(84%) sepia(23%) saturate(657%) hue-rotate(116deg) brightness(100%) contrast(87%);
    }
  }
}

.container-partners[data-brand="mastercredi"] {
  background-color: #1a1a1a !important;

  & .container__content {
    --container-content-padding-vertical: 0px;
    --container-content-padding-bottom: 0px;
  }

  & .container-partners__content p {
    font-family: "AdobeClean", sans-serif !important;
    font-size: 25.92px !important;
    color: #e2e8ed !important;
    font-weight: 500 !important;

    & strong {
      color: #e2e8ed !important;
    }
  }

  & .partners__logos {
    --icon-color: #e2e8ed;

    /* Filter to convert SVG to light blue-gray #e2e8ed */
    & img {
      filter: brightness(0) saturate(100%) invert(85%) sepia(9%) saturate(129%) hue-rotate(165deg) brightness(110%) contrast(89%);
    }
  }
}

/* Credihope: this section is always rendered with the "banner-bg" class,
   which for this brand is now a Smoke Black background (see backgrounds.css).
   The partner logos are plain black PNGs/SVGs with no per-brand filter, so
   without this override they stay black-on-black. Invert them to white. */
.container-partners[data-brand="credihope"] {
  & .container-partners__content p {
    color: #ffffff !important;
    font-weight: 400 !important;

    & strong {
      color: #f9b233 !important;
    }
  }

  & .partners__logos {
    --icon-color: #ffffff;

    /* Filter to convert the black logos to white */
    & img {
      filter: brightness(0) saturate(100%) invert(100%);
    }
  }
}

.container-partners[data-brand="credital"] {
  

  & .partners__logos {
    & img {
      /* Filter to convert black to #af9fcd (lavender secondary) */
      filter: brightness(0) saturate(100%) invert(78%) sepia(21%) saturate(542%) hue-rotate(219deg) brightness(85%) contrast(89%);
    }
  }
}

.container-partners[data-brand="credisolve"] {
  

  & .partners__logos {
    & img {
      /* Filter to convert black to #1564e9 (lavender secondary) */
       filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(3665%) hue-rotate(309deg) brightness(91%) contrast(100%) !important;

    }
  }
}

.container-partners[data-brand="credipay"] {
  

  & .partners__logos {
    & img {
      /* Filter to convert black to #1564e9 (lavender secondary) */
      filter: invert(29%) sepia(88%) saturate(3195%) hue-rotate(212deg) brightness(97%) contrast(96%);
    }
  }
}

.container-partners[data-brand="creditoplan"] {
  

  & .partners__logos {
    & img {
      /* Filter to convert black to #1564e9 (lavender secondary) */
         filter: invert(53%) sepia(87%) saturate(1471%) hue-rotate(124deg) brightness(97%) contrast(98%);
    }
  }
}

/* === styles.css === */
/**
 * Plan Amigo Page Header Styles
 *
 * Header section for Plan Amigo pages with transparent container background.
 * The background styling is applied to the header element itself, not the container.
 */

.container.plan-amigo-header {
  --container-background: transparent;
  background: transparent;
}

/* Brand-specific em colors */
.plan-amigo-page-header--credimoney em {
  color: rgb(46, 16, 71);
}

.plan-amigo-page-header--crediahora em {
  color: rgb(149, 193, 31);
}

.plan-amigo-page-header--oledinero em {
  color: rgb(215, 255, 123);
}

.plan-amigo-page-header--creditoamigo em {
  color: #0000FF;
}

.plan-amigo-page-header--credicheck em {
  color: #76bc74;
}

.plan-amigo-page-header--creditoclic em {
  color: #7AC4AE;
}

.plan-amigo-page-header--creditopro em {
  color: #ffffff;
}

.plan-amigo-page-header--crediator em {
  color: #f55f99;
}

.plan-amigo-page-header--credifix em {
  font-style: italic;
  color: #ff0086;
}

/* Credifix: "Ver condiciones" links should be navy */
[data-brand="credifix"] .plan-amigo-page-header--credifix a {
  color: #182d52;
}

.plan-amigo-page-header--crediscore em {
  font-style: normal;
  color: rgba(144, 126, 232, 1);
}

.plan-amigo-page-header--credizoom em {
  font-style: normal;
  color: #4eb5a4;
}

.plan-amigo-page-header--credizoom .container__content {
  --container-content-column-flex-gap: 20px;
}

.plan-amigo-page-header--credizoom .container__content p {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .plan-amigo-page-header--creditoplan  .container__content .plan-amigo-logo{
    height: 100px !important;
  }

  .plan-amigo-page-header--credital  .container__content .plan-amigo-logo{
    height: 120px !important;
  }

  .plan-amigo-page-header--crediahora  .container__content .plan-amigo-logo{
    height: 120px !important;
  }

}

/* === styles.css === */
/**
 * PlanAmigoVentajas Styles
 *
 * Styling for the referral program advantages section.
 * Features:
 * - List items displayed horizontally with icons above text
 * - Responsive design
 */

.plan-amigo-ventajas {
  & .row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin:0;
  }

  & .col {
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 20px;

    & h2 {
      font-size: 2.75rem;
      font-weight: 300;
      line-height: 1;
      margin: 0;
    }

    & p {
      font-weight: var(--font-weight-medium);
      font-size: 1.1rem;
      margin: 0;
    }
  }

  & ul {
    display: flex;
    gap: 20px;
    margin: 0;

    & li {
      display: flex;
      gap: 10px;
      align-items: start;

      & .hero-list__icon {
        width: 25px;
        color: var(--color-brand-primary) !important;
      }
    }
  }

  & .col-img {
    display: grid;
    place-items: center;

    & img {
      max-width: var(--image-max-width, 100%);
      margin: 0 auto;
    }
  }
}

/* Vertical layout (3x1) - OleDinero */
.plan-amigo-ventajas--vertical {
  & ul {
    flex-direction: column;
  }
}

/* Horizontal layout (1x3) - Credimoney and Crediahora */
.plan-amigo-ventajas--horizontal {
  & ul {
    flex-direction: column;
  }

  @media (width >= 768px) {
    & ul {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
    }
  }
}

/* Desktop styles - image on the right */
@media (width >= 1024px) {
  .plan-amigo-ventajas {
    & .row {
      flex-direction: row;
      align-items: center;
    }

    & .col {
      flex: 0 0 auto;
      width: 700px;
    }

    & .col-img {
      flex: 1 1 auto;
      max-width: 50%;

      & img {
        --image-max-width: 400px;
      }
    }
  }
}

/* Brand-specific styles for Crediahora */
.plan-amigo-ventajas-crediahora {
  & .col {
    & h2 {
      font-weight: 900;
    }

    & p {
      font-weight: var(--font-weight-medium);
    }
  }

  & ul li {
    font-weight: 400;

    /* Override icon color to green for crediahora (matching production) */
    & .hero-list__icon {
      color: var(--color-brand-secondary) !important;
    }
  }

}

/* Brand-specific styles for Crediator */
.plan-amigo-ventajas-crediator {
  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }

  & ul li {
    font-family: "Manrope", sans-serif;
    font-size: 16.56px;
    font-weight: 600;
    color: #333333;

    & .hero-list__icon {
      color: #f55f99 !important;
    }
  }
}

/* Brand-specific styles for Credifix */
.plan-amigo-ventajas-credifix {
  background-color: #d9e4f5 !important;
  background-image: url('/images/bg/bg-header-2.png') !important;
  background-size: cover !important;
  background-position: center !important;

  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800 !important;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

/* Brand-specific styles for Crediscore */
.plan-amigo-ventajas-crediscore {
  background-image: url('/images/bg/bg-crediscore.png') !important;
  background-size: cover !important;
  background-position: center !important;
   & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

/* Brand-specific heading styles for OleDinero */
/* #7039: Mastercredi ventajas - col gap 40px, h2 margin 11.52px, icon vertical align */
.plan-amigo-ventajas-mastercredi {
  & .col {
    gap: 40px;

    & h2 {
      margin: 11.52px 0;
    }
  }

  & ul li .hero-list__icon svg {
    color: #1a1a1a !important;
  }
}

.plan-amigo-ventajas-oledinero {
  & .col {
    & h2 {
      font-size: 39.6px;
      font-weight: 700;
      font-feature-settings: normal;
    }

    & p {
      color: #022d8e;
    }
  }

  /* HeroList hardcodes white list-item text for oledinero (correct on the
     blue-bg "hero-puntos-a-favor" section it was designed for), but this
     section has no colored background, so it rendered invisible white text
     on white. Override back to the brand's dark blue here. */
  & .hero-list--oledinero li {
    color: #022d8e;
  }
}

.plan-amigo-ventajas-credisolve {
  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

.plan-amigo-ventajas-creditoplan {
  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

.plan-amigo-ventajas-credipay {
  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

.plan-amigo-ventajas-credital {
  & .col {
    & h2{
      color:var(--color-text-primary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-primary);
      }
    }

    & p {
       color:var(--color-text-primary);
    }
  }
}

.plan-amigo-ventajas-crediticio {
  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

.plan-amigo-ventajas-credimoney {
  & .col {
    & h2{
      color:var(--color-brand-primary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-brand-primary);
      }
    }

    & p {
       color:var(--color-brand-primary);
    }
  }
}

.plan-amigo-ventajas-creditoclic {
  & .col {
    & h2{
      color:var(--color-text-secondary);
      font-weight: 800;
    }
    & li {
      & span {
          color:var(--color-text-secondary);
      }
    }

    & p {
       color:var(--color-text-secondary);
    }
  }
}

/* === styles.css === */
/**
 * PlanesAmigoComparador Styles
 *
 * Styles for the plan comparison carousel component with brand variants
 */

.planes-amigo-comparador {
  width: 100%;
  background: #ffffff;
  padding: 40px 0;
  font-family: "Helvetica Neue", sans-serif;
}

/* Plans Container */
.planes-amigo-comparador__container {
  padding: 0;
}

.planes-amigo-comparador__list {
  display: flex;
}

/* Plan Card */
.comparador__item {
  --comparador-item-background: #dddddd;
  --comparador-item-stars-color: var(--color-primary, #2e1047);
  --comparador-item-text-color: var(--color-primary, #2e1047);
  --comparador-item-bestSeller-color: var(--text-alternate-color, #ffffff);
  --comparador-item-bestSeller-background: var(--color-primary, #2e1047);
  --comparador-item-frequency: var(--color-primary, #2e1047);
  --comparador-item-price: var(--color-primary, #2e1047);
  --comparador-item-group-border-color: var(--color-primary, #2e1047);
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: var(--color-primary, #2e1047);
  --comparador-item-button-color: var(--color-primary, #2e1047);

  position: relative;
  padding: 80px 20px 30px 20px;
  background: var(--comparador-item-background);
  border-radius: 40px;
  text-align: center;
  background: transparent;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

.comparador__item h3 {
  font-size: 1.8em;
  line-height: 1.2;
  font-weight: 700;
  margin: 15px 0;
  height: 45px;
  color: var(--comparador-item-text-color);
}

.comparador__item p {
  color: var(--comparador-item-text-color);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.comparador__item p.comparador__item__description {
  font-weight: 400;
}

.comparador__item ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparador__item ul li {
  font-size: 13px;
  line-height: 17px;
  font-weight: 400;
  color: var(--comparador-item-text-color);
}

.comparador__item ul li span {
  color: var(--comparador-item-text-em);
  font-weight: bold;
}

/* Price Prueba */
.comparador__item__price-prueba {
  text-align: center;
  font-size: 29px;
  line-height: 43px;
  font-weight: 400;
  color: var(--comparador-item-price);
}

/* Card Groups */
.comparador__item__group {
  --item-group-padding-top: 20px;
  --item-group-padding-bottom: 20px;
  --item-group-title-height: 190px;
  --item-group-price-height: 90px;
  --item-group-features-height: 210px;
  --item-group-exclusive-products-height: 260px;
  --item-group-queries-height: 70px;
  --item-group-permanence-height: 110px;
  --item-group-cancellation-height: 80px;

  border-top: var(--comparador-item-group-border-width) solid var(--comparador-item-group-border-color);
  padding-top: var(--item-group-padding-top);
  padding-bottom: var(--item-group-padding-bottom);
}

.comparador__item__group:first-child {
  border-top: none;
  padding-top: 0;
}

.comparador__item__group-title {
  height: var(--item-group-title-height);
}

.comparador__item__group-price {
  --currency-top: -10px;
  --currency-left: -6px;
  --decimal-top: -10px;
  --decimal-left: 5px;
  --frequency-left: -10px;
  --frequency-top: 10px;

  position: relative;
  text-align: center;
  color: var(--comparador-item-price);
  height: var(--item-group-price-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparador__item__price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.comparador__item__price-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparador__item__price-sub {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
  opacity: 0.9;
}

.comparador__item__price-currency {
  position: relative;
  font-size: 17px;
  font-weight: 400;
  top: var(--currency-top);
  left: var(--currency-left);
}

.comparador__item__price-big-part {
  font-size: 50px;
  font-weight: 700;
}

.comparador__item__price-decimal-part {
  position: relative;
  font-size: 17px;
  font-weight: 400;
  top: var(--decimal-top);
  left: var(--decimal-left);
}

.comparador__item__price-frequency {
  font-size: 17px;
  font-weight: 300;
  color: var(--comparador-item-frequency);
  position: relative;
  margin-left: var(--frequency-left);
  margin-top: var(--frequency-top);
}

.comparador__item__group-features {
  height: var(--item-group-features-height);
  display: grid;
  place-items: center;
}

.comparador__item__group-exclusive-products {
  height: var(--item-group-exclusive-products-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.comparador__item__group-exclusive-products p {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.comparador__item__group-exclusive-products p span {
  margin-top: 10px;
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-primary, #2e1047);
}

.comparador__item__group-exclusive-products p:first-child {
  margin-bottom: 20px;
}

.comparador__item__single-payment {
  margin-top: 20px;
  font-size: 12px;
}

.comparador__item__group-queries {
  height: var(--item-group-queries-height);
  display: grid;
  place-items: center;
}

.comparador__item__group-permanence {
  height: var(--item-group-permanence-height);
  display: grid;
  place-items: center;
}

.comparador__item__group-cancellation {
  height: var(--item-group-cancellation-height);
}

/* Best Seller Badge */
.comparador__item__best-seller {
  position: absolute;
  left: 20px;
  right: 20px;
  text-align: center;
  top: 35px;
}

.comparador__item__best-seller span {
  font-size: 17px;
  line-height: 23px;
  font-weight: 400;
  background: var(--comparador-item-bestSeller-background);
  color: var(--comparador-item-bestSeller-color);
  padding: 10px 20px 5px;
  border-radius: 999px;
  display: inline-block;
}

/* Stars */
.comparador__item__stars {
  text-align: center;
  color: var(--comparador-item-stars-color);
}

.comparador__item__stars svg {
  height: 25px;
}

/* Buttons */
.comparador__item__buttons {
  margin-top: 20px;
}

.comparador__item__buttons .btn {
  display: inline-block;
  padding: 12px 30px;
  background: var(--comparador-item-button-color);
  color: var(--text-alternate-color, #ffffff);
  text-decoration: none;
  border-radius: var(--button-border-radius, 4px);
  font-size: 13px;
  font-weight: 700;
  transition: opacity 0.3s;
}

.comparador__item__buttons .btn:hover {
  opacity: 0.9;
}

/* Best Seller Card Variant */
.comparador__item-best-seller {
  --comparador-item-background: var(--color-primary, #2e1047);
  --comparador-item-stars-color: var(--color-secondary, #f8f892);
  --comparador-item-text-color: #d8c7ff;
  --comparador-item-bestSeller-color: var(--color-primary, #2e1047);
  --comparador-item-bestSeller-background: var(--color-secondary, #f8f892);
  --comparador-item-frequency: var(--color-secondary, #f8f892);
  --comparador-item-price: var(--color-secondary, #f8f892);
  --comparador-item-group-border-color: #ffffff;
  --comparador-item-text-em: var(--color-secondary, #f8f892);
  --comparador-item-button-color: var(--color-secondary, #f8f892);

  background: var(--comparador-item-background);
  color: var(--comparador-item-text-color);
}

/* Text elements in best seller use light purple */
.comparador__item-best-seller h3,
.comparador__item-best-seller p,
.comparador__item-best-seller li {
  color: #d8c7ff !important;
}

/* Title should use secondary color (yellow) */
.comparador__item-best-seller h3 {
  color: var(--color-secondary, #f8f892) !important;
}

/* Emphasized text uses secondary color (yellow) */
.comparador__item-best-seller li span,
.comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: var(--color-secondary, #f8f892) !important;
}

.comparador__item-best-seller .comparador__item__buttons .btn {
  --btn-background: var(--comparador-item-button-color);
  --btn-border-color: var(--comparador-item-button-color);
  --btn-text-color: var(--color-primary, #2e1047);

  background: var(--comparador-item-button-color);
  color: var(--color-primary, #2e1047);
}

/* Desktop Responsive */
@media (min-width: 1024px) {
  .comparador__item__group {
    --item-group-padding-top: 25px;
    --item-group-padding-bottom: 25px;
    --item-group-title-height: 210px;
    --item-group-price-height: 100px;
    --item-group-features-height: 300px;
    --item-group-exclusive-products-height: 330px;
    --item-group-queries-height: 90px;
    --item-group-permanence-height: 150px;
    --item-group-cancellation-height: 120px;
  }

  .comparador__item__group-price {
    --currency-top: -16px;
    --currency-left: -6px;
    --decimal-top: -16px;
    --decimal-left: 4px;
    --frequency-left: -5px;
    --frequency-top: 15px;
  }
}

/* Brand Variants */

/* Crediahora */
[data-brand="crediahora"] .comparador__item,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item {
  --comparador-item-stars-color: #95C11F;
  --comparador-item-text-color: #1D1D1B;
  --comparador-item-bestSeller-background: #1D1D1B;
  --comparador-item-bestSeller-color: #95C11F;
  --comparador-item-price: #1D1D1B;
  --comparador-item-group-border-color: #1D1D1B;
  --comparador-item-text-em: #95C11F;
  --comparador-item-button-color: #1D1D1B;
}

[data-brand="crediahora"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item-best-seller {
  --comparador-item-background: #1D1D1B;
  --comparador-item-stars-color: #95C11F;
  --comparador-item-text-color: #ffffff;
  --comparador-item-bestSeller-color: #1D1D1B;
  --comparador-item-bestSeller-background: #95C11F;
  --comparador-item-frequency: #95C11F;
  --comparador-item-price: #95C11F;
  --comparador-item-group-border-color: #ffffff;
  --comparador-item-text-em: #95C11F;
  --comparador-item-button-color: #95C11F;
}

[data-brand="crediahora"] .comparador__item-best-seller h3,
[data-brand="crediahora"] .comparador__item-best-seller li span,
[data-brand="crediahora"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #95C11F !important;
}

[data-brand="crediahora"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #95C11F;
  color: #1D1D1B;
}

/* OleDinero */
[data-brand="oledinero"] .comparador__item,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item {
  --comparador-item-stars-color: #d7ff7b;
  --comparador-item-text-color: #022d8e;
  --comparador-item-bestSeller-background: #022d8e;
  --comparador-item-bestSeller-color: #d7ff7b;
  --comparador-item-price: #022d8e;
  --comparador-item-group-border-color: #022d8e;
  --comparador-item-text-em: #022d8e;
  --comparador-item-button-color: #022d8e;
}

[data-brand="oledinero"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item-best-seller {
  --comparador-item-background: #022d8e;
  --comparador-item-stars-color: #d7ff7b;
  --comparador-item-text-color: #ffffff;
  --comparador-item-bestSeller-color: #022d8e;
  --comparador-item-bestSeller-background: #d7ff7b;
  --comparador-item-frequency: #d7ff7b;
  --comparador-item-price: #d7ff7b;
  --comparador-item-group-border-color: #ffffff;
  --comparador-item-text-em: #d7ff7b;
  --comparador-item-button-color: #d7ff7b;
}

[data-brand="oledinero"] .comparador__item-best-seller h3,
[data-brand="oledinero"] .comparador__item-best-seller li span,
[data-brand="oledinero"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #d7ff7b !important;
}

[data-brand="oledinero"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #d7ff7b;
  color: #022d8e;
  border-radius: 40px 40px 0 40px;
}

[data-brand="oledinero"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item__buttons .btn {
  border-radius: 40px 40px 0 40px;
}

/* CreditoPRO */
[data-brand="creditopro"] .comparador__item,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item {
  --comparador-item-stars-color: rgb(69, 112, 174);
  --comparador-item-text-color: rgb(69, 112, 174);
  --comparador-item-bestSeller-background: rgb(69, 112, 174);
  --comparador-item-bestSeller-color: rgb(243, 243, 243);
  --comparador-item-price: rgb(69, 112, 174);
  --comparador-item-group-border-color: rgb(69, 112, 174);
  --comparador-item-text-em: rgb(69, 112, 174);
  --comparador-item-button-color: rgb(51, 51, 51);
}

[data-brand="creditopro"] .comparador__item h3,
[data-brand="creditopro"] .comparador__item p,
[data-brand="creditopro"] .comparador__item li,
[data-brand="creditopro"] .comparador__item li span,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item h3,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item p,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item li,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item li span {
  color: rgb(69, 112, 174) !important;
}

[data-brand="creditopro"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item__buttons .btn {
  background: rgb(51, 51, 51) !important;
  color: rgb(243, 243, 243) !important;
  border-radius: 999px;
}

[data-brand="creditopro"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller {
  --comparador-item-background: rgb(69, 112, 174);
  --comparador-item-stars-color: rgb(243, 243, 243);
  --comparador-item-text-color: rgb(243, 243, 243);
  --comparador-item-bestSeller-color: rgb(243, 243, 243);
  --comparador-item-bestSeller-background: rgb(69, 112, 174);
  --comparador-item-frequency: rgb(243, 243, 243);
  --comparador-item-price: rgb(243, 243, 243);
  --comparador-item-group-border-color: rgb(243, 243, 243);
  --comparador-item-text-em: rgb(243, 243, 243);
  --comparador-item-button-color: rgb(243, 243, 243);
  background: rgb(69, 112, 174) !important;
}

[data-brand="creditopro"] .comparador__item-best-seller li span,
[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
[data-brand="creditopro"] .comparador__item-best-seller p,
[data-brand="creditopro"] .comparador__item-best-seller li,
[data-brand="creditopro"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller h3 {
  color: rgb(243, 243, 243) !important;
}

[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__best-seller span,
[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: rgb(243, 243, 243) !important;
  color: rgb(69, 112, 174) !important;
}

/* CreditoClic */
[data-brand="creditoclic"] .comparador__item,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item {
  --comparador-item-stars-color: rgb(122, 196, 174);
  --comparador-item-text-color: rgb(7, 48, 52);
  --comparador-item-bestSeller-background: rgb(7, 48, 52);
  --comparador-item-bestSeller-color: rgb(255, 255, 255);
  --comparador-item-price: rgb(7, 48, 52);
  --comparador-item-group-border-color: rgb(7, 48, 52);
  --comparador-item-text-em: rgb(7, 48, 52);
  --comparador-item-button-color: transparent;
}

[data-brand="creditoclic"] .comparador__item p,
[data-brand="creditoclic"] .comparador__item li,
[data-brand="creditoclic"] .comparador__item li span,
[data-brand="creditoclic"] .comparador__item h3,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item p,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item li,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item li span,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item h3 {
  color: rgb(7, 48, 52) !important;
}

[data-brand="creditoclic"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item__buttons .btn {
  background: transparent !important;
  color: rgb(7, 48, 52) !important;
  border: 2px solid rgb(7, 48, 52) !important;
  border-radius: 999px;
}

[data-brand="creditoclic"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller {
  --comparador-item-background: rgb(7, 48, 52);
  --comparador-item-stars-color: rgb(122, 196, 174);
  --comparador-item-text-color: rgb(255, 255, 255);
  --comparador-item-bestSeller-color: rgb(7, 48, 52);
  --comparador-item-bestSeller-background: rgb(122, 196, 174);
  --comparador-item-frequency: rgb(255, 255, 255);
  --comparador-item-price: rgb(255, 255, 255);
  --comparador-item-group-border-color: rgb(255, 255, 255);
  --comparador-item-text-em: rgb(122, 196, 174);
  --comparador-item-button-color: transparent;
  background: rgb(7, 48, 52) !important;
}

[data-brand="creditoclic"] .comparador__item-best-seller p,
[data-brand="creditoclic"] .comparador__item-best-seller li,
[data-brand="creditoclic"] .comparador__item-best-seller h3,
[data-brand="creditoclic"] .comparador__item-best-seller li span,
[data-brand="creditoclic"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: rgb(255, 255, 255) !important;
}

[data-brand="creditoclic"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: rgb(122, 196, 174) !important;
  color: rgb(255, 255, 255) !important;
}

[data-brand="creditoclic"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(255, 255, 255) !important;
}

/* CreditoAmigo */
[data-brand="creditoamigo"] .comparador__item,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item {
  --comparador-item-background: rgb(247, 247, 247);
  --comparador-item-stars-color: rgb(0, 0, 255);
  --comparador-item-text-color: rgb(0, 0, 0);
  --comparador-item-bestSeller-background: rgb(0, 0, 255);
  --comparador-item-bestSeller-color: rgb(255, 255, 255);
  --comparador-item-price: rgb(0, 0, 255);
  --comparador-item-group-border-color: rgb(0, 0, 255);
  --comparador-item-text-em: rgb(0, 0, 255);
  --comparador-item-button-color: rgb(0, 0, 255);
  background: rgb(247, 247, 247) !important;
}

[data-brand="creditoamigo"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item__buttons .btn {
  background: rgb(0, 0, 255) !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 40px;
}

[data-brand="creditoamigo"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller {
  --comparador-item-background: rgb(239, 240, 245);
  --comparador-item-stars-color: rgb(0, 0, 255);
  --comparador-item-text-color: rgb(29, 44, 86);
  --comparador-item-bestSeller-color: rgb(0, 0, 255);
  --comparador-item-bestSeller-background: rgb(255, 255, 255);
  --comparador-item-frequency: rgb(0, 0, 255);
  --comparador-item-price: rgb(0, 0, 255);
  --comparador-item-group-border-color: rgb(0, 0, 255);
  --comparador-item-text-em: rgb(0, 0, 255);
  --comparador-item-button-color: rgb(0, 0, 255);
  background: rgb(239, 240, 245) !important;
}

[data-brand="creditoamigo"] .comparador__item h3,
[data-brand="creditoamigo"] .comparador__item p,
[data-brand="creditoamigo"] .comparador__item li,
[data-brand="creditoamigo"] .comparador__item-best-seller h3,
[data-brand="creditoamigo"] .comparador__item-best-seller p,
[data-brand="creditoamigo"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item h3,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item p,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item li,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller li {
  color: rgb(0, 0, 0) !important;
}

[data-brand="creditoamigo"] .comparador__item-best-seller li span,
[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: rgb(0, 0, 255) !important;
}

[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__best-seller span,
[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: rgb(0, 0, 255) !important;
  color: rgb(255, 255, 255) !important;
}

/* Credicheck */
[data-brand="credicheck"] .comparador__item,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item {
  --comparador-item-background: rgb(247, 247, 247);
  --comparador-item-stars-color: #76bc74;
  --comparador-item-text-color: rgb(0, 0, 0);
  --comparador-item-bestSeller-background: #76bc74;
  --comparador-item-bestSeller-color: rgb(255, 255, 255);
  --comparador-item-price: #76bc74;
  --comparador-item-group-border-color: #76bc74;
  --comparador-item-text-em: #76bc74;
  --comparador-item-button-color: #76bc74;
  background: rgb(247, 247, 247) !important;
  border-radius: 150px 150px 0 0;
}

[data-brand="credicheck"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item__buttons .btn {
  background: #76bc74 !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 40px;
}

[data-brand="credicheck"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller {
  --comparador-item-background: rgb(239, 240, 245);
  --comparador-item-stars-color: #76bc74;
  --comparador-item-text-color: #4b8549;
  --comparador-item-bestSeller-color: #76bc74;
  --comparador-item-bestSeller-background: rgb(255, 255, 255);
  --comparador-item-frequency: #76bc74;
  --comparador-item-price: #76bc74;
  --comparador-item-group-border-color: #76bc74;
  --comparador-item-text-em: #76bc74;
  --comparador-item-button-color: #76bc74;
  background: rgb(239, 240, 245) !important;
  border-radius: 150px 150px 0 0 !important;
}

[data-brand="credicheck"] .comparador__item h3,
[data-brand="credicheck"] .comparador__item p,
[data-brand="credicheck"] .comparador__item li,
[data-brand="credicheck"] .comparador__item-best-seller h3,
[data-brand="credicheck"] .comparador__item-best-seller p,
[data-brand="credicheck"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item h3,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item p,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item li,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller li {
  color: rgb(0, 0, 0) !important;
}

[data-brand="credicheck"] .comparador__item-best-seller li span,
[data-brand="credicheck"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller li span,
.planes-amigo-comparADOR[data-brand="credicheck"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #76bc74 !important;
}

[data-brand="credicheck"] .comparador__item-best-seller .comparador__item__best-seller span,
[data-brand="credicheck"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="credicheck"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #76bc74 !important;
  color: rgb(255, 255, 255) !important;
}

/* Crediator */
[data-brand="crediator"] .comparador__item,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item {
  --comparador-item-stars-color: #333333;
  --comparador-item-text-color: #333333;
  --comparador-item-bestSeller-background: #00593F;
  --comparador-item-bestSeller-color: #CDF63E;
  --comparador-item-price: #333333;
  --comparador-item-frequency: #333333;
  --comparador-item-group-border-color: #333333;
  --comparador-item-text-em: #333333;
  --comparador-item-button-color: #F2D5E0;
}

[data-brand="crediator"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item__buttons .btn {
  color: #333333 !important;
  border-radius: 999px;
}

[data-brand="crediator"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller {
  --comparador-item-background: #CDF63E;
  --comparador-item-stars-color: #00593F;
  --comparador-item-text-color: #333333;
  --comparador-item-bestSeller-color: #CDF63E;
  --comparador-item-bestSeller-background: #00593F;
  --comparador-item-frequency: #333333;
  --comparador-item-price: #333333;
  --comparador-item-group-border-color: #333333;
  --comparador-item-text-em: #333333;
  --comparador-item-button-color: #00593F;
  background: #CDF63E !important;
}

[data-brand="crediator"] .comparador__item-best-seller p,
[data-brand="crediator"] .comparador__item-best-seller li,
[data-brand="crediator"] .comparador__item-best-seller li span,
[data-brand="crediator"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller {
  color: #333333 !important;
}

[data-brand="crediator"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #F55F99 !important;
}

[data-brand="crediator"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #00593F !important;
  color: #CDF63E !important;
}

/* Credifix */
[data-brand="credifix"] .comparador__item,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item {
  --comparador-item-stars-color: #182D52;
  --comparador-item-text-color: #182D52;
  --comparador-item-bestSeller-background: #182D52;
  --comparador-item-bestSeller-color: #D9E4F5;
  --comparador-item-price: #182D52;
  --comparador-item-frequency: #182D52;
  --comparador-item-group-border-color: #182D52;
  --comparador-item-text-em: #182D52;
  --comparador-item-button-color: #96B4E6;
}

[data-brand="credifix"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item__buttons .btn {
  color: #182D52 !important;
  border-radius: 10px;
}

[data-brand="credifix"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller {
  --comparador-item-background: #182D52;
  --comparador-item-stars-color: #FF0086;
  --comparador-item-text-color: #D9E4F5;
  --comparador-item-bestSeller-color: #ffffff;
  --comparador-item-bestSeller-background: #FF0086;
  --comparador-item-frequency: #FF0086;
  --comparador-item-price: #FF0086;
  --comparador-item-group-border-color: #D9E4F5;
  --comparador-item-text-em: #FF0086;
  --comparador-item-button-color: #FF0086;
  background: #182D52 !important;
}

[data-brand="credifix"] .comparador__item-best-seller h3,
[data-brand="credifix"] .comparador__item-best-seller p,
[data-brand="credifix"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller li {
  color: #D9E4F5 !important;
}

[data-brand="credifix"] .comparador__item-best-seller li span,
[data-brand="credifix"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #FF0086 !important;
}

[data-brand="credifix"] .comparador__item-best-seller .comparador__item__best-seller span,
[data-brand="credifix"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #FF0086 !important;
  color: #ffffff !important;
}

/* Crediscore */
[data-brand="crediscore"] .comparador__item,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item {
  --comparador-item-stars-color: #000000;
  --comparador-item-text-color: #000000;
  --comparador-item-bestSeller-background: #000000;
  --comparador-item-bestSeller-color: #ffffff;
  --comparador-item-price: #000000;
  --comparador-item-frequency: #000000;
  --comparador-item-group-border-color: #000000;
  --comparador-item-text-em: #907EE8;
  --comparador-item-button-color: #C5E5FC;
}

[data-brand="crediscore"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item__buttons .btn {
  color: #000000 !important;
  border: 2px solid #C5E5FC !important;
  border-radius: 999px;
}

[data-brand="crediscore"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller {
  --comparador-item-background: #000000;
  --comparador-item-stars-color: #907EE8;
  --comparador-item-text-color: #ffffff;
  --comparador-item-bestSeller-color: #ffffff;
  --comparador-item-bestSeller-background: #907EE8;
  --comparador-item-frequency: #907EE8;
  --comparador-item-price: #907EE8;
  --comparador-item-group-border-color: #ffffff;
  --comparador-item-text-em: #907EE8;
  --comparador-item-button-color: #907EE8;
  background: #000000 !important;
}

[data-brand="crediscore"] .comparador__item-best-seller h3,
[data-brand="crediscore"] .comparador__item-best-seller p,
[data-brand="crediscore"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller li {
  color: #ffffff !important;
}

[data-brand="crediscore"] .comparador__item-best-seller li span,
[data-brand="crediscore"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #907EE8 !important;
}

[data-brand="crediscore"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #907EE8 !important;
  color: #ffffff !important;
}

[data-brand="crediscore"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #907EE8 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Creditando */
[data-brand="creditando"] .comparador__item,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item {
  --comparador-item-stars-color: #002449;
  --comparador-item-text-color: #002449;
  --comparador-item-bestSeller-background: #002449;
  --comparador-item-bestSeller-color: #C6FD00;
  --comparador-item-price: #002449;
  --comparador-item-frequency: #002449;
  --comparador-item-group-border-color: #002449;
  --comparador-item-text-em: #002449;
  --comparador-item-button-color: transparent;
}

[data-brand="creditando"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item__buttons .btn {
  background: transparent !important;
  color: #002449 !important;
  border: 2px solid #002449 !important;
  border-radius: 0px;
}

[data-brand="creditando"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller {
  --comparador-item-background: #002449;
  --comparador-item-stars-color: #C6FD00;
  --comparador-item-text-color: #ffffff;
  --comparador-item-bestSeller-color: #002449;
  --comparador-item-bestSeller-background: #C6FD00;
  --comparador-item-frequency: #ffffff;
  --comparador-item-price: #ffffff;
  --comparador-item-group-border-color: #ffffff;
  --comparador-item-text-em: #C6FD00;
  --comparador-item-button-color: transparent;
  background: #002449 !important;
}

[data-brand="creditando"] .comparador__item-best-seller h3,
[data-brand="creditando"] .comparador__item-best-seller p,
[data-brand="creditando"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller li {
  color: #ffffff !important;
}

[data-brand="creditando"] .comparador__item-best-seller li span,
[data-brand="creditando"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #C6FD00 !important;
}

[data-brand="creditando"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #C6FD00 !important;
  color: #002449 !important;
}

[data-brand="creditando"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: transparent !important;
  color: #C6FD00 !important;
  border: 2px solid #C6FD00 !important;
}

/* Crediticio */
[data-brand="crediticio"] .comparador__item,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item {
  --comparador-item-stars-color: #13233A;
  --comparador-item-text-color: #13233A;
  --comparador-item-bestSeller-background: #13233A;
  --comparador-item-bestSeller-color: #FFA573;
  --comparador-item-price: #13233A;
  --comparador-item-frequency: #13233A;
  --comparador-item-group-border-color: #13233A;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #13233A;
  --comparador-item-button-color: #13233A;
}

[data-brand="crediticio"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item__buttons .btn {
  background: #13233A !important;
  color: #FFA573 !important;
  border: 2px solid #13233A !important;
  border-radius: 40px;
}

[data-brand="crediticio"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller {
  --comparador-item-background: #13233A;
  --comparador-item-stars-color: #FFA573;
  --comparador-item-text-color: #FFA573;
  --comparador-item-bestSeller-color: #13233A;
  --comparador-item-bestSeller-background: #FFA573;
  --comparador-item-frequency: #FFA573;
  --comparador-item-price: #FFA573;
  --comparador-item-group-border-color: #FFA573;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #FFA573;
  --comparador-item-button-color: #FFA573;
  background: #13233A !important;
}

[data-brand="crediticio"] .comparador__item-best-seller h3,
[data-brand="crediticio"] .comparador__item-best-seller p,
[data-brand="crediticio"] .comparador__item-best-seller li,
[data-brand="crediticio"] .comparador__item-best-seller li span,
[data-brand="crediticio"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #FFA573 !important;
}

[data-brand="crediticio"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #FFA573 !important;
  color: #13233A !important;
}

[data-brand="crediticio"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #FFA573 !important;
  color: #13233A !important;
  border: 2px solid #FFA573 !important;
}

/* Creditozas */
[data-brand="creditozas"] .comparador__item,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item {
  --comparador-item-stars-color: #000000;
  --comparador-item-text-color: #000000;
  --comparador-item-bestSeller-background: #000000;
  --comparador-item-bestSeller-color: #96B4E6;
  --comparador-item-price: #000000;
  --comparador-item-frequency: #000000;
  --comparador-item-group-border-color: #000000;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #000000;
  --comparador-item-button-color: #000000;
}

[data-brand="creditozas"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item__buttons .btn {
  background: #000000 !important;
  color: #96B4E6 !important;
  border: 2px solid #000000 !important;
  border-radius: 999px;
}

[data-brand="creditozas"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller {
  --comparador-item-background: #000000;
  --comparador-item-stars-color: #96B4E6;
  --comparador-item-text-color: #E5EAEA;
  --comparador-item-bestSeller-color: #000000;
  --comparador-item-bestSeller-background: #96B4E6;
  --comparador-item-frequency: #E5EAEA;
  --comparador-item-price: #E5EAEA;
  --comparador-item-group-border-color: #E5EAEA;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #96B4E6;
  --comparador-item-button-color: #96B4E6;
  background: #000000 !important;
}

[data-brand="creditozas"] .comparador__item-best-seller h3,
[data-brand="creditozas"] .comparador__item-best-seller p,
[data-brand="creditozas"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller li {
  color: #E5EAEA !important;
}

[data-brand="creditozas"] .comparador__item-best-seller li span,
[data-brand="creditozas"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #96B4E6 !important;
}

[data-brand="creditozas"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #96B4E6 !important;
  color: #000000 !important;
}

[data-brand="creditozas"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #96B4E6 !important;
  color: #000000 !important;
  border: 2px solid #96B4E6 !important;
}

/* Credizoom */
[data-brand="credizoom"] .comparador__item,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item {
  --comparador-item-stars-color: #000000;
  --comparador-item-text-color: #000000;
  --comparador-item-bestSeller-background: #000000;
  --comparador-item-bestSeller-color: #4EB5A4;
  --comparador-item-price: #000000;
  --comparador-item-frequency: #000000;
  --comparador-item-group-border-color: #000000;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #000000;
  --comparador-item-button-color: #000000;
}

[data-brand="credizoom"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item__buttons .btn {
  background: #000000 !important;
  color: #4EB5A4 !important;
  border: 2px solid #000000 !important;
  border-radius: 999px;
}

[data-brand="credizoom"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller {
  --comparador-item-background: #4EB5A4;
  --comparador-item-stars-color: #000000;
  --comparador-item-text-color: #000000;
  --comparador-item-bestSeller-color: #4EB5A4;
  --comparador-item-bestSeller-background: #000000;
  --comparador-item-frequency: #000000;
  --comparador-item-price: #000000;
  --comparador-item-group-border-color: #000000;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #000000;
  --comparador-item-button-color: #000000;
  background: #4EB5A4 !important;
}

[data-brand="credizoom"] .comparador__item-best-seller h3,
[data-brand="credizoom"] .comparador__item-best-seller p,
[data-brand="credizoom"] .comparador__item-best-seller li,
[data-brand="credizoom"] .comparador__item-best-seller li span,
[data-brand="credizoom"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller h3,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #000000 !important;
}

[data-brand="credizoom"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #000000 !important;
  color: #4EB5A4 !important;
}

[data-brand="credizoom"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #000000 !important;
  color: #4EB5A4 !important;
  border: 2px solid #000000 !important;
}

/* Mastercredi */
[data-brand="mastercredi"] .comparador__item,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item {
  --comparador-item-stars-color: #1A1A1A;
  --comparador-item-text-color: #1A1A1A;
  --comparador-item-bestSeller-background: #1A1A1A;
  --comparador-item-bestSeller-color: #93BCFC;
  --comparador-item-price: #1A1A1A;
  --comparador-item-frequency: #1A1A1A;
  --comparador-item-group-border-color: #1A1A1A;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #1A1A1A;
  --comparador-item-button-color: #1A1A1A;
}

[data-brand="mastercredi"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item__buttons .btn {
  background: #1A1A1A !important;
  color: #E2E8ED !important;
  border-radius: 10px;
}

[data-brand="mastercredi"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller {
  --comparador-item-background: #1A1A1A;
  --comparador-item-stars-color: #93BCFC;
  --comparador-item-text-color: #E2E8ED;
  --comparador-item-bestSeller-color: #1A1A1A;
  --comparador-item-bestSeller-background: #93BCFC;
  --comparador-item-frequency: #93BCFC;
  --comparador-item-price: #93BCFC;
  --comparador-item-group-border-color: #E2E8ED;
  --comparador-item-group-border-width: 1px;
  --comparador-item-text-em: #93BCFC;
  --comparador-item-button-color: #93BCFC;
  background: #1A1A1A !important;
}

[data-brand="mastercredi"] .comparador__item-best-seller h3,
[data-brand="mastercredi"] .comparador__item-best-seller p,
[data-brand="mastercredi"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller h3 {
  color: #E2E8ED !important;
}

[data-brand="mastercredi"] .comparador__item-best-seller li span,
[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #93BCFC !important;
}

[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__best-seller span,
[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #93BCFC !important;
  color: #1A1A1A !important;
}

/* Credipay */
[data-brand="credipay"] .comparador__item,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item {
  --comparador-item-background: #ffffff;
  --comparador-item-stars-color: #1564e9;
  --comparador-item-text-color: #333333;
  --comparador-item-bestSeller-background: #1564e9;
  --comparador-item-bestSeller-color: #ffffff;
  --comparador-item-price: #1564e9;
  --comparador-item-group-border-color: #e0e0e0;
  --comparador-item-text-em: #1564e9;
  --comparador-item-button-color: #1564e9;
}

[data-brand="credipay"] .comparador__item h3,
[data-brand="credipay"] .comparador__item p,
[data-brand="credipay"] .comparador__item li,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item h3,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item p,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item li {
  color: #333333 !important;
}

[data-brand="credipay"] .comparador__item h3 {
  color: #1564e9 !important;
}

[data-brand="credipay"] .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item__buttons .btn {
  background: #1564e9 !important;
  color: #ffffff !important;
  border-radius: 40px;
}

[data-brand="credipay"] .comparador__item-best-seller,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller {
  --comparador-item-background: #1564e9;
  --comparador-item-stars-color: #00dfdb;
  --comparador-item-text-color: #ffffff;
  --comparador-item-bestSeller-color: #1564e9;
  --comparador-item-bestSeller-background: #00dfdb;
  --comparador-item-frequency: #00dfdb;
  --comparador-item-price: #00dfdb;
  --comparador-item-group-border-color: rgba(255, 255, 255, 0.2);
  --comparador-item-text-em: #00dfdb;
  --comparador-item-button-color: #00dfdb;
  background: #1564e9 !important;
}

[data-brand="credipay"] .comparador__item-best-seller h3,
[data-brand="credipay"] .comparador__item-best-seller p,
[data-brand="credipay"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller h3 {
  color: #ffffff !important;
}

[data-brand="credipay"] .comparador__item-best-seller h3 {
  color: #00dfdb !important;
}

[data-brand="credipay"] .comparador__item-best-seller li span,
[data-brand="credipay"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span {
  color: #00dfdb !important;
}

[data-brand="credipay"] .comparador__item-best-seller .comparador__item__best-seller span,
[data-brand="credipay"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="credipay"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #00dfdb !important;
  color: #1564e9 !important;
}

[data-brand="creditoplan"] .comparador__item a.btn {
  color: #fff !important;
}

[data-brand="credital"] .comparador__item a.btn {
  color: #fff !important;
}

[data-brand="credisolve"] .comparador__item a.btn {
  color: #fff !important;
}


/* === styles.css === */
/**
 * Planes Incluyen Styles
 *
 * Component for displaying plan comparison section with banner and plan cards
 */

.plan-amigo-includes-banner {
  background: var(--banner-background);
  color: var(--banner-text-color);
  text-align: center;
  padding: 20px;
  margin: 0 -20px;

  & p {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--banner-text-color) !important;
  }
}

.plan-amigo-includes {
  text-align: center;
}

/* Plan cards grid — mobile: column, desktop: row */
.planes-incluyen-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

@media (min-width: 768px) {
  .planes-incluyen-cards {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
  }

  /* 3+ cards: llenan el contenedor a partes iguales */
  .planes-incluyen-cards[data-count="3"] .comparator-plan-card,
  .planes-incluyen-cards[data-count="4"] .comparator-plan-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    align-items: center;
  }

  /* 1-2 cards: ancho fijo, centradas sin ocupar todo el ancho */
  .planes-incluyen-cards[data-count="1"] .comparator-plan-card,
  .planes-incluyen-cards[data-count="2"] .comparator-plan-card {
    flex: 0 0 auto;
    width: 340px;
    max-width: 100%;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .plan-amigo-includes li {
    width: 100%;
  }
}

/* =============================================================================
 * Footer del comparador: texto + botón
 * Mobile: columna centrada, botón full-width
 * Tablet+: fila, texto a la izquierda, botón a la derecha
 * ============================================================================= */
.plan-amigo-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.plan-amigo-footer__text {
  text-align: center;
  margin: 0;
}

.plan-amigo-footer__btn {
  width: 100%;
  text-align: center;
  display: block;
}

@media (min-width: 768px) {
  .plan-amigo-footer {
    gap: 30px;
  }

  .plan-amigo-footer__text {
    text-align: left;
    flex: 1;
  }

  .plan-amigo-footer__btn {
    width: auto;
    display: inline-block;
    flex-shrink: 0;
  }
}

/* Responsive toggle button group */
.plan-amigo-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.plan-amigo-toggle-wrapper {
  display: flex;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.plan-amigo-toggle-btn {
  background: transparent;
  border: none;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold, 700);
  color: #333333;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-family: var(--font-family-base) !important;
}

.plan-amigo-toggle-btn:hover {
  color: var(--color-brand-primary);
}

.plan-amigo-toggle-btn.active {
  background-color: var(--color-brand-primary);
  color: #ffffff !important;
}

.plan-amigo-toggle-label {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-brand-primary);
  line-height: 1.2;
  text-align: left;
}

/* Responsiveness + sticky on mobile */
@media (max-width: 768px) {
  .plan-amigo-toggle-container {
    flex-direction: column;
    gap: 12px;
    /* Sticky: se pega al top del viewport cuando llega ahí */
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--color-surface-base, #ffffff);
    /* Extiende el fondo hasta los bordes del container */
    margin-left: calc(var(--body-padding-horizontal, 20px) * -1);
    margin-right: calc(var(--body-padding-horizontal, 20px) * -1);
    padding: 12px var(--body-padding-horizontal, 20px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .plan-amigo-toggle-wrapper {
    width: 100%;
    max-width: 450px;
  }

  .plan-amigo-toggle-btn {
    flex: 1;
    /* Sin esto, el item flex no se encoge por debajo del ancho de su texto
       (white-space:nowrap arriba + min-width:auto por defecto en flex
       items), y el wrapper se desborda en viewports angostos (~<340px). */
    min-width: 0;
    padding: 10px 15px;
    font-size: 0.85rem;
  }

  .plan-amigo-toggle-label {
    font-size: 1rem;
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

.container .container__content .plan-amigo-includes > p {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 30px;
}

.plan-amigo-includes .hero-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

.plan-amigo-includes .hero-list li {
  flex: 0 0 auto;
}

/* Remove top padding when banner is present */
.container.plan-amigo-includes-credimoney .container__content,
.container.plan-amigo-includes-crediahora .container__content,
.container.plan-amigo-includes-oledinero .container__content,
.container.plan-amigo-includes-creditoamigo .container__content,
.container.plan-amigo-includes-creditopro .container__content,
.container.plan-amigo-includes-creditoclic .container__content,
.container.plan-amigo-includes-credicheck .container__content {
  padding-top: 40px;
}

/* Brand-specific colors */
.container.plan-amigo-includes-credimoney {
  --banner-background: rgb(46, 16, 71);
  --banner-text-color: rgb(216, 199, 255);
  --badge-background: rgb(46, 16, 71);
  --badge-text-color: rgb(216, 199, 255);
  --card-background: rgb(247, 241, 246);
  --platino-background: rgb(46, 16, 71);
}

.container.plan-amigo-includes-crediahora {
  --banner-background: rgb(149, 193, 31);
  --banner-text-color: #ffffff;
  --badge-background: rgb(245, 245, 245);
  --badge-text-color: rgb(29, 29, 27);
  --card-background: rgb(245, 245, 245);
  --platino-background: rgb(0, 0, 0);
}

.container.plan-amigo-includes-oledinero {
  --banner-background: rgb(2, 45, 142);
  --banner-text-color: #ffffff;
  --badge-background: rgb(239, 239, 239);
  --badge-text-color: rgb(2, 45, 142);
  --card-background: rgb(247, 247, 247);
  --platino-background: rgb(2, 45, 142);
}

.container.plan-amigo-includes-credicheck {
  --banner-background: #76bc74;
  --banner-text-color: #ffffff;
  --badge-background: #edeef4;
  --badge-text-color: #18384e;
  --card-background: #edeef4;
  --platino-background: #e4e4e4;
}

/* Override hero-list badge styles - use more specific selectors to override brand styles */
.plan-amigo-includes .hero-list li,
.plan-amigo-includes .hero-list.hero-list--credimoney li,
.plan-amigo-includes .hero-list.hero-list--crediahora li,
.plan-amigo-includes .hero-list.hero-list--oledinero li {
  background: var(--badge-background);
  color: var(--badge-text-color) !important;
  padding: 10px 20px;
  border-radius: 9999px;
  font-weight: var(--font-weight-bold);
  font-size: 1.035rem;
}

/* Override card backgrounds - need to override the custom property itself */
.container.plan-amigo-includes-credimoney .comparator-plan-card {
  --card-background: rgb(247, 241, 246);
}

.container.plan-amigo-includes-crediahora .comparator-plan-card {
  --card-background: rgb(245, 245, 245);
}

.container.plan-amigo-includes-oledinero .comparator-plan-card {
  --card-background: rgb(247, 247, 247);
}

.container.plan-amigo-includes-credimoney .comparator-plan-card {
  & h3 {
    margin: 0;
    line-height: 1.2;
  }

  & .comparator-plan-card__description {
    margin: 0;
    line-height: 1.4;
  }

  & .comparator-plan-card__features {
    margin: 0;

    & li {
      line-height: 1.4;
    }
  }
}

.container.plan-amigo-includes-credimoney
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: rgb(46, 16, 71);
  background: rgb(46, 16, 71);
  --card-title-color: rgb(248, 248, 146);

  & h3 {
    color: rgb(248, 248, 146) !important;
  }
}

/* Estándar card badge for credimoney: purple bg with light purple text */
.container.plan-amigo-includes-credimoney
  .comparator-plan-card.comparator-plan-card__amigo_estandar {
  & .comparator-plan-card__exclusive {
    background: rgb(46, 16, 71) !important;
    color: rgb(216, 199, 255) !important;
    border-radius: 30px;
    padding: 6px 5px;
  }
}

/* Center footer text and button for all brands, remove margin
   Note: Only target footer paragraphs (direct children after the swiper), not the includeText paragraph */
.container.plan-amigo-includes-credimoney
  .container__content
  > p:not(.plan-amigo-includes > p),
.container.plan-amigo-includes-crediahora
  .container__content
  > p:not(.plan-amigo-includes > p),
.container.plan-amigo-includes-oledinero
  .container__content
  > p:not(.plan-amigo-includes > p),
.container.plan-amigo-includes-creditoamigo
  .container__content
  > p:not(.plan-amigo-includes > p),
.container.plan-amigo-includes-creditoclic
  .container__content
  > p:not(.plan-amigo-includes > p),
.container.plan-amigo-includes-creditopro
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-crediahora .comparator-plan-card {
  & h3 {
    margin: 0;
    line-height: 1.2;
  }

  & .comparator-plan-card__description {
    margin: 0;
    line-height: 1.4;
  }

  & .comparator-plan-card__features {
    margin: 0;

    & li {
      line-height: 1.4;
    }
  }
}

.container.plan-amigo-includes-crediahora
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: rgb(0, 0, 0);
  background: rgb(0, 0, 0);
  --card-title-color: rgb(149, 193, 31);

  & h3 {
    color: rgb(149, 193, 31) !important;
  }

  /* Platino card badge: light gray bg with dark text */
  & .comparator-plan-card__exclusive__available {
    background: rgb(245, 245, 245) !important;
    color: rgb(29, 29, 27) !important;
  }
}

/* Plus card badge for crediahora: green bg with light text */
.container.plan-amigo-includes-crediahora
  .comparator-plan-card.comparator-plan-card__amigo_plus {
  & .comparator-plan-card__exclusive__available {
    background: rgb(149, 193, 31) !important;
    color: rgb(245, 245, 245) !important;
  }
}

/* Estándar card badge for crediahora: green bg with light text (handles both available/unavailable) */
.container.plan-amigo-includes-crediahora
  .comparator-plan-card.comparator-plan-card__amigo_estandar {
  & .comparator-plan-card__exclusive {
    background: rgb(149, 193, 31) !important;
    color: rgb(245, 245, 245) !important;
    border-radius: 30px;
    padding: 6px 5px;
  }
}

.container.plan-amigo-includes-oledinero .comparator-plan-card {
  & h3 {
    margin: 0;
    line-height: 1.2;
  }

  & .comparator-plan-card__description {
    margin: 0;
    line-height: 1.4;
  }

  & .comparator-plan-card__features {
    margin: 0;

    & li {
      line-height: 1.4;
    }
  }
}

.container.plan-amigo-includes-oledinero
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: rgb(2, 45, 142);
  background: rgb(2, 45, 142);
  --card-title-color: rgb(215, 255, 123);

  & h3 {
    color: rgb(215, 255, 123) !important;
  }

  & .comparator-plan-card__exclusive__available {
    color: rgb(3, 45, 143);
  }
}

/* Estándar card badge for oledinero: dark blue bg with white text */
.container.plan-amigo-includes-oledinero
  .comparator-plan-card.comparator-plan-card__amigo_estandar {
  & .comparator-plan-card__exclusive {
    background: rgb(3, 45, 143) !important;
    color: rgb(255, 255, 255) !important;
    border-radius: 30px;
    padding: 6px 5px;
  }
}

/* Fix font sizes for plan cards */
.container-plan-amigo-includes .comparator-plan-card__amount-big-part {
  font-size: 2.7rem !important; /* 43.2px */
}

.container-plan-amigo-includes .comparator-plan-card__features {
  font-size: 0.72rem !important; /* 11.52px */
}

/* Platino card features should be slightly larger */
.container-plan-amigo-includes
  .comparator-plan-card--popular
  .comparator-plan-card__features {
  font-size: 0.81rem !important; /* 12.96px */
}

/* Brand-specific button colors and styles */
.container.plan-amigo-includes-credimoney .comparator-plan-card__buttons .btn {
  background: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border-color: rgb(248, 248, 146);
  border-radius: 40px;
  border-width: 2px;
  border-style: solid;
}

.container.plan-amigo-includes-crediahora .comparator-plan-card__buttons .btn {
  background: rgb(149, 193, 31);
  color: rgb(245, 245, 245);
  border-color: rgb(149, 193, 31);
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* Default: Primary Outline for all plan cards (cards 1, 3, 4) */
.container.plan-amigo-includes-oledinero .comparator-plan-card__buttons .btn {
  background: #ffffff;
  color: rgb(2, 45, 142);
  border-color: rgb(2, 45, 142);
  border-radius: 40px 40px 0 40px;
  border-width: 2px;
  border-style: solid;
}

/* Primary Filled for Platino card (card 2) only */
.container.plan-amigo-includes-oledinero
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: rgb(215, 255, 123);
  color: rgb(3, 45, 143);
  border-color: rgb(215, 255, 123);
  border-radius: 40px 40px 0 40px;
}

/* =============================================================================
 * CreditoClic brand-specific overrides
 * ============================================================================= */

.container.plan-amigo-includes-creditoclic {
  /* Banner dark teal */
  --banner-background: rgb(7, 48, 52);
  --banner-text-color: #ffffff;
}

/* CreditoClic hero list items: light gray bg, centered alignment */
.container.plan-amigo-includes-creditoclic .plan-amigo-includes .hero-list li {
  background: rgb(234, 238, 239) !important;
  color: rgb(7, 48, 52) !important;
  align-items: center !important;
}

/* CreditoClic hero list icons: green color and larger size */
.container.plan-amigo-includes-creditoclic
  .plan-amigo-includes
  .hero-list
  li
  .hero-list__icon {
  color: rgb(122, 196, 174) !important;
  width: 28px !important;
  height: 42px !important;
}

.container.plan-amigo-includes-creditoclic
  .plan-amigo-includes
  .hero-list
  li
  .hero-list__icon
  svg {
  color: rgb(122, 196, 174) !important;
  fill: rgb(122, 196, 174) !important;
  width: 28px !important;
  height: 42px !important;
}

.container.plan-amigo-includes-creditoclic
  .plan-amigo-includes
  .hero-list
  li
  .hero-list__icon
  svg
  path {
  fill: rgb(122, 196, 174) !important;
}

/* CreditoClic first card (Prueba) "15 dias gratis": dark teal text */
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card__prueba
  .comparator-plan-card__amount {
  color: rgb(7, 48, 52) !important;
}

/* CreditoClic Plus and Estándar card amounts: purple text */
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card__amigo_plus
  .comparator-plan-card__amount,
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card__amigo_estandar
  .comparator-plan-card__amount {
  color: rgb(175, 159, 205) !important;
}

/* CreditoClic buttons: outline style (transparent bg) */
.container.plan-amigo-includes-creditoclic .comparator-plan-card__buttons .btn {
  background: transparent !important;
  color: rgb(7, 48, 52);
  border-color: rgb(7, 48, 52);
  border-radius: 40px;
  border-width: 2px;
  border-style: solid;
}

/* CreditoClic Platino button: white outline */
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: transparent !important;
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
}

/* CreditoClic Platino old price: white */
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card--popular
  .comparator-plan-card__amount-old {
  color: rgb(255, 255, 255) !important;
}

/* CreditoClic exclusive badges: green bg with white text */
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: rgb(122, 196, 174) !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 30px;
  padding: 6px 5px;
}

/* CreditoClic Estándar card badge: green bg with white text */
.container.plan-amigo-includes-creditoclic
  .comparator-plan-card__amigo_estandar
  .comparator-plan-card__exclusive {
  background: rgb(122, 196, 174) !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 30px;
  padding: 6px 5px;
}

/* =============================================================================
/* CreditoAmigo brand-specific overrides
 * ============================================================================= */

.container.plan-amigo-includes-creditoamigo {
  /* Make the "Prueba gratuita" banner dark blue like credifix */
  --banner-background: #1d2f50;
  --banner-text-color: #ffffff;
  /* Make the features list "pills" like credifix */
  --badge-background: #e6f0ff;
  --badge-text-color: #1d2f50;
}

/* CreditoAmigo exclusive badges: white bg with blue text */
.container.plan-amigo-includes-creditoamigo
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 255) !important;
  border-radius: 30px;
  padding: 6px 5px;
}

/* CreditoAmigo Estándar card: white bg with blue text */
.container.plan-amigo-includes-creditoamigo
  .comparator-plan-card__amigo_estandar
  .comparator-plan-card__exclusive {
  background: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 255) !important;
  border-radius: 30px;
  padding: 6px 5px;
}

/* CreditoAmigo Platino card Ver condiciones: blue text */
.container.plan-amigo-includes-creditoamigo
  .comparator-plan-card--popular
  .comparator-plan-card__conditions
  a {
  color: rgb(0, 0, 255) !important;
}

/* =============================================================================
 * CreditoPRO brand-specific overrides
 * ============================================================================= */

.container.plan-amigo-includes-creditopro {
  /* Banner */
  --banner-background: rgb(69, 112, 174);
  --banner-text-color: #ffffff;
  /* Badges */
  --badge-background: rgb(243, 243, 243);
  --badge-text-color: rgb(51, 51, 51);
}

.container.plan-amigo-includes-creditopro .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
  font-size: 14.4px !important;
  font-weight: 500 !important;
}

/* CreditoPRO button colors: Regular cards = dark gray bg with white text */
.container.plan-amigo-includes-creditopro .comparator-plan-card__buttons .btn {
  background: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
  border-color: rgb(51, 51, 51);
  border-radius: 40px;
  border-width: 2px;
  border-style: solid;
}

/* CreditoPRO Platino card = light bg with blue text */
.container.plan-amigo-includes-creditopro
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: rgb(243, 243, 243);
  color: rgb(69, 112, 174);
  border-color: rgb(243, 243, 243);
}

/* CreditoPRO Estándar card exclusive badge: blue bg with white text */
.container.plan-amigo-includes-creditopro
  .comparator-plan-card__amigo_estandar
  .comparator-plan-card__exclusive {
  background: rgb(69, 112, 174) !important;
  color: rgb(243, 243, 243) !important;
  border-radius: 30px;
  padding: 6px 5px;
}

/* CreditoPRO footer button: dark gray bg with white text */
.container.plan-amigo-includes-creditopro .container__content > p > .btn {
  background: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
  border-color: rgb(51, 51, 51);
  border-radius: 40px;
  border-width: 2px;
  border-style: solid;
}

/* Footer paragraph text for OleDinero */
.container.plan-amigo-includes-oledinero .container__content > p {
  font-size: 1.15rem; /* 16.56px */
  margin: 0;
  text-align: center;
}

/* Footer button for OleDinero */
.container.plan-amigo-includes-oledinero .container__content > p > .btn {
  background: transparent;
  color: rgb(2, 45, 142);
  border-color: rgb(2, 45, 142);
  border-radius: 40px 40px 0 40px;
  border-width: 2px;
  border-style: solid;
}

/* =============================================================================
 * Creditozas brand-specific overrides
 * Black/dark theme with blue accent (#96b4e6)
 * ============================================================================= */
.container.plan-amigo-includes-creditozas {
  --banner-background: #000000;
  --banner-text-color: #ffffff;
  --badge-background: #000000;
  --badge-text-color: #ffffff;
  --card-background: rgba(229, 234, 234, 0.5);
  --platino-background: #1a1a1a;
}

.container.plan-amigo-includes-creditozas .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-creditozas .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-creditozas
  .plan-amigo-includes
  .hero-list
  .hero-list__icon {
  --list-icon-color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-creditozas .comparator-plan-card {
  --card-background: rgba(229, 234, 234, 0.5);
}

.container.plan-amigo-includes-creditozas
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #1a1a1a;
  background: #1a1a1a;
  --card-title-color: #e5eaea;
  --card-text-color: #e5eaea;

  & h3 {
    color: #e5eaea !important;
  }

  & .comparator-plan-card__amount {
    color: #96b4e6 !important;
  }

  & .comparator-plan-card__conditions a {
    color: #e5eaea;
  }
}

.container.plan-amigo-includes-creditozas .comparator-plan-card__buttons .btn {
  background: #000000;
  color: #96b4e6;
  border-color: #000000;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

.container.plan-amigo-includes-creditozas
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #96b4e6;
  color: #000000;
  border-color: #96b4e6;
}

.container.plan-amigo-includes-creditozas
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #000000 !important;
  color: #e5eaea !important;
}

.container.plan-amigo-includes-creditozas
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #e5eaea !important;
  color: #000000 !important;
}

.container.plan-amigo-includes-creditozas .comparator-plan-card__conditions a {
  color: #000000;
}

.container.plan-amigo-includes-creditozas
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-creditozas .container__content > p > .btn {
  background: #000000;
  color: #96b4e6;
  border-color: #000000;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* =============================================================================
 * Crediator brand-specific overrides
 * Pink (#f55f99) for titles/buttons, Dark green (#00593f) for banner/platino title,
 * Lime green (#cdf63e) for platino card background
 * ============================================================================= */
.container.plan-amigo-includes-crediator {
  --banner-background: #00593f;
  --banner-text-color: #ffffff;
  --badge-background: #f2f2f2;
  --badge-text-color: #333333;
  --card-background: #f2f2f2;
  --platino-background: #cdf63e;
}

.container.plan-amigo-includes-crediator .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-crediator .plan-amigo-includes .hero-list li,
.container.plan-amigo-includes-creditoamigo .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
  font-size: 14.4px !important;
  font-weight: 600 !important;
  align-items: center !important;
}

.container.plan-amigo-includes-crediator .plan-amigo-includes-banner {
  font-weight: 600;
}

.container.plan-amigo-includes-crediator .comparator-plan-card {
  --card-background: #f2f2f2;
  --card-title-color: #f55f99;
  --card-text-color: #333333;
  --card-amount-color: #f55f99;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__amount {
  color: #f55f99;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card.comparator-plan-card__prueba
  .comparator-plan-card__amount {
  color: #333333;
}

.container.plan-amigo-includes-crediator .comparator-plan-card h3 {
  color: #f55f99;
  font-size: 14.4px;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__description {
  font-weight: 600;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__amount-big-part {
  font-size: 30.24px !important;
  font-weight: 800;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__features {
  font-size: 0.8rem !important;
  font-weight: 600;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__features
  li {
  font-size: 11.52px !important;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__exclusive {
  font-weight: 600;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__conditions {
  font-weight: 600;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card
  .comparator-plan-card__conditions
  a {
  color: #f55f99;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #cdf63e;
  background: #cdf63e;
  --card-title-color: #00593f;
  --card-text-color: #333333;
  --card-amount-color: #333333;

  & h3 {
    color: #00593f !important;
  }

  & .comparator-plan-card__amount {
    color: #333333 !important;
  }

  & .comparator-plan-card__amount-big-part {
    font-size: 36px !important;
  }

  & .comparator-plan-card__conditions a {
    color: #333333;
  }
}

.container.plan-amigo-includes-crediator .comparator-plan-card__buttons .btn {
  background: #f55f99;
  color: #ffffff;
  border-color: #f55f99;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #00593f;
  color: #cdf63e;
  border-color: #00593f;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #f2d5e0 !important;
  color: #333333 !important;
}

.container.plan-amigo-includes-crediator
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #00593f !important;
  color: #cdf63e !important;
}

.container.plan-amigo-includes-crediator
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-crediator .container__content > p > .btn {
  background: #f2d5e0;
  color: #333333;
  border-color: transparent;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* =============================================================================
 * Creditando brand-specific overrides
 * Dark navy (#002449) / Lime green (#c6fd00) theme - INVERTED
 * ============================================================================= */
.container.plan-amigo-includes-creditando {
  --banner-background: #002449;
  --banner-text-color: #c6fd00;
  --badge-background: #ddecee;
  --badge-text-color: #002449;
  --card-background: #ddecee;
  --platino-background: #002449;
}

.container.plan-amigo-includes-creditando .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-creditando .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-creditando .comparator-plan-card {
  --card-background: #ddecee;
  --card-title-color: #002449;
}

.container.plan-amigo-includes-creditando
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #002449;
  background: #002449;
  --card-title-color: #c6fd00;
  --card-text-color: #ffffff;
  --card-amount-color: #ffffff;

  & h3 {
    color: #c6fd00 !important;
  }

  & .comparator-plan-card__conditions a {
    color: #ffffff;
  }
}

.container.plan-amigo-includes-creditando .comparator-plan-card__buttons .btn {
  background: transparent;
  color: #002449;
  border-color: #002449;
  border-radius: 0;
  border-width: 2px;
  border-style: solid;
}

.container.plan-amigo-includes-creditando
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: transparent;
  color: #c6fd00;
  border-color: #c6fd00;
}

.container.plan-amigo-includes-creditando
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #002449 !important;
  color: #ffffff !important;
}

.container.plan-amigo-includes-creditando
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #ddecee !important;
  color: #002449 !important;
}

.container.plan-amigo-includes-creditando
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-creditando .comparator-plan-card__conditions a {
  color: #002449;
}

.container.plan-amigo-includes-creditando .container__content > p > .btn {
  background: transparent;
  color: #002449;
  border-color: #002449;
  border-radius: 0;
  border-width: 2px;
  border-style: solid;
}

/* =============================================================================
 * Crediticio brand-specific overrides
 * Dark navy (#13233a) / Peach (#ffa573) theme
 * ============================================================================= */
.container.plan-amigo-includes-crediticio {
  --banner-background: #13233a;
  --banner-text-color: #ffa573;
  --badge-background: #13233a;
  --badge-text-color: #ffa573;
  --card-background: #e3f2fd;
  --platino-background: #13233a;
}

.container.plan-amigo-includes-crediticio .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-crediticio .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-crediticio .comparator-plan-card {
  --card-background: #e3f2fd;
  --card-title-color: #13233a;
}

.container.plan-amigo-includes-crediticio .comparator-plan-card__conditions a {
  color: #13233a;
}

.container.plan-amigo-includes-crediticio
  .plan-amigo-includes
  .hero-list
  li
  .hero-list__icon {
  --list-icon-color: #ffa573;
}

.container.plan-amigo-includes-crediticio
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #13233a;
  background: #13233a;
  --card-title-color: #ffa573;
  --card-text-color: #ffa573;
  --card-amount-color: #ffa573;

  & h3 {
    color: #ffa573 !important;
  }

  & .comparator-plan-card__amount {
    color: #ffa573 !important;
  }

  & .comparator-plan-card__conditions a {
    color: #ffa573;
  }
}

.container.plan-amigo-includes-crediticio .comparator-plan-card__buttons .btn {
  background: #13233a;
  color: #ffa573;
  border-color: #13233a;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

.container.plan-amigo-includes-crediticio
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #ffa573;
  color: #13233a;
  border-color: #ffa573;
}

.container.plan-amigo-includes-crediticio
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #13233a !important;
  color: #ffa573 !important;
}

.container.plan-amigo-includes-crediticio
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #ffa573 !important;
  color: #13233a !important;
}

.container.plan-amigo-includes-crediticio
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-crediticio .container__content > p > .btn {
  background: #ffa573;
  color: #ffffff;
  border-color: #ffa573;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* =============================================================================
 * Credifix brand-specific overrides
 * Dark blue (#182d52) / Light blue (#d9e4f5) / Pink (#ff0086) theme
 * Matches production credifix.es/plan-fix
 * ============================================================================= */
.container.plan-amigo-includes-credifix {
  --banner-background: #182d52;
  --banner-text-color: #ffffff;
  --badge-background: #d9e4f5;
  --badge-text-color: #182d52;
  --card-background: #d9e4f5;
  --platino-background: #182d52;
}

.container.plan-amigo-includes-credifix .container__content {
  padding-top: 40px;
}

.container.plan-amigo-includes-credifix .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
  font-size: 14.4px !important;
  font-weight: 500 !important;
}

.container.plan-amigo-includes-credifix .comparator-plan-card {
  --card-background: #d9e4f5;
  --card-title-color: #182d52;
  background: #d9e4f5;
}

.container.plan-amigo-includes-credifix .comparator-plan-card h3 {
  color: #182d52;
  font-size: 14.4px;
  font-weight: 500;
}

.container.plan-amigo-includes-credifix
  .comparator-plan-card
  .comparator-plan-card__amount {
  color: #182d52;
}

.container.plan-amigo-includes-credifix
  .comparator-plan-card
  .comparator-plan-card__amount-big-part {
  font-size: 30.24px !important;
  font-weight: 700;
}

.container.plan-amigo-includes-credifix
  .comparator-plan-card
  .comparator-plan-card__features {
  font-size: 0.6rem !important;
  font-weight: 500;
}

.container.plan-amigo-includes-credifix
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #182d52;
  background: #182d52;
  --card-title-color: #ff0086;
  --card-text-color: #d9e4f5;
  --card-amount-color: #ff0086;

  & h3 {
    color: #ff0086 !important;
  }

  & .comparator-plan-card__amount {
    color: #ff0086 !important;
  }

  & .comparator-plan-card__amount-big-part {
    font-size: 36px !important;
  }

  & .comparator-plan-card__conditions a {
    color: #d9e4f5;
  }
}

/* Regular cards: dark navy buttons with light text */
.container.plan-amigo-includes-credifix .comparator-plan-card__buttons .btn {
  background: #182d52;
  color: #d9e4f5;
  border-color: #182d52;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
}

/* Platino: pink buttons with white text */
.container.plan-amigo-includes-credifix
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #ff0086;
  color: #ffffff;
  border-color: #ff0086;
}

/* Regular cards exclusive: dark blue bg, light blue text */
.container.plan-amigo-includes-credifix
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #182d52 !important;
  color: #d9e4f5 !important;
}

/* Platino exclusive: light blue bg, dark blue text */
.container.plan-amigo-includes-credifix
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #d9e4f5 !important;
  color: #182d52 !important;
}

.container.plan-amigo-includes-credifix
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-credifix .container__content > p > .btn {
  background: #96b4e6;
  color: #182d52;
  border-color: #96b4e6;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
}

/* "Ver condiciones" links: navy for regular cards */
.container.plan-amigo-includes-credifix .comparator-plan-card__conditions a {
  color: #182d52;
}

/* "Ver condiciones" links: light for platino card (dark bg) */
.container.plan-amigo-includes-credifix
  .comparator-plan-card--popular
  .comparator-plan-card__conditions
  a {
  color: #d9e4f5;
}

/* =============================================================================
 * Crediscore brand-specific overrides
 * Purple (#907ee8) / Light blue (#e1f1fc) / Black theme
 * Matches production crediscore.es/plan-score
 * ============================================================================= */
.container.plan-amigo-includes-crediscore {
  --banner-background: #000000;
  --banner-text-color: #ffffff;
  --badge-background: #e1f1fc;
  --badge-text-color: #000000;
  --card-background: #e1f1fc;
  --platino-background: #000000;
}

.container.plan-amigo-includes-crediscore .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-crediscore .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
  font-size: 14.4px !important;
  font-weight: 500 !important;
}

.container.plan-amigo-includes-crediscore .comparator-plan-card {
  --card-background: #e1f1fc;
  --card-title-color: #000000;
  background: #e1f1fc;
}

.container.plan-amigo-includes-crediscore .comparator-plan-card h3 {
  color: #000000;
  font-size: 14.4px;
  font-weight: 700;
}

.container.plan-amigo-includes-crediscore
  .comparator-plan-card
  .comparator-plan-card__amount {
  color: #000000;
}

.container.plan-amigo-includes-crediscore
  .comparator-plan-card
  .comparator-plan-card__amount-big-part {
  font-size: 30.24px !important;
  font-weight: 700;
}

.container.plan-amigo-includes-crediscore
  .comparator-plan-card
  .comparator-plan-card__features {
  font-weight: 500;
}

.container.plan-amigo-includes-crediscore
  .comparator-plan-card
  .comparator-plan-card__features
  li {
  font-size: 12px !important;
}

.container.plan-amigo-includes-crediscore
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #000000;
  background: #000000;
  --card-title-color: #907ee8;
  --card-text-color: #ffffff;
  --card-amount-color: #907ee8;

  & h3 {
    color: #907ee8 !important;
  }

  & .comparator-plan-card__amount {
    color: #907ee8 !important;
  }

  & .comparator-plan-card__amount-big-part {
    font-size: 36px !important;
  }

  & .comparator-plan-card__features li {
    font-size: medium;
    text-align: justify;
  }
}

.container.plan-amigo-includes-crediscore .comparator-plan-card__buttons .btn {
  background: #907ee8;
  color: #ffffff;
  border-color: #907ee8;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* Platino button same style - purple bg, white text */
.container.plan-amigo-includes-crediscore
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #907ee8;
  color: #ffffff;
  border-color: #907ee8;
}

/* Regular cards exclusive: purple bg, white text */
.container.plan-amigo-includes-crediscore
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #907ee8 !important;
  color: #ffffff !important;
}

/* Platino exclusive: light blue bg, black text */
.container.plan-amigo-includes-crediscore
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #e1f1fc !important;
  color: #000000 !important;
}

.container.plan-amigo-includes-crediscore
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
}

.container.plan-amigo-includes-crediscore .container__content > p > .btn {
  background: #907ee8;
  color: #ffffff;
  border-color: #907ee8;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* "Ver condiciones" links: purple for regular cards */
.container.plan-amigo-includes-crediscore .comparator-plan-card__conditions a {
  color: rgba(144, 126, 232, 1);
}

/* "Ver condiciones" links: purple for platino card (dark bg) */
.container.plan-amigo-includes-crediscore
  .comparator-plan-card--popular
  .comparator-plan-card__conditions
  a {
  color: rgba(144, 126, 232, 1);
}

/* =============================================================================
 * Credizoom brand-specific overrides
 * Teal (#4eb5a4) / White theme
 * ============================================================================= */
.container.plan-amigo-includes-credizoom {
  --banner-background: #4eb5a4;
  --banner-text-color: #000000;
  --badge-background: #f4f8f9;
  --badge-text-color: #000000;
  --card-background: #f4f8f9;
  --platino-background: #4eb5a4;
}

.container.plan-amigo-includes-credizoom .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-credizoom .plan-amigo-includes {
  margin-top: 10px;
}

.container.plan-amigo-includes-credizoom .plan-amigo-includes-banner {
  padding: 10px;
}

.container.plan-amigo-includes-credizoom .plan-amigo-includes-banner p {
  font-size: 16.56px;
  color: #000000;
}

/* =============================================================================
 * Credizoom brand-specific overrides
 * ============================================================================= */
.container.plan-amigo-includes-credizoom .comparator-plan-card {
  --card-background: #f4f8f9;
  --card-title-color: #000000;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #4eb5a4;
  background: #4eb5a4;
  --card-title-color: #000000;
  --card-text-color: #000000;
  --card-amount-color: #000000;

  & h3 {
    color: #000000 !important;
  }

  & .comparator-plan-card__conditions a {
    color: #000000;
  }
}

.container.plan-amigo-includes-credizoom .comparator-plan-card__buttons .btn {
  background: #000000;
  color: #4eb5a4;
  border-color: #000000;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #000000;
  color: #4eb5a4;
  border-color: #000000;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #4eb5a4 !important;
  color: #000000 !important;
  font-size: 10.8px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available
  span {
  font-size: 14.4px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #dcfff8 !important;
  color: #000000 !important;
}

.container.plan-amigo-includes-credizoom .comparator-plan-card {
  gap: 10px;
}

.container.container-plan-amigo-includes.plan-amigo-includes-credizoom
  .comparator-plan-card
  h3 {
  font-family: "AdobeClean", sans-serif !important;
  font-size: 16.56px;
  font-weight: 500;
  text-transform: capitalize;
  padding-bottom: 0;
  margin-bottom: 0;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__description {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  font-size: 13px;
  color: #000000;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__description {
  font-size: 14.4px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__amount
  .comparator-plan-card__amount-big-part {
  font-size: 36px !important;
  color: #000000 !important;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__amount
  .comparator-plan-card__amount-big-part {
  font-size: 43.2px !important;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__amount-old {
  color: #000000;
  opacity: 1;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__buttons
  .btn {
  font-size: 14.4px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__features {
  font-size: 11.52px !important;
  padding-top: 0;
  padding-bottom: 0;
  gap: 2px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card.comparator-plan-card--popular
  .comparator-plan-card__features {
  font-size: 12.96px !important;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__unavailable {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  font-size: 10.8px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__unavailable
  span {
  font-size: 14.4px;
}

.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__conditions,
.container.plan-amigo-includes-credizoom
  .comparator-plan-card
  .comparator-plan-card__conditions
  a {
  color: #000000;
}

.container.plan-amigo-includes-credizoom
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
  font-size: 16.56px;
}

.container.plan-amigo-includes-credizoom .container__content > p > .btn {
  background: #000000;
  color: #4eb5a4;
  border-color: #000000;
  border-radius: 999px;
  border-width: 2px;
  border-style: solid;
}

/* =============================================================================
 * Mastercredi brand-specific overrides
 * Black (#1a1a1a) / Blue (#93bcfc) theme
 * ============================================================================= */
.container.plan-amigo-includes-mastercredi {
  --banner-background: #1a1a1a;
  --banner-text-color: #ffffff;
  --badge-background: #1a1a1a;
  --badge-text-color: #e2e8ed;
  --card-background: #e2e8ed;
  --platino-background: #1a1a1a;
}

.container.plan-amigo-includes-mastercredi .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-mastercredi .plan-amigo-includes-banner {
  padding: 10px;
}

.container.plan-amigo-includes-mastercredi .plan-amigo-includes-banner p {
  font-size: 16.56px;
  padding: 0;
  margin: 0;
}

.container.plan-amigo-includes-mastercredi .plan-amigo-includes > p {
  font-size: 16.56px;
}

.container.plan-amigo-includes-mastercredi .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
  font-size: 16.56px;
}

.container.plan-amigo-includes-mastercredi .comparator-plan-card {
  --card-background: #e2e8ed;
  --card-title-color: #1a1a1a;
}

/* #7030: Card h3 - AdobeClean 16.56px, weight 600, no margin */
/* Higher specificity needed to beat :root[data-brand] .container .container__content h3 in backgrounds.css */
:root .container.plan-amigo-includes-mastercredi .comparator-plan-card h3 {
  font-family: "AdobeClean", sans-serif !important;
  font-size: 16.56px;
  font-weight: 600;
  margin: 0;
}

/* #7031: Card description - no margin */
.container.plan-amigo-includes-mastercredi .comparator-plan-card__description {
  margin: 0;
}

/* #7034: Features - 11.52px, no margin */
.container.plan-amigo-includes-mastercredi .comparator-plan-card__features {
  font-size: 11.52px !important;
  margin: 0;
}

/* #7031: Amount - 43.2px */
.container.plan-amigo-includes-mastercredi
  .comparator-plan-card__amount-big-part {
  font-size: 43.2px !important;
}

/* #7031: Plan de prueba amount NOT bold (rest stay bold) */
.container.plan-amigo-includes-mastercredi
  .comparator-plan-card__prueba
  .comparator-plan-card__amount-big-part {
  font-weight: 400;
}

/* #7035: Exclusive unavailable + conditions - no margin */
.container.plan-amigo-includes-mastercredi .comparator-plan-card__exclusive {
  margin: 0;
}

.container.plan-amigo-includes-mastercredi .comparator-plan-card__conditions {
  margin: 0;
}

/* #7036: "Ver condiciones" link - black for inactive cards */
.container.plan-amigo-includes-mastercredi .comparator-plan-card__conditions a {
  color: #1a1a1a;
}

/* Active card (Platino) overrides */
.container.plan-amigo-includes-mastercredi
  .comparator-plan-card.comparator-plan-card--popular {
  --card-background: #1a1a1a;
  background: #1a1a1a;
  --card-title-color: #e2e8ed;
  --card-text-color: #e2e8ed;
  --card-amount-color: #e2e8ed;

  & h3 {
    color: #e2e8ed !important;
  }

  & .comparator-plan-card__conditions a {
    color: #e2e8ed;
  }

  /* #7034: Active card features - 12.96px, description - 14.4px */
  & .comparator-plan-card__features {
    font-size: 12.96px !important;
  }

  & .comparator-plan-card__description {
    font-size: 14.4px !important;
  }
}

/* #7032: Card buttons - 14.4px, square (10px radius) */
.container.plan-amigo-includes-mastercredi .comparator-plan-card__buttons .btn {
  background: #1a1a1a;
  color: #e2e8ed;
  border-color: #e2e8ed;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  font-size: 14.4px !important;
}

.container.plan-amigo-includes-mastercredi
  .comparator-plan-card--popular
  .comparator-plan-card__buttons
  .btn {
  background: #93bcfc;
  color: #1a1a1a;
  border-color: #1a1a1a;
}

.container.plan-amigo-includes-mastercredi
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #1a1a1a !important;
  color: #e2e8ed !important;
}

.container.plan-amigo-includes-mastercredi
  .comparator-plan-card--popular
  .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #93bcfc !important;
  color: #1a1a1a !important;
}

/* #7037: "Puedes comparar..." text - 16.56px, button square black bg */
.container.plan-amigo-includes-mastercredi
  .container__content
  > p:not(.plan-amigo-includes > p) {
  text-align: center;
  margin: 0;
  font-size: 16.56px;
}

.container.plan-amigo-includes-mastercredi .container__content > p > .btn {
  background: #1a1a1a !important;
  color: #e2e8ed !important;
  border-color: #1a1a1a;
  border-radius: 10px !important;
  border-width: 2px;
  border-style: solid;
}

@media (width >= 768px) {
  .plan-amigo-includes-banner {
    margin: 0 calc(var(--body-padding-horizontal) * -1);
  }
}

@media (width >= 1024px) {
  .plan-amigo-includes-banner {
    margin-left: calc((100vw - 85%) / -2);
    margin-right: calc((100vw - 85%) / -2);
  }
}

@media (width >= 1600px) {
  .plan-amigo-includes-banner {
    margin-left: calc((100vw - 1400px) / -2);
    margin-right: calc((100vw - 1400px) / -2);
  }
}

/* =============================================================================
 * Credisolve brand-specific overrides
 * ============================================================================= */
.container.plan-amigo-includes-credisolve {
  --banner-background: #e62095;
  --banner-text-color: #ffffff;
  --badge-background: #162b36;
  --badge-text-color: #ffffff;
  --card-background: #f5f5f5;
  --platino-background: #162b36;
}

.container.plan-amigo-includes-credisolve .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-credisolve .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-credisolve
  .comparator-plan-card
  .comparator-plan-card__buttons
  .btn {
  background: #e62095;
  color: #ffffff;
  border-color: #e62095;
  border-radius: 40px;
}

.container.plan-amigo-includes-credisolve .container__content > p > .btn {
  background: #162b36;
  color: #ffffff;
  border-color: #162b36;
  border-radius: 40px;
}

/* =============================================================================
 * Creditoplan brand-specific overrides
 * ============================================================================= */
.container.plan-amigo-includes-creditoplan {
  --banner-background: #1d4d51;
  --banner-text-color: #ffffff;
  --badge-background: #04c585;
  --badge-text-color: #ffffff;
  --card-background: #f5f5f5;
  --platino-background: #163c3f;
}

.container.plan-amigo-includes-creditoplan .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-creditoplan .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-creditoplan
  .comparator-plan-card
  .comparator-plan-card__buttons
  .btn {
  background: #1d4d51;
  color: #04c585;
  border-color: #1d4d51;
  border-radius: 40px;
}



/* =============================================================================
 * Credital brand-specific overrides
 * ============================================================================= */
.container.plan-amigo-includes-credital {
  --banner-background: #a318e1;
  --banner-text-color: #ffffff;
  --badge-background: #af9fcd;
  --badge-text-color: #ffffff;
  --card-background: #f5f5f5;
  --platino-background: #34323f;
}

.container.plan-amigo-includes-credital .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-credital .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}
.container.plan-amigo-includes-credital .comparator-plan-card__amigo_plus.comparator-plan-card--popular h3,
.container.plan-amigo-includes-credital .comparator-plan-card__amigo_plus.comparator-plan-card--popular .comparator-plan-card__amount-big-part{
  color: var(--color-surface-base);
}


.container.plan-amigo-includes-credital
  .comparator-plan-card
  .comparator-plan-card__buttons
  .btn {
  background: var(--color-brand-primary);
  color: var(--color-surface-base);
  border-color: var(--color-brand-primary);
  border-radius: 40px;
}

.container.plan-amigo-includes-credital .plan-amigo-footer__btn{
  color: var(--color-surface-base);
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

/* === index.css === */
.banner {
  display: flex;
  margin: 3rem auto 1rem;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.banner p {
  margin: 0;
}

.banner img {
  max-width: 100px;
}

  .page-registro__firma {

    .card-custom {
         box-shadow: none;
         background-color: transparent;
         
    }
  }

/* === styles.css === */
.product-page-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-page-layout__content {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 70px 0;
  background-color: #ffffff;
}


/* === styles.css === */
/* MOBILE FIRST */
.product-video-coaching {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Image hidden on mobile */
.product-video-coaching__media {
  display: none;
}

.product-video-coaching__image {
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

/* Content centered on mobile */
.product-video-coaching__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

/* ===== BADGE (pill with glow) ===== */
.product-video-coaching__badge-wrap {
  position: absolute;
  top: clamp(10px, 1.8vw, 16px);
  left: clamp(10px, 1.8vw, 16px);
  z-index: 3;
}

.product-video-coaching__badge-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  position: relative;
  box-shadow: 0 6px 18px rgba(255, 90, 101, 0.35);
  isolation: isolate;
}

.product-video-coaching__badge-new::before {
  /* sparkle star */
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.6 5.7L21 9.2l-4.5 4 1.1 6.1L12 16.9 6.4 19.3 7.5 13.2 3 9.2l6.4-1.5L12 2z' fill='%23ffffff'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.product-video-coaching__badge-new::after {
  /* pulse glow */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 90, 101, 0.55);
  animation: productVideoCoachingBadgePulse 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes productVideoCoachingBadgePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 90, 101, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(255, 90, 101, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 101, 0);
  }
}

@media (max-width: 420px) {
  .product-video-coaching__badge-new {
    font-size: 11px;
    padding: 5px 9px;
  }
}

/* ===== TEXT ===== */
.product-video-coaching__title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #111;
  margin: 2px 0 6px;
  margin-top: 4.5rem;
  text-wrap: balance;
}

.product-video-coaching__lead {
  color: #2a2a2a;
  line-height: 1.6;
  margin: 0;
}

.product-video-coaching__list {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.product-video-coaching__list li {
  position: relative;
  padding-left: 28px;
}

.product-video-coaching__list li::before {
  /* green check */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%2322c55e'/><path d='M17.5 8.5l-6 6-3-3' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.product-video-coaching__meta {
  color: #606060;
  font-size: 14px;
  margin: 0 0 4px;
}

/* ===== ACTIONS ===== */
.product-video-coaching__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.product-video-coaching__cta {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  border: 0;
  cursor: pointer;
}

.product-video-coaching__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.product-video-coaching__cta:active {
  transform: translateY(0);
  opacity: 0.92;
}

/* ===== BRAND-SPECIFIC STYLES ===== */

/* Crediahora: Use lime green for badge and CTA */
[data-brand="crediahora"] .product-video-coaching__badge-new {
  background: rgb(149, 193, 31);
  box-shadow: 0 6px 18px rgba(149, 193, 31, 0.35);
}

[data-brand="crediahora"] .product-video-coaching__badge-new::after {
  box-shadow: 0 0 0 0 rgba(149, 193, 31, 0.55);
  animation: productVideoCoachingBadgePulseCrediahora 2.4s ease-out infinite;
}

@keyframes productVideoCoachingBadgePulseCrediahora {
  0% {
    box-shadow: 0 0 0 0 rgba(149, 193, 31, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(149, 193, 31, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(149, 193, 31, 0);
  }
}

[data-brand="crediahora"] .product-video-coaching__cta {
  background: rgb(149, 193, 31);
  color: #1D1D1B;
}

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
  .product-video-coaching {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  /* Force display (more specificity) */
  .product-video-coaching .product-video-coaching__media {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 42%;
  }

  .product-video-coaching__content {
    margin: 0;
    max-width: none;
    flex: 1;
  }

  .product-video-coaching__title {
    font-size: 42px;
  }

  .product-video-coaching__lead {
    font-size: 18px;
  }

  .product-video-coaching__meta {
    font-size: 15px;
  }
}


/* === styles.css === */
/**
 * ProductosFinancieros Component Styles
 *
 * Multi-brand styles for financial products section
 */

:root {
  & .container-productos-financieros {
    --list-gap: 25px;
    --list-grid-template-columns: repeat(1, 1fr);
    --image-height: 385px;
    --image-fit: contain;
    --card-background: var(--color-brand-primaryLight, #ffffff);
    --container-text-color: var(--color-brand-primary);

    color: var(--container-text-color);
    position: relative;

    & .container__content {
      padding-bottom: 0;
    }

    & h2 {
      color: var(--container-text-color);
      margin-bottom: 25px;
      font-size: 39.6px;
      font-weight: 700;
      line-height: 39.6px;
    }

    & h3 {
      font-size: 22.32px;
      font-weight: 700;
      line-height: 26.784px;
    }

    & :is(h2, h3, p, ul) {
      text-align: center;
    }

    & ul {
      max-width: 600px;
      box-sizing: border-box;
      background-color: var(--card-background);
      display: grid;
      grid-template-columns: var(--list-grid-template-columns);
      margin: 0 auto;
      padding: 40px;
      gap: var(--list-gap);
      border-radius: 25px;
      list-style: none;

      & li {
        text-align: left;
        display: flex;
        gap: 20px;
        align-items: center;
        text-wrap: balance;
        font-size: 14.4px;
        font-weight: 400;
        line-height: 20.16px;

        & svg {
          color: var(--container-text-color);
          width: 40px;
          min-width: 40px;
          min-height: 30px;
        }
      }
    }

    & .btn {
      --btn-border-color: var(--color-brand-secondary);
      --btn-text-color: var(--color-text-inverse);
      font-size: 16.56px;
      font-weight: 700;
      line-height: 23.184px;
      padding: 12px 25px;
      border-radius: 40px;
    }

    & .container-productos-financieros__image {
      height: var(--image-height);

      & img {
        width: 100%;
        height: 100%;
        object-fit: var(--image-fit);
      }
    }
  }

  /* Credimoney brand styles */
  &[data-brand="credimoney"] {
    & .container-productos-financieros--credimoney {
      background-color: #f8f892;
      /* Light yellow background */
      font-family: "Helvetica Neue", sans-serif;

      & ul {
        background-color: #c0e5eb;
        /* Cyan card background */
      }
    }
  }

  /* Crediahora brand styles */
  &[data-brand="crediahora"] {
    & .container-productos-financieros--crediahora {
      font-family: "Montserrat", sans-serif;
      background-color: rgb(245, 245, 245);
      /* Light gray background */

      & ul {
        background-color: rgb(149, 193, 31);
        /* Green brand color */
        color: rgb(255, 255, 255);
        /* White text */

        & li {
          color: rgb(255, 255, 255);
          /* White text for list items */

          & svg {
            color: rgb(255, 255, 255);
            /* White icons */
          }
        }
      }

      & .btn {
        background-color: rgb(29, 29, 27);
        /* Dark button */
        color: rgb(245, 245, 245);
        /* Light text */
      }
    }
  }

  /* OleDinero brand styles */
  &[data-brand="oledinero"] {
    & .container-productos-financieros--oledinero {
      /* Override backgrounds.css secondary-bg styles with !important */
      --container-text-color: rgb(255, 255, 255) !important;
      /* White text for oledinero */
      --container-background: rgb(37, 71, 224) !important;
      /* Override secondary-bg lime green */
      font-family: "Poppins", sans-serif;
      background-color: rgb(37, 71, 224) !important;
      /* OleDinero primary blue */
      background-image: url("https://oledinero.es/images/bg/fondo-05.png") !important;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;

      & h2 {
        background: none;
        color: rgb(255, 255, 255) !important;
        /* White title */
        font-size: 2.3rem;
        /* --text-xl-font-size */
        line-height: 1.0;
        /* --text-xl-line-height */
        text-wrap: balance;
        font-weight: 700;
        /* --font-weight-bold */
      }

      & h3 {
        color: rgb(255, 255, 255) !important;
        /* White subtitle */
        font-size: 1.4rem;
        /* --text-lg-font-size */
        line-height: 1.5;
        /* --text-lg-line-height */
        text-wrap: balance;
        font-weight: 600;
        /* --font-weight-semibold */
      }

      & ul {
        background-color: rgb(3, 45, 143);
        /* Dark blue */

        & li {
          color: rgb(255, 255, 255) !important;
          /* White text for list items */

          & svg {
            color: rgb(215, 255, 123) !important;
            /* Lime green/yellow icons */
          }
        }
      }

      & .btn {
        background-color: rgba(0, 0, 0, 0) !important;
        /* Transparent background */
        color: rgb(255, 255, 255) !important;
        /* White text */
        border: 2px solid rgb(215, 255, 123) !important;
        /* Lime green/yellow border */
        border-radius: 40px 40px 0px 40px;
        /* Asymmetric: bottom-right corner square */
      }
    }
  }

  /* Creditoamigo brand styles */
  &[data-brand="creditoamigo"] {
    & .container-productos-financieros--creditoamigo {
      --container-text-color: #ffffff !important;
      font-family: "Seitu", sans-serif;
      background-image: linear-gradient(135deg, #0000ff, rgba(0, 0, 255, 0.2)) !important;
      background-color: #0000ff !important;

      & h2 {
        color: #ffffff !important;
        font-weight: 500;
      }

      & h3 {
        color: #ffffff !important;
      }

      & ul {
        background-color: rgba(242, 242, 242, 0.3);

        & li {
          color: #ffffff !important;

          & svg {
            color: #0000ff !important;
          }
        }
      }

      & .btn {
        background-color: #0000ff !important;
        color: #ffffff !important;
        border: 2px solid #0000ff !important;
        border-radius: 40px;
      }
    }
  }

  /* Credicheck brand styles */
  &[data-brand="credicheck"] {
    & .container-productos-financieros--credicheck {
      --container-text-color: #ffffff !important;
      font-family: "Funnel Display", sans-serif;
      background-image: linear-gradient(135deg, #76bc74, rgba(118, 188, 116, 0.2)) !important;
      background-color: #76bc74 !important;

      & h2 {
        color: #ffffff !important;
        font-weight: 500;
      }

      & h3 {
        color: #ffffff !important;
      }

      & ul {
        background-color: rgba(242, 242, 242, 0.3);

        & li {
          color: #ffffff !important;

          & svg {
            color: #76bc74 !important;
          }
        }
      }

      & .btn {
        background-color: #76bc74 !important;
        color: #ffffff !important;
        border: 2px solid #76bc74 !important;
        border-radius: 40px;
      }
    }
  }

  /* Creditoclic brand styles */
  &[data-brand="creditoclic"] {
    & .container-productos-financieros--creditoclic {
      --container-text-color: #073034 !important;
      font-family: "Montserrat", sans-serif;
      background-color: #eaeeef !important;

      & h2 {
        font-family: "Harabara", sans-serif;
        font-weight: 500;
        color: #073034 !important;
      }

      & ul {
        background-color: #073034;

        & li {
          color: #af9fcd !important;

          & svg {
            color: #af9fcd !important;
          }
        }
      }

      & .btn {
        background-color: transparent !important;
        color: #073034 !important;
        border: 2px solid #073034 !important;
        border-radius: 999px;
      }
    }
  }

  /* Creditopro brand styles (dark background) */
  &[data-brand="creditopro"] {
    & .container-productos-financieros--creditopro {
      --container-text-color: #f3f3f3 !important;
      font-family: "Open Sans", sans-serif;
      background-color: #1b4a82 !important;

      & h2 {
        font-weight: 800;
        color: #f3f3f3 !important;
      }

      & h3 {
        color: #f3f3f3 !important;
      }

      & ul {
        background-color: rgba(255, 255, 255, 0.05);

        & li {
          color: #ffffff !important;

          & svg {
            color: #f3f3f3 !important;
          }
        }
      }

      & .btn {
        background-color: #f3f3f3 !important;
        color: #4570ae !important;
        border: 2px solid #f3f3f3 !important;
        border-radius: 999px;
      }
    }
  }

  /* Crediator brand styles */
  &[data-brand="crediator"] {
    & .container-productos-financieros--crediator {
      --container-text-color: #333333 !important;
      font-family: "Manrope", sans-serif;
      background-color: #f2f2f2 !important;

      & h2 {
        font-weight: 800;
        color: #333333 !important;
      }

      & ul {
        background-color: #93c7bf;

        & li {
          color: #00593f !important;

          & svg {
            color: #00593f !important;
          }
        }
      }

      & .btn {
        background-color: #f2d5e0 !important;
        color: #333333 !important;
        border: 2px solid transparent !important;
        border-radius: 999px;
      }
    }
  }

  /* Credifix brand styles */
  &[data-brand="credifix"] {
    & .container-productos-financieros--credifix {
      --container-text-color: #182d52 !important;
      font-family: "Roboto", sans-serif;
      background-color: #d9e4f5 !important;

      & h2 {
        font-weight: 300;
        color: #182d52 !important;
      }

      & ul {
        background-color: #96b4e6;

        & li {
          color: #182d52 !important;

          & svg {
            color: #182d52 !important;
          }
        }
      }

      & .btn {
        background-color: #96b4e6 !important;
        color: #182d52 !important;
        border: 2px solid transparent !important;
        border-radius: 10px;
      }
    }
  }

  /* Crediscore brand styles */
  &[data-brand="crediscore"] {
    & .container-productos-financieros--crediscore {
      --container-text-color: #000000 !important;
      font-family: "Open Sans", sans-serif;
      background-color: #e1f1fc !important;

      & h2 {
        font-weight: 700;
        color: #000000 !important;
      }

      & ul {
        background-color: #907ee8;

        & li {
          color: #ffffff !important;

          & svg {
            color: #ffffff !important;
          }
        }
      }

      & .btn {
        background-color: #907ee8 !important;
        color: #ffffff !important;
        border: 2px solid transparent !important;
        border-radius: 999px;
      }
    }
  }

  /* Creditando brand styles */
  &[data-brand="creditando"] {
    & .container-productos-financieros--creditando {
      --container-text-color: #002449 !important;
      font-family: "Manrope", sans-serif;
      background-color: #ddecee !important;

      & h2 {
        font-weight: 800;
        color: #002449 !important;
      }

      & ul {
        background-color: #002449;

        & li {
          color: #c6fd00 !important;

          & svg {
            color: #c6fd00 !important;
          }
        }
      }

      & .btn {
        background-color: transparent !important;
        color: #002449 !important;
        border: 2px solid #002449 !important;
        border-radius: 0;
      }
    }
  }

  /* Crediticio brand styles */
  &[data-brand="crediticio"] {
    & .container-productos-financieros--crediticio {
      --container-text-color: #13233a !important;
      font-family: "Open Sans", sans-serif;
      background-color: #ffa573 !important;

      & h2 {
        font-weight: 700;
        color: #13233a !important;
      }

      & ul {
        background-color: #13233a;

        & li {
          color: #ffffff !important;

          & svg {
            color: #ffa573 !important;
          }
        }
      }

      & .btn {
        background-color: #13233a !important;
        color: #ffa573 !important;
        border: 2px solid #ffa573 !important;
        border-radius: 40px;
      }
    }
  }

  /* Creditozas brand styles */
  &[data-brand="creditozas"] {
    & .container-productos-financieros--creditozas {
      --container-text-color: #000000 !important;
      font-family: "Manrope", sans-serif;
      background-color: rgba(229, 234, 234, 0.5) !important;

      & h2 {
        font-weight: 800;
        color: #000000 !important;
      }

      & ul {
        background-color: rgba(0, 0, 0, 0.1);

        & li {
          color: #000000 !important;

          & svg {
            color: #96b4e6 !important;
          }
        }
      }

      & .btn {
        background-color: #000000 !important;
        color: #96b4e6 !important;
        border: 2px solid #000000 !important;
        border-radius: 999px;
      }
    }
  }

  /* Credizoom brand styles */
  &[data-brand="credizoom"] {
    & .container-productos-financieros--credizoom {
      --container-text-color: #000000 !important;
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      background-color: #f4f8f9 !important;

      & h2 {
        color: #000000 !important;
      }

      & ul {
        background-color: #4eb5a4;

        & li {
          color: #000000 !important;

          & svg {
            color: #000000 !important;
          }
        }
      }

      & .btn {
        background-color: #000000 !important;
        color: #4eb5a4 !important;
        border: 2px solid #000000 !important;
        border-radius: 999px;
      }
    }
  }

  /* Mastercredi brand styles (dark background) */
  &[data-brand="mastercredi"] {
    & .container-productos-financieros--mastercredi {
      --container-text-color: #e2e8ed !important;
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      background-color: #1a1a1a !important;

      & h2 {
        font-family: "Coolvetica", sans-serif !important;
        font-weight: 700;
        color: #e2e8ed !important;
      }

      & h3 {
        color: #e2e8ed !important;
      }

      & ul {
        background-color: rgba(255, 255, 255, 0.05);

        & li {
          color: #ffffff !important;

          & svg {
            color: #e2e8ed !important;
          }
        }
      }

      & .btn {
        background-color: #e2e8ed !important;
        color: #1a1a1a !important;
        border: none !important;
        border-radius: 10px;
      }
    }
  }
}

@media (width >=1024px) {
  :root {
    & .container-productos-financieros {
      --list-gap: 40px;
      --list-grid-template-columns: repeat(2, 1fr);
      --image-fit: cover;
      --image-height: 540px;

      & .container__content {
        --container-content-max-width: 100% !important;
        max-width: 100% !important;
        padding-bottom: var(--container-content-padding-vertical);
        padding-left: 0;
        padding-right: 0;
      }

      & .container-productos-financieros__image {
        position: absolute;
        bottom: 0;
        left: calc(50% + 220px);
        display: none;
      }
    }

    /* Crediator - image uses contain fit (natural proportions) */
    &[data-brand="crediator"] {
      & .container-productos-financieros--crediator {
        --image-fit: contain;
      }
    }

    /* Crediahora - image positioned more to the right with top overflow */
    &[data-brand="crediahora"] {
      & .container-productos-financieros--crediahora {
        --image-fit: contain;
        overflow: visible;

        & .container-productos-financieros__image {
          left: auto;
          right: 80px;
          top: -52px;
          bottom: 0;
          height: 689px;
        }
      }
    }

    /* OleDinero - uses default positioning (left: calc(50% + 220px)) with adjusted top */
    &[data-brand="oledinero"] {
      & .container-productos-financieros--oledinero {
        & .container-productos-financieros__image {
          top: 91px;
        }
      }
    }
  }
}


/* === styles.css === */
/**
 * Coaching Component Styles
 *
 * Styles for the video course player.
 */

.coaching-container {
  padding: 20px;
  background-color: var(--bg-color, #f5f5f5);
}

/* Course View */
.coaching-course {
  max-width: 1200px;
  margin: 0 auto;
}

.coaching-course__heading {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color-primary, #333);
}

.coaching-course__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
}

.coaching-course__sidebar {
  min-width: 0;
}

.coaching-course__main {
  min-width: 0;
}

.coaching-course__player-box {
  width: 100%;
}

.coaching-course__ratio-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.coaching-course__ratio-inner {
  position: absolute;
  inset: 0;
}

/* Video Player */
.coaching-player__video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  border-radius: 12px;
  outline: none;
  object-fit: cover;
}

.coaching-player__video:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 250, 29, 0.6);
}

/* Sidebar */
.coaching-sidebar {
  background: linear-gradient(180deg, #0d3b66, #197278);
  color: #fff;
  border-radius: 14px;
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.coaching-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px 10px;
  border-bottom: 1px solid #1b5a50;
  margin-bottom: 6px;
}

.coaching-sidebar__title {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.coaching-sidebar__count {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  color: #b7cbc6;
}

.coaching-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: grid;
  gap: 4px;
  overflow: auto;
  max-height: 70vh;
  outline: none;
}

.coaching-sidebar__item {
  min-width: 0;
}

.coaching-sidebar__button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}

.coaching-sidebar__button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #1b5a50;
}

.coaching-sidebar__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.coaching-sidebar__button--active {
  background: rgba(228, 250, 29, 0.08);
  border-color: rgba(228, 250, 29, 0.45);
}

.coaching-sidebar__number {
  font-weight: 700;
  opacity: 0.9;
}

.coaching-sidebar__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controls */
.coaching-controls {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.coaching-controls__label {
  flex: 2;
  background: linear-gradient(180deg, #0d3b66, #197278);
  color: #fff;
  border-radius: 999px;
  padding: 0 12px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
}

.coaching-controls__time,
.coaching-controls__nav {
  display: flex;
  gap: 0.5rem;
}

.coaching-controls__btn {
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #f8f9fa;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background-color 0.2s ease;
}

.coaching-controls__btn:hover:not(:disabled) {
  background-color: #e9ecef;
}

.coaching-controls__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.coaching-controls__btn--pill {
  border-radius: 999px;
  background: #fff;
  border: 1px solid #bbb;
}

.coaching-controls__btn--nav {
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 900px) {
  .coaching-course__layout {
    grid-template-columns: 1fr;
  }

  .coaching-course__sidebar {
    order: 2;
  }

  .coaching-course__main {
    order: 1;
  }

  .coaching-sidebar__button {
    padding: 12px 14px;
  }
}

@media (max-width: 600px) {
  .coaching-container {
    padding: 12px;
  }

  .coaching-course__heading {
    font-size: 1.25rem;
    margin-bottom: 10px;
  }

  .coaching-course__layout {
    gap: 12px;
  }

  .coaching-player__video {
    border-radius: 10px;
    object-fit: contain;
  }

  .coaching-sidebar {
    padding: 10px;
  }

  .coaching-sidebar__list {
    max-height: none;
    gap: 6px;
  }

  .coaching-sidebar__button {
    grid-template-columns: 26px 1fr;
    padding: 12px 12px;
  }

  .coaching-sidebar__number {
    font-size: 13px;
  }

  .coaching-sidebar__text {
    font-size: 15px;
  }

  .coaching-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .coaching-controls__label {
    width: 100%;
    order: 1;
  }

  .coaching-controls__time,
  .coaching-controls__nav {
    justify-content: center;
    order: 2;
  }
}


/* === styles.css === */
/**
 * Debt Component Styles
 *
 * Styles for the debt quiz/form wizard.
 * Uses CSS custom properties for brand theming.
 */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  50% {
    opacity: 0.4;
    top: 0;
  }

  75% {
    opacity: 1;
    top: 0;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

.debt-container {
  padding: 20px;
  background-color: var(--bg-color, #fff);
}

/* Loading State */
.debt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
}

.debt-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--color-primary, #6b21a8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success State */
.debt-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
  text-align: center;
  padding: 2rem;
}

.debt-success__icon {
  font-size: 4rem;
  color: #198754;
}

.debt-success h2 {
  margin: 0;
  color: var(--text-color-primary, #333);
}

.debt-success p {
  color: var(--text-color-secondary, #666);
  max-width: 400px;
}

/* Error Message */
.debt-error {
  background-color: #fee2e2;
  color: #dc2626;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin: 1rem 0;
  text-align: center;
}

/* Main Layout */
.debt {
  display: grid;
  gap: 2rem;
}

.debt .btn {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  border: 1px solid var(--color-primary, #002f87);
  background-color: transparent;
  color: var(--color-primary, #002f87);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.debt .btn:hover:not(:disabled) {
  background-color: var(--color-primary, #002f87);
  color: #fff;
}

.debt .btn:disabled {
  cursor: default;
  opacity: 0.2;
}

.debt .btn[type='submit'] {
  background-color: #198754;
  color: #fff;
  border-color: #198754;
}

.debt .btn[type='submit']:hover:not(:disabled) {
  background-color: #146c43;
}

/* Info Section */
.deuda__content {
  padding: 2rem;
}

.deuda__content h2 {
  font-weight: 700 !important;
  font-size: 1.8rem;
  line-height: 1;
  margin: 0 0 20px 0;
  color: var(--text-color-primary, #333);
}

.deuda__content p {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 10px;
  line-height: 26px;
  font-size: 18px;
  font-weight: 400;
  margin: 0.5rem 0;
  color: var(--text-color-secondary, #555);
}

.deuda__content .check-icon {
  color: #198754;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Quiz Section */
.debt-quiz {
  text-align: center;
  width: 100%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  padding: 0;
}

.debt-quiz-item {
  display: none;
  opacity: 0;
  width: 100%;
  flex-direction: column;
  color: #000;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #fff;
  border-radius: 0.375rem;
  padding: 2rem;
}

.debt-quiz-item.debt-quiz-item--active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.5s ease forwards;
}

.debt-quiz__title {
  font-weight: 700;
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
  color: var(--color-primary, #002f87);
}

.debt-quiz__description {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 15px;
  color: var(--color-primary, #002f87);
}

/* Button Options */
.debt-quiz__group-button {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.debt-quiz form {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.btn.btn--radio {
  padding: 1rem 1.5rem;
}

/* Checkbox Options */
.debt-quiz__group-checkbox {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.debt-quiz__checkbox-item {
  display: contents;
}

.debt-quiz__checkbox-item input[type='checkbox'] {
  display: none;
}

.debt-quiz__checkbox-item input[type='checkbox']+label {
  cursor: pointer;
}

.debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: var(--color-primary, #002f87);
  color: #fff;
}

/* Form Input */
.edit-profile-area__item {
  position: relative;
  margin-bottom: 1rem;
}

.edit-profile-area__item input {
  width: 100%;
  border: 1px solid rgb(18 18 18 / 23%);
  border-radius: 4px;
  padding: 1rem 0.75rem;
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
  font-weight: 300;
  font-size: 1rem;
  margin: 0;
}

.edit-profile-area__item input:disabled {
  pointer-events: none;
}

.edit-profile-area__item input:focus {
  outline: none;
  border-color: var(--color-primary, #002f87);
}

.edit-profile-area__item label {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 1;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0rem) translateX(0.75rem);
  font-size: 0.8rem;
}

.edit-profile-area__item--error {
  border: 1px solid rgb(255 8 8 / 89%);
  background-color: #ff00003b !important;
}

.edit-profile-area__item--error input {
  border: 1px solid rgb(255 8 8 / 89%);
  background-color: #ff00003b !important;
}

/* Province Display */
.province {
  position: absolute;
  top: 0;
  right: 6px;
  font-size: 0.8rem;
  color: #198754;
}

.province.province--error {
  color: #ff0000b0;
}

/* Final Form */
.form_inputs {
  text-align: left;
}

.form-checkbox-container {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.form-checkbox {
  display: grid;
  grid-auto-flow: column;
  align-items: self-start;
  text-align: left;
  justify-content: left;
  gap: 10px;
}

.form-checkbox input[type='checkbox'] {
  display: block;
}

.form-checkbox .form-checkbox__input-wrapper {
  padding-top: 1px;
}

.form-checkbox input[type='checkbox'] {
  margin-top: 3px;
}

.edit-profile-area__item__label {
  font-weight: normal;
  font-size: 0.9rem;
  color: var(--text-color-secondary, #555);
  cursor: pointer;
}

.text-small {
  font-size: 0.7rem;
  font-weight: normal;
  text-align: left;
  color: var(--text-color-secondary, #666);
  margin: 1rem 0;
}

.text-small a {
  color: var(--color-primary, #002f87);
}

/* Brand-specific button styles */

/* Credimoney */
.debt-container[data-brand="credimoney"] .btn {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border-color: rgb(248, 248, 146);
  border-radius: 40px;
  font-family: "Helvetica Neue", sans-serif;
}

/* Crediahora */
.debt-container[data-brand="crediahora"] .btn {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border-color: transparent;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
}

/* OleDinero */
.debt-container[data-brand="oledinero"] .btn {
  background-color: transparent;
  color: rgb(3, 45, 143);
  border-color: rgb(3, 45, 143);
  border-radius: 40px 40px 40px 0px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

/* CreditoAmigo */
.debt-container[data-brand="creditoamigo"] .btn {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  border-color: rgb(0, 0, 255);
  border-radius: 40px;
  font-family: "Seitu", sans-serif;
  font-weight: 400;
}

/* Credicheck */
.debt-container[data-brand="credicheck"] .btn {
  background-color: rgb(118, 188, 116);
  color: rgb(255, 255, 255);
  border-color: rgb(118, 188, 116);
  border-radius: 40px;
  font-family: "Funnel Display", sans-serif;
  font-weight: 400;
}

/* CreditoClic */
.debt-container[data-brand="creditoclic"] .btn {
  background-color: transparent;
  color: rgb(7, 48, 52);
  border-color: rgb(7, 48, 52);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

/* CreditoPRO */
.debt-container[data-brand="creditopro"] .btn {
  background-color: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
  border-color: rgb(51, 51, 51);
  border-radius: 999px;
  font-family: "Open Sans", sans-serif;
}

/* Crediator */
.debt-container[data-brand="crediator"] .btn {
  background-color: rgb(242, 213, 224);
  color: rgb(51, 51, 51);
  border-color: transparent;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
}

/* Credifix */
.debt-container[data-brand="credifix"] .btn {
  background-color: rgb(150, 180, 230);
  color: rgb(24, 45, 82);
  border-color: transparent;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

/* Crediscore */
.debt-container[data-brand="crediscore"] .btn {
  background-color: rgb(144, 126, 232);
  color: rgb(255, 255, 255);
  border-color: transparent;
  border-radius: 999px;
  font-family: "Open Sans", sans-serif;
}

/* Creditando */
.debt-container[data-brand="creditando"] .btn {
  background-color: transparent;
  color: rgb(0, 36, 73);
  border-color: rgb(0, 36, 73);
  border-radius: 0;
  font-family: "Manrope", sans-serif;
}

/* Crediticio */
.debt-container[data-brand="crediticio"] .btn {
  background-color: rgb(19, 35, 58);
  color: rgb(255, 165, 115);
  border-color: rgb(19, 35, 58);
  border-radius: 40px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

/* Creditozas */
.debt-container[data-brand="creditozas"] .btn {
  background-color: rgb(0, 0, 0);
  color: rgb(150, 180, 230);
  border-color: rgb(0, 0, 0);
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
}

/* Credizoom */
.debt-container[data-brand="credizoom"] .btn {
  background-color: rgb(0, 0, 0);
  color: rgb(78, 181, 164);
  border-color: rgb(0, 0, 0);
  border-radius: 999px;
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
}

/* Mastercredi */
.debt-container[data-brand="mastercredi"] .btn {
  background-color: rgb(26, 26, 26);
  color: rgb(226, 232, 237);
  border-color: transparent;
  border-radius: 10px;
  font-family: "AdobeClean", sans-serif;
  font-weight: 600;
}

/* Brand-specific submit button overrides */
.debt-container[data-brand="credimoney"] .btn[type='submit'] {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border-color: rgb(248, 248, 146);
}

.debt-container[data-brand="crediahora"] .btn[type='submit'] {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border-color: transparent;
}

.debt-container[data-brand="oledinero"] .btn[type='submit'] {
  background-color: rgb(3, 45, 143);
  color: #fff;
  border-color: rgb(3, 45, 143);
}

.debt-container[data-brand="creditoamigo"] .btn[type='submit'] {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  border-color: rgb(0, 0, 255);
}

.debt-container[data-brand="credicheck"] .btn[type='submit'] {
  background-color: rgb(118, 188, 116);
  color: rgb(255, 255, 255);
  border-color: rgb(118, 188, 116);
}

.debt-container[data-brand="creditoclic"] .btn[type='submit'] {
  background-color: rgb(7, 48, 52);
  color: #fff;
  border-color: rgb(7, 48, 52);
}

.debt-container[data-brand="creditopro"] .btn[type='submit'] {
  background-color: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
  border-color: rgb(51, 51, 51);
}

.debt-container[data-brand="crediator"] .btn[type='submit'] {
  background-color: rgb(242, 213, 224);
  color: rgb(51, 51, 51);
  border-color: transparent;
}

.debt-container[data-brand="credifix"] .btn[type='submit'] {
  background-color: rgb(150, 180, 230);
  color: rgb(24, 45, 82);
  border-color: transparent;
}

.debt-container[data-brand="crediscore"] .btn[type='submit'] {
  background-color: rgb(144, 126, 232);
  color: rgb(255, 255, 255);
  border-color: transparent;
}

.debt-container[data-brand="creditando"] .btn[type='submit'] {
  background-color: rgb(0, 36, 73);
  color: #fff;
  border-color: rgb(0, 36, 73);
}

.debt-container[data-brand="crediticio"] .btn[type='submit'] {
  background-color: rgb(19, 35, 58);
  color: rgb(255, 165, 115);
  border-color: rgb(19, 35, 58);
}

.debt-container[data-brand="creditozas"] .btn[type='submit'] {
  background-color: rgb(0, 0, 0);
  color: rgb(150, 180, 230);
  border-color: rgb(0, 0, 0);
}

.debt-container[data-brand="credizoom"] .btn[type='submit'] {
  background-color: rgb(0, 0, 0);
  color: rgb(78, 181, 164);
  border-color: rgb(0, 0, 0);
}

.debt-container[data-brand="mastercredi"] .btn[type='submit'] {
  background-color: rgb(26, 26, 26);
  color: rgb(226, 232, 237);
  border-color: transparent;
}

/* Brand-specific checkbox checked states */
.debt-container[data-brand="credimoney"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
}

.debt-container[data-brand="crediahora"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
}

.debt-container[data-brand="oledinero"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(3, 45, 143);
  color: #fff;
}

.debt-container[data-brand="creditoamigo"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
}

.debt-container[data-brand="credicheck"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: #76bc74;
  color: rgb(255, 255, 255);
}

.debt-container[data-brand="creditoclic"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(7, 48, 52);
  color: #fff;
}

.debt-container[data-brand="creditopro"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(51, 51, 51);
  color: rgb(243, 243, 243);
}

.debt-container[data-brand="crediator"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(242, 213, 224);
  color: rgb(51, 51, 51);
}

.debt-container[data-brand="credifix"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(150, 180, 230);
  color: rgb(24, 45, 82);
}

.debt-container[data-brand="crediscore"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(144, 126, 232);
  color: rgb(255, 255, 255);
}

.debt-container[data-brand="creditando"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(0, 36, 73);
  color: #fff;
}

.debt-container[data-brand="crediticio"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(19, 35, 58);
  color: rgb(255, 165, 115);
}

.debt-container[data-brand="creditozas"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(0, 0, 0);
  color: rgb(150, 180, 230);
}

.debt-container[data-brand="credizoom"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(0, 0, 0);
  color: rgb(78, 181, 164);
}

.debt-container[data-brand="mastercredi"] .debt-quiz__checkbox-item input[type='checkbox']:checked+label {
  background-color: rgb(26, 26, 26);
  color: rgb(226, 232, 237);
}

/* Responsive - Tablet and up */
@media (min-width: 786px) {
  .debt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .deuda__content {
    padding: 3rem;
  }
}


/* === styles.css === */
/**
 * Insolvency Component Styles
 *
 * Styles for the insolvency certificate flow.
 * Uses CSS custom properties for brand theming.
 */

.insolvency {
  max-width: 85%;
  margin: 0 auto;
  background-color: var(--bg-color, #fff);
  color: var(--text-basic-color-1, #002449);
  font-weight: var(--font-weight-medium, 500);
}

/* Loading State */
.insolvency--loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.insolvency__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.insolvency__spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--color-primary, #6b21a8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Step Component */
.insolvency-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.insolvency-step__image {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.insolvency-step__image img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  display: block;
}

.insolvency-step__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.insolvency-step__title {
  font-size: 1.8em;
  font-weight: var(--font-weight-medium, 500);
  text-align: center;
}

.insolvency-step__text {
  line-height: 1.5em;
  padding: 0.5em;
  font-weight: 600;
}

.insolvency__text-center {
  text-align: center;
  font-size: 1.1rem;
  margin: 1rem 0;
}

.insolvency-step__buttons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.insolvency-step__buttons > * {
  width: 80%;
}

.insolvency .insolvency-step .insolvency-step__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid #002f87;
  background-color: transparent;
  color: #002f87;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.insolvency .insolvency-step .insolvency-step__btn:hover {
  background-color: #002f87;
  color: #fff;
}

.insolvency .insolvency-step .insolvency-step__btn--secondary {
  background-color: #002f87;
  color: #fff;
}

.insolvency .insolvency-step .insolvency-step__btn--secondary:hover {
  background-color: #001f5c;
}

.insolvency-step__btn-icon {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

/* Debt Form (ModalForm equivalent) */
.insolvency-form-modal {
  margin-top: 1rem;
}

.insolvency-form-modal h4 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem 0;
}

.insolvency-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-bottom: 1rem;
}

.insolvency-form__fields .edit-profile-area__item {
  position: relative;
}

.insolvency-form__fields .edit-profile-area__item input {
  width: 100%;
  border: 1px solid rgb(18 18 18 / 23%);
  border-radius: 4px;
  padding: 1rem 0.75rem;
  padding-top: 2.5em;
  padding-bottom: 0.625rem;
  margin: 0;
  box-sizing: border-box;
  background-color: #e8eef7;
}

.insolvency-form__fields .edit-profile-area__item__label {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 1;
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: translateY(0rem) translateX(0.75rem);
  font-size: 0.8rem;
}

.insolvency .insolvency-form__submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  margin-top: 1.5rem;
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.insolvency .insolvency-form__submit-btn:hover:not(:disabled) {
  background-color: #45a049;
}

.insolvency .insolvency-form__submit-btn:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .insolvency-form-modal {
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 10px 5px 15px 0px rgba(0, 0, 0, 0.4);
  }
}

.insolvency-form-alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.insolvency-form-alert--success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.insolvency-form-alert--danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Responsive - Tablet and up */
@media (min-width: 768px) {
  .insolvency-step {
    flex-direction: row;
  }

  .insolvency-step__content {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: justify;
    font-size: 1.2em;
  }
}


/* === styles.css === */
/**
 * Prestamos Component Styles
 *
 * Styles for the loan application form wizard.
 * Uses CSS custom properties for brand theming.
 */

.prestamos-container {
  padding: 20px;
  background-color: var(--bg-color, #f5f5f5);
  min-height: 100vh;
}

/* Loading State */
.prestamos-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
}

.prestamos-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--color-primary, #6b21a8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success State */
.prestamos-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
  text-align: center;
  padding: 2rem;
  background-color: #fff;
  border-radius: 12px;
  max-width: 500px;
  margin: 0 auto;
}

.prestamos-success__icon {
  font-size: 4rem;
  color: #198754;
}

.prestamos-success h2 {
  margin: 0;
  color: var(--text-color-primary, #333);
}

.prestamos-success p {
  color: var(--text-color-secondary, #666);
}

/* Title */
.prestamos-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-primary, #002f87);
  margin: 0 0 1.5rem 0;
}

/* Steps Indicator */
.prestamos-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.prestamos-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
}

.prestamos-step__time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary, #002f87);
  font-size: 0.875rem;
}

.prestamos-step__label {
  color: var(--color-primary, #002f87);
  font-weight: 600;
  font-size: 0.875rem;
}

.prestamos-divider {
  width: 2px;
  height: 50px;
  background-color: var(--color-primary, #002f87);
  display: none;
}

@media (min-width: 768px) {
  .prestamos-divider {
    display: block;
  }
}

/* Progress Bar */
.prestamos-progress {
  max-width: 600px;
  margin: 0 auto 2rem;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.prestamos-progress__bar {
  height: 100%;
  background-color: var(--color-primary, #002f87);
  transition: width 0.3s ease;
  border-radius: 4px;
}

/* Errors */
.prestamos-errors {
  max-width: 600px;
  margin: 0 auto 1rem;
  padding: 1rem;
  background-color: #fee2e2;
  color: #dc2626;
  border-radius: 8px;
  text-align: center;
}

.prestamos-errors p {
  margin: 0;
}

/* Form */
.prestamos-form {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.prestamos-form__step {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prestamos-form__step h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color-primary, #333);
  text-align: center;
}

/* Form Groups */
.prestamos-form__group {
  margin-bottom: 1.5rem;
}

.prestamos-form__group > label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-color-secondary, #555);
}

.prestamos-form__buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.prestamos-form__buttons .btn {
  flex: 1;
  min-width: 80px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-primary, #002f87);
  background-color: #fff;
  color: var(--color-primary, #002f87);
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prestamos-form__buttons .btn:hover {
  background-color: var(--color-primary, #002f87);
  color: #fff;
}

.prestamos-form__buttons .btn.selected {
  background-color: var(--color-primary, #002f87);
  color: #fff;
}

/* Input Groups */
.prestamos-form__input-group {
  position: relative;
  margin-bottom: 1rem;
}

.prestamos-form__input-group input,
.prestamos-form__input-group select {
  width: 100%;
  padding: 1.5rem 0.75rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.prestamos-form__input-group input:focus,
.prestamos-form__input-group select:focus {
  outline: none;
  border-color: var(--color-primary, #002f87);
}

.prestamos-form__input-group label {
  position: absolute;
  top: 4px;
  left: 0.75rem;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
}

/* Row Layout */
.prestamos-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

/* Checkbox */
.prestamos-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.prestamos-form__checkbox input[type='checkbox'] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.prestamos-form__checkbox label {
  font-size: 0.9rem;
  color: var(--text-color-secondary, #555);
  cursor: pointer;
}

.prestamos-form__checkbox a {
  color: var(--color-primary, #002f87);
  font-weight: 500;
}

/* Legal Text */
.prestamos-form__legal {
  font-size: 0.75rem;
  color: var(--text-color-secondary, #666);
  text-align: center;
  margin-top: 1.5rem;
}

.prestamos-form__legal a {
  color: var(--color-primary, #002f87);
}

/* Summary */
.prestamos-form__summary {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.prestamos-form__summary p {
  margin: 0.5rem 0;
  color: var(--text-color-secondary, #555);
}

/* Submit Button */
.prestamos-form__submit {
  width: 100%;
  padding: 1rem;
  margin-top: 1.5rem;
  background-color: var(--color-primary, #002f87);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.prestamos-form__submit:hover:not(:disabled) {
  background-color: var(--color-primary-dark, #001f5c);
}

.prestamos-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 600px) {
  .prestamos-container {
    padding: 10px;
  }

  .prestamos-form {
    padding: 1rem;
  }

  .prestamos-form__buttons {
    flex-direction: column;
  }

  .prestamos-form__buttons .btn {
    min-width: 100%;
  }
}


/* === styles.css === */
/**
 * ProductCardPanel Component Styles
 *
 * Styles for product cards in the products panel/grid.
 * Uses CSS custom properties for brand theming.
 */

.product-card-panel {
  position: relative;
  background-color: var(--card-bg, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Locked/Featured state */
.product-card-panel--locked {
  background-color: var(--color-card-featured-bg, #f5f5f5);
  opacity: 0.7;
}

.product-card-panel--locked:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Brand-specific products (hidden by default) */
.product-card-panel--marca {
  display: none;
}

/* Lock icon */
.product-card-panel__lock {
  position: absolute;
  top: 20px;
  right: 25px;
  z-index: 2;
  font-size: 1.25rem;
  color: #000;
}

/* Image */
.product-card-panel__image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-card-panel__image--grayscale {
  filter: grayscale(100%);
}

/* Content */
.product-card-panel__content {
  padding: 20px 20px 70px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

/* Title */
.product-card-panel__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color-primary, #333);
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card-panel__title a {
  color: inherit;
  text-decoration: none;
}

.product-card-panel__title a:hover {
  color: var(--color-primary, #6b21a8);
}

.product-card-panel__title i {
  font-size: 0.875rem;
}

/* Info/Description */
.product-card-panel__info {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-color-secondary, #666);
  line-height: 1.5;
}

/* Price badge */
.product-card-panel__price {
  position: absolute;
  top: 20px;
  right: 25px;
  background-color: var(--color-primary, #6b21a8);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* CTA button */
.product-card-panel__cta {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.product-card-panel__cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #6b21a8);
  font-size: 1.75rem;
  transition: transform 0.2s ease;
}

.product-card-panel__cta-link:hover {
  transform: scale(1.1);
}

.product-card-panel--locked .product-card-panel__cta {
  display: none;
}

/* Responsive */
@media (max-width: 640px) {
  .product-card-panel__image {
    height: 160px;
  }

  .product-card-panel__content {
    padding: 15px 15px 60px 15px;
  }

  .product-card-panel__title {
    font-size: 1rem;
  }

  .product-card-panel__info {
    font-size: 0.8125rem;
  }
}


/* === styles.css === */
/**
 * ProductsPanel Component Styles
 *
 * Styles for the products panel/grid page.
 * Uses CSS custom properties for brand theming.
 */

.products-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
}

.products-panel__content {
  flex: 1;
  padding: 40px;
  width: 100%;
}

.products-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 100%;
  width: 100%;
}

/* Responsive grid */
@media (max-width: 1400px) {
  .products-panel__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .products-panel__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-panel__content {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .products-panel__grid {
    grid-template-columns: 1fr;
  }

  .products-panel__content {
    padding: 15px;
  }
}


/* === styles.css === */
/**
 * Scoring Component Styles
 *
 * Styles for the loan approval probability calculator.
 * Uses CSS custom properties for brand theming.
 */

.scoring {
  padding: 20px;
  background-color: var(--bg-color, #fff);
}

.scoring__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Speedometer Section */
.scoring__speedometer {
  display: grid;
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: 15px;
  height: 200px;
  margin-bottom: 100px;
}

.scoring__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color-primary, #333);
  margin: 0;
}

.scoring__probability {
  font-size: 1rem;
  margin: 0;
}

.scoring__probability-text {
  font-weight: 600;
}

/* Probability text colors based on gauge value */
.scoring__probability-text--0,
.scoring__probability-text--1,
.scoring__probability-text--2 {
  color: #ff0000;
}

.scoring__probability-text--3,
.scoring__probability-text--4,
.scoring__probability-text--5 {
  color: #ff8000;
}

.scoring__probability-text--6,
.scoring__probability-text--7,
.scoring__probability-text--8 {
  color: #cccc00;
}

.scoring__probability-text--9,
.scoring__probability-text--10 {
  color: #008000;
}

.scoring__gauge {
  margin: 0;
}

/* Controls Section */
.scoring__controls {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Inputs */
.scoring__inputs {
  display: grid;
  gap: 15px;
}

/* Input Component Styles */
.scoring-input {
  position: relative;
  display: flex;
  align-items: stretch;
}

.scoring-input__pretext {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  color: #666;
}

.scoring-input__field {
  flex: 1;
  padding: 1.5rem 1rem 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  background-color: #fff;
}

.scoring-input__field:disabled {
  background-color: #f5f5f5;
  color: #666;
}

.scoring-input__label {
  position: absolute;
  top: 0.25rem;
  left: 60px;
  font-size: 0.75rem;
  color: #666;
}

/* Sliders */
.scoring__sliders {
  display: grid;
  gap: 25px;
}

.scoring__slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scoring__slider-label {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: var(--text-color-primary, #333);
}

.scoring__slider-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #666;
}

/* rc-slider base styles (imported CSS not processed by build system) */
.rc-slider {
  position: relative;
  width: 100%;
  height: 14px;
  padding: 5px 0;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
}
.rc-slider * {
  box-sizing: border-box;
}
.rc-slider-rail {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e9e9e9;
  border-radius: 6px;
}
.rc-slider-track,
.rc-slider-tracks {
  position: absolute;
  height: 4px;
  background-color: #abe2fb;
  border-radius: 6px;
}
.rc-slider-handle {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background-color: #fff;
  border: solid 2px #96dbfa;
  border-radius: 50%;
  cursor: pointer;
  cursor: grab;
  opacity: 0.8;
  user-select: none;
  touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
  outline: none;
  box-shadow: none;
}
.rc-slider-handle:focus-visible {
  border-color: #2db7f5;
  box-shadow: 0 0 0 3px #96dbfa;
}
.rc-slider-handle:hover {
  border-color: #57c5f7;
}
.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: grabbing;
}
.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}

/* Attributes */
.scoring__attributes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.scoring__attribute {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
}

.scoring__attribute--green {
  color: #198754;
}

/* Buttons */
.scoring__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.scoring__btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  background-color: var(--color-primary, #6b21a8);
  color: #fff;
  min-width: 180px;
}

.scoring__btn:hover {
  background-color: var(--color-primary-dark, #5b1898);
  transform: translateY(-1px);
}

.scoring__btn--pdf {
  background-color: #dc3545;
}

.scoring__btn--pdf:hover {
  background-color: #c82333;
}

/* Responsive - Tablet and up */
@media (min-width: 768px) {
  .scoring__inputs {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .scoring__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Responsive - Desktop */
@media (min-width: 1000px) {
  .scoring__container {
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
    align-items: flex-start;
  }

  .scoring__speedometer {
    flex: 0 0 auto;
    margin-bottom: 50px;
  }

  .scoring__controls {
    flex: 1;
  }

  .scoring__inputs {
    max-width: 500px;
  }

  .scoring__buttons {
    justify-content: flex-start;
  }
}

/* Modal Overlay Styles */
.scoring__modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.scoring__modal {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.scoring__modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--text-color-primary, #333);
}

.scoring__modal-fields {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.scoring__modal-field {
  width: 100%;
}

.scoring__modal-field .scoring-input__label {
  left: 1rem;
}

.scoring__modal-field .scoring-input__field {
  border-radius: 4px;
}

.scoring__btn--save {
  background-color: #e6c84c;
  color: #333;
  min-width: 120px;
  float: right;
}

.scoring__btn--save:hover {
  background-color: #d4b83d;
}

/* Responsive - Modal on tablet */
@media (min-width: 768px) {
  .scoring__modal-fields {
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
  }
}


/* === styles.css === */
/**
 * ToolComparador Component Styles
 *
 * Styles for the product comparison tool.
 */

.tool-comparador {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.tool-comparador-header {
  text-align: center;
  margin-bottom: 40px;
}

.tool-comparador-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-color-primary, #2e1047);
  margin-bottom: 10px;
}

.tool-comparador-header p {
  font-size: 1.1rem;
  color: var(--text-color-secondary, #666);
}

.tool-comparador-content {
  padding: 0 10px;
}

/* Loader */
.tool-comparador-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e9ecef;
  border-top-color: var(--color-brand-primary, #03045e);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error */
.tool-comparador-error {
  text-align: center;
  padding: 40px;
  color: #dc3545;
}

/* Masonry Grid */
.masonry-container-comparator {
  column-gap: 1rem;
  width: 100%;
  margin-top: 20px;
  columns: 1;
}

@media (min-width: 768px) {
  .masonry-container-comparator {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-container-comparator {
    columns: 3;
  }
}

.masonry-item-comparator {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Card Compare */
.card-compare {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-category__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-color-primary, #2e1047);
  margin: 0 0 15px 0;
}

.card-category__link:hover {
  color: var(--color-brand-primary, #03045e);
}

.card-category__link img {
  border-radius: 4px;
}

/* Subcategory */
.card-subcategory--active {
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 6px;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
}

.card-subcategory--active:hover {
  border-color: var(--color-brand-primary, #03045e);
  background-color: rgba(3, 4, 94, 0.05);
}

.card-subcategory__content {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  align-items: center;
}

.subcategory-title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-text {
  font-size: 1.2rem;
}

.card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.custom-badge,
.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  min-width: 25px;
  height: 25px;
  padding: 0 5px;
  background-color: var(--color-brand-primary, #03045e);
  color: white;
  font-weight: bold;
  font-size: 0.85rem;
}

/* Back Button */
.tool-comparador .btn.btn--back {
  margin-bottom: 15px;
  background-color: var(--color-brand-primary, #03045e);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.tool-comparador .btn.btn--back:hover {
  opacity: 0.9;
}

/* Details Container */
.details-container {
  margin-top: 0;
}

.category-title {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color-primary, #2e1047);
}

.category-header {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.category-header p {
  color: #666;
  line-height: 1.6;
}

/* `details.category.descripcion` comes from the API as a raw HTML blob
   (rendered via dangerouslySetInnerHTML) that can contain its own headings
   and a plain <table> (e.g. the "Características" breakdown: Importe,
   Duración, Interés...). None of that markup had any styling, so it fell
   back to the browser's bare default table rendering - a stark black
   border box with a cramped, content-sized label column. Style it to match
   the rest of the card. */
.category-header h2,
.category-header h3,
.category-header h4 {
  margin: 24px 0 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color-primary, #2e1047);
}

.category-header h2:first-child,
.category-header h3:first-child,
.category-header h4:first-child {
  margin-top: 0;
}

.category-header table {
  /* !important + table-layout: fixed because the API's raw HTML sometimes
     carries its own inline width (on the <table> and/or its <td>s), which
     otherwise wins over a plain external `width: 100%` and left the table
     stuck at a narrow content-based width with dead space beside it. Fixed
     layout also makes the column widths below (not the cell content)
     decide each column's share of that 100%. */
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 12px 0 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.category-header th,
.category-header td {
  width: auto !important;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #e0e0e0;
  vertical-align: top;
  color: #666;
  line-height: 1.5;
}

.category-header tr > :first-child {
  width: 160px !important;
  min-width: 120px;
  background: #f0f0f0;
  font-weight: 700;
  color: var(--text-color-primary, #2e1047);
}

@media (max-width: 600px) {
  .category-header table,
  .category-header tbody,
  .category-header tr,
  .category-header th,
  .category-header td {
    display: block;
    width: 100%;
  }

  .category-header tr {
    margin-bottom: 12px;
  }

  .category-header tr > :first-child {
    width: auto;
    border-bottom: none;
  }
}

/* Subcategories List */
.subcategories-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
}

.tool-comparador .subcategory-item .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-brand-primary, #03045e);
  color: white;
  border: 1px solid var(--color-brand-primary, #03045e);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tool-comparador .subcategory-item .btn:hover {
  opacity: 0.9;
}

.subcategory-item .icon {
  font-size: 1rem;
}

.subcategory-item .name {
  font-weight: 600;
}

.subcategory-item .count {
  font-size: 0.75rem;
}

.subcategory-item .badge {
  background-color: white;
  color: var(--color-brand-primary, #03045e);
}

/* Filter Section */
.filter-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.filter-title {
  margin-bottom: 15px;
  font-weight: 600;
  color: var(--text-color-primary, #2e1047);
}

.filter-range-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
  font-size: 0.9em;
}

.filter-current-value {
  font-weight: 700;
  color: var(--color-brand-primary, #03045e);
}

.filter-count {
  text-align: center;
  margin-top: 10px;
  color: #666;
}

.form-range {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e9ecef;
  outline: none;
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-brand-primary, #03045e);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-brand-primary, #03045e);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  position: relative;
  min-height: 200px;
  perspective: 1000px;
  margin-top: 15px;
}

.product-card {
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.product-card.exit {
  animation: fadeOutRotate 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.product-card.enter {
  animation: fadeInRotate 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.visit-label {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--color-brand-primary, #03045e);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
}

.product-card:hover .visit-label {
  opacity: 1;
  transform: translateX(0);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f8f9fa;
  padding: 1rem;
}

.product-card-content {
  padding: 1rem;
}

.product-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-brand-primary, #03045e);
}

.product-card p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.price {
  background: #e9ecef;
  color: var(--color-brand-primary, #03045e);
  padding: 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Animations */
@keyframes fadeOutRotate {
  0% {
    transform: rotateY(0) translateZ(0);
    opacity: 1;
  }
  100% {
    transform: rotateY(-90deg) translateZ(100px);
    opacity: 0;
  }
}

@keyframes fadeInRotate {
  0% {
    transform: rotateY(90deg) translateZ(100px);
    opacity: 0;
  }
  100% {
    transform: rotateY(0) translateZ(0);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .tool-comparador {
    padding: 15px;
  }

  .tool-comparador-header h1 {
    font-size: 1.5rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .filter-section {
    padding: 1rem;
  }
}


/* === styles.css === */
/**
 * ProductsPage Component Styles
 *
 * Styles for the products/services grid page.
 * Uses CSS custom properties for brand theming.
 */

.products-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
}

.products-page__content {
  flex: 1;
  padding-top: 20px;
  width: 100%;
}

/* Override SectionServices container styles for this page */
.products-page .container-list-servicios {
  padding-top: 40px;
  padding-bottom: 60px;
  max-width: 100%;
  width: 100%;
}

.products-page .container-list-servicios .container__content {
  max-width: 100%;
  width: 100%;
  padding: 0 40px;
}

.products-page .container-list-servicios h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: var(--text-color-primary, #2e1047);
}

/* Grid layout adjustments - 3 columns per row */
.products-page .services-list__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .products-page .services-list__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .products-page .container-list-servicios .container__content {
    padding: 0 20px;
  }
}

@media (max-width: 640px) {
  .products-page .services-list__list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .products-page .container-list-servicios h2 {
    font-size: 1.5rem;
  }
}


/* === index.css === */
.rinput-wrapper {
    position: relative;
    input {
        background-color: #f8f8f8;
        border-radius: 50px;
        padding: 10px 20px;
        width: 100%;
    }
}

/* === index.css === */
.page-registro__bio {
  button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--color-brand-primary);
    color: #fff;
  }
  button:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .camera-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
  }

  .camera-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .face-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .face-outline.verified {
    border: 2px solid green;
    animation: pulse 1s infinite;
  }

  .face-outline.verified ellipse {
    stroke: #4caf50 !important;
    stroke-width: 3;
    stroke-dasharray: none;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.05);
    }

    100% {
      transform: scale(1);
    }
  }

  .face-overlay {
    width: 100%;
    height: 100%;
    opacity: 1;
  }

  .instructions {
    position: relative;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
  }

  .instructions.top {
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    text-align: center;
    color: white;
    padding-top: 1px;
    background: none;
    /* Remove the dark background */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    /* Add text shadow for better visibility */
    z-index: 10;
    /* Ensure the instructions are on top of all other elements */
  }

  .instructions p {
    margin: 5px 0;
  }

  .camera-controls {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
  }

  .preview-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .preview-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .preview-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .alert {
    font-size: 16px;
    /* Changed from 0 to 16px */
    line-height: 1.5;
    /* Changed from 0 to 1.5 */
  }

  .capture-button-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 0;
    text-align: center;
  }

  .capture-button {
    margin: 0 auto;
    padding: 12px 30px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-brand-primary) !important;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
  }

  .capture-button:hover {
    background: #fff;
    transform: scale(1.05);
  }

  .title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
  }

  .card-custom {
    display: grid;
    justify-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .card-custom .start-button,
  .card-custom .capture-button,
  .card-custom .preview-controls button {
    background-color: #0000ff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .card-custom .start-button:hover,
  .card-custom .capture-button:hover,
  .card-custom .preview-controls button:hover {
    background-color: #0000ff;
  }

  .card-custom .banner {
    margin-top: 20px;
    text-align: center;
  }

  .card-custom .banner img {
    max-width: 100px;
  }

  .verification-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: green;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .verification-message svg {
    width: 24px;
    height: 24px;
  }

  .verification-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: popIn 0.5s ease forwards;
    background: rgba(76, 175, 80, 0.9);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
  }

  @keyframes popIn {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }

    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .verification-check svg {
    width: 40px;
    height: 40px;
    stroke: white;
    stroke-width: 3;
  }

  .countdown {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: #4caf50;
    font-size: 48px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 100;
  }

  .powered-by--firma {
    .card-custom {
      box-shadow: none;
    }
  }
}


/* === index.css === */
/**
 * RRegistroDNI Component Styles
 *
 * Multi-brand DNI/ID upload form styling with step-based UI.
 */

.dni-page-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.dni-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.dni-title {
  margin-bottom: 1rem !important;
  font-weight: 700 !important;
  color: #1e293b;
  font-size: 1.75rem;
}

.dni-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.step-dot.active {
  background: #3b82f6;
  color: white;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.step-dot.completed {
  background: #10b981;
  color: white;
}

.step-line {
  width: 50px;
  height: 2px;
  background: #e2e8f0;
}

.dni-step-text {
  font-weight: 600;
  color: #64748b;
  font-size: 0.95rem;
}

.capture-step-animation {
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.back-to-step-btn {
  background: transparent;
  border: none;
  color: #3b82f6;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.back-to-step-btn:hover {
  background: #eff6ff;
}

.dni-footer-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.dni-capture-container {
  min-height: 280px;
  position: relative;
}

.dni-step--hidden {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

.step-navigation-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding: 10px;
}

.next-step-btn {
  width: 100%;
  max-width: 300px;
  min-height: 54px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Brand-specific styles */

/* Credimoney */
.dni-page-wrapper[data-brand="credimoney"] .dni-title {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: rgb(46, 16, 71);
}

.dni-page-wrapper[data-brand="credimoney"] .step-dot.active {
  background: rgb(46, 16, 71);
}

.dni-page-wrapper[data-brand="credimoney"] .step-dot.completed {
  background: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
}

.dni-page-wrapper[data-brand="credimoney"] .back-to-step-btn {
  color: rgb(46, 16, 71);
}

/* Crediahora */
.dni-page-wrapper[data-brand="crediahora"] .dni-title {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  color: rgb(29, 29, 27);
}

.dni-page-wrapper[data-brand="crediahora"] .step-dot.active {
  background: rgb(29, 29, 27);
}

/* OleDinero */
.dni-page-wrapper[data-brand="oledinero"] .dni-title {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  color: rgb(2, 45, 142);
}

.dni-page-wrapper[data-brand="oledinero"] .step-dot.active {
  background: rgb(2, 45, 142);
}

.dni-page-wrapper[data-brand="oledinero"] .back-to-step-btn {
  color: rgb(2, 45, 142);
}

/* CreditoAmigo */
.dni-page-wrapper[data-brand="creditoamigo"] .dni-title {
  font-family: "Seitu", sans-serif;
  font-weight: 700;
  color: #1D2C56;
}

.dni-page-wrapper[data-brand="creditoamigo"] .step-dot.active {
  background: #0000FF;
}

.dni-page-wrapper[data-brand="creditoamigo"] .step-dot.completed {
  background: #0000FF;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="creditoamigo"] .back-to-step-btn {
  color: #0000FF;
}

/* Credicheck */
.dni-page-wrapper[data-brand="credicheck"] .dni-title {
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
  color: #18384e;
}

.dni-page-wrapper[data-brand="credicheck"] .step-dot.active {
  background: #76bc74;
}

.dni-page-wrapper[data-brand="credicheck"] .step-dot.completed {
  background: #76bc74;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="credicheck"] .back-to-step-btn {
  color: #76bc74;
}

/* CreditoClic */
.dni-page-wrapper[data-brand="creditoclic"] .dni-title {
  font-family: "Harabara", sans-serif;
  font-weight: 700;
  color: #073034;
}

.dni-page-wrapper[data-brand="creditoclic"] .step-dot.active {
  background: #073034;
}

.dni-page-wrapper[data-brand="creditoclic"] .step-dot.completed {
  background: #ADEF45;
  color: #073034;
}

.dni-page-wrapper[data-brand="creditoclic"] .back-to-step-btn {
  color: #073034;
}

/* CreditoPRO */
.dni-page-wrapper[data-brand="creditopro"] .dni-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #333333;
}

.dni-page-wrapper[data-brand="creditopro"] .step-dot.active {
  background: #333333;
}

.dni-page-wrapper[data-brand="creditopro"] .step-dot.completed {
  background: #333333;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="creditopro"] .back-to-step-btn {
  color: #333333;
}

/* Crediator */
.dni-page-wrapper[data-brand="crediator"] .dni-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #333333;
}

.dni-page-wrapper[data-brand="crediator"] .step-dot.active {
  background: #f55f99;
}

.dni-page-wrapper[data-brand="crediator"] .step-dot.completed {
  background: #f55f99;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="crediator"] .back-to-step-btn {
  color: #f55f99;
}

/* Credifix */
.dni-page-wrapper[data-brand="credifix"] .dni-title {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: #182d52;
}

.dni-page-wrapper[data-brand="credifix"] .step-dot.active {
  background: #ff0086;
}

.dni-page-wrapper[data-brand="credifix"] .step-dot.completed {
  background: #ff0086;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="credifix"] .back-to-step-btn {
  color: #ff0086;
}

/* Crediscore */
.dni-page-wrapper[data-brand="crediscore"] .dni-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #000000;
}

.dni-page-wrapper[data-brand="crediscore"] .step-dot.active {
  background: #907ee8;
}

.dni-page-wrapper[data-brand="crediscore"] .step-dot.completed {
  background: #907ee8;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="crediscore"] .back-to-step-btn {
  color: #907ee8;
}

/* Creditando */
.dni-page-wrapper[data-brand="creditando"] .dni-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #002449;
}

.dni-page-wrapper[data-brand="creditando"] .step-dot.active {
  background: #002449;
}

.dni-page-wrapper[data-brand="creditando"] .step-dot.completed {
  background: #c6fd00;
  color: #002449;
}

.dni-page-wrapper[data-brand="creditando"] .back-to-step-btn {
  color: #002449;
}

/* Crediticio */
.dni-page-wrapper[data-brand="crediticio"] .dni-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #13233a;
}

.dni-page-wrapper[data-brand="crediticio"] .step-dot.active {
  background: #13233a;
}

.dni-page-wrapper[data-brand="crediticio"] .step-dot.completed {
  background: #ffa573;
  color: #13233a;
}

.dni-page-wrapper[data-brand="crediticio"] .back-to-step-btn {
  color: #13233a;
}

/* Creditozas */
.dni-page-wrapper[data-brand="creditozas"] .dni-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #000000;
}

.dni-page-wrapper[data-brand="creditozas"] .step-dot.active {
  background: #000000;
}

.dni-page-wrapper[data-brand="creditozas"] .step-dot.completed {
  background: #96b4e6;
  color: #000000;
}

.dni-page-wrapper[data-brand="creditozas"] .back-to-step-btn {
  color: #000000;
}

/* Credizoom */
.dni-page-wrapper[data-brand="credizoom"] .dni-title {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: #000000;
}

.dni-page-wrapper[data-brand="credizoom"] .step-dot.active {
  background: #4eb5a4;
}

.dni-page-wrapper[data-brand="credizoom"] .step-dot.completed {
  background: #4eb5a4;
  color: #ffffff;
}

.dni-page-wrapper[data-brand="credizoom"] .back-to-step-btn {
  color: #4eb5a4;
}

/* Mastercredi */
.dni-page-wrapper[data-brand="mastercredi"] .dni-title {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: #1a1a1a;
}

.dni-page-wrapper[data-brand="mastercredi"] .step-dot.active {
  background: #1a1a1a;
}

.dni-page-wrapper[data-brand="mastercredi"] .step-dot.completed {
  background: #e2e8ed;
  color: #1a1a1a;
}

.dni-page-wrapper[data-brand="mastercredi"] .back-to-step-btn {
  color: #1a1a1a;
}


/* === index.css === */
.page-registro {

  & .hero-container-registro-exito-error {
    padding-top: 0 !important;

    .loader-bg {
      position: relative;
      top: auto;
      left: auto;
    }
  }

  & .page-registro__exito {
    --registro-step-title-margin-bottom: 10px;
    display: grid;

    .skeleton-card {
      margin: 30px auto 0;
      width: 90vw;
    }

    & .hero-container-registro-exito {
      --container-background: #ffffff;
      max-width: unset;
      width: 100%;

      & h2 {
        font-family: var(--font-family);
        font-size: 2.5rem;
        font-weight: 900;
        line-height: normal;
      }

      & h3 {
        font-family: var(--font-family);
        font-size: 1.55rem;
        font-weight: 700;
        line-height: normal;
      }

      & p {
        font-family: var(--font-family);
        font-size: 0.9rem;
        font-weight: 400;
        line-height: normal;
      }

      & .container__content {
        --container-content-padding-bottom: 0;
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 43.2px;
        text-align: center;

        & .hero-container__image {
          max-width: 300px;
          margin: 0 auto;
        }
      }
    }

    .btn {
      font-family: var(--font-family);
      font-size: 1.2rem;
      font-weight: 700;
      border-radius: 999px;
      display: inline-flex;
      text-align: start;
    }


    & .hero-container-panel-control {
      & .container-col {
        flex-basis: 45%;
      }

      & .container-col-img {
        flex-basis: 55%;
        padding-right: 0;
        padding-bottom: 40px;
      }

      & .hero-container__image {
        width: 100%;
        max-height: none;
        margin-top: -50px;
        margin-bottom: 50px;
      }
    }
  }
}

@media (width >=768px) {
  .page-registro {
    & .page-registro__exito {
      & .hero-container-panel-control {
        margin: 0 0 0 auto;

        & .container-col-img {
          padding: 0;
        }
      }
    }
  }
}

@media (width >=1024px) {
  .page-registro {
    & .page-registro__exito {
      --registro-step-title-margin-bottom: 20px;

      & .hero-container-registro-exito {
        & .container__content {
          --container-content-padding-bottom: var(--body-padding-vertical);
          --padding-left: 50%;
          --image-wrapper-max-width: 50%;
          --image-left: -5%;

          position: relative;
          padding-left: var(--padding-left);

          & .hero-container__image {
            max-width: var(--image-wrapper-max-width);
            position: absolute;
            bottom: 0;
            left: var(--image-left);
            object-fit: contain;

            & img {
              width: 100%;
              height: auto;
              max-height: 530px;
            }
          }
        }
      }

      & .hero-container-panel-control {
        & .container-col-img {
          padding-bottom: 0;
        }

        & .hero-container__image {
          padding-bottom: 0px;
        }
      }
    }
  }
}

@media (width >=1200px) {
  .page-registro {
    & .page-registro__exito {
      & .hero-container-registro-exito {
        & .container__content {
          --padding-left: 50%;
          --image-wrapper-max-width: 50%;
          --image-left: 0%;
        }
      }
    }
  }
}

@media (width >=1500px) {
  .page-registro {
    & .page-registro__exito {
      & .hero-container-registro-exito {
        & .container__content {
          --padding-left: 47%;
          --image-left: 3%;
        }
      }
    }
  }
}

/* OleDinero specific button styling */
[data-brand="oledinero"] .page-registro .page-registro__exito .btn {
  font-weight: 500;
  border-radius: 40px 40px 0px;
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}


/* === index.css === */
/**
 * RRegistroFirma Component Styles
 *
 * Multi-brand signature form styling with ContactoHeroForm patterns.
 */

.page-registro__firma {
  width: 100%;
}

.page-registro__firma__content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 15px;
  background-color: #ffffff;
}

.page-registro__firma header {
  text-align: center;
  margin-bottom: 30px;
}

.page-registro__firma header h2 {
  margin: 0 0 20px 0;
  font-size: 32px;
  font-weight: 600;
}

.page-registro__firma header p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Signature area */
.page-registro__firma-area {
  display: grid;
  justify-items: center;
  align-items: center;
  max-width: 500px;
  height: 200px;
  margin: 50px auto 0;
  cursor: pointer;
  border: 2px dashed #ccc;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.page-registro__firma-area:hover {
  border-color: var(--color-brand-primary, #007bff);
  background-color: rgba(0, 123, 255, 0.05);
}

.page-registro__firma-icon {
  color: var(--color-brand-primary, #007bff);
  font-size: 44px;
}

.page-registro__firma-subtitle {
  color: var(--color-brand-primary, #007bff);
  font-size: 14px;
  margin-top: 10px;
}

.page-registro__signature {
  background-color: rgba(13, 13, 13, 0.05);
  width: 100%;
  border-radius: 12px;
  border: 1px solid #ddd;
}

/* Modal styles - ContactoHeroForm pattern */
.modal__input-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal__input-group label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}

.modal__input-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-top: 2px;
}

.modal__button-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.modal__button-group .btn {
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Download section */
.page-registro__download {
  text-align: center;
  margin-top: 20px;
}

/* Brand-specific styles - ContactoHeroForm pattern */

/* Credimoney */
.page-registro__firma[data-brand="credimoney"] header h2 {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: rgb(46, 16, 71);
}

.page-registro__firma[data-brand="credimoney"] .page-registro__firma-icon,
.page-registro__firma[data-brand="credimoney"] .page-registro__firma-subtitle {
  color: rgb(46, 16, 71);
}

.page-registro__firma[data-brand="credimoney"] .page-registro__firma-area:hover {
  border-color: rgb(46, 16, 71);
  background-color: rgba(46, 16, 71, 0.05);
}

.page-registro__firma[data-brand="credimoney"] .btn {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border: 2px solid rgb(248, 248, 146);
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Crediahora */
.page-registro__firma[data-brand="crediahora"] header h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  color: rgb(29, 29, 27);
}

.page-registro__firma[data-brand="crediahora"] .page-registro__firma-icon,
.page-registro__firma[data-brand="crediahora"] .page-registro__firma-subtitle {
  color: rgb(29, 29, 27);
}

.page-registro__firma[data-brand="crediahora"] .page-registro__firma-area:hover {
  border-color: rgb(29, 29, 27);
  background-color: rgba(29, 29, 27, 0.05);
}

.page-registro__firma[data-brand="crediahora"] .btn {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 999px;
  font-size: 14.4px;
  font-weight: 700;
}

/* OleDinero */
.page-registro__firma[data-brand="oledinero"] header h2 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  color: rgb(2, 45, 142);
}

.page-registro__firma[data-brand="oledinero"] .page-registro__firma-icon,
.page-registro__firma[data-brand="oledinero"] .page-registro__firma-subtitle {
  color: rgb(3, 45, 143);
}

.page-registro__firma[data-brand="oledinero"] .page-registro__firma-area:hover {
  border-color: rgb(3, 45, 143);
  background-color: rgba(3, 45, 143, 0.05);
}

.page-registro__firma[data-brand="oledinero"] .btn {
  background-color: rgba(0, 0, 0, 0);
  color: rgb(3, 45, 143);
  border: 2px solid rgb(3, 45, 143);
  border-radius: 40px 40px 40px 0px;
  font-size: 16.56px;
  font-weight: 500;
}

/* Responsive */
@media (min-width: 768px) {
  .page-registro__firma__content {
    max-width: 800px;
    padding: 40px 20px;
  }
}

@media (width >= 1024px) {
  .page-registro__firma header h2 {
    margin-bottom: 30px;
  }
}


/* === styles.css === */
/**
 * RRegistroFormulario Component Styles
 *
 * Multi-brand registration form styling with ContactoHeroForm patterns.
 */

/* Container structure matching production */
.page-registro__email {
  width: 100%;
  background-color: #f8f9fa;

  & .container {
    display: flex;
    flex-direction: column;
    max-width: 1908px;
    margin: 0 auto;
    margin-bottom: 1.5rem !important;
  }

  & .container__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 43.2px;
    margin: 0 auto;
    max-width: var(--body-max-width, 80rem);
    width: 100%;
  }

  @media (max-width: 767px) {
    & .container__content {
      width: 100%;
      padding: 35px 15px 15px 15px;
    }
  }

  & .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    /* Cancel the global `.row` helper's -15px side margins (see
       HeroContainer/styles.css for the same fix). Since this container's
       .container__content has 0 horizontal padding on desktop, those
       negative margins would otherwise push the row 15px past the left
       edge, cutting off the text column and causing horizontal scroll. */
    margin-left: 0;
    margin-right: 0;
  }

  & .row > .col {
    --row-text-column-gap: 10px;
    --row-text-column-flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--row-text-column-gap);
    flex: var(--row-text-column-flex);
  }
}

.rregistro-formulario__title {
  margin: 0 0 8px 0 !important;
  font-size: 20px;
  font-weight: 600;
  text-wrap: balance;
  text-align: center;
}

.rregistro-formulario__subtitle {
  font-size: 1.05rem;
  color: #666;
  margin: 0 0 10px 0;
  text-align: center;
  line-height: 1.4;
  padding: 0 10%;
}

.highlight-text {
  color: var(--color-brand-primaryDark, var(--color-brand-primary, #ff0066));
  font-weight: 500;
}

.rregistro-formulario__security-box {
  display: flex;
  background-color: #fff;
  border: 1px solid #e0e4ea;
  border-radius: 12px;
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.mobile-security-box {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 25px 20px;
  text-align: center;
}

.mobile-security-box .security-icon-wrapper {
  color: #001f3f;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-security-box .security-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.desktop-security-box {
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  text-align: left;
}

.desktop-security-box .security-icon-wrapper {
  color: var(--color-brand-primaryDark, var(--color-brand-primary, #ff0066));
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.desktop-security-box .security-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.security-text-content strong {
  color: #001f3f;
  font-size: 15px;
  font-weight: 700;
}

.security-text-content span {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
}

.mobile-security-box {
  display: flex;
}

.desktop-security-box {
  display: none;
}

.rregistro-formulario__required {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #666;
  text-align: right;
}

.rregistro-formulario__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rregistro-formulario__footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
  align-items: flex-start;
}

.rregistro-formulario__fields {
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 10px;
}

@media (min-width: 1024px) {
  .full-width-field {
    grid-column: 1 / -1;
  }
}

.rregistro-formulario__image {
  display: none;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.form-container-box {
  background-color: #fafbfc;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
}


.form-header {
  text-align: center;
  margin-bottom: 20px;
}

.form-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
  text-wrap: balance;
}

.form-header__subtext {
  font-size: 16px;
  margin: 10px 0;
}

.fade--in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Form inputs - ContactoHeroForm style */
.form-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-text-wrapper > label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  margin: 0;
  padding-left: 2px;
}

.form-text-wrapper > label .text-danger {
  color: #dc3545;
  margin-right: 4px;
}

.form-input-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  transition: box-shadow 0.2s ease-in-out;
  border-radius: 8px;
}

/* Container for the icon to match Credisolve mockup */
.form-icon-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 8px 0 0 8px !important;
  background-color: #f4f6f8 !important;
  border: 1px solid var(--color-brand-primary, #e0e4ea) !important;
  border-right: 1px solid var(--color-brand-primary, #e0e4ea) !important;
  margin: 0 !important;
  color: #555;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    color 0.2s;
}

.form-icon-container svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transform: none !important;
  position: static !important;
}

.form-input-row input:not([type="radio"]):not([type="checkbox"]),
.form-select-native {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--color-brand-primary, #e0e4ea);
  border-radius: 8px;
  font-size: 0.9rem;
  color: #333;
  outline: none;
  background-color: transparent;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  flex-grow: 1;
}

.form-input-row input:not([type="radio"]):not([type="checkbox"]),
.form-input-row .form-select-native {
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  margin: 0 !important;
}

.form-select-native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding: 0 40px 0 16px !important;
  line-height: 46px !important;
}

.form-input-row:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primaryDark, var(--color-brand-primary, #80bdff)) 25%, transparent) !important;
}

.form-input-row:focus-within .form-icon-container {
  border-color: var(--color-brand-primaryDark, var(--color-brand-primary, #80bdff)) !important;
  color: var(--color-brand-primaryDark, var(--color-brand-primary, #80bdff)) !important;
}

.form-input-row:focus-within input:not([type="radio"]):not([type="checkbox"]),
.form-input-row:focus-within .form-select-native {
  border-color: var(--color-brand-primaryDark, var(--color-brand-primary, #80bdff)) !important;
}

.form-row-split-calle-numero {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
}

.form-row-split-calle-numero > div:nth-child(1) {
  flex: 7;
}

.form-row-split-calle-numero > div:nth-child(2) {
  flex: 3;
}

.form-row-split-half {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
}

.form-row-split-half > div {
  flex: 1;
}

.form-row-split-date {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.form-row-split-date > select {
  flex: 1;
}

.text-danger {
  font-size: 0.85rem;
  color: #dc3545;
  margin-top: 2px;
}

/* Checkboxes group */
.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.form-checkbox-group .form-input-checkbox label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.4;
}

.form-input-checkbox .checkmark {
  display: none;
}

.form-checkbox-group .form-input-checkbox:first-child {
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 6px;
}

/* Button styles */
.btn {
  --btn-padding: 8px 25px;
  --btn-border-radius: 40px;
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius, 40px);
  font-weight: 700;
  font-size: 14.4px;
  display: inline-flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

@media (min-width: 1024px) {
  .btn {
    --btn-padding: 12px 25px;
  }
}

.btn-primary-filled:disabled {
  opacity: 0.2;
  cursor: default;
}

/* Warnings */
.alert {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
}

.alert-info {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

/* Desktop layout */
@media (min-width: 768px) {
  .rregistro-formulario__fields {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .form-group-row {
    grid-auto-flow: row;
    gap: 8px;
  }

  .page-registro__email[data-brand="credifix"] .rregistro-formulario__title,
  .page-registro__email[data-brand="credifix"] .form-header h2 {
    font-size: 39.6px;
  }
}

@media (min-width: 1024px) {
  .rregistro-formulario__title {
    text-align: left !important;
    font-size: 52px;
    line-height: 1.2;
    margin: 0 0 10px 0 !important;
  }

  .rregistro-formulario__subtitle {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 24px 0;
  }

  .mobile-security-box {
    display: none;
  }

  .desktop-security-box {
    display: flex;
  }

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

  .page-registro__email {
    & .row {
      flex-direction: row;
      align-items: flex-start;
      gap: 60px;
    }

    & .row > .col:first-child {
      flex: 4;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: sticky;
      top: 10vh;
      padding-right: 40px;
      gap: 20px;
    }

    & .row > .col:nth-child(2) {
      flex: 6;
    }

    & .container__content {
      box-sizing: border-box;
      padding-bottom: 100px;
      /* Matches Container's .container__content and HeaderNav (0px here at
         this breakpoint, verified against oledinero.es) - once max-width +
         auto margin already center this box, extra horizontal padding just
         eats into the form width, making this page look narrower than the
         rest of the site. */
      padding-left: 0;
      padding-right: 0;
      max-width: var(--body-max-width, 80rem);
    }
  }

  .rregistro-formulario__fields {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 30px;
    row-gap: 25px;
  }

  .rregistro-formulario__image {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
    max-height: 520px;
    margin-bottom: calc(-1 * var(--container-content-padding-vertical));
  }
}

/* Mobile & Desktop Box Overrides (moved here to override default input styles correctly) */
@media (max-width: 767px) {
  .form-container-box,
  .mobile-security-box {
    margin: 0;
  }
  .form-container-box {
    padding: 24px 20px;
  }
  .rregistro-formulario__form {
    gap: 15px;
  }
  .rregistro-formulario__fields {
    row-gap: 15px;
  }
  .form-icon-container {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .form-icon-container svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }
  .form-input-row input:not([type="radio"]):not([type="checkbox"]),
  .form-input-row .form-select-native,
  .form-select-native {
    height: 38px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  /* Mobile typography improvements */
  .rregistro-formulario__title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-top: 15px !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
  }
  .rregistro-formulario__subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 0 10px !important;
    margin-bottom: 24px !important;
    color: #5e6e78 !important;
  }
}

@media (min-width: 1024px) {
  .form-container-box {
    padding: 50px 45px;
  }
}

/* Brand-specific styles - ContactoHeroForm pattern */

/* Credimoney */
.page-registro__email[data-brand="credimoney"] {
  --color-brand-primary: rgb(46, 16, 71);
}

.page-registro__email[data-brand="credimoney"] .rregistro-formulario__title,
.page-registro__email[data-brand="credimoney"] .form-header h2 {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: rgb(46, 16, 71);
  font-size: 39.6px;
}

.page-registro__email[data-brand="credimoney"] .btn-primary-filled {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border: 2px solid rgb(248, 248, 146);
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Crediahora */
.page-registro__email[data-brand="crediahora"] {
  --color-brand-primary: rgb(29, 29, 27);
}

.page-registro__email[data-brand="crediahora"] .rregistro-formulario__title,
.page-registro__email[data-brand="crediahora"] .form-header h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  color: rgb(29, 29, 27);
  font-size: 36px;
}

.page-registro__email[data-brand="crediahora"] .btn-primary-filled {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 999px;
  font-size: 14.4px;
  font-weight: 700;
}

/* OleDinero */
.page-registro__email[data-brand="oledinero"] {
  --color-brand-primary: rgb(2, 45, 142);
}

.page-registro__email[data-brand="oledinero"] .rregistro-formulario__title,
.page-registro__email[data-brand="oledinero"] .form-header h2 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  color: rgb(2, 45, 142);
  font-size: 39.6px;
}

.page-registro__email[data-brand="oledinero"] .btn-primary-filled {
  background-color: rgba(0, 0, 0, 0);
  color: rgb(3, 45, 143);
  border: 2px solid rgb(3, 45, 143);
  border-radius: 40px 40px 40px 0px;
  font-size: 16.56px;
  font-weight: 500;
}

/* OleDinero - light blue input background to match production */
.page-registro__email[data-brand="oledinero"] .form-text-wrapper input {
  background-color: rgb(232, 240, 254);
}

/* CreditoAmigo */
.page-registro__email[data-brand="creditoamigo"] {
  --color-brand-primary: #1d2c56;
}

.page-registro__email[data-brand="creditoamigo"] .rregistro-formulario__title,
.page-registro__email[data-brand="creditoamigo"] .form-header h2 {
  font-family: "Seitu", sans-serif;
  font-weight: 700;
  color: #1d2c56;
  font-size: 39.6px;
}

.page-registro__email[data-brand="creditoamigo"] .btn-primary-filled {
  background-color: #0000ff;
  color: #ffffff;
  border: 2px solid #0000ff;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Credicheck */
.page-registro__email[data-brand="credicheck"] {
  --color-brand-primary: #18384e;
}

.page-registro__email[data-brand="credicheck"] .rregistro-formulario__title,
.page-registro__email[data-brand="credicheck"] .form-header h2 {
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
  color: #18384e;
  font-size: 39.6px;
}

.page-registro__email[data-brand="credicheck"] .btn-primary-filled {
  background-color: #76bc74;
  color: #ffffff;
  border: 2px solid #76bc74;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* CreditoClic */
.page-registro__email[data-brand="creditoclic"] {
  --color-brand-primary: #073034;
}

.page-registro__email[data-brand="creditoclic"] .rregistro-formulario__title,
.page-registro__email[data-brand="creditoclic"] .form-header h2 {
  font-family: "Harabara", sans-serif;
  font-weight: 700;
  color: #073034;
  font-size: 39.6px;
}

.page-registro__email[data-brand="creditoclic"] .btn-primary-filled {
  background-color: #073034;
  color: #adef45;
  border: 2px solid #073034;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* CreditoPRO */
.page-registro__email[data-brand="creditopro"] {
  --color-brand-primary: #333333;
}

.page-registro__email[data-brand="creditopro"] .rregistro-formulario__title,
.page-registro__email[data-brand="creditopro"] .form-header h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #333333;
  font-size: 39.6px;
}

.page-registro__email[data-brand="creditopro"] .btn-primary-filled {
  background-color: #333333;
  color: rgb(243, 243, 243);
  border: 2px solid #333333;
  border-radius: 999px;
  font-size: 14.4px;
  font-weight: 600;
}

/* Crediator */
.page-registro__email[data-brand="crediator"] {
  --color-brand-primary: #333333;
}

.page-registro__email[data-brand="crediator"] .rregistro-formulario__title,
.page-registro__email[data-brand="crediator"] .form-header h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #333333;
  font-size: 39.6px;
}

.page-registro__email[data-brand="crediator"] .btn-primary-filled {
  background-color: #f55f99;
  color: #ffffff;
  border: 2px solid #f55f99;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Credifix */
.page-registro__email[data-brand="credifix"] .rregistro-formulario__title,
.page-registro__email[data-brand="credifix"] .form-header h2 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #182d52;
  font-size: 30px;
}

.page-registro__email[data-brand="credifix"] .btn-primary-filled {
  background-color: #ff0086;
  color: #ffffff;
  border: 2px solid #ff0086;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Crediscore */
.page-registro__email[data-brand="crediscore"] {
  --color-brand-primary: #000000;
}

.page-registro__email[data-brand="crediscore"] .rregistro-formulario__title,
.page-registro__email[data-brand="crediscore"] .form-header h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 39.6px;
}

.page-registro__email[data-brand="crediscore"] .btn-primary-filled {
  background-color: #907ee8;
  color: #ffffff;
  border: 2px solid #907ee8;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Creditando */
.page-registro__email[data-brand="creditando"] {
  --color-brand-primary: #002449;
}

.page-registro__email[data-brand="creditando"] .rregistro-formulario__title,
.page-registro__email[data-brand="creditando"] .form-header h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #002449;
  font-size: 39.6px;
}

.page-registro__email[data-brand="creditando"] .btn-primary-filled {
  background-color: #002449;
  color: #ffffff;
  border: 2px solid #002449;
  border-radius: 0;
  font-size: 14.4px;
  font-weight: 700;
}

/* Crediticio */
.page-registro__email[data-brand="crediticio"] {
  --color-brand-primary: #13233a;
}

.page-registro__email[data-brand="crediticio"] .rregistro-formulario__title,
.page-registro__email[data-brand="crediticio"] .form-header h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #13233a;
  font-size: 39.6px;
}

.page-registro__email[data-brand="crediticio"] .btn-primary-filled {
  background-color: #13233a;
  color: #ffffff;
  border: 2px solid #13233a;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Creditozas */
.page-registro__email[data-brand="creditozas"] {
  --color-brand-primary: #000000;
}

.page-registro__email[data-brand="creditozas"] .rregistro-formulario__title,
.page-registro__email[data-brand="creditozas"] .form-header h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 39.6px;
}

.page-registro__email[data-brand="creditozas"] .btn-primary-filled {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Credizoom */
.page-registro__email[data-brand="credizoom"] {
  --color-brand-primary: #000000;
}

.page-registro__email[data-brand="credizoom"] .rregistro-formulario__title,
.page-registro__email[data-brand="credizoom"] .form-header h2 {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 39.6px;
}

.page-registro__email[data-brand="credizoom"] .btn-primary-filled {
  background-color: #4eb5a4;
  color: #ffffff;
  border: 2px solid #4eb5a4;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Mastercredi */
.page-registro__email[data-brand="mastercredi"] {
  --color-brand-primary: #1a1a1a;
}

.page-registro__email[data-brand="mastercredi"] .rregistro-formulario__title,
.page-registro__email[data-brand="mastercredi"] .form-header h2 {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 39.6px;
}

.page-registro__email[data-brand="mastercredi"] .btn-primary-filled {
  background-color: #1a1a1a;
  color: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 40px;
  font-size: 14.4px;
  font-weight: 700;
}

/* Credital */
.page-registro__email[data-brand="credital"] .rregistro-formulario__title,
.page-registro__email[data-brand="credital"] .form-header h2 {
  color: var(--color-text-primary);
}

/* reCAPTCHA Specific Styles */
.recaptcha-form-wrapper {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recaptcha-widget-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 78px;
}

.recaptcha-div {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
}


/* === styles.css === */
/**
 * RRegistroHeader Component Styles
 *
 * Theme-driven styles for registration header with 7-step navigation.
 * Supports brand-specific customization via CSS custom properties.
 */

.page-header--registro {
  position: relative;
  width: 100%;
  /* Clear the fixed .registro-header-nav that sits on top of the page */
  padding-top: 80px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path><path fill="rgba(255,255,255,0.05)" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}


.page-header__content {
  width: 100%;
  position: relative;
  background-color: transparent;
}

.container--registro {
  position: relative;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  border: 0;
  background-color: transparent !important;
  --container-background: transparent !important;
  --nav-width: 1200px;
  --nav-item-width: calc(var(--nav-width) / 7);
}

/* Note: horizontal padding intentionally lives on .container__content (below),
   not here. This outer box just bleeds the background; nesting the same
   padding on both this 1920px box AND the 80rem box inside it would cancel
   out once the inner box hits its own max-width, throwing off alignment
   with single-box headers like RegistroHeaderNav that apply padding once. */

.container__content {
  position: relative;
  max-width: var(--body-max-width, 80rem);
  padding: 40px 15px 60px;
  margin: 0 auto;
}

.page-header--registro .container__content {
  width: 100%;
}

@media (width >= 1024px) {
  .page-header--registro .container__content {
    width: 100%;
    max-width: var(--body-max-width, 80rem);
  }
}

@media (width >=768px) {
  .page-header--registro .container__content {
    padding: 40px var(--body-padding-horizontal, 43.2px) 60px;
  }
}

/* Matches Container's .container__content and HeaderNav (0px here at this
   breakpoint, verified against oledinero.es) - once max-width + auto margin
   already center this box, extra horizontal padding just eats into the
   content width, making this page look narrower than the rest of the site. */
@media (width >= 1024px) {
  .page-header--registro .container__content {
    padding-left: 0;
    padding-right: 0;
  }
}

.page-header--registro h1 {
  margin: 0 0 40px 0;
  text-align: center;
  font-size: 43.2px;
  font-weight: 300;
}

/* Navigation */
.rregistro-header__nav {
  position: relative;
  margin-top: 50px;
  overflow: hidden;
}

/* Progress Bar - hidden, using line between circles instead */
.rregistro-header__progress-wrapper {
  display: none;
}

.rregistro-header__progress-container {
  display: none;
}

.rregistro-header__progress-bar {
  display: none;
}

.rregistro-header__nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}

/* Base connecting line (white, semi-transparent) */
.rregistro-header__nav ul::before {
  content: '';
  position: absolute;
  top: 30px;
  left: calc((100% / 14) + 30px);
  right: calc((100% / 14) + 30px);
  height: 5px;
  background-color: #fff;
  opacity: 0.37;
  z-index: 1;
}

/* Progress line (colored, grows with steps) */
.rregistro-header__nav ul::after {
  content: '';
  position: absolute;
  top: 30px;
  left: calc((100% / 14) + 30px);
  height: 5px;
  background-color: var(--color-brand-primary);
  opacity: 0.37;
  z-index: 5;
  transition: width 0.5s ease;
  /* Calculate width as a fraction of the connecting line (--progress-width is a decimal 0-1) */
  width: calc((100% - (100% / 7) - 60px) * var(--progress-width, 0));
}

.rregistro-header__nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  position: relative;
  z-index: 10;
  text-align: center;
}

.rregistro-header__nav li.clickable {
  cursor: pointer;
}

.rregistro-header__nav li span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 18.72px;
  color: currentColor;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rregistro-header__nav li.completed span:first-child,
.rregistro-header__nav li.active span:first-child {
  background-color: currentColor;
  color: white;
}

.rregistro-header__nav li.active span:first-child {
  transform: scale(1.05);
}

.rregistro-header__nav li span:last-child {
  font-size: var(--nav-font-size, 16px);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  color: currentColor;
}

.rregistro-header__divider {
  display: flex;
  align-items: center;
  opacity: 0.3;
  margin: 0 5px;
}

/* Responsive */
@media (max-width: 768px) {
  
  .rregistro-header__nav {
    gap: 5px;
    margin-top:0;
    padding-top: 10px;
  }

  .rregistro-header__nav-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .rregistro-header__nav-text {
    font-size: 10px;
  }

  .rregistro-header__divider {
    margin: 0 2px;
  }

  .rregistro-header__divider svg {
    width: 12px;
    height: 12px;
  }

  .rregistro-header__nav li span:first-child {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }

   .rregistro-header__nav li span:last-child {
      font-size: 12px;
   }

   .rregistro-header__nav ul::before {
        top: 18px;
        height: 3px;
        left: calc((100% / 35) + 30px);
        right: calc((100% / 35) + 30px);
   }

   .rregistro-header__nav ul::after{
        top: 18px;
        left: calc((100% / 35) + 30px);
        height: 3px;
   }



   .page-header--registro .container__content{
      padding: var(--container-content-padding-vertical) 0px var(--container-content-padding-bottom);
   }

   .page-header--registro .container__content h1{
      margin-bottom: 10px;
   }
}

/* Brand-specific styles */

/* Credimoney */
.page-header--registro[data-brand="credimoney"] {
  color: rgb(46, 16, 71);
  font-family: "Helvetica Neue", sans-serif;
  background-color: rgb(216, 199, 255);
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credimoney"] h1 {
  color: rgb(46, 16, 71);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
}

.page-header--registro[data-brand="credimoney"] .rregistro-header__progress-bar {
  background-color: rgb(248, 248, 146);
}

.page-header--registro[data-brand="credimoney"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credimoney"] .rregistro-header__nav li.active span:first-child {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
}

.page-header--registro[data-brand="credimoney"] .rregistro-header__nav li span:first-child {
  color: rgb(46, 16, 71);
}

/* Credimoney connecting line - dark purple for visibility */
.page-header--registro[data-brand="credimoney"] .rregistro-header__nav ul::before {
  background-color: rgb(46, 16, 71);
  opacity: 0.3;
}

.page-header--registro[data-brand="credimoney"] .rregistro-header__nav ul::after {
  background-color: rgb(248, 248, 146);
  opacity: 0.8;
}

/* Crediahora */
.page-header--registro[data-brand="crediahora"] {
  color: rgb(29, 29, 27);
  font-family: Montserrat, sans-serif;
  background-color: rgb(245, 245, 245);
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="crediahora"] h1 {
  color: rgb(29, 29, 27);
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 40.32px;
}

.page-header--registro[data-brand="crediahora"] .rregistro-header__progress-bar {
  background-color: #95c11f;
}

/* Base connecting line (not filled) - rgb(29, 29, 27) with opacity 0.37 */
.page-header--registro[data-brand="crediahora"] .rregistro-header__nav ul::before {
  background-color: rgb(29, 29, 27) !important;
  opacity: 0.37;
}

/* Progress line (filled) - #1D1D1B / var(--color-text-primary) with opacity 0.37 */
.page-header--registro[data-brand="crediahora"] .rregistro-header__nav ul::after {
  background-color: #1d1d1b !important;
  background-color: var(--color-text-primary) !important;
  opacity: 0.37;
}

/* Steps not done yet - dark background with white icon */
.page-header--registro[data-brand="crediahora"] .rregistro-header__nav li span:first-child {
  background-color: #1d1d1b;
  color: rgb(245, 245, 245);
}

/* Steps completed and active - lime green background with dark icon */
.page-header--registro[data-brand="crediahora"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="crediahora"] .rregistro-header__nav li.active span:first-child {
  background-color: #95c11f;
  color: #1d1d1b;
}

/* Step labels - always dark */
.page-header--registro[data-brand="crediahora"] .rregistro-header__nav li span:last-child {
  color: #1d1d1b;
}

/* OleDinero */
.page-header--registro[data-brand="oledinero"] {
  color: rgb(215, 255, 123);
  font-family: Poppins, sans-serif;
  background-color: rgb(3, 45, 143);
  --nav-font-size: 1.4rem;
}

.page-header--registro[data-brand="oledinero"] h1 {
  color: rgb(215, 255, 123) !important;
  font-family: Poppins, sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="oledinero"] .rregistro-header__progress-bar {
  background-color: rgb(215, 255, 123);
}

.page-header--registro[data-brand="oledinero"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="oledinero"] .rregistro-header__nav li.active span:first-child {
  background-color: rgb(215, 255, 123);
  color: rgb(3, 45, 143);
}

.page-header--registro[data-brand="oledinero"] .rregistro-header__nav li span:first-child {
  color: rgb(3, 45, 143);
}

.page-header--registro[data-brand="oledinero"] .rregistro-header__nav li span:last-child {
  color: rgb(255, 255, 255) !important;
}

/* OleDinero connecting line - white for visibility on dark blue */
.page-header--registro[data-brand="oledinero"] .rregistro-header__nav ul::before {
  background-color: rgb(255, 255, 255);
  opacity: 0.4;
}

.page-header--registro[data-brand="oledinero"] .rregistro-header__nav ul::after {
  background-color: rgb(215, 255, 123);
  opacity: 0.8;
}

/* CreditoAmigo */
.page-header--registro[data-brand="creditoamigo"] {
  color: #1D2C56;
  font-family: "Seitu", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="creditoamigo"] h1 {
  color: #0000FF;
  font-family: "Seitu", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="creditoamigo"] .rregistro-header__nav ul::before {
  background-color: #1D2C56;
  opacity: 0.3;
}

.page-header--registro[data-brand="creditoamigo"] .rregistro-header__nav ul::after {
  background-color: #0000FF;
  opacity: 0.8;
}

.page-header--registro[data-brand="creditoamigo"] .rregistro-header__nav li span:first-child {
  color: #1D2C56;
}

.page-header--registro[data-brand="creditoamigo"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="creditoamigo"] .rregistro-header__nav li.active span:first-child {
  background-color: #0000FF;
  color: #ffffff;
}

/* Credihope: brand entry was missing entirely, so it fell through to the
   base (unbranded) rule `li.active span:first-child { background-color:
   currentColor; color: white; }`. Per CSS, `currentColor` resolves to the
   `color` value used ON THAT SAME ELEMENT - and since this same rule also
   sets `color: white` on it, currentColor became white too, so the active
   step rendered as a white circle with a white icon on it (invisible).
   Every other brand avoids this because its override sets concrete,
   different values for background vs. icon color. Fix: give credihope its
   own concrete colors, matching the Tangerine-bg/Smoke-Black-text pattern
   already used for its buttons/CTAs elsewhere on the site. */
.page-header--registro[data-brand="credihope"] {
  color: #252827;
  font-family: "Clash Display", sans-serif;
  --nav-font-size: 1.55rem;

  /* Same soft Tangerine/Fuchsia/Berry-Red radial-gradient wash used for
     credihope's other page headers (--page-header-bg-image in brand.edn),
     so /registro matches the brand's established visual line instead of
     the flat white it had before. Replaces (not layers on) the base wavy
     SVG background-image, which was designed for solid dark brand colors
     (e.g. oledinero's navy) and would be invisible on this light wash. */
  background-color: #f4f4ef;
  background-image:
    radial-gradient(at 20% 20%, rgba(249, 178, 51, 0.18) 0%, transparent 45%),
    radial-gradient(at 75% 75%, rgba(226, 96, 156, 0.18) 0%, transparent 45%),
    radial-gradient(at 50% 45%, rgba(234, 86, 72, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #fff8ed 20%, #fff2ea 45%, #fff2f8 75%, #ffffff 100%);
  background-position: 0% 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-header--registro[data-brand="credihope"] h1 {
  color: #ea5648;
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="credihope"] .rregistro-header__nav ul::before {
  background-color: #252827;
  opacity: 0.25;
}

.page-header--registro[data-brand="credihope"] .rregistro-header__nav ul::after {
  background-color: #f9b233;
  opacity: 0.9;
}

.page-header--registro[data-brand="credihope"] .rregistro-header__nav li span:first-child {
  color: #252827;
  background-color: rgba(255, 255, 255, 0.9);
}

.page-header--registro[data-brand="credihope"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credihope"] .rregistro-header__nav li.active span:first-child {
  background-color: #f9b233;
  color: #252827;
}

.page-header--registro[data-brand="credihope"] .rregistro-header__nav li span:last-child {
  color: #252827;
}

/* Credicheck */
.page-header--registro[data-brand="credicheck"] {
  color: #18384e;
  font-family: "Funnel Display", sans-serif;
  background-color: #edeef4;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credicheck"] h1 {
  color: #76bc74;
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="credicheck"] .rregistro-header__nav ul::before {
  background-color: #18384e;
  opacity: 0.3;
}

.page-header--registro[data-brand="credicheck"] .rregistro-header__nav ul::after {
  background-color: #76bc74;
  opacity: 0.8;
}

.page-header--registro[data-brand="credicheck"] .rregistro-header__nav li span:first-child {
  color: #18384e;
}

.page-header--registro[data-brand="credicheck"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credicheck"] .rregistro-header__nav li.active span:first-child {
  background-color: #76bc74;
  color: #ffffff;
}

/* CreditoClic */
.page-header--registro[data-brand="creditoclic"] {
  color: #073034;
  font-family: "Harabara", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="creditoclic"] h1 {
  color: #073034;
  font-family: "Harabara", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="creditoclic"] .rregistro-header__nav ul::before {
  background-color: #073034;
  opacity: 0.3;
}

.page-header--registro[data-brand="creditoclic"] .rregistro-header__nav ul::after {
  background-color: #ADEF45;
  opacity: 0.8;
}

.page-header--registro[data-brand="creditoclic"] .rregistro-header__nav li span:first-child {
  color: #073034;
}

.page-header--registro[data-brand="creditoclic"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="creditoclic"] .rregistro-header__nav li.active span:first-child {
  background-color: #073034;
  color: #ADEF45;
}

/* CreditoPRO */
.page-header--registro[data-brand="creditopro"] {
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  background-color: #2563eb;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="creditopro"] h1 {
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="creditopro"] .rregistro-header__nav ul::before {
  background-color: #ffffff;
  opacity: 0.4;
}

.page-header--registro[data-brand="creditopro"] .rregistro-header__nav ul::after {
  background-color: #333333;
  opacity: 0.8;
}

.page-header--registro[data-brand="creditopro"] .rregistro-header__nav li span:first-child {
  color: #333333;
}

.page-header--registro[data-brand="creditopro"] .rregistro-header__nav li span:last-child {
  color: #ffffff;
}

.page-header--registro[data-brand="creditopro"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="creditopro"] .rregistro-header__nav li.active span:first-child {
  background-color: #333333;
  color: #ffffff;
}

/* Crediator */
.page-header--registro[data-brand="crediator"] {
  color: #333333;
  font-family: "Manrope", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="crediator"] h1 {
  color: #f55f99;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.page-header--registro[data-brand="crediator"] .rregistro-header__nav ul::before {
  background-color: #333333;
  opacity: 0.3;
}

.page-header--registro[data-brand="crediator"] .rregistro-header__nav ul::after {
  background-color: #f55f99;
  opacity: 0.8;
}

.page-header--registro[data-brand="crediator"] .rregistro-header__nav li span:first-child {
  color: #333333;
}

.page-header--registro[data-brand="crediator"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="crediator"] .rregistro-header__nav li.active span:first-child {
  background-color: #f55f99;
  color: #ffffff;
}

/* Credifix */
.page-header--registro[data-brand="credifix"] {
  color: #182d52;
  font-family: "Roboto", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credifix"] h1 {
  color: #ff0086;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.page-header--registro[data-brand="credifix"] .rregistro-header__nav ul::before {
  background-color: #182d52;
  opacity: 0.3;
}

.page-header--registro[data-brand="credifix"] .rregistro-header__nav ul::after {
  background-color: #ff0086;
  opacity: 0.8;
}

.page-header--registro[data-brand="credifix"] .rregistro-header__nav li span:first-child {
  color: #182d52;
}

.page-header--registro[data-brand="credifix"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credifix"] .rregistro-header__nav li.active span:first-child {
  background-color: #ff0086;
  color: #ffffff;
}

/* Crediscore */
.page-header--registro[data-brand="crediscore"] {
  color: #000000;
  font-family: "Open Sans", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="crediscore"] h1 {
  color: #907ee8;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="crediscore"] .rregistro-header__nav ul::before {
  background-color: #000000;
  opacity: 0.3;
}

.page-header--registro[data-brand="crediscore"] .rregistro-header__nav ul::after {
  background-color: #907ee8;
  opacity: 0.8;
}

.page-header--registro[data-brand="crediscore"] .rregistro-header__nav li span:first-child {
  color: #000000;
}

.page-header--registro[data-brand="crediscore"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="crediscore"] .rregistro-header__nav li.active span:first-child {
  background-color: #907ee8;
  color: #ffffff;
}

/* Creditando */
.page-header--registro[data-brand="creditando"] {
  color: #002449;
  font-family: "Manrope", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="creditando"] h1 {
  color: #002449;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.page-header--registro[data-brand="creditando"] .rregistro-header__nav ul::before {
  background-color: #002449;
  opacity: 0.3;
}

.page-header--registro[data-brand="creditando"] .rregistro-header__nav ul::after {
  background-color: #c6fd00;
  opacity: 0.8;
}

.page-header--registro[data-brand="creditando"] .rregistro-header__nav li span:first-child {
  color: #002449;
}

.page-header--registro[data-brand="creditando"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="creditando"] .rregistro-header__nav li.active span:first-child {
  background-color: #002449;
  color: #c6fd00;
}

/* Crediticio */
.page-header--registro[data-brand="crediticio"] {
  color: #13233a;
  font-family: "Open Sans", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="crediticio"] h1 {
  color: #13233a;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="crediticio"] .rregistro-header__nav ul::before {
  background-color: #13233a;
  opacity: 0.3;
}

.page-header--registro[data-brand="crediticio"] .rregistro-header__nav ul::after {
  background-color: #ffa573;
  opacity: 0.8;
}

.page-header--registro[data-brand="crediticio"] .rregistro-header__nav li span:first-child {
  color: #13233a;
}

.page-header--registro[data-brand="crediticio"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="crediticio"] .rregistro-header__nav li.active span:first-child {
  background-color: #13233a;
  color: #ffffff;
}

/* Creditozas */
.page-header--registro[data-brand="creditozas"] {
  color: #000000;
  font-family: "Manrope", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="creditozas"] h1 {
  color: #000000;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.page-header--registro[data-brand="creditozas"] .rregistro-header__nav ul::before {
  background-color: #000000;
  opacity: 0.3;
}

.page-header--registro[data-brand="creditozas"] .rregistro-header__nav ul::after {
  background-color: #96b4e6;
  opacity: 0.8;
}

.page-header--registro[data-brand="creditozas"] .rregistro-header__nav li span:first-child {
  color: #000000;
}

.page-header--registro[data-brand="creditozas"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="creditozas"] .rregistro-header__nav li.active span:first-child {
  background-color: #000000;
  color: #ffffff;
}

/* Credizoom */
.page-header--registro[data-brand="credizoom"] {
  color: #000000;
  font-family: "AdobeClean", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credizoom"] h1 {
  color: #4eb5a4;
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="credizoom"] .rregistro-header__nav ul::before {
  background-color: #000000;
  opacity: 0.3;
}

.page-header--registro[data-brand="credizoom"] .rregistro-header__nav ul::after {
  background-color: #4eb5a4;
  opacity: 0.8;
}

.page-header--registro[data-brand="credizoom"] .rregistro-header__nav li span:first-child {
  color: #000000;
}

.page-header--registro[data-brand="credizoom"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credizoom"] .rregistro-header__nav li.active span:first-child {
  background-color: #4eb5a4;
  color: #ffffff;
}

/* Mastercredi */
.page-header--registro[data-brand="mastercredi"] {
  color: #1a1a1a;
  font-family: "AdobeClean", sans-serif;
  background-color: #f5f5f5;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="mastercredi"] h1 {
  color: #1a1a1a;
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
}

.page-header--registro[data-brand="mastercredi"] .rregistro-header__nav ul::before {
  background-color: #1a1a1a;
  opacity: 0.3;
}

.page-header--registro[data-brand="mastercredi"] .rregistro-header__nav ul::after {
  background-color: #e2e8ed;
  opacity: 0.8;
}

.page-header--registro[data-brand="mastercredi"] .rregistro-header__nav li span:first-child {
  color: #1a1a1a;
}

.page-header--registro[data-brand="mastercredi"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="mastercredi"] .rregistro-header__nav li.active span:first-child {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Credisolve */
.page-header--registro[data-brand="credisolve"] {
  color: #e62095 !important;
  background-color: #ffffff !important;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credisolve"] h1 {
  color: #e62095 !important;
  font-weight: 300;
}

.page-header--registro[data-brand="credisolve"] .rregistro-header__nav ul::before {
  background-color: #e62095 !important;
  opacity: 0.3 !important;
}

.page-header--registro[data-brand="credisolve"] .rregistro-header__nav ul::after {
  background-color: #e62095 !important;
  opacity: 0.8 !important;
}

.page-header--registro[data-brand="credisolve"] .rregistro-header__nav li span:first-child {
  color: #e62095 !important;
}

.page-header--registro[data-brand="credisolve"] .rregistro-header__nav li span:first-child i {
  color: #e62095 !important;
}

.page-header--registro[data-brand="credisolve"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credisolve"] .rregistro-header__nav li.active span:first-child {
  background-color: #e62095 !important;
  color: #ffffff !important;
}

.page-header--registro[data-brand="credisolve"] .rregistro-header__nav li.completed span:first-child i,
.page-header--registro[data-brand="credisolve"] .rregistro-header__nav li.active span:first-child i {
  color: #ffffff !important;
}

/* Credital */
.page-header--registro[data-brand="credital"] {
  color: #A318E1 !important;
  background-color: #f5f5f5 !important;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credital"] h1 {
  color: #A318E1 !important;
  font-weight: 300;
}

.page-header--registro[data-brand="credital"] .rregistro-header__nav ul::before {
  background-color: #A318E1 !important;
  opacity: 0.3 !important;
}

.page-header--registro[data-brand="credital"] .rregistro-header__nav ul::after {
  background-color: #A318E1 !important;
  opacity: 0.8 !important;
}

.page-header--registro[data-brand="credital"] .rregistro-header__nav li span:first-child {
  color: #A318E1 !important;
}

.page-header--registro[data-brand="credital"] .rregistro-header__nav li span:first-child i {
  color: #A318E1 !important;
}

.page-header--registro[data-brand="credital"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credital"] .rregistro-header__nav li.active span:first-child {
  background-color: #A318E1 !important;
  color: #ffffff !important;
}

.page-header--registro[data-brand="credital"] .rregistro-header__nav li.completed span:first-child i,
.page-header--registro[data-brand="credital"] .rregistro-header__nav li.active span:first-child i {
  color: #ffffff !important;
}

/* Credipay */
.page-header--registro[data-brand="credipay"] {
  color: #1564e9 !important;
  background-color: #f5f5f5 !important;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="credipay"] h1 {
  color: #1564e9 !important;
  font-weight: 300;
}

.page-header--registro[data-brand="credipay"] .rregistro-header__nav ul::before {
  background-color: #1564e9 !important;
  opacity: 0.3 !important;
}

.page-header--registro[data-brand="credipay"] .rregistro-header__nav ul::after {
  background-color: #1564e9 !important;
  opacity: 0.8 !important;
}

.page-header--registro[data-brand="credipay"] .rregistro-header__nav li span:first-child {
  color: #1564e9 !important;
}

.page-header--registro[data-brand="credipay"] .rregistro-header__nav li span:first-child i {
  color: #1564e9 !important;
}

.page-header--registro[data-brand="credipay"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="credipay"] .rregistro-header__nav li.active span:first-child {
  background-color: #1564e9 !important;
  color: #ffffff !important;
}

.page-header--registro[data-brand="credipay"] .rregistro-header__nav li.completed span:first-child i,
.page-header--registro[data-brand="credipay"] .rregistro-header__nav li.active span:first-child i {
  color: #ffffff !important;
}

/* Creditoplan */
.page-header--registro[data-brand="creditoplan"] {
  color: #1d4d51 !important;
  background-color: #f5f5f5 !important;
  --nav-font-size: 1.55rem;
}

.page-header--registro[data-brand="creditoplan"] h1 {
  color: #1d4d51 !important;
  font-weight: 300;
}

.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav ul::before {
  background-color: #1d4d51 !important;
  opacity: 0.3 !important;
}

.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav ul::after {
  background-color: #1d4d51 !important;
  opacity: 0.8 !important;
}

.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav li span:first-child {
  color: #1d4d51 !important;
}

.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav li span:first-child i {
  color: #1d4d51 !important;
}

.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav li.completed span:first-child,
.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav li.active span:first-child {
  background-color: #1d4d51 !important;
  color: #ffffff !important;
}

.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav li.completed span:first-child i,
.page-header--registro[data-brand="creditoplan"] .rregistro-header__nav li.active span:first-child i {
  color: #ffffff !important;
}

/* Mobile: swap label text via data-short attribute */
@media (max-width: 768px) {
  .rregistro-header__nav li span:last-child[data-short] {
    font-size: 0 !important;
    line-height: 0;
  }

  .rregistro-header__nav li span:last-child[data-short]::after {
    content: attr(data-short);
    font-size: 10px;
    line-height: normal;
    font-weight: 500;
  }
}


/* === index.css === */
.page-registro__pago {
  width: 100%;
  --footer-logos-flex-gap: 15px;
  --card-padding: 20px;
  --card-header-image-max-height: 30px;
  --card-header-image-max-width: 55px;
}

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

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

.page-registro__pago__content {
  max-width: 1400px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 50px 0 0;
}

.page-registro__pago .container__content {
  padding: 170px 0 100px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.page-registro.page-registro__pago {
  & .page-registro__pago__content {
    --container-background: #ffffff;

    .page-registro__subtitle {
      text-align: center;
      margin-bottom: 14.4px;
    }

    & header {
      text-align: center;
    }

    & h2 {
      margin: 0;
      font-size: 30.6px;
      font-weight: 300;
      color: #2e1047;
    }

    & .page-registro__pago__payment-methods {
      margin: 0 auto;
      background: var(--background-lighter);
      padding: 20px 30px;
      border-radius: 20px;
      display: flex;
      align-items: center;

      & .divider-vertical {
        height: 80px;
        margin: 0 30px;
      }

      & img {
        max-width: 70px;
      }
    }

    & .page-registro__form__footer {
      text-align: center;
    }

    & h3 {
      margin: 0;
      font-size: 18.72px;
      color: #2e1047;
    }

    & p {
      font-size: var(--text-sm-font-size);
    }

    & footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--footer-logos-flex-gap);

      & img {
        max-height: 50px;
        max-width: 80px;
      }
    }

    & .page-registro__pago__bloque-bg {
      margin: 0 auto;
      background: #eee;
      max-width: 100%;
      padding: 15px 25px;
      border-radius: 20px;
      text-align: center;
    }

    & .page-registro__pago__details {
      width: 100%;
      max-width: 650px;
      margin: 0.5rem auto;
    }

    & .page-registro__pago__beneficiario {
      width: 100%;
      max-width: 650px;
      display: flex;
      flex-direction: column;
      gap: 5px;

      & h4 {
        margin: 0;
        font-size: 22.32px;
        color: #2e1047;
        font-weight: 700;
      }

      & ul {
        display: grid;

        & li {
          font-size: var(--text-base-font-size);
          display: flex;
          gap: 5px;
          justify-content: center;
        }
      }
    }

    & .page-registro__pago__verificacion {
      text-align: center;
      width: 850px;
      max-width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--container-content-column-flex-gap);

      & .page-registro__pago__verificacion__disclaimer {
        width: 100%;
        position: relative;

        & p {
          font-size: var(--text-base-font-size);
        }
      }

      & svg {
        color: var(--color-brand-primary);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      & h2 {
        text-align: center;
        margin-top: 30px;
      }

      & p {
        text-wrap: balance;
        max-width: 100%;
        width: 800px;
        margin: 0 auto;
      }
    }

    & .page-registro__pago__amount {
      color: var(--color-brand-primary);
      text-align: center;
      font-weight: var(--font-weight-bold);
      font-size: var(--text-2xl-font-size);
    }
  }

  & .page-registro__pago__steps {
    width: 850px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;

    & p {
      font-size: var(--text-base-font-size);
    }

    & ul {
      margin-top: 30px;
      display: flex;
      gap: 30px;
      justify-content: center;

      & li {
        font-size: var(--text-base-font-size);
        flex-basis: 100%;
      }
    }

    & .page-registro__pago__progress-bar {
      margin: 20px 0;
      width: 850px;
      max-width: 100%;
      background: #fafafa;
      border-radius: 50px;
      height: 12px;
      position: relative;

      &:after {
        border-radius: 50px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--progress-bar-value);
        background: var(--color-brand-primary);
      }
    }
  }

  & .page-registro__pago__card__row {
    grid-auto-flow: column;
    display: grid;
    gap: 12px;
  }

  & .page-registro__pago__card {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 20px;
    border: 3px solid var(--color-brand-primary);
    overflow: hidden;

    & header {
      display: flex;
      align-items: center;
      border-bottom: 3px solid var(--color-brand-primary);

      & > :first-child {
        flex-grow: 1;
        text-align: left;
        padding: 0 var(--card-padding);
      }

      & .page-registro__pago__card__payment-methods {
        flex-basis: 33%;
        display: flex;
        justify-content: space-evenly;
        padding: var(--card-padding);

        & img {
          object-fit: contain;
          filter: var(--payment-logo-filter, none);
        }

        & img[alt="VISA"] {
          width: 65px;
        }

        & img[alt="Mastercard"] {
          width: 51.5px;
        }

        & .divider-vertical {
          --section-divider-color: #000000;

          height: 40px;
          margin: 0 20px;
        }
      }
    }

    & .page-registro__pago__card__body {
      padding: var(--card-padding);
      display: flex;
      flex-direction: column;
      gap: 12px;

      & .row {
        --row-flex-direction: row;
        gap: 12px;

        & > div {
          flex-basis: 50%;
        }
      }
    }

    & .page-registro__pago__card__button {
      padding: 0 var(--card-padding) var(--card-padding);
      text-align: center;

      & .btn {
        font-size: var(--text-lg-font-size);
        font-weight: var(--font-weight-semibold);
      }
    }

    & .form-text-wrapper {
      --input-background: #f2f2f2;
      --input-padding-vertical: 15px;
      position: relative;
    }

    & .form-text-wrapper input {
      padding-left: 2rem;
      background: var(--input-background);
    }

    & .form-text-wrapper .bi {
      position: absolute;
      top: 50%;
      left: 0.5rem;
      transform: translateY(-50%);
    }
  }
}

.page-registro__pago__details {
  width: 100%;
  max-width: 650px;
  margin: 0.5rem auto;
  background: transparent;
  border-radius: 8px;
  font-size: 1.1rem;
}

.page-registro__pago__details p {
  font-size: 1.1rem;
}

.page-registro__pago__details b {
  font-size: 1.25rem;
}

.page-registro__pago__details ul.list-pago {
  font-size: 1.1rem;
}

.page-registro__pago__details__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #d1d1d1;
  padding: 0.75rem 1rem;
  align-items: baseline;
}

.page-registro__pago__details__row:last-child {
  border-bottom: none;
}

.page-registro__pago__details__row strong {
  color: var(--color-brand-primary);
  font-size: 0.95rem;
  text-align: right;
  padding-right: 1rem;
}

.page-registro__pago__details__row span {
  font-size: 0.95rem;
  color: #333;
  text-align: left;
}

@media (max-width: 768px) {
  .page-registro__pago__details {
    margin: 1rem 0.5rem;
    background: transparent;
  }

  .page-registro__pago__details__row {
    padding: 0.5rem;
  }

  .page-registro__pago__details__row strong {
    text-align: right;
    padding-right: 1rem;
  }
}

.verificacion-title {
  text-align: center;
  font-weight: bold;
  margin: 0;
}

.page-registro__container-full {
  display: grid;
  justify-content: center;
  align-items: baseline;
  gap: 2rem;
}

/* Credimoney brand-specific styles */
.page-registro.page-registro__pago[data-brand="credimoney"] {
  --payment-logo-filter: brightness(0) saturate(100%) invert(89%) sepia(18%)
    saturate(1073%) hue-rotate(207deg) brightness(103%) contrast(101%);

  & .secured100__container-img img {
    filter: var(--payment-logo-filter);
  }
}

/* Crediahora brand-specific styles */
.page-registro.page-registro__pago[data-brand="crediahora"] {
  --payment-logo-filter: brightness(0) saturate(100%) invert(72%) sepia(26%)
    saturate(1266%) hue-rotate(36deg) brightness(98%) contrast(89%);

  & .secured100__container-img img {
    filter: var(--payment-logo-filter);
  }

  & .page-registro__pago__content {
    max-width: none;

    & h2 {
      font-size: 36px;
      font-weight: 900;
      color: #1d1d1b;
      font-family: Montserrat, sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #1d1d1b;
      font-family: Montserrat, sans-serif;
    }

    & .page-registro__pago__bloque-bg {
      background: rgba(150, 150, 150, 0.1);
    }

    & .page-registro__pago__beneficiario {
      background: rgba(150, 150, 150, 0.1);

      & h4 {
        margin: 0;
        font-size: 22.32px;
        color: #95c11f;
        font-weight: 600;
      }
    }
  }
}

/* OleDinero brand-specific styles */
.page-registro.page-registro__pago[data-brand="oledinero"] {
  --payment-logo-filter: brightness(0) saturate(100%) invert(12%) sepia(81%)
    saturate(3632%) hue-rotate(220deg) brightness(95%) contrast(106%);

  & .secured100__container-img img {
    filter: var(--payment-logo-filter);
  }

  & .page-registro__pago__content {
    & h2 {
      color: #032d8f;
      font-family: Poppins, sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 600;
      color: #022d8e;
      font-family: Poppins, sans-serif;
    }

    & .page-registro__pago__beneficiario {
      & h4 {
        margin: 0;
        font-size: 20.16px;
        color: #032d8f;
        font-weight: 600;
      }
    }
  }
}

@media (width >=768px) {
  .page-registro.page-registro__pago {
    --card-padding: 30px;
    --card-header-image-max-height: 40px;
    --card-header-image-max-width: 65px;

    & .page-registro__pago__card__row {
      grid-auto-flow: column;
    }
  }
}

@media (width >=1200px) {
  .page-registro__container-full {
    grid-template-columns: 1fr 1fr;
  }
}

/* CreditoAmigo brand-specific styles */
.page-registro.page-registro__pago[data-brand="creditoamigo"] {
  & .page-registro__pago__content {
    & h2 {
      color: #1d2c56;
      font-family: "Seitu", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #1d2c56;
      font-family: "Seitu", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #0000ff;
    }
  }
}

/* Credicheck brand-specific styles */
.page-registro.page-registro__pago[data-brand="credicheck"] {
  & .page-registro__pago__content {
    & h2 {
      color: #18384e;
      font-family: "Funnel Display", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #18384e;
      font-family: "Funnel Display", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #76bc74;
    }
  }
}

/* CreditoClic brand-specific styles */
.page-registro.page-registro__pago[data-brand="creditoclic"] {
  & .page-registro__pago__content {
    & h2 {
      color: #073034;
      font-family: "Harabara", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #073034;
      font-family: "Harabara", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #adef45;
    }
  }
}

/* CreditoPRO brand-specific styles */
.page-registro.page-registro__pago[data-brand="creditopro"] {
  & .page-registro__pago__content {
    & h2 {
      color: #333333;
      font-family: "Open Sans", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 600;
      color: #333333;
      font-family: "Open Sans", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #333333;
    }
  }
}

/* Crediator brand-specific styles */
.page-registro.page-registro__pago[data-brand="crediator"] {
  & .page-registro__pago__content {
    & h2 {
      color: #333333;
      font-family: "Manrope", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #333333;
      font-family: "Manrope", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #f55f99;
    }
  }
}

/* Credifix brand-specific styles */
.page-registro.page-registro__pago[data-brand="credifix"] {
  & .page-registro__pago__content {
    & h2 {
      color: #182d52;
      font-family: "Roboto", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #182d52;
      font-family: "Roboto", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #ff0086;
    }
  }
}

/* Crediscore brand-specific styles */
.page-registro.page-registro__pago[data-brand="crediscore"] {
  & .page-registro__pago__content {
    & h2 {
      color: #000000;
      font-family: "Open Sans", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #000000;
      font-family: "Open Sans", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #907ee8;
    }
  }
}

/* Creditando brand-specific styles */
.page-registro.page-registro__pago[data-brand="creditando"] {
  & .page-registro__pago__content {
    & h2 {
      color: #002449;
      font-family: "Manrope", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #002449;
      font-family: "Manrope", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #c6fd00;
    }
  }
}

/* Crediticio brand-specific styles */
.page-registro.page-registro__pago[data-brand="crediticio"] {
  & .page-registro__pago__content {
    & h2 {
      color: #13233a;
      font-family: "Open Sans", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #13233a;
      font-family: "Open Sans", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #ffa573;
    }
  }
}

/* Creditozas brand-specific styles */
.page-registro.page-registro__pago[data-brand="creditozas"] {
  & .page-registro__pago__content {
    & h2 {
      color: #000000;
      font-family: "Manrope", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #000000;
      font-family: "Manrope", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #96b4e6;
    }
  }
}

/* Credizoom brand-specific styles */
.page-registro.page-registro__pago[data-brand="credizoom"] {
  & .page-registro__pago__content {
    & h2 {
      color: #000000;
      font-family: "AdobeClean", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #000000;
      font-family: "AdobeClean", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #4eb5a4;
    }
  }
}

/* Mastercredi brand-specific styles */
.page-registro.page-registro__pago[data-brand="mastercredi"] {
  & .page-registro__pago__content {
    & h2 {
      color: #1a1a1a;
      font-family: "AdobeClean", sans-serif;
    }

    & h3 {
      font-size: 18.72px;
      font-weight: 700;
      color: #1a1a1a;
      font-family: "AdobeClean", sans-serif;
    }

    & .page-registro__pago__beneficiario h4 {
      color: #e2e8ed;
    }
  }
}


/* === index.css === */
/**
 * RRegistroSMS Component Styles
 *
 * Multi-brand SMS verification form styling with ContactoHeroForm patterns.
 */

.page-registro__sms {
  width: 100%;
}

.page-registro__sms__content {
  max-width: 1400px;
  margin: 0 auto;
  background-color: #ffffff;
}

.container__content {
  padding: 40px 43.2px;
}

.page-registro__sms header {
  text-align: center;
}

.page-registro__sms header h2 {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: 300;
  text-align: center;
}

.page-registro__sms header p {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #666;
}

.page-registro__subtitle {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 1rem !important;
}

/* Credimoney subtitle override */
.page-registro__sms[data-brand="credimoney"] .page-registro__subtitle {
  font-family: "Helvetica Neue", sans-serif;
  color: var(--container-title-h3-color, #666);
}

/* SMS code buttons */
.page-registro__sms__fields {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.page-registro__sms__fields button {
  letter-spacing: 0.5rem;
  display: block;
  margin-left: 0.5rem;
  padding: 12px 25px;
  font-size: 14.4px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 40px;
  transition: all 0.3s ease;
}

.page-registro__sms__fields button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.page-registro__sms__fields button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button order */
.btn--left {
  order: 1;
}

.btn--right {
  order: 0;
}

/* Resend SMS section */
.page-registro__sms__send-again {
  text-align: center;
  cursor: pointer;
  margin-top: 40px;
  padding: 20px;
  font-size: 14.4px;
  font-weight: 300;
}

.page-registro__sms__send-again.page-registro__sms__send-again--disabled {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s;
}

.page-registro__sms__send-again__text {
  color: var(--color-brand-primary, #007bff);
  font-weight: 600;
  text-decoration: none;
  margin-top: 5px;
}

.page-registro__sms__send-again__text:hover {
  opacity: 0.8;
}

/* Alert container */
.alert-container {
  margin: 20px 0;
}

/* Brand-specific styles - ContactoHeroForm pattern */

/* Credimoney */
.page-registro__sms[data-brand="credimoney"] header h2 {
  font-family: "Helvetica Neue", sans-serif;
  color: rgb(46, 16, 71);
}

.page-registro__sms[data-brand="credimoney"]
  .page-registro__sms__send-again__text {
  color: rgb(46, 16, 71);
}

.page-registro__sms[data-brand="credimoney"] .btn-primary-filled {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border: 2px solid rgb(248, 248, 146);
  border-radius: 40px;
}

.page-registro__sms[data-brand="credimoney"] .btn--correct {
  border: 3px solid rgb(46, 16, 71);
}

/* Crediahora */
.page-registro__sms[data-brand="crediahora"] header h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  color: rgb(29, 29, 27);
}

.page-registro__sms[data-brand="crediahora"]
  .page-registro__sms__send-again__text {
  color: rgb(0, 128, 0);
}

.page-registro__sms[data-brand="crediahora"] .btn-primary-filled {
  background-color: rgb(29, 29, 27);
  color: rgb(245, 245, 245);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 999px;
}

.page-registro__sms[data-brand="crediahora"] .btn--correct {
  border: 3px solid rgb(100, 100, 98);
}

/* OleDinero */
.page-registro__sms[data-brand="oledinero"] header h2 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  color: rgb(2, 45, 142);
}

.page-registro__sms[data-brand="oledinero"] .page-registro__subtitle {
  font-family: Poppins, sans-serif;
  color: rgb(2, 45, 142);
}

.page-registro__sms[data-brand="oledinero"]
  .page-registro__sms__send-again__text {
  color: rgb(3, 45, 143);
}

.page-registro__sms[data-brand="oledinero"] .btn-primary-filled {
  background-color: rgba(0, 0, 0, 0);
  color: rgb(3, 45, 143);
  border: 2px solid rgb(3, 45, 143);
  border-radius: 40px 40px 0px 40px;
}

.page-registro__sms[data-brand="oledinero"] .btn--correct {
  border-radius: 40px 40px 40px 0px;
}

/* CreditoAmigo */
.page-registro__sms[data-brand="creditoamigo"] header h2 {
  font-family: "Seitu", sans-serif;
  font-weight: 700;
  color: #1d2c56;
}

.page-registro__sms[data-brand="creditoamigo"] .page-registro__subtitle {
  font-family: "Seitu", sans-serif;
  color: #1d2c56;
}

.page-registro__sms[data-brand="creditoamigo"]
  .page-registro__sms__send-again__text {
  color: #0000ff;
}

.page-registro__sms[data-brand="creditoamigo"] .btn-primary-filled {
  background-color: #0000ff;
  color: #ffffff;
  border: 2px solid #0000ff;
  border-radius: 40px;
}

.page-registro__sms[data-brand="creditoamigo"] .btn--correct {
  border: 3px solid #0000ff;
}

/* Credicheck */
.page-registro__sms[data-brand="credicheck"] header h2 {
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
  color: #18384e;
}

.page-registro__sms[data-brand="credicheck"] .page-registro__subtitle {
  font-family: "Funnel Display", sans-serif;
  color: #18384e;
}

.page-registro__sms[data-brand="credicheck"]
  .page-registro__sms__send-again__text {
  color: #76bc74;
}

.page-registro__sms[data-brand="credicheck"] .btn-primary-filled {
  background-color: #76bc74;
  color: #ffffff;
  border: 2px solid #76bc74;
  border-radius: 40px;
}

.page-registro__sms[data-brand="credicheck"] .btn--correct {
  border: 3px solid #76bc74;
}

/* CreditoClic */
.page-registro__sms[data-brand="creditoclic"] header h2 {
  font-family: "Harabara", sans-serif;
  font-weight: 700;
  color: #073034;
}

.page-registro__sms[data-brand="creditoclic"] .page-registro__subtitle {
  font-family: "Harabara", sans-serif;
  color: #073034;
}

.page-registro__sms[data-brand="creditoclic"]
  .page-registro__sms__send-again__text {
  color: #073034;
}

.page-registro__sms[data-brand="creditoclic"] .btn-primary-filled {
  background-color: #073034;
  color: #adef45;
  border: 2px solid #073034;
  border-radius: 40px;
}

.page-registro__sms[data-brand="creditoclic"] .btn--correct {
  border: 3px solid #073034;
}

/* CreditoPRO */
.page-registro__sms[data-brand="creditopro"] header h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #333333;
}

.page-registro__sms[data-brand="creditopro"] .page-registro__subtitle {
  font-family: "Open Sans", sans-serif;
  color: #333333;
}

.page-registro__sms[data-brand="creditopro"]
  .page-registro__sms__send-again__text {
  color: #333333;
}

.page-registro__sms[data-brand="creditopro"] .btn-primary-filled {
  background-color: #333333;
  color: rgb(243, 243, 243);
  border: 2px solid #333333;
  border-radius: 999px;
}

.page-registro__sms[data-brand="creditopro"] .btn--correct {
  border: 3px solid #333333;
}

/* Crediator */
.page-registro__sms[data-brand="crediator"] header h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #333333;
}

.page-registro__sms[data-brand="crediator"] .page-registro__subtitle {
  font-family: "Manrope", sans-serif;
  color: #333333;
}

.page-registro__sms[data-brand="crediator"]
  .page-registro__sms__send-again__text {
  color: #f55f99;
}

.page-registro__sms[data-brand="crediator"] .btn-primary-filled {
  background-color: #f55f99;
  color: #ffffff;
  border: 2px solid #f55f99;
  border-radius: 40px;
}

.page-registro__sms[data-brand="crediator"] .btn--correct {
  border: 3px solid #f55f99;
}

/* Credifix */
.page-registro__sms[data-brand="credifix"] header h2 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: #182d52;
}

.page-registro__sms[data-brand="credifix"] .page-registro__subtitle {
  font-family: "Roboto", sans-serif;
  color: #182d52;
}

.page-registro__sms[data-brand="credifix"]
  .page-registro__sms__send-again__text {
  color: #ff0086;
}

.page-registro__sms[data-brand="credifix"] .btn-primary-filled {
  background-color: #ff0086;
  color: #ffffff;
  border: 2px solid #ff0086;
  border-radius: 40px;
}

.page-registro__sms[data-brand="credifix"] .btn--correct {
  border: 3px solid #ff0086;
}

/* Crediscore */
.page-registro__sms[data-brand="crediscore"] header h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #000000;
}

.page-registro__sms[data-brand="crediscore"] .page-registro__subtitle {
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

.page-registro__sms[data-brand="crediscore"]
  .page-registro__sms__send-again__text {
  color: #907ee8;
}

.page-registro__sms[data-brand="crediscore"] .btn-primary-filled {
  background-color: #907ee8;
  color: #ffffff;
  border: 2px solid #907ee8;
  border-radius: 40px;
}

.page-registro__sms[data-brand="crediscore"] .btn--correct {
  border: 3px solid #907ee8;
}

/* Creditando */
.page-registro__sms[data-brand="creditando"] header h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #002449;
}

.page-registro__sms[data-brand="creditando"] .page-registro__subtitle {
  font-family: "Manrope", sans-serif;
  color: #002449;
}

.page-registro__sms[data-brand="creditando"]
  .page-registro__sms__send-again__text {
  color: #002449;
}

.page-registro__sms[data-brand="creditando"] .btn-primary-filled {
  background-color: #002449;
  color: #ffffff;
  border: 2px solid #002449;
  border-radius: 0;
}

.page-registro__sms[data-brand="creditando"] .btn--correct {
  border: 3px solid #002449;
}

/* Crediticio */
.page-registro__sms[data-brand="crediticio"] header h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #13233a;
}

.page-registro__sms[data-brand="crediticio"] .page-registro__subtitle {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

.page-registro__sms[data-brand="crediticio"]
  .page-registro__sms__send-again__text {
  color: #13233a;
}

.page-registro__sms[data-brand="crediticio"] .btn-primary-filled {
  background-color: #13233a;
  color: #ffffff;
  border: 2px solid #13233a;
  border-radius: 40px;
}

.page-registro__sms[data-brand="crediticio"] .btn--correct {
  border: 3px solid #13233a;
}

/* Creditozas */
.page-registro__sms[data-brand="creditozas"] header h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #000000;
}

.page-registro__sms[data-brand="creditozas"] .page-registro__subtitle {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

.page-registro__sms[data-brand="creditozas"]
  .page-registro__sms__send-again__text {
  color: #000000;
}

.page-registro__sms[data-brand="creditozas"] .btn-primary-filled {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 40px;
}

.page-registro__sms[data-brand="creditozas"] .btn--correct {
  border: 3px solid #000000;
}

/* Credizoom */
.page-registro__sms[data-brand="credizoom"] header h2 {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: #000000;
}

.page-registro__sms[data-brand="credizoom"] .page-registro__subtitle {
  font-family: "AdobeClean", sans-serif;
  color: #000000;
}

.page-registro__sms[data-brand="credizoom"]
  .page-registro__sms__send-again__text {
  color: #4eb5a4;
}

.page-registro__sms[data-brand="credizoom"] .btn-primary-filled {
  background-color: #4eb5a4;
  color: #ffffff;
  border: 2px solid #4eb5a4;
  border-radius: 40px;
}

.page-registro__sms[data-brand="credizoom"] .btn--correct {
  border: 3px solid #4eb5a4;
}

/* Mastercredi */
.page-registro__sms[data-brand="mastercredi"] header h2 {
  font-family: "AdobeClean", sans-serif;
  font-weight: 700;
  color: #1a1a1a;
}

.page-registro__sms[data-brand="mastercredi"] .page-registro__subtitle {
  font-family: "AdobeClean", sans-serif;
  color: #1a1a1a;
}

.page-registro__sms[data-brand="mastercredi"]
  .page-registro__sms__send-again__text {
  color: #1a1a1a;
}

.page-registro__sms[data-brand="mastercredi"] .btn-primary-filled {
  background-color: #1a1a1a;
  color: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 40px;
}

.page-registro__sms[data-brand="mastercredi"] .btn--correct {
  border: 3px solid #1a1a1a;
}

/* Responsive */
@media (width >=768px) {
  .page-registro__sms__content {
    max-width: 600px;
  }
  .page-registro__sms header h2 {
    font-size: 39.6px;
  }
  .page-registro__subtitle {
    font-size: 24.48px;
  }
}

@media (width >=1024px) {
  .page-registro__sms header h2 {
    margin-bottom: 0px;
  }
}


/* === styles.css === */
.redirects-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 15px;
}

.redirects-loader .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #eee;
  border-top-color: var(--color-primary, #ffd700);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.redirects-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #dc3545;
  font-size: 16px;
}


/* === styles.css === */
/**
 * RegistroFooter Component Styles
 *
 * Simplified footer for registration pages.
 * Matches production implementation from credimoney/crediahora/oledinero.
 *
 * Layout:
 * - Company address (above divider, left-aligned)
 * - Horizontal divider line
 * - Copyright | "Hecho con ❤️" | Security logos (below divider, in row)
 */

.registro-footer {
  background-color: var(
    --registro-footer-background,
    var(--footer-background, var(--color-surface-elevated, #f5f5f5))
  );
  color: var(
    --registro-footer-text-color,
    var(--footer-text-color, var(--color-text-secondary, #666666))
  );
  width: 100%;
  /* Vertical padding only - horizontal padding lives on .registro-footer__wrapper
     (below) so it's applied inside the max-width-constrained box, same as
     every other section on the registro flow. Putting it here on the
     full-width outer box instead would cancel out once the inner wrapper
     hits its own max-width, misaligning this footer against the header/form
     above it. */
  padding: 30px 0;
}

/* Wrapper for max-width constraint */
.registro-footer__wrapper {
  max-width: var(--body-max-width, 80rem);
  margin: 0 auto;
  padding: 0 var(--body-padding-horizontal, 20px);
}

/* Matches Container's .container__content and HeaderNav (0px here at this
   breakpoint, verified against oledinero.es) - once max-width + auto margin
   already center this box, extra horizontal padding just eats into the
   content width, making this footer narrower than the rest of the site. */
@media (min-width: 1024px) {
  .registro-footer__wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Company Address - ABOVE the divider, left-aligned */
.registro-footer__address {
  font-size: 11.52px;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 20px;
}

.registro-footer__address p {
  margin: 0;
}

/* Horizontal Divider Line */
.registro-footer__divider {
  height: 1px;
  background-color: var(
    --registro-footer-divider-color,
    var(--footer-divider-color, var(--color-text-secondary, #666666))
  );
  margin: 0 0 20px 0;
}

/* Content BELOW the divider */
.registro-footer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* Copyright - left-aligned */
.registro-footer__copyright {
  font-size: 14.4px;
  text-align: left;
}

/* Made in Spain */
.registro-footer__powered-by {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.4px;
}

.registro-footer__heart-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(
    --registro-footer-heart-icon-color,
    var(--footer-heart-icon-color, var(--color-text-secondary, currentColor))
  );
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}

/* Security Logos */
.registro-footer__security-logos {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.registro-footer__security-icon-svg {
  height: 30px;
  width: auto;
  object-fit: contain;
  filter: var(
    --registro-footer-security-icons-filter,
    var(--footer-security-icons-filter, none)
  );
  flex-shrink: 0;
}

/* Specific width for Mastercard icon (3rd icon) */
.registro-footer__security-icon-svg:nth-child(3) {
  width: 50px;
  height: auto;
}

/* PCI DSS icon - PNG with mask-image */
.registro-footer__security-icon {
  display: inline-block;
  height: 30px;
  width: 50px;
  background-color: var(
    --registro-footer-security-icons-color,
    var(
      --footer-security-icons-color,
      var(--color-text-secondary, currentColor)
    )
  );
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Desktop layout - horizontal row below divider */
@media (min-width: 768px) {
  .registro-footer {
    padding: 40px 0;
  }

  .registro-footer__content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 12px;
    gap: 20px;
  }

  .registro-footer__copyright {
    flex: 0 0 auto;
  }

  .registro-footer__powered-by {
    flex: 0 0 auto;
  }

  .registro-footer__security-logos {
    flex: 0 0 auto;
    gap: 15px;
  }

  .registro-footer__security-icon-svg {
    height: 35px;
  }

  .registro-footer__security-icon-svg:nth-child(3) {
    width: 55px;
  }

  .registro-footer__security-icon {
    height: 35px;
    width: 55px;
  }
}


/* === styles.css === */
.registro-header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  border-bottom: 1px solid #e0e0e0;
  transition: box-shadow 0.3s ease;
}

.registro-header-nav.scrolling {
  -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

.registro-header-nav__content {
  max-width: var(--body-max-width, 80rem);
  padding: 15px 100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.registro-header-nav__logo {
  width: var(--page-header-logo-width, 140px);
  height: auto;
}

/* creditopro's logo asset is near-square (447x352); constrained only by
   width it renders ~94px tall (mobile) / ~110px (desktop), making this fixed
   header ~125-151px tall and clipping the "Registro" banner title below it.
   Constrain it by height so the header keeps a normal height. */
[data-brand="creditopro"] .registro-header-nav__logo {
  width: auto;
  height: 36px;
}

.registro-header-nav__title p {
  margin: 0;
  font-size: 1.17rem;
  line-height: 1.4;
  font-family: var(--font-family, sans-serif);
}

/* Credimoney - Montserrat, weight 400, dark gray */
.registro-header-nav--credimoney .registro-header-nav__title p {
  color: #1d1d1b;
  font-weight: 400;
}

/* Crediahora - Montserrat, weight 400, dark gray */
.registro-header-nav--crediahora .registro-header-nav__title p {
  color: #1d1d1b;
  font-weight: 400;
}

/* OleDinero - Poppins, weight 500, dark blue */
.registro-header-nav--oledinero .registro-header-nav__title p {
  color: #022d8e;
  font-weight: 500;
}

/* OleDinero - smaller vertical padding to match production (~7.2px) */
.registro-header-nav--oledinero .registro-header-nav__content {
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (min-width: 768px) {
  .registro-header-nav__content {
    padding: 20px var(--body-padding-horizontal, 40px);
  }

  .registro-header-nav__logo {
    width: 140px;
  }

  [data-brand="creditopro"] .registro-header-nav__logo {
    width: auto;
    height: 40px;
  }
}

@media (max-width: 767px) {
  .registro-header-nav__content {
    padding: 15px 20px;
  }
}

/* Matches Container's .container__content and HeaderNav (0px here at this
   breakpoint, verified against oledinero.es) - once max-width + auto margin
   already center this box, extra horizontal padding just eats into the
   content width, making this fixed header narrower than the rest of the site. */
@media (min-width: 1024px) {
  .registro-header-nav__content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* CreditoAmigo */
.registro-header-nav--creditoamigo .registro-header-nav__title p {
  font-family: "Seitu", sans-serif;
  color: #1D2C56;
  font-weight: 400;
}

/* Credicheck */
.registro-header-nav--credicheck .registro-header-nav__title p {
  font-family: "Funnel Display", sans-serif;
  color: #76bc74;
  font-weight: 400;
}

/* CreditoClic */
.registro-header-nav--creditoclic .registro-header-nav__title p {
  font-family: "Harabara", sans-serif;
  color: #073034;
  font-weight: 400;
}

/* CreditoPRO */
.registro-header-nav--creditopro .registro-header-nav__title p {
  font-family: "Open Sans", sans-serif;
  color: #333333;
  font-weight: 400;
}

/* Crediator */
.registro-header-nav--crediator .registro-header-nav__title p {
  font-family: "Manrope", sans-serif;
  color: #333333;
  font-weight: 400;
}

/* Credifix */
.registro-header-nav--credifix .registro-header-nav__title p {
  font-family: "Roboto", sans-serif;
  color: #182d52;
  font-weight: 400;
}

/* Crediscore */
.registro-header-nav--crediscore .registro-header-nav__title p {
  font-family: "Open Sans", sans-serif;
  color: #000000;
  font-weight: 400;
}

/* Creditando */
.registro-header-nav--creditando .registro-header-nav__title p {
  font-family: "Manrope", sans-serif;
  color: #002449;
  font-weight: 400;
}

/* Crediticio */
.registro-header-nav--crediticio .registro-header-nav__title p {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
  font-weight: 400;
}

/* Creditozas */
.registro-header-nav--creditozas .registro-header-nav__title p {
  font-family: "Manrope", sans-serif;
  color: #000000;
  font-weight: 400;
}

/* Credizoom */
.registro-header-nav--credizoom .registro-header-nav__title p {
  font-family: "AdobeClean", sans-serif;
  color: #000000;
  font-weight: 400;
}

/* Mastercredi */
.registro-header-nav--mastercredi .registro-header-nav__title p {
  font-family: "AdobeClean", sans-serif;
  color: #1a1a1a;
  font-weight: 400;
}

/* === styles.css === */
/**
 * ReviewCard Component Styles
 *
 * Card component for displaying user reviews with ratings.
 */

:root {
  & .review-card {
    --review-card-background: var(--color-brand-primaryLight);
    --review-card-padding-horizontal: 20px;
    --review-card-padding-top: 30px;
    --review-card-padding-bottom: 150px;
    --review-card-border-radius: 30px;
    --review-card-avatar-background: var(--color-brand-primaryLight);
    --review-card-time-color: #999999;
    --review-card-review-min-height: 80px;
    --review-card-main-flex-gap: 15px;
    --review-card-header-flex-gap: 20px;
    --review-card-footer-flex-gap: 15px;
    --review-card-avatar-size: 40px;
  }
}

@media (width >= 1024px) {
  :root {
    & .review-card {
      --review-card-review-min-height: 150px;
    }
  }
}

.review-card {
  background: var(--review-card-background);
  padding: var(--review-card-padding-top) var(--review-card-padding-horizontal)
    var(--review-card-padding-bottom);
  border-radius: var(--review-card-border-radius);
  gap: var(--review-card-main-flex-gap);
  display: flex;
  flex-direction: column;
  position: relative;

  & header {
    display: flex;
    gap: var(--review-card-header-flex-gap);
    margin: 0 !important;

    & .review-card__time {
      color: var(--review-card-time-color);
      font-size: 14.4px;
      font-weight: 400;
    }
  }

  & .review-card__review {
    min-height: var(--review-card-review-min-height);
    font-size: 14.4px;
    font-weight: 400;

    & p {
      margin: 0;
    }
  }

  & footer {
    position: absolute;
    bottom: var(--review-card-padding-top);
    display: flex;
    gap: var(--review-card-footer-flex-gap);
    align-items: center;

    & .review-card__avatar {
      width: var(--review-card-avatar-size);
      height: var(--review-card-avatar-size);
      display: grid;
      place-items: center;
      border-radius: 100%;
      background: var(--review-card-avatar-background);
      color: var(--color-brand-primary);
    }
  }
}


/* === styles.css === */
/**
 * ReviewStars Styles
 *
 * Theme-driven star rating styling using semantic design tokens.
 *
 * Semantic Tokens Used:
 * - --star-color: Brand-specific star color
 * - Uses FontAwesome SVG icons for consistent rendering
 */

.review-stars {
  display: flex;
  gap: 4px;
  align-items: center;
}

.star {
  color: var(--star-color, #f2d249) !important;
  width: 1.2rem;
  height: 1.2rem;
}

.review-stars--2x .star {
  width: 2rem;
  height: 2rem;
}



/* === styles.css === */
/**
 * RiniciodeSesionHeader Component Styles
 *
 * Theme-driven styles for login form header.
 * Supports brand-specific customization via CSS custom properties.
 */

.rinicio-sesion-header {
  & h1 {
    margin-bottom: 30px;
    text-align: center;
    font-size: 43.2px;
    font-weight: 300;
  }

}

.rinicio-sesion-header__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
}

.rinicio-sesion-header__link-forgot-password {
  text-align: left;
}

.rinicio-sesion-header__link-register {
  text-align: center;
}

.rinicio-sesion-header__link {
  cursor: pointer;
  text-decoration: none;
  font-size: 14.4px;
}

.rinicio-sesion-header__link:hover {
  opacity: 0.8;
}

/* Form controls */
.rinicio-sesion-header .form-control {
  background-color: rgb(232, 240, 254);
  border-radius: 9999px;
  padding: 15px 25px;
  font-size: 14.4px;
  font-weight: 400;
  height: 52.1406px;
  width: 100%;
  box-sizing: border-box;
}

.rinicio-sesion-header .btn-primary-filled {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: fit-content;
  border-radius: 40px;
  padding: 12px 25px;
  font-size: 14.4px;
  font-weight: 700;
  height: 48.1562px;
  border: 2px solid;
  cursor: pointer;
  transition: opacity 0.2s;
}

.rinicio-sesion-header .btn-primary-filled:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form error messages */
.error-message {
  display: block;
  font-size: 0.8rem;
  color: #dc3545;
  margin-top: 5px;
}

/* Brand-specific styles */

/* Credimoney */
.rinicio-sesion-header[data-brand="credimoney"] {
  & h1 {
    color: rgb(46, 16, 71);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 300;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: rgb(46, 16, 71);
    border: 1px solid rgb(216, 199, 255);
    font-family: "Helvetica Neue", sans-serif;
  }

  & .btn-primary-filled {
    background-color: rgb(248, 248, 146);
    color: rgb(46, 16, 71);
    border-color: rgb(248, 248, 146);
    font-family: "Helvetica Neue", sans-serif;
  }

  & .alert p {
    color: rgb(46, 16, 71) !important;
  }
}

.rinicio-sesion-header[data-brand="credimoney"] .rinicio-sesion-header__link {
  color: rgb(46, 16, 71);
  font-family: "Helvetica Neue", sans-serif;
}

/* Crediahora */
.rinicio-sesion-header[data-brand="crediahora"] {
  & h1 {
    color: rgb(29, 29, 27);
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    font-size: 40.32px;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: rgb(29, 29, 27);
    border: 1px solid rgb(29, 29, 27);
    font-family: Montserrat, sans-serif;
  }

  & .btn-primary-filled {
    background-color: rgb(29, 29, 27);
    color: rgb(245, 245, 245);
    border-color: rgba(0, 0, 0, 0);
    border-radius: 999px;
    font-family: Montserrat, sans-serif;
  }

  & .alert p {
    color: rgb(29, 29, 27) !important;
  }
}

.rinicio-sesion-header[data-brand="crediahora"] .rinicio-sesion-header__link {
  color: rgb(29, 29, 27);
  font-family: Montserrat, sans-serif;
}

/* OleDinero */
.rinicio-sesion-header[data-brand="oledinero"] {
  & h1 {
    color: rgb(215, 255, 123);
    font-family: Poppins, sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: rgb(2, 45, 142);
    border: 1px solid rgb(255, 255, 255);
    font-family: Poppins, sans-serif;
    font-weight: 500;
  }

  & .btn-primary-filled {
    background-color: rgba(0, 0, 0, 0);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(215, 255, 123);
    border-radius: 40px 40px 40px 0px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
  }

  & .alert p {
    color: rgb(2, 45, 142) !important;
  }
}

.rinicio-sesion-header[data-brand="oledinero"] .rinicio-sesion-header__link {
  color: rgb(215, 255, 123);
  font-family: Poppins, sans-serif;
  font-weight: 500;
}

/* CreditoAmigo */
.rinicio-sesion-header[data-brand="creditoamigo"] {
  & h1 {
    color: #0000FF;
    font-family: Seitu, sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #1D2C56;
    border: 1px solid #0000FF;
    font-family: Seitu, sans-serif;
  }

  & .btn-primary-filled {
    background-color: #0000FF;
    color: #ffffff;
    border-color: #0000FF;
    border-radius: 40px;
    font-family: Seitu, sans-serif;
  }

  & .alert p {
    color: #1D2C56 !important;
  }
}

.rinicio-sesion-header[data-brand="creditoamigo"] .rinicio-sesion-header__link {
  color: #0000FF;
  font-family: Seitu, sans-serif;
}

/* Credicheck */
.rinicio-sesion-header[data-brand="credicheck"] {
  & h1 {
    color: #18384e;
    font-family: "Funnel Display", sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #18384e;
    border: 1px solid #76bc74;
    font-family: "Funnel Display", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #76bc74;
    color: #ffffff;
    border-color: #76bc74;
    border-radius: 40px;
    font-family: "Funnel Display", sans-serif;
  }

  & .alert p {
    color: #18384e !important;
  }
}

.rinicio-sesion-header[data-brand="credicheck"] .rinicio-sesion-header__link {
  color: #76bc74;
  font-family: "Funnel Display", sans-serif;
}

/* CreditoClic */
.rinicio-sesion-header[data-brand="creditoclic"] {
  & h1 {
    color: #073034;
    font-family: Harabara, sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #073034;
    border: 1px solid #073034;
    font-family: Harabara, sans-serif;
  }

  & .btn-primary-filled {
    background-color: #073034;
    color: #ADEF45;
    border-color: #073034;
    border-radius: 40px;
    font-family: Harabara, sans-serif;
  }

  & .alert p {
    color: #073034 !important;
  }
}

.rinicio-sesion-header[data-brand="creditoclic"] .rinicio-sesion-header__link {
  color: #073034;
  font-family: Harabara, sans-serif;
}

/* CreditoPRO - white text on blue background */
.rinicio-sesion-header[data-brand="creditopro"] {
  & h1 {
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #333333;
    border: 1px solid #ffffff;
    font-family: "Open Sans", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #333333;
    color: rgb(243, 243, 243);
    border-color: #333333;
    border-radius: 999px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
  }

  & .alert p {
    color: #333333 !important;
  }
}

.rinicio-sesion-header[data-brand="creditopro"] .rinicio-sesion-header__link {
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
}

/* Crediator */
.rinicio-sesion-header[data-brand="crediator"] {
  & h1 {
    color: #333333;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #333333;
    border: 1px solid #f55f99;
    font-family: "Manrope", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #f2d5e0;
    color: #333333;
    border-color: transparent;
    border-radius: 999px;
    font-family: "Manrope", sans-serif;
  }

  & .alert p {
    color: #333333 !important;
  }
}

.rinicio-sesion-header[data-brand="crediator"] .rinicio-sesion-header__link {
  color: #333333;
  font-family: "Manrope", sans-serif;
}

/* Credifix */
.rinicio-sesion-header[data-brand="credifix"] {
  & h1 {
    color: #182d52;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #182d52;
    border: none;
    font-family: "Roboto", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #96b4e6;
    color: #182d52;
    border-color: transparent;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
  }

  & .alert p {
    color: #182d52 !important;
    font-weight: 700;
  }

  & .rinicio-sesion-header__link-register {
    font-weight: 700;
  }

  & .rinicio-sesion-header__prompt {
    color: #182d52;
    font-weight: 700;
  }
}

.rinicio-sesion-header[data-brand="credifix"] .rinicio-sesion-header__link {
  color: #ff0086;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

/* Crediscore */
.rinicio-sesion-header[data-brand="crediscore"] {
  & h1 {
    color: #907ee8;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #000000;
    border: 1px solid #907ee8;
    font-family: "Open Sans", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #907ee8;
    color: #ffffff;
    border-color: #907ee8;
    border-radius: 40px;
    font-family: "Open Sans", sans-serif;
  }

  & .alert p {
    color: #000000 !important;
  }
}

.rinicio-sesion-header[data-brand="crediscore"] .rinicio-sesion-header__link {
  color: #000000;
  font-family: "Open Sans", sans-serif;
}

/* Creditando */
.rinicio-sesion-header[data-brand="creditando"] {
  & h1 {
    color: #002449;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #002449;
    border: 1px solid #002449;
    font-family: "Manrope", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #002449;
    color: #ffffff;
    border-color: #002449;
    border-radius: 0;
    font-family: "Manrope", sans-serif;
  }

  & .alert p {
    color: #002449 !important;
  }
}

.rinicio-sesion-header[data-brand="creditando"] .rinicio-sesion-header__link {
  color: #002449;
  font-family: "Manrope", sans-serif;
}

.rinicio-sesion-header[data-brand="credisolve"] {
  & h1 {
      color: var(--color-brand-primary);
      font-weight: 700;
    }
  
    & .form-control {
      background-color: rgb(232, 240, 254);
      color: var(--color-brand-primary);
      border: 1px solid var(--color-brand-primaryDark);
    }
  
    & .btn-primary-filled {
      background-color: var(--color-brand-primaryDark);
      color: var(--color-brand-primaryLight);
      border-color: var(--color-brand-primaryDark);
      border-radius: 40px;
    }
  
    & .alert p {
      color: var(--color-brand-primaryDark) !important;
    }
}

.rinicio-sesion-header[data-brand="credipay"] {
  & h1 {
      color: var(--color-brand-primaryDark);
      font-weight: 700;
    }
  
    & .form-control {
      background-color: rgb(232, 240, 254);
      color: var(--color-brand-primaryDark);
      border: 1px solid var(--color-brand-primary);
    }
  
    & .btn-primary-filled {
      background-color: var(--color-brand-primaryDark);
      color: var(--color-brand-primaryLight);
      border-color: var(--color-brand-primaryDark);
      border-radius: 40px;
    }
  
    & .alert p {
      color: var(--color-brand-primaryDark) !important;
    }
}
    
.rinicio-sesion-header[data-brand="creditoplan"] {
& h1 {
    color: var(--color-brand-primaryDark);
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: var(--color-brand-primaryDark);
    border: 1px solid var(--color-brand-primaryDark);
  }

  & .btn-primary-filled {
    background-color: var(--color-brand-primaryDark);
    color: #ADEF45;
    border-color: var(--color-brand-primaryDark);
    border-radius: 40px;
  }

  & .alert p {
    color: var(--color-brand-primaryDark) !important;
  }
}

.rinicio-sesion-header[data-brand="credital"] {
  & h1 {
      color: var(--color-text-primary);
      font-weight: 700;
    }
  
    & .form-control {
      background-color: rgb(232, 240, 254);
      color: var(--color-text-primary);
      border: 1px solid var(--color-brand-primary);
    }
  
    & .btn-primary-filled {
      background-color: var(--color-brand-primaryDark);
      color: var(--color-brand-primaryLight);
      border-color: var(--color-brand-primaryDark);
      border-radius: 40px;
    }
  
    & .alert p {
      color: var(--color-brand-primaryDark) !important;
    }
  }

/* Creditando: login page header gradient background */
.page-header-wrapper--creditando:has(.rinicio-sesion-header),
.page-header-wrapper--creditando:has(.email-forgotten) {
  background: linear-gradient(135deg, #618ebe 30%, #cbd4df 70%) !important;
}

/* Crediticio */
.rinicio-sesion-header[data-brand="crediticio"] {
  & h1 {
    color: #13233a;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #13233a;
    border: 1px solid #13233a;
    font-family: "Open Sans", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #13233a;
    color: #ffffff;
    border-color: #13233a;
    border-radius: 40px;
    font-family: "Open Sans", sans-serif;
  }

  & .alert p {
    color: #000000 !important;
  }
}

.rinicio-sesion-header[data-brand="crediticio"] .rinicio-sesion-header__link {
  color: #13233a;
  font-family: "Open Sans", sans-serif;
}

/* Creditozas */
.rinicio-sesion-header[data-brand="creditozas"] {
  & h1 {
    color: #000000;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #000000;
    border: 1px solid #000000;
    font-family: "Manrope", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
    border-radius: 40px;
    font-family: "Manrope", sans-serif;
  }

  & .alert p {
    color: #000000 !important;
  }
}

.rinicio-sesion-header[data-brand="creditozas"] .rinicio-sesion-header__link {
  color: #000000;
  font-family: "Manrope", sans-serif;
}

/* Credizoom */
.rinicio-sesion-header[data-brand="credizoom"] {
  & h1 {
    color: #4eb5a4;
    font-family: "AdobeClean", sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #000000;
    border: 1px solid #4eb5a4;
    font-family: "AdobeClean", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #4eb5a4;
    color: #ffffff;
    border-color: #4eb5a4;
    border-radius: 40px;
    font-family: "AdobeClean", sans-serif;
  }

  & .alert p {
    color: #000000 !important;
  }
}

.rinicio-sesion-header[data-brand="credizoom"] .rinicio-sesion-header__link {
  color: #4eb5a4;
  font-family: "AdobeClean", sans-serif;
}

.rinicio-sesion-header[data-brand="credizoom"] .rinicio-sesion-header__prompt {
  color: #000000;
}

/* Credihope: was missing entirely, so inputs kept the base light-blue fill
   with no border at all — hard to make out against the warm page-header
   gradient — and the title had no explicit color. */
.rinicio-sesion-header[data-brand="credihope"] {
  & h1 {
    color: #252827;
    font-weight: 300;
  }

  & .form-control {
    background-color: #ffffff;
    color: #252827;
    border: 1px solid #cccccc;
  }

  & .btn-primary-filled {
    background-color: #f9b233;
    color: #252827;
    border-color: #f9b233;
  }

  & .alert p {
    color: #252827 !important;
  }
}

.rinicio-sesion-header[data-brand="credihope"] .rinicio-sesion-header__link {
  color: #ea5648;
}

/* Mastercredi */
.rinicio-sesion-header[data-brand="mastercredi"] {
  & h1 {
    color: #1a1a1a;
    font-family: "AdobeClean", sans-serif;
    font-weight: 700;
  }

  & .form-control {
    background-color: rgb(232, 240, 254);
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    font-family: "AdobeClean", sans-serif;
  }

  & .btn-primary-filled {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
    border-radius: 40px;
    font-family: "AdobeClean", sans-serif;
  }

  & .alert p {
    color: #1a1a1a !important;
  }
}

.rinicio-sesion-header[data-brand="mastercredi"] .rinicio-sesion-header__link {
  color: #1a1a1a;
  font-family: "AdobeClean", sans-serif;
}


/* === index.css === */
.sms-resend {
    position: relative;
    display: block;
    background-color: #fff;
    max-width: 400px;
    width: 90%;
    box-sizing: border-box;
    border-radius: 8px;
    height: auto;
    padding: 20px;
    z-index: 100;
    margin: auto;
    border: 2.5px solid #ccc; /* Add border */

    .sms-resend__input-group {
        display: flex;
        flex-direction: column;
        justify-items: center;
    }

    input {
        padding: 14px 25px;
        border-radius: 9999px;
        width: 100%;
        outline: none;
        background-color: rgb(158 182 203 / 51%);
        margin-top: 5px;
        border: 1px solid rgb(222, 226, 230);
    }

    .btn {
        margin: 10px auto 0;
        display: block;
        padding: 12px 25px;
        font-size: 14.4px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        border-radius: 40px;
        transition: all 0.3s ease;
        background-color: var(--color-brand-primary, #007bff);
        color: #fff;
    }
}

/* Brand-specific button styles for SMSResend */

/* Credimoney */
[data-brand="credimoney"] .sms-resend .btn {
    background-color: rgb(248, 248, 146);
    color: rgb(46, 16, 71);
    border: 2px solid rgb(248, 248, 146);
}

[data-brand="credimoney"] .sms-resend

/* Crediahora */
[data-brand="crediahora"] .sms-resend .btn {
    background-color: rgb(29, 29, 27);
    color: rgb(245, 245, 245);
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 999px;
}

[data-brand="crediahora"] .sms-resend

/* OleDinero */
[data-brand="oledinero"] .sms-resend .btn {
    background-color: rgba(0, 0, 0, 0);
    color: rgb(3, 45, 143);
    border: 2px solid rgb(3, 45, 143);
    border-radius: 40px 40px 40px 0px;
}

[data-brand="oledinero"] .sms-resend

/* === styles.css === */
/* Section3Cols base styles */
.section3cols .container__content {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section3cols h2 {
  margin-bottom: 20px;
}

.section3cols ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.section3cols ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.section3cols .section3cols__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section3cols .section3cols__icon svg {
  width: 20px;
  height: auto;
}

.section3cols ul li p {
  margin: 0;
}

.section3cols .section3cols__item__title {
  margin-bottom: 10px;
  font-weight: 700 !important;
}


/* Credimoney brand styles */
.section3cols--credimoney {
  font-family: "Helvetica Neue", sans-serif;
  color: #2e1047;
}

.section3cols--credimoney h2 {
  font-weight: 300;
}

.section3cols--credimoney .section3cols__icon svg {
  color: #2e1047;
}

.section3cols--credimoney .section3cols__item__title {
  font-weight: 400;
  color: #2e1047;
}

.section3cols--credimoney .section3cols__item__description {
  font-weight: 300;
  color: #2e1047;
}

/* Credimoney light gray background variant */
.section3cols--credimoney.secondary-bg {
  background: #f1f1f1 !important;
}

/* Crediahora brand styles */
.section3cols--crediahora {
  font-family: "Montserrat", sans-serif;
}

.section3cols--crediahora.banner-bg {
  background-color: #1d1d1b !important;
}

.section3cols--crediahora.banner-bg h2 {
  font-weight: 900;
  color: #f5f5f5;
}

.section3cols--crediahora.banner-bg .section3cols__icon svg {
  color: #f5f5f5;
}

.section3cols--crediahora.banner-bg .section3cols__item__title {
  font-weight: 700;
  color: #f5f5f5;
}

.section3cols--crediahora.banner-bg .section3cols__item__description {
  font-weight: 400;
  color: #f5f5f5;
}

/* OleDinero brand styles */
.section3cols--oledinero {
  font-family: "Poppins", sans-serif;
  color: #022d8e;
}

.section3cols--oledinero h2 {
  font-weight: 700;
}

.section3cols--oledinero .section3cols__icon svg {
  color: #022d8e;
}

.section3cols--oledinero .section3cols__item__title {
  font-weight: 500;
  color: #022d8e;
}

.section3cols--oledinero .section3cols__item__description {
  font-weight: 300;
  color: #022d8e;
}

/* Creditoamigo brand styles */
.section3cols--creditoamigo {
  font-family: "Seitu", sans-serif;
  color: #000000;
  background: #eeeff4;
}

.section3cols--creditoamigo h2 {
  font-weight: 500;
  color: #0000ff;
}

.section3cols--creditoamigo .section3cols__icon svg {
  color: #0000ff;
}

.section3cols--creditoamigo .section3cols__item__title {
  font-weight: 500;
  color: #000000;
}

.section3cols--creditoamigo .section3cols__item__description {
  font-weight: 300;
  color: #000000;
}

/* Credicheck brand styles */
.section3cols--credicheck {
  font-family: "Funnel Display", sans-serif;
  color: #000000;
  background: #edeef4;
}

.section3cols--credicheck h2 {
  font-weight: 500;
  color: #76bc74;
}

.section3cols--credicheck .section3cols__icon svg {
  color: #76bc74;
}

.section3cols--credicheck .section3cols__item__title {
  font-weight: 500;
  color: #000000;
}

.section3cols--credicheck .section3cols__item__description {
  font-weight: 300;
  color: #000000;
}

/* Creditoclic brand styles (banner-bg: dark teal background) */
.section3cols--creditoclic {
  font-family: "Montserrat", sans-serif;
}

.section3cols--creditoclic.banner-bg {
  background-color: #073034 !important;
}

.section3cols--creditoclic.banner-bg h2 {
  font-family: "Harabara", sans-serif;
  font-weight: 500;
  color: #7ac4ae;
}

.section3cols--creditoclic.banner-bg .section3cols__icon svg {
  color: #7ac4ae;
}

.section3cols--creditoclic.banner-bg .section3cols__item__title {
  font-weight: 500;
  color: #ffffff;
}

.section3cols--creditoclic.banner-bg .section3cols__item__description {
  font-weight: 500;
  color: #ffffff;
}

/* Creditopro brand styles */
.section3cols--creditopro {
  font-family: "Open Sans", sans-serif;
  color: #333333;
}

.section3cols--creditopro h2 {
  font-weight: 800;
  color: #333333;
}

.section3cols--creditopro .section3cols__icon svg {
  color: #333333;
}

.section3cols--creditopro .section3cols__item__title {
  font-weight: 500;
  color: #333333;
}

.section3cols--creditopro .section3cols__item__description {
  font-weight: 400;
  color: #333333;
}

/* Crediator brand styles (banner-bg: dark green background) */
.section3cols--crediator {
  font-family: "Manrope", sans-serif;
}

.section3cols--crediator.banner-bg {
  background-color: #00593f !important;
}

.section3cols--crediator.banner-bg h2 {
  font-weight: 800;
  color: #cdf63e;
}

.section3cols--crediator.banner-bg .section3cols__icon svg {
  color: #cdf63e;
}

.section3cols--crediator.banner-bg .section3cols__item__title {
  font-weight: 600;
  color: #ffffff;
}

.section3cols--crediator.banner-bg .section3cols__item__description {
  font-weight: 500;
  color: #ffffff;
}

/* Credifix brand styles (banner-bg: dark navy background) */
.section3cols--credifix {
  font-family: "Roboto", sans-serif;
}

.section3cols--credifix.banner-bg {
  background-color: #182d52 !important;
}

.section3cols--credifix.banner-bg h2 {
  font-weight: 300;
  color: #96b4e6;
}

.section3cols--credifix.banner-bg .section3cols__icon svg {
  color: #96b4e6;
}

.section3cols--credifix.banner-bg .section3cols__item__title {
  font-weight: 500;
  color: #d9e4f5;
}

.section3cols--credifix.banner-bg .section3cols__item__description {
  font-weight: 400;
  color: #d9e4f5;
}

/* Crediscore brand styles (banner-bg: black background) */
.section3cols--crediscore {
  font-family: "Open Sans", sans-serif;
}

.section3cols--crediscore.banner-bg {
  background-color: #000000 !important;
}

.section3cols--crediscore.banner-bg h2 {
  font-weight: 700;
  color: #907ee8;
}

.section3cols--crediscore.banner-bg .section3cols__icon svg {
  color: #907ee8;
}

.section3cols--crediscore.banner-bg .section3cols__item__title {
  font-weight: 500;
  color: #ffffff;
}

.section3cols--crediscore.banner-bg .section3cols__item__description {
  font-weight: 400;
  color: #ffffff;
}

/* Creditando brand styles (banner-bg: dark navy background) */
.section3cols--creditando {
  font-family: "Manrope", sans-serif;
}

.section3cols--creditando.banner-bg {
  background-color: #002449 !important;
}

.section3cols--creditando.banner-bg h2 {
  font-weight: 800;
}

.section3cols--creditando.banner-bg .section3cols__icon svg {
  color: #c6fd00;
}

.section3cols--creditando.banner-bg .section3cols__item__title {
  font-weight: 600;
}

.section3cols--creditando.banner-bg .section3cols__item__description {
  font-weight: normal;
}

/* Crediticio brand styles */
.section3cols--crediticio {
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

.section3cols--crediticio h2 {
  font-weight: 700;
  color: #13233a;
}

.section3cols--crediticio .section3cols__icon svg {
  color: #ffa573;
}

.section3cols--crediticio .section3cols__item__title {
  font-weight: 500;
  color: #13233a;
}

.section3cols--crediticio .section3cols__item__description {
  font-weight: 300;
  color: #13233a;
}

/* Creditozas brand styles */
.section3cols--creditozas {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

.section3cols--creditozas h2 {
  font-weight: 800;
  color: #000000;
}

.section3cols--creditozas .section3cols__icon svg {
  color: #96b4e6;
}

.section3cols--creditozas .section3cols__item__title {
  font-weight: 500;
  color: #000000;
}

.section3cols--creditozas .section3cols__item__description {
  font-weight: 400;
  color: #000000;
}

/* Credizoom brand styles */
.section3cols--credizoom {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: #000000;
}

.section3cols--credizoom.secondary-bg,
.section3cols--credizoom.banner-bg {
  background-color: #f4f8f9 !important;
}

.section3cols--credizoom.banner-bg h2 {
  color: #000000 !important;
}

.section3cols--credizoom.banner-bg .section3cols__icon svg {
  color: #4eb5a4;
}

.section3cols--credizoom.banner-bg .section3cols__item__title {
  color: #000000;
}

.section3cols--credizoom.banner-bg .section3cols__item__description {
  color: #000000;
}

.section3cols--credizoom h2 {
  color: #000000 !important;
}

.section3cols--credizoom .section3cols__icon svg {
  color: #4eb5a4;
}

.section3cols--credizoom .section3cols__item__title {
  font-weight: 500;
  color: #000000;
}

.section3cols--credizoom .section3cols__item__description {
  font-weight: 400;
  color: #000000;
}

/* Mastercredi brand styles */
.section3cols--mastercredi {
  font-family: "AdobeClean", sans-serif;
  font-weight: 500;
  color: #1a1a1a;
}

.section3cols--mastercredi h2 {
  font-family: "Coolvetica", sans-serif !important;
  font-weight: 700;
  color: #1a1a1a;
}

.section3cols--mastercredi .section3cols__icon svg {
  color: #1a1a1a;
}

.section3cols--mastercredi .section3cols__item__title {
  font-weight: 500;
  color: #1a1a1a;
}

.section3cols--mastercredi .section3cols__item__description {
  font-weight: 400;
  color: #1a1a1a;
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .section3cols h2 {
    /* font-size: 1.4rem; */
    text-align: center;
  }

  .section3cols ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .section3cols .section3cols__icon svg {
    width: 30px;
  }
}


/* === styles.css === */
/**
 * Section Banner Confianza Styles
 *
 * Component for displaying trust/security banner with payment security icons
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Text color for Credimoney brand
 * - --font-weight-semibold: Medium font weight for emphasis
 * - --font-weight-bold: Bold font weight for Crediahora
 */

:root {
  & .section-banner-confianza {
    --banner-padding-horizontal: 5%;
    --banner-column-padding-vertical: 40px;
    --banner-column-flex-gap: 10px;
    --banner-border-width: 0 0 1px 0;
  }
}

& .section-banner-confianza {
  & .row {
    display: flex;
    flex-direction: column;
    gap: 0;

    & .col {
      display: flex;
      flex-direction: column;
      padding: var(--banner-column-padding-vertical) 0;
      gap: var(--banner-column-flex-gap);

      &:first-child {
        border-width: var(--banner-border-width);
        border-style: solid;
        border-color: var(--container-text-color);
      }

      & p {
        font-size: 1.3rem;
        text-align: center;
        margin: 0;
        line-height: 1.25;

        & span {
          font-weight: var(--font-weight-semibold);
        }
      }

      & img {
        margin: 0 auto;
      }

      & .section-banner-confianza__icons {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;

        & img {
          max-width: 80px;
          max-height: 70px;
          margin: 0;
        }
      }
    }
  }
}

/* Brand-specific overrides */

/* Credimoney - cyan-light background */
.section-banner-confianza-credimoney {
  background: #c0e5eb !important;

  &.container {
    --container-text-color: var(--color-brand-primary);
  }

  & p {
    color: rgb(46, 16, 71) !important;
    font-family: "Helvetica Neue", sans-serif;
  }
}

/* Crediahora - dark background */
.section-banner-confianza-crediahora {
  background: #1d1d1b !important;

  &.container {
    --container-text-color: rgb(245, 245, 245);
  }

  & p {
    font-family: "Montserrat", sans-serif;
    color: rgb(245, 245, 245);
  }

  & .col p span {
    font-weight: var(--font-weight-bold);
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* OleDinero - gradient background */
.section-banner-confianza-oledinero {
  background: url("/images/bg/fondo-05.png") !important;
  background-color: rgba(238, 238, 238, 0.533) !important;
  background-size: cover !important;
  background-position: right top !important;
  background-repeat: no-repeat !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* CreditoPRO - dark blue background */
.section-banner-confianza-creditopro {
  background: #1b4a82 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* CreditoClic - dark teal background */
.section-banner-confianza-creditoclic {
  background: #073034 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* CreditoAmigo - gradient background (uses bg-gradient-2 class on production) */
/* Higher specificity to override banner-bg in backgrounds.css */
.container.section-banner-confianza.section-banner-confianza-creditoamigo {
  background: linear-gradient(135deg, #c8cffa 0%, #e3e5f6 100%) !important;

  &.container {
    --container-text-color: #1d2c56 !important;
  }

  & p {
    color: #1d2c56 !important;
  }
}

/* Crediator - green background with lime accents */
.section-banner-confianza-crediator {
  background: #00593f !important;

  &.container {
    --container-text-color: #cdf63e;
  }

  & p {
    font-family: "Manrope", sans-serif;
    color: #cdf63e;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* Credifix - dark blue background with pink accents */
.section-banner-confianza-credifix {
  background: #182d52 !important;

  &.container {
    --container-text-color: #96b4e6 !important;
  }

  & p {
    font-family: "Roboto", sans-serif;
    color: #96b4e6 !important;
  }

  & .section-banner-confianza__icons img {
    filter: url("/icons/filters.svg#recolor-96b4e6");
  }
}

/* Crediscore - light blue background */
/* Higher specificity to override banner-bg in backgrounds.css */
.container.section-banner-confianza.section-banner-confianza-crediscore {
  background: #c5e5fc !important;

  &.container {
    --container-text-color: #000000 !important;
  }

  & p {
    font-family: "Open Sans", sans-serif;
    color: #000000 !important;
  }
}

/* Creditando - lime green background */
/* Higher specificity to override banner-bg in backgrounds.css */
.container.section-banner-confianza.section-banner-confianza-creditando {
  background: #c6fd00 !important;

  &.container {
    --container-text-color: #002449 !important;
  }

  & p {
    font-family: "Manrope", sans-serif;
    color: #002449 !important;
  }
}

/* Crediticio - dark navy background with light blue text */
/* Higher specificity to override banner-bg in backgrounds.css */
.container.section-banner-confianza.section-banner-confianza-crediticio {
  background: #13233a !important;

  &.container {
    --container-text-color: #c5e5fc !important;
  }

  & p {
    font-family: "Open Sans", sans-serif;
    color: #c5e5fc !important;
  }

  & .section-banner-confianza__icons img {
    filter: url("/icons/filters.svg#recolor-c5e5fc");
  }
}

/* Creditozas - light blue background */
/* Higher specificity to override banner-bg in backgrounds.css */
.container.section-banner-confianza.section-banner-confianza-creditozas {
  background: #96b4e6 !important;

  &.container {
    --container-text-color: #000000 !important;
  }

  & p {
    font-family: "Manrope", sans-serif;
    color: #000000 !important;
  }
}

/* Credizoom - black background */
.section-banner-confianza-credizoom {
  background: #000000 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    font-family: "AdobeClean", sans-serif;
    color: #ffffff;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* Mastercredi - dark background (#7038) */
/* Higher specificity to override banner-bg in backgrounds.css */
.container.section-banner-confianza.section-banner-confianza-mastercredi {
  background: #1a1a1a !important;

  &.container {
    --container-text-color: #e2e8ed !important;
  }

  & p {
    font-family: "AdobeClean", sans-serif;
    color: #e2e8ed !important;
  }

  /* #7038: Icons light on dark background */
  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* Credisolve - magenta background */
.section-banner-confianza-credisolve {
  background: #e62095 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff !important;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* Creditoplan - teal background */
.section-banner-confianza-creditoplan {
  background: #1d4d51 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff !important;
  }

}

/* Credipay - blue background */
.section-banner-confianza-credipay {
  background: #1564e9 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff !important;
  }
}

/* Credihope: was missing entirely, so this fell back to the generic
   banner-bg background (dark #252827, correct) but with no icon filter, so
   the Visa/3D-Secure/Mastercard SVGs kept their default dark fill and were
   nearly invisible against the dark background. */
.section-banner-confianza-credihope {
  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff;
  }

  & .section-banner-confianza__icons img {
    filter: brightness(0) invert(1);
  }
}

/* Credicheck: was missing entirely, so text fell back to white (the base
   :root default) on the light default banner-bg background (#edeef4),
   making both column headings and the "Pago seguro..." text invisible. The
   icons (Visa/3D-Secure/Mastercard) already render dark/visible by default,
   so only the text color needs fixing here, matching credicheck's own dark
   navy already used elsewhere on the site (SwipeFeatures, SectionReviews). */
.section-banner-confianza-credicheck {
  &.container {
    /* !important needed: Container/styles.css's base ":root .container"
       rule (specificity 0,2,0) ties with this compound selector
       (.section-banner-confianza-credicheck.container, also 0,2,0), and
       empirically does not lose the tie to source order here - verified
       live that only forcing the value (inline style or !important)
       actually overrides it. */
    --container-text-color: #18384e !important;
  }

  & p {
    color: #18384e !important;
  }
}

/* Credital - purple background */
.section-banner-confianza-credital {
  background: #a318e1 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff !important;
  }

  & .section-banner-confianza__icons img {
        filter: brightness(0) invert(1);
    }
}

/* Credipay */
.section-banner-confianza-credipay {
  & .section-banner-confianza__icons img {
        filter: brightness(0) invert(1);
    }
}

/* Creditoplan */
.section-banner-confianza-creditoplan {
  & .section-banner-confianza__icons img {
        filter: brightness(0) invert(1);
    }
}


/* Responsive styles */
@media (width >= 1024px) {
  :root {
    & .section-banner-confianza {
      --banner-border-width: 0 1px 0 0;
      --banner-column-padding-vertical: 25px;
    }
  }

  .section-banner-confianza .container__content {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section-banner-confianza .row {
    flex-direction: row;
  }

  .section-banner-confianza .col {
    width: 700px;
  }
}


/* === styles.css === */
/**
 * SectionBannerConoce Component Styles
 *
 * Simple two-column banner section for "Conoce y entiende tu información fiscal"
 * Appears before footer on seguridad-digital pages
 */

.section-banner-conoce {
  padding: 0;
  width: 100%;
}

.section-banner-conoce .container__content {
  max-width: 80rem;
  margin: 0 auto;
  padding: 60px var(--body-padding-horizontal);
}

.section-banner-conoce .row {
  display: flex;
  align-items: normal;
  gap: 0;
  position: relative;
}

/* Vertical divider between columns */
.section-banner-conoce .row::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.5);
}


.section-banner-conoce .col {
  flex: 1 1 0%;
  padding: 0 40px 0 0;
}

.section-banner-conoce .col:last-child {
  padding-left: 40px;
  padding-right: 0;
}

.section-banner-conoce .col p {
  margin: 0;
}


/* Title paragraph (first column) */
.section-banner-conoce .col:first-child p {
  font-size: 36px;
  font-weight: 400;
  line-height: 36px;
  text-align: right;
}

/* Text paragraph (second column) */
.section-banner-conoce .col:last-child p {
  font-size: 18.72px;
  font-weight: 400;
  line-height: 28.08px;
}

.section-banner-conoce__buttons {
  display: block;
  margin: 40px 0 0 0;
  padding: 0;
  text-align: center;
}

.section-banner-conoce__buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-brand-primary);
  color: var(--color-surface-base);
  padding: 12px 25px;
  border-radius: 40px;
  font-size: 18.72px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.section-banner-conoce__buttons .btn svg {
  width: 16px;
  height: 16px;
}

/* Brand-specific styles */

/* Credimoney - Light teal background with dark purple text and orange button */
.section-banner-conoce[data-brand="credimoney"] {
  background-color: rgb(192, 229, 235) !important;
}

.section-banner-conoce[data-brand="credimoney"] .col p {
  color: rgb(46, 16, 71);
}

.section-banner-conoce[data-brand="credimoney"] .row::after {
  background-color: rgba(46, 16, 71, 0.3);
}

.section-banner-conoce[data-brand="credimoney"] .btn {
  background-color: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  border: 2px solid rgb(248, 248, 146);
}

/* Crediahora - Dark background with green text */
.section-banner-conoce[data-brand="crediahora"] {
  background-color: rgb(29, 29, 27) !important;
}

.section-banner-conoce[data-brand="crediahora"] .col p {
  font-family: "Montserrat", sans-serif;
  color: rgb(149, 193, 31);
}

.section-banner-conoce[data-brand="crediahora"] .row::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.section-banner-conoce[data-brand="crediahora"] .btn {
  background-color: transparent;
  color: rgb(255, 255, 255);
  border: 2px solid rgb(255, 255, 255);
  font-family: "Montserrat", sans-serif;
}

/* OleDinero - Blue background with green bordered button */
.section-banner-conoce[data-brand="oledinero"] {
  background-color: rgb(3, 45, 143) !important;
}

.section-banner-conoce[data-brand="oledinero"] .col p {
  color: rgb(255, 255, 255);
}

.section-banner-conoce[data-brand="oledinero"] .btn {
  background-color: transparent;
  color: rgb(255, 255, 255);
  border: 2px solid rgb(215, 255, 123);
  border-radius: 40px 40px 0px;
}

/* CreditoPRO - Dark blue background with white text and dark button */
.section-banner-conoce[data-brand="creditopro"] {
  background-color: #1B4A82 !important;
}

.section-banner-conoce[data-brand="creditopro"] .col p {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
}

.section-banner-conoce[data-brand="creditopro"] .row::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.section-banner-conoce[data-brand="creditopro"] .btn {
  background-color: #333333;
  color: #f3f3f3;
  border: 2px solid #333333;
  border-radius: 999px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

/* Crediator - Green background with pink button */
.section-banner-conoce[data-brand="crediator"] {
  background-color: #00593f !important;
}

.section-banner-conoce[data-brand="crediator"] .col p {
  font-family: "Manrope", sans-serif;
  color: #cdf63e;
}

.section-banner-conoce[data-brand="crediator"] .row::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.section-banner-conoce[data-brand="crediator"] .btn {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 999px;
}

/* Credifix - Dark blue background with pink button */
.section-banner-conoce[data-brand="credifix"] {
  background-color: #182d52 !important;
}

.section-banner-conoce[data-brand="credifix"] .col p {
  font-family: "Roboto", sans-serif;
  color: #96b4e6;
}

.section-banner-conoce[data-brand="credifix"] .row::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.section-banner-conoce[data-brand="credifix"] .btn {
  background-color: #182d52;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 10px;
}

/* Crediscore - Light blue background with purple button */
.section-banner-conoce[data-brand="crediscore"] {
  background-color: #c5e5fc !important;
}

.section-banner-conoce[data-brand="crediscore"] .col p {
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

.section-banner-conoce[data-brand="crediscore"] .row::after {
  background-color: rgba(0, 0, 0, 0.3);
}

.section-banner-conoce[data-brand="crediscore"] .btn {
  background-color: #907ee8;
  color: #ffffff;
  border: none;
}

/* Creditando - Lime green background with dark blue button */
.section-banner-conoce[data-brand="creditando"] {
  background-color: #c6fd00 !important;
}

.section-banner-conoce[data-brand="creditando"] .col p {
  font-family: "Manrope", sans-serif;
  color: #002449;
}

.section-banner-conoce[data-brand="creditando"] .row::after {
  background-color: rgba(0, 36, 73, 0.3);
}

.section-banner-conoce[data-brand="creditando"] .btn {
  background-color: #002449;
  color: #ffffff;
  border: none;
  border-radius: 0;
}

/* Crediticio - Orange background with dark blue button */
.section-banner-conoce[data-brand="crediticio"] {
  background-color: #ffa573 !important;
}

.section-banner-conoce[data-brand="crediticio"] .col p {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

.section-banner-conoce[data-brand="crediticio"] .row::after {
  background-color: rgba(19, 35, 58, 0.3);
}

.section-banner-conoce[data-brand="crediticio"] .btn {
  background-color: #13233a;
  color: #ffffff;
  border: none;
}

/* Creditozas - Light blue background with black button */
.section-banner-conoce[data-brand="creditozas"] {
  background-color: #96b4e6 !important;
}

.section-banner-conoce[data-brand="creditozas"] .col p {
  font-family: "Manrope", sans-serif;
  color: #000000;
}

.section-banner-conoce[data-brand="creditozas"] .row::after {
  background-color: rgba(0, 0, 0, 0.3);
}

.section-banner-conoce[data-brand="creditozas"] .btn {
  background-color: #000000;
  color: #ffffff;
  border: none;
}

/* Credizoom - Black background with teal button */
.section-banner-conoce[data-brand="credizoom"] {
  background-color: #000000 !important;
}

.section-banner-conoce[data-brand="credizoom"] .col p {
  font-family: "AdobeClean", sans-serif;
  color: #ffffff;
}

.section-banner-conoce[data-brand="credizoom"] .row::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.section-banner-conoce[data-brand="credizoom"] .btn {
  background-color: #4eb5a4;
  color: #ffffff;
  border: none;
}

/* Mastercredi - Dark background with light text and light button */
.section-banner-conoce[data-brand="mastercredi"] {
  background-color: #1a1a1a !important;
}

.section-banner-conoce[data-brand="mastercredi"] .col p {
  font-family: "AdobeClean", sans-serif;
  color: #e2e8ed;
}

.section-banner-conoce[data-brand="mastercredi"] .row::after {
  background-color: rgba(226, 232, 237, 0.5);
}

.section-banner-conoce[data-brand="mastercredi"] .btn {
  background-color: #e2e8ed;
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-family: "AdobeClean", sans-serif;
  font-size: 18.72px;
}

/* Credital - Light purple background with dark text and violet button */
.section-banner-conoce[data-brand="credital"] {
  background-color: #f2e6f9 !important;
}

.section-banner-conoce[data-brand="credital"] .col p {
  color: #34323f;
}

.section-banner-conoce[data-brand="credital"] .row::after {
  background-color: rgba(163, 24, 225, 0.3);
}

.section-banner-conoce[data-brand="credital"] .btn {
  background-color: #a318e1;
  color: #ffffff;
  border: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-banner-conoce .row {
    flex-direction: column;
  }

  .section-banner-conoce .row::after {
    display: none;
  }

  .section-banner-conoce .col {
    padding: 20px;
  }

  .section-banner-conoce .col:last-child {
    padding-left: 20px;
  }

  .section-banner-conoce__buttons {
    padding: 0 20px 25px 20px;
  }

  .section-banner-conoce .col:first-child p {
    font-size: 28px;
    line-height: 32px;
    text-align: left;
  }

  .section-banner-conoce .col:last-child p {
    font-size: 16px;
    line-height: 24px;
  }
}


/* === styles.css === */
/**
 * SectionConsigueTuPrestamo Component Styles
 *
 * Theme-driven banner with image and gradient background
 * Uses --consigue-prestamo-gradient-color and --consigue-prestamo-gradient-size
 * CSS variables for brand customization.
 *
 * Brands using brand primary (default): credimoney, oledinero
 * Brands with custom gradient colors: all others
 */

:root {
  & .banner-consigue-prestamo {
    --padding-top: 50px;
    --overlay-max-width: 38%;
    --overlay-top: -5%;
    --overlay-left: 50%;
    --overlay-transform: translateX(calc(-50% - 5px));
    --image-max-width: 75%;
    --image-max-height: 600px;
  }
}

@media (width >=1024px) {
  :root {
    & .banner-consigue-prestamo {
      --padding-top: 80px;
      --overlay-max-width: 350px;
      --image-max-width: 60%;
      --overlay-transform: none;
      --overlay-left: 63%;
    }
  }
}

@media (width >=1300px) {
  :root {
    & .banner-consigue-prestamo {
      --overlay-left: 60%;
    }
  }
}

& .banner-consigue-prestamo {
  overflow: hidden;
  padding-top: var(--padding-top);

  & .banner-consigue-prestamo__content {
    background-image: linear-gradient(var(--consigue-prestamo-gradient-color, var(--color-brand-primary)),
        var(--consigue-prestamo-gradient-color, var(--color-brand-primary)));
    background-size: var(--consigue-prestamo-gradient-size, 100% 70%);
    background-position: 0 bottom;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    display: grid;
    place-items: center;
  }

  & img {
    &.banner-consigue-prestamo__main {
      max-width: var(--image-max-width);
      max-height: var(--consigue-prestamo-image-max-height, var(--image-max-height));
      margin: 0 auto;
    }

    &.banner-consigue-prestamo__overlay {
      position: absolute;
      top: var(--overlay-top);
      left: var(--overlay-left);
      transform: var(--overlay-transform);
      max-width: var(--overlay-max-width);
    }
  }
}

/* ============================================================================
   Brand-specific gradient overrides
   ============================================================================ */

/* Crediahora: light gray gradient, 60% size */
:root[data-brand="crediahora"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #f5f5f5;
  --consigue-prestamo-gradient-size: 100% 60%;
}

/* Creditoamigo: diagonal gradient from light purple to blue */
:root[data-brand="creditoamigo"] .banner-consigue-prestamo .banner-consigue-prestamo__content {
  background-image: linear-gradient(135deg, #b2b1f0 0%, #0000ff 70%, #0000ff 100%) !important;
}

/* Credicheck: diagonal gradient from light purple to blue */
:root[data-brand="credicheck"] .banner-consigue-prestamo .banner-consigue-prestamo__content {
  background-image: linear-gradient(135deg, #b2b1f0 0%, #76bc74 70%, #76bc74 100%) !important;
}

/* Creditoclic: light gray-teal gradient, 60% size */
:root[data-brand="creditoclic"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #eaeeef;
  --consigue-prestamo-gradient-size: 100% 60%;
}

/* Creditopro: light gray gradient, 60% size */
:root[data-brand="creditopro"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #f3f3f3;
  --consigue-prestamo-gradient-size: 100% 60%;
}

/* Crediator: light gray gradient, 60% size */
:root[data-brand="crediator"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #f2f2f2;
  --consigue-prestamo-gradient-size: 100% 60%;
}

/* Credifix: light blue gradient, 60% size */
:root[data-brand="credifix"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #d9e4f5;
  --consigue-prestamo-gradient-size: 100% 60%;
  --image-max-width: 264px;
  --consigue-prestamo-image-max-height: 400px;
}

/* Crediscore: light blue gradient, 60% size, smaller image */
:root[data-brand="crediscore"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #e1f1fc;
  --consigue-prestamo-gradient-size: 100% 60%;
}

:root[data-brand="crediscore"] .banner-consigue-prestamo img.banner-consigue-prestamo__main {
  max-width: 447px;
  max-height: 400px;
}

/* Creditando: light teal gradient, 60% size */
:root[data-brand="creditando"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #ddecee;
  --consigue-prestamo-gradient-size: 100% 60%;
}

:root[data-brand="creditando"] .banner-consigue-prestamo img.banner-consigue-prestamo__main {
  max-width: 315px;
  width: 315px;
  max-height: 400px;
}

/* Crediticio: brand primary color, 60% size */
:root[data-brand="crediticio"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-size: 100% 60%;
}

:root[data-brand="crediticio"] .banner-consigue-prestamo img.banner-consigue-prestamo__main {
  max-width: 476px;
  max-height: 400px;
}

/* Creditozas: semi-transparent light teal gradient, 60% size */
:root[data-brand="creditozas"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: rgba(229, 234, 234, 0.5);
  --consigue-prestamo-gradient-size: 100% 60%;
}

/* Credizoom: light gray-blue gradient, 60% size */
:root[data-brand="credizoom"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #f4f8f9;
  --consigue-prestamo-gradient-size: 100% 60%;
}

:root[data-brand="credizoom"] .banner-consigue-prestamo img.banner-consigue-prestamo__main {
  margin: 0 auto;
  padding: 0;
  width: 398px;
  max-width: 398px;
  max-height: 400px;
}

/* Mastercredi: light gray-blue gradient, 60% size, image 455x400 */
:root[data-brand="mastercredi"] .banner-consigue-prestamo {
  --consigue-prestamo-gradient-color: #e2e8ed;
  --consigue-prestamo-gradient-size: 100% 60%;
}

:root[data-brand="mastercredi"] .banner-consigue-prestamo img.banner-consigue-prestamo__main {
  width: 455px;
  max-width: 455px;
  max-height: 400px;
}


/* === styles.css === */
/**
 * SectionFaq Component Styles
 *
 * Theme-driven FAQ section with image.
 * Used on contact page and other pages.
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Button background, gradient background
 * - --color-brand-primaryLight: Alternative background color for Credimoney
 */

.faqs-section {
  &.hero-image-full {
    & .container__content {
      & .container-row {
        gap: 0;

        &>.col {
          flex: 1 1 0%;
        }

        &>.col-img {
          flex: 1.2 1 0%;
        }
      }

      & .container-col-img {
        place-items: end center;

        /*& img {
          max-width: 70%;
          margin: 0;
          max-height: none;
          position: relative;
        }*/
      }
    }
  }

  /* Title styling using theme custom properties */
  & h2 {
    font-size: var(--text-xl-font-size, 2.75rem);
    font-weight: var(--h2-font-weight, 700);
    color: var(--text-color, #333);
    margin-top: 0;
    margin-bottom: 2.5rem;
  }

  & .section-footer-buttons {
    text-align: left;
    margin-top: 2.5rem;
  }

  /* Brand-specific button overrides */
  /* Credimoney: gray-bg with btn-extra should use cyan-light, not yellow */
  &.gray-bg {
    & .btn-extra {
      background: var(--color-brand-primaryLight);
      border-color: var(--color-brand-primaryLight);
      color: var(--color-brand-primary);
    }
  }

  /* Crediahora: white background with default btn should use primary (black) bg and white text */
  &:not(.gray-bg):not(.secondary-bg):not(.bg-gradient-inverse) {
    & .btn:not(.btn-extra):not(.btn-secondary-filled) {
      background: var(--color-brand-primary);
      border-color: transparent;
      color: #ffffff;
      border-radius: 999px;
    }
  }

  /* OleDinero: bg-gradient-inverse uses primary color background */
  &.bg-gradient-inverse {
    background: var(--color-brand-primary);
  }
}

/*@media (width >=1024px) {
  .faqs-section {
    &.hero-image-full {
      & .container__content {
        & .container-col-img {
          & img {
            margin-top: 0%;
            max-width: 80%;
          }
        }
      }
    }
  }
}*/

/* Ensure section-footer-buttons is left-aligned for FAQ section */
.faqs-section .section-footer-buttons {
  text-align: left;
}

/* ============================================
   Brand-specific FAQ Section Styles
   ============================================ */

/* OleDinero FAQ Section */
.faqs-section.faqs-section--oledinero {
  background-color: #022d8e !important;

  /* Title styling - white text */
  & h2 {
    color: #ffffff !important;
  }

  /* FAQ List styling */
  & .faq-list {

    /* Question text - white */
    & .faq-list__question {
      color: #ffffff !important;

      &:hover {
        color: #d7ff7b !important;
      }
    }

    /* Icon - yellow lime */
    & .faq-list__icon {
      color: #d7ff7b !important;
    }

    /* Answer text - white */
    & .faq-list__answer {
      color: #ffffff !important;
    }
  }

  /* Button styling - transparent bg with yellow-lime border */
  & .section-footer-buttons .btn {
    background-color: transparent !important;
    border: 2px solid #d7ff7b !important;
    color: #ffffff !important;
    border-radius: 40px 40px 40px 0 !important;
    font-weight: 500;
    padding: 12px 25px;

    &:hover {
      background-color: rgba(215, 255, 123, 0.1) !important;
    }
  }
}

/* Credimoney FAQ Section */
.faqs-section.faqs-section--credimoney {
  background-color: rgb(241, 241, 241) !important;

  & h2 {
    color: #2e1047 !important;
    font-weight: 300 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #2e1047 !important;
    }

    & .faq-list__icon {
      color: #2e1047 !important;
    }

    & .faq-list__answer {
      color: #2e1047 !important;
    }
  }

  /* Button styling - light cyan background with dark purple text */
  & .section-footer-buttons .btn {
    background-color: #c0e5eb !important;
    border: none !important;
    color: #2e1047 !important;
    border-radius: 40px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: #a8d8e0 !important;
    }
  }
}

/* Crediator FAQ Section */
.faqs-section.faqs-section--crediator {
  background-color: rgb(242, 242, 242) !important;

  &.hero-image-full .container__content .container-col-img img {
    max-width: 100%;
  }

  & h2 {
    color: #333333 !important;
    font-family: "Manrope", sans-serif !important;
    font-weight: 800 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #333333 !important;
      font-family: "Manrope", sans-serif !important;
    }

    & .faq-list__icon {
      color: #f55f99 !important;
    }

    & .faq-list__answer {
      color: #333333 !important;
      font-family: "Manrope", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #f2d5e0 !important;
    border: none !important;
    color: #333333 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: #e8c0cf !important;
    }
  }
}

/* Credifix FAQ Section */
.faqs-section.faqs-section--credifix {
  background-color: #d9e4f5 !important;
  background-image: url('/images/bg/bg-header-2.png') !important;
  background-size: cover !important;
  background-position: center !important;

  & h2 {
    color: #182d52 !important;
    font-family: "Roboto", sans-serif !important;
    font-weight: 300 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #182d52 !important;
      font-family: "Roboto", sans-serif !important;
    }

    & .faq-list__icon {
      color: #ff0086 !important;
    }

    & .faq-list__answer {
      color: #182d52 !important;
      font-family: "Roboto", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #96b4e6 !important;
    border: none !important;
    color: #182d52 !important;
    border-radius: 10px !important;
    font-weight: 500;
    padding: 12px 25px;

    &:hover {
      background-color: #7ea2db !important;
    }
  }
}

/* Crediscore FAQ Section */
.faqs-section.faqs-section--crediscore {
  background-color: #ffffff !important;
  background-image: url('/images/bg/bg-crediscore.png') !important;
  background-size: cover !important;
  background-position: center !important;

  & h2 {
    color: #000000 !important;
    font-family: "Open Sans", sans-serif !important;
    font-weight: 700 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #000000 !important;
      font-family: "Open Sans", sans-serif !important;
    }

    & .faq-list__icon {
      color: #907ee8 !important;
    }

    & .faq-list__answer {
      color: #000000 !important;
      font-family: "Open Sans", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #907ee8 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: #7a68d0 !important;
    }
  }
}

/* Creditando FAQ Section */
.faqs-section.faqs-section--creditando {
  background-color: #ddecee !important;

  & h2 {
    color: #002449 !important;
    font-family: "Manrope", sans-serif !important;
    font-weight: 800 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #002449 !important;
      font-family: "Manrope", sans-serif !important;
    }

    & .faq-list__icon {
      color: #002449 !important;
    }

    & .faq-list__answer {
      color: #002449 !important;
      font-family: "Manrope", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: transparent !important;
    border: 2px solid #002449 !important;
    color: #002449 !important;
    border-radius: 0px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: #002449 !important;
      color: #ffffff !important;
    }
  }
}

/* Crediticio FAQ Section */
.faqs-section.faqs-section--crediticio {
  background-image: url('/images/bg/bg-crediticio.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  & h2 {
    color: #000000 !important;
    font-family: "Open Sans", sans-serif !important;
    font-weight: 700 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #000000 !important;
      font-family: "Open Sans", sans-serif !important;
    }

    & .faq-list__icon {
      color: #13233a !important;
    }

    & .faq-list__answer {
      color: #000000 !important;
      font-family: "Open Sans", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #13233a !important;
    border: none !important;
    color: #ffa573 !important;
    border-radius: 40px !important;
    font-weight: 600;
    padding: 12px 25px;

    &:hover {
      background-color: #0d1829 !important;
    }
  }
}

/* Creditozas FAQ Section */
.faqs-section.faqs-section--creditozas {
  background-color: rgba(229, 234, 234, 0.5) !important;

  & h2 {
    color: #000000 !important;
    font-family: "Manrope", sans-serif !important;
    font-weight: 800 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #000000 !important;
      font-family: "Manrope", sans-serif !important;
    }

    & .faq-list__icon {
      color: #000000 !important;
    }

    & .faq-list__answer {
      color: #000000 !important;
      font-family: "Manrope", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #000000 !important;
    border: none !important;
    color: #96b4e6 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: #333333 !important;
    }
  }
}

/* Credizoom FAQ Section */
.faqs-section.faqs-section--credizoom {
  background-color: #f4f8f9 !important;

  & h2 {
    color: #000000 !important;
    font-family: "AdobeClean", sans-serif !important;
    font-weight: 500 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #000000 !important;
      font-family: "AdobeClean", sans-serif !important;
    }

    & .faq-list__icon {
      color: #4eb5a4 !important;
    }

    & .faq-list__answer {
      color: #000000 !important;
      font-family: "AdobeClean", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #000000 !important;
    border: none !important;
    color: #4eb5a4 !important;
    border-radius: 999px !important;
    font-weight: 500;
    padding: 12px 25px;

    &:hover {
      background-color: #333333 !important;
    }
  }
}

/* Mastercredi FAQ Section */
.faqs-section.faqs-section--mastercredi {
  background-color: #f7f9fa !important;

  & h2 {
    color: #1a1a1a !important;
    font-family: "Coolvetica", sans-serif !important;
    font-size: 39.6px !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 11.52px;
  }

  & .row {
    justify-content: center;
  }

  &.hero-image-full .container__content .container-col-img {
    place-items: center;
  }

  & .faq-list {
    & .faq-list__question {
      color: #1a1a1a !important;
      font-family: "AdobeClean", sans-serif !important;
    }

    & .faq-list__icon {
      color: #1a1a1a !important;
    }

    & .faq-list__answer {
      color: #1a1a1a !important;
      font-family: "AdobeClean", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #1a1a1a !important;
    border: none !important;
    color: #e2e8ed !important;
    border-radius: 10px !important;
    font-weight: 600;
    padding: 12px 25px;

    &:hover {
      background-color: #333333 !important;
    }
  }
}

/* Crediahora FAQ Section */
.faqs-section.faqs-section--crediahora {
  background-color: #f5f5f5 !important;

  & h2 {
    color: #1d1d1b !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #1d1d1b !important;
      font-family: "Montserrat", sans-serif !important;
    }

    & .faq-list__icon {
      color: #95c11f !important;
    }

    & .faq-list__answer {
      color: #1d1d1b !important;
      font-family: "Montserrat", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #1d1d1b !important;
    border: none !important;
    color: #f5f5f5 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: #000000 !important;
    }
  }
}

/* CreditoAmigo FAQ Section */
.faqs-section.faqs-section--creditoamigo {
  background-color: #ffffff !important;

  & h2 {
    color: #0000ff !important;
    font-family: Seitu, sans-serif !important;
    font-weight: 500 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #000000 !important;
      font-family: Seitu, sans-serif !important;
    }

    & .faq-list__icon {
      color: #0000ff !important;
    }

    & .faq-list__answer {
      color: #000000 !important;
      font-family: Seitu, sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #0000ff !important;
    border: 2px solid #0000ff !important;
    color: #ffffff !important;
    border-radius: 40px !important;
    font-weight: 400;
    padding: 12px 25px;

    &:hover {
      background-color: rgb(0, 0, 200) !important;
      border-color: rgb(0, 0, 200) !important;
    }
  }
}

/* CrediCheck FAQ Section */
.faqs-section.faqs-section--credicheck {
  background-color: #ffffff !important;

  & h2 {
    color: #76bc74 !important;
    font-family: Funnel Display, sans-serif !important;
    font-weight: 500 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #000000 !important;
      font-family: Funnel Display, sans-serif !important;
    }

    & .faq-list__icon {
      color: #76bc74 !important;
    }

    & .faq-list__answer {
      color: #000000 !important;
      font-family: Funnel Display, sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #76bc74 !important;
    border: 2px solid #76bc74 !important;
    color: #ffffff !important;
    border-radius: 40px !important;
    font-weight: 400;
    padding: 12px 25px;

    &:hover {
      background-color: #76bc74 !important;
      border-color: #76bc74 !important;
    }
  }
}

/* CreditoClic FAQ Section */
.faqs-section.faqs-section--creditoclic {
  background-color: #eaeeef !important;

  & h2 {
    color: #073034 !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #073034 !important;
      font-family: "Montserrat", sans-serif !important;
    }

    & .faq-list__icon {
      color: #7ac4ae !important;
    }

    & .faq-list__answer {
      color: #073034 !important;
      font-family: "Montserrat", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: transparent !important;
    border: 2px solid #073034 !important;
    color: #073034 !important;
    border-radius: 999px !important;
    font-weight: 500;
    padding: 12px 25px;

    &:hover {
      background-color: #073034 !important;
      color: #ffffff !important;
    }
  }
}

/* CreditoPRO FAQ Section */
.faqs-section.faqs-section--creditopro {
  background-color: #f3f3f3 !important;

  & h2 {
    color: #333333 !important;
    font-family: "Open Sans", sans-serif !important;
    font-weight: 800 !important;
  }

  & .faq-list {
    & .faq-list__question {
      color: #333333 !important;
      font-family: "Open Sans", sans-serif !important;
    }

    & .faq-list__icon {
      color: #4570ae !important;
    }

    & .faq-list__answer {
      color: #333333 !important;
      font-family: "Open Sans", sans-serif !important;
    }
  }

  & .section-footer-buttons .btn {
    background-color: #333333 !important;
    border: none !important;
    color: #f3f3f3 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 12px 25px;

    &:hover {
      background-color: rgb(30, 30, 30) !important;
    }
  }
}


/* === styles.css === */
/**
 * SectionMap Component Styles
 *
 * Theme-driven map section component.
 * Features location information and embedded Google Maps.
 */

.container-map {
  background: var(--color-brand-secondary);
  & .container__content{
    width: 80rem;
  }

  @media (width < 768px) {
    & .container__content {
      width: 100%;
      max-width: 100%;
    }
  }
  
  & .row {
    display: flex;
    gap: 0;
    flex-direction: column-reverse;
    margin:0 auto;
    &>.col {
      flex: 1 1 0%;
    }

    & .section-column__column {
      &:first-child {
        justify-content: center;
      }
    }
  }

  & .container-map__content {
    width: 100%;
    /* height: 100%; */
    margin: 0 auto;
    /* padding-top: 50px;
    padding-bottom: 50px; */
    display: grid;
    place-items: center;

    color: var(--text-primary);

    & svg {
      color: var(--text-primary);
    }

    & dl {
      & dt {
        &:not(:first-child) {
          margin-top: 50px;
        }

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
        font-size: var(--text-lg-font-size);
        line-height: var(--text-lg-line-height);
        font-weight: var(--font-weight-medium);
      }

      & dd {
        font-size: var(--text-base-font-size);
        line-height: 1.8;
        text-align: center;
        margin: 0;
      }
    }
  }

  & .container-map__telf {
    color: var(--text-primary);
  }

  & .container-map__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .container-map__iframe {
    border: 0;
  }
}

/* Brand-specific color overrides */
.container-map--credimoney {
  background: rgb(192, 229, 235);

  & .container-map__content {
    color: rgb(46, 16, 71);

    & svg {
      color: rgb(46, 16, 71);
    }
  }

  & .container-map__telf {
    color: rgb(46, 16, 71);
  }
}

.container-map--crediahora {
  background: rgb(245, 245, 245);

  & .container-map__content {
    color: rgb(29, 29, 27);

    & svg {
      color: rgb(29, 29, 27);
    }
  }

  & .container-map__telf {
    color: rgb(29, 29, 27);
  }
}

.container-map--oledinero {
  background: rgb(215, 255, 123);

  & .container-map__content {
    color: rgb(2, 45, 142);

    & svg {
      color: rgb(2, 45, 142);
    }
  }

  & .container-map__telf {
    color: rgb(2, 45, 142);
  }
}

.container-map--creditoamigo {
  background: #202c53;

  & .container-map__content {
    color: #ffffff;

    & svg {
      color: #ffffff;
    }
  }

  & .container-map__telf {
    color: #ffffff;
  }
}

.container-map--credicheck {
  background: #b9dab2;

  & .container-map__content {
    color: #ffffff;

    & svg {
      color: #ffffff;
    }
  }

  & .container-map__telf {
    color: #ffffff;
  }
}

.container-map--creditoclic {
  background: #eaeeef;

  & .container-map__content {
    color: #073034;

    & svg {
      color: #073034;
    }
  }

  & .container-map__telf {
    color: #073034;
  }
}

.container-map--creditopro {
  background: #f3f3f3;

  & .container-map__content {
    color: #333333;

    & svg {
      color: #333333;
    }
  }

  & .container-map__telf {
    color: #333333;
  }
}

.container-map--crediator {
  background: #f2f2f2;

  & .container-map__content {
    color: #333333;

    & svg {
      color: #333333;
    }
  }

  & .container-map__telf {
    color: #333333;
  }
}

.container-map--credifix {

  & .container-map__content {
    color: var(--color-brand-secondaryLight);

    & svg {
      color: var(--color-brand-secondaryLight);
    }
  }

  & .container-map__telf {
    color: var(--color-brand-secondaryLight);
  }
}

.container-map--crediscore {
  background: var(--color-brand-primaryLight);

  & .container-map__content {
    color: #000000;

    & svg {
      color: #000000;
    }
  }

  & .container-map__telf {
    color: #000000;
  }
}

.container-map--creditando {
  background: #ddecee;

  & .container-map__content {
    color: #002449;

    & svg {
      color: #002449;
    }
  }

  & .container-map__telf {
    color: #002449;
  }
}

.container-map--crediticio {
  background: #ffa573;

  & .container-map__content {
    color: #000000;

    & svg {
      color: #000000;
    }
  }

  & .container-map__telf {
    color: #000000;
  }
}

.container-map--creditozas {
  background: #e5eaea;

  & .container-map__content {
    color: #000000;

    & svg {
      color: #000000;
    }
  }

  & .container-map__telf {
    color: #000000;
  }
}

.container-map--credizoom {
  background: #f4f8f9;

  & .container-map__content {
    color: #000000;

    & svg {
      color: #000000;
    }
  }

  & .container-map__telf {
    color: #000000;
  }
}

.container-map--mastercredi {
  background: #f7f9fa;

  & .container-map__content {
    color: #1a1a1a;

    & svg {
      color: #1a1a1a;
    }
  }

  & .container-map__telf {
    color: #1a1a1a;
  }
}

.container-map--credisolve {
  background: #f7f9fa;

  /* & .container-map__content {
    color: #1a1a1a;

    & svg {
      color: #1a1a1a;
    }
  }

  & .container-map__telf {
    color: #1a1a1a;
  } */
}

/* Credihope: was missing entirely, so this fell back to the base rule
   (background: var(--color-brand-secondary), i.e. Smoke Black) with text/
   icon color also defaulting dark — dark-on-near-black, making the location
   pin and phone icons disappear entirely. */
.container-map--credihope {
  background: #f4f4ef;

  & .container-map__content {
    color: #252827;

    & svg {
      color: #f9b233;
    }
  }

  & .container-map__telf {
    color: #252827;
  }

  /* Make the map noticeably larger, closer to the reference layout */
  & .container-map__image {
    min-height: 460px;
  }
}

@media (width >=768px) {
  .container-map--credihope .container-map__image {
    min-height: 600px;
  }

  /* The base .row rule only gives flex:1 to ".col" (the text side); the map
     column uses ".col-img" instead, so it was never included and stayed at
     its shrink-to-fit default width — much narrower than the text column.
     Give it an equal share so the map is as wide as in the reference. */
  .container-map--credihope .row > .col-img {
    flex: 1 1 0%;
  }
}

/* The real width culprit: every ".container__content" is capped at 80rem
   and centered (see Container/styles.css), which on wide screens leaves
   big empty gutters on both sides — that's why the map still looked
   narrow relative to the viewport even at a 50/50 split. The reference
   lets this section run edge-to-edge, so remove the cap for Credihope
   only and give the text column its own left padding back. */
@media (width >= 1024px) {
  /* Container/styles.css sets --container-content-max-width via
     ":root .container .container__content" (specificity 0,3,0) inside this
     same breakpoint, which beat our lower-specificity variable override.
     Setting max-width/width directly (verified in devtools) sidesteps that
     entirely. */
  .container-map--credihope .container__content {
    max-width: 100% !important;
    width: 100%;
    --container-content-padding-horizontal: 0 !important;
  }

  .container-map--credihope .container-col {
    padding-left: 60px !important;
  }
}

/* Mobile/tablet fix: the base rule above (.container-map .container__content
   { width: 80rem }) is unconditional, with no media-query gate, so it applies
   below 1024px too. At this app's actual root font-size (14.4px) that's
   width:1152px on every brand at every viewport. Below 1024px the viewport is
   narrower than 1152px, so the box becomes over-constrained: width is fixed
   and one margin resolves to auto, which absorbs the overflow as a large
   *negative* margin (verified live: margin-right:-546px at a 606px viewport,
   606+546=1152) — visually this drags the whole section off to the right
   with a blank gutter on the left. Force width:100% for credihope only, same
   proven pattern as the >=1024px override above. */
@media (width < 1024px) {
  .container-map--credihope .container__content {
    width: 100%;
    max-width: 100%;
  }
}

@media (width >= 1440px) {
  .container-map--credihope .container-col {
    padding-left: 120px !important;
  }
}

@media (width >=768px) {
  .container-map {
    & .row {
      flex-direction: row;
      width: 100%;

      &>.col {
        flex: 1 1 0%;
      }
    }

    & .container-map__content {

      & dl {
        width: 100%;
        & dt {
          align-items: start;
          justify-content: center;
        }

        & dd {
          text-align: left;
        }
      }
    }
  }
}



/* === styles.css === */
/**
 * SectionNews Component Styles
 *
 * Theme-driven styles for news/blog articles section.
 * Supports brand-specific customization via CSS custom properties.
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Card title color, text color
 * - --color-brand-secondary: CTA color, badge background
 * - --color-text-primary: Card text color
 * - --font-weight-bold: Bold font weight for titles
 * - --font-weight-regular: Regular font weight
 */

:root {
  & .section-news {
    --section-news-padding-vertical: 50px;
    --section-news-padding-horizontal: 30px;
    --section-news-column-flex-gap: 25px;
    --section-news-card-bg: #ffffff;
    --section-news-card-border-radius: 12px;
    --section-news-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --section-news-card-title-color: var(--color-brand-primary);
    --section-news-card-text-color: var(--color-text-primary);
    --section-news-card-cta-color: var(--color-brand-secondary);
    --section-news-badge-bg: var(--color-brand-secondary);
    --section-news-badge-color: #ffffff;
  }
}

@media (width >=1440px) {
  :root {
    & .section-news {
      --section-news-padding-vertical: 75px;
      --section-news-padding-horizontal: 50px;
      --section-news-column-flex-gap: 50px;
    }
  }
}

.section-news {
  padding: var(--section-news-padding-vertical) var(--section-news-padding-horizontal);
  display: flex;
  flex-direction: column;
  gap: var(--section-news-column-flex-gap);

  & .section__title {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--section-news-card-title-color);
    margin: 0 0 20px 0;
    text-align: center;

    & small {
      display: block;
      font-size: 1rem;
      font-weight: var(--font-weight-regular);
      color: var(--section-news-card-text-color);
      margin-bottom: 10px;
    }

    & .section__title-logo {
      display: inline-block;
      height: 1em;
      vertical-align: middle;
      margin-left: 0.2em;
    }
  }
}

.section-news__carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.section-news__swiper {
  padding-bottom: 70px;
  /* Space for pagination */
}

/* Ensure equal height slides */
.section-news__swiper .swiper-wrapper {
  align-items: stretch;
}

.section-news__swiper .swiper-slide {
  height: auto;
  display: flex;
}

.section-news__loading,
.section-news__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--section-news-card-text-color);
  font-size: 1.1rem;
}

/* Navigation buttons */
.section-news__prev,
.section-news__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  background: transparent;
  color: rgb(204, 204, 204);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.section-news__prev {
  left: -60px;
}

.section-news__next {
  right: -60px;
}

.section-news__prev svg,
.section-news__next svg {
  width: 24px;
  height: 48px;
  fill: currentColor;
}

/* Pagination */
.section-news__pagination {
  text-align: center;
  margin-top: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: auto;
}

/* Swiper pagination bullets - using descendant selector */
.section-news__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 18px !important;
  height: 18px !important;
  background: rgb(204, 204, 204) !important;
  opacity: 1 !important;
  margin: 0 8px !important;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.section-news__pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
  background: rgb(100, 100, 100) !important;
  transform: scale(1.1);
}

/* Article Card */
.news-card {
  background: var(--section-news-card-bg);
  border-radius: var(--section-news-card-border-radius);
  box-shadow: var(--section-news-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.news-card__imageWrapper {
  position: relative;
  width: 100%;
  padding-top: 60%;
  /* 5:3 aspect ratio */
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  & img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.news-card__badge {
  position: absolute;
  top: 20px;
  right: 25px;
  background: var(--section-news-badge-bg);
  color: var(--section-news-badge-color);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 17.28px;
  font-weight: 400;
  line-height: 24.192px;
  z-index: 1;
}

.news-card__content {
  padding: 30px 30px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: unset;

  & h4 {
    margin: 0;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;

    & a {
      color: var(--section-news-card-title-color);
      text-decoration: none;
    }
  }

  & p {
    margin: 0;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: var(--section-news-card-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.news-card__footer {
  padding: 0 24px 24px 24px;
}

.news-card__cta {
  display: inline-block;
  color: var(--section-news-card-cta-color);
  font-weight: 700;
  text-decoration: none;
  font-size: 14.4px;
  line-height: 20.16px;
}

/* Grid layout */
.section-news__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (width >=768px) {
  .section-news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >=1024px) {
  .section-news__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section-news__grid-item {
  display: flex;
}

/* Hide carousel controls and title in grid layout */
.section-news--grid .section-news__prev,
.section-news--grid .section-news__next,
.section-news--grid .section-news__pagination,
.section-news--grid .section__title {
  display: none;
}

/* Responsive adjustments */
@media (width < 768px) {

  .section-news__prev,
  .section-news__next {
    display: none;
  }
}

/* Brand-specific navigation arrow colors */
.section-news[data-brand="credimoney"] .section-news__prev,
.section-news[data-brand="credimoney"] .section-news__next {
  color: rgb(204, 204, 204);
}

.section-news[data-brand="crediahora"] .section-news__prev,
.section-news[data-brand="crediahora"] .section-news__next {
  color: rgb(149, 193, 31);
}

.section-news[data-brand="oledinero"] .section-news__prev,
.section-news[data-brand="oledinero"] .section-news__next {
  color: rgb(3, 45, 143);
}

.section-news[data-brand="creditoclic"] .section-news__prev,
.section-news[data-brand="creditoclic"] .section-news__next {
  color: rgb(122, 196, 174);
}

.section-news[data-brand="creditoamigo"] .section-news__prev,
.section-news[data-brand="creditoamigo"] .section-news__next {
  color: rgb(0, 128, 0);
}

/* Brand-specific styles */

/* Credimoney */
.section-news[data-brand="credimoney"] {
  & .section__title {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 39.6px;
    font-weight: 300;
    line-height: 39.6px;
    color: rgb(46, 16, 71);

    & small {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 24.48px;
      font-weight: 400;
      line-height: 24.48px;
      color: rgb(216, 199, 255);
    }
  }

  & .news-card__content h4 a {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: rgb(46, 16, 71);
  }

  & .news-card__content p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: rgb(46, 16, 71);
  }

  & .news-card__cta {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: rgb(46, 16, 71);
  }

  & .news-card__badge {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 24.192px;
    color: rgb(46, 16, 71);
    background: rgb(248, 248, 146);
    border-radius: 30px;
    padding: 8px 10px 5px;
  }
}

/* Crediahora */
.section-news[data-brand="crediahora"] {
  & .section__title {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 43.2px;
    color: rgb(29, 29, 27);

    & small {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: rgb(29, 29, 27);
    }
  }

  & .news-card__content h4 a {
    font-family: "Montserrat", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: rgb(149, 193, 31);
  }

  & .news-card__content p {
    font-family: "Montserrat", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: rgb(29, 29, 27);
  }

  & .news-card__cta {
    font-family: "Montserrat", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: rgb(29, 29, 27);
  }

  & .news-card__badge {
    font-family: "Montserrat", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: rgb(29, 29, 27);
    background: rgb(149, 193, 31);
    border-radius: 8px;
    padding: 5px 20px;
  }
}

/* OleDinero */
.section-news[data-brand="oledinero"] {
  & .section__title {
    font-family: "Poppins", sans-serif;
    font-size: 43.2px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(3, 45, 143);
    background: url(/images/bg/h2-bg.png) no-repeat center;
    background-size: contain;

    & small {
      font-family: "Poppins", sans-serif;
      font-size: 24.48px;
      font-weight: 400;
      line-height: 24.48px;
      color: rgb(56, 117, 252);
    }
  }

  & .news-card__content h4 a {
    font-family: "Poppins", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: rgb(3, 45, 143);
  }

  & .news-card__content p {
    font-family: "Poppins", sans-serif;
    font-size: 15.84px;
    font-weight: 500;
    line-height: 22.176px;
    color: rgb(2, 45, 142);
  }

  & .news-card__cta {
    font-family: "Poppins", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
    line-height: 20.16px;
    color: rgb(3, 45, 143);
  }

  & .news-card__badge {
    font-family: "Poppins", sans-serif;
    font-size: 17.28px;
    font-weight: 500;
    line-height: 24.192px;
    color: rgb(255, 255, 255);
    background: rgb(3, 45, 143);
    border-radius: 30px;
    padding: 8px 20px 5px;
    top: 45px;
    right: 45px;
    left: auto;
  }

  & .news-card__imageWrapper {
    margin: 30px 30px 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 280px;
    border-top-left-radius: var(--section-news-card-border-radius);
    border-top-right-radius: var(--section-news-card-border-radius);
  }
}

/* CreditoPro */
.section-news[data-brand="creditopro"] {
  & .section__title {
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(0, 0, 0);

    & small {
      font-family: "Inter", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: rgb(0, 0, 0);
    }

  }

  & .news-card {
    text-align: center;
  }

  & .news-card__imageWrapper {
    width: 320px;
    height: 200px;
    padding-top: 0;
    border-radius: 100px;
    /* half of height for semicircle on sides */
    margin: auto;
    margin-top: 30px;
    border-bottom: none;
    overflow: hidden;

    & img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 100px;
    }
  }

  & .news-card__content {
    text-align: center;
    padding: 20px 30px 60px;
  }

  & .news-card__content h4 a {
    font-family: "Inter", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: rgb(0, 0, 0);
  }

  & .news-card__content p {
    font-family: "Inter", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: rgb(0, 0, 0);
  }

  & .news-card__cta {
    font-family: "Inter", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: rgb(0, 102, 255);
  }

  & .news-card__badge {
    font-family: "Inter", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 24.192px;
    color: rgb(255, 255, 255);
    background: rgb(0, 102, 255);
    border-radius: 30px;
    padding: 8px 20px 5px;
  }

  & .news-card__footer {
    text-align: center;
  }
}

/* CreditoClic */
.section-news[data-brand="creditoclic"] {
  & .section__title {
    font-family: "Harabara", sans-serif;
    font-size: 30.24px;
    font-weight: 600;
    line-height: 36.288px;
    color: rgb(7, 48, 52);

    & small {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: rgb(7, 48, 52);
    }
  }

  & .news-card__content h4 a {
    font-family: "Montserrat", sans-serif;
    font-size: 18.72px;
    font-weight: 600;
    line-height: 26.208px;
    color: rgb(122, 196, 174);
  }

  & .news-card__content p {
    font-family: "Montserrat", sans-serif;
    font-size: 15.84px;
    font-weight: 500;
    line-height: 22.176px;
    color: rgb(7, 48, 52);
  }

  & .news-card__cta {
    font-family: "Montserrat", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
    line-height: 20.16px;
    color: rgb(122, 196, 174);
  }

  & .news-card__badge {
    font-family: "Montserrat", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
    line-height: 30px;
    color: rgb(255, 255, 255);
    background: rgb(175, 159, 205);
    border-radius: 5px 5px 0px 0px;
    padding: 5px 20px;
  }
}

/* CreditoAmigo */
.section-news[data-brand="creditoamigo"] {
  & .section__title {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(29, 29, 27);

    & small {
      font-family: "Montserrat", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: rgb(29, 29, 27);
    }
  }

  & .news-card__content h4 a {
    font-family: "Montserrat", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: rgb(0, 128, 0);
  }

  & .news-card__content p {
    font-family: "Montserrat", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: rgb(29, 29, 27);
  }

  & .news-card__cta {
    font-family: "Montserrat", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: rgb(0, 128, 0);
  }

  & .news-card__badge {
    font-family: "Montserrat", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: rgb(255, 255, 255);
    background: rgb(0, 128, 0);
    border-radius: 8px;
    padding: 5px 20px;
  }
}

/* Credicheck */
.section-news[data-brand="credicheck"] {
  & .section__title {
    font-family: "Funnel Display", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    color: rgb(29, 29, 27);

    & small {
      font-family: "Funnel Display", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: rgb(29, 29, 27);
    }
  }

  & .news-card__content h4 a {
    font-family: "Funnel Display", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #76bc74;
  }

  & .news-card__content p {
    font-family: "Funnel Display", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: rgb(29, 29, 27);
  }

  & .news-card__cta {
    font-family: "Funnel Display", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #76bc74;
  }

  & .news-card__badge {
    font-family: "Funnel Display", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: rgb(255, 255, 255);
    background: #76bc74;
    border-radius: 8px;
    padding: 5px 20px;
  }
}

/* Crediator */
.section-news[data-brand="crediator"] {

  & .section-news__prev,
  & .section-news__next {
    color: #f55f99;
  }

  & .section__title {
    font-family: "Manrope", sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 43.2px;
    color: #333333;

    & small {
      font-family: "Manrope", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #333333;
    }
  }

  & .news-card__content h4 a {
    font-family: "Manrope", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #f55f99;
  }

  & .news-card__content p {
    font-family: "Manrope", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #333333;
  }

  & .news-card__cta {
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #f55f99;
  }

  & .news-card__badge {
    font-family: "Manrope", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
    background: #f55f99;
    border-radius: 30px;
    padding: 5px 20px;
  }
}

/* Credifix */
.section-news[data-brand="credifix"] {

  & .section-news__prev,
  & .section-news__next {
    color: #ff0086;
  }

  & .section__title {
    font-family: "Roboto", sans-serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 43.2px;
    color: #182d52;

    & small {
      font-family: "Roboto", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #182d52;
    }
  }

  & .news-card__content h4 a {
    font-family: "Roboto", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #182d52;
  }

  & .news-card__content p {
    font-family: "Roboto", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #182d52;
  }

  & .news-card__cta {
    font-family: "Roboto", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #ff0086;
  }

  & .news-card__badge {
    font-family: "Roboto", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
    background: #ff0086;
    border-radius: 30px;
    padding: 5px 20px;
  }
}

/* Crediscore */
.section-news[data-brand="crediscore"] {

  & .section-news__prev,
  & .section-news__next {
    color: #907ee8;
  }

  & .section__title {
    font-family: "Open Sans", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    color: #000000;

    & small {
      font-family: "Open Sans", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #000000;
    }
  }

  & .news-card__content h4 a {
    font-family: "Open Sans", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #000000;
  }

  & .news-card__content p {
    font-family: "Open Sans", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #000000;
  }

  & .news-card__cta {
    font-family: "Open Sans", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #907ee8;
  }

  & .news-card__badge {
    font-family: "Open Sans", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
    background: #907ee8;
    border-radius: 30px;
    padding: 5px 20px;
  }
}

/* Creditando */
.section-news[data-brand="creditando"] {

  & .section-news__prev,
  & .section-news__next {
    color: #002449;
  }

  & .section__title {
    font-family: "Manrope", sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 43.2px;
    color: #002449;

    & small {
      font-family: "Manrope", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #002449;
    }
  }

  & .news-card__content h4 a {
    font-family: "Manrope", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #002449;
  }

  & .news-card__content p {
    font-family: "Manrope", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #002449;
  }

  & .news-card__cta {
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #002449;
  }

  & .news-card__badge {
    font-family: "Manrope", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #002449;
    background: #c6fd00;
    border-radius: 30px;
    padding: 5px 20px;
  }
}

/* Crediticio */
.section-news[data-brand="crediticio"] {

  & .section-news__prev,
  & .section-news__next {
    color: #13233a;
  }

  & .section__title {
    font-family: "Open Sans", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    color: #13233a;

    & small {
      font-family: "Open Sans", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #000000;
    }
  }

  & .news-card__content h4 a {
    font-family: "Open Sans", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #13233a;
  }

  & .news-card__content p {
    font-family: "Open Sans", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #000000;
  }

  & .news-card__cta {
    font-family: "Open Sans", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #13233a;
  }

  & .news-card__badge {
    font-family: "Open Sans", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #13233a;
    background: #ffa573;
    border-radius: 30px;
    padding: 5px 20px;
  }
}

/* Creditozas */
.section-news[data-brand="creditozas"] {

  & .section-news__prev,
  & .section-news__next {
    color: #000000;
  }

  & .section__title {
    font-family: "Manrope", sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 43.2px;
    color: #000000;

    & small {
      font-family: "Manrope", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #000000;
    }
  }

  & .news-card__content h4 a {
    font-family: "Manrope", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #000000;
  }

  & .news-card__content p {
    font-family: "Manrope", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #000000;
  }

  & .news-card__cta {
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #000000;
  }

  & .news-card__badge {
    font-family: "Manrope", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #000000;
    background: #96b4e6;
    border-radius: 30px;
    padding: 5px 20px;
  }
}

/* Credizoom */
.section-news[data-brand="credizoom"] {

  & .section-news__prev,
  & .section-news__next {
    color: #4eb5a4;
  }

  & .section__title {
    font-family: "AdobeClean", sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 43.2px;
    color: #000000;

    & small {
      font-family: "AdobeClean", sans-serif;
      font-size: 18.72px;
      font-weight: 400;
      line-height: 22.464px;
      color: #000000;
    }
  }

  & .news-card__content h4 a {
    font-family: "AdobeClean", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #000000;
  }

  & .news-card__content p {
    font-family: "AdobeClean", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #000000;
  }

  & .news-card__cta {
    font-family: "AdobeClean", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #4eb5a4;
  }

  & .news-card__badge {
    font-family: "AdobeClean", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
    background: #4eb5a4;
    border-radius: 30px;
    padding: 5px 20px;
  }

  & .news-card {
    border: 1px solid #000000;
    flex: 1 1 0;
  }
}

/* Mastercredi */
.section-news[data-brand="mastercredi"] {

  & .section-news__prev,
  & .section-news__next {
    color: #1a1a1a;
  }

  & .section__title {
    font-family: "Coolvetica", sans-serif;
    font-size: 43.2px;
    font-weight: 700;
    line-height: 43.2px;
    color: #1a1a1a;

    & small {
      font-family: "AdobeClean", sans-serif;
      font-size: 24.48px;
      font-weight: 400;
      line-height: 24.48px;
      color: #1a1a1a;
    }
  }

  & .news-card__content h4 a {
    font-family: "AdobeClean", sans-serif;
    font-size: 18.72px;
    font-weight: 700;
    line-height: 26.208px;
    color: #1a1a1a;
  }

  & .news-card__content p {
    font-family: "AdobeClean", sans-serif;
    font-size: 15.84px;
    font-weight: 400;
    line-height: 22.176px;
    color: #1a1a1a;
  }

  & .news-card__cta {
    font-family: "AdobeClean", sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 20.16px;
    color: #1a1a1a;
  }

  /* #7042: Badge - square, bg #93bcfc */
  & .news-card__badge {
    font-family: "AdobeClean", sans-serif;
    font-size: 17.28px;
    font-weight: 400;
    line-height: 30px;
    color: #1a1a1a;
    background: #93bcfc;
    border-radius: 10px;
    padding: 5px 20px;
  }

  & .news-card__imageWrapper {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 280px;
    border-top-left-radius: var(--section-news-card-border-radius);
    border-top-right-radius: var(--section-news-card-border-radius);
  }
  & .section__title-logo {
    width: 150px;
    height: 17.4px;
  }
}


/* === styles.css === */
/**
 * SectionPasoAPaso Component Styles
 *
 * Theme-driven step-by-step guide section with background image.
 * Different brands use different design patterns:
 * - Credimoney: span + div both have same background, creating connected pill shape
 * - Crediahora/OleDinero: separate step numbers
 */

/* Section background - light purple default, brands can override via CSS variable */
.container.container-paso-a-paso {
  background-color: var(--paso-a-paso-section-background, #f7f1f6);
  /* Section background image - only used by brands that set --paso-a-paso-background-image */
  background-image: var(--paso-a-paso-background-image, none);
  background-position: var(--paso-a-paso-content-background-position, 5% 100%);
  background-size: var(--paso-a-paso-content-background-size, auto 800px);
  background-repeat: no-repeat;
  padding: 0;
}

/* OleDinero-specific: add fondo-06.png as container background */
.container.container-paso-a-paso.oledinero-bg {
  background: url("/images/bg/fondo-06.png");
  background-position: right;
  background-size: cover;
}

/* Content styling - background image can be on content (default) or section (creditopro) */
.container.container-paso-a-paso .container__content {
  --container-content-max-width: 80rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--container-content-padding-vertical, 100px) var(--container-content-padding-horizontal, 0) var(--container-content-padding-bottom, 100px);
  padding-left: var(--paso-a-paso-padding-left, 668px);
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Background image - use content-bg-image if set, otherwise inline --background-image */
  background-image: var(--paso-a-paso-content-background-image, var(--background-image));
  background-position: var(--paso-a-paso-content-background-position, 5% 100%);
  background-size: var(--paso-a-paso-content-background-size, auto 750px);
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.container-paso-a-paso h2 {
  font-size: var(--paso-title-size);
  font-weight: var(--paso-title-weight);
  color: var(--text-color);
  text-align: center;
  margin: 0 auto;
  width: fit-content;
}

.container-paso-a-paso ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
  width: 100%;
  max-width: 740px;
}


.container-paso-a-paso li {
  display: flex;
  gap: var(--paso-a-paso-item-gap, var(--paso-li-gap, 20px));
  align-items: var(--paso-li-align-items, center);
  flex-direction: var(--paso-li-flex-direction, row);
  width: var(--paso-a-paso-item-width, fit-content);
}

/* Odd steps: left margin for alignment */
.container-paso-a-paso li:nth-child(odd) {
  margin-left: 15%;
}

/* Even steps: override number styles, flex-direction, and negative margin */
.container-paso-a-paso li:nth-child(even) {
  flex-direction: var(--paso-li-flex-direction-even, var(--paso-li-flex-direction, row));
  margin-left: -5%;  /* Negative margin to pull left */
}

/* Even step numbers: allow brand-specific overrides for background, color, and border-radius */
.container-paso-a-paso li:nth-child(even) span {
  background: var(--paso-a-paso-item-order-background-even, var(--paso-a-paso-item-order-background));
  color: var(--paso-a-paso-item-order-color-even, var(--paso-a-paso-item-order-color));
  border-radius: var(--paso-a-paso-item-order-border-radius-even, 0 200px 200px 0);
}

/* Even content boxes: allow brand-specific background and border-radius */
.container-paso-a-paso li:nth-child(even) > div {
  background-color: var(--paso-a-paso-item-background-even, var(--paso-a-paso-item-background, transparent));
  border-radius: var(--paso-a-paso-item-border-radius-even, var(--paso-a-paso-item-border-radius, 0));
  margin-left: 0;
  margin-right: var(--paso-a-paso-item-overlap-margin, 0);
}

.container-paso-a-paso li span {
  width: var(--paso-a-paso-item-order-width, var(--paso-a-paso-item-order-size, 70px));
  height: var(--paso-a-paso-item-order-height, var(--paso-a-paso-item-order-size, 70px));
  border-radius: var(--paso-a-paso-item-order-border-radius);
  border: var(--paso-a-paso-item-order-border);
  display: grid;
  place-items: center;
  color: var(--paso-a-paso-item-order-color);
  background: var(--paso-a-paso-item-order-background);
  font-size: var(--paso-a-paso-item-order-font-size);
  font-weight: var(--paso-a-paso-item-order-font-weight, var(--font-weight-semibold)) !important;
  flex-shrink: var(--paso-a-paso-item-order-flex-shrink, 0);
  line-height: var(--paso-a-paso-item-order-line-height, normal);
  box-sizing: var(--paso-a-paso-item-order-box-sizing, content-box);
  -webkit-text-fill-color: var(--paso-a-paso-item-order-text-fill);
  -webkit-text-stroke: var(--paso-a-paso-item-order-text-stroke);
  position: relative;
  z-index: 1;
}

/* Content box - Credimoney: Both span and div have background, creating connected pill shape */
.container-paso-a-paso li > div {
  padding: var(--paso-a-paso-item-padding, 30px);
  background-color: var(--paso-a-paso-item-background, transparent);
  border: var(--paso-a-paso-item-border);
  border-radius: var(--paso-a-paso-item-border-radius, 0);
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  margin-left: var(--paso-a-paso-item-overlap-margin, 0);
}

/* More specific selectors to override Container component defaults */
.container.container-paso-a-paso .container__content h3 {
  font-size: var(--paso-a-paso-item-title-font-size);
  font-weight: var(--paso-step-title-weight);
  color: var(--paso-a-paso-item-title-color, var(--text-color));
  margin: 0;
}

.container.container-paso-a-paso .container__content p {
  font-size: var(--paso-a-paso-item-text-font-size);
  font-weight: var(--paso-step-description-font-weight, 400);
  color: var(--paso-step-description-color, var(--text-color));
  margin: 0;
  line-height: var(--paso-step-description-line-height, 1.3);
}

.container-paso-a-paso footer {
  text-align: var(--paso-a-paso-footer-text-align, left);
  margin-top: var(--paso-a-paso-footer-margin-top, 30px);
  margin-left: var(--paso-a-paso-footer-margin-left, 25.8%);
}

/* Button styling for different brands */
.container-paso-a-paso .btn-extra {
  background-color: var(--color-brand-primaryLight);
  border-color: var(--color-brand-primaryLight);
  color: var(--color-brand-primary);
}

.container-paso-a-paso .btn:not(.btn-extra):not(.btn-secondary-filled):not(.btn-primary-outline) {
  background-color: var(--paso-a-paso-button-bg, #d8c7ff);
  border-color: var(--paso-a-paso-button-border, #d8c7ff);
  color: var(--paso-a-paso-button-color, #2e1047);
  border-radius: var(--paso-a-paso-button-border-radius, 40px);
}

.container-paso-a-paso .btn-secondary-filled {
  background-color: transparent;
  border: 2px solid var(--color-brand-secondary);
  color: var(--color-text-inverse);
  border-radius: 40px 40px 40px 0;
}

/* Brand-specific H2 color overrides */
.container.container-paso-a-paso[data-brand="credizoom"] h2 {
  color: #000000;
  text-transform: uppercase;
  font-size: 31.68px;
}

.container.container-paso-a-paso[data-brand="credizoom"] .container__content h3 {
  font-size: 18.72px;
  color: #000000;
  text-transform: uppercase;
}

.container.container-paso-a-paso[data-brand="credizoom"] .container__content p {
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 500;
  font-size: 16.56px;
  color: #000000;
}

.container-paso-a-paso[data-brand="credizoom"] li span {
  -webkit-text-stroke: 1px #000000;
  -webkit-text-fill-color: #4eb5a4;
  font-family: "LemonMilk", sans-serif !important;
}

.container-paso-a-paso[data-brand="credizoom"] li > div {
  border: 2px solid #000000;
  border-radius: 20px;
}

.container-paso-a-paso[data-brand="credizoom"] .btn {
  background-color: #000000 !important;
  border: 2px solid #000000 !important;
  color: #4eb5a4 !important;
  border-radius: 999px !important;
}

.container-paso-a-paso[data-brand="crediscore"] h2 {
  color: #000000;
}


/* Crediator: H2 and step titles should be dark, not pink */
.container-paso-a-paso[data-brand="crediator"] h2, .container-paso-a-paso[data-brand="crediator"] h3 {
  color: #333333;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .container.container-paso-a-paso .container__content {
    padding-left: 400px;
  }
}

@media (max-width: 992px) {
  .container.container-paso-a-paso .container__content {
    padding-left: 50px;
    padding-right: 50px;
  }

  .container-paso-a-paso {
    background-position: top right;
  }
}

@media (max-width: 768px) {
  .container.container-paso-a-paso {
    background-image: var(--background-image);
    background-position: 50% 100%;
    background-size: auto 300px;
    background-repeat: no-repeat;
  }

  .container.container-paso-a-paso .container__content {
    padding: 50px var(--body-padding-horizontal);
    padding-bottom: 350px;
    background-image: none;
  }

  .container-paso-a-paso li:nth-child(odd) {
    margin-left: 0;
    width: 100%;
  }

  .container-paso-a-paso li:nth-child(even) {
    margin-left: 0;
    width: 100%;
  }

  .container-paso-a-paso li > div {
    max-width: 100%;
  }

  .container-paso-a-paso footer {
    margin-left: 0;
  }

  /* .container-paso-a-paso li span {
    width: 50px;
    height: 50px;
    min-width: 50px;
  } */
}

/* Mastercredi */


.container.container-paso-a-paso[data-brand="mastercredi"] .container__content h3 {
  font-family: "AdobeClean", sans-serif !important;
  font-size: 18.72px;
}

.container-paso-a-paso[data-brand="mastercredi"] li span {
  font-family: "Coolvetica", sans-serif !important;
  font-size: 72px;
}

/* Credimoney — quitar border-radius en items pares */
[data-brand="credimoney"] .container-paso-a-paso li:nth-child(even) > div {
      border-radius: var(--paso-a-paso-item-border-radius, 0);
}

/* Credipay */

.container.container-paso-a-paso[data-brand="credipay"] .container__content h2 {
  color:var(--color-brand-primaryDark);
}

.container.container-paso-a-paso[data-brand="credipay"] .container__content footer a.btn{
  background: var(--color-brand-secondary);
  border-color:var(--color-brand-secondary);
  color: var(--color-brand-primaryDark);
}

/* === styles.css === */
/**
 * SectionReviews Component Styles
 *
 * Section displaying customer reviews with star ratings.
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Score description color
 * - --color-brand-primaryLight: Alternative background (brand-specific)
 */

.section-reviews {
  background: var(--color-brand-primaryLight);
  padding: 50px 20px;

  & .review-card {
    --review-card-background: var(--form-fields-background);
  }

  & .section-reviews__container {
    max-width: 80rem;
    margin: 0 auto;
  }

  & h2 {
    text-align: center;
    margin: 0 0 40px;
    font-size: clamp(1.5rem, 6vw, 39.6px);
    font-weight: 700;
  }

  & header {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 40px;
    width: 100%;
  }

  & .section-reviews__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    & .section-reviews__score__description {
      font-size: 24.48px;
      font-weight: 400;
      color: var(--color-brand-primary);
    }

    & .section-reviews__score__stars {
      display: flex;
      align-items: center;
      gap: 10px;

      & .section-reviews__score__scoreOf5 {
        font-size: 20.16px;
        font-weight: 400;
        padding-top: 5px;
      }
    }

    & .section-reviews__score__total {
      color: #808080;
      font-size: 17.28px;
      font-weight: 400;
    }
  }
}

/* Brand-specific color overrides */
.section-reviews--credimoney {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: rgb(46, 16, 71);
    font-weight: 300;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: rgb(46, 16, 71);
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgb(192, 229, 235);

    & footer .review-card__avatar {
      color: rgb(46, 16, 71);
    }
  }
}

.section-reviews--crediahora {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: rgb(29, 29, 27);
    font-size: 36px;
    font-weight: 900;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: rgb(149, 193, 31);
      font-weight: 700;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(150, 150, 150, 0.1);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgb(51, 51, 51);

    & footer .review-card__avatar {
      color: rgb(255, 255, 255);
    }
  }
}

.section-reviews--oledinero {
  --star-color: rgb(242, 210, 73);
  background: rgb(245, 245, 245);

  & h2 {
    color: rgb(3, 45, 143);
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: rgb(3, 45, 143);
      font-weight: 500;
    }

    & .section-reviews__score__stars {
      & .section-reviews__score__scoreOf5 {
        font-weight: 500;
      }
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
      font-weight: 500;
    }
  }

  & .review-card {
    --review-card-background: rgb(255, 255, 255);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgb(2, 45, 142);

    & header .review-card__time {
      font-weight: 500;
    }

    & .review-card__review {
      font-weight: 500;
    }

    & footer .review-card__avatar {
      color: rgb(255, 255, 255);
    }
  }
}

.section-reviews--creditoamigo {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: rgb(0, 0, 255);
    font-weight: 500;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: rgb(0, 0, 255);
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgb(255, 255, 255);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgb(131, 152, 255);

    & .review-card__review {
      color: rgb(0, 0, 0);
    }

    & footer .review-card__avatar {
      color: rgb(255, 255, 255);
    }

    & footer .review-card__user {
      color: rgb(0, 0, 0);
    }
  }
}

.section-reviews--credicheck {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #18384e;
    font-weight: 500;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #18384e;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: #edeef4;
    --review-card-time-color: #76bc74;
    --review-card-avatar-background: #b9dab2;

    & .review-card__review {
      color: rgb(0, 0, 0);
    }

    & footer .review-card__avatar {
      color: rgb(255, 255, 255);
    }

    & footer .review-card__user {
      color: rgb(0, 0, 0);
    }
  }
}

.section-reviews--creditoclic {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: rgb(7, 48, 52);
    font-weight: 500;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: rgb(34, 118, 124);
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgb(7, 48, 52);

    & .review-card__review {
      color: rgb(7, 48, 52);
    }

    & footer .review-card__avatar {
      color: rgb(173, 239, 69);
    }

    & footer .review-card__user {
      color: rgb(7, 48, 52);
    }
  }
}

.section-reviews--creditopro {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: rgb(51, 51, 51);
    font-weight: 800;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: rgb(69, 112, 174);
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgb(27, 74, 130);

    & .review-card__review {
      color: rgb(51, 51, 51);
    }

    & footer .review-card__avatar {
      color: rgb(243, 243, 243);
    }

    & footer .review-card__user {
      color: rgb(51, 51, 51);
    }
  }
}

.section-reviews--crediator {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #333333;
    font-weight: 800;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #f55f99;
      font-weight: 600;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgb(242, 242, 242);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #93c7bf;

    & .review-card__review {
      color: #333333;
    }

    & footer .review-card__avatar {
      color: #333333;
    }

    & footer .review-card__user {
      color: #333333;
    }
  }
}

.section-reviews--credifix {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #182d52;
    font-weight: 300;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #ff0086;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: #d9e4f5;
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #96b4e6;

    & .review-card__review {
      color: #182d52;
    }

    & footer .review-card__avatar {
      color: #182d52;
    }

    & footer .review-card__user {
      color: #182d52;
    }
  }
}

.section-reviews--crediscore {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #000000;
    font-weight: 700;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #907ee8;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(150, 150, 150, 0.1);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #907ee8;

    & .review-card__review {
      color: #000000;
    }

    & footer .review-card__avatar {
      color: rgb(255, 255, 255);
    }

    & footer .review-card__user {
      color: #000000;
    }
  }
}

.section-reviews--creditando {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #002449;
    font-weight: 800;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #002449;
      font-weight: 600;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: #f5fafa;
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #002449;

    & .review-card__review {
      color: #002449;
    }

    & footer .review-card__avatar {
      color: #c6fd00;
    }

    & footer .review-card__user {
      color: #002449;
    }
  }
}

.section-reviews--crediticio {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #13233a;
    font-weight: 700;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #13233a;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #e3f2fd;

    & .review-card__review {
      color: #13233a;
    }

    & footer .review-card__avatar {
      color: #13233a;
    }

    & footer .review-card__user {
      color: #13233a;
    }
  }
}

.section-reviews--creditozas {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #000000;
    font-weight: 800;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #000000;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: rgba(229, 234, 234, 0.5);

    & .review-card__review {
      color: #000000;
    }

    & footer .review-card__avatar {
      color: #96b4e6;
    }

    & footer .review-card__user {
      color: #000000;
    }
  }
}

.section-reviews--credizoom {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #000000;
    font-weight: 500;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #000000;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #4eb5a4;

    & .review-card__review {
      color: #000000;
    }

    & footer .review-card__avatar {
      color: #000000;
    }

    & footer .review-card__user {
      color: #000000;
    }
  }
}

.section-reviews--mastercredi {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #1a1a1a;
    font-weight: 700;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #1a1a1a;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #f7f9fa;

    & .review-card__review {
      color: #1a1a1a;
    }

    & footer .review-card__avatar {
      color: #1a1a1a;
    }

    & footer .review-card__user {
      color: #1a1a1a;
    }
  }
}

.section-reviews--credisolve {
  --star-color: rgb(242, 210, 73);
  background: rgb(255, 255, 255);

  & h2 {
    color: #1a1a1a;
    font-weight: 700;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #1a1a1a;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: rgba(241, 241, 241, 0.6);
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: var(--color-brand-secondary);

    & .review-card__review {
      color: #1a1a1a;
    }

    & footer .review-card__avatar {
      color: #fff;
      background-color: var(--button-primary-text);
    }

    & footer .review-card__user {
      color: #1a1a1a;
    }
  }
}

.section-reviews--credital {
  --form-fields-background: #fff;

  & .review-card {
    --review-card-background: #fafafa !important;
  }
}

.section-reviews--credipay {
  & .review-card {
    --review-card-background: #fafafa !important;
  }
}

.section-reviews--creditoplan {
  background: transparent;
  & .review-card {
    --review-card-background: var(--color-brand-primaryLight) !important;
  }
}

/* Credihope: was missing an override, so it fell back to the generic rule
   (background AND text both derived from the Tangerine family), making the
   whole section, the stars and the score heading collapse into one
   unreadable orange wash with no visible card boundaries. */
.section-reviews--credihope {
  --star-color: #f9b233;
  background: #ffffff;

  & h2 {
    color: #252827;
    font-weight: 300;
  }

  & .section-reviews__score {
    & .section-reviews__score__description {
      color: #f9b233;
      font-weight: 500;
    }

    & .section-reviews__score__total {
      color: rgb(128, 128, 128);
    }
  }

  & .review-card {
    --review-card-background: #f4f4ef;
    --review-card-time-color: rgb(153, 153, 153);
    --review-card-avatar-background: #f9b233;

    & .review-card__review {
      color: #252827;
    }

    & footer .review-card__avatar {
      color: #ffffff;
    }

    & footer .review-card__user {
      color: #252827;
    }
  }
}

/* Credihope: the shared .my-swiper carousel (Swipe/styles.css) puts 20px of
   padding on both .swiper and .swiper-slide at >=768px (needed elsewhere for
   the SwipeFeatures pill carousel), which here pushed every review card
   20+20=40px to the right of the "Excelente" heading above it. Cancel that
   padding for this specific carousel only (higher specificity + !important
   to beat the shared rule) so the cards line up with the heading, matching
   the reference design. */
.section-reviews .my-swiper .swiper,
.section-reviews .my-swiper .swiper .swiper-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (width >= 1024px) {
  .section-reviews {
    & header {
      justify-content: space-between;
      margin: 0 0 40px;
    }

    & .section-reviews__score {
      align-items: flex-start;

      & .section-reviews__score__description {
        font-size: 24.48px;
      }
    }
  }
}


/* === styles.css === */
/**
 * SectionServices Component Styles
 *
 * Theme-driven services section with dual layout support:
 * - Grid layout with filters (Credimoney)
 * - Carousel layout with Swiper (Crediahora, OleDinero)
 *
 * Semantic Tokens Used:
 * - --color-brand-primary: Navigation and pagination colors
 */

/* ====================
   CAROUSEL LAYOUT STYLES
   ==================== */

/* Section Styles */
.section-services {
  padding: var(--section-services-padding, 90px 56px 150px);
  background-color: var(--section-services-background, #f7f1f6);
  display: flex;
  flex-direction: column;
  gap: var(--section-services-gap, 80px);
  align-items: normal;
}

/* Brand-specific backgrounds */
/* Crediahora uses transparent background */
[data-brand="crediahora"] .section-services,
.section-services[data-brand="crediahora"] {
  background-color: transparent;
}

/* OleDinero uses transparent background */
[data-brand="oledinero"] .section-services,
.section-services[data-brand="oledinero"] {
  background-color: transparent;
}

/* ====================
   GRID LAYOUT STYLES
   ==================== */

/* Grid container */
.container-list-servicios {
  background-color: var(--services-grid-background, #fff);
  padding: var(--services-grid-padding, 70px 30px 90px);
}

.container-list-servicios .container__content {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 20px;
}

.container-list-servicios h2 {
  text-align: center;
  font-size: var(--services-title-font-size, 43.2px);
  font-weight: var(--services-title-font-weight, 300);
  font-style: var(--services-title-font-style, normal);
  color: var(--services-title-color, var(--text-color));
  line-height: var(--services-title-line-height, 1.2);
  margin-bottom: 40px;
}

/* Filter buttons */
.services-list__groups {
  display: flex;
  justify-content: center;
  gap: 10px 36px;
  list-style: none;
  padding: 0;
  margin: 0 0 50px 0;
  flex-wrap: wrap;
}

.services-list__groups li {
  font-size: var(--services-filter-font-size, 16.56px);
  font-weight: var(--services-filter-font-weight, 400);
  color: var(--services-filter-color, #d8c7ff);
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 8px 16px;
  border-radius: 4px;
}

.services-list__groups li:hover {
  color: var(--services-filter-hover-color, var(--services-filter-active-color, var(--color-brand-primary)));
  background-color: var(--services-filter-hover-bg, var(--services-filter-active-bg, rgba(0, 0, 0, 0.05)));
}

.services-list__groups li.active {
  color: var(--services-filter-active-color, var(--color-brand-primary));
  background-color: var(--services-filter-active-bg, rgba(0, 0, 0, 0.05));
}

/* Services grid - 3 columns */
.services-list__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--services-grid-gap, 25px);
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
}

/* Responsive grid - 2 columns on tablet */
@media (max-width: 1024px) {
  .services-list__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive grid - 1 column on mobile */
@media (max-width: 768px) {
   .container-list-servicios .container__content {
      padding:0;
    }
  .services-list__list {
    grid-template-columns: 1fr;
  }
}

.card-wrapper {
  width: 100%;
  margin: 0;
}

/* Grid layout card styles */
.container-list-servicios .card {
  width: 100%;
  height: auto;
  min-height: 450px;
  background-color: var(--services-card-background, #fff);
  border-radius: var(--services-card-border-radius, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.container-list-servicios .card:hover {
  transform: var(--services-card-hover-transform, translateY(-5px));
  box-shadow: var(--services-card-hover-shadow, 0 4px 16px rgba(0, 0, 0, 0.15));
}

/* Circular image wrapper for grid layout (Credimoney) */
.container-list-servicios .card__imageWrapper--circle {
  width: var(--services-card-image-width, 250px);
  height: var(--services-card-image-height, 250px);
  border-radius: 100%;
  background-size: cover;
  background-position: 50% 50%;
  margin: var(--services-card-image-margin, 30px auto 0);
  flex-shrink: 0;
  overflow: hidden;
}

/* Square image wrapper (for Crediahora and OleDinero) */
.container-list-servicios .card__imageWrapper:not(.card__imageWrapper--circle) {
  width: 100%;
  height: var(--services-card-image-height, 280px);
  overflow: hidden;
  flex-shrink: 0;
}

.container-list-servicios .card__imageWrapper:not(.card__imageWrapper--circle) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container-list-servicios .card__content {
  padding: var(--services-card-content-padding, 30px 30px 90px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.container-list-servicios .card__content h4 {
  font-size: var(--services-card-title-font-size, 18.72px);
  font-weight: var(--services-card-title-font-weight, 700);
  color: var(--services-card-title-color, var(--text-color));
  margin: 0;
  line-height: 1.4;
}

.container-list-servicios .card__content h4 a {
  text-decoration: none;
  color: inherit;
}

.container-list-servicios .card__content p {
  font-size: var(--services-card-description-font-size, 15.84px);
  font-weight: var(--services-card-description-font-weight, 400);
  color: var(--services-card-description-color, var(--services-card-title-color, var(--text-color)));
  line-height: var(--services-card-description-line-height, 1.4);
  margin: 0;
}

.container-list-servicios .card__extra {
  position: absolute;
  top: -14px;
  right: 10px;
  background-color: var(--services-extra-bg, rgb(248, 248, 146));
  color: var(--services-extra-color, rgb(46, 16, 71));
  font-size: var(--services-extra-font-size, 17.28px);
  font-weight: var(--services-extra-font-weight, 400);
  padding: var(--services-extra-padding, 8px 10px 5px);
  border-radius: var(--services-extra-border-radius, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-list-servicios .card__moreInfoIcon {
  position: absolute;
  bottom: 21px;
  right: 23px;
  display: block;
}

.container-list-servicios .card__moreInfoIcon .card__moreInfoText {
  display: block;
  width: var(--services-cta-icon-size, 30px);
  height: var(--services-cta-icon-size, 30px);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.container-list-servicios .card__moreInfoIcon .card__moreInfoText svg {
  width: var(--services-cta-icon-size, 30px);
  height: var(--services-cta-icon-size, 30px);
  fill: var(--services-cta-color, rgb(149, 193, 31));
  color: var(--services-cta-color, rgb(149, 193, 31));
}

.container-list-servicios .card__moreInfoIcon .card__moreInfoText:hover {
  opacity: var(--services-icon-hover-opacity, 0.8);
}

/* Title Styles */
.section-services .section__title {
  font-size: var(--services-title-font-size, 43.2px);
  font-weight: var(--services-title-font-weight, 300);
  font-style: var(--services-title-font-style, normal);
  color: var(--services-title-color, var(--text-color));
  line-height: var(--services-title-line-height, 1.2);
  text-align: center;
  margin: 0 auto;
  display: block;
  width: fit-content;
}

/* OleDinero section title background */
[data-brand="oledinero"] .section-services .section__title,
.section-services[data-brand="oledinero"] .section__title {
  background-image: url('/images/bg/h2-bg.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 220px auto;
  padding-bottom: 5px;
}

/* Subtitle (small) Styles */
.section-services .section__title small {
  font-size: var(--services-subtitle-font-size, 24.48px);
  font-weight: var(--services-subtitle-font-weight, 400);
  color: var(--services-subtitle-color, var(--text-color));
  display: block;
}

/* Credihope: "Subtítulo" as a Tangerine-to-Fuchsia gradient pill with white
   text, per the brand guideline (was plain Tangerine text directly on a
   white background, which is hard to read). */
[data-brand="credihope"] .section-services .section__title small {
  display: block;
  background: linear-gradient(90deg, #f9b233 0%, #e2609c 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 25px;
  padding: 4px 16px;
  border-radius: 999px;
}

/* Services List Container */
.section-services .services-list {
  width: 100%;
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Grid container responsive padding */
@media (width >= 1024px) {
  .container-list-servicios {
    padding: var(--services-grid-padding, 70px 40px 100px);
  }
}

@media (width >= 1300px) {
  .container-list-servicios {
    padding: var(--services-grid-padding, 80px 50px 130px);
  }
}

@media (width >= 1440px) {
  .container-list-servicios {
    padding: var(--services-grid-padding, 90px 56px 150px);
  }
}

/* Swiper Container */
.section-services .my-swiper {
  width: 80rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 75px 0;
  overflow: hidden;
}

/* Swiper Slide */
.section-services .swiper-slide {
  width: var(--services-card-width, 378px);
  height: auto;
}

/* Card Styles */
.section-services .card {
  width: 100%;
  height: var(--services-card-height, 480px);
  background-color: var(--services-card-background, #fff);
  border-radius: var(--services-card-border-radius, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

[data-brand="crediahora"] .section-services .card{
  border-radius: 50px;
  min-height: 360px;
}



.section-services .card:hover {
  transform: var(--services-card-hover-transform, translateY(-5px));
  box-shadow: var(--services-card-hover-shadow, 0 4px 16px rgba(0, 0, 0, 0.15));
}

/* Card Image Wrapper - Rectangular images (default) */
.section-services .card__imageWrapper {
  width: 100%;
  height: var(--services-card-image-height, 280px);
  overflow: hidden;
  flex-shrink: 0;
  margin: 0 auto;
  position: relative;
}

.section-services .card__imageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  object-position: 100% 30%;
}

/* Sombra sobre la imagen */
[data-brand="crediahora"] .section-services .card__imageWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(149, 193, 31, 0.30);
  pointer-events: none;
}

[data-brand="credifix"] .section-services .card__imageWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(24, 45, 82, 0.30);
  pointer-events: none;
}

/*Credisolve*/

[data-brand="credisolve"] .section-services .card{
  border-radius: 50px;
  min-height: 360px;
}

[data-brand="credisolve"] .section-services .card__imageWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(230, 32, 149, 0.30);
  pointer-events: none;
}

/*Credital*/

[data-brand="credital"] .section-services .card{
  box-shadow: none;
}

[data-brand="credital"] .section-services .card.card--blocked{
   background-color: var(--color-text-primary);
   color: var(--color-surface-base);
}

[data-brand="credital"] .section-services .card.card--blocked p,
[data-brand="credital"] .section-services .card.card--blocked h4{
  color: var(--color-surface-base);
}

[data-brand="credital"] .section-services .card__imageWrapper img {
  filter: none;
}

[data-brand="credital"] .section-services .swiper-pagination-bullet{
  background-color: #EAEEEF;
}

[data-brand="credital"] .section-services .swiper-pagination-bullet-active{
  background-color: #FF30C4;
}

/*Creditoplan*/

[data-brand="creditoplan"] .section-services .card__imageWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(29, 77, 81, 0.4);
  pointer-events: none;
}

/* Circular image wrapper (for Credimoney) */
.section-services .card__imageWrapper--circle {
  width: var(--services-card-image-width, 250px);
  height: var(--services-card-image-height, 250px);
  border-radius: 100%;
  background-size: cover;
  background-position: 50% 50%;
  margin: 0 auto;
  flex-shrink: 0;
  overflow: hidden;
}

/* Card Content */
.section-services .card__content {
  padding: var(--services-card-content-padding, 30px 30px 90px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Card Title */
.section-services .card__content h4 {
  font-size: var(--services-card-title-font-size, 18.72px);
  font-weight: var(--services-card-title-font-weight, 700);
  color: var(--services-card-title-color, var(--text-color));
  margin: 0;
  line-height: 1.3;
}

.section-services .card__content h4 a {
  text-decoration: none;
  color: inherit;
  font-weight: var(--services-card-title-font-weight, 700);
}

/* Card Description */
.section-services .card__content p {
  font-size: var(--services-card-description-font-size, 15.84px);
  font-weight: var(--services-card-description-font-weight, 400);
  color: var(--services-card-description-color, var(--services-card-title-color, var(--text-color)));
  line-height: var(--services-card-description-line-height, 22.176px);
  margin: 0;
}

/* Card Extra Label */
.section-services .card__extra {
  position: absolute;
  top: -14px;
  right: 10px;
  padding: 2px 10px;
  background: var(--services-extra-bg, rgb(248, 248, 146));
  color: var(--services-extra-color, rgb(46, 16, 71));
  font-size: var(--services-extra-font-size, 17.28px);
  font-weight: var(--services-extra-font-weight, 400);
  border-radius: var(--services-extra-border-radius, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA Container - positioned at bottom right */
.section-services .card__moreInfoIcon {
  position: absolute;
  bottom: 21px;
  right: 23px;
  display: block;
}

/* CTA Icon Link - all brands use icon only */
.section-services .card__moreInfoIcon .card__moreInfoText {
  display: block;
  width: var(--services-cta-icon-size, 30px);
  height: var(--services-cta-icon-size, 30px);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.section-services .card__moreInfoIcon .card__moreInfoText svg {
  width: var(--services-cta-icon-size, 30px);
  height: var(--services-cta-icon-size, 30px);
  fill: var(--services-cta-color, rgb(149, 193, 31));
  color: var(--services-cta-color, rgb(149, 193, 31));
}

.section-services .card__moreInfoIcon .card__moreInfoText:hover {
  opacity: var(--services-icon-hover-opacity, 0.8);
}

/* Swiper Navigation Buttons */
.section-services .swiper-button-prev,
.section-services .swiper-button-next {
  color: var(--services-nav-color, #ccc);
  width: var(--services-nav-size, 48px);
  height: var(--services-nav-size, 48px);
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.3s ease;
}

.section-services .swiper-button-prev:hover,
.section-services .swiper-button-next:hover {
  color: var(--services-nav-hover-color, #999);
}

.section-services .swiper-button-prev:after,
.section-services .swiper-button-next:after {
  font-size: var(--services-nav-icon-size, 28px);
  font-weight: bold;
}

.section-services .swiper-button-prev {
  left: 0;
}

.section-services .swiper-button-next {
  right: 0;
}

/* Swiper Pagination */
.section-services .swiper-pagination {
  bottom: 20px;
}

.section-services .swiper-pagination-bullet {
  width: var(--services-pagination-bullet-size, 18px);
  height: var(--services-pagination-bullet-size, 18px);
  background-color: var(--color-brand-secondary);
  opacity: 1;
}

.section-services .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--color-brand-primary, #000);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .section-services {
    padding: 70px 40px 120px;
    gap: 60px;
  }

  .section-services .services-list {
    padding: 0 20px;
  }
}

@media (max-width: 992px) {
  .section-services {
    padding: 60px 30px 100px;
    gap: 50px;
  }

  .section-services .section__title {
    font-size: calc(var(--services-title-font-size, 43.2px) * 0.85);
  }

  .section-services .section__title small {
    font-size: calc(var(--services-subtitle-font-size, 24.48px) * 0.85);
  }

  .section-services .swiper-slide {
    width: calc(var(--services-card-width, 378px) * 0.9);
  }

  .section-services .card {
    height: auto;
    min-height: 420px;
  }
}

@media (max-width: 768px) {
  .section-services {
    padding: 50px 0 80px;
    gap: 40px;
  }

  .section-services .section__title {
    font-size: calc(var(--services-title-font-size, 43.2px) * 0.7);
    padding: 0 20px;
  }

  .section-services .section__title small {
    font-size: calc(var(--services-subtitle-font-size, 24.48px) * 0.7);
  }


  /* El padre recorta en el borde del viewport */
  .section-services .services-list {
    overflow: hidden;
  }

  /* El swiper desborda para mostrar slides adyacentes */
  .section-services .my-swiper,
  .section-services .my-swiper.swiper {
    overflow: visible !important;
    padding: 10px 0 65px;
    touch-action: pan-y;
  }

  .section-services .swiper-slide {
    height: auto;
  }

  .section-services .card {
    height: auto;
    min-height: unset;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }


  .section-services .card__imageWrapper {
    height: 180px;
  }

  .section-services .card__content {
    padding: 16px 16px 50px;
  }

  .section-services .card__moreInfoIcon {
    padding: 0 16px 16px;
  }

  /* Hide nav arrows on mobile — pagination dots are enough */
  .section-services .swiper-button-prev,
  .section-services .swiper-button-next {
    display: none;
  }

  /* Bullets mobile */
  .section-services .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }

  .section-services .swiper-pagination-bullet-active {
    background-color: var(--color-brand-primary);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .section-services {
    padding: 40px 0px 60px;
    gap: 30px;
  }

  .section-services .card__content {
    padding: 20px 20px 40px;
  }

  .section-services .card__moreInfoIcon {
    padding: 0 20px 0px 20px;
    right: 0;
  }

  [data-brand="crediahora"] .section-services {
    padding-left: 0px;
    padding-right: 0px;
    gap:30px;
  }
}

/* ====================
   DISCOVER ALL PRODUCTS BUTTON
   ==================== */

.services-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  width: 100%;
}

/* Credihope: the "Contrata aquí" CTA sat right up against the cards above
   it (margin-top is hardcoded to 0 here regardless of brand). Give it real
   breathing room. */
[data-brand="credihope"] .services-button-container {
  margin-top: var(--services-button-margin-top, 50px);
}

.services-button {
  background-color: var(--services-button-bg, rgb(248, 248, 146));
  color: var(--services-button-color, rgb(46, 16, 71));
  font-size: var(--services-button-font-size, 14.4px);
  font-weight: var(--services-button-font-weight, 700) !important;
  padding: var(--services-button-padding, 12px 25px);
  border-radius: var(--services-button-border-radius, 40px);
  border: var(--services-button-border, 2px solid rgb(248, 248, 146));
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.services-button:hover {
  opacity: var(--services-button-hover-opacity, 0.9);
  transform: var(--services-button-hover-transform, translateY(-2px));
}

/* Button responsive adjustments */
@media (max-width: 768px) {

  .services-button {
    font-size: 13px;
    padding: 10px 20px;
  }

  [data-brand="credifix"] .services-button::after {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .services-button {
    font-size: 14px;
    padding: 8px 20px;
  }
}

/* ====================
   CREDIATOR - Services button override
   ==================== */

[data-brand="crediator"] .services-button {
  background-color: #f2d5e0;
  color: #333333;
  border-radius: 999px;
  border-color: transparent;
}

/* Card images flush with card top edge */
[data-brand="crediator"] .section-services .card__imageWrapper,
[data-brand="crediator"] .container-list-servicios .card__imageWrapper {
  margin: 0;
}

[data-brand="crediator"] .section-services .card__imageWrapper img{
  filter: none;
}


/* Last two cards (blocked) get featured pink background */
[data-brand="crediator"] .section-services .card--blocked,
[data-brand="crediator"] .container-list-servicios .card--blocked {
  background-color: rgb(245, 95, 153);
}

[data-brand="crediator"] .section-services .card--blocked .card__content h4,
[data-brand="crediator"] .section-services .card--blocked .card__content h4 a,
[data-brand="crediator"] .container-list-servicios .card--blocked .card__content h4,
[data-brand="crediator"] .container-list-servicios .card--blocked .card__content h4 a {
  color: #ffffff;
}

[data-brand="crediator"] .section-services .card--blocked .card__content p,
[data-brand="crediator"] .container-list-servicios .card--blocked .card__content p {
  color: #ffffff;
}

[data-brand="crediator"] .section-services .card--blocked .card__moreInfoIcon svg,
[data-brand="crediator"] .section-services .card--blocked .card__moreInfoText svg,
[data-brand="crediator"] .container-list-servicios .card--blocked .card__moreInfoIcon svg,
[data-brand="crediator"] .container-list-servicios .card--blocked .card__moreInfoText svg {
  fill: #ffffff;
  color: #ffffff;
}

/* ====================
   CREDIFIX - Light blue bg, navy text, 10px radius
   ==================== */

[data-brand="credifix"] .services-button::after {
  content: "+";
  font-size: 22px;
  font-weight: 700;
}

/* Credifix: card images fill full width */
[data-brand="credifix"] .section-services .card__imageWrapper,
[data-brand="credifix"] .container-list-servicios .card__imageWrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}

[data-brand="credifix"] .section-services .card__imageWrapper img,
[data-brand="credifix"] .container-list-servicios .card__imageWrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Credifix: section background white */
[data-brand="credifix"] .section-services,
.section-services[data-brand="credifix"],
[data-brand="credifix"] .container-list-servicios,
.container-list-servicios[data-brand="credifix"] {
  background-color: #ffffff;
}

[data-brand="credifix"] .section-services .card--blocked .card__content h4,
[data-brand="credifix"] .section-services .card--blocked .card__content h4 a,
[data-brand="credifix"] .container-list-servicios .card--blocked .card__content h4,
[data-brand="credifix"] .container-list-servicios .card--blocked .card__content h4 a {
  color: #ffffff;
}

[data-brand="credifix"] .section-services .card--blocked .card__content p,
[data-brand="credifix"] .container-list-servicios .card--blocked .card__content p {
  color: #182d52;
}

[data-brand="credifix"] .section-services .card--blocked .card__extra,
[data-brand="credifix"] .container-list-servicios .card--blocked .card__extra {
  background-color: #ff0086;
  color: #ffffff;
}

/* ====================
   CREDISCORE - Purple bg, white text, pill shape
   ==================== */

[data-brand="crediscore"] .services-button {
  border-radius: 999px;
}

[data-brand="crediscore"] .section-services .card__imageWrapper,
[data-brand="crediscore"] .container-list-servicios .card__imageWrapper {
  margin: 0;
}

[data-brand="crediscore"] .section-services .card__imageWrapper{
    border-radius: 200px 200px 0px 0px;
    width: 100%;
}

[data-brand="crediscore"] .section-services .card__imageWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(122, 104, 210, 0.40);
  pointer-events: none;
}

[data-brand="crediscore"] .section-services .card.card--blocked{
   background-color: var(--color-brand-primary) !important;
   color: var(--color-surface-base);
}

[data-brand="crediscore"] .section-services .card.card--blocked p,
[data-brand="crediscore"] .section-services .card.card--blocked h4{
  color: var(--color-surface-base);
}

[data-brand="crediscore"] .section-services .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--color-text-primary);
}

[data-brand="crediscore"] .section-services .swiper-pagination-bullet{
  background-color: var(--color-brand-secondary);
}


/* ====================
   CREDITANDO - Lime/navy style, square corners
   ==================== */

[data-brand="creditando"] .section-services .section__title small {
  font-size: 1.3rem;
  border-bottom: 3px solid #c6fd00;
  display: block;
  width: fit-content;
  padding-bottom: 2px;
  margin: 0 auto 8px;
}

[data-brand="creditando"] .section-services .card__imageWrapper,
[data-brand="creditando"] .container-list-servicios .card__imageWrapper {
  margin: 0;
}

[data-brand="creditando"] .services-button {
  background-color: #c6fd00;
  color: #002449;
  border: none;
  border-radius: 0;
}

/* Creditando: last two cards (blocked) get lime green background and border */
[data-brand="creditando"] .section-services .card--blocked,
[data-brand="creditando"] .container-list-servicios .card--blocked {
  background-color: #c6fd00;
  border: 2px solid #c6fd00;
}

[data-brand="creditando"] .section-services .card--blocked .card__content h4,
[data-brand="creditando"] .section-services .card--blocked .card__content h4 a,
[data-brand="creditando"] .container-list-servicios .card--blocked .card__content h4,
[data-brand="creditando"] .container-list-servicios .card--blocked .card__content h4 a {
  color: #002449;
}

[data-brand="creditando"] .section-services .card--blocked .card__content p,
[data-brand="creditando"] .container-list-servicios .card--blocked .card__content p {
  color: #002449;
}

[data-brand="creditando"] .section-services .card--blocked .card__extra,
[data-brand="creditando"] .container-list-servicios .card--blocked .card__extra {
  background-color: #002449;
  color: #c6fd00;
}

/* Creditando: equal-height cards in grid */
[data-brand="creditando"] .container-list-servicios .card {
  height: 100%;
}

/* ====================
   CREDITICIO - Full-width card images, white bg
   ==================== */

[data-brand="crediticio"] .section-services .card__imageWrapper,
[data-brand="crediticio"] .container-list-servicios .card__imageWrapper {
  margin: 0;
}

/* ====================
   CREDITOZAS - Black bg, blue text, pill shape
   ==================== */

[data-brand="creditozas"] .services-button {
  color: #96b4e6;
  border-radius: 999px;
}

/* ====================
   CREDIZOOM - Black bg, teal text, pill shape
   ==================== */

[data-brand="credizoom"] .services-button {
  background-color: #4eb5a4;
  color: #ffffff;
  border-color: #4eb5a4;
  border-radius: 999px;
}

/* ====================
   MASTERCREDI - Near-black bg, light gray text, 10px radius
   ==================== */

[data-brand="mastercredi"] .section-services .section__title {
  color: #000000;
}

[data-brand="mastercredi"] .section-services .section__title small {
  color: #000000;
}

[data-brand="mastercredi"] .section-services .card__imageWrapper {
  height: 280px;
  margin: 0;
}

[data-brand="mastercredi"] .section-services .card--blocked {
  background-color: #e2e8ed;
}

[data-brand="mastercredi"] .section-services .card--blocked .card__extra {
  background-color: #93bcfc;
  color: #000000;
}

[data-brand="mastercredi"] .services-button {
  color: #e2e8ed;
  border-radius: 10px;
}

[data-brand="mastercredi"] .services-button-container .services-button {
  font-size: 17.28px !important;
}

/* ====================
   CREDIZOOM - Black border cards + centered text
   ==================== */

[data-brand="credizoom"] .section-services .card,
.section-services[data-brand="credizoom"] .card,
[data-brand="credizoom"] .container-list-servicios .card,
.container-list-servicios[data-brand="credizoom"] .card {
  border: 2px solid #000000;
}

[data-brand="credizoom"] .section-services .card__content,
.section-services[data-brand="credizoom"] .card__content,
[data-brand="credizoom"] .container-list-servicios .card__content,
.container-list-servicios[data-brand="credizoom"] .card__content {
  text-align: center;
}

[data-brand="credizoom"] .section-services .card__imageWrapper,
.section-services[data-brand="credizoom"] .card__imageWrapper,
[data-brand="credizoom"] .container-list-servicios .card__imageWrapper,
.container-list-servicios[data-brand="credizoom"] .card__imageWrapper {
  filter: none;
}

[data-brand="credizoom"] .section-services .section__title,
[data-brand="credizoom"] .container-list-servicios .section__title {
  text-transform: uppercase;
  font-size: 31.68px !important;
  font-weight: 500 !important;
}

[data-brand="credizoom"] .section-services .services-button,
[data-brand="credizoom"] .container-list-servicios .services-button,
[data-brand="credizoom"] .section-services .btn,
[data-brand="credizoom"] .container-list-servicios .btn {
  font-size: 17.28px;
}

[data-brand="credizoom"] .section-services .section__title small,
[data-brand="credizoom"] .container-list-servicios .section__title small {
  text-transform: none;
  font-family: "AdobeClean", sans-serif !important;
  font-weight: 500;
  margin-bottom: 10px;
}

/* ====================
   CREDITOZAS - Grayscale images + black titles (matching production)
   ==================== */

[data-brand="creditozas"] .section-services .card__imageWrapper,
.section-services[data-brand="creditozas"] .card__imageWrapper,
[data-brand="creditozas"] .container-list-servicios .card__imageWrapper,
.container-list-servicios[data-brand="creditozas"] .card__imageWrapper {
  filter: grayscale(100%);
  margin: 5px 0 0;
  width: 100%;
  border-radius: 30px 30px 0 0;
}

[data-brand="creditozas"] .section-services .card__content h4,
.section-services[data-brand="creditozas"] .card__content h4,
[data-brand="creditozas"] .container-list-servicios .card__content h4,
.container-list-servicios[data-brand="creditozas"] .card__content h4,
[data-brand="creditozas"] .section-services .card__content h4 a,
.section-services[data-brand="creditozas"] .card__content h4 a,
[data-brand="creditozas"] .container-list-servicios .card__content h4 a,
.container-list-servicios[data-brand="creditozas"] .card__content h4 a {
  color: #000000;
}

/* Creditozas: more rounded top, blocked cards gray bg, badge gray */
[data-brand="creditozas"] .section-services .card,
.section-services[data-brand="creditozas"] .card,
[data-brand="creditozas"] .container-list-servicios .card,
.container-list-servicios[data-brand="creditozas"] .card {
  border-radius: 35px 35px 8px 8px;
}

[data-brand="creditozas"] .section-services .card--blocked,
.section-services[data-brand="creditozas"] .card--blocked,
[data-brand="creditozas"] .container-list-servicios .card--blocked,
.container-list-servicios[data-brand="creditozas"] .card--blocked {
  background-color: #e9e9e9 !important;
}

[data-brand="creditozas"] .section-services .card--blocked .card__extra,
.section-services[data-brand="creditozas"] .card--blocked .card__extra,
[data-brand="creditozas"] .container-list-servicios .card--blocked .card__extra,
.container-list-servicios[data-brand="creditozas"] .card--blocked .card__extra {
  background-color: #b1b1b1;
  color: #ffffff;
}

/* ====================
   BLOCKED CARD STYLES
   ==================== */

/* Blocked card styles - only affects title color, no visual dimming */
.card--blocked {
  /* No opacity or pointer-events changes - card remains interactive */
}

/* Blocked card title - use default text color instead of brand color */
.card--blocked .card__content h4 {
  color: var(--services-blocked-title-color, var(--text-color, #1D1D1B));
}

/* Blocked card with colored background - text color from CSS variable */
.card--blocked[style*="background-color"] .card__content h4,
.card--blocked[style*="background-color"] .card__content h4 a {
  color: var(--services-blocked-card-text-color, var(--services-blocked-title-color, inherit));
}

/* ====================
   CREDIATOR
   ==================== */

[data-brand="crediator"] .section-services .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--color-brand-secondaryLight);
}

[data-brand="crediator"] .section-services .swiper-pagination-bullet{
  background-color: #efeded;
}


/* ====================
   CREDITICIO
   ==================== */


[data-brand="crediticio"] .section-services .card.card--blocked .card__content{
   background-color: var(--color-brand-primaryLight) !important;
}

[data-brand="crediticio"] .section-services .card__imageWrapper img {
  filter: none;
}

[data-brand="crediticio"] .section-services .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--color-brand-primary);
}

[data-brand="crediticio"] .section-services .swiper-pagination-bullet {
    background-color: var(--color-brand-primaryLight);
}


/* ====================
   CREDISOLVE - Lavender bg, purple primary
   ==================== */

[data-brand="credisolve"] .section-services .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--color-brand-primaryDark);
}

[data-brand="credisolve"] .section-services .swiper-pagination-bullet{
  background-color: var(--color-surface-muted);
}

/* ====================
   CREDITAL - Lavender bg, purple primary
   ==================== */

:root[data-brand="credital"] .section-services{
  background-color: #ffffff;
}

.section-services[data-brand="credital"],
:root[data-brand="credital"] .container-list-servicios,
.container-list-servicios[data-brand="credital"] {
  background-color: #EAEEEF;
}

[data-brand="credital"] .section-services .section__title,
[data-brand="credital"] .container-list-servicios h2 {
    font-family: 'Source Serif 4', serif;
}

[data-brand="credital"] .section-services .section__title small{
  font-family: var(--font-family-base);
}

/* ====================
   CREDIPAY - Lavender bg, purple primary
   ==================== */

:root[data-brand="credipay"] .section-services{
  background-color: #ffffff;
}


[data-brand="credipay"] .section-services .section__title,
[data-brand="credipay"] .container-list-servicios h2 {
    color: var(--color-text-secondary);
    font-weight: 800;
}

[data-brand="credipay"] .section-services .section__title small{
  color: var(--color-brand-primary);
}


[data-brand="credipay"] .section-services .card__imageWrapper{
    border-radius: 200px 200px 0px 0px;
    width: 100%;
}

[data-brand="credipay"] .section-services .card__imageWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(21, 100, 233, 0.40);
  pointer-events: none;
}

[data-brand="credipay"] .section-services .card.card--blocked{
   background-color: var(--color-brand-primary) !important;
   color: var(--color-surface-base);
}

[data-brand="credipay"] .section-services .card.card--blocked p,
[data-brand="credipay"] .section-services .card.card--blocked h4{
  color: var(--color-surface-base);
}

[data-brand="credipay"] .section-services .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--color-brand-primaryDark);
}

[data-brand="credipay"] .section-services .swiper-pagination-bullet{
  background-color: var(--color-brand-primaryLight);
}


.card--blocked[style*="background-color"] .card__content p {
  color: var(--services-blocked-card-text-color, var(--services-card-description-color, inherit));
}

.card--blocked[style*="background-color"] .card__moreInfoIcon svg,
.card--blocked[style*="background-color"] .card__moreInfoText svg {
  fill: var(--services-blocked-card-text-color, var(--services-cta-color, inherit));
  color: var(--services-blocked-card-text-color, var(--services-cta-color, inherit));
}

/* Blocked label */
.card__blockedLabel {
  position: absolute;
  bottom: 21px;
  right: 23px;
  background-color: var(--services-blocked-label-bg, #888);
  color: var(--services-blocked-label-color, #fff);
  font-size: var(--services-blocked-label-font-size, 12px);
  font-weight: var(--services-blocked-label-font-weight, 600);
  padding: var(--services-blocked-label-padding, 6px 12px);
  border-radius: var(--services-blocked-label-border-radius, 20px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* ====================
   CREDICHECK
   ==================== */

[data-brand="credicheck"] .section-services .card__imageWrapper--circle {
  border-radius: 50% 50% 0 0 !important;
}

@media (max-width: 768px) {
  /* Credimoney — card image mobile only */
  [data-brand="credimoney"] .section-services{
    padding-left: 0;
    padding-right: 0px;
  }

  [data-brand="credimoney"] .section-services .card__imageWrapper {
    height: 130px;
    width: 130px;
    margin: 20px auto 0;
  }

  [data-brand="credimoney"] .section-services .card {
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    min-height: 320px;
    background-color: var(--paso-a-paso-section-background, #f7f1f6);
    box-shadow: none;
  }

}

[data-brand="credimoney"] .section-services .card__imageWrapper--circle{
  margin-top: 25px;
}


[data-brand="credimoney"] .section-services .swiper-pagination-bullet {
  background-color: var(--paso-a-paso-section-background, #f7f1f6);
}

[data-brand="credimoney"] .section-services .swiper-pagination-bullet-active{
  background-color: var(--color-brand-primaryLight, #d8c7ff);
}

[data-brand="credifix"] .section-services .swiper-pagination-bullet {
  background-color: var(--color-brand-secondaryLight, #d9e4f5);
}

[data-brand="credifix"] .section-services .swiper-pagination-bullet-active{
  background-color: #96b4e6;
}



/* === index.css === */
.secured100 {
  max-width: 750px;
  width: 100%;
  border: 3px solid var(--background-basic-color-2);
  padding: 20px;
  margin: 0 auto;
  display: grid;
  gap: 20px;

  .secured100__container-text {
    display: grid;
    flex-direction: column;
    gap: 20px;
    font-size: 1rem;
  }

  .secured100__container-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: var(--footer-logos-flex-gap);
  }

  .secured100__title {
    text-align: center;
  }

  & img {
    max-height: 50px;
    max-width: 80px;
  }
}

@media (width >= 600px) {
  .secured100 .secured100__container-img {
    grid-template-columns: auto auto auto auto;
    justify-content: center;
  }
}

/* === styles.css === */
/* Brand-specific styling for SeguridadDigitalHeroDarkWeb */

.hero-container-dark-web {
  background-color: rgb(255, 255, 255);
  --body-max-width: 100%;
  --row-image-max-width: 100%;
  max-width: 1908px !important;
}

/* The --body-max-width: 100% above is meant to let this section's outer
   background bleed to 1908px, but since --container-content-max-width
   inherits from --body-max-width, it was also removing the max-width from
   .container__content itself - leaving the text/list/footer cards with no
   side margins at all (touching the viewport edge, not aligned with the
   header). Restore the standard 80rem content column here so it centers
   with the same margins as every other section. */
@media (min-width: 1024px) {
  .hero-container-dark-web .container__content {
    max-width: 80rem !important;
  }
}

/* Image column should take more space */
.hero-container-dark-web .col-img {
  flex: 1 1 0%;
}

/* Ensure images don't overflow on mobile */
.hero-container-dark-web .col-img img {
  max-width: 100%;
  height: auto;
}

/* Brand-specific h2 title styles */
.hero-container-dark-web [data-brand="credimoney"] h2 {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.8rem; /* 25.92px at base 14.4px */
  font-weight: 300;
  line-height: 1.8rem; /* 25.92px at base 14.4px */
  color: rgb(46, 16, 71);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediahora"] h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem; /* 25.92px at base 14.4px */
  font-weight: 900;
  line-height: 2.16rem; /* 31.104px at base 14.4px */
  color: rgb(29, 29, 27);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="oledinero"] h2 {
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem; /* 25.92px at base 14.4px */
  font-weight: 700;
  line-height: 1.8rem; /* 25.92px at base 14.4px */
  color: rgb(3, 45, 143);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

/* Brand-specific paragraph styles */
.hero-container-dark-web [data-brand="credimoney"] p {
  background-color: rgb(247, 241, 246);
  color: rgb(46, 16, 71);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 20px 0;
}

.hero-container-dark-web [data-brand="credimoney"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="crediahora"] p {
  background-color: var(--color-brand-primaryLight);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 20px 0;
}

.hero-container-dark-web [data-brand="crediahora"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="oledinero"] p {
  background-color: rgb(245, 245, 245);
  color: rgb(2, 45, 142);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 20px 0;
}

.hero-container-dark-web [data-brand="oledinero"] p:last-child {
  margin-bottom: 0;
}

/* Brand-specific link styles */
.hero-container-dark-web [data-brand="credimoney"] a {
  color: rgb(46, 16, 71);
  font-weight: 700;
  text-decoration: none;
}

.hero-container-dark-web [data-brand="crediahora"] a {
  color: rgb(149, 193, 31);
  font-weight: 700;
  text-decoration: none;
}

.hero-container-dark-web [data-brand="oledinero"] a {
  color: rgb(3, 45, 143);
  font-weight: 600;
  text-decoration: none;
}


.hero-container-dark-web[data-brand="oledinero"] .col-img img {
  max-width: 435px;
  width: 435px;
}

/* Creditoamigo brand */
.hero-container-dark-web [data-brand="creditoamigo"] h2 {
  font-family: "Seitu", sans-serif;
  font-size: 2rem; /* 28.8px at base 14.4px */
  font-weight: 500;
  line-height: 2rem;
  color: rgb(0, 0, 255);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditoamigo"] p {
  font-family: "Seitu", sans-serif;
  font-size: 1.22rem; /* 17.6px at base 14.4px */
  font-weight: 400;
  line-height: 1.43rem;
  background-color: rgb(245, 245, 245);
  color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditoamigo"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="creditoamigo"] a {
  color: rgb(0, 0, 255);
  font-weight: 400;
  text-decoration: none;
}

.hero-container-dark-web[data-brand="creditoamigo"] .col-img img {
  max-width: 554px;
  width: 554px;
}

/* Credicheck brand */
.hero-container-dark-web [data-brand="credicheck"] h2 {
  font-family: "Funnel Display", sans-serif;
  font-size: 2rem; /* 28.8px at base 14.4px */
  font-weight: 500;
  line-height: 2rem;
  color: #76bc74;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credicheck"] p {
  font-family: "Funnel Display", sans-serif;
  font-size: 1.22rem; /* 17.6px at base 14.4px */
  font-weight: 400;
  line-height: 1.43rem;
  background-color: #edeef4;
  color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credicheck"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="credicheck"] a {
  color: #76bc74;
  font-weight: 400;
  text-decoration: none;
}

.hero-container-dark-web[data-brand="credicheck"] .col-img img {
  max-width: 554px;
  width: 554px;
}

/* Creditoclic brand */
.hero-container-dark-web [data-brand="creditoclic"] h2 {
  font-family: "Harabara", sans-serif;
  font-size: 1.8rem; /* 25.92px at base 14.4px */
  font-weight: 500;
  line-height: 1.8rem;
  color: rgb(7, 48, 52);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditoclic"] p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem; /* 15.84px at base 14.4px */
  font-weight: 500;
  line-height: 1.43rem;
  background-color: rgb(234, 238, 239);
  color: rgb(7, 48, 52);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditoclic"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="creditoclic"] a {
  color: rgb(122, 196, 174);
  font-weight: 600;
  text-decoration: none;
}

.hero-container-dark-web[data-brand="creditoclic"] .col-img img {
  max-width: 445px;
  width: 445px;
}

/* Creditopro brand */
.hero-container-dark-web [data-brand="creditopro"] h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 1.8rem; /* 25.92px at base 14.4px */
  font-weight: 800;
  line-height: 1.8rem;
  color: rgb(51, 51, 51);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditopro"] p {
  font-family: "Open Sans", sans-serif;
  font-size: 1.1rem; /* 15.84px at base 14.4px */
  font-weight: 500;
  line-height: 1.43rem;
  background-color: rgb(243, 243, 243);
  color: rgb(51, 51, 51);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditopro"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="creditopro"] a {
  color: rgb(69, 112, 174);
  font-weight: 800;
  text-decoration: none;
}

.hero-container-dark-web[data-brand="creditopro"] .col-img img {
  max-width: 445px;
  width: 445px;
}

/* Crediator brand */
.hero-container-dark-web [data-brand="crediator"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem; /* 25.92px at base 14.4px */
  font-weight: 800;
  line-height: 1.8rem;
  color: rgb(51, 51, 51);
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediator"] p {
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem; /* 15.84px at base 14.4px */
  font-weight: 600;
  line-height: 1.43rem; /* 20.592px at base 14.4px */
  background-color: rgb(242, 242, 242);
  color: rgb(51, 51, 51);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediator"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="crediator"] a {
  color: rgb(245, 95, 153);
  font-weight: 800;
  text-decoration: none;
}

/* Credifix brand */
.hero-container-dark-web [data-brand="credifix"] h2 {
  font-family: "Roboto", sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.8rem;
  color: #182d52;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credifix"] p {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.43rem;
  background-color: #d9e4f5;
  color: #182d52;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credifix"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="credifix"] a {
  color: #ff0086;
  font-weight: 700;
  text-decoration: none;
}

/* Crediscore brand */
.hero-container-dark-web [data-brand="crediscore"] h2 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  color: #000000;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediscore"] p {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.43rem;
  background-color: #e1f1fc;
  color: #000000;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediscore"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="crediscore"] a {
  color: #907ee8;
  font-weight: 700;
  text-decoration: none;
}

.hero-container-dark-web[data-brand="crediscore"] .col-img img {
  max-width: 816px;
  width: 816px;
  max-height: 478px;
}

/* Creditando brand */
.hero-container-dark-web [data-brand="creditando"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.8rem;
  color: #002449;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditando"] p {
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.43rem;
  background-color: #ddecee;
  color: #002449;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditando"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="creditando"] a {
  color: #c6fd00;
  font-weight: 700;
  text-decoration: none;
}

/* Crediticio brand */
.hero-container-dark-web [data-brand="crediticio"] h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  color: #13233a;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediticio"] p {
  font-family: "Open Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.43rem;
  background-color: #13233a;
  color: #ffffff;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediticio"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="crediticio"] a {
  color: #ffa573;
  font-weight: 700;
  text-decoration: none;
}

/* Creditozas brand */
.hero-container-dark-web [data-brand="creditozas"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.8rem;
  color: #000000;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditozas"] p {
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.43rem;
  background-color: #e5eaea;
  color: #000000;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="creditozas"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="creditozas"] a {
  color: #96b4e6;
  font-weight: 700;
  text-decoration: none;
}

/* Credizoom brand */
:root[data-brand="credizoom"] .hero-container-dark-web {
  background-color: #f4f8f9;
}

.hero-container-dark-web [data-brand="credizoom"] h2 {
  font-family: "AdobeClean", sans-serif;
  font-size: 1.8rem; /* 25.92px */
  font-weight: 500;
  line-height: 1.8rem;
  color: #000000;
  text-wrap: balance;
  text-align: center;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credizoom"] p {
  font-family: "AdobeClean", sans-serif;
  font-size: 1.1rem; /* 15.84px */
  font-weight: 500;
  line-height: 1.43rem;
  background-color: #ffffff;
  color: #000000;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credizoom"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="credizoom"] a {
  color: #4eb5a4;
  font-weight: 500;
  text-decoration: none;
}

/* Mastercredi brand */
:root[data-brand="mastercredi"] .hero-container-dark-web {
  background-color: #f7f9fa;
}

.hero-container-dark-web [data-brand="mastercredi"] h2 {
  font-family: "Coolvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  color: #1a1a1a;
  text-wrap: balance;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="mastercredi"] p {
  font-family: "AdobeClean", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.43rem;
  background-color: #ffffff;
  color: #1a1a1a;
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="mastercredi"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="mastercredi"] a {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: none;
}


/* === styles.css === */
/* Brand-specific styling for SeguridadDigitalHeroRiesgo */

.hero-container-riesgo {
  --body-max-width: 100%;
  --row-image-max-width: 100%;
  max-width: 1908px !important;
}

/* The --body-max-width: 100% above is meant to let this section's outer
   background bleed to 1908px, but since --container-content-max-width
   inherits from --body-max-width, it was also removing the max-width from
   .container__content itself - leaving the text/list/footer cards with no
   side margins at all (touching the viewport edge, not aligned with the
   header). Restore the standard 80rem content column here so it centers
   with the same margins as every other section. */
@media (min-width: 1024px) {
  .hero-container-riesgo .container__content {
    max-width: 80rem !important;
  }
}

/* Content wrapper spacing */
.hero-container-riesgo .col > div[data-brand] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Image max height constraint */
.hero-container-riesgo .col-img img {
  max-height: 500px;
  object-fit: contain;
}

/* Footer styling */
.hero-container-riesgo .hero-container__footer {
  background-color: transparent;
  padding: 40px 0px;
}

.hero-container-riesgo .hero-container__footer .my-swiper {
  max-width: 100%;
}

.hero-container-riesgo .my-swiper .swiper,
.hero-container-riesgo .my-swiper .swiper .swiper-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Footer cards - base styling */
.hero-riesgo__card {
  background-color: var(--color-brand-primary);
  color: var(--color-surface-base);
  padding: 20px;
  font-size: 1rem;
  border-radius: 20px;
  height: 100%;
  text-align: left;
}


.hero-container-riesgo[data-brand="oledinero"] .hero-riesgo__card {
  font-family: "Poppins", sans-serif;
  color: rgb(2, 45, 142);
  font-weight: 500;
  line-height: 1.4;
}

/* Credimoney brand */
.hero-container-riesgo[data-brand="credimoney"] {
  --container-text-color: rgb(46, 16, 71);
  --container-text-strong-color: rgb(46, 16, 71);
  background-color: rgb(216, 199, 255);
}

.hero-container-riesgo.container[data-brand="credimoney"] .hero-list li {
  color: rgb(46, 16, 71) !important;
}


.hero-container-riesgo.bg-gradient-inverse[data-brand="credimoney"] .btn-credimoney,
.hero-container-riesgo[data-brand="credimoney"] .btn-credimoney {
  background-color: rgb(248, 248, 146) !important;
  color: rgb(46, 16, 71) !important;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 40px;
  border: 2px solid rgb(248, 248, 146) !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="credimoney"]

.hero-container-riesgo[data-brand="credimoney"] .hero-riesgo__card {
  font-family: "Helvetica Neue", sans-serif;
  color: #2e1047;
}

/* Crediahora brand */
.hero-container-riesgo[data-brand="crediahora"] {
  --container-text-color: rgb(29, 29, 27);
  --container-text-strong-color: rgb(29, 29, 27);
  background-color: #f5f5f5;
}

.hero-container-riesgo.container[data-brand="crediahora"] .hero-list li {
  color: rgb(29, 29, 27) !important;
}

.hero-container-riesgo[data-brand="crediahora"] h2 {
  font-family: "Montserrat", sans-serif;
  font-feature-settings: normal;
  font-size: 36px;
  font-synthesis-position: none;
  font-synthesis-small-caps: none;
  font-synthesis-style: none;
  font-synthesis-weight: none;
  font-variation-settings: normal;
  font-weight: 900;
  line-height: 2.16rem;
  color: #1d1d1b;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="crediahora"] p {
  font-family: "Montserrat", sans-serif;
  font-feature-settings: normal;
  font-size: 18.72px;
  font-synthesis-position: none;
  font-synthesis-small-caps: none;
  font-synthesis-style: none;
  font-synthesis-weight: none;
  font-variation-settings: normal;
  font-weight: 400;
  line-height: 1.43rem;
  color: #1d1d1b;
  margin: 0;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="crediahora"] .btn-crediahora,
.hero-container-riesgo[data-brand="crediahora"] .btn-crediahora {
  background-color: rgb(29, 29, 27) !important;
  color: rgb(245, 245, 245) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0) !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="crediahora"]

.hero-container-riesgo[data-brand="crediahora"] .hero-riesgo__card {
  font-family: "Montserrat", sans-serif;
  color: #1d1d1b;
}

/* OleDinero brand */
.hero-container-riesgo[data-brand="oledinero"] {
  --container-text-color: rgb(2, 45, 142);
  --container-text-strong-color: rgb(2, 45, 142);
  background-color: rgb(215, 255, 123);
}

.hero-container-riesgo.container[data-brand="oledinero"] .hero-list li {
  color: rgb(2, 45, 142) !important;
}

.hero-container-riesgo[data-brand="oledinero"] h2 {
  font-family: "Poppins", sans-serif;
  font-feature-settings: normal;
  font-size: 39.6px;
  font-synthesis-position: none;
  font-synthesis-small-caps: none;
  font-synthesis-style: none;
  font-synthesis-weight: none;
  font-variation-settings: normal;
  font-weight: 700;
  line-height: 39.6px;
  color: #032d8f;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="oledinero"] p {
  font-family: "Poppins", sans-serif;
  font-feature-settings: normal;
  font-size: 20.16px;
  font-synthesis-position: none;
  font-synthesis-small-caps: none;
  font-synthesis-style: none;
  font-synthesis-weight: none;
  font-variation-settings: normal;
  font-weight: 600;
  line-height: 1.43rem;
  color: #032d8f;
  margin: 0;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="oledinero"] .btn-oledinero,
.hero-container-riesgo[data-brand="oledinero"] .btn-oledinero {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgb(3, 45, 143) !important;
  font-family: "Poppins", sans-serif;
  font-size: 16.56px;
  font-weight: 500;
  padding: 12px 25px;
  border-radius: 40px 40px 0px;
  border: 2px solid rgb(3, 45, 143) !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="oledinero"] .hero-list__icon {
  --list-icon-color: #032d8f !important;
  color: #032d8f !important;
}

.hero-container-riesgo[data-brand="oledinero"] .hero-riesgo__card {
  font-family: "Poppins", sans-serif;
  color: #032d8f;
}

/* Creditoamigo brand */
.hero-container-riesgo[data-brand="creditoamigo"] {
  --container-text-color: rgb(0, 0, 0);
  --container-text-strong-color: rgb(0, 0, 255);
  background-color: rgba(0, 0, 0, 0);
}

.hero-container-riesgo.container[data-brand="creditoamigo"] .hero-list li {
  color: rgb(0, 0, 0) !important;
}

.hero-container-riesgo[data-brand="creditoamigo"] h2 {
  font-family: "Seitu", sans-serif;
  font-feature-settings: normal;
  font-size: 2.22rem; /* 32px at base 14.4px */
  font-weight: 500;
  line-height: 2.22rem;
  color: rgb(0, 0, 255);
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditoamigo"] p {
  font-family: "Seitu", sans-serif;
  font-feature-settings: normal;
  font-size: 1.33rem; /* 19.2px at base 14.4px */
  font-weight: 400;
  line-height: 1.43rem;
  color: rgb(0, 0, 0);
  margin: 0;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="creditoamigo"] .btn-creditoamigo,
.hero-container-riesgo[data-brand="creditoamigo"] .btn-creditoamigo {
  background-color: rgb(0, 0, 255) !important;
  color: rgb(255, 255, 255) !important;
  font-family: "Seitu", sans-serif;
  font-size: 16.56px;
  font-weight: 400;
  padding: 12px 25px;
  border-radius: 40px;
  border: 2px solid rgb(0, 0, 255) !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* Credicheck brand */
.hero-container-riesgo[data-brand="credicheck"] {
  --container-text-color: rgb(0, 0, 0);
  --container-text-strong-color: #76bc74;
  background-color: rgba(0, 0, 0, 0);
}

.hero-container-riesgo.container[data-brand="credicheck"] .hero-list li {
  color: rgb(0, 0, 0) !important;
}

.hero-container-riesgo[data-brand="credicheck"] h2 {
  font-family: "Funnel Display", sans-serif;
  font-feature-settings: normal;
  font-size: 2.22rem; /* 32px at base 14.4px */
  font-weight: 500;
  line-height: 2.22rem;
  color: #76bc74;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="credicheck"] p {
  font-family: "Funnel Display", sans-serif;
  font-feature-settings: normal;
  font-size: 1.33rem; /* 19.2px at base 14.4px */
  font-weight: 400;
  line-height: 1.43rem;
  color: rgb(0, 0, 0);
  margin: 0;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="credicheck"] .btn-credicheck,
.hero-container-riesgo[data-brand="credicheck"] .btn-credicheck {
  background-color: #76bc74 !important;
  color: rgb(255, 255, 255) !important;
  font-family: "Funnel Display", sans-serif;
  font-size: 16.56px;
  font-weight: 400;
  padding: 12px 25px;
  border-radius: 40px;
  border: 2px solid #76bc74 !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* Creditoclic brand */
.hero-container-riesgo[data-brand="creditoclic"] {
  --container-text-color: rgb(7, 48, 52);
  --container-text-strong-color: rgb(7, 48, 52);
  background-color: rgb(234, 238, 239);
}

.hero-container-riesgo.container[data-brand="creditoclic"] .hero-list li {
  color: rgb(7, 48, 52) !important;
}

.hero-container-riesgo[data-brand="creditoclic"] h2 {
  font-family: "Harabara", sans-serif;
  font-feature-settings: normal;
  font-size: 2rem; /* 28.8px at base 14.4px */
  font-weight: 500;
  line-height: 2rem;
  color: rgb(7, 48, 52);
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditoclic"] p {
  font-family: "Montserrat", sans-serif;
  font-feature-settings: normal;
  font-size: 1.2rem; /* 17.28px at base 14.4px */
  font-weight: 500;
  line-height: 1.43rem;
  color: rgb(7, 48, 52);
  margin: 0;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="creditoclic"] .btn-creditoclic,
.hero-container-riesgo[data-brand="creditoclic"] .btn-creditoclic {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgb(7, 48, 52) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 16.56px;
  font-weight: 500;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid rgb(7, 48, 52) !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* Creditopro brand */
.hero-container-riesgo[data-brand="creditopro"] {
  --container-text-color: rgb(51, 51, 51);
  --container-text-strong-color: rgb(51, 51, 51);
  background-color: rgb(255, 255, 255);
}

.hero-container-riesgo.container[data-brand="creditopro"] .hero-list li {
  color: rgb(51, 51, 51) !important;
}

.hero-container-riesgo[data-brand="creditopro"] h2 {
  font-family: "Open Sans", sans-serif;
  font-feature-settings: normal;
  font-size: 2rem; /* 28.8px at base 14.4px */
  font-weight: 800;
  line-height: 2rem;
  color: rgb(51, 51, 51);
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditopro"] p {
  font-family: "Open Sans", sans-serif;
  font-feature-settings: normal;
  font-size: 1.4rem; /* 20.16px at base 14.4px */
  font-weight: 400;
  line-height: 1.43rem;
  color: rgb(51, 51, 51);
  margin: 0;
}

.hero-container-riesgo[data-brand="creditopro"] .hero-riesgo__card {
  font-family: "Open Sans", sans-serif;
  color: #333333;
  font-weight: 400;
  line-height: 1.4;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="creditopro"] .btn-creditopro,
.hero-container-riesgo[data-brand="creditopro"] .btn-creditopro {
  background-color: rgb(51, 51, 51) !important;
  color: rgb(243, 243, 243) !important;
  font-family: "Open Sans", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid rgb(51, 51, 51) !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* Crediator brand styles */
.hero-container-riesgo[data-brand="crediator"] {
  --container-text-color: #333333;
  --container-text-strong-color: #333333;
  background-color: #f2f2f2;
}

.hero-container-riesgo.container[data-brand="crediator"] .hero-list li {
  color: #333333 !important;
}

.hero-container-riesgo[data-brand="crediator"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2rem;
  color: #333333;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="crediator"] p {
  font-family: "Manrope", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.43rem;
  color: #333333;
  margin: 0;
}


.hero-container-riesgo.bg-gradient-inverse[data-brand="crediator"] .btn-crediator,
.hero-container-riesgo[data-brand="crediator"] .btn-crediator {
  background-color: #f2d5e0 !important;
  color: #333333 !important;
  font-family: "Manrope", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid transparent !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* Credifix brand styles */
.hero-container-riesgo[data-brand="credifix"] {
  --container-text-color: #182d52;
  --container-text-strong-color: #182d52;
  background-color: #d9e4f5;
}

.hero-container-riesgo.container[data-brand="credifix"] .hero-list li {
  color: #182d52 !important;
}

.hero-container-riesgo[data-brand="credifix"] h2 {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 2rem;
  color: #182d52;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="credifix"] p {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.43rem;
  color: #182d52;
  margin: 0;
}

.hero-container-riesgo[data-brand="credifix"] .hero-riesgo__card {
  font-family: "Roboto", sans-serif;
  color: #182d52;
  font-weight: 400;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="credifix"] .btn-credifix,
.hero-container-riesgo[data-brand="credifix"] .btn-credifix {
  background-color: #96b4e6 !important;
  color: #182d52 !important;
  font-family: "Roboto", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 10px;
  border: 2px solid transparent !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="credifix"] .hero-list__icon {
  --list-icon-color: #ff0086 !important;
  color: #ff0086 !important;
}

/* Crediscore brand styles */
.hero-container-riesgo[data-brand="crediscore"] {
  --container-text-color: #000000;
  --container-text-strong-color: #000000;
  background-color: #e1f1fc;
}

.hero-container-riesgo.container[data-brand="crediscore"] .hero-list li {
  color: #000000 !important;
}

.hero-container-riesgo[data-brand="crediscore"] h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2rem;
  color: #000000;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="crediscore"] p {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.43rem;
  color: #000000;
  margin: 0;
}

.hero-container-riesgo[data-brand="crediscore"] .hero-riesgo__card {
  color: #000000;
  font-weight: 400;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="crediscore"] .btn-crediscore,
.hero-container-riesgo[data-brand="crediscore"] .btn-crediscore {
  background-color: #907ee8 !important;
  color: #ffffff !important;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid transparent !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="crediscore"] .hero-list__icon {
  --list-icon-color: #907ee8 !important;
  color: #907ee8 !important;
}

/* Creditando brand styles */
.hero-container-riesgo[data-brand="creditando"] {
  --container-text-color: #002449;
  --container-text-strong-color: #002449;
  background-color: #ddecee;
}

.hero-container-riesgo.container[data-brand="creditando"] .hero-list li {
  color: #002449 !important;
}

.hero-container-riesgo[data-brand="creditando"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2rem;
  color: #002449;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditando"] p {
  font-family: "Manrope", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.43rem;
  color: #002449;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditando"] .hero-riesgo__card {
  font-family: "Manrope", sans-serif;
  color: #002449;
  font-weight: 500;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="creditando"] .btn-creditando,
.hero-container-riesgo[data-brand="creditando"] .btn-creditando {
  background-color: transparent !important;
  color: #002449 !important;
  font-family: "Manrope", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 0;
  border: 2px solid #002449 !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="creditando"] .hero-list__icon {
  --list-icon-color: #c6fd00 !important;
  color: #c6fd00 !important;
}

/* Crediticio brand */
.hero-container-riesgo[data-brand="crediticio"] {
  --container-text-color: #13233a;
  --container-text-strong-color: #13233a;
  background-color: #ffa573;
}

.hero-container-riesgo.container[data-brand="crediticio"] .hero-list li {
  color: #13233a !important;
}

.hero-container-riesgo[data-brand="crediticio"] h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: #13233a;
}

.hero-container-riesgo[data-brand="crediticio"] p {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
}

.hero-container-riesgo[data-brand="crediticio"] .hero-riesgo__card {
  font-family: "Open Sans", sans-serif;
  color: #13233a;
  font-weight: 400;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="crediticio"] .btn-crediticio,
.hero-container-riesgo[data-brand="crediticio"] .btn-crediticio {
  background-color: #13233a !important;
  color: #ffa573 !important;
  font-family: "Open Sans", sans-serif;
  font-size: 16.56px;
  font-weight: 600;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid #13233a !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="crediticio"] .hero-list__icon {
  --list-icon-color: #13233a !important;
  color: #13233a !important;
}

/* Creditozas brand */
.hero-container-riesgo[data-brand="creditozas"] {
  --container-text-color: #000000;
  --container-text-strong-color: #000000;
  background-color: #f2f4f4;
}

.hero-container-riesgo.container[data-brand="creditozas"] .hero-list li {
  color: #000000 !important;
}

.hero-container-riesgo[data-brand="creditozas"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2rem;
  color: #000000;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditozas"] p {
  font-family: "Manrope", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.43rem;
  color: #000000;
  margin: 0;
}

.hero-container-riesgo[data-brand="creditozas"] .hero-riesgo__card {
  font-family: "Manrope", sans-serif;
  color: #000000;
  font-weight: 400;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="creditozas"] .btn-creditozas,
.hero-container-riesgo[data-brand="creditozas"] .btn-creditozas {
  background-color: #000000 !important;
  color: #96b4e6 !important;
  font-family: "Manrope", sans-serif;
  font-size: 16.56px;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid #000000 !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="creditozas"] .hero-list__icon {
  --list-icon-color: #96b4e6 !important;
  color: #96b4e6 !important;
}

/* Credizoom brand */
.hero-container-riesgo[data-brand="credizoom"] {
  --container-text-color: #000000;
  --container-text-strong-color: #000000;
  background-color: #f4f8f9;
}

.hero-container-riesgo.container[data-brand="credizoom"] .hero-list li {
  color: #000000 !important;
}

.hero-container-riesgo[data-brand="credizoom"] h2 {
  font-family: "AdobeClean", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2rem;
  color: #000000;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="credizoom"] p {
  font-family: "AdobeClean", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.43rem;
  color: #000000;
  margin: 0;
}

.hero-container-riesgo[data-brand="credizoom"] .hero-riesgo__card {
  font-family: "AdobeClean", sans-serif;
  color: #000000;
  font-weight: 400;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="credizoom"] .btn-credizoom,
.hero-container-riesgo[data-brand="credizoom"] .btn-credizoom {
  background-color: #000000 !important;
  color: #4eb5a4 !important;
  font-family: "AdobeClean", sans-serif;
  font-size: 16.56px;
  font-weight: 500;
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid #000000 !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="credizoom"] .hero-list__icon {
  --list-icon-color: #4eb5a4 !important;
  color: #4eb5a4 !important;
}

/* Mastercredi brand */
.hero-container-riesgo[data-brand="mastercredi"] {
  --container-text-color: #1a1a1a;
  --container-text-strong-color: #1a1a1a;
  background-color: #f7f9fa;
}

.hero-container-riesgo.container[data-brand="mastercredi"] .hero-list li {
  color: #1a1a1a !important;
}

.hero-container-riesgo[data-brand="mastercredi"] h2 {
  font-family: "Coolvetica", sans-serif;
  font-size: 39.6px;
  font-weight: 700;
  line-height: 47.52px;
  color: #1a1a1a;
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="mastercredi"] p {
  font-family: "AdobeClean", sans-serif;
  font-size: 22.32px;
  font-weight: 500;
  line-height: 29.016px;
  color: #1a1a1a;
  margin: 0;
}

.hero-container-riesgo[data-brand="mastercredi"] .hero-riesgo__card {
  font-family: "AdobeClean", sans-serif;
  color: #1a1a1a;
  font-weight: 400;
  line-height: 1.4;
  background-color: #ffffff;
}

.hero-container-riesgo.bg-gradient-inverse[data-brand="mastercredi"] .btn-mastercredi,
.hero-container-riesgo[data-brand="mastercredi"] .btn-mastercredi {
  background-color: #1a1a1a !important;
  color: #e2e8ed !important;
  font-family: "AdobeClean", sans-serif;
  font-size: 16.56px;
  font-weight: 600;
  padding: 12px 25px;
  border-radius: 10px;
  border: none !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-container-riesgo[data-brand="mastercredi"] .hero-list__icon {
  --list-icon-color: #1a1a1a !important;
  color: #1a1a1a !important;
}


/* === styles.css === */
/**
 * ServiceHeroHeader Styles
 *
 * Unified component for service/product hero headers across brands.
 * Features:
 * - Two-column layout (content + image)
 * - Title, subtitle, bullet list, and CTA button
 * - Brand-specific styling
 * - Responsive design
 */

:root {
  & .service-hero-header {
    padding: 0;
  }

  & .service-hero-header__container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 20px;
  }

  & .service-hero-header__row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
  }

  & .service-hero-header__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  & .service-hero-header__title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 800;
  }

  & .service-hero-header__subtitle {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 600;
  }

  & .service-hero-header__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  & .service-hero-header__list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;

    & svg{
       color: var(--color-brand-primary);
    }
  }

  & .service-hero-header__list-icon {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
  }

  & .service-hero-header__buttons {
    display: flex;
    gap: 10px;
    flex-direction: column;

  }

  & .service-hero-header__button {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    background-color: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
    color: var(--color-surface-base) !important;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  & .service-hero-header__image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & .service-hero-header__image {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Credimoney brand styles */
  & .service-hero-header--credimoney {
    & .service-hero-header__title {
      color: rgb(46, 16, 71);
    }

    & .service-hero-header__subtitle {
      color: rgb(46, 16, 71);
    }

    & .service-hero-header__list-item {
      color: rgb(46, 16, 71);
      font-weight: 400;
    }

    & .service-hero-header__list-icon {
      color: rgb(248, 248, 146);
    }

    & .service-hero-header__button {
      background-color: rgb(248, 248, 146);
      color: rgb(46, 16, 71);
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: rgb(238, 238, 126);
      }
    }
  }

  /* Crediahora brand styles */
  & .service-hero-header--crediahora {
    & .service-hero-header__title {
      font-weight: 900;
    }

    & .service-hero-header__subtitle {
      font-weight: 400;
    }

    & .service-hero-header__list-item {
      font-weight: 400;
    }

    & .service-hero-header__list-icon {
      color: rgb(139, 195, 74);
    }

    & .service-hero-header__button {
      background-color: rgb(29, 29, 27);
      color: rgb(245, 245, 245);
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: rgb(50, 50, 48);
      }
    }
  }

  /* CreditoAmigo brand styles */
  & .service-hero-header--creditoamigo {
    & .service-hero-header__title {
      font-family: Seitu, sans-serif;
      font-weight: 700;
      color: #0000FF;
    }

    & .service-hero-header__subtitle {
      font-family: Seitu, sans-serif;
      color: #1D2C56;
    }

    & .service-hero-header__list-item {
      font-family: Seitu, sans-serif;
      color: #1D2C56;
    }

    & .service-hero-header__list-icon {
      color: #0000FF;
    }

    & .service-hero-header__button {
      background-color: #0000FF;
      color: #ffffff;
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: #1D2C56;
      }
    }
  }

  /* CreditoClic brand styles */
  & .service-hero-header--creditoclic {
    & .service-hero-header__title {
      font-family: Harabara, sans-serif;
      font-weight: 700;
      color: #073034;
    }

    & .service-hero-header__subtitle {
      font-family: Harabara, sans-serif;
      color: #073034;
    }

    & .service-hero-header__list-item {
      font-family: Harabara, sans-serif;
      color: #073034;
    }

    & .service-hero-header__list-icon {
      color: #7AC4AE;
    }

    & .service-hero-header__button {
      background-color: #073034;
      color: #ADEF45;
      border-radius: 40px;
      font-weight: 700;

      &:hover {
        background-color: #22767C;
      }
    }
  }

  /* CreditoPRO brand styles - white text on blue background */
  & .service-hero-header--creditopro {
    & .service-hero-header__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #ffffff;
    }

    & .service-hero-header__subtitle {
      font-family: "Open Sans", sans-serif;
      color: #ffffff;
    }

    & .service-hero-header__list-item {
      font-family: "Open Sans", sans-serif;
      color: #ffffff;
    }

    & .service-hero-header__list-icon {
      color: #ffffff;
    }

    & .service-hero-header__button {
      background-color: #333333;
      color: rgb(243, 243, 243);
      border-radius: 999px;
      font-weight: 600;

      &:hover {
        background-color: #444444;
      }
    }
  }

  /* OleDinero brand styles */
  & .service-hero-header--oledinero {
    & .service-hero-header__title {
      font-family: Poppins, sans-serif;
      font-weight: 700;
      color: rgb(215, 255, 123);
    }

    & .service-hero-header__subtitle {
      font-family: Poppins, sans-serif;
      font-weight: 600;
      color: rgb(255, 255, 255);
    }

    & .service-hero-header__list-item {
      font-family: Poppins, sans-serif;
      color: rgb(255, 255, 255);
    }

    & .service-hero-header__list-icon {
      color: rgb(215, 255, 123);
    }

    & .service-hero-header__button {
      background-color: transparent;
      color: rgb(255, 255, 255);
      border: 2px solid #d7ff7b;
      border-radius: 40px 40px 0px;
      font-weight: 500;

      &:hover {
        background-color: rgba(215, 255, 123, 0.1);
      }
    }
  }

  /* Crediator brand styles */
  & .service-hero-header--crediator {
    & .service-hero-header__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #333333;
    }

    & .service-hero-header__subtitle {
      font-family: "Manrope", sans-serif;
      color: #333333;
    }

    & .service-hero-header__list-item {
      font-family: "Manrope", sans-serif;
      color: #333333;
    }

    & .service-hero-header__list-icon {
      color: #f55f99;
    }

    & .service-hero-header__button {
      background-color: #f2d5e0;
      color: #333333;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #e8c1ce;
      }
    }
  }

  /* Credifix brand styles */
  & .service-hero-header--credifix {
    & .service-hero-header__title {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      color: #182d52;
    }

    & .service-hero-header__subtitle {
      font-family: "Roboto", sans-serif;
      color: #182d52;
    }

    & .service-hero-header__list-item {
      font-family: "Roboto", sans-serif;
      color: #182d52;
    }

    & .service-hero-header__list-icon {
      color: #ff0086;
    }

    & .service-hero-header__button {
      background-color: #96b4e6;
      color: #182d52;
      border-radius: 10px;
      font-weight: 700;

      &:hover {
        background-color: #7a9bd4;
      }
    }
  }

  /* Crediscore brand styles */
  & .service-hero-header--crediscore {
    padding-top: 40px;

    & .service-hero-header__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #000000;
    }

    & .service-hero-header__subtitle {
      font-family: "Open Sans", sans-serif;
      color: #000000;
    }

    & .service-hero-header__list-item {
      font-family: "Open Sans", sans-serif;
      color: #000000;
    }

    & .service-hero-header__list-icon {
      color: #907ee8;
    }

    & .service-hero-header__button {
      background-color: #907ee8;
      color: #ffffff;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #7a68d0;
      }
    }
  }

  /* Creditando brand styles */
  & .service-hero-header--creditando {
    & .service-hero-header__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #002449;
    }

    & .service-hero-header__subtitle {
      font-family: "Manrope", sans-serif;
      color: #002449;
    }

    & .service-hero-header__list-item {
      font-family: "Manrope", sans-serif;
      color: #002449;
    }

    & .service-hero-header__list-icon {
      color: #c6fd00;
    }

    & .service-hero-header__button {
      background-color: transparent;
      color: #002449;
      border: 2px solid #002449;
      border-radius: 0;
      font-weight: 700;

      &:hover {
        background-color: rgba(0, 36, 73, 0.1);
      }
    }
  }

  /* Crediticio brand styles */
  & .service-hero-header--crediticio {
    padding-top: 40px;

    & .service-hero-header__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #13233a;
    }

    & .service-hero-header__subtitle {
      font-family: "Open Sans", sans-serif;
      color: #000000;
    }

    & .service-hero-header__list-item {
      font-family: "Open Sans", sans-serif;
      color: #000000;
    }

    & .service-hero-header__list-icon {
      color: #ffa573;
    }

    & .service-hero-header__button {
      background-color: #13233a;
      color: #ffa573;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #0d1829;
      }
    }
  }

  /* Creditozas brand styles */
  & .service-hero-header--creditozas {
    & .service-hero-header__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #000000;
    }

    & .service-hero-header__subtitle {
      font-family: "Manrope", sans-serif;
      color: #000000;
    }

    & .service-hero-header__list-item {
      font-family: "Manrope", sans-serif;
      color: #000000;
    }

    & .service-hero-header__list-icon {
      color: #96b4e6;
    }

    & .service-hero-header__button {
      background-color: #000000;
      color: #96b4e6;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #333333;
      }
    }
  }

  /* Credizoom brand styles */
  & .service-hero-header--credizoom {
    & .service-hero-header__image {
      max-width: 620px;
      max-height: 600px;
    }

    & .service-hero-header__title {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #4eb5a4;
      text-transform: uppercase;
    }

    & .service-hero-header__subtitle {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .service-hero-header__list-item {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      color: #000000;
    }

    & .service-hero-header__list-icon {
      color: #4eb5a4;
    }

    & .service-hero-header__button {
      background-color: #000000;
      color: #4eb5a4;
      border-radius: 999px;
      font-weight: 500;

      &:hover {
        background-color: #333333;
      }
    }
  }

  /* Mastercredi brand styles */
  & .service-hero-header--mastercredi {
    & .service-hero-header__title {
      font-family: "Coolvetica", sans-serif !important;
      font-weight: 700;
      font-size: 43.2px;
      color: #1a1a1a;
    }

    & .service-hero-header__subtitle {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      font-size: 22.32px;
      color: #1a1a1a;
    }

    & .service-hero-header__list-item {
      font-family: "AdobeClean", sans-serif;
      font-weight: 500;
      font-size: 16.56px !important;
      color: #1a1a1a;
    }

    & .service-hero-header__list-icon {
      color: #1a1a1a;
    }

    & .service-hero-header__button {
      background-color: #1a1a1a;
      color: #e2e8ed;
      border-radius: 10px;
      font-weight: 700;
      font-size: 16.56px !important;

      &:hover {
        background-color: #333333;
      }
    }

    /* Informe-solvencia specific image size */
    & img[src*="InformeSolvencia"] {
      max-width: 357px !important;
      max-height: 500px !important;
    }
  }

  /* CrediTal brand styles */
  & .service-hero-header--credital {
    & .service-hero-header__title {
      font-weight: 700;
      color: #A318E1;
    }

    & .service-hero-header__subtitle {
      font-weight: 500;
      color: #34323F;
    }

    & .service-hero-header__list-item {
      color: #34323F;
    }

    & .service-hero-header__list-icon {
      color: #A318E1;
    }

    & .service-hero-header__button {
      background-color: #A318E1;
      color: #ffffff;
      border-radius: 999px;
      font-weight: 700;

      &:hover {
        background-color: #8A14BF;
      }
    }
  }
}

/* CrediCheck brand styles */
& .service-hero-header--credicheck {
  & .service-hero-header__title {
    font-family: Funnel Display, sans-serif;
    font-weight: 700;
    color: #18384e;
  }

  & .service-hero-header__subtitle {
    font-family: Funnel Display, sans-serif;
    color: #76bc74;
  }

  & .service-hero-header__list-item {
    font-family: Funnel Display, sans-serif;
    color: #76bc74;
  }

  & .service-hero-header__list-icon {
    color: #18384e;
  }

  & .service-hero-header__button {
    background-color: #18384e;
    color: #ffffff;
    border-radius: 40px;
    font-weight: 700;

    &:hover {
      background-color: #76bc74;
    }
  }
}

/* CrediCheck brand styles */
& .service-hero-header--credisolve {
  & .service-hero-header__title {
    font-weight: 800;
  }

  & .service-hero-header__subtitle {
    font-size: var(--font-size-xl);
    font-weight: 600 !important;
  }

  & .service-hero-header__list-item {
    font-weight: normal;
  }


  & .service-hero-header__button {
    background-color: var(--services-button-bg, rgb(248, 248, 146));
    color: var(--services-button-color, rgb(46, 16, 71));
    border-radius: var(--services-button-border-radius, 40px);
    font-weight: var(--services-button-font-weight, 700);

    &:hover {
      background-color: var(--services-button-bg, rgb(248, 248, 146));
    }
  }
}

@media (width >=1024px) {
  :root {
    & .service-hero-header__container {
      max-width: 80rem;
      padding: 0;
    }
  }
}

@media (width >=1600px) {
  :root {
    & .service-hero-header__container {
      max-width: 80rem;
    }
  }
}

@media (width >=768px) {
  :root {
    & .service-hero-header__row {
      flex-direction: row;
      gap: 60px;
    }

    & .service-hero-header__content {
      flex: 1;
    }

    & .service-hero-header__image-wrapper {
      flex: 1;
    }

    & .service-hero-header__buttons {
      flex-direction: row;
    }
  }
}

@media (width >=1024px) {
  :root {
    & .service-hero-header__title {
      font-size: 2.5rem;
    }

    & .service-hero-header__subtitle {
      font-size: 1.25rem;
    }
  }
}


/* === index.css === */


/* === styles.css === */
.soporte-page {
  min-height: 500px;
}

.soporte-content {
  max-width: 1100px;
  margin: 5rem auto;
  text-align: center;
  padding: 1rem var(--body-padding-horizontal);
}

.soporte-content h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--primary-color, #333);
}

.soporte-intro {
  font-size: 1.25rem;
  margin-bottom: 3rem;
  color: var(--grey-600, #666);
}

.soporte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.soporte-card {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05),
    0 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.soporte-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--primary-color, rgba(0, 123, 255, 0.2));
}

.soporte-card__icon {
  font-size: 2.5rem;
  color: var(--primary-color, #007bff);
  margin-bottom: 1.5rem;
}

.soporte-card h3 {
  margin-bottom: 1rem;
}

.soporte-card p {
  margin-bottom: 2rem;
  color: var(--grey-600, #666);
}

.support-description {
  font-weight: 100;
}

.list-support li {
  margin-bottom: 1rem;
}

.brand-name-capitalize {
  text-transform: capitalize;
  font-weight: bold;
}

/* === index.css === */
/* status mobile */
.container-status {
  display: flex;
  flex-direction: column-reverse;
  padding: 2rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: justify;
}

.form-status {
  background: #ccc;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.input-status {
  padding: 1rem;
  font-size: 1.2rem;
}

.input-submit-status {
  width: 100%;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: white;
  border-radius: 10px;
  font-size: 1.2rem;
}

.input-submit-status:hover {
  cursor: pointer;
}

.result-status {
  display: flex;
  flex-direction: column;
}

.container-img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.container-button {
  align-self: flex-end;
}

.button--status {
  padding: 1em 2em;
  border-radius: 10px;
  background: green;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button--status:hover {
  background: #006400;
  cursor: pointer;
}

.container-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.error-message {
  color: #d32f2f;
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 0.25rem;
}

.input-error {
  border: 2px solid #d32f2f !important;
  background-color: #fff8f8;
}

.status-description p,
.result-status p {
  font-weight: 100;
}

.result-user-status {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}

/* for tablet and desktop */
@media (width >=768px) {
  .container-status {
    flex-direction: row;
    width: 1200px;
    margin: 0 auto;
    margin-top: 2rem;
    gap: 5rem;
    justify-content: space-around;
    align-items: center;
  }

  .status-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 50%;
  }

  .form-status {
    width: 100%;
    height: 300px;
  }
}

/* === StatusReceived.css === */
/* ── Status Received Card ── */
.status-received {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.08);
  border-top: 5px solid #4682b4;
  max-width: 520px;
  margin: 0 auto;
  animation: receivedFadeIn 0.4s ease-out;
  margin-bottom: 2rem;
}

.status-received__icon {
  font-size: 2.75rem;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(70, 130, 180, 0.1);
  margin-bottom: 1rem;
}

.status-received__title {
  margin: 1.2rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a2e;
}

.status-received__text {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  text-align: justify;
}

/* ── Buttons ── */
.status-received__actions {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.status-received__btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.status-received__btn:hover {
  transform: translateY(-1px);
}

.status-received__btn:active {
  transform: translateY(0);
}

.status-received__btn--accept {
  background: #27ae60;
  color: #fff;
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

.status-received__btn--accept:hover {
  background: #219a52;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.status-received__btn--reject {
  background: #e74c3c;
  color: #fff;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.status-received__btn--reject:hover {
  background: #cf4436;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

/* ── Animation ── */
@keyframes receivedFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .status-received {
    padding: 1.5rem;
  }

  .status-received__actions {
    flex-direction: column;
  }
}

/* === StatusTimeline.css === */
.timeline {
  position: relative;
  padding: 1.5rem 0;
  font-family: inherit;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 110px;
  width: 2px;
  background: #e5e7eb;
}

.tm-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tm-items>li {
  position: relative;
  margin-bottom: 2.5rem;
}

.tm-box {
  padding-left: 140px;
  position: relative;
}

/* Date Header */
.tm-date-header {
  position: absolute;
  left: 0;
  top: -24px;
  margin: 0;
  background-color: #fff;
  padding-right: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

.tm-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tm-event {
  margin-bottom: 1.25rem;
  position: relative;
}

.tm-event:last-child {
  margin-bottom: 0;
}

/* Time indicator dot on the line */
.tm-event::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3b82f6;
  z-index: 2;
  transition: transform 0.2s ease;
}

.tm-event:hover::before {
  transform: scale(1.3);
  background: #3b82f6;
}

.tm-event-time {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
}

.tm-event-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.tm-event-text {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.4;
}

/* Labels */
.label {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.label-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.label-danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.label-success {
  background-color: #d1fae5;
  color: #065f46;
}

.label-info {
  background-color: #dbeafe;
  color: #1e40af;
}

.label-register {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #10b981;
  font-weight: bold
}

/* Responsive */
@media (max-width: 640px) {
  .timeline::before {
    left: 20px;
  }

  .tm-box {
    padding-left: 50px;
  }

  .tm-date-header {
    position: static;
    display: block;
    margin-bottom: 1rem;
    padding-left: 0;
  }

  .tm-event::before {
    left: -33px;
  }

  .tm-event-time {
    font-size: 0.75rem;
  }
}

/* Links in timeline */
a.status-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

a.status-link:hover {
  opacity: 0.85;
}

.tm-event-text a.status-link {
  color: #3b82f6;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.15s ease;
}

.tm-event-text a.status-link:hover {
  color: #1d4ed8;
  opacity: 1;
}

/* === index.css === */
/* ── Status Card ── */
.status-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #4682b4;
  max-width: 520px;
  margin: 0 auto;
  animation: statusFadeIn 0.4s ease-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

/* ── Icon ── */
.status-card__icon {
  font-size: 2.25rem;
  line-height: 1;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(70, 130, 180, 0.1);
}

/* ── Content ── */
.status-card__content {
  flex: 1;
  min-width: 0;
}

.status-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4682b4;
  background: rgba(70, 130, 180, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  margin-bottom: 0.5rem;
}

.status-card__title {
  margin: 0.35rem 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a2e;
}

.status-card__description {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
}

/* ── Progress Bar ── */
.status-card__progress {
  width: 100%;
  height: 6px;
  background: #e8ecf1;
  border-radius: 3px;
  overflow: hidden;
}

.status-card__progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4682b4, #5a9fd4);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Color Variants (border + accent overrides) ── */
.status-info {
  border-left-color: #4682b4;
}
.status-info .status-card__badge,
.status-info .status-card__icon {
  color: #4682b4;
  background: rgba(70, 130, 180, 0.1);
}
.status-info .status-card__progress-bar {
  background: linear-gradient(90deg, #4682b4, #5a9fd4);
}

.status-review {
  border-left-color: #e67e22;
}
.status-review .status-card__badge,
.status-review .status-card__icon {
  color: #e67e22;
  background: rgba(230, 126, 34, 0.1);
}
.status-review .status-card__progress-bar {
  background: linear-gradient(90deg, #e67e22, #f5a623);
}

.status-warning {
  border-left-color: #f39c12;
}
.status-warning .status-card__badge,
.status-warning .status-card__icon {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
}
.status-warning .status-card__progress-bar {
  background: linear-gradient(90deg, #f39c12, #fbc02d);
}

.status-processing {
  border-left-color: #3498db;
}
.status-processing .status-card__badge,
.status-processing .status-card__icon {
  color: #3498db;
  background: rgba(52, 152, 219, 0.1);
}
.status-processing .status-card__progress-bar {
  background: linear-gradient(90deg, #3498db, #5dade2);
}

.status-verify {
  border-left-color: #1abc9c;
}
.status-verify .status-card__badge,
.status-verify .status-card__icon {
  color: #1abc9c;
  background: rgba(26, 188, 156, 0.1);
}
.status-verify .status-card__progress-bar {
  background: linear-gradient(90deg, #1abc9c, #48c9b0);
}

.status-preapproved {
  border-left-color: #9b59b6;
}
.status-preapproved .status-card__badge,
.status-preapproved .status-card__icon {
  color: #9b59b6;
  background: rgba(155, 89, 182, 0.1);
}
.status-preapproved .status-card__progress-bar {
  background: linear-gradient(90deg, #9b59b6, #bb8fce);
}

.status-approved {
  border-left-color: #27ae60;
}
.status-approved .status-card__badge,
.status-approved .status-card__icon {
  color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
}
.status-approved .status-card__progress-bar {
  background: linear-gradient(90deg, #27ae60, #52d681);
}

.status-disbursement {
  border-left-color: #2980b9;
}
.status-disbursement .status-card__badge,
.status-disbursement .status-card__icon {
  color: #2980b9;
  background: rgba(41, 128, 185, 0.1);
}
.status-disbursement .status-card__progress-bar {
  background: linear-gradient(90deg, #2980b9, #5499c7);
}

.status-completed {
  border-left-color: #2ecc71;
}
.status-completed .status-card__badge,
.status-completed .status-card__icon {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
}
.status-completed .status-card__progress-bar {
  background: linear-gradient(90deg, #2ecc71, #58d68d);
}

.status-rejected {
  border-left-color: #e74c3c;
}
.status-rejected .status-card__badge,
.status-rejected .status-card__icon {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}
.status-rejected .status-card__progress-bar {
  background: linear-gradient(90deg, #e74c3c, #ec7063);
}

/* ── Animation ── */
@keyframes statusFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .status-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
  }
}

/* ── Confirmation Modal ── */
.confirm-input {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.confirm-input:focus {
  outline: none;
  border-color: #27ae60;
}

.modal-confirm-desistir .modal-body {
  padding: 2rem 1.5rem;
  text-align: center;
}

.status-received__btn.disabled {
  background: #ccc !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.modal-confirm-desistir .modal-footer {
  justify-content: center;
  padding: 1.5rem;
}


/* === styles.css === */
:root {
  --swiper-wrapper-max-width: 100%;
  --swiper-wrapper-pagination-button-offset: 100px;

  & .my-swiper {
    &.my-swiper-pagination {
      --swiper-wrapper-padding-bottom: 50px;
    }

    --swiper-wrapper-pagination-bullet-flex-gap: 10px;
    --swiper-wrapper-pagination-bullet-size: 10px;
    --swiper-wrapper-pagination-bullet-bg-color: #e6e6e6;
    --swiper-wrapper-pagination-bullet-active-bg-color: #b3b3b3;
    --swiper-wrapper-pagination-button-width: 48px;
  }
}

@media (width >= 1024px) {
  :root {
    --swiper-wrapper-max-width: calc(
      100% - var(--swiper-wrapper-pagination-button-offset) -
        var(--swiper-wrapper-pagination-button-offset)
    );

    & .my-swiper {
      --swiper-wrapper-pagination-bullet-flex-gap: 18px;
      --swiper-wrapper-pagination-bullet-size: 18px;

      &.my-swiper-pagination {
        --swiper-wrapper-padding-bottom: 75px;
        max-width: 100%;
      }
    }
  }
}

@media (width >= 1600px) {
  :root {
    --swiper-wrapper-max-width: calc(
      1400px - var(--swiper-wrapper-pagination-button-offset) -
        var(--swiper-wrapper-pagination-button-offset)
    );
  }
}

.my-swiper {
  position: relative;
  padding-bottom: var(--swiper-wrapper-padding-bottom);
  max-width: var(--swiper-wrapper-max-width);
  margin: 0 auto;
  overflow: hidden;

  & .swiper {
    padding: 0;
    @media (min-width: 768px) {
      padding: 0 20px;
    }

    & .swiper-slide {
      height: auto;
      padding: 0 !important;
      @media (min-width: 768px) {
        padding: 0 20px !important;
      }
    }
  }

  & .my-swiper__pagination {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--swiper-wrapper-pagination-bullet-flex-gap);

    & .my-swiper__bullet {
      width: var(--swiper-wrapper-pagination-bullet-size);
      height: var(--swiper-wrapper-pagination-bullet-size);
      background-color: var(--swiper-wrapper-pagination-bullet-bg-color);
      border-radius: 100%;

      &.my-swiper__activeBullet {
        background-color: var(
          --swiper-wrapper-pagination-bullet-active-bg-color
        );
      }
    }
  }

  & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
    color: #ccc;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    display: none;
    background: none;
    border: none;
    cursor: pointer;

    &.my-swiper__nextBtn {
      right: calc(var(--swiper-wrapper-pagination-button-offset) * -1);
    }
    &.my-swiper__prevBtn {
      left: calc(var(--swiper-wrapper-pagination-button-offset) * -1);
    }

    & svg {
      width: var(--swiper-wrapper-pagination-button-width);
      height: var(--swiper-wrapper-pagination-button-width);
    }
  }
}

@media (width >= 1024px) {
  .my-swiper {
    & .swiper {
      padding-bottom: 0px;
    }
    margin: 0 auto;

    & .my-swiper__nextBtn,
    & .my-swiper__prevBtn {
      display: block;
      padding: 3px;
    }
  }
}


/* === styles.css === */
:root {
  & .swipe-features {
    background: #ffffff;
    position: relative;

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      top: 30%;
      background: none;
      border: none;
      cursor: pointer;
    }

    & .swiper-slide {
      padding: 0 !important;
    }

    & .swiper {
      &::after {
        content: "";
        height: 5px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        left: 275.25px;
        right: 275.25px;
      }
    }
  }

  & .swiper-features-card {
    padding: 20px 30px;
    text-align: center;
    border-radius: 99999px;
    font-size: 16.56px;
    line-height: 1.45;
    font-weight: 700;
    width: 275.25px;
    height: 86.375px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
  }

  /* Credimoney styles */
  & .swipe-features--credimoney {
    & .swiper-features-card {
      background: #d8c7ff;
      color: #2e1047;
    }

    & .swiper::after {
      background: #2e1047;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #2e1047;
    }
  }

  /* Crediahora styles */
  & .swipe-features--crediahora {
    & .swiper-features-card {
      background: #f5f5f5;
      color: #1d1d1b;
    }

    & .swiper::after {
      background: #f5f5f5;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #333333;
    }
  }

  /* OleDinero styles */
  & .swipe-features--oledinero {
    & .swiper-features-card {
      background: rgb(3, 45, 143);
      color: #ffffff;
    }

    & .swiper::after {
      background: rgb(3, 45, 143);
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: rgb(3, 45, 143);
    }
  }

  /* CreditoAmigo styles */
  & .swipe-features--creditoamigo {
    & .swiper-features-card {
      background: #eff0f5;
      color: #000000;
    }

    & .swiper::after {
      background: #eff0f5;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #0000ff;
    }
  }

  /* CreditoClic styles */
  & .swipe-features--creditoclic {
    & .swiper-features-card {
      background: #073034;
      color: #adef45;
    }

    & .swiper::after {
      background: #073034;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #073034;
    }
  }

  /* CreditoPRO styles */
  & .swipe-features--creditopro {
    & .swiper-features-card {
      background: #4570ae;
      color: #f3f3f3;
    }

    & .swiper::after {
      background: #4570ae;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #4570ae;
    }
  }

  /* Crediator styles */
  & .swipe-features--crediator {
    & .swiper-features-card {
      background: #93c7bf;
      color: #333333;
    }

    & .swiper::after {
      background: #93c7bf;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #93c7bf;
    }
  }

  /* Credifix styles */
  & .swipe-features--credifix {
    & .swiper-features-card {
      background: #d9e4f5;
      color: #182d52;
    }

    & .swiper::after {
      background: #d9e4f5;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #96b4e6;
    }
  }

  /* Crediscore styles */
  & .swipe-features--crediscore {
    & .swiper-features-card {
      background: #e1f1fc;
      color: #000000;
    }

    & .swiper::after {
      background: #e1f1fc;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #907ee8;
    }
  }

  /* Creditando styles */
  & .swipe-features--creditando {
    & .swiper-features-card {
      background: #002449;
      color: #c6fd00;
    }

    & .swiper::after {
      background: #002449;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #002449;
    }
  }

  /* Crediticio styles */
  & .swipe-features--crediticio {
    & .swiper-features-card {
      background: #13233a;
      color: #c5e5fc;
    }

    & .swiper::after {
      background: #13233a;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #13233a;
    }
  }

  /* Creditozas styles */
  & .swipe-features--creditozas {
    & .swiper-features-card {
      background: #000000;
      color: #96b4e6;
    }

    & .swiper::after {
      background: #000000;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #000000;
    }
  }

  /* Credizoom styles */
  & .swipe-features--credizoom {
    background-color: #f4f8f9;

    & .swiper-features-card {
      background: #4eb5a4;
      color: #000000;
    }

    & .swiper::after {
      background: #4eb5a4;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #4eb5a4;
    }
  }

  /* Mastercredi styles */
  & .swipe-features--mastercredi {
    & .swiper-features-card {
      background: #1a1a1a;
      color: #93bcfc;
    }

    & .swiper::after {
      background: #1a1a1a;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #1a1a1a;
    }
  }

    /* Credisolve styles */
  & .swipe-features--credisolve {
    & .swiper-features-card {
      background: var(--color-brand-primaryDark);
      color: #ffffff;
    }

    & .swiper::after {
      background: var(--color-brand-primaryDark);
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      background: var(--color-brand-primaryDark);
    }
  }

      /* Creditoplan styles */
  & .swipe-features--creditoplan {
    & .swiper-features-card {
      background: var(--color-brand-primaryDark);
      color: #ffffff;
    }

    & .swiper::after {
      background: var(--color-brand-primaryDark);
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      background: var(--color-brand-primaryDark);
    }
  }

  /* Credital styles */
  & .swipe-features--credital {
    & .swiper-features-card {
      background: var(--color-brand-primaryDark);
      color: #ffffff;
    }

    & .swiper::after {
      background: var(--color-brand-primaryDark);
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      background: var(--color-brand-primaryDark);
    }
  }

  /* Credipay styles */
  & .swipe-features--credipay {
    & .swiper-features-card {
      background: var(--color-brand-primaryDark);
      color: #ffffff;
    }

    & .swiper::after {
      background: var(--color-brand-primaryDark);
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      background: var(--color-brand-primaryDark);
    }
  }

  /* Credihope styles: was missing, so .swiper-features-card had no
     background/color at all (transparent), leaving plain text with no
     visible pill shape. */
  & .swipe-features--credihope {
    & .swiper-features-card {
      background: #f4f4ef;
      color: #252827;
    }

    & .swiper::after {
      background: #f4f4ef;
    }

    & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
      color: #f9b233;
    }
  }
}

/* Credicheck styles */
& .swipe-features--credicheck {
  & .swiper-features-card {
    background: #76bc74;
    color: #18384e;
  }

  & .swiper::after {
    background: #76bc74;
  }

  & :is(.my-swiper__nextBtn, .my-swiper__prevBtn) {
    color: #18384e;
  }


}

@media (max-width: 768px) {
  & .swiper-features-card{
    margin: 0 auto;
  }
}


/* === styles.css === */
/* TrustpilotRating — official star SVG with the rating word to its left. */
.trustpilot-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trustpilot-rating__label {
  font-weight: 700;
  font-size: 15px;
  color: #191919;
}

.trustpilot-rating__stars-img {
  display: block;
  width: 150px; /* SVG is 512x96 → ~28px per star */
  height: auto;
}


/* === styles.css === */
/* ==========================================================================
   ValuameHero – Financial Trust Passport
   Prefix: vhero__ (form/hero section) + vp__ (page sections below)
   ========================================================================== */

.vhero *,
.vhero *::before,
.vhero *::after {
  box-sizing: border-box;
}

.vhero {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: #071A2F;
}

/* ── NAVBAR ─────────────────────────────────────────────────────────────── */
.vhero__nav {
  background: rgba(7, 26, 47, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.vhero__nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  gap: 24px;
}

/* Gradient logo */
.vhero__logo-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.vhero__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.vhero__logo-name {
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.vhero__logo-tag {
  color: #29D3C2;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Smooth scroll for anchor targets */
html {
  scroll-behavior: smooth;
}

/* Nav links */
.vhero__nav-links {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  gap: 32px;
}

.vhero__nav-link {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-size: .9rem;
  transition: color .18s;
  white-space: nowrap;
  /* button reset */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.vhero__nav-link:hover {
  color: #fff;
}

/* CTA */
.vhero__nav-cta {
  background: #fff;
  color: #071A2F;
  padding: 9px 22px;
  border-radius: 24px;
  border: none;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s, color .18s;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
}

.vhero__nav-cta:hover {
  background: #B8FFE8;
  color: #071A2F;
}

/* ── HERO SECTION ────────────────────────────────────────────────────────── */
.vhero__section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 480px at 80% 0%, rgba(41, 211, 194, .26), transparent 62%),
    radial-gradient(680px 520px at 4% 100%, rgba(20, 99, 255, .24), transparent 58%),
    linear-gradient(135deg, #0E2340 0%, #0A1930 40%, #071A2F 70%, #040D1B 100%);
  padding: 84px 40px 0;
}

.vhero__container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 52px;
  align-items: flex-start;
  max-width: 1320px;
  margin: 0 auto;
}

.vhero__left {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
}

/* Badge pill */
.vhero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(41, 211, 194, .12);
  border: 1px solid rgba(41, 211, 194, .35);
  color: #7CF2E3;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 20px;
  margin: 0 0 16px;
}

.vhero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #29D3C2;
  box-shadow: 0 0 8px 2px rgba(41, 211, 194, .6);
  flex-shrink: 0;
}

.vhero__title {
  font-size: 2.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.14;
  margin: 0 0 16px;
  letter-spacing: -.02em;
  max-width: 400px;
}

.vhero__title-highlight {
  background: linear-gradient(90deg, #29D3C2, #6EE7DB);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vhero__subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 400px;
}

/* Checklist */
.vhero__checklist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.vhero__check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  color: rgba(255, 255, 255, .85);
}

.vhero__check-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(41, 211, 194, .15);
  color: #29D3C2;
}

.vhero__check-item-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* "Más justo. Más humano." card */
.vhero__trust-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 420px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 25px;
}

.vhero__trust-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  background: rgba(41, 211, 194, .14);
  color: #29D3C2;
}

.vhero__trust-card-icon svg {
  width: 18px;
  height: 18px;
}

.vhero__trust-card-title {
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px;
}

.vhero__trust-card-sub {
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  margin: 0;
  line-height: 1.5;
}

/* Photo — fixed height (not %) so the absolutely-positioned box has a
   definite size regardless of the auto-height hero row; aspect-ratio keeps
   the crop's real proportions so nothing gets squeezed or clipped.
   Sized/offset to clear both the text column (capped at 400px) and the
   430px form card — only shown once the container reaches its full
   1200px width (see the 1279px breakpoint below). */
.vhero__photo {
  position: absolute;
  right: 450px;
  bottom: 0;
  height: 620px;
  aspect-ratio: 662 / 957;
  z-index: 1;
  pointer-events: none;
}

.vhero__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
}

/* Floating score card over the photo */
.vhero__score-float {
  position: absolute;
  left: -18px;
  bottom: 100px;
  width: 208px;
  background: rgba(7, 26, 47, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.vhero__score-float-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 6px;
}

.vhero__score-float-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
}

.vhero__score-float-num {
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.vhero__score-float-max {
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
}

.vhero__score-float-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  color: #071A2F;
  margin-bottom: 10px;
}

.vhero__score-float-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  margin-bottom: 8px;
}

.vhero__score-float-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1463FF, #29D3C2);
}

.vhero__score-float-sub {
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}

/* ── "CONFÍAN EN VALUAME" STRIP ─────────────────────────────────────────── */
.vhero__trust-strip {
  background: #F7F8FA;
  border-bottom: 1px solid #EAECEF;
  padding: 36px 40px;
}

.vhero__trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.vhero__trust-strip-text {
  min-width: 240px;
}

.vhero__trust-strip-title {
  font-size: 1rem;
  font-weight: 800;
  color: #071A2F;
  margin: 0 0 4px;
}

.vhero__trust-strip-sub {
  font-size: .82rem;
  color: #667085;
  margin: 0;
}

.vhero__trust-strip-logos {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  row-gap: 16px;
}

.vhero__trust-strip-logo {
  color: #9AA4B2;
  display: flex;
  align-items: center;
  transition: color .18s;
}

.vhero__trust-strip-logo:hover {
  color: #5B6675;
}

.vhero__trust-word {
  display: inline-flex;
  align-items: center;
  color: inherit;
  white-space: nowrap;
}

.vhero__trust-word--row {
  gap: 6px;
}

/* ── FORM CARD ───────────────────────────────────────────────────────────── */
.vhero__right {
  width: 430px;
  flex-shrink: 0;
}

.vhero__card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 40px rgba(11, 31, 58, .11);
  padding: 36px 32px;
  margin-bottom: 25px;
}

.vhero__form-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: #071A2F;
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: -.01em;
}

/* ── Tipo switch ─────────────────────────────────────────────────────────── */
.vhero__tipo-switch {
  display: flex;
  background: #f0f2f5;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 22px;
}

.vhero__tipo-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 7px;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: #666;
  transition: background .18s, color .18s, box-shadow .18s;
  font-family: inherit;
}

.vhero__tipo-btn--active {
  background: #fff;
  color: #1463FF;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.vhero__form-sub {
  font-size: .875rem;
  color: #666;
  text-align: center;
  margin: 0 0 26px;
  line-height: 1.5;
}

.vhero__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.vhero__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vhero__label {
  font-size: .8rem;
  font-weight: 600;
  color: #222;
  letter-spacing: .01em;
}

.vhero__inp-wrap {
  position: relative;
}

.vhero__inp {
  width: 100%;
  padding: 11px 42px 11px 13px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: .875rem;
  color: #222;
  background: #FAFAFA;
  transition: border-color .2s, background .2s;
  outline: none;
  font-family: inherit;
}

.vhero__inp:focus {
  border-color: #29D3C2;
  background: #fff;
}

.vhero__inp::placeholder {
  color: #bbb;
}

.vhero__inp-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #c0c4cc;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.vhero__inp-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.vhero__check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 2px;
}

.vhero__check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: #29D3C2;
  cursor: pointer;
}

.vhero__check-label {
  font-size: .775rem;
  color: #555;
  line-height: 1.55;
  cursor: pointer;
}

.vhero__privacy-link {
  color: #1463FF;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vhero__privacy-link:hover {
  color: #0d4ed8;
}

.vhero__error {
  font-size: .8rem;
  color: #c53030;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 6px;
  padding: 9px 12px;
  margin: 0;
  line-height: 1.4;
}

.vhero__submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1463FF 0%, #29D3C2 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
  font-family: inherit;
  margin-top: 2px;
}

.vhero__submit:hover:not(:disabled) {
  opacity: .88;
}

.vhero__submit:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.vhero__security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #999;
  font-size: .775rem;
}

.vhero__security svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── SUCCESS ─────────────────────────────────────────────────────────────── */
.vhero__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 16px 8px 8px;
}

.vhero__success-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1463FF 0%, #29D3C2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.vhero__success-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.vhero__success-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #071A2F;
  margin: 0;
}

.vhero__success-body {
  font-size: .9rem;
  color: #444;
  line-height: 1.65;
  margin: 0;
}

.vhero__success-email {
  font-size: .8rem;
  color: #888;
  margin: 0;
  background: #F7F8FA;
  border-radius: 8px;
  padding: 10px 18px;
  width: 100%;
}

/* ==========================================================================
   PAGE SECTIONS (vp__ prefix)
   All dark-navy sections that appear below the hero form.
   ========================================================================== */

/* ── Base section layouts ── */
.vp__dark {
  background: #071A2F;
  color: #fff;
  padding: 72px 40px;
  scroll-margin-top: 68px;
}

.vp__cream {
  background: #F7F3EA;
  color: #102033;
  padding: 72px 40px;
  scroll-margin-top: 68px;
}

.vp__white {
  background: #fff;
  color: #102033;
  padding: 72px 40px;
  scroll-margin-top: 68px;
}

.vp__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Typography helpers ── */
.vp__super {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #29D3C2;
  margin: 0 0 12px;
  display: block;
}

.vp__super--blue {
  color: #1463FF;
}

.vp__title {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0 0 20px;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.vp__title--dark {
  color: #102033;
}

.vp__lead {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
  margin: 0 0 40px;
}

.vp__lead--dark {
  color: #4a5568;
}

/* ── DASHBOARD SECTION ────────────────────────────────────────────────────── */
.vp__dashboard-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  margin-top: 40px;
}

.vp__dash-sidebar {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp__dash-logo {
  margin-bottom: 16px;
}

.vp__dash-item {
  padding: 11px 16px;
  border-radius: 14px;
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: background .18s;
}

.vp__dash-item:hover {
  background: rgba(255, 255, 255, .07);
}

.vp__dash-item--active {
  background: #29D3C2;
  color: white;
}

.vp__dash-main {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 24px 28px;
  overflow: hidden;
  height: 580px;
}

/* ── Dashboard panels ──────────────────────────────────────────────────── */
.vp__dash-panel {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vp__dash-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vp__dash-panel-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.vp__dash-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  letter-spacing: .04em;
}

.vp__dash-badge--oro {
  background: linear-gradient(90deg, #FFD700, #FFA500);
  color: #071A2F;
}

.vp__dash-badge--ok {
  background: rgba(41, 211, 194, .18);
  color: #29D3C2;
}

.vp__dash-badge--num {
  background: rgba(20, 99, 255, .22);
  color: #7EB5FF;
}

/* Mi Score */
.vp__dash-score-content {
  display: flex;
  align-items: center;
  gap: 22px;
}

.vp__dash-score-ring {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(#29D3C2 0% 84.2%, rgba(255, 255, 255, .08) 84.2% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vp__dash-score-ring::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #0c1f38;
}

.vp__dash-score-big {
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.vp__dash-score-sub {
  position: relative;
  z-index: 1;
  font-size: .6rem;
  color: rgba(255, 255, 255, .4);
  margin-top: 3px;
}

.vp__dash-score-cats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vp__dash-cat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

.vp__dash-cat-label {
  font-size: .78rem;
  color: rgba(255, 255, 255, .65);
}

.vp__dash-cat-pct {
  font-size: .78rem;
  font-weight: 700;
  color: #29D3C2;
}

.vp__dash-bar {
  height: 5px;
  background: rgba(255, 255, 255, .1);
  border-radius: 3px;
}

.vp__dash-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1463FF, #29D3C2);
}

.vp__dash-score-note {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  margin: 0;
}

/* Bottom row: informe + bancos */
.vp__dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Mi informe */
.vp__dash-informe-list {
  display: flex;
  flex-direction: column;
}

.vp__dash-inf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: .82rem;
}

.vp__dash-inf-row:last-child {
  border-bottom: none;
}

.vp__dash-inf-label {
  color: rgba(255, 255, 255, .45);
}

.vp__dash-inf-value {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vp__dash-inf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #29D3C2;
  flex-shrink: 0;
}

.vp__dash-updated {
  font-size: .7rem;
  color: rgba(255, 255, 255, .28);
  margin: 0;
  margin-top: auto;
}

/* Conexiones bancarias */
.vp__dash-banks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp__dash-bank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .05);
  border-radius: 12px;
  padding: 11px 14px;
}

.vp__dash-bank-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vp__dash-bank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp__dash-bank-name {
  font-size: .83rem;
  font-weight: 700;
  color: #fff;
}

.vp__dash-bank-iban {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  font-family: monospace;
}

.vp__dash-bank-sync {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.vp__dash-bank-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #29D3C2;
}

.vp__dash-add-bank {
  background: none;
  border: 1px dashed rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .35);
  border-radius: 12px;
  padding: 9px;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: border-color .18s, color .18s;
}

.vp__dash-add-bank:hover {
  border-color: #29D3C2;
  color: #29D3C2;
}

/* ── DASHBOARD TABS ──────────────────────────────────────────────────────── */
.vp__tab-scroll {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 4px;
}

.vp__tab-scroll::-webkit-scrollbar {
  width: 4px;
}

.vp__tab-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.vp__tab-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 2px;
}

.vp__tab-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vp__tab-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.vp__tab-sub {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  margin: 0;
}

/* Tab: Dashboard overview */
.vp__overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vp__overview-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background .18s;
}

.vp__overview-card:hover {
  background: rgba(255, 255, 255, .1);
}

.vp__overview-card--score {
  background: linear-gradient(135deg, rgba(20, 99, 255, .28), rgba(41, 211, 194, .16));
  border-color: rgba(41, 211, 194, .25);
}

.vp__overview-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin: 0 0 8px;
}

.vp__overview-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vp__overview-score-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.vp__overview-score-max {
  font-size: .82rem;
  color: rgba(255, 255, 255, .4);
}

.vp__overview-val {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.vp__overview-val-unit {
  font-size: .78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .45);
}

.vp__overview-sub {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  margin: 8px 0 0;
}

.vp__activity {
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  padding: 14px 16px;
}

.vp__activity-title {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin: 0 0 10px;
}

.vp__activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.vp__activity-row:last-child {
  border-bottom: none;
}

.vp__activity-icon {
  font-size: .95rem;
}

.vp__activity-text {
  flex: 1;
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
}

.vp__activity-time {
  font-size: .7rem;
  color: rgba(255, 255, 255, .3);
  white-space: nowrap;
}

/* Tab: Mi Score */
.vp__score-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(20, 99, 255, .2), rgba(41, 211, 194, .12));
  border-radius: 18px;
  padding: 22px;
}

.vp__score-ring-lg {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(#29D3C2 0% 84.2%, rgba(255, 255, 255, .08) 84.2% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vp__score-ring-lg::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #0a1e38;
}

.vp__score-ring-num {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.vp__score-ring-max {
  position: relative;
  z-index: 1;
  font-size: .6rem;
  color: rgba(255, 255, 255, .4);
  margin-top: 2px;
}

.vp__score-levels {
  flex: 1;
}

.vp__score-levels-title {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin: 0 0 10px;
}

.vp__score-level-track {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.vp__score-level {
  flex: 1;
  background: rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp__score-level--done {
  background: rgba(41, 211, 194, .1);
}

.vp__score-level--active {
  background: rgba(41, 211, 194, .22);
  border: 1px solid rgba(41, 211, 194, .5);
}

.vp__score-level-name {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}

.vp__score-level--active .vp__score-level-name {
  color: #29D3C2;
}

.vp__score-level-range {
  font-size: .62rem;
  color: rgba(255, 255, 255, .3);
}

.vp__score-next {
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}

.vp__score-next strong {
  color: #29D3C2;
}

.vp__score-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vp__score-cat-card {
  background: rgba(255, 255, 255, .05);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp__score-cat-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp__score-cat-icon {
  font-size: 1rem;
}

.vp__score-cat-name {
  flex: 1;
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
}

.vp__score-cat-num {
  font-size: .98rem;
  font-weight: 800;
  color: #29D3C2;
}

.vp__score-cat-desc {
  font-size: .7rem;
  color: rgba(255, 255, 255, .38);
  margin: 0;
  line-height: 1.4;
}

.vp__score-history {
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  padding: 16px 18px;
}

.vp__score-history-title {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin: 0 0 14px;
}

.vp__score-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
}

.vp__score-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
}

.vp__score-bar-val {
  font-size: .6rem;
  color: rgba(255, 255, 255, .4);
}

.vp__score-bar-wrap {
  flex: 1;
  width: 100%;
  background: rgba(255, 255, 255, .07);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.vp__score-bar-fill-h {
  width: 100%;
  background: rgba(41, 211, 194, .35);
  border-radius: 4px 4px 0 0;
}

.vp__score-bar-fill-h--now {
  background: #29D3C2;
}

.vp__score-bar-month {
  font-size: .62rem;
  color: rgba(255, 255, 255, .38);
}

/* Tab: Mi informe */
.vp__inf-download {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .7);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .18s;
}

.vp__inf-download:hover {
  background: rgba(255, 255, 255, .14);
}

.vp__inf-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp__inf-section {
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp__inf-section-hd {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin: 0;
}

.vp__pay-history {
  display: flex;
  gap: 4px;
  align-items: center;
}

.vp__pay-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.vp__pay-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.vp__pay-dot--ok {
  background: #29D3C2;
}

.vp__pay-dot--warn {
  background: #F59E0B;
}

.vp__pay-dot--sm {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

.vp__pay-label {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
}

.vp__pay-legend {
  display: flex;
  gap: 16px;
  font-size: .7rem;
  color: rgba(255, 255, 255, .4);
  align-items: center;
}

.vp__cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.vp__cap-card {
  background: rgba(41, 211, 194, .07);
  border-radius: 12px;
  padding: 14px 16px;
}

.vp__cap-check {
  font-size: .7rem;
  font-weight: 700;
  color: #29D3C2;
}

.vp__cap-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 4px 0 2px;
}

.vp__cap-label {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 4px;
}

.vp__cap-note {
  font-size: .68rem;
  color: rgba(255, 255, 255, .32);
  margin: 0;
  line-height: 1.4;
}

/* Tab: Conexiones bancarias */
.vp__banks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp__bank-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp__bank-card-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vp__bank-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vp__bank-color-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vp__bank-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp__bank-name {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
}

.vp__bank-iban {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
  font-family: monospace;
}

.vp__bank-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.vp__bank-balance {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.vp__bank-sync {
  font-size: .68rem;
  color: rgba(255, 255, 255, .35);
  display: flex;
  align-items: center;
  gap: 5px;
}

.vp__bank-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #29D3C2;
  flex-shrink: 0;
}

.vp__bank-txs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 8px;
}

.vp__bank-tx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: .78rem;
}

.vp__bank-tx:last-child {
  border-bottom: none;
}

.vp__bank-tx-date {
  color: rgba(255, 255, 255, .28);
  min-width: 40px;
}

.vp__bank-tx-desc {
  flex: 1;
  color: rgba(255, 255, 255, .62);
}

.vp__bank-tx-amt {
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}

.vp__bank-tx-amt--pos {
  color: #29D3C2;
}

/* Tab: Recomendaciones */
.vp__reco-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vp__reco-card {
  background: rgba(255, 255, 255, .05);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vp__reco-hd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.vp__reco-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.vp__reco-meta {
  flex: 1;
}

.vp__reco-pri {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 5px;
}

.vp__reco-pri--alto {
  background: rgba(239, 68, 68, .2);
  color: #FC8181;
}

.vp__reco-pri--medio {
  background: rgba(245, 158, 11, .2);
  color: #FCD34D;
}

.vp__reco-pri--bajo {
  background: rgba(41, 211, 194, .18);
  color: #29D3C2;
}

.vp__reco-pri--info {
  background: rgba(20, 99, 255, .25);
  color: #7EB5FF;
}

.vp__reco-title {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.vp__reco-impact {
  font-size: .75rem;
  font-weight: 700;
  color: #29D3C2;
  background: rgba(41, 211, 194, .12);
  border-radius: 10px;
  padding: 4px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vp__reco-desc {
  font-size: .8rem;
  color: rgba(255, 255, 255, .52);
  line-height: 1.55;
  margin: 0;
}

/* ── FEATURES ───────────────────────────────────────────────────────────── */
.vp__features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}

.vp__feature-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 28px;
  transition: background .2s;
}

.vp__feature-card:hover {
  background: rgba(255, 255, 255, .10);
}

.vp__feature-icon {
  width: 44px;
  height: 44px;
  color: #29D3C2;
  margin-bottom: 18px;
}

.vp__feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vp__feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
}

.vp__feature-text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.65;
  margin: 0;
}

/* ── COMPARISON ─────────────────────────────────────────────────────────── */
.vp__compare-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  margin-top: 40px;
}

.vp__compare-old {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .2);
  border-radius: 24px;
  padding: 28px;
}

.vp__compare-new {
  background: rgba(41, 211, 194, .1);
  border: 1px solid rgba(41, 211, 194, .2);
  border-radius: 24px;
  padding: 28px;
}

.vp__compare-heading {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 20px;
  color: #fff;
}

.vp__compare-item {
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.vp__compare-item--bad {
  background: rgba(0, 0, 0, .2);
  color: #fca5a5;
}

.vp__compare-item--good {
  background: rgba(0, 0, 0, .2);
  color: #B8FFE8;
  font-weight: 700;
}

.vp__compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── TIERS ──────────────────────────────────────────────────────────────── */
.vp__tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.vp__tier-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  overflow: hidden;
}

.vp__tier-bar {
  height: 6px;
}

.vp__tier-body {
  padding: 24px 24px 28px;
}

.vp__tier-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 8px;
}

.vp__tier-name {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}

.vp__tier-range {
  font-size: .9rem;
  font-weight: 700;
  color: #29D3C2;
  margin: 0 0 16px;
}

.vp__tier-desc {
  font-size: .875rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.65;
  margin: 0;
}

/* ── PARA EMPRESAS ──────────────────────────────────────────────────────── */
.vp__empresas-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.vp__empresas-left {}

.vp__companies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.vp__company-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.vp__company-icon {
  width: 36px;
  height: 36px;
  color: #1463FF;
  margin-bottom: 14px;
}

.vp__company-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vp__company-name {
  font-size: 1rem;
  font-weight: 700;
  color: #102033;
  margin: 0;
}

.vp__btn-dark {
  display: inline-block;
  background: #071A2F;
  color: #fff;
  padding: 13px 28px;
  border-radius: 24px;
  font-weight: 700;
  font-size: .925rem;
  text-decoration: none;
  margin-top: 28px;
  transition: background .18s;
}

.vp__btn-dark:hover {
  background: #1463FF;
  color: #fff;
}

/* ── PASSPORT SECTION ───────────────────────────────────────────────────── */
.vp__passport-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 48px 0;
}

.vp__passport-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 24px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.vp__passport-label {
  font-size: .85rem;
  font-weight: 800;
  color: #102033;
  margin: 0;
}

/* Flow diagram */
.vp__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.vp__flow-node {
  border-radius: 24px;
  padding: 20px 36px;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.vp__flow-node--dark {
  background: #071A2F;
  color: #fff;
}

.vp__flow-node--blue {
  background: #1463FF;
  color: #fff;
}

.vp__flow-arrow {
  font-size: 2rem;
  font-weight: 800;
  color: #1463FF;
}

.vp__flow-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vp__flow-target {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 20px 28px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #102033;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* ── CÓMO FUNCIONA ──────────────────────────────────────────────────────── */
.vp__process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px 0;
}

.vp__process-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 24px;
}

.vp__process-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}

.vp__process-item {
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 8px;
}

.vp__steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.vp__how-step {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 24px;
}

.vp__how-num {
  width: 40px;
  height: 40px;
  background: #29D3C2;
  color: #071A2F;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.vp__how-text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.65;
  margin: 0;
}

/* ── IDENTIDAD VISUAL ───────────────────────────────────────────────────── */
.vp__marca-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.vp__marca-logo-card {
  background: #071A2F;
  border-radius: 28px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vp__marca-logo-desc {
  font-size: .95rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.65;
  margin: 0;
}

.vp__colors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vp__color-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 18px;
  background: #fff;
}

.vp__color-swatch {
  height: 80px;
  border-radius: 14px;
  margin-bottom: 14px;
}

.vp__color-name {
  font-weight: 700;
  color: #102033;
  margin: 0 0 4px;
  font-size: .9rem;
}

.vp__color-hex {
  font-family: monospace;
  font-size: .82rem;
  color: #718096;
  margin: 0;
}

/* ── CONFIANZA Y CUMPLIMIENTO ───────────────────────────────────────────── */
.vp__trust-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 32px;
  padding: 48px;
}

.vp__trust-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vp__trust-item {
  background: #071A2F;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.vp__trust-item-icon {
  width: 28px;
  height: 28px;
  color: #29D3C2;
  flex-shrink: 0;
  margin-top: 2px;
}

.vp__trust-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vp__trust-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.vp__trust-item-text {
  font-size: .875rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
  margin: 0;
}

/* ── CTA BUTTONS ────────────────────────────────────────────────────────── */
.vp__cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.vp__btn-cyan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #29D3C2;
  color: #071A2F;
  padding: 14px 32px;
  border-radius: 32px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background .18s;
}

.vp__btn-cyan:hover {
  background: #B8FFE8;
}

.vp__btn-cyan svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vp__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 14px 32px;
  border-radius: 32px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background .18s;
}

.vp__btn-outline:hover {
  background: rgba(255, 255, 255, .12);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.vp__faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vp__faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.vp__faq-q {
  font-size: 1.1rem;
  font-weight: 800;
  color: #102033;
  margin: 0 0 10px;
}

.vp__faq-a {
  font-size: .925rem;
  color: #4a5568;
  line-height: 1.65;
  margin: 0;
}

/* ── LEGAL SECTIONS ─────────────────────────────────────────────────────── */
.vp__legal-card {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  padding: 48px;
}

.vp__legal-body {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.vp__legal-section {}

.vp__legal-h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
}

.vp__legal-section p {
  font-size: .925rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.75;
  margin: 0 0 12px;
}

.vp__legal-section p:last-child {
  margin-bottom: 0;
}

.vp__legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.vp__legal-tag {
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .875rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.45;
}

.vp__legal-tag--cyan {
  background: rgba(41, 211, 194, .1);
  color: #B8FFE8;
  font-weight: 700;
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.vp__footer {
  background: #071A2F;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 28px 40px;
}

.vp__footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
}

.vp__footer-links {
  display: flex;
  gap: 24px;
}

.vp__footer-link {
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .18s;
}

.vp__footer-link:hover {
  color: #fff;
}

/* ── 404 PAGE ───────────────────────────────────────────────────────────── */
.vp__404-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 68px - 80px);
  /* viewport minus nav and footer */
  background: #071A2F;
}

.vp__404-inner {
  text-align: center;
  padding: 60px 24px;
  max-width: 520px;
}

.vp__404-code {
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #1463FF, #29D3C2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vp__404-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}

.vp__404-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.65;
  margin: 0 0 32px;
}

.vp__404-cta {
  display: inline-block;
  background: linear-gradient(90deg, #1463FF, #29D3C2);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: 14px 32px;
  border-radius: 30px;
  text-decoration: none;
  transition: opacity .2s;
}

.vp__404-cta:hover {
  opacity: .88;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* The hero photo only has room to sit beside both the text column and the
   form card once the container reaches its full 1320px width. Below that,
   stack the layout (and hide the photo) rather than risk it overlapping
   the text at in-between sizes. */
@media (max-width: 1399px) {
  .vhero__container {
    flex-direction: column;
    gap: 36px;
  }

  .vhero__photo {
    display: none;
  }

  .vhero__right {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .vp__dashboard-wrap {
    grid-template-columns: 1fr;
  }

  .vp__dash-bottom-row {
    grid-template-columns: 1fr;
  }

  .vp__process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vp__steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vp__trust-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vp__empresas-wrap {
    grid-template-columns: 1fr;
  }

  .vp__passport-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .vp__marca-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .vhero__section {
    padding: 40px 24px 32px;
  }

  .vhero__trust-card {
    max-width: 100%;
  }

  .vhero__title {
    font-size: 2.1rem;
  }

  .vp__dark,
  .vp__cream,
  .vp__white {
    padding: 56px 24px;
  }

  .vp__features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vp__tiers-grid {
    grid-template-columns: 1fr;
  }

  .vp__compare-wrap {
    grid-template-columns: 1fr;
  }

  .vp__companies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .vhero__nav {
    padding: 0 20px;
    height: 60px;
  }

  .vhero__nav-links {
    display: none;
  }

  .vhero__title {
    font-size: 1.75rem;
  }

  .vhero__section {
    padding: 28px 16px 48px;
  }

  .vhero__card {
    padding: 28px 20px;
  }

  .vhero__trust-strip {
    padding: 28px 20px;
  }

  .vhero__trust-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .vhero__trust-strip-logos {
    gap: 24px;
  }

  .vp__dark,
  .vp__cream,
  .vp__white {
    padding: 48px 20px;
  }

  .vp__title {
    font-size: 1.75rem;
  }

  .vp__features-grid {
    grid-template-columns: 1fr;
  }

  .vp__process-grid {
    grid-template-columns: 1fr;
  }

  .vp__steps-grid {
    grid-template-columns: 1fr;
  }

  .vp__passport-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vp__flow-targets {
    grid-template-columns: 1fr;
  }

  .vp__companies-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vp__legal-grid {
    grid-template-columns: 1fr;
  }

  .vp__legal-card {
    padding: 24px 20px;
  }

  .vp__footer-inner {
    flex-direction: column;
    text-align: center;
  }
}


/* === styles.css === */
.react-player {
  border-radius: 10px;
  width: 100%;
  /* Belt-and-suspenders: if width:100% ever resolves against an
     indefinite containing block (e.g. a fit-content ancestor upstream),
     the browser falls back to this <video>'s native pixel size (1280px
     for our source files) instead of 100%. max-width:100% is the
     standard responsive-media guard against exactly that. */
  max-width: 100%;
  /* Root cause of the "giant video" bug: this element never had a defined
     box size for any brand. That was harmless while the video only ever
     rendered once, but Video/index.tsx now calls video.load() on mount
     (re-running resource selection), and with preload="none" + no
     aspect-ratio, the box has nothing to fall back on during that reload
     window. Give it a real ratio so it can never collapse/blow up. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}


/* === styles.css === */
.video-player {
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  height: auto;
}