/* ==========================================
VIDEOSPHERA 2.0
STYLE-V2.CSS
========================================== */

:root {


--bg: #0f0f0f;
--bg-soft: #171717;

--text: #f5f5f5;
--text-soft: #bcbcbc;

--accent: #ffbf00;

--border: rgba(255,255,255,.08);


}

/* ==========================================
RESET
========================================== */

html,
body {


margin: 0;
padding: 0;

background: var(--bg);
color: var(--text);

font-family: 'Inter', sans-serif;

overflow-x: hidden;


}

a {


text-decoration: none;
transition: .3s;


}

img {


max-width: 100%;
display: block;


}

section {


position: relative;


}

/* ==========================================
TYPOGRAPHY
========================================== */

h1,
h2,
h3,
h4 {


font-family: 'Playfair Display', serif;

font-weight: 700;

margin-top: 0;


}

p {


line-height: 1.8;
color: var(--text-soft);


}

::selection {


background: var(--accent);
color: #000;


}

/* ==========================================
HEADER
========================================== */

.main-header {


position: fixed;

top: 0;
left: 0;

width: 100%;

z-index: 999;

background: rgba(15,15,15,.75);

backdrop-filter: blur(10px);

border-bottom: 1px solid var(--border);


}

.header-wrapper {


display: flex;

justify-content: space-between;
align-items: center;

min-height: 80px;


}

.logo {


color: white;

font-size: 24px;

font-family: 'Playfair Display', serif;

letter-spacing: 2px;

font-weight: 800;


}

.logo:hover {


color: var(--accent);


}

/* ==========================================
MENU
========================================== */

.main-nav ul {


display: flex;

gap: 30px;

list-style: none;

margin: 0;
padding: 0;


}

.main-nav a {


color: rgba(255,255,255,.85);

font-size: 14px;

text-transform: uppercase;

letter-spacing: 1px;


}

.main-nav a:hover {


color: var(--accent);


}

/* ==========================================
SOCIAL
========================================== */

.social-top {


display: flex;

gap: 15px;


}

.social-top a {


color: white;

font-size: 18px;


}

.social-top a:hover {


color: var(--accent);


}

/* ==========================================
HERO
========================================== */

.hero-v2 {


height: 100vh;

position: relative;

display: flex;

align-items: center;

overflow: hidden;


}

.hero-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.70)
    );

z-index: 2;


}

.hero-content {


position: relative;

z-index: 3;

width: 100%;


}

.hero-tag {


display: inline-block;

color: var(--accent);

text-transform: uppercase;

letter-spacing: 3px;

font-size: 13px;

margin-bottom: 20px;


}

.hero-v2 h1 {


font-size: clamp(48px, 8vw, 90px);

line-height: 1.05;

margin-bottom: 30px;

color: white;


}

.hero-description {


max-width: 650px;

font-size: 20px;

color: rgba(255,255,255,.85);

margin-bottom: 40px;


}

/* ==========================================
BUTTONS
========================================== */

.hero-buttons {


display: flex;

gap: 20px;

flex-wrap: wrap;


}

.btn-primary-custom {


display: inline-block;

background: var(--accent);

color: #000;

padding: 16px 34px;

border-radius: 3px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;


}

.btn-primary-custom:hover {


color: #000;

transform: translateY(-2px);


}

.btn-outline-custom {


display: inline-block;

border: 1px solid rgba(255,255,255,.35);

color: white;

padding: 16px 34px;

border-radius: 3px;

text-transform: uppercase;

letter-spacing: 1px;


}

.btn-outline-custom:hover {


border-color: var(--accent);

color: var(--accent);


}

/* ==========================================
HERO SCROLL
========================================== */

.hero-scroll {


position: absolute;

bottom: 40px;

left: 50%;

transform: translateX(-50%);

z-index: 5;


}

.hero-scroll span {


width: 2px;

height: 60px;

display: block;

background: var(--accent);

animation: scrollLine 2s infinite;


}

@keyframes scrollLine {


0% {

    opacity: 0;
    transform: scaleY(.2);

}

50% {

    opacity: 1;

}

100% {

    opacity: 0;
    transform: scaleY(1);

}


}

/* ==========================================
SECTION TITLES
========================================== */

.section-title {


text-align: center;

margin-bottom: 70px;


}

.section-title span {


color: var(--accent);

text-transform: uppercase;

letter-spacing: 3px;

font-size: 12px;


}

.section-title h2 {


font-size: 56px;

margin-top: 15px;


}

/* ==========================================
SPACING
========================================== */

.section-padding {


padding: 120px 0;


}

/* ==========================================
MOBILE
========================================== */

@media(max-width:991px){
    .main-nav {
        display:none;
    }
    .hero-v2 h1 {
        font-size:52px;
    }
    .hero-description {
        font-size:18px;
    }
}

@media(max-width:768px){
    .hero-v2 h1 {
        font-size:42px;
    }
    .hero-buttons {
        flex-direction:column;
        align-items:flex-start;
    }
}

.hero-v2 .mbYTP_wrapper {
    z-index: 1 !important;
}

.hero-overlay {
    z-index: 2;
}

.hero-content {
    z-index: 3;
}

.hero-overlay {
    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        rgba(0,0,0,.75)
    );
}

/* ==========================================
   GALERÍA DESTACADA
========================================== */

.featured-gallery {

    background: #111;

}

.gallery-filters {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 60px;

}

.gallery-filters button {

    background: transparent;

    border: 1px solid rgba(255,255,255,.15);

    color: white;

    padding: 10px 24px;

    transition: .3s;

}

.gallery-filters button:hover,
.gallery-filters button.active {

    background: #ffbf00;

    color: #000;

}

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap: 20px;

}

.gallery-item {

    position: relative;

    overflow: hidden;

    cursor: pointer;

}

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.gallery-item:hover img {

    transform: scale(1.08);

}

.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: end;

    padding: 25px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.85)
        );

    opacity: 0;

    transition: .4s;

}

.gallery-item:hover .gallery-overlay {

    opacity: 1;

}

.gallery-overlay span {

    color: white;

    font-size: 18px;

    font-family: 'Playfair Display', serif;

}

.gallery-item.tall {

    min-height: 550px;

}

.gallery-item.wide {

    min-height: 350px;

}

.gallery-item {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .25s ease,
        transform .25s ease;

}