/**
 * Theme-specific styles
 * Additional WordPress-specific styling
 */

/* ============================================ */
/* SITE STRUCTURE                               */
/* ============================================ */

.site-main {
  padding: var(--space-24) 0;
  min-height: 60vh;
}

/* ============================================ */
/* BLOG POSTS GRID                              */
/* ============================================ */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (max-width: 809px) {
  .posts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ============================================ */
/* BLOG POST CARD                               */
/* ============================================ */

.blog-post-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  border: var(--border-width-thin) solid var(--color-border-light);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

.blog-post-card .post-thumbnail {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-gray-light);
}

.blog-post-card .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.blog-post-card:hover .post-thumbnail img {
  transform: scale(1.05);
}

.blog-post-card .post-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-post-card .entry-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.blog-post-card .entry-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
}

.blog-post-card .entry-title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-post-card .entry-title a:hover {
  color: var(--color-primary);
}

.blog-post-card .entry-summary {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  flex: 1;
}

.blog-post-card .entry-footer {
  margin-top: auto;
}

.blog-post-card .read-more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.blog-post-card .read-more-link:hover {
  gap: var(--space-3);
}

/* ============================================ */
/* SINGLE POST/PAGE                             */
/* ============================================ */

.single-post article,
.page-content article {
  max-width: 800px;
  margin: 0 auto;
}

.entry-header,
.page-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.entry-title,
.page-title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

@media (max-width: 809px) {
  .entry-title,
  .page-title {
    font-size: var(--font-size-4xl);
  }
}

.entry-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.entry-meta a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.entry-meta a:hover {
  color: var(--color-primary);
}

.post-thumbnail,
.page-featured-image {
  margin-bottom: var(--space-8);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.post-thumbnail img,
.page-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.entry-content,
.page-content-wrapper {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.entry-content p,
.page-content-wrapper p {
  margin-bottom: var(--space-6);
}

.entry-content h2,
.page-content-wrapper h2 {
  font-size: var(--font-size-3xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.entry-content h3,
.page-content-wrapper h3 {
  font-size: var(--font-size-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.entry-content ul,
.entry-content ol,
.page-content-wrapper ul,
.page-content-wrapper ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-8);
}

.entry-content li,
.page-content-wrapper li {
  margin-bottom: var(--space-2);
}

.entry-content blockquote,
.page-content-wrapper blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.05);
  border-radius: var(--border-radius-md);
  font-style: italic;
  color: var(--color-text-secondary);
}

.entry-content img,
.page-content-wrapper img {
  border-radius: var(--border-radius-md);
  margin: var(--space-8) 0;
}

.entry-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.tags-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.tags-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.tags-links a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.tags-links a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ============================================ */
/* POST NAVIGATION                              */
/* ============================================ */

.post-navigation {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.post-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.post-navigation a {
  padding: var(--space-6);
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  transition: all var(--transition-base);
  display: block;
}

.post-navigation a:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.nav-subtitle {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.nav-title {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ============================================ */
/* PAGINATION                                   */
/* ============================================ */

.pagination {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-4);
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.page-numbers:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.page-numbers.current {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ============================================ */
/* FOOTER STYLES                                */
/* ============================================ */

.site-footer {
  background-color: var(--color-white);
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-logo-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-logo img {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-circle);
  background: transparent;
}

.footer-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.footer-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  border-top: var(--border-width-thin) solid var(--color-border-light);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.footer-legal-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal-link:hover {
  color: var(--color-primary);
}

.footer-separator {
  color: var(--color-border-light);
}

@media (max-width: 809px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================ */
/* NO RESULTS / 404                             */
/* ============================================ */

.no-results,
.error-404 {
  text-align: center;
  padding: var(--space-24) var(--space-8);
}

.no-results .page-header,
.error-404 .page-header {
  margin-bottom: var(--space-8);
}

.no-results .page-content,
.error-404 .page-content {
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================ */
/* Broker Selection Subtitle                   */
/* ============================================ */

/* Subtitle container - centered, subtle styling */
.broker-selection-subtitle {
  max-width: 600px;
  margin: var(--space-10) auto var(--space-6);
  padding: 0 var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation states for subtitle */
.broker-selection-subtitle.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Subheadline in #unete section - initial hidden state */
#unete .elemento-8zjcow {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* ============================================ */
/* Promo Callout - 2 Meses Gratis              */
/* ============================================ */

.promo-callout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(4, 120, 178, 0.06) 0%, rgba(0, 70, 86, 0.03) 100%);
  border: 1px solid rgba(4, 120, 178, 0.15);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px auto 24px;
  max-width: 500px;
}

.promo-callout__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--color-primary, #0478b2);
}

.promo-callout__content {
  flex: 1;
}

.promo-callout__badge {
  display: inline-block;
  background: linear-gradient(135deg, #0478b2, #065a8c);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}

.promo-callout__text {
  font-size: 0.85rem;
  color: var(--color-primary-dark, #004656);
  margin: 0 0 4px;
  line-height: 1.4;
}

.promo-callout__text strong {
  color: var(--color-primary, #0478b2);
}

.promo-callout__conditions {
  font-size: 0.7rem;
  color: rgba(0, 70, 86, 0.7);
  margin: 0;
  font-style: italic;
}

/* Promo Callout - Responsive */
@media (max-width: 640px) {
  .promo-callout {
    padding: 14px 16px;
    margin: 14px 16px 20px;
  }
}

/* ============================================ */
/* Promo Connection Lines (Desktop only)       */
/* ============================================ */

.promo-connection-lines {
  display: block;
  width: 100%;
  max-width: 900px;
  height: 35px;
  margin: -20px auto -8px;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: visible;
}

.promo-line {
  stroke: rgba(4, 120, 178, 0.2);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.promo-line-arrow {
  stroke: rgba(4, 120, 178, 0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* Ocultar en tablet/mobile */
@media (max-width: 810px) {
  .promo-connection-lines {
    display: none;
  }
}

/* ============================================ */
/* Broker Pricing Cards                        */
/* ============================================ */

/* Cards container - responsive grid */
.broker-cards-container {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: var(--space-4) auto var(--space-12); /* Reduced to 16px top margin */
  padding: 0 var(--space-4);
}

/* Animation state for cards container */
.broker-cards-container.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Individual broker card */
.broker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8);
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  text-align: center;
  overflow: hidden; /* Prevent child elements from overflowing */
  /* Initial state for stagger animation */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

/* Hover state - subtle lift effect */
.broker-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.3);
}

/* Logo placeholder area */
.broker-card__logo-placeholder {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.03) 0%,
    rgba(var(--color-primary-rgb), 0.01) 100%
  );
  border: 1px dashed rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
}

/* Logo image styling */
.broker-card__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Broker name */
.broker-card__name {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  text-transform: capitalize;
  line-height: var(--line-height-tight);
  margin: 0;
}

/* Deposit info container */
.broker-card__deposit-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* Deposit line item */
.broker-card__deposit-item {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Minimum deposit (less emphasized) */
.broker-card__deposit-item--minimum {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* Recommended deposit (emphasized) */
.broker-card__deposit-item--recommended {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  font-size: var(--font-size-md);
}

/* CTA button */
.broker-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  margin-top: var(--space-3);
  background-color: var(--color-accent-green-light);
  color: var(--color-primary-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  border: var(--border-width-medium) solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius-pill);
  box-shadow: var(--shadow-glow-green);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

/* CTA hover state */
.broker-card__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0px 0px 44px 0px rgba(42, 240, 124, 0.4),
    0px 0px 0px 6px rgba(0, 255, 178, 0.15);
}

/* CTA active state */
.broker-card__cta:active {
  transform: translateY(0px);
  transition: all 100ms ease;
}

/* ============================================ */
/* Promotion Badge & Highlight Box             */
/* ============================================ */

/* Featured card - subtle border enhancement */
.broker-card--featured {
  border-color: rgba(var(--color-primary-rgb), 0.2);
  border-width: var(--border-width-medium);
}

.broker-card--featured:hover {
  border-color: rgba(var(--color-primary-rgb), 0.4);
}

/* Promotion badge - top-right corner */
.broker-card__promo-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: linear-gradient(
    135deg,
    var(--color-accent-green) 0%,
    var(--color-accent-green-light) 100%
  );
  color: var(--color-primary-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 2px 8px rgba(var(--color-accent-green-rgb), 0.3);
  z-index: var(--z-index-base);
}

/* Promotion highlight box */
.broker-card__promo-box {
  width: 100%;
  max-width: 100%; /* Prevent overflow */
  padding: var(--space-4);
  margin: 0; /* Reset any margin */
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-green-rgb), 0.08) 0%,
    rgba(var(--color-accent-green-rgb), 0.03) 100%
  );
  border: var(--border-width-medium) solid rgba(var(--color-accent-green-rgb), 0.2);
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all var(--transition-base);
  box-sizing: border-box; /* Include padding and border in width calculation */
}

/* Hover effect on promotion box */
.broker-card--featured:hover .broker-card__promo-box {
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-green-rgb), 0.12) 0%,
    rgba(var(--color-accent-green-rgb), 0.05) 100%
  );
  border-color: rgba(var(--color-accent-green-rgb), 0.3);
  /* Removed transform: scale(1.02) to prevent overflow on smaller screens */
}

/* Promotion title */
.broker-card__promo-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);
}

/* Promotion detail text */
.broker-card__promo-detail {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ============================================ */
/* Broker Card Selection States                */
/* ============================================ */

/* Hide the radio input */
.broker-card__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Check icon - hidden by default */
.broker-card__check-icon {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-green);
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-base);
  z-index: var(--z-index-base);
}

/* Make entire card clickable and interactive */
.broker-card {
  cursor: pointer;
  user-select: none;
}

/* Selected state */
.broker-card--selected {
  border-color: var(--color-accent-green);
  border-width: 3px;
  box-shadow:
    var(--shadow-lg),
    0px 0px 0px 4px rgba(var(--color-accent-green-rgb), 0.25),
    0px 0px 20px 0px rgba(var(--color-accent-green-rgb), 0.3);
  transform: translateY(-4px);
}

/* Dim non-selected card when one is selected */
.broker-cards-container:has(.broker-card--selected) .broker-card:not(.broker-card--selected) {
  opacity: 0.5;
  transform: scale(0.98);
  filter: grayscale(0.2);
}

/* Show check icon when selected */
.broker-card--selected .broker-card__check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Update CTA text when selected */
.broker-card--selected .broker-card__cta {
  background-color: var(--color-accent-green);
  border-color: rgba(var(--color-accent-green-rgb), 0.3);
  box-shadow:
    0px 0px 32px 0px rgba(42, 240, 124, 0.35),
    0px 0px 0px 4px rgba(0, 255, 178, 0.12);
}

/* Hover state for selected card */
.broker-card--selected:hover {
  border-color: var(--color-accent-green);
  box-shadow:
    var(--shadow-xl),
    0px 0px 0px 4px rgba(var(--color-accent-green-rgb), 0.2);
}

/* Focus state for accessibility */
.broker-card:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

/* ============================================ */
/* Email Form Container Animation             */
/* ============================================ */

/* Email form container - collapsed by default */
.final-cta-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
  will-change: transform, opacity, max-height;
}

/* Expanded state - shown after broker selection */
.final-cta-container--visible {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0) scale(1);
  margin-top: var(--space-8);
  overflow: visible;
}

/* Tablet: 810px - 1199px */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .broker-cards-container {
    max-width: 700px;
    gap: var(--space-5);
    margin: var(--space-10) auto;
  }

  .broker-card {
    padding: var(--space-7);
    gap: var(--space-4);
  }

  .broker-card__logo-placeholder {
    height: 54px;
  }

  .broker-card__name {
    font-size: var(--font-size-lg);
  }

  .broker-card__cta {
    padding: 14px 28px;
    font-size: var(--font-size-base);
  }

  /* Promotion elements - tablet */
  .broker-card__promo-badge {
    font-size: 11px;
    padding: 3px 10px;
  }

  .broker-card__promo-box {
    padding: var(--space-3);
    max-width: 100%;
    box-sizing: border-box;
  }

  .broker-card__promo-title {
    font-size: var(--font-size-base);
  }

  .broker-card__promo-detail {
    font-size: var(--font-size-xs);
  }
}

/* Mobile: < 810px - Stack cards vertically */
@media (max-width: 809.98px) {
  .broker-cards-container {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 100%;
    margin: var(--space-8) auto;
    padding: 0 var(--space-4);
  }

  .broker-card {
    padding: var(--space-6);
    gap: var(--space-4);
  }

  .broker-card__logo-placeholder {
    height: 50px;
  }

  .broker-card__name {
    font-size: var(--font-size-lg);
  }

  .broker-card__deposit-info {
    gap: var(--space-2);
  }

  .broker-card__cta {
    padding: 12px 24px;
    font-size: var(--font-size-base);
    width: 100%;
  }

  /* Promotion elements - mobile */
  .broker-card__promo-badge {
    font-size: 10px;
    padding: 3px 8px;
    top: var(--space-3);
    right: var(--space-3);
  }

  .broker-card__promo-box {
    padding: var(--space-3);
    max-width: 100%;
    box-sizing: border-box;
  }

  .broker-card__promo-title {
    font-size: var(--font-size-base);
  }

  .broker-card__promo-detail {
    font-size: var(--font-size-xs);
  }
}

/* ============================================ */
/* Broker Card Enhancements - New UX Flow      */
/* ============================================ */

/* Action section (hidden by default, shown when card selected) */
.broker-card__action-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Visible state with animation */
.broker-card__action-section--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Primary CTA button - Registration link (mismo diseño que broker-card__cta) */
.broker-card__primary-cta,
.broker-card__action-section .broker-card__primary-cta,
a.broker-card__primary-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-8);
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  background-color: var(--color-accent-green-light) !important;
  color: var(--color-primary-dark) !important;
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none !important;
  border: var(--border-width-medium) solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius-pill);
  box-shadow: var(--shadow-glow-green);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.broker-card__primary-cta:hover,
a.broker-card__primary-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0px 0px 44px 0px rgba(42, 240, 124, 0.4),
    0px 0px 0px 6px rgba(0, 255, 178, 0.15);
  color: var(--color-primary-dark) !important;
}

.broker-card__primary-cta:active,
a.broker-card__primary-cta:active {
  transform: scale(0.98);
  background-color: var(--color-accent-green) !important;
  color: var(--color-primary-dark) !important;
}

.broker-card__primary-cta:visited,
a.broker-card__primary-cta:visited {
  color: var(--color-primary-dark) !important;
}

.broker-card__primary-cta:link,
a.broker-card__primary-cta:link {
  color: var(--color-primary-dark) !important;
}

/* Contact section */
.broker-card__contact-section {
  background: rgba(0,103,121,0.03);
  border-radius: var(--border-radius-md);
  padding: var(--space-4);
}

.broker-card__contact-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
  text-align: center;
}

.broker-card__contact-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.broker-card__contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 200ms ease-out;
}

.broker-card__contact-link:hover {
  background: rgba(0,103,121,0.05);
  border-color: var(--color-brand-primary);
  transform: translateX(2px);
}

.broker-card__contact-icon {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.broker-card__contact-link--email:hover .broker-card__contact-icon {
  color: var(--color-brand-primary);
}

.broker-card__contact-link--whatsapp:hover .broker-card__contact-icon {
  color: #25D366;
}

.broker-card__contact-link--telegram:hover .broker-card__contact-icon {
  color: #0088CC;
}

/* Hide original CTA button when card is selected */
.broker-card--selected .broker-card__cta {
  display: none;
}

/* Responsive styles for primary CTA */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .broker-card__primary-cta {
    padding: 14px 28px;
    font-size: var(--font-size-base);
  }
}

@media (max-width: 809.98px) {
  .broker-card__primary-cta {
    padding: 12px 24px;
    font-size: var(--font-size-base);
  }
}

/* Desktop - Inline contact options (2 columns) */
@media (min-width: 810px) {
  .broker-card__contact-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .broker-card__contact-link--email {
    grid-column: 1 / -1; /* Email spans full width */
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .broker-card__primary-cta,
  .broker-card__contact-link {
    transition: none;
  }

  .broker-card__contact-link:hover {
    transform: none;
  }
}