:root {
    --brand-gold: #b7a53a;
    --nav-blue: #0f3b5c;
    --nav-blue-hover: #134a75;
    --text-dark: #0f0f0f;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text-dark);
    background: #ffffff;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}


[hidden] {
    display: none !important;
}



/* Top header strip */
.header-top {
    background: #ffffff;
    border-bottom: 1px solid #e6e6e6;
}
.header-top .container {
    position: relative;
    height: 88px;
}
.logo-text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("https://www.itlalaguna.edu.mx/Nuestro%20Tec/Logo%20y%20Mascota/logotec22-transp2.gif");
    height: 100%;
    width: 90px; 
    zoom: 130%;
}

.logo-text .gold { color: var(--brand-gold); }


.title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 56px;
    font-weight: 600;
    letter-spacing: 2px;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.title .gold { color: var(--brand-gold); }
/* Navigation bar */
.nav-bar {
    background: var(--nav-blue);
}
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 6px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    white-space: nowrap;
}
.nav-list > li > a:hover,
.nav-list > li > a:focus {
    background: transparent;
    color: #ffffff;
    text-shadow: 0 0 0.01px rgba(255,255,255,0.9);
}
.nav-list .login {
    margin-left: auto;
}
.icon-user {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
}





/* SOPORTE DE LA CARD */
.card-soporte {
    position:fixed !important;
    z-index: 100 !important;
    padding: 0.3rem  2rem !important;
    
    bottom: 10px;
    left: 10px;
}






/* Page body placeholder */
main.hero {
    min-height: calc(100vh - 88px - 48px);
    background: #ffffff;
}
@media (max-width: 900px) {
    .title { font-size: 40px; }
    .logo-text { font-size: 36px; }
    .nav-list { gap: 18px; }
}
@media (max-width: 700px) {
    .header-top .container { height: 72px; }
    .title { font-size: 32px; }
    .logo-text { font-size: 28px; }
    .nav-list { gap: 14px; }
    .nav-list > li > a { padding: 12px 4px; font-size: 14px; }
    main.hero { min-height: calc(100vh - 72px - 44px); }
}