/* ===== DUO PRODUTORA — Portfolio Pages Shared CSS ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Inter',sans-serif;
    background:#09090b;
    color:#fafafa;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
}
.font-display { font-family:'Montserrat',sans-serif; }

/* ===== HEADER ===== */
.duo-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(9,9,11,0.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid #27272a;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:56px;
}
.duo-header img { height:28px; width:auto; }
.duo-header a.phone {
    font-size:0.85rem;
    font-weight:700;
    color:#fafafa;
    text-decoration:none;
    letter-spacing:0.02em;
    padding:8px 12px;
    border-radius:6px;
    min-height:44px;
    display:flex;
    align-items:center;
    transition:color 0.2s;
}
.duo-header a.phone:hover { color:#a855f7; }

/* ===== NAV TABS ===== */
.duo-nav {
    position:sticky;
    top:56px;
    z-index:40;
    background:rgba(9,9,11,0.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid #27272a;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.duo-nav::-webkit-scrollbar { display:none; }
.duo-nav-inner {
    display:flex;
    padding:0 16px;
    min-width:max-content;
}
.duo-nav a {
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.1em;
    color:#71717a;
    padding:14px 14px;
    border-bottom:2px solid transparent;
    white-space:nowrap;
    text-decoration:none;
    display:inline-block;
    min-height:44px;
    transition:color 0.2s, border-color 0.2s;
}
.duo-nav a:hover { color:#fff; }
.duo-nav a.active { color:#a855f7; border-bottom-color:#a855f7; }

/* ===== HERO ===== */
.duo-hero {
    position:relative;
    height:50vw;
    min-height:180px;
    max-height:400px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:24px 24px;
}
@media (min-width:640px) { .duo-hero { padding:40px 64px; } }
.duo-hero img.bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.duo-hero .overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(to top, #09090b 0%, rgba(9,9,11,0.5) 50%, rgba(9,9,11,0.1) 100%);
}
.duo-hero h1 {
    position:relative;
    z-index:1;
    font-family:'Montserrat',sans-serif;
    font-size:clamp(2rem, 8vw, 5rem);
    font-weight:900;
    letter-spacing:0.04em;
    line-height:1.05;
    color:#fff;
}

/* ===== TEXT SECTION ===== */
.duo-text {
    background:#09090b;
    padding:40px 24px;
    max-width:860px;
}
@media (min-width:640px) { .duo-text { padding:64px 64px; } }
.duo-text .block { margin-bottom:20px; }
.duo-text p {
    font-size:clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight:700;
    line-height:1.65;
    letter-spacing:0.04em;
    text-transform:uppercase;
}
.duo-text p:last-child { margin-bottom:0; }

/* ===== DIVIDER ===== */
.duo-divider {
    text-align:center;
    padding:28px 16px;
    border-top:1px solid #27272a;
    border-bottom:1px solid #27272a;
}
.duo-divider p {
    font-family:'Montserrat',sans-serif;
    font-weight:900;
    font-size:clamp(0.75rem, 2vw, 0.9rem);
    letter-spacing:0.18em;
    color:#fff;
    text-transform:uppercase;
}

/* ===== CARDS GRID ===== */
.duo-grid {
    max-width:1280px;
    margin:0 auto;
    padding:24px 16px 48px;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
@media (min-width:480px) { .duo-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) { .duo-grid { grid-template-columns:1fr 1fr 1fr; padding:32px 32px 64px; gap:24px; } }

.duo-card {
    position:relative;
    overflow:hidden;
    background:#27272a;
    cursor:pointer;
    border-radius:2px;
    -webkit-tap-highlight-color:transparent;
    transition:transform 0.3s ease;
}
@media (hover:hover) { .duo-card:hover { transform:scale(1.02); } }
@media (hover:hover) { .duo-card:hover .duo-overlay { opacity:1; } }
.duo-card:active { transform:scale(0.98); }

.duo-card img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
}
.duo-overlay {
    position:absolute;
    inset:0;
    background:rgba(168,85,247,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.3s;
}
.duo-play {
    width:56px;
    height:56px;
    background:rgba(168,85,247,0.95);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 24px rgba(168,85,247,0.5);
}
.duo-card-info { padding:14px 16px; }
.duo-card-info .label {
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#a855f7;
    margin-bottom:4px;
}
.duo-card-info h3 {
    font-weight:700;
    font-size:0.95rem;
    color:#fafafa;
    line-height:1.3;
}

/* Show overlay always on touch devices */
@media (hover:none) {
    .duo-overlay { opacity:1; background:rgba(168,85,247,0.08); }
}

/* ===== VIDEO MODAL ===== */
#vmodal {
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,0.95);
    align-items:center;
    justify-content:center;
    padding:0;
}
#vmodal.open { display:flex; }
#vmodal-box {
    position:relative;
    width:100%;
    max-width:960px;
    margin:auto;
}
#vmodal-close {
    position:absolute;
    top:-48px;
    right:0;
    background:rgba(255,255,255,0.1);
    border:none;
    color:#fff;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:1.5rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s;
    -webkit-tap-highlight-color:transparent;
    flex-shrink:0;
}
#vmodal-close:hover,
#vmodal-close:active { background:rgba(168,85,247,0.6); }
#vmodal iframe {
    width:100%;
    aspect-ratio:16/9;
    border:none;
    display:block;
}

/* On very small screens, show close inside frame */
@media (max-width:600px) {
    #vmodal { padding:0; align-items:flex-end; }
    #vmodal-box { max-width:100%; border-radius:0; }
    #vmodal-close {
        top:auto;
        right:12px;
        bottom:calc(56.25vw + 12px);
        position:fixed;
        background:rgba(0,0,0,0.7);
        z-index:10000;
    }
}

/* ===== EM BREVE ===== */
.duo-soon {
    padding:80px 24px;
    text-align:center;
    border-top:1px solid #27272a;
}
.duo-soon p {
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:#52525b;
}