.portada-overlay-tabasco {
    position: absolute;
    top: 66%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0% 29% 4% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* En móvil se conserva la posición de la tarjeta, pero se amplía la columna
   de texto para que no se amontone ni se parta en demasiadas líneas. */
@media (max-width: 768px) {
    .portada-overlay-tabasco {
        padding: 0% 8% 5% 6%;
    }
}

.tabasco-number {
    margin-left: 20px;
}

.timeline-line{
    background-color: #ce9139 !important;   
}

.dot-4{
    background-color: #ce9139 !important;   
}

.alacranes-header {
    background-color: #f8f6e9 !important;   
}
.historias-exito-section{
    background-color: #fffef8 !important;
}
.conectado-section{
    background-color: #fffef8 !important;
}
.participants-section{
    background-color: #fffef8 !important;
}
.recommendation-section{
    background-color: #f8f6e9 !important;
}

.institutions-section{
    background-color: #f8f6e9 !important;
}
.acknowledgments-content{
    background-color: #f8f6e9 !important;
}
.downloads-section{
    background-color: #f8f6e9 !important;
}
.island-info-container{
    background-color: #fffef8 !important;
}
/* El header termina en azul acero (#2e5e6c). Se prolonga ese color al inicio
   de la numeralia y se funde suavemente con el azul de la sección (#20525d)
   para evitar el corte brusco. El mismo degradado va en .header-content (80%)
   y en su ::before (100vw): como tienen la misma altura coinciden sin costura. */
.header-content,
.header-content::before {
    background: #20525d;
    background: linear-gradient(180deg, #2e5e6c 0, #2e5e6c 56px, #20525d 340px, #20525d 100%);
}

/* En escritorio el color se sostiene un rato más antes de empezar a fundirse. */
@media (min-width: 992px) {
    .header-content,
    .header-content::before {
        background: linear-gradient(180deg, #2e5e6c 0, #2e5e6c 120px, #20525d 460px, #20525d 100%);
    }
}

/* La imagen del header escala a un alto fraccionario y el fondo claro del body
   se colaba como una línea de 1px entre la imagen y la numeralia, sobre todo
   en móvil: el contenedor se pinta del mismo color y la numeralia se solapa 1px. */
.header-image-container {
    background-color: #2e5e6c;
}

.header-content {
    margin-top: -1px;
}