/* Contenedor general */
.esquema-vacunacion-container {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  padding: 0;
}

/* Contenedor principal con fondo azul */
.esquema-vacunacion-container {
  background-color: #004c59;
  /* azul */
  color: #ffffff;
}

/* Botón regresar */
.pre-header {
  color: #ffffff !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  padding: 1em 1.5em 0.5em 1.5em;
}

.pre-header img {
  filter: brightness(0) invert(1);
}

/* Estilos específicos para el botón regresar en blanco */
.esquema-vacunacion-container .regresar-btn {
  color: #ffffff !important;
}

.esquema-vacunacion-container .regresar-btn::after {
  background-color: #ffffff !important;
}

.esquema-vacunacion-container .regresar-btn img {
  filter: brightness(0) invert(1) !important;
}

.pre-header:hover {
  color: #ffd900 !important;
}

/* Encabezado */
.esquema-header {
  padding: 0.5em 1.5em 2em 1.5em;
  text-align: left;
}

.esquema-main-title {
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1.3;
  margin: 0;
}

.title-line-1 {
  color: #ffffff;
  font-weight: 700;
}

.esquema-main-title .title-line-1 {
  display: block;
  padding-top: 10px;
  font-weight: 400;
  font-size: 28px;
}

.esquema-main-title .title-line-2 {
  display: inline-block;
  background-color: #EBE72A;
  /* amarillo resaltado */
  color: #000;
  padding: 0.2em 0.5em;
  margin-top: 0.3em;
  font-weight: 700;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
}

/* Texto informativo dentro del header */
.esquema-info {
  background-color: #004c59;
  color: #ffffff;
  padding: 0 1.5em 2em 1.5em;
}

.esquema-description {
  margin: 0 0 1em 0;
  font-size: 16px;
  padding-top: 25px;
}

.esquema-disclaimer {
  font-size: 16px;
  line-height: 1.4;
}

/* Bloque de esquema con imagen como fondo - Estilo por defecto para móvil */
.esquemas-detallados {
  background-image: url("../img/esquema-vacunacion.png");
  background-size: cover;
  /* móvil: la imagen cubre todo el ancho */
  background-repeat: no-repeat;
  background-position: center;
  min-height: 750px;
  /* altura para móvil */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ocultar la etiqueta <img> porque ya usamos la imagen de fondo */
.esquema-image {
  display: none;
}

/* Desktop: imagen completa sin recortes */
@media (min-width: 769px) {
  .esquemas-detallados {
    background-size: contain;
    /* desktop: la imagen se ve completa */
    background-color: #EBE72A;
    /* fondo amarillo para llenar espacios */
    min-height: 800px;
    /* más alto en desktop */
  }
}

@media (min-width: 1024px) {
  .esquemas-detallados {
    min-height: 900px;
    /* aún más alto en pantallas grandes */
  }
}