/* =========================
   Vars & base
========================= */
:root{
  --brand-blue-900:#0B2D6B;
  --brand-blue-800:#123A85;
  --brand-blue-700:#1B4DA8;
  --neutral-100:#f1f5f9;
  --neutral-600:#475569;
  --white:#fff;
}

.home-section{ padding:64px 0; }
.home-section .container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.section-head{ text-align:center; margin-bottom:28px; }
.section-title{ font-size:clamp(22px,2.5vw,32px); line-height:1.2; margin:0; }
.section-subtitle{ margin-top:10px; color:var(--neutral-600); font-size:clamp(14px,1.5vw,18px); }

/* =========================
   Cards (generic + services)
========================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:960px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-link{ display:grid; grid-template-columns:56px 1fr; gap:14px; text-decoration:none; color:inherit; padding:18px; align-items:center; }
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(6,24,44,.12); border-color:rgba(18,58,133,.24); }
.card-icon{ width:56px; height:56px; display:grid; place-items:center; background:var(--neutral-100); border-radius:12px; }
.icon{ width:28px; height:28px; fill:var(--brand-blue-800); }
.card-title{ font-size:18px; margin:2px 0 4px; font-weight:700; }
.card-desc{ font-size:14px; color:var(--neutral-600); margin:0; }
.card-cta{ display:inline-block; margin-top:10px; font-size:14px; font-weight:600; color:var(--brand-blue-800); text-decoration:underline; }

/* Services header */
.services-hero{ text-align:center; margin-bottom:8px; }
.services-title{ font-size: clamp(28px, 4vw, 40px); line-height:1.15; margin:0 0 8px; }
.services-sub{ max-width:820px; margin:0 auto 12px; color:var(--neutral-600); font-size: clamp(14px, 1.6vw, 18px); }

/* Icono en anillo (como sitio principal) */
.card-icon.ring{
  width:56px; height:56px; border-radius:999px; background:#E6F4EE; border:2px solid #00A379;
  display:grid; place-items:center;
}
.card .icon{ width:26px; height:26px; fill:#00A379; }

/* Botón dentro de card */
.card .btn{ margin-top:10px; padding:10px 14px; border-radius:999px; font-weight:700; }
.card .btn-primary{ background:#123A85; color:#fff; }
.card .btn-primary:hover{ filter:brightness(1.08); }

/* Grids variantes */
.cards.cards-3-1{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cards.cards-3-1 > .card:last-child{ grid-column:2 / span 1; justify-self:center; }
.cards.cards-4x{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

@media (max-width:992px){
  .cards.cards-3-1{ grid-template-columns:repeat(2,1fr); }
  .cards.cards-3-1 > .card:last-child{ grid-column:auto; }
  .cards.cards-4x{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cards.cards-3-1, .cards.cards-4x{ grid-template-columns:1fr; }
}

/* =========================
   CTA (verde contraste)
========================= */
.btn-cta-contrast{
  display:inline-block; padding:14px 26px; border-radius:999px; font-weight:800; font-size:16px;
  text-decoration:none; background:linear-gradient(135deg,#00A379,#16C784); color:#fff !important;
  box-shadow:0 10px 26px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.1) inset;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-cta-contrast:hover{ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.22); }
.btn-cta-contrast:focus{ outline:3px solid #B9F3DF; outline-offset:2px; }

.prefooter-cta{
  background:linear-gradient(180deg,var(--brand-blue-900),var(--brand-blue-800));
  color:#fff; padding:42px 0; text-align:center;
  border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
}
.cta-title{ margin:0 0 16px; font-size:clamp(20px,2.4vw,28px); line-height:1.25; }

/* =========================
   How It Works – Clean cards
========================= */
.howit-clean .howit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:800px){ .howit-clean .howit-grid{ grid-template-columns:1fr; } }

.howit-clean .howit-card{
  display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start;
  background:#fff; border:1px solid #e6ecf3; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06); padding:16px 18px;
}
.howit-clean .howit-num{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:#E6F4EE; border:2px solid #00A379; color:#00A379; font-weight:800;
}
.howit-clean .howit-title{ margin:2px 0 4px; font-size:18px; font-weight:800; }
.howit-clean .howit-desc{ margin:0; color:#475569; font-size:15px; }

/* =========================
   Getting Started – mini cards
========================= */
.step-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .step-cards{ grid-template-columns:1fr; } }

.step-card{
  background:#fff; border:1px solid #e6ecf3; border-radius:14px;
  padding:20px 18px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.step-title{ font-size:clamp(18px,2vw,20px); margin:0 0 6px; font-weight:800; color:var(--brand-blue-900); }
.step-desc{ margin:0; color:#475569; font-size:15px; line-height:1.6; }

/* =========================
   Credit Evaluation – split
========================= */
.ce-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start; }
@media (max-width:960px){ .ce-grid{ grid-template-columns:1fr; } }

.ce-heading{ font-size:clamp(22px,3vw,32px); line-height:1.2; margin:0 0 10px; color:var(--brand-blue-900); }
.ce-text p{ margin:0 0 14px; color:#1f2937; }

.ce-media{ margin:0; }
.ce-media img{
  width:100%; height:auto; border-radius:14px; display:block;
  box-shadow:0 10px 24px rgba(0,0,0,.10); object-fit:cover;
}

/* =========================
   A11y helper
========================= */
.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important;
}




/* Cash2Keys hero spacing (no video) */
.cash2keys-hero .container{ padding-top:64px; padding-bottom:64px; }

/* Slightly left-align some section headings if desired */
.section-head.text-left{ text-align:left; }

/* Reduce bottom margin under section titles slightly */
.section-head .section-title{ margin-bottom:10px; }