/* --- PALETA OFICIAL RGA 2026 --- */
:root {
  --verde-rga: #004937;
  --verde-promo: #00ab81;
  --verde-indicador: #15ab85;
  --amarillo-rga: #FFCB00;
  --bg-flex-yellow: #fff4cb;
  --gris-cool: #f1f4f8;
  --gris-banda: #eef1f6;
  --verde-bosque: #1a4336;
}

/* --- ESTILOS GENERALES --- */
body {
  background-color: #f0f2f5 !important;
  font-family: 'Open Sans', sans-serif !important;
  color: #333 !important;
}

.main-wrapper {
  max-width: 1150px !important;
  margin: 0 auto !important;
  background: white !important;
}

.extrabold { font-weight: 800 !important; }

/* --- SECCIÓN RIESGOS --- */
.riesgos p { font-size: 0.6em !important; line-height: 1.3em !important; }
.riesgos a { color: #333 !important; font-weight: 400 !important; }
.anclas { width: 30px !important; }
.alertas-liquidez p { font-size: 0.6em !important; line-height: 1.3em !important; }

/* --- SECCIÓN HERO (imagen completa) --- */
.seccion-hero-clean {
  max-width: 1250px !important;
  margin: 0 auto !important;
}

.hero-main-container {
  border-radius: 35px !important;
  overflow: hidden !important;
  width: 100% !important;
}

.hero-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* --- TÍTULOS --- */
.main-promo-title {
  color: var(--verde-rga) !important;
  font-weight: 800 !important;
  font-size: 2.3rem !important;
  line-height: 1.1 !important;
  font-family: 'Gilroy-Medium', sans-serif !important;
  margin-top: 0 !important;
}

p.pias-disclaimer {
  color: #004633 !important;
  line-height: 1.4 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 16px !important;
}

/* --- BANDA GRIS "Consíguelo al ..." --- */
.banda-consiguelo {
  background-color: var(--gris-banda) !important;
  color: #007C5A !important;
  font-family: 'Gilroy-Medium', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 18px 20px !important;
  margin: 0 !important;
}

/* --- TARJETAS DE BONIFICACIÓN --- */
.bonif-section {
  background: #fff !important;
  padding-top: 55px !important;     /* aire entre la banda gris y el número (el número asoma 38px por encima de la tarjeta) */
}

.bonif-col { margin-top: 48px !important; margin-bottom: 30px !important; }

.bonif-card {
  background: #f9fafc !important;
  border-radius: 20px !important;
  padding: 0 20px 30px 20px !important;   /* el número asoma por arriba: sin padding superior */
  position: relative !important;
}

.bonif-number {
  font-size: 4.7rem !important;
  font-weight: 600 !important;
  color: #2b7c5a !important;
  line-height: 1 !important;
  margin: 0 !important;
  margin-top: -38px !important;   /* valor fijo: no depende del ancho de la tarjeta */
  font-family: 'Gilroy', sans-serif !important;
}

.bonif-tag {
  font-weight: 300 !important;
  color: #007C5A !important;
  font-size: 1.1rem !important;
}

.bonif-inner-grey {
  background-color: var(--gris-cool) !important;
  border-radius: 12px !important;
  padding: 22px 15px !important;
  min-height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--verde-rga) !important;
  font-family: 'Gilroy', sans-serif !important;
}

.bonif-inner-grey p {
  font-size: 17.5px !important;
  font-family: 'Gilroy', sans-serif !important;
  color: #004937 !important;
}

.card-globito {
  position: absolute !important;
  top: -80px !important;
  right: -20px !important;
  z-index: 10 !important;
  max-width: 95px !important;
}

/* Bloque "al contratarlo": 2 tarjetas. El número usa el MISMO desplazamiento fijo que en el bloque de 3;
   se repite aquí con mayor especificidad para anular cualquier regla en % que quede en cachés/CSS antiguo */
.bonif-2col .bonif-card .bonif-number,
.bonif-section .bonif-card h2.bonif-number { margin-top: -38px !important; }
.bonif-2col .bonif-inner-grey { padding: 22px 20px !important; }
.bonif-2col .bonif-col > .bonif-card { height: auto !important; }

/* --- SECCIÓN FLEXIBILIDAD --- */
.flex-section {
  background-color: var(--bg-flex-yellow) !important;
  border-top: 1px solid #eee !important;
}
.texto-flexibilidad { color: #004633 !important; font-size: 16px !important; }
.flex-description { margin: 0 !important; }

/* --- BOTONES --- */
.btn-descubre-rga,
.btn-llamen-rga {
  background-color: var(--verde-bosque) !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 1.33rem !important;
  padding: 17px 33px !important;
  border-radius: 15px !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  transition: 0.3s !important;
}
.btn-llamen-rga { padding: 17px 75px !important; }
.btn-descubre-rga:focus-visible,
.btn-llamen-rga:focus-visible { outline: 3px solid var(--amarillo-rga) !important; outline-offset: 2px; }

/* --- FOOTER --- */
.legal-footer {
  background: #fcfcfc !important;
  border-top: 1px solid #eee !important;
  font-size: 13px !important;
  color: #000 !important;
  line-height: 1.5 !important;
}
.legal-footer p { font-size: 13px !important; color: #000 !important; line-height: 1.2em !important; }
.legal-footer ul { padding-left: 18px !important; margin-bottom: 12px !important; }
.legal-footer li { font-size: 13px !important; color: #000 !important; line-height: 1.2em !important; margin-bottom: 8px !important; }
.legal-footer a { color: #000 !important; font-weight: 400 !important; }

/* --- RESPONSIVO --- */
@media (max-width: 991px) {
  .card-globito { top: -80px !important; width: 85px !important; left: 175px !important; }
  .hero-main-container { border-radius: 20px !important; }
}

@media only screen and (max-width: 600px) {
  .card-globito { top: -85px !important; width: 125px !important; left: 57vw !important; }
  .main-promo-title { font-size: 1.7rem !important; }
}