.cabecera-principal {
    background: transparent;
}

.cabecera-contenido {
    padding: 24px 0 18px;
    display: flex;
    align-items: center;
}

.logo-grafico {
    display: inline-block;
    line-height: 0;
}

.logo-grafico img {
    display: block;
    width: min(520px, 46vw);
    height: auto;
}

@media (max-width: 800px) {
    .cabecera-contenido {
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .logo-grafico img {
        width: min(420px, 82vw);
    }
}

/* =========================================================
   REDES SOCIALES · CABECERA
   SVG reales de Font Awesome Free; sin pictogramas dibujados a mano.
========================================================= */

.cabecera-contenido {
    justify-content: space-between;
}

.redes-cabecera {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.red-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    color: #31566e;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.88);
    box-shadow: 0 1px 5px rgba(31,67,93,.09);
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}

.red-social:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 3px 9px rgba(31,67,93,.14);
}

.red-social svg {
    display: block;
    fill: currentColor;
    stroke: none;
    overflow: visible;
}

/* Ajuste óptico individual: misma presencia visual, no mismo ancho geométrico. */
.red-x svg        { width: 15px; height: 15px; }
.red-facebook svg { width: 10px; height: 17px; }
.red-instagram svg{ width: 16px; height: 18px; }
.red-youtube svg  { width: 17px; height: 15px; }
.red-correo svg   { width: 17px; height: 17px; }
.red-whatsapp svg { width: 17px; height: 19px; }

/* Color de marca únicamente al pasar el ratón. */
.red-x:hover         { color: #111; }
.red-facebook:hover  { color: #1877f2; }
.red-instagram:hover { color: #c13584; }
.red-youtube:hover   { color: #ff0000; }
.red-correo:hover    { color: #2c78a0; }
.red-whatsapp:hover  { color: #25d366; }

@media (max-width: 800px) {
    .cabecera-contenido { gap: 14px; }

    .redes-cabecera { gap: 5px; }

    .red-social {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .red-x svg        { width: 13px; height: 13px; }
    .red-facebook svg { width: 9px;  height: 15px; }
    .red-instagram svg{ width: 14px; height: 16px; }
    .red-youtube svg  { width: 15px; height: 13px; }
    .red-correo svg   { width: 15px; height: 15px; }
    .red-whatsapp svg { width: 15px; height: 17px; }
}

@media (max-width: 560px) {
    .cabecera-contenido {
        align-items: flex-end;
    }

    .redes-cabecera {
        flex-wrap: wrap;
        max-width: 100px;
        justify-content: flex-end;
    }
}


/* =========================================================
   CORRECCIÓN DE VISIBILIDAD DE LOS ICONOS
   Evita que estilos anteriores o :visited cambien el relleno.
========================================================= */

.red-social,
.red-social:link,
.red-social:visited,
.red-social:active {
    color: #31566e !important;
    opacity: 1 !important;
}

.red-social svg,
.red-social svg path {
    opacity: 1 !important;
}

.red-social svg path {
    fill: currentColor !important;
    stroke: none !important;
}

/* Hover de marca, conservando el SVG totalmente opaco */
.red-x:hover          { color: #111111 !important; }
.red-facebook:hover   { color: #1877f2 !important; }
.red-instagram:hover  { color: #c13584 !important; }
.red-youtube:hover    { color: #ff0000 !important; }
.red-correo:hover     { color: #2c78a0 !important; }
.red-whatsapp:hover   { color: #25d366 !important; }

/* =========================================================
   CABECERA · REDES EN VISTA MÓVIL
   En móvil se muestran únicamente X/Twitter, Facebook,
   correo electrónico y WhatsApp.
   ========================================================= */
@media (max-width: 760px) {
    .redes-cabecera .red-instagram,
    .redes-cabecera .red-youtube {
        display: none;
    }

    .redes-cabecera {
        max-width: none;
        flex-wrap: nowrap;
    }
}