.portada-overlay-yucatan {
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0% 10% 4% 29%;
    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-yucatan {
        padding: 0% 6% 5% 8%;
    }
}

/* Línea + badge invertidos: badge a la izquierda, línea crece hacia la derecha */
.portada-overlay-yucatan .portada-calificacion {
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: calc(var(--portada-badge-size) - 2px);   /* mismo ancho que el badge: la línea toca el círculo */
}

.portada-overlay-yucatan .portada-badge {
    right: auto;
    left: 0;
}

.portada-overlay-yucatan .portada-linea {
    background-color: #4ab3d8;
}

/* Textos alineados a la derecha */
.portada-overlay-yucatan .portada-titulo {
    align-items: flex-end;
    text-align: right;
}

.portada-overlay-yucatan .portada-label {
    text-align: right;
}

/* Logos alineados a la derecha (el chip fit-content se ancla a la derecha) */
.portada-overlay-yucatan .portada-logos {
    justify-content: flex-end;
    align-self: flex-end;
}

.yucatan-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 vino (#703a51). Se prolonga ese color al inicio de la
   numeralia y se funde suavemente con el azul de la sección 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, y
   .header-content sigue opaco como antes. */
.header-content,
.header-content::before {
    background: #285b83;
    background: linear-gradient(180deg, #703a51 0, #703a51 56px, #285b83 340px, #285b83 100%);
}

/* En escritorio el vino se sostiene un rato más antes de empezar a fundirse,
   para que la transición se sienta más orgánica. */
@media (min-width: 992px) {
    .header-content,
    .header-content::before {
        background: linear-gradient(180deg, #703a51 0, #703a51 120px, #285b83 460px, #285b83 100%);
    }
}

/* La imagen del header escala a un alto fraccionario y el fondo claro del body
   (#f8f9fa) 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 vino y la numeralia
   se solapa 1px con la imagen para tapar cualquier resto de subpíxel. */
.header-image-container {
    background-color: #703a51;
}

.header-content {
    margin-top: -1px;
}
.arrecife-section::before {
    background: linear-gradient(180deg, #285b83, #4a7699, #5683a7);
}