:root {
    --domi-orange: #ff3b01;
    --domi-dark: #1a1a1a;
}

/* LOGO más grande sin aumentar la altura del nav */
.logo-nav {
    height: 70px;
    width: auto;
}

/* HERO */
.inicio-section {
    min-height: 100vh;
    padding-top: 250px; /* altura original hero */
    background-position: center 10% !important;
}

/* ==========================
   ESTILOS MÓVIL (max-width: 768px)
   ========================== */
@media (max-width: 768px) {

    /* Topbar fija */
    .domi-topbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        z-index: 100;
        backdrop-filter: blur(8px);
        background-color: #121212;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Navbar fija debajo de la topbar */
    #navbar {
        position: fixed;
        top: 70px; /* altura topbar */
        left: 0;
        width: 100%;
        height: 90px;
        z-index: 95;
        background-color: var(--domi-orange) !important;
        border-bottom: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;
    }

  #navbar nav {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* AHORA QUEDA A LA IZQUIERDA */
    align-items: center;
    position: relative;
    gap: 10px; /* opcional si quieres espacio entre logo y texto */
}

    /* LOGO circular sin relleno */
    #navbar .logo-nav {
        width: 65px;
        height: 65px;
        object-fit: cover;
        border-radius: 50%;
        background: none !important;
        border: none !important;
    }

    /* Botón menú móvil */
    #menuBtn {
        color: white !important;
        font-size: 32px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 16px;
        z-index: 110;
        border-radius: 12px;
    }

    /* Menú móvil tipo dropdown */
    #mobileMenu {
        display: none; /* oculto inicialmente */
        flex-direction: column;
        background-color: white;
        width: 200px;
        padding: 0.5rem 0;

        position: absolute;
        top: 100%; /* debajo del botón */
        right: 15px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        z-index: 120;
        overflow: hidden;
    }

    /* Mostrar menú */
    #mobileMenu.open {
        display: flex;
        animation: dropdown 0.25s ease-out forwards;
    }

    #mobileMenu a {
        color: #121212 !important;
        font-weight: 600;
        text-align: left;
        padding: 0.7rem 1rem;
        transition: background 0.2s;
    }

    #mobileMenu a:hover {
        background-color: rgba(0,0,0,0.06);
    }

    @keyframes dropdown {
        0% { transform: translateY(-10px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    /* Promo Bar */
    #promoBar {
        width: 100%;
        background-color: var(--domi-orange);
        color: white;
        padding: 0.75rem 1rem;
        position: sticky;
        top: 160px; 
        z-index: 85;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    #promoBar img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        object-fit: contain;
    }

    #promoBar a {
        background: white;
        color: black;
        font-weight: 600;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        transition: opacity 0.3s;
    }

    #promoBar a:hover {
        opacity: 0.8;
    }

    /* Ajuste scroll */
    section, .section {
        scroll-margin-top: 160px;
    }

    /* Hero corregido */
    .inicio-section {
        padding-top: calc(250px + 70px + 90px + 60px);
        min-height: 100vh;
        background-position: center 10% !important;
    }
}