/**
 * ESTILOS DE CABECERA — CursosOnlineBonificados.com
 * Ubicación servidor: /httpdocs/catalogo2/assets/css/cabecera.css
 * 
 * Creado por: Claude (Anthropic) para Ana — CursosOnlineBonificados.com
 * Fecha creación: 2026-02-15
 * Última modificación: 2026-02-15
 * 
 * Estructura: franja superior (contacto) + franja principal (marca con foto fondo)
 * Paleta: azul oscuro #1a3a5c, azul medio #2d5f8a, dorado #c9a84c, arena #e8dcc8
 * 
 * @version 2.0
 * @date 2026-02-15
 */

/* ==========================================
   VARIABLES
   ========================================== */
:root {
    --cob-azul-oscuro: #1a3a5c;
    --cob-azul-medio: #2d5f8a;
    --cob-azul-claro: #4a7a9a;
    --cob-dorado: #c9a84c;
    --cob-dorado-suave: #d4b96a;
    --cob-arena: #e8dcc8;
    --cob-crema: #fdf6e3;
    --cob-blanco: #ffffff;
    --cob-gris-texto: #e0e8f0;
}

/* ==========================================
   FRANJA SUPERIOR — Contacto + Confianza
   ========================================== */
.cob-topbar {
    background: var(--cob-arena);
    font-size: 15px;
    letter-spacing: 0.3px;
}
.cob-topbar-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 15px;
    background: var(--cob-azul-oscuro);
    color: var(--cob-gris-texto);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cob-topbar-izq {
    display: flex;
    align-items: center;
    gap: 20px;
}
.cob-topbar-link {
    color: var(--cob-gris-texto);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}
.cob-topbar-link:hover {
    color: var(--cob-blanco);
    text-decoration: none;
}
.cob-topbar-link .fa-phone {
    color: var(--cob-dorado-suave);
    font-size: 11px;
}
.cob-topbar-link .fa-whatsapp {
    color: #25d366;
    font-size: 14px;
}
.cob-topbar-der {
    display: flex;
    align-items: center;
    gap: 22px;
}
.cob-topbar-sello {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--cob-gris-texto);
}
.cob-topbar-sello i {
    color: var(--cob-dorado);
    font-size: 14px;
}
.cob-topbar-sello strong {
    color: var(--cob-blanco);
    font-weight: 600;
}

/* ==========================================
   FRANJA PRINCIPAL — Logo + Marca
   ========================================== */
.cob-header {
    background: var(--cob-arena);
    position: relative;
}
.cob-header-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 25px 20px 45px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--cob-azul-oscuro) 0%, var(--cob-azul-medio) 40%, var(--cob-azul-claro) 100%);
    overflow: hidden;
}
/* Foto de fondo con overlay azul */
.cob-header-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        linear-gradient(135deg, rgba(26,58,92,0.55) 0%, rgba(45,95,138,0.48) 40%, rgba(74,122,154,0.42) 100%),
        url('/catalogo/assets/img/COB/BACKGROUND_CABECERA.webp') center/cover no-repeat;
    pointer-events: none;
    z-index: 0;
}
/* Línea decorativa dorada inferior */
.cob-header-inner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cob-dorado) 0%, var(--cob-dorado-suave) 50%, transparent 100%);
    z-index: 3;
}
/* Todos los hijos por encima del fondo */
.cob-header-inner > * {
    position: relative;
    z-index: 2;
}

/* ==========================================
   LOGO MODERNIZADO
   ========================================== */
.cob-logo-area {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.cob-logo-area:hover {
    text-decoration: none;
}
.cob-logo-mark {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--cob-blanco) 0%, #e8eef5 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.9);
    position: relative;
}
.cob-logo-letters {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: var(--cob-azul-oscuro);
    letter-spacing: 1px;
    line-height: 1;
}
.cob-logo-globe {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background: var(--cob-azul-medio);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cob-blanco);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.cob-logo-globe i {
    color: var(--cob-blanco);
    font-size: 12px;
}

/* ==========================================
   NOMBRE DE MARCA
   ========================================== */
.cob-brand {
    margin-left: 35px;
    flex: 1;
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cob-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 52px;
    color: var(--cob-blanco);
    line-height: 1.1;
    text-shadow: 
        0 0 8px rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.4),
        1px 1px 0 rgba(0,0,0,0.3),
        -1px -1px 0 rgba(0,0,0,0.3),
        1px -1px 0 rgba(0,0,0,0.3),
        -1px 1px 0 rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
    /* Reset H1 styles */
    margin: 0;
    padding: 0;
}
.cob-brand-name span {
    color: var(--cob-dorado);
}
.cob-brand-tagline {
    font-family: 'Source Sans 3', 'Open Sans', sans-serif;
    font-size: 21px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    letter-spacing: 0.3px;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ==========================================
   CABECERA MÓVIL
   ========================================== */
.cob-header-movil {
    display: none;
}

/* ==========================================
   OCULTAR PC EN MÓVIL / OCULTAR MÓVIL EN PC
   ========================================== */
@media (max-width: 768px) {
    .cob-topbar {
        display: none;
    }
    .cob-header {
        display: none;
    }
    .cob-header-movil {
        display: block;
        background: var(--cob-arena);
    }
    .cob-header-movil-inner {
        max-width: 1024px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        background: linear-gradient(135deg, var(--cob-azul-oscuro) 0%, var(--cob-azul-medio) 100%);
        gap: 10px;
    }
    .cob-movil-logo {
        text-decoration: none;
        flex-shrink: 0;
    }
    .cob-logo-mark-sm {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }
    .cob-logo-mark-sm .cob-logo-letters {
        font-size: 16px;
    }
    .cob-movil-brand {
        flex: 1;
    }
    .cob-movil-nombre {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--cob-blanco);
        line-height: 1.2;
        margin: 0;
        padding: 0;
    }
    .cob-movil-nombre span {
        color: var(--cob-dorado);
    }
    .cob-movil-contacto {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }
    .cob-movil-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--cob-blanco);
        font-size: 16px;
        text-decoration: none;
        transition: background 0.2s;
    }
    .cob-movil-btn:hover {
        background: rgba(255,255,255,0.2);
        text-decoration: none;
        color: var(--cob-blanco);
    }
    .cob-movil-btn-wa i {
        color: #25d366;
    }
}

@media (max-width: 480px) {
    .cob-movil-nombre {
        font-size: 14px;
    }
    .cob-logo-mark-sm {
        width: 36px;
        height: 36px;
    }
    .cob-logo-mark-sm .cob-logo-letters {
        font-size: 14px;
    }
}