/* --- PALETA RGA · SEGUROS DE SALUD DKV 2026 --- */
:root {
  --verde-rga: #164333;
  --verde-titulo: #057c5a;
  --verde-pill: #3ab983;
  --verde-chevron: #3ab983;
  --verde-banda: #d2efdd;
  --amarillo-rga: #fbc214;
  --gris-texto: #353536;
  --gris-legal: #4a4a4a;
  --gris-legal-bg: #eae8e5;
}

/* --- GENERALES --- */
body {
  background-color: #f0f2f5 !important;
  font-family: 'Open Sans', sans-serif !important;
  color: var(--gris-texto) !important;
}

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

/* --- HERO: texto + logo DKV / foto --- */
.seccion-hero {
  background: #fff !important;
  overflow: hidden !important;
}

.hero-row {
  align-items: stretch !important;
}

.hero-left {
  padding: 40px 30px 40px 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.hero-pill {
  display: inline-block !important;
  margin-left: -90px !important;           /* la pastilla nace en el borde del contenedor */
  padding: 14px 40px 14px 90px !important;
  background-color: var(--verde-rga) !important;
  color: #fff !important;
  font-family: 'Gilroy', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.9rem !important;
  line-height: 1 !important;
  border-radius: 0 22px 22px 0 !important;
}

.hero-title {
  color: var(--verde-rga) !important;
  font-family: 'Gilroy', 'Open Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 3.6rem !important;
  line-height: 0.95 !important;
  margin: 34px 0 18px !important;
  white-space: nowrap !important;
}

.hero-logo {
  display: block !important;
  width: 230px !important;
  height: auto !important;
  margin: 0 0 30px 12px !important;
}

.hero-claim {
  color: var(--verde-rga) !important;
  font-family: 'Gilroy', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.05rem !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.hero-right {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;       /* recorta la foto por abajo */
  padding: 30px 50px 0 20px !important;   /* aire arriba y a la derecha */
}

.hero-right picture {
  display: block !important;
  width: 86% !important;             /* tamaño de la foto respecto a su columna */
}

.hero-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: -7% !important;     /* cuánto se corta: sube o baja este valor */
}

/* --- BANDA AMARILLA: intro + descuentos --- */
.promo-section {
  background-color: var(--amarillo-rga) !important;
}

.promo-intro {
  color: var(--verde-rga) !important;
  font-size: 1.3rem !important;
  line-height: 1.4 !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.promo-intro b {
  font-weight: 700 !important;
}

.promo-bloque {
  padding-left: 45px !important;   /* el título y las pastillas van más metidos que la intro, como en el diseño */
}

.promo-titulo {
  color: var(--verde-rga) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.85rem !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Globo "Hasta el 1 de enero de 2027" */
.promo-fecha {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% 50% 50% 0 !important;   /* esquina inferior izquierda recta */
  background-color: var(--verde-pill) !important;
  color: #fff !important;
  font-family: 'Gilroy', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  margin-left: auto !important;
}

/* Fila de descuentos: pastillas en forma de hoja que se solapan (cada una pisa la esquina de la anterior) */
.descuentos-row {
  display: flex !important;
  align-items: stretch !important;
  margin-top: 18px !important;
  padding-right: 6px !important;
}

.descuento-pill {
  position: relative !important;
  flex: 1 1 0 !important;
  max-width: 235px !important;
  margin-left: -34px !important;
  background-color: var(--verde-pill) !important;
  border-radius: 58px 6px 58px 6px !important;
  box-shadow: 0 0 0 5px var(--amarillo-rga) !important;   /* filo amarillo que separa una pastilla de la siguiente */
  color: #fff !important;
  text-align: center !important;
  padding: 22px 40px 20px 30px !important;   /* el padding derecho reserva el trozo que pisa la pastilla siguiente */
  font-family: 'Gilroy', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
}

.descuento-pill:first-child { margin-left: 0 !important; padding-left: 22px !important; flex-grow: 1.35 !important; }
.descuento-pill:nth-child(1) { z-index: 1 !important; }
.descuento-pill:nth-child(2) { z-index: 2 !important; }
.descuento-pill:nth-child(3) { z-index: 3 !important; }
.descuento-pill:nth-child(4) { z-index: 4 !important; }
.descuento-pill:nth-child(5) { z-index: 5 !important; }

.descuento-pill .num {
  display: block !important;
  font-size: 3.6rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.descuento-pill .num small,
.descuento-pill .num .pct {
  display: inline !important;        /* el % siempre en la misma línea que el número */
  font-size: 1.7rem !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  color: #fff !important;
}

.descuento-pill .anio {
  display: block !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* --- LISTA DE VENTAJAS (checks) --- */
.check-item {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 34px !important;
}

.check-item:last-child {
  margin-bottom: 0 !important;
}

.check-icon {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  margin-right: 20px !important;
  margin-top: -6px !important;
}

.check-item p {
  margin: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  color: var(--gris-texto) !important;
}

.check-item p b,
.check-item p strong,
.check-item p .tit {
  color: var(--verde-titulo) !important;   /* vale tanto para <b> como para <strong>, que es a lo que lo convierte el editor de Drupal */
  font-weight: 700 !important;
}

.check-item p .sub {
  display: block !important;
  font-weight: 400 !important;
  color: var(--gris-texto) !important;
}

/* --- BANDA VERDE CLARO: líneas médicas --- */
.lineas-section {
  background-color: var(--verde-banda) !important;
}

.lineas-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lineas-list li {
  display: flex !important;
  align-items: flex-start !important;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: var(--gris-texto) !important;
  margin-bottom: 12px !important;
}

.lineas-list .salto {
  display: block !important;         /* el teléfono en su propia línea sin depender de <br> */
}

.chevron-icon {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 22px !important;
  margin-right: 22px !important;
  margin-top: 6px !important;
}

/* --- FOOTER LEGAL --- */
.legal-footer {
  background: var(--gris-legal-bg) !important;
  border: 0 !important;
}

.legal-footer p {
  font-size: 12px !important;
  color: var(--gris-legal) !important;
  line-height: 1.35em !important;
  margin-bottom: 10px !important;
}

.legal-footer a {
  color: var(--gris-legal) !important;
  font-weight: 400 !important;
}

/* --- RESPONSIVO --- */
@media (max-width: 991px) {
  .hero-left { padding: 30px 24px 30px 40px !important; }
  .hero-right { padding: 0 !important; }
  .hero-right picture { width: 100% !important; }
  .hero-pill { margin-left: -40px !important; padding-left: 40px !important; font-size: 1.5rem !important; }
  .hero-title { font-size: 3rem !important; margin: 26px 0 14px !important; }
  .hero-logo { width: 190px !important; margin-bottom: 22px !important; }
  .hero-claim { font-size: 1.7rem !important; }
  .promo-intro { font-size: 1.15rem !important; }
  .promo-bloque {
  padding-left: 45px !important;   /* el título y las pastillas van más metidos que la intro, como en el diseño */
}

.promo-titulo { font-size: 1.55rem !important; text-align: center !important; }
  .promo-fecha { width: 160px !important; height: 160px !important; font-size: 1.25rem !important; margin: 25px auto 0 auto !important; }
  .descuentos-row { flex-wrap: wrap !important; gap: 12px !important; padding-right: 0 !important; }
  .descuento-pill { flex: 1 1 30% !important; max-width: none !important; margin-left: 0 !important; padding: 18px 10px 16px !important; box-shadow: none !important; }
  .descuento-pill .num { font-size: 2.8rem !important; }
  .check-item p, .lineas-list li { font-size: 1.1rem !important; }
}

@media only screen and (max-width: 600px) {
  .main-wrapper { box-shadow: none !important; }

  .hero-left { padding: 24px 20px 24px 24px !important; }
  .hero-pill { margin-left: -24px !important; padding: 10px 24px 10px 24px !important; font-size: 1.2rem !important; border-radius: 0 16px 16px 0 !important; }
  .hero-title { font-size: 2.4rem !important; margin: 20px 0 12px !important; }
  .hero-logo { width: 150px !important; margin: 0 0 16px 6px !important; }
  .hero-claim { font-size: 1.35rem !important; }
  .hero-img { margin-bottom: -5% !important; }

  .promo-intro { font-size: 1.05rem !important; }
  .promo-bloque {
  padding-left: 45px !important;   /* el título y las pastillas van más metidos que la intro, como en el diseño */
}

.promo-titulo { font-size: 1.35rem !important; }
  .promo-fecha { width: 140px !important; height: 140px !important; font-size: 1.1rem !important; padding: 14px !important; }

  .descuento-pill { flex: 1 1 45% !important; min-width: 0 !important; padding: 16px 8px 14px !important; border-radius: 40px 6px 40px 6px !important; }
  .descuento-pill .num { font-size: 2.3rem !important; }
  .descuento-pill .num small, .descuento-pill .num .pct { font-size: 1.2rem !important; }
  .descuento-pill .anio { font-size: 1.05rem !important; }

  .check-icon { flex-basis: 38px !important; width: 38px !important; height: 38px !important; margin-right: 14px !important; margin-top: -4px !important; }
  .check-item { margin-bottom: 22px !important; }
  .check-item p, .lineas-list li { font-size: 1rem !important; }
  .lineas-list .salto {
  display: block !important;         /* el teléfono en su propia línea sin depender de <br> */
}

.chevron-icon { margin-right: 14px !important; margin-top: 4px !important; }

  .legal-footer p { font-size: 11px !important; }
}