/* === 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;
}

/* 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);
}

/* 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;
}

/* 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: 300;
  }

  & .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;
  }
}

/* ============================================================================
   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;
  }
}



/* === 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;
    }
  }
}

@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;
    }
  }
}

/* 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: start;
    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: var(--banner-tarifa-container-max-width, 1400px);
  margin: 0 auto;
  padding: 0 20px;
  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: var(--banner-tarifa-container-max-width, 1000px);
  }
}

/* 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;
}

/* Crediamigo: 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;
}

/* 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;
}



/* === BeneficiosComparador.module.css === */
.beneficiosComparador {
    --grid-template-columns: repeat(1, 1fr);
    padding-bottom: calc(var(--container-content-padding-vertical) + 70px);
    margin: 0 auto;
    width: 100%;
}

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

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

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

.gridItem,
.gridItemCrediahora,
.gridItemOledinero {
    background: #e4e6f0;
    border-radius: 12px;
    padding: 25px 15px;
    position: relative;
}

@media (width >= 768px) {
    .gridItem,
    .gridItemCrediahora,
    .gridItemOledinero {
        padding: 35px 40px;
    }
}

.gridItemCrediahora {
    background: #f5f5f5;
}

.gridItem p,
.gridItemCrediahora p,
.gridItemOledinero p {
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
    text-align: center;
}

.gridItemOledinero p {
    font-weight: 500;
}

.gridItem p b,
.gridItemCrediahora p b,
.gridItemOledinero p b {
    font-weight: var(--font-weight-bold);
}

.gridItem p em {
    font-weight: var(--font-weight-medium);
}

.gridItemCrediahora p em {
    font-weight: var(--font-weight-bold);
}

.gridItemOledinero p em {
    font-weight: 500;
}

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

.numberCrediahora {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

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

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

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

@media (width >= 1024px) {
    .beneficiosComparador {
        --grid-template-columns: repeat(3, 1fr);
        max-width: 85%;
    }

    .sectionBanks {
        gap: 30px;
        justify-content: center;
    }

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

@media (width >= 1600px) {
    .beneficiosComparador {
        max-width: 1400px;
    }
}


/* === styles.css === */
.beneficios-comparador {
    --grid-template-columns: repeat(1, 1fr);
    padding-bottom: calc(var(--container-content-padding-vertical) + 70px);
    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%;
    }

    .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: 1400px;
    }
}


/* === 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;
  }
}

/* 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: var(--form-footer-flex-gap);
    margin-top: var(--form-footer-margin-top);

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

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

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

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

@media (width >=400px) {
    .button-with-image {
        flex-direction: row;
    }
}


/* === 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 === */
:root {
  & .content-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-top: 25px;
  }

  & .container-video {
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 2rem;
    display: grid;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    align-items: initial;
    padding: 1rem;
    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-family: Montserrat, sans-serif;
        font-weight: 900;
        color: rgb(29, 29, 27);
      }

      & p {
        font-family: Montserrat, sans-serif;
        font-weight: 400;
        color: rgb(29, 29, 27);
        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-family: Poppins, sans-serif;
        font-weight: 700;
        color: rgb(215, 255, 123);
      }

      & p {
        font-family: Poppins, sans-serif;
        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;
      }
    }
  }

  /* 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;
      }
    }
  }
}

/* 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: 100px 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: rgb(192, 229, 235);
    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;
    }
  }
}

@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 {
    background: rgb(245, 245, 245);

    & .card-basic__title {
      font-family: "Montserrat", sans-serif;
      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);
  }
}

/* Creditoamigo brand-specific styles */
[data-brand='creditoamigo'] {
  & .card-basic {
    background: #e3e5f6;

    & .card-basic__title {
      font-family: "Seitu", sans-serif;
      font-weight: 500;
      color: #0000ff !important;
    }

    & .card-basic__description {
      color: #4d4d4d !important;
    }
  }
}

/* Creditoclic brand-specific styles */
[data-brand='creditoclic'] {
  & .card-basic {
    background: #eaeeef;

    & .card-basic__title {
      font-family: "Montserrat", sans-serif;
      font-weight: 600;
      color: #073034 !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #073034 !important;
    }
  }
}

/* Creditopro brand-specific styles */
[data-brand='creditopro'] {
  & .card-basic {
    background: #1b4a82;

    & .card-basic__title {
      font-family: "Open Sans", sans-serif;
      font-weight: 800;
      color: #ffffff !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #ffffff !important;
    }
  }
}

/* Crediator brand-specific styles */
[data-brand='crediator'] {
  & .card-basic {
    background: #f2f2f2;

    & .card-basic__title {
      font-family: "Manrope", sans-serif;
      font-weight: 700;
      color: #333333 !important;
    }

    & .card-basic__description {
      font-weight: 600;
      color: #333333 !important;
    }
  }
}

/* Credifix brand-specific styles */
[data-brand='credifix'] {
  & .card-basic {
    background: #d9e4f5;

    & .card-basic__title {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      color: #182d52 !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #182d52 !important;
    }
  }
}

/* Crediscore brand-specific styles */
[data-brand='crediscore'] {
  & .card-basic {
    background: #e1f1fc;

    & .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: rgba(229, 234, 234, 0.5);

    & .card-basic__title {
      font-family: "Manrope", sans-serif;
      font-weight: 800;
      color: #000000 !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #000000 !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: #f7f9fa;

    & .card-basic__title {
      font-family: "AdobeClean", sans-serif;
      font-weight: 700;
      color: #1a1a1a !important;
    }

    & .card-basic__description {
      font-weight: 500;
      color: #1a1a1a !important;
    }
  }
}

/* ===== BUTTON STYLES ===== */

/* Credimoney: yellow button with dark purple text */
.container-que-aprendere .btn,
[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;
}

/* 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%;

    & 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;
    }
  }

  & .swiper-slide {
    width: fit-content;
  }

  & .container-videos-curso__buttons {
    text-align: center;
  }
}

/* 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;
  }
}

.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: var(--text-base-font-size);
      text-align: center;
    }

    & .comparator-plan-card__description {
      text-wrap: balance;
      text-align: center;
      font-size: small;
    }

    & .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__buttons {
      text-align: center;

      & .btn {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 25px;
        padding-right: 25px;
      }
    }

    & .comparator-plan-card__features {
      font-size: var(--text-xs-font-size);
      display: flex;
      flex-direction: column;
      gap: 5px;
      list-style: none;
      padding-left: 0;
    }

    &:not(.comparator-plan-card__amigo_platino) {
      margin-top: 30px;
    }

    & .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__amigo_platino {
      --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);

      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 {
        text-wrap: balance;
        text-align: center;
        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;
  }
}

/* =============================================================================
 * 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__amigo_platino {
  /* 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__amigo_platino h3 {
  color: var(--color-text-inverse);
}

[data-brand="creditopro"] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__amount {
  color: var(--color-text-inverse);
}

[data-brand="creditopro"] .comparator-plan-card.comparator-plan-card__amigo_platino .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__amigo_platino .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__amigo_platino {
  /* 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__amigo_platino h3 {
  color: #ADEF45;
}

[data-brand="creditoclic"] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__amount {
  color: var(--color-text-inverse);
}

[data-brand="creditoclic"] .comparator-plan-card.comparator-plan-card__amigo_platino .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__amigo_platino .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__amigo_platino {
  /* 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;
}

[data-brand="creditoamigo"] .container .comparator-plan-card.comparator-plan-card__amigo_platino h3 {
  color: #0000FF;
}

/* 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: 16.56px !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.comparator-plan-card__amigo_platino {
  --card-title-color: #e62095;
  --card-text-color: #333333;
  --card-amount-color: #162b36;
}

.container.plan-amigo-includes-credisolve .comparator-plan-card:not(.comparator-plan-card__amigo_platino),
.container.plan-amigo-includes-creditoplan .comparator-plan-card:not(.comparator-plan-card__amigo_platino),
.container.plan-amigo-includes-credipay .comparator-plan-card:not(.comparator-plan-card__amigo_platino),
.container.plan-amigo-includes-credital .comparator-plan-card:not(.comparator-plan-card__amigo_platino) {
  color: #000000 !important;
}

.container.plan-amigo-includes-credisolve .comparator-plan-card:not(.comparator-plan-card__amigo_platino) h3,
.container.plan-amigo-includes-creditoplan .comparator-plan-card:not(.comparator-plan-card__amigo_platino) h3,
.container.plan-amigo-includes-credipay .comparator-plan-card:not(.comparator-plan-card__amigo_platino) h3,
.container.plan-amigo-includes-credital .comparator-plan-card:not(.comparator-plan-card__amigo_platino) h3 {
  color: #000000 !important;
}

.container.plan-amigo-includes-credisolve .comparator-plan-card:not(.comparator-plan-card__amigo_platino) .comparator-plan-card__description,
.container.plan-amigo-includes-creditoplan .comparator-plan-card:not(.comparator-plan-card__amigo_platino) .comparator-plan-card__description,
.container.plan-amigo-includes-credipay .comparator-plan-card:not(.comparator-plan-card__amigo_platino) .comparator-plan-card__description,
.container.plan-amigo-includes-credital .comparator-plan-card:not(.comparator-plan-card__amigo_platino) .comparator-plan-card__description {
  color: #000000 !important;
}

[data-brand="credisolve" i] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__amount {
  color: #162b36 !important;
}

[data-brand="credisolve" i] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__conditions a {
  color: #e62095 !important;
}

[data-brand="credisolve" i] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__buttons .btn {
  --btn-background: #162b36;
  --btn-border-color: #162b36;
  --btn-text-color: #ffffff;
}

[data-brand="credisolve" i] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available {
  background: #162b36;
  color: #ffffff;
}

[data-brand="credisolve" i] .comparator-plan-card.comparator-plan-card__amigo_platino .comparator-plan-card__exclusive.comparator-plan-card__exclusive__available span {
  color: #e62095;
}

[data-brand="credital"] .comparator-plan-card.comparator-plan-card__amigo_platino {
  background-color: #a318e1;
  color: #fff;
}

[data-brand="credital"] .comparator-plan-card__amigo_platino .btn-primary-filled {
  background: #f2e6f9 !important;
  color: #000 !important;
}

[data-brand="credital"] .comparator-plan-card .comparator-plan-card__amigo_platino {
  color: #fff !important;
}

[data-brand="credipay"] .comparator-plan-card.comparator-plan-card__amigo_platino {
  background-color: #00dfdb;
  color: #fff;
}

[data-brand="credipay"] .comparator-plan-card__amount-big-part:nth-child(2) {
  color: #000;
}

[data-brand="creditoplan"] .comparator-plan-card.comparator-plan-card__amigo_platino {
  background: #1d4d51;
}

[data-brand="creditoplan"] .comparator-plan-card.comparator-plan-card__amigo_platino h3 {
  color: #fff !important;
}

/* === 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;
    }
  }
}

@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;
  }

  /* 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: 560px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    border-radius: 10px;
    padding: 20px;
    background-color: white;
  }

  & .contacto-hero-form__title {
    text-align: center;
    filter: brightness(0.5);
    margin-bottom: 20px;
  }

  & .contacto-hero-form__success {
    padding: 20px;
    text-align: center;
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
  }

  & .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;
  }

  & .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.5;
    }
  }

  & .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: 10px;
  }

  & .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: 5px;

    & label {
      font-size: 0.95rem;
      font-weight: 500;

      & sup {
        color: #dc3545;
      }
    }
  }

  & .contacto-hero-form__input {
    height: 35px;
    padding: 0 15px;
    border: 1px solid rgb(222, 226, 230);
    border-radius: 9999px;
    font-size: 0.9rem;
    outline: none;
    background-color: rgb(232, 240, 254);

    &:focus {
      border-color: #80bdff;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    &:not(textarea) {
      height: 35px;
    }
  }

  & .contacto-hero-form__phone-group {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
  }

  & .contacto-hero-form__phone-prefix {
    background: #e7e7e7;
    border-bottom-left-radius: 9999px;
    border-top-left-radius: 9999px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    width: 50px;
  }

  & .contacto-hero-form__input--phone {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    padding-left: 10px;
  }

  & .contacto-hero-form__textarea {
    height: auto !important;
    min-height: 120px;
    padding: 10px !important;
    border-radius: 15px !important;
    resize: none;
    background-color: rgb(255, 255, 255) !important;
    border: 1px solid rgb(222, 226, 230) !important;
    font-family: inherit;
    font-size: 0.9rem;
  }

  & .contacto-hero-form__check-group {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
  }

  & .contacto-hero-form__check-wrapper {
    display: flex;
    align-items: center;
  }

  & .contacto-hero-form__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  & .contacto-hero-form__check-label {
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
  }

  & .contacto-hero-form__link {
    font-weight: 700;
    color: inherit;
  }

  & .contacto-hero-form__submit {
    padding: 12px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;

    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    &:disabled {
      opacity: 0.6;
      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-around;
      max-width: 1400px;
      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 {
      grid-template-columns: 722px 515px;

      & .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;
      }
    }

  }
}

/* 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--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--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--crediahora .contacto-hero-form__container {
    margin-left: 80px;
  }

  .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 0px;
  }

  & .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: 85%;
        --container-content-padding-horizontal: 0;
      }
    }
  }
}

:root {
  --body-padding-horizontal: 15px;
}

@media (width >= 768px) {
  :root {
    --body-padding-horizontal: 1rem;
  }
}

@media (width >= 1440px) {
  :root {
    --body-padding-horizontal: 120px;
  }
}

@media (width >= 1600px) {
  :root {
    & .container {
      & .container__content {
        --container-content-max-width: 1400px;
      }
    }
  }
}

.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;
    }

    & h2 {
      color: var(--container-title-h2-color);
      font-family: var(--font-family-base) !important;
    }

    & h3 {
      color: var(--container-title-h3-color);
      font-family: var(--font-family-base) !important;
    }

    & :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;
          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="crediahora"] .chart-doughnut__amount {
  color: rgb(245, 245, 245);
}

.chart-doughnut[data-brand="oledinero"] .chart-doughnut__amount {
  color: rgb(2, 36, 115);
}


/* === 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: rgb(245, 245, 245);
}

.circle-group[data-brand="crediahora"] .circle-group__item__subtext {
  color: rgb(245, 245, 245);
}

.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="crediahora"] h2 {
  color: rgb(245, 245, 245);
}

.expenses[data-brand="oledinero"] h2 {
  color: rgb(2, 36, 115);
}


/* === 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="crediahora"] .performance-list li {
  color: rgb(245, 245, 245);
}

.performance[data-brand="oledinero"] .performance-list li {
  color: rgb(2, 36, 115);
}


/* === 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%;
}

.dashboard-page__content {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 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-bottom: 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(3, 45, 143);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
  }

  & input {
    color: rgb(2, 45, 142);
    border-color: rgb(255, 255, 255);
    font-family: "Poppins", sans-serif;
  }

  & .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 */
.email-forgotten[data-brand="creditoamigo"] {
  & h1 {
    color: rgb(0, 0, 255);
    font-family: "Seitu", 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: "Seitu", sans-serif;
    font-size: 16px;
    padding: 16px 12px;
    height: 56.39px;
  }

  & .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;
    font-size: 16px;
    padding: 8px 25px;
  }
}

/* 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 {
    color: rgb(7, 48, 52);
    border-color: rgb(122, 196, 174);
    font-family: "Montserrat", sans-serif;
  }

  & .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 */
.email-forgotten[data-brand="creditopro"] {
  & h1 {
    color: rgb(51, 51, 51);
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
  }

  & input {
    color: rgb(51, 51, 51);
    border-color: rgb(243, 243, 243);
    font-family: "Open Sans", sans-serif;
  }

  & .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 */
.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: rgb(0, 36, 73);
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 43.2px;
  }

  & input {
    color: rgb(0, 36, 73);
    border-color: rgb(221, 236, 238);
    font-family: "Manrope", sans-serif;
  }

  & .btn {
    background-color: transparent;
    color: rgb(0, 36, 73);
    border-color: rgb(0, 36, 73);
    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;
  }
}


/* === 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: 0;
      max-width: 100%;
    }
  }

  & > .container__content {
    gap: 10px;

    & > .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%;
  max-width: 50%;
  margin: 0 auto;
  padding: 40px 0;
}

/* 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 {
        font-weight: var(--faq-question-weight, 700);
        font-size: var(--faq-question-font-size);

        &:is(a) {
          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;
}

/* 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;
}


/* === 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;
}

/* 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: #e1f1fc;
}

.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: 30px;

      & 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);
      }

      & .col {
        & .card-basic {
          width: 100%;
          box-sizing: border-box;
        }

        &:last-child {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 20px;

          & .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: flex-start;

        & .col {
          flex: 1;
          --text-align: left;

          &:last-child {
            align-self: center;
            --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;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-need .col:first-child .card-basic {
  padding: 15px 20px;
  gap: 8px;
  box-sizing: border-box;
}

.container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-need .col:last-child .card-basic {
  box-sizing: border-box;
}

/* Mastercredi: compact row-need layout */
@media (width >= 768px) {
  .container-firma-digital-videoid[data-brand="mastercredi"] .hero-container-videoid .row-need {
    align-items: flex-start;
  }
}


/* === 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;
}

/* 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: #ffffff;
        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;
}

/* 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 {
  color: #333333 !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="crediator"] .card-basic__description {
  color: #333333 !important;
}

/* 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-color: #e1f1fc !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-family: "Manrope", sans-serif;
  font-size: 2.75rem;
  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: #002449 !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="creditando"] .card-basic__description {
  color: #002449 !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: #13233a !important;
  font-weight: 700;
}

.container-ventajas-videoid[data-brand="crediticio"] .card-basic__description {
  color: #000000 !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: 40px;
  --logo-max-height: 50px;
  --logo-max-width: 100px;
  --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: 30px;
  --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, 1400px);
  margin: 0 auto;
  padding: 50px var(--body-padding-horizontal, 1rem) 50px;
}

.footer__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 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: 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 {
  display: inline-block;
  width: 59px;
  height: 30px;
  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)));
}

/* 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: 15px;
  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 40px;
  }
}

/* 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%;
  }
}

/* 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;
  }

  .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(255, 0, 134, 1);
}

:root[data-brand="credital"] .section-divider {
  background-color: rgba(163, 24, 225, 0.5); /* Purple with opacity */
}

/* CrediTal footer specific styles */
:root[data-brand="credital"] .footer {
  & .footer__column h4 {
    color: #FF30C4; /* Tertiary pink/fuchsia */
  }

  & .footer__column a {
    color: #F2F2F2;
  }

  & :is(.footer__column li, .footer__column p, .footer__small-text p, .footer__header__column-payment-methods) {
    color: #AF9FCD; /* Lavender gray */
  }

  & .footer__powered-by {
     color: #AF9FCD;
  }
}


/* === 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);
      }
    }
  }

  /* 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 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;
  }
}


/* === 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: 120px;
  --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%;
  padding-top: var(--header-padding-top);
  padding-bottom: var(--header-padding-bottom);
  padding-left: var(--body-padding-horizontal);
  padding-right: var(--body-padding-horizontal);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: 85px;
}

.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: 0;
}

.header-nav__mobile-button svg {
  color: var(--navbar-text-color, var(--color-brand-secondary));
  height: var(--page-header-mobile-menu-button-height);
}

/* 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-item>a {
  color: var(--navbar-link-color, var(--navbar-text-color, var(--color-brand-secondary)));
  text-decoration: none;
  white-space: nowrap;
}

/* 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;
  padding-top: 15px;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-brand-primary);
  overflow: hidden;
}

.header-nav__dropdown-item {
  margin: 0;
  border-bottom: 1px solid var(--color-brand-primary);
}

.header-nav__dropdown-item:last-child {
  border-bottom: none;
}

.header-nav__dropdown-item a {
  padding: 3px 10px 3px 5px;
  display: block;
  color: var(--color-text-primary);
  text-decoration: none;
}

.header-nav__dropdown-item a:hover {
  background-color: var(--color-brand-primary);
  color: #fff;
}

/* 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: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: visible;
  padding: 12px 20px;
  min-width: 320px;
  width: max-content;
}

.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);
}

.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 Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 400px;
  height: 100vh;
  background: var(--mobile-menu-bg);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  padding: 2rem;
  transition: right 0.3s ease;
  z-index: 10000;
}

.mobile-menu--open {
  right: 0;
}

.mobile-menu__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-menu__close svg {
  display: block;
  width: 24px;
  height: 24px;
}

.mobile-menu__logo {
  display: block;
  width: 120px;
  margin: 2rem 0;
}

.mobile-menu__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__nav>li {
  border-bottom: 1px solid var(--color-surface-elevated);
}

.mobile-menu__link {
  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.4rem);
  font-weight: var(--font-weight-medium, 500);
}

.mobile-menu__subnav {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 1rem;
}

.mobile-menu__sublink {
  display: block;
  padding: 0.5rem 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-base-font-size, 1rem);
}

/* Mobile Menu Sections (for grouped dropdowns) */
.mobile-menu__sections {
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

.mobile-menu__section {
  margin-bottom: 0.5rem;
}

.mobile-menu__section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0.5rem 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-menu__auth {
  list-style: none;
  margin: 2rem 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.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);
  /* Default: non-highlighted state */
  background-color: transparent;
  color: var(--navbar-auth-button-color, var(--navbar-text-color, var(--color-brand-secondary)));
}

.mobile-menu__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));
}

/* Responsive: 600px+ */
@media (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__mobile-button svg {
  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__mobile-button svg {
  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 (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: absolute;
    padding-top: 15px;
    z-index: 1;
  }

  .header-nav__dropdown-items {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-brand-primary);
    overflow: hidden;
  }

  .header-nav__dropdown h4 {
    font-weight: bold;
    padding-left: 10px;
    padding-top: 5px;
  }

  .header-nav__dropdown-items>.header-nav__dropdown-item {
    border-bottom: 1px solid var(--color-brand-primary);
    display: grid;
    grid-template-columns: 100px 1fr;
    padding: 5px;
  }

  .header-nav__dropdown-items a {
    padding: 3px 10px 3px 5px;
    display: block;
  }

  .header-nav__dropdown-items a:hover {
    background-color: var(--color-brand-primary);
    color: #fff;
  }

  .header-nav__dropdown-items li:last-child {
    border: none;
  }
}

/* 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;
}

[data-brand="credizoom"] .header-nav {
  padding-top: 40px;
  padding-bottom: 0;
}

[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;
      }
    }
  }

  /* 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;
      }
    }
  }
}

/* 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 === */
/**
 * 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;
  }

  & .container__content {
    padding-top: var(--container-content-padding-vertical);
    padding-bottom: var(--container-content-padding-vertical);
  }

  &.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: 40px;
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: var(--container-content-padding-horizontal);
      padding-right: var(--container-content-padding-horizontal);
    }

  }

  & .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;

    & p {
      font-weight: var(--font-weight-semibold);
      font-size: var(--hero-text-font-size);
      line-height: var(--hero-text-line-height);
      text-wrap: balance;

      & strong {
        font-weight: var(--font-weight-bold);
      }
    }
  }

  & .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: 2;
        }
      }

      &.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"] {
  & h2 {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 39.6px;
    font-weight: 300;
    line-height: 39.6px;
    color: rgb(46, 16, 71);
  }

  & ul li {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 16.56px;
    font-weight: 700;
    color: rgb(46, 16, 71);
  }

  & ul li svg {
    color: rgb(216, 199, 255);
  }
}

/* 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;
    font-weight: 700;
    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;
  }
}

/* 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-family: "Manrope", sans-serif;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 34.56px;
    color: rgb(51, 51, 51);
  }

  & ul li {
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
    color: rgb(51, 51, 51);
  }

  & 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-family: "Roboto", sans-serif;
    font-size: 28.8px;
    font-weight: 300;
    line-height: 34.56px;
    color: rgb(24, 45, 82);
  }

  & ul li {
    font-family: "Roboto", sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    color: rgb(24, 45, 82);
  }

  & 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"] {
  & h2 {
    font-family: "Manrope", sans-serif;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 34.56px;
    color: rgb(0, 36, 73);
  }

  & ul li {
    font-family: "Manrope", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
    color: rgb(0, 36, 73);
  }

  & 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-family: "Open Sans", sans-serif;
    font-size: 28.8px;
    font-weight: 700;
    line-height: 34.56px;
    color: rgb(19, 35, 58);
  }

  & ul li {
    font-family: "Open Sans", sans-serif;
    font-size: 14.4px;
    font-weight: 600;
    color: rgb(0, 0, 0);
  }

  & ul li svg {
    color: rgb(19, 35, 58);
  }

  & .hero-container__buttons .btn {
    background-color: #13233a !important;
    border-color: transparent !important;
    color: #ffa573 !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;
  }
}

/* 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;
  }
}


/* === 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-family: "Helvetica Neue", sans-serif;
    font-size: 39.6px;
    font-weight: 300;
    line-height: 47.52px;
    color: rgb(46, 16, 71);
  }

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

/* 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);
  }
}

/* Crediamigo - 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);
    }
  }
}

/* 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 {
        color: rgb(46, 16, 71);
        font-size: 39.6px;
        font-weight: 300;
        font-family: "Helvetica Neue", sans-serif;
        line-height: 39.6px;
      }

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

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

    /* Crediamigo - 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;
      }
    }

    /* 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: #f55f99;
      }

      & h2 {
        color: #333333;
        font-size: 31.68px;
        font-weight: 800;
        font-family: "Manrope", sans-serif;
        line-height: 38.016px;
      }

      & p {
        color: #333333;
        font-size: 14.4px;
        font-weight: 600;
        font-family: "Manrope", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #333333;
        font-size: 18.72px;
        font-weight: 600;
        font-family: "Manrope", sans-serif;
        line-height: 26.208px;
      }
    }

    /* 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: #ff0086;
      }

      & h2 {
        color: #182d52;
        font-size: 31.68px;
        font-weight: 300;
        font-family: "Roboto", sans-serif;
        line-height: 38.016px;
      }

      & p {
        color: #182d52;
        font-size: 14.4px;
        font-weight: 500;
        font-family: "Roboto", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #182d52;
        font-size: 18.72px;
        font-weight: 500;
        font-family: "Roboto", sans-serif;
        line-height: 26.208px;
      }
    }

    /* 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: #13233a;
      }

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

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

      & footer {
        color: #13233a;
        font-size: 22.32px;
        font-weight: 500;
        font-family: "Open Sans", sans-serif;
        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;
      }
    }

    /* 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 {
        color: #1564e9;
        font-size: 39.6px;
        font-weight: 300;
        font-family: "Helvetica Neue", sans-serif;
        line-height: 39.6px;
      }

      & p {
        color: #1564e9;
        font-size: 14.4px;
        font-weight: 700;
        font-family: "Helvetica Neue", sans-serif;
        line-height: 18.72px;
      }

      & footer {
        color: #1564e9;
        font-size: 22.32px;
        font-weight: 400;
        font-family: "Helvetica Neue", sans-serif;
        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;
      }
    }
  }

  /* 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;
        }
      }
    }

    /* 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: 14px;
    --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;
        }
      }
    }
  }

  /* Credimoney brand styles */
  &.hero-list--credimoney {
    & li {
      font-family: "Helvetica Neue", sans-serif;
      font-size: 16.56px;
      font-weight: 700;
      color: #2e1047;
      line-height: 23.184px;
    }

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

  /* 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;
    }

    & .hero-list__icon {
      --list-icon-color: #032d8f;
    }
  }

  /* 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-family: "Open Sans", sans-serif;
      font-size: 16.56px;
      font-weight: 400;
      color: rgb(51, 51, 51);
      line-height: 23.184px;
      align-items: flex-start;

      & strong {
        color: #4570ae;
      }
    }

    & .hero-list__icon {
      --list-icon-color: #4570ae;
      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-family: "Open Sans", sans-serif;
      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: #13233a;
      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;
      }
    }
  }
}


/* === HeroPanelAmigo.module.css === */
.heroPanelAmigo {
}

/* Crediahora: outer container with gray background */
.brand-crediahora {
    background: #f5f5f5;
}

.heroPanelAmigo :global(.row) {
    position: relative;
    padding: 60px var(--container-content-padding-horizontal);
    border-radius: 40px;
}

/* Credimoney: gray background */
.brand-credimoney :global(.row) {
    background: var(--color-brand-primaryLight);
}

/* Crediahora: white background */
.brand-crediahora :global(.row) {
    background: #ffffff;
}

/* Oledinero: lime green background */
.brand-oledinero :global(.row) {
    background: #d7ff7b;
}

.heroPanelAmigo h2 {
    font-size: var(--text-2xl-font-size);
    line-height: var(--text-2xl-line-height);
    font-weight: var(--h2-font-weight);
    margin-bottom: 0;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (width >= 1024px) {
    .list {
        margin-right: 100px;
    }
}

.heroPanelAmigo :global(.col-img) img {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
    height: auto;
}

@media (width >= 1024px) {
    .heroPanelAmigo :global(.col-img) img {
        margin-top: -320px;
        margin-bottom: -320px;
        max-height: 600px;
        width: auto;
    }
}

/* Credimoney: smaller image */
@media (width >= 1024px) {
    .brand-credimoney :global(.col-img) img {
        max-height: 380px;
    }
}

.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;
}

.extra {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: var(--color-brand-primary);
}

/* Crediahora: green color for plus icon */
.brand-crediahora .extra {
    color: rgb(149, 193, 31);
}

/* Crediahora and Oledinero: lighter font weight for list items */
.brand-crediahora .list li,
.brand-oledinero .list li {
    font-weight: 400;
}


/* === 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;
}

/* 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: 1.2 1 0%;
}

.hero-container-panel-control .col-img img {
  width: 100%;
  max-height: none;
  margin: 0;
}

/* Brand-specific h2 styles */
[data-brand="credimoney"] .hero-container-panel-control h2 {
  font-size: 28.8px;
  font-weight: 300;
  line-height: 34.56px;
}

[data-brand="credimoney"] .hero-container-panel-control p {
  font-size: 20.16px;
  font-weight: 700;
  line-height: 26.208px;
}

[data-brand="credimoney"] .hero-container-panel-control .hero-list li {
  font-size: 14.4px;
  font-weight: 700;
}

[data-brand="crediahora"] .hero-container-panel-control h2 {
  font-size: 28.8px;
  font-weight: 900;
  line-height: 34.56px;
}

[data-brand="crediahora"] .hero-container-panel-control p {
  font-size: 17.28px;
  font-weight: 400;
  line-height: 22.464px;
}

[data-brand="crediahora"] .hero-container-panel-control .hero-list li {
  font-size: 14.4px;
}

[data-brand="oledinero"] .hero-container-panel-control h2 {
  font-size: 28.8px;
  font-weight: 700;
  line-height: 34.56px;
}

[data-brand="oledinero"] .hero-container-panel-control p {
  font-size: 18.72px;
  font-weight: 600;
  line-height: 24.336px;
}

[data-brand="oledinero"] .hero-container-panel-control .hero-list li {
  font-size: 14.4px;
  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 */
.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-family: "Seitu", sans-serif !important;
  font-size: 44px;
  font-weight: 500;
  line-height: 44px;
  color: #0000FF;
}

[data-brand="creditoamigo"] .hero-container-panel-control p {
  font-family: "Seitu", sans-serif;
  font-size: 20.8px;
  font-weight: 400;
  color: #000000;
}

[data-brand="creditoamigo"] .hero-container-panel-control .hero-list li {
  font-family: "Seitu", sans-serif;
  font-size: 18.4px;
  font-weight: 500;
  color: #000000;
}

[data-brand="creditoamigo"] .hero-container-panel-control .hero-list__icon {
  --list-icon-color: #81FD96;
}

[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;
}

/* 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-family: "Harabara", sans-serif !important;
  font-size: 31.68px;
  font-weight: 500;
  line-height: 38.016px;
  color: #073034;
}

[data-brand="creditoclic"] .hero-container-panel-control p {
  font-family: "Montserrat", sans-serif;
  font-size: 18.72px;
  font-weight: 500;
  color: #073034;
}

[data-brand="creditoclic"] .hero-container-panel-control .hero-list li {
  font-family: "Montserrat", sans-serif;
  font-size: 16.56px;
  font-weight: 500;
  color: #073034;
}

[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-family: "Open Sans", sans-serif !important;
  font-size: 39.6px;
  font-weight: 800;
  line-height: 39.6px;
  color: #333333;
}

[data-brand="creditopro"] .hero-container-panel-control p {
  font-family: "Open Sans", sans-serif;
  font-size: 22.32px;
  font-weight: 400;
  color: #333333;
}

[data-brand="creditopro"] .hero-container-panel-control .hero-list li {
  font-family: "Open Sans", sans-serif;
  font-size: 16.56px;
  font-weight: 400;
  color: #333333;
}

[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-family: "Manrope", sans-serif;
  font-size: 28.8px;
  font-weight: 800;
  line-height: 34.56px;
  color: #333333;
}

.hero-container-panel-control[data-brand="crediator"] p {
  font-family: "Manrope", sans-serif;
  font-size: 17.28px;
  font-weight: 600;
  line-height: 22.464px;
  color: #333333;
}

.hero-container-panel-control[data-brand="crediator"] .hero-list li {
  font-family: "Manrope", sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  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;
}

/* Credifix brand styles */
.container.secondary-bg.hero-container-panel-control[data-brand="credifix"] {
  background-color: #d9e4f5 !important;
  background: rgb(217, 228, 245) url('/images/bg/bg-header-2.png') no-repeat 100% 100% / cover !important;
}

.hero-container-panel-control[data-brand="credifix"] h2 {
  font-family: "Roboto", sans-serif;
  font-size: 28.8px;
  font-weight: 300;
  line-height: 34.56px;
  color: #182d52;
}

.hero-container-panel-control[data-brand="credifix"] p {
  font-family: "Roboto", sans-serif;
  font-size: 17.28px;
  font-weight: 500;
  line-height: 22.464px;
  color: #182d52;
}

.hero-container-panel-control[data-brand="credifix"] .hero-list li {
  font-family: "Roboto", sans-serif;
  font-size: 14.4px;
  font-weight: 500;
  color: #182d52;
}

.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:not(.btn-extra) {
  background-color: #96b4e6 !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  color: #182d52 !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;
}

/* Credifix: Image smaller and right-aligned */
.hero-container-panel-control[data-brand="credifix"] .col-img img {
  max-width: 600px;
  max-height: 360px;
}

@media (width >= 1024px) {
  .hero-container-panel-control[data-brand="credifix"] .container-col {
    flex: 1 1 40% !important;
  }

  .hero-container-panel-control[data-brand="credifix"] .col-img {
    flex: 1.2 1 60% !important;
    place-items: center flex-end !important;
    min-width: 0 !important;
  }
}

/* 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-family: "Open Sans", sans-serif;
  font-size: 28.8px;
  font-weight: 700;
  line-height: 34.56px;
  color: #000000;
}

.hero-container-panel-control[data-brand="crediscore"] p {
  font-family: "Open Sans", sans-serif;
  font-size: 17.28px;
  font-weight: 500;
  line-height: 22.464px;
  color: #000000;
}

.hero-container-panel-control[data-brand="crediscore"] .hero-list li {
  font-family: "Open Sans", sans-serif;
  font-size: 14.4px;
  font-weight: 500;
  color: #000000;
}

.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"] h2 {
  font-family: "Manrope", sans-serif;
  font-size: 28.8px;
  font-weight: 800;
  line-height: 34.56px;
  color: #002449;
}

.hero-container-panel-control[data-brand="creditando"] p {
  font-family: "Manrope", sans-serif;
  font-size: 17.28px;
  font-weight: 600;
  line-height: 22.464px;
  color: #002449;
}

.hero-container-panel-control[data-brand="creditando"] .hero-list li {
  font-family: "Manrope", sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  color: #002449;
}

.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-family: "Manrope", sans-serif;
  font-size: 28.8px;
  font-weight: 800;
  line-height: 34.56px;
  color: #000000;
}

.hero-container-panel-control[data-brand="creditozas"] p {
  font-family: "Manrope", sans-serif;
  font-size: 20.16px;
  font-weight: 500;
  line-height: 26.208px;
  color: #000000;
}

.hero-container-panel-control[data-brand="creditozas"] .hero-list li {
  font-family: "Manrope", sans-serif;
  font-size: 14.4px;
  font-weight: 400;
  color: #000000;
}

.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-family: "Coolvetica", sans-serif;
  font-size: 28.8px;
  font-weight: 700;
  line-height: 34.56px;
  color: #1a1a1a;
}

.hero-container-panel-control[data-brand="mastercredi"] p {
  font-family: "AdobeClean", sans-serif;
  font-size: 20.16px;
  font-weight: 600;
  line-height: 26.208px;
  color: #1a1a1a;
}

.hero-container-panel-control[data-brand="mastercredi"] .hero-list li {
  font-family: "AdobeClean", sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  color: #1a1a1a;
}

.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;
}

.hero-container-panel-control[data-brand="mastercredi"] .container__content {
  padding-right: 0 !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;
}


/* === 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;
      }
    }
  }

  /* 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;
}

/* ===== CREDIAMIGO BRAND ===== */
section.hero-container-plan-amigo[data-brand="creditoamigo"] {
  background-color: #ffffff;
}

/* Crediamigo 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;
}

/* Crediamigo 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;
}

/* ===== 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;
}


/* === HeroPuntosAFavor.module.css === */
.heroPuntosAFavor {
}

/* Credimoney: yellow background with dark purple text */
.heroPuntosAFavor[data-brand="credimoney"] {
    background: #f8f892;
    color: rgb(46, 16, 71);
}

.heroPuntosAFavor[data-brand="credimoney"] h2 {
    color: rgb(46, 16, 71);
}

/* Crediahora: dark background with white text */
.heroPuntosAFavor[data-brand="crediahora"] {
    background: #1d1d1b;
    color: #ffffff;
}

.heroPuntosAFavor[data-brand="crediahora"] h2 {
    color: #ffffff;
}

.heroPuntosAFavor[data-brand="crediahora"] .list li {
    color: #ffffff;
}

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

.heroPuntosAFavor[data-brand="oledinero"] h2 {
    color: #ffffff;
}

.heroPuntosAFavor[data-brand="oledinero"] .list li {
    color: #ffffff;
}

.heroPuntosAFavor h2 {
    font-size: var(--text-2xl-font-size);
    line-height: var(--text-2xl-line-height);
    font-weight: var(--h2-font-weight);
    margin-bottom: 0;
}

.heroPuntosAFavor .col {
    flex: 2;
}

.heroPuntosAFavor .col-img {
    flex: 1;
}

.heroImage {
    align-self: end;
    transform: scale(1);
    transform-origin: bottom center;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.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;
}

.icon {
    align-self: flex-start;
    width: 14px;
    flex-shrink: 0;
}

/* Credimoney: dark purple icons on yellow background */
.heroPuntosAFavor[data-brand="credimoney"] .icon {
    color: rgb(46, 16, 71);
}

/* Crediahora: white icons on dark background */
.heroPuntosAFavor[data-brand="crediahora"] .icon {
    color: #ffffff;
}

/* OleDinero: white icons on dark blue gradient */
.heroPuntosAFavor[data-brand="oledinero"] .icon {
    color: #ffffff;
}


/* === HeroQueConsigues.module.css === */
.heroQueConsigues {
}

.credimoneyBackground {
    background: #d8c7ff;
    color: rgb(46, 16, 71);
}

.credimoneyBackground h2 {
    color: rgb(46, 16, 71);
}

.credimoneyBackground :global(.btn) {
    background-color: #f8f892 !important;
    border: none !important;
    color: rgb(46, 16, 71) !important;
}

.credimoneyBackground .icon {
    color: rgb(46, 16, 71);
}

.heroQueConsigues :global(.row) {
    gap: 40px;
}

.heroQueConsigues :global(.col) {
    flex: 1;
}

.heroQueConsigues :global(.col-img) {
    flex: 1;
}

.heroQueConsigues h2 {
    font-size: var(--text-2xl-font-size);
    line-height: var(--text-2xl-line-height);
    font-weight: var(--h2-font-weight);
    margin-bottom: 0;
}

.heroImage {
    align-self: end;
    transform: scale(1);
    transform-origin: bottom center;
}

.heroQueConsigues :global(.col-img img) {
    max-width: 100%;
    height: auto;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.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;
}

.icon {
    align-self: flex-start;
    width: 14px;
    color: var(--color-brand-primary);
    flex-shrink: 0;
}

.icon svg {
    min-width: 100%;
}

.heroQueConsigues:global(.bg-gradient-inverse) .icon {
    color: var(--color-brand-secondary);
}


/* === 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;
}

/* 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;
    width: 14px;
    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;
    }
  }

  /* 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;
  }
}

/* ===== 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;
  }

  /* 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: 1300px;
    margin: 0 auto;
    margin-top: 2rem;
    display: grid;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    align-items: initial;
    padding: 1rem;
    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: 14px;
    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);
      }
    }
  }

  /* 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;
      }
    }
  }
}

/* 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 20px;
    }

    & .hero-sobre-nosotros__text {
      order: -1;
    }

    & .hero-sobre-nosotros__text p {
      margin-bottom: 10px;
    }
  }
}


/* === 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;
  }
}

.home-hero-header__title {
  margin-bottom: 0.5rem;
  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: 1rem;
  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 {
  & .home-hero-header__title {
    font-family: "Helvetica Neue", sans-serif;
    font-size: clamp(1.6rem, 6vw, 43.2px);
    font-weight: 300;
    line-height: 1.2;
    color: #2e1047;
  }

  & .home-hero-header__subtitle {
    color: #2e1047;
  }
}

/* Crediahora brand styles */
.home-hero-header--crediahora {
  & .home-hero-header__title {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.6rem, 6vw, 40.32px);
    font-weight: 900;
    line-height: 1.2;
    color: #1d1d1b;
  }

  & .home-hero-header__subtitle {
    color: #1d1d1b;
  }
}

/* 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;
    }
  }
}

/* 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;
  }
}

/* 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;
  }

  & .hero-container__buttons .btn {
    background-color: transparent !important;
    border: 2px solid rgb(7, 48, 52) !important;
    color: rgb(7, 48, 52) !important;
  }
}

/* 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);
    }

    & .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;

  & .home-hero-header__title {
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.6rem, 6vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    color: #333333;
    margin: 11.52px 0 0;
  }

  & .home-hero-header__subtitle {
    color: #333333;
    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;
  }

  &.hero-image-full > .container__content {
    width: 100%;
    max-width: 1400px;
    padding-left: 80px;
    padding-right: 30px;
  }
}

/* Credifix brand styles */
:root .home-hero-header--credifix {
  --container-title-h1-color: #182d52;

  & .home-hero-header__title {
    font-family: "Roboto", sans-serif;
    font-size: clamp(1.6rem, 6vw, 43.2px);
    font-weight: 300;
    line-height: 1.2;
    color: #182d52;
  }

  & .home-hero-header__subtitle {
    color: #182d52;
  }

  & .hero-container__buttons .btn {
    background-color: #96b4e6 !important;
    border-color: #96b4e6 !important;
    color: #182d52 !important;
  }

  /* Image flush with bottom border of container */
  & .col-img {
    place-items: end flex-start !important;
    padding: 0 !important;
  }
}

/* Crediscore brand styles */
:root .home-hero-header--crediscore {
  --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;
  }

  & .hero-container__buttons .btn {
    background-color: #907ee8 !important;
    border-color: #907ee8 !important;
    color: #ffffff !important;
  }

  & .col-img {
    place-items: end flex-start !important;
    padding: 0 !important;
  }
}

/* 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;
  }

  & .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;
  }

  & .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;
  }

  & .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 {
  font-size: clamp(1.6rem, 6vw, 36px) !important;
  font-weight: 500 !important;
  line-height: 43.2px !important;
  color: #4eb5a4;
  text-transform: uppercase;
}

.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 {
  & .home-hero-header__title {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.6rem, 6vw, 45px);
    font-weight: 700;
    line-height: 1.1;
    color: #A318E1;
  }

  & .home-hero-header__subtitle {
    color: #34323F;
    font-size: clamp(1rem, 3vw, 1.4rem);
    font-weight: 500;
  }

  & .hero-container__buttons .btn {
    background-color: #A318E1 !important;
    border-color: #A318E1 !important;
    color: #ffffff !important;
    border-radius: 999px;
    padding: 14px 40px;
  }
}


/* === 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 */
}

/* 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;
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

/* Overlay Guia DNI */
.crop-guide-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 400px;
  aspect-ratio: 1.586; /* Proporcion DNI */
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  pointer-events: none; /* Deja pasar los toques al cropper */
  z-index: 10;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* Oscurece el exterior */
  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;
}

/* 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;
}


/* === 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;
}

/* 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 {
  font-size: 39.6px !important;
  font-weight: 300 !important;
  font-family: "Helvetica Neue", sans-serif !important;
  color: rgb(46, 16, 71) !important;
  text-align: center;
  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: rgba(238, 238, 238, 0.533);
  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;
}

/* Brand-specific card title styles */
:root[data-brand="crediahora"] .container-panel-usuario .card-basic__title {
  font-family: "Montserrat", sans-serif !important;
  color: rgb(29, 29, 27) !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;
}

.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;
}

/* Brand-specific card description styles */
:root[data-brand="crediahora"] .container-panel-usuario .card-basic__description {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  color: rgb(29, 29, 27) !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: rgb(248, 248, 146);
  color: rgb(46, 16, 71);
  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;
}

/* 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-family: "Open Sans", sans-serif !important;
  font-weight: 800 !important;
  color: rgb(51, 51, 51) !important;
}

:root[data-brand="creditopro"] .container-panel-usuario .card-basic__title {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 800;
  color: rgb(51, 51, 51) !important;
}

:root[data-brand="creditopro"] .container-panel-usuario .card-basic__description {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500;
  color: rgb(51, 51, 51) !important;
}

: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-family: "Manrope", sans-serif !important;
  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: #ffffff;
}

:root[data-brand="creditando"] .container-panel-usuario h2 {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  color: rgb(0, 36, 73) !important;
}

:root[data-brand="creditando"] .container-panel-usuario .card-basic__title {
  font-family: "Manrope", sans-serif !important;
  font-weight: 700;
  color: rgb(0, 36, 73) !important;
}

:root[data-brand="creditando"] .container-panel-usuario .card-basic__description {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600;
  color: rgb(0, 36, 73) !important;
}

:root[data-brand="creditando"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Manrope", sans-serif !important;
  color: rgb(0, 36, 73) !important;
}

:root[data-brand="creditando"] .container-panel-usuario .container-panel-usuario__footer em {
  color: rgb(0, 36, 73) !important;
}

: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-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  color: rgb(19, 35, 58) !important;
}

:root[data-brand="crediticio"] .container-panel-usuario .card-basic__title {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700;
  color: rgb(0, 0, 0) !important;
}

:root[data-brand="crediticio"] .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="crediticio"] .container-panel-usuario .container-panel-usuario__footer {
  font-family: "Open Sans", sans-serif !important;
  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 4rem;
  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: #ffc000;
}

.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);
}

/* 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);
}

/* 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);
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}


/* === 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;
}

/* ===== 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;
}

/* 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 300px 0 0;
    --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: 50px;
    --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: 30px;
    --maxima-seguridad-overlay-background-color: var(--color-brand-primary);
    --maxima-seguridad-overlay-text-font-size: 1rem;
    --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);
          }
        }
      }
    }
  }
}

@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: 30px;
      --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: 50px;
      --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;
    }

    /* Crediahora-specific: overlay uses secondary color (green), not primary (dark) */
    & .maxima-seguridad--crediahora {
      --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");
    }
  }
}

@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: 80px;
      --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);
    }
  }
}

:root {
  & .maxima-seguridad {
    & .img-logo {
      max-width: 150px;
    }

    & .container__content {
      display: flex;
      flex-direction: var(--maxima-seguridad-flex-direction);
      gap: 0;
      width: var(--maxima-seguridad-content-width);
      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: center;

            & 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: 20px;
                max-height: 20px;
                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 {
        & .container__content {
          align-items: stretch;
          /* Overlay height matches body height */

          & .maxima-seguridad__overlay {
            box-sizing: border-box;
          }

          & .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;
              }
            }
          }
        }
      }
    }
  }
}

@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
   ===================================================== */

/* 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;

      & 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;
      }
    }
  }
}

/* Crediamigo 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;
      }
    }
  }
}

/* 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;
  }

  & .container__content {
    & .maxima-seguridad__body {
      & .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 {
        color: #333333 !important;
        font-family: "Manrope", sans-serif !important;

        & 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;
      }

      & .maxima-seguridad__overlay {
        min-width: 250px !important;
        max-width: 250px !important;
        margin-left: -50px !important;
        padding: 30px !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;
  }

  & .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;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #182d52 !important;
        font-family: "Roboto", sans-serif !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: #e3e5f6 !important;
      border-radius: 20px !important;

      & p {
        color: #182d52 !important;

        & strong {
          color: #182d52 !important;
        }
      }

      & 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;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: center !important;

      & .maxima-seguridad__body {
        border-radius: 30px !important;
        padding: 40px 100px 40px 35px !important;
        box-sizing: border-box !important;
        max-width: 885px !important;
        max-height: 370px !important;

        & .maxima-seguridad__corner-icon {
          transform: translate(-50%, -50%) !important;
        }
      }

      & .maxima-seguridad__overlay {
        min-width: 200px !important;
        max-width: 200px !important;
        min-height: 270px !important;
        max-height: 270px !important;
        margin-left: -125px !important;
        padding: 40px 20px !important;
        box-sizing: border-box !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 {
      & .maxima-seguridad__title h2 {
        color: #907ee8 !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #000000 !important;
        font-family: "Open Sans", sans-serif !important;

        & span {
          color: #000000 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #907ee8 !important;
      }

      & ul li span.maxima-seguridad__list__item-icon :is(svg, img) {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
      }

      & .maxima-seguridad__corner-icon {
        width: 133px !important;
        height: 72px !important;
        transform: translate(-37.5px, -36px) !important;
      }

      & .maxima-seguridad__corner-icon img {
        max-width: 133px !important;
        max-height: 72px !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #e3e5f6 !important;
      border-radius: 20px !important;

      & p {
        color: #000000 !important;

        & strong {
          color: #000000 !important;
        }
      }

      & svg {
        color: #907ee8 !important;
      }

      & .btn {
        background-color: #907ee8 !important;
        border: none !important;
        color: #ffffff !important;
        border-radius: 999px !important;
      }
    }
  }

  & .container__content {
    & .maxima-seguridad__overlay {
      & img {
        width: 163.7px !important;
        height: 179px !important;
        max-width: none !important;
        max-height: none !important;
        margin-top: 0 !important;
      }

      & .btn {
        text-transform: uppercase !important;
        white-space: nowrap !important;
        font-family: "Open Sans", 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;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: center !important;

      & .maxima-seguridad__body {
        border-radius: 30px !important;
        padding: 50px 100px 50px 35px !important;
        box-sizing: border-box !important;
      }

      & .maxima-seguridad__overlay {
        min-width: 200px !important;
        max-width: 200px !important;
        min-height: 406px !important;
        max-height: 406px !important;
        margin-left: -50px !important;
        padding: 40px 20px !important;
        box-sizing: border-box !important;
      }
    }
  }
}

/* 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 {
        color: #002449 !important;
        font-family: "Manrope", sans-serif !important;
        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;
        padding: 75px 35px !important;
        box-sizing: border-box !important;
        margin-right: -1px !important;
        position: relative !important;
        z-index: 2 !important;
      }

      & .maxima-seguridad__overlay {
        min-width: 250px !important;
        max-width: 250px !important;
        margin-left: 0px !important;
        box-sizing: border-box !important;
      }
    }
  }
}

/* Crediticio brand styles */
.maxima-seguridad[data-brand="crediticio"] {
  &.bg-gradient {
    background-color: #ffffff !important;
    background-image: url("/images/bg/bg-crediticio.png") !important;
    background-size: cover !important;
  }

  & .container__content {
    & .maxima-seguridad__body {
      background-color: #e3f2fd !important;

      & .maxima-seguridad__title h2 {
        color: #13233a !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #000000 !important;
        font-family: "Open Sans", sans-serif !important;

        & span {
          color: #000000 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon {
        min-width: 45px !important;

        & svg {
          color: #ffa573 !important;
          min-width: 28px !important;
          max-height: 28px !important;
        }
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #ffa573 !important;
      border-radius: 0px 300px 300px 0px !important;

      & p {
        color: #000000 !important;

        & strong {
          color: #000000 !important;
        }
      }

      & svg {
        color: #ffa573 !important;
      }

      & .btn {
        background-color: #13233a !important;
        border: none !important;
        color: #ffa573 !important;
        border-radius: 40px !important;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: normal !important;

      & .maxima-seguridad__body {
        border-radius: 50px 0px 0px 50px !important;
        padding: 50px !important;
        box-sizing: border-box !important;
      }

      & .maxima-seguridad__overlay {
        min-width: 300px !important;
        max-width: 300px !important;
        margin-left: 0px !important;
        padding: 70px 70px 70px 30px !important;
        box-sizing: border-box !important;
      }
    }
  }
}

/* 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 {
        color: #000000 !important;
        font-family: "Manrope", sans-serif !important;
        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 !important;

      & 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__body {
        border-radius: 40px 0px 0px 40px !important;
        padding: 50px 35px !important;
        box-sizing: border-box !important;
        margin-right: -1px !important;
        position: relative !important;
        z-index: 2 !important;
      }

      & .maxima-seguridad__overlay {
        min-width: 300px !important;
        max-width: 300px !important;
        margin-left: 0px !important;
        padding: 50px 30px !important;
        box-sizing: border-box !important;
      }
    }
  }
}

/* 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 {
      & h2.maxima-seguridad__title {
        color: #4eb5a4 !important;
        font-size: 28.8px !important;
        text-transform: uppercase !important;
      }

      & ul li span.maxima-seguridad__list__item-text {
        color: #000000 !important;
        font-family: "AdobeClean", sans-serif !important;
        font-weight: 500 !important;

        & span {
          color: #000000 !important;
        }
      }

      & ul li span.maxima-seguridad__list__item-icon svg {
        color: #4eb5a4 !important;
      }
    }

    & .maxima-seguridad__overlay {
      background-color: #dcfff8 !important;
      border-radius: 40px !important;
      border: 2px solid #000000 !important;

      & p {
        color: #000000 !important;
        font-size: 14.4px !important;
        font-weight: 500 !important;

        & strong {
          color: #000000 !important;
          font-weight: 500 !important;
        }
      }

      & svg {
        color: #000000 !important;
      }

      & .btn {
        background-color: #000000 !important;
        border: none !important;
        color: #4eb5a4 !important;
        border-radius: 999px !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
      }
    }
  }

  @media (width >=768px) {
    & .container__content {
      align-items: center !important;

      & .maxima-seguridad__body {
        border-radius: 40px !important;
        padding: 50px 240px 50px 35px !important;
        box-sizing: border-box !important;
        border: 2px solid #000000 !important;
      }

      & .maxima-seguridad__overlay {
        min-width: 300px !important;
        max-width: 300px !important;
        margin-left: -185px !important;
        padding: 50px 30px !important;
        box-sizing: border-box !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 {
      & .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;
        padding: 30px 250px 70px 35px !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;
      }
    }
  }
}

/* Credital brand styles */
.maxima-seguridad[data-brand="credital"],
.maxima-seguridad[data-brand="credipay"] {
  & .container__content {
    & .maxima-seguridad__overlay {
      & p {
        & strong {
          color: #ffffff !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;
      }
    }
  }

  /* 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%;
    }
  }
}

.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;
  background: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  padding: 0.5em;
}

/* 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;
  }
}


/* === 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: 0;
}

/* 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;
}

/* CreditoAmigo: Gradient background */
.page-header-wrapper--creditoamigo {
  background-size: 100% 100%;
}

/* Credifix: Reduce excessive padding between navbar and content */
.page-header-wrapper--credifix .page-header-wrapper__content {
  padding-top: 20px;
}

/* Crediscore: Reduce padding-top on page header content */
.page-header-wrapper--crediscore .page-header-wrapper__content {
  padding-top: 20px;
}

/* Crediticio: Reduce excessive padding between navbar and content */
.page-header-wrapper--crediticio .page-header-wrapper__content {
  padding-top: 20px;
}

/* Creditozas: Remove excessive padding between navbar and content */
.page-header-wrapper--creditozas .page-header-wrapper__content {
  padding-top: 40px;
}

/* Credizoom: Add padding between navbar and content */
.page-header-wrapper--credizoom .page-header-wrapper__content {
  padding-top: 40px;
}


/* === 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, 1400px);
  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, 1400px);
  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="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;
    }
  }

  /* 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;
      }
    }
  }

  /* 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: 35%;
        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: rgb(192, 229, 235) !important;

  & .container-partners__content p {
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 20.16px !important;
    color: rgb(46, 16, 71) !important;
    font-weight: 400 !important;

    & strong {
      color: rgb(46, 16, 71) !important;
    }
  }

  & .partners__logos {
    --icon-color: rgb(46, 16, 71);

    /* 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="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: #00593f !important;

  & .container-partners__content {
    padding: 20px 0;
  }

  & .container-partners__content p {
    font-family: "Manrope", sans-serif !important;
    font-size: 20.16px !important;
    color: #cdf63e !important;
    font-weight: 400 !important;

    & strong {
      color: #cdf63e !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%);
    }
  }
}

.container-partners[data-brand="credital"] {
  background-color: #34323f !important;

  & .container-partners__content p {
    font-family: "Inter", sans-serif !important;
    font-size: 20.16px !important;
    color: #f5f5f5 !important;
    font-weight: 400 !important;

    & strong {
      color: #af9fcd !important;
      font-weight: 700 !important;
    }
  }

  & .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%);
    }
  }
}



/* === 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--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;
}


/* === 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;
  }

  & .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: 0 0 auto;
      max-width: 50%;

      & img {
        --image-max-width: 600px;
      }
    }
  }
}

/* Brand-specific styles for Crediahora */
.plan-amigo-ventajas-crediahora {
  & .col {
    & 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;
    }

    & p {
      font-weight: var(--font-weight-bold);
    }
  }

  & ul 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;

    /* Override icon color to green for crediahora (matching production) */
    & .hero-list__icon {
      color: #95C11F !important;
    }
  }

  & .col-img img {
    width: 100%;
    max-width: 484px;
  }
}

/* Brand-specific styles for Crediator */
.plan-amigo-ventajas-crediator {
  & .col {
    & h2 {
      font-family: "Manrope", sans-serif;
      font-size: 36px;
      font-weight: 800;
      color: #333333;
    }

    & p {
      font-family: "Manrope", sans-serif;
      font-weight: 600;
      color: #333333;
    }
  }

  & 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 {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      color: #182d52;
    }

    & p {
      font-family: "Roboto", sans-serif;
      color: #182d52;
    }
  }

  & ul li {
    font-family: "Roboto", sans-serif;
    color: #182d52;

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

  & .col {
    flex: 1 1 0% !important;
    width: auto !important;
  }

  & .col-img {
    flex: 1 1 0% !important;
    max-width: none !important;
    place-items: center;

    & img {
      max-width: 340px;
      max-height: 600px;
    }
  }
}

/* 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;
}

/* 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;
    }
  }
}


/* === 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: 22px;
  line-height: 22px;
  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-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,
.planes-amigo-comparador[data-brand="crediahora"] .comparador__item-best-seller h3 {
  color: #95C11F !important;
}

[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 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,
.planes-amigo-comparador[data-brand="oledinero"] .comparador__item-best-seller h3 {
  color: #d7ff7b !important;
}

[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 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,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item h3 {
  color: rgb(69, 112, 174) !important;
}

[data-brand="creditopro"] .comparador__item p,
[data-brand="creditopro"] .comparador__item li,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item p,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item li {
  color: rgb(69, 112, 174) !important;
}

[data-brand="creditopro"] .comparador__item li span,
.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 h3,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller h3 {
  color: rgb(243, 243, 243) !important;
}

[data-brand="creditopro"] .comparador__item-best-seller p,
[data-brand="creditopro"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller li {
  color: rgb(243, 243, 243) !important;
}

[data-brand="creditopro"] .comparador__item-best-seller li span,
[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__group-exclusive-products p span,
.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 {
  color: rgb(243, 243, 243) !important;
}

[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__best-seller span,
.planes-amigo-comparador[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: rgb(243, 243, 243) !important;
  color: rgb(69, 112, 174) !important;
}

[data-brand="creditopro"] .comparador__item-best-seller .comparador__item__buttons .btn,
.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 h3,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item h3 {
  color: rgb(7, 48, 52) !important;
}

[data-brand="creditoclic"] .comparador__item p,
[data-brand="creditoclic"] .comparador__item li,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item p,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item li {
  color: rgb(7, 48, 52) !important;
}

[data-brand="creditoclic"] .comparador__item li span,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item li span {
  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 h3,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller h3 {
  color: rgb(255, 255, 255) !important;
}

[data-brand="creditoclic"] .comparador__item-best-seller p,
[data-brand="creditoclic"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="creditoclic"] .comparador__item-best-seller li {
  color: rgb(255, 255, 255) !important;
}

[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 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 h3,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item h3 {
  color: rgb(0, 0, 0) !important;
}

[data-brand="creditoamigo"] .comparador__item p,
[data-brand="creditoamigo"] .comparador__item li,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item p,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item li {
  color: rgb(0, 0, 0) !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-best-seller h3,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller h3 {
  color: rgb(0, 0, 0) !important;
}

[data-brand="creditoamigo"] .comparador__item-best-seller p,
[data-brand="creditoamigo"] .comparador__item-best-seller li,
.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,
.planes-amigo-comparador[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: rgb(0, 0, 255) !important;
  color: rgb(255, 255, 255) !important;
}

[data-brand="creditoamigo"] .comparador__item-best-seller .comparador__item__buttons .btn,
.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;
}

/* 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 h3,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller h3 {
  color: #333333 !important;
}

[data-brand="crediator"] .comparador__item-best-seller p,
[data-brand="crediator"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller li {
  color: #333333 !important;
}

[data-brand="crediator"] .comparador__item-best-seller li span,
.planes-amigo-comparador[data-brand="crediator"] .comparador__item-best-seller li span {
  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,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller h3 {
  color: #D9E4F5 !important;
}

[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 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,
.planes-amigo-comparador[data-brand="credifix"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #FF0086 !important;
  color: #ffffff !important;
}

[data-brand="credifix"] .comparador__item-best-seller .comparador__item__buttons .btn,
.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,
.planes-amigo-comparador[data-brand="crediscore"] .comparador__item-best-seller h3 {
  color: #ffffff !important;
}

[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 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,
.planes-amigo-comparador[data-brand="creditando"] .comparador__item-best-seller h3 {
  color: #ffffff !important;
}

[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 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,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller h3 {
  color: #FFA573 !important;
}

[data-brand="crediticio"] .comparador__item-best-seller p,
[data-brand="crediticio"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="crediticio"] .comparador__item-best-seller li {
  color: #FFA573 !important;
}

[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 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,
.planes-amigo-comparador[data-brand="creditozas"] .comparador__item-best-seller h3 {
  color: #E5EAEA !important;
}

[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 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,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller h3 {
  color: #000000 !important;
}

[data-brand="credizoom"] .comparador__item-best-seller p,
[data-brand="credizoom"] .comparador__item-best-seller li,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller p,
.planes-amigo-comparador[data-brand="credizoom"] .comparador__item-best-seller li {
  color: #000000 !important;
}

[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 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,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller h3 {
  color: #E2E8ED !important;
}

[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 {
  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,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__best-seller span {
  background: #93BCFC !important;
  color: #1A1A1A !important;
}

[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__buttons .btn,
.planes-amigo-comparador[data-brand="mastercredi"] .comparador__item-best-seller .comparador__item__buttons .btn {
  background: #93BCFC !important;
  color: #1A1A1A !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;
  margin-top: 60px;
}

.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 {
  padding-top: 0;
}

/* 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);
}

/* 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__amigo_platino {
  --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__amigo_platino {
  --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__amigo_platino {
  --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__amigo_platino .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__amigo_platino .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
 * ============================================================================= */

/* 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__amigo_platino .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__amigo_platino .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
 * ============================================================================= */

/* 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__amigo_platino .comparator-plan-card__conditions a {
  color: rgb(0, 0, 255) !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__amigo_platino .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 .comparator-plan-card {
  --card-background: rgba(229, 234, 234, 0.5);
}

.container.plan-amigo-includes-creditozas .comparator-plan-card.comparator-plan-card__amigo_platino {
  --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__amigo_platino .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__amigo_platino .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 {
  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__amigo_platino {
  --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__features li {
    font-size: 12.96px !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__amigo_platino .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__amigo_platino .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__amigo_platino {
  --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__amigo_platino .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__amigo_platino .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__amigo_platino {
  --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__amigo_platino .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__amigo_platino .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: 0;
}

.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__features li {
  font-size: 8.64px !important;
}

.container.plan-amigo-includes-credifix .comparator-plan-card.comparator-plan-card__amigo_platino {
  --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__features li {
    font-size: 11.52px !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__amigo_platino .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__amigo_platino .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__amigo_platino .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: 8.64px !important;
}

.container.plan-amigo-includes-crediscore .comparator-plan-card.comparator-plan-card__amigo_platino {
  --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: 11.52px !important;
  }
}

.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__amigo_platino .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__amigo_platino .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__amigo_platino .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__amigo_platino {
  --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__amigo_platino .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__amigo_platino .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__amigo_platino .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__amigo_platino .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__amigo_platino .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__amigo_platino {
  --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__amigo_platino .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__amigo_platino .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;
}

/* =============================================================================
 * Credipay brand-specific overrides
 * ============================================================================= */
.container.plan-amigo-includes-credipay {
  --banner-background: #1564e9;
  --banner-text-color: #ffffff;
  --badge-background: #00dfdb;
  --badge-text-color: #1564e9;
  --card-background: #f5f5f5;
  --platino-background: #0d1938;
}

.container.plan-amigo-includes-credipay .container__content {
  padding-top: 0;
}

.container.plan-amigo-includes-credipay .plan-amigo-includes .hero-list li {
  background: var(--badge-background) !important;
  color: var(--badge-text-color) !important;
}

.container.plan-amigo-includes-credipay .comparator-plan-card .comparator-plan-card__buttons .btn {
  background: #1564e9;
  color: #ffffff;
  border-color: #1564e9;
  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 .comparator-plan-card__buttons .btn {
  background: #A318E1;
  color: #ffffff;
  border-color: #A318E1;
  border-radius: 40px;
}


/* === 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: 300;
      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;
      }
    }
  }

  /* 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);
      }
    }

    /* 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;
}

/* 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="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="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;
}

/* 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;
}

/* 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: 40px 43.2px;
  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 (width >= 768px) {
  .page-registro__firma__content {
    max-width: 600px;
  }
}

@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%;

  & .container {
    display: flex;
    flex-direction: column;
    max-width: 1908px;
    margin: 0 auto;
  }

  & .container__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 43.2px;
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
  }

  & .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
  }

  & .row > .col {
    --row-text-column-gap: 40px;
    --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 20px 0;
  font-size: 32px;
  font-weight: 600;
  text-wrap: balance;
}

.rregistro-formulario__required {
  margin: 0 0 30px 0;
  font-size: 14px;
  color: #666;
}

.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: 30px;
}

.rregistro-formulario__image {
  display: none;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.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: 5px;
}

.form-text-wrapper label {
  font-size: 0.95rem;
  font-weight: 500;
}

.form-text-wrapper label sup {
  color: #dc3545;
}

.form-text-wrapper input {
  height: 50px;
  padding: 15px 25px;
  border: 1px solid rgb(222, 226, 230);
  border-radius: 9999px;
  font-size: 0.9rem;
  outline: none;
  background-color: rgb(232, 240, 254);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-text-wrapper input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-text-wrapper .text-danger {
  font-size: 0.85rem;
  color: #dc3545;
  margin-top: 2px;
}

/* Gender radio buttons */
.form-group-row {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
  margin-top: 5px;
}

.form-input-checkbox {
  margin: 0;
}

.form-input-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.form-input-checkbox input[type="radio"],
.form-input-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.label--gender {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 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;
  }
}

@media (min-width: 1024px) {
  .page-registro__email {
    & .row {
      flex-direction: row;
    }

    & .row > .col {
      flex: 1 1 0%;
    }

    & .container__content {
      padding-bottom: 100px;
    }
  }

  .rregistro-formulario__fields {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
  }

  .rregistro-formulario__image {
    display: block;
    margin-top: 30px;
    max-width: 100%;
    height: auto;
    max-height: 400px;
  }
}

/* Brand-specific styles - ContactoHeroForm pattern */

/* Credimoney */
.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"] .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"] .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"] .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;
}

/* CreditoClic */
.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"] .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"] .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: 39.6px;
}

.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"] .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"] .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"] .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"] .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"] .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"] .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;
}



/* === 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;
}

@media (min-width: 768px) {
  .page-header--registro {
    padding-top: 100px;
  }
}

.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);
}

@media (width >= 768px) {
  .container--registro {
    padding: 0 43.2px;
  }
}

.container__content {
  position: relative;
  max-width: 1400px;
  padding: 40px 15px 60px;
  margin: 0 auto;
}

@media (width >= 768px) {
  .page-header--registro .container__content {
    padding: 40px 43.2px 60px;
  }
}

.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;
  }

  .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;
  }
}

/* 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;
}

/* 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;
}


/* === 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;
}

.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;
}

.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: 39.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: #fafafa;
            max-width: 100%;
            padding: 25px;
            border-radius: 20px;
            text-align: center;
        }

        & .page-registro__pago__beneficiario {
            width: 100%;
            max-width: 650px;
            display: flex;
            flex-direction: column;
            gap: 15px;

            & 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 {
    max-width: 550px;
    margin: 1.5rem auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.page-registro__pago__details__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #eee;
    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;
        box-shadow: none;
        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 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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;
        }
    }
}

/* CreditoClic brand-specific styles */
.page-registro.page-registro__pago[data-brand="creditoclic"] {
    & .page-registro__pago__content {
        & h2 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 800;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 800;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 800;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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 {
            font-size: 39.6px;
            font-weight: 700;
            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;
  margin-bottom: 30px;
}

.page-registro__sms header h2 {
  margin: 0 0 20px 0;
  font-size: 39.6px;
  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: 24.48px;
  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;
  margin: 40px 0;
}

.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;
}

/* 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;
  }
}

@media (width >=1024px) {
  .page-registro__sms header h2 {
    margin-bottom: 30px;
  }
}

/* === 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%;
  padding: 30px 20px;
}

/* Wrapper for max-width constraint */
.registro-footer__wrapper {
  max-width: var(--body-max-width, 1400px);
  margin: 0 auto;
}

/* 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;
  }

  .registro-footer__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    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: 100%;
  padding: 15px 100px;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.registro-header-nav__logo {
  width: var(--page-header-logo-width, 120px);
  height: auto;
}

.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 120px;
  }

  .registro-header-nav__logo {
    width: 140px;
  }
}

@media (max-width: 767px) {
  .registro-header-nav__content {
    padding: 15px 20px;
  }
}

/* CreditoAmigo */
.registro-header-nav--creditoamigo .registro-header-nav__title p {
  font-family: "Seitu", sans-serif;
  color: #1D2C56;
  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;
}

/* 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;
}

/* Creditando: login page header gradient background */
.page-header-wrapper--creditando:has(.rinicio-sesion-header) {
  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;
}

/* 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 {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.section3cols .section3cols__item__description {
  font-size: 0.9rem;
}

/* 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;
}

/* 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;
  color: #c6fd00;
}

.section3cols--creditando.banner-bg .section3cols__icon svg {
  color: #c6fd00;
}

.section3cols--creditando.banner-bg .section3cols__item__title {
  font-weight: 600;
  color: #c6fd00;
}

.section3cols--creditando.banner-bg .section3cols__item__description {
  font-weight: 500;
  color: #c6fd00;
}

/* 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,
  & 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;
  }

  & .section-banner-confianza__icons img,
  & img {
    filter: brightness(0) invert(1);
  }
}

/* Credipay - blue background */
.section-banner-confianza-credipay {
  background: #1564e9 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff !important;
  }

  & .section-banner-confianza__icons img,
  & img {
    filter: brightness(0) invert(1);
  }
}

/* Credital - purple background */
.section-banner-confianza-credital {
  background: #A318E1 !important;

  &.container {
    --container-text-color: #ffffff;
  }

  & p {
    color: #ffffff !important;
  }

  & .section-banner-confianza__icons img,
  & 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: 100px;
    padding-bottom: 100px;
  }

  .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: 1400px;
  margin: 0 auto;
  padding: 100px 0;
}

.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;
  font-family: "Helvetica Neue", sans-serif;
  color: rgb(255, 255, 255);
}


/* 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: rgb(255, 124, 56);
  color: rgb(255, 255, 255);
  padding: 12px 25px;
  border-radius: 40px;
  font-size: 18.72px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: "Helvetica Neue", sans-serif;
  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;
  }

  .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;
}

/* 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;
    }
  }
}

/* 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);

  & .row {
    display: flex;
    gap: 0;
    flex-direction: column-reverse;

    & > .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--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 {
  background: #d9e4f5;

  & .container-map__content {
    color: #182d52;

    & svg {
      color: #182d52;
    }
  }

  & .container-map__telf {
    color: #182d52;
  }
}

.container-map--crediscore {
  background: #e1f1fc;

  & .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;
  }
}

@media (width >= 768px) {
  .container-map {
    & .row {
      flex-direction: row;

      & > .col {
        flex: 1 1 0%;
      }
    }

    & .container-map__content {
      width: 50%;

      & dl {
        & 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%;
}

.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 90px;
  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;
  }
}

/* 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;
  }

  /* #7041: Blog cards same size, images 426x280 */
  & .news-card {
    width: 426px;
    min-height: 521px;
    flex: 0 0 426px;
  }

  & .news-card__image {
    width: 426px;
    height: 280px;
    object-fit: cover;
  }

  & .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: 1400px;
  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 800px);
  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));
  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;
}

/* Credifix: H2 should be navy, not pink */
.container-paso-a-paso[data-brand="credifix"] h2 {
  color: #182d52;
}

/* Crediator: H2 and step titles should be dark, not pink */
.container-paso-a-paso[data-brand="crediator"] h2 {
  color: #333333;
}

.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 15px;
    padding-bottom: 350px;
    background-image: none;
  }

  .container-paso-a-paso li:nth-child(odd) {
    margin-left: 0;
  }

  .container-paso-a-paso li:nth-child(even) {
    margin-left: 0;
  }

  .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 h2 {
  font-size: 25.92px;
}

.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;
}


/* === 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: 1200px;
    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--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;
    }
  }
}

@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: var(--services-grid-max-width, 1400px);
  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: 1400px;
  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) {
  .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: 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;
}

.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;
}

.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: 20px;
  right: 25px;
  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;
}

/* 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: 1200px;
  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;
}

.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: var(--services-card-image-margin, 0);
}

.section-services .card__imageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 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: var(--services-card-image-margin, 30px 64px 0);
  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;
}

/* 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;
}

/* 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: 20px;
  right: 25px;
  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;
}

/* 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(--services-pagination-color, var(--color-brand-primary, #000));
  opacity: 0.3;
}

.section-services .swiper-pagination-bullet-active {
  opacity: 1;
}

/* 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 20px 80px;
    gap: 40px;
  }

  .section-services .section__title {
    font-size: calc(var(--services-title-font-size, 43.2px) * 0.7);
  }

  .section-services .section__title small {
    font-size: calc(var(--services-subtitle-font-size, 24.48px) * 0.7);
  }

  .section-services .services-list {
    padding: 0 10px;
  }

  .section-services .swiper-slide {
    height: auto;
  }

  .section-services .card {
    min-height: 400px;
  }

  .section-services .card__imageWrapper {
    height: calc(var(--services-card-image-height, 250px) * 0.8);
  }

  .section-services .card__content {
    padding: 25px 25px 70px;
  }

  .section-services .card__moreInfoIcon {
    padding: 0 25px 25px;
  }

  /* Hide nav arrows on mobile — pagination dots are enough */
  .section-services .swiper-button-prev,
  .section-services .swiper-button-next {
    display: none;
  }
}

@media (max-width: 480px) {
  .section-services {
    padding: 40px 15px 60px;
    gap: 30px;
  }

  .section-services .card__content {
    padding: 20px 20px 60px;
  }

  .section-services .card__moreInfoIcon {
    padding: 0 20px 20px;
  }
}

/* ====================
   DISCOVER ALL PRODUCTS BUTTON
   ==================== */

.services-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--services-button-margin-top, 30px);
  width: 100%;
}

.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);
  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-container {
    margin-top: 40px;
  }

  .services-button {
    font-size: 13px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .services-button-container {
    margin-top: 30px;
  }

  .services-button {
    font-size: 12px;
    padding: 8px 16px;
  }
}

/* ====================
   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;
}

/* 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 {
  background-color: rgba(255, 0, 134, 1);
  color: #ffffff;
  border-radius: 999px;
  border-color: transparent;
  padding: 18px 40px;
  font-size: 18px;
  gap: 10px;
}

[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;
}

/* Credifix: last 2 cards (blocked) get light blue background */
[data-brand="credifix"] .section-services .card--blocked,
[data-brand="credifix"] .container-list-servicios .card--blocked {
  background-color: #d9e4f5 !important;
}

[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: #ff0086;
}

[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;
}

/* ====================
   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));
}

/* ====================
   CREDITAL - Lavender bg, purple primary
   ==================== */

:root[data-brand="credital"] .section-services,
.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 {
  color: #34323F;
}

[data-brand="credital"] .services-list__groups li {
  color: #34323F;
}

[data-brand="credital"] .services-list__groups li.active,
[data-brand="credital"] .services-list__groups li:hover {
  color: #A318E1;
  background-color: rgba(163, 24, 225, 0.1);
}

[data-brand="credital"] .card__moreInfoIcon svg,
[data-brand="credital"] .card__moreInfoText svg {
  fill: #A318E1 !important;
  color: #A318E1 !important;
}

[data-brand="credital"] .services-button {
  background-color: #A318E1;
  color: #ffffff;
  border-radius: 999px;
  border-color: #A318E1;
}

[data-brand="credital"] .card__extra {
  background-color: #FF30C4;
  color: #ffffff;
}

.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;
}


/* === 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;
}

/* Image column should take more space */
.hero-container-dark-web .col-img {
  flex: 1.5 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 {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.1rem; /* 15.84px at base 14.4px */
  font-weight: 700;
  line-height: 1.43rem; /* 20.592px at base 14.4px */
  background-color: rgb(247, 241, 246);
  color: rgb(46, 16, 71);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="credimoney"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="crediahora"] p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem; /* 15.84px at base 14.4px */
  font-weight: 700;
  line-height: 1.43rem; /* 20.592px at base 14.4px */
  background-color: rgb(245, 245, 245);
  color: rgb(29, 29, 27);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 0;
}

.hero-container-dark-web [data-brand="crediahora"] p:last-child {
  margin-bottom: 0;
}

.hero-container-dark-web [data-brand="oledinero"] p {
  font-family: "Poppins", 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(245, 245, 245);
  color: rgb(2, 45, 142);
  padding: 20px;
  border-radius: 20px;
  margin: 0 0 40px 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;
}

/* Brand-specific image widths */
.hero-container-dark-web[data-brand="credimoney"] .col-img img {
  max-width: 840px;
  width: 840px;
}

.hero-container-dark-web[data-brand="crediahora"] .col-img img {
  max-width: 816px;
  width: 816px;
}

.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;
}

/* 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;
}

/* Content wrapper spacing */
.hero-container-riesgo .col > div[data-brand] {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Image max height constraint */
.hero-container-riesgo .col-img img {
  max-height: 300px;
  object-fit: contain;
}

/* Footer styling */
.hero-container-riesgo .hero-container__footer {
  background-color: transparent;
  padding: 40px 20px;
}

.hero-container-riesgo .hero-container__footer .my-swiper {
  max-width: 100%;
}

/* Footer cards - base styling */
.hero-riesgo__card {
  background-color: #ffffff;
  padding: 20px;
  font-size: 1rem;
  border-radius: 20px;
  height: 100%;
  text-align: left;
}

/* Brand-specific card colors and fonts */
.hero-container-riesgo[data-brand="credimoney"] .hero-riesgo__card {
  font-family: "Helvetica Neue", sans-serif;
  color: rgb(46, 16, 71);
  font-weight: 400;
  line-height: 1.4;
}

.hero-container-riesgo[data-brand="crediahora"] .hero-riesgo__card {
  font-family: "Montserrat", sans-serif;
  color: rgb(29, 29, 27);
  font-weight: 400;
  line-height: 1.4;
}

.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[data-brand="credimoney"] h2 {
  font-family: "Helvetica Neue", 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: 300;
  line-height: 1.8rem;
  color: rgb(46, 16, 71);
  text-wrap: balance;
  margin: 0;
}

.hero-container-riesgo[data-brand="credimoney"] p {
  font-family: "Helvetica Neue", sans-serif;
  font-feature-settings: normal;
  font-size: 14.4px;
  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: rgb(46, 16, 71);
  margin: 0;
}

.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;
}

/* 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[data-brand="crediator"] .hero-riesgo__card {
  font-family: "Manrope", sans-serif;
  color: #333333;
  font-weight: 400;
  line-height: 1.4;
}

.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: 1400px;
    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: 100px;
    padding-bottom: 100px;
  }

  & .service-hero-header__title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
  }

  & .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;
  }

  & .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: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;

    &: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 {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 300;
      color: rgb(46, 16, 71);
    }

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

    & .service-hero-header__list-item {
      font-family: "Helvetica Neue", sans-serif;
      color: rgb(46, 16, 71);
    }

    & .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-family: Montserrat, sans-serif;
      font-weight: 900;
      color: rgb(29, 29, 27);
    }

    & .service-hero-header__subtitle {
      font-family: Montserrat, sans-serif;
      font-weight: 400;
      color: rgb(29, 29, 27);
    }

    & .service-hero-header__list-item {
      font-family: Montserrat, sans-serif;
      color: rgb(29, 29, 27);
    }

    & .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-family: "Inter", sans-serif;
      font-weight: 700;
      color: #A318E1;
    }

    & .service-hero-header__subtitle {
      font-family: "Inter", sans-serif;
      font-weight: 500;
      color: #34323F;
    }

    & .service-hero-header__list-item {
      font-family: "Inter", sans-serif;
      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;
      }
    }
  }
}

@media (width >= 1024px) {
  :root {
    & .service-hero-header__container {
      max-width: 85%;
      padding: 0;
    }
  }
}

@media (width >= 1600px) {
  :root {
    & .service-hero-header__container {
      max-width: 1400px;
    }
  }
}

@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;
    }
  }
}


/* === 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;
      }
    }
  }
}

@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: 3px;
    }
    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;
    }
  }
}


/* === styles.css === */
.react-player {
  border-radius: 10px;
  width: 100%;
}


/* === styles.css === */
.video-player {
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  height: auto;
}