/* ===========================
   GOOGLE STYLE RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#0B0B0B;
    color:#F5F5F5;

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

    overflow-x:hidden;
}


/* ===========================
        CONTENEDOR
=========================== */

.site-container{

    width:min(92%,1300px);

    margin:auto;

}


/* ===========================
        TOP BAR
=========================== */

.topbar{

    background:#111;

    border-bottom:1px solid rgba(255,255,255,.05);

    height:40px;

}

.topbar__content{

    height:40px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.topbar__message{

    color:#E7D6BB;

    font-size:.85rem;

    letter-spacing:1px;

}

.topbar__socials{

    display:flex;

    gap:20px;

}

.topbar__socials a{

    color:#999;

    text-decoration:none;

    transition:.3s;

}

.topbar__socials a:hover{

    color:white;

}


/* ===========================
        NAVBAR
=========================== */

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    transition:.35s;

}

.site-header--scrolled{

    backdrop-filter:blur(18px);

    background:rgba(10,10,10,.78);

    border-bottom:1px solid rgba(255,255,255,.08);

}


.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/* ===========================
        LOGO
=========================== */

.navbar__brand{

    text-decoration:none;

    color:white;

    display:flex;

    flex-direction:column;

}

.navbar__brand-main{

    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    letter-spacing:3px;

    color:#E7D6BB;

}

.navbar__brand-subtitle{

    font-size:.75rem;

    letter-spacing:5px;

    color:#999;

}


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

.navbar__navigation{

    display:flex;

    gap:45px;

}

.navbar__link{

    text-decoration:none;

    color:white;

    text-transform:uppercase;

    font-size:.9rem;

    letter-spacing:2px;

    position:relative;

}

.navbar__link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#C8A87A;

    transition:.35s;

}

.navbar__link:hover::after{

    width:100%;

}

.navbar__link:hover{

    color:#E7D6BB;

}


/* ===========================
        ACCIONES
=========================== */

.navbar__actions{

    display:flex;

    align-items:center;

    gap:20px;

}

.navbar__cart{

    text-decoration:none;

    color:white;

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

    padding:12px 22px;

    border-radius:999px;

    transition:.35s;

}

.navbar__cart:hover{

    background:#C8A87A;

    color:black;

}


/* ===========================
        HAMBURGUESA
=========================== */

.navbar__toggle{

    display:none;

}


/* ===========================
        MAIN
=========================== */

.site-main{

    min-height:70vh;

}


/* ===========================
        FOOTER
=========================== */

.site-footer{

    margin-top:120px;

    background:#111;

    padding:80px 0 40px;

    border-top:1px solid rgba(255,255,255,.08);

}

.site-footer__grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.site-footer__title{

    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    color:#E7D6BB;

    letter-spacing:3px;

}

.site-footer__description{

    color:#999;

    margin-top:15px;

    line-height:1.8;

}

.site-footer__heading{

    margin-bottom:20px;

    color:white;

}

.site-footer__column{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.site-footer__column a{

    color:#999;

    text-decoration:none;

}

.site-footer__column a:hover{

    color:#E7D6BB;

}

.site-footer__bottom{

    border-top:1px solid rgba(255,255,255,.08);

    margin-top:60px;

    padding-top:30px;

    display:flex;

    justify-content:space-between;

    color:#777;

}
/* ==================================================
   HERO MARANATHA
================================================== */

.hero {
    position: relative;
    min-height: calc(100vh - 130px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 90px 20px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.96) 0%,
            rgba(5, 5, 5, 0.78) 45%,
            rgba(5, 5, 5, 0.50) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.88) 100%
        ),
        url("../img/maranatha26.e846efaa3356.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Textura sutil */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px
        );
}


/* Resplandor detrás del contenido */

.hero::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 45%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(200, 168, 122, 0.10);

    filter: blur(120px);

    pointer-events: none;
}


/* Overlay adicional */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0, 0, 0, 0.30) 55%,
            rgba(0, 0, 0, 0.85) 100%
        );

    z-index: 1;
}


/* Contenido */

.hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);

    text-align: center;

    animation: heroFadeUp 1s ease both;
}


/* Etiqueta superior */

.hero-tag {
    display: inline-flex;

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

    margin-bottom: 18px;

    padding: 8px 18px;

    border: 1px solid rgba(231, 214, 187, 0.45);

    color: #e7d6bb;

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 5px;
    text-transform: uppercase;
}


/* Título principal */

.hero-content h1 {
    margin: 0;

    color: #e7d6bb;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(5rem, 13vw, 10rem);
    font-weight: 400;

    letter-spacing: 8px;
    line-height: 0.85;

    text-transform: uppercase;

    text-shadow:
        0 8px 40px rgba(0, 0, 0, 0.75),
        0 0 60px rgba(200, 168, 122, 0.08);
}


/* Subtítulo */

.hero-content h2 {
    margin-top: 30px;

    color: #f5f5f5;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(1.8rem, 4vw, 3.6rem);
    font-weight: 400;

    letter-spacing: 4px;
    line-height: 1.1;

    text-transform: uppercase;
}


/* Descripción */

.hero-description {
    max-width: 660px;

    margin: 18px auto 0;

    color: rgba(245, 245, 245, 0.78);

    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 300;

    line-height: 1.8;
}


/* Botones */

.hero-buttons {
    display: flex;

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

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 34px;
}


.btn,
.btn-outline {
    display: inline-flex;

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

    min-width: 190px;
    min-height: 54px;

    padding: 15px 30px;

    text-decoration: none;

    font-size: 0.82rem;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.btn {
    border: 1px solid #c8a87a;

    background: #c8a87a;
    color: #0b0b0b;

    box-shadow: 0 12px 35px rgba(200, 168, 122, 0.18);
}


.btn:hover {
    transform: translateY(-4px);

    background: #e7d6bb;
    border-color: #e7d6bb;

    box-shadow: 0 18px 45px rgba(200, 168, 122, 0.30);
}


.btn-outline {
    border: 1px solid rgba(231, 214, 187, 0.65);

    background: rgba(255, 255, 255, 0.03);
    color: #e7d6bb;

    backdrop-filter: blur(8px);
}


.btn-outline:hover {
    transform: translateY(-4px);

    background: #e7d6bb;
    border-color: #e7d6bb;

    color: #0b0b0b;
}


/* ==================================================
   CONTADOR
================================================== */

.countdown {
    display: grid;

    grid-template-columns: repeat(4, minmax(110px, 150px));

    justify-content: center;

    gap: 14px;

    margin-top: 55px;
}


.time-box {
    position: relative;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 115px;

    padding: 18px 12px;

    border: 1px solid rgba(231, 214, 187, 0.20);

    background: rgba(12, 12, 12, 0.58);

    backdrop-filter: blur(14px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

    overflow: hidden;
}


.time-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #c8a87a,
        transparent
    );
}


.time-box span {
    color: #e7d6bb;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(2.4rem, 5vw, 4rem);

    line-height: 1;
    letter-spacing: 2px;
}


.time-box small {
    margin-top: 10px;

    color: rgba(245, 245, 245, 0.58);

    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 3px;
    text-transform: uppercase;
}


/* ==================================================
   ANIMACIÓN
================================================== */

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 800px) {

    .hero {
        min-height: auto;

        padding: 90px 18px 70px;

        background-position: 60% center;
    }

    .hero-content h1 {
        letter-spacing: 4px;
    }

    .hero-content h2 {
        letter-spacing: 2px;
    }

    .countdown {
        grid-template-columns: repeat(2, minmax(120px, 1fr));

        width: min(100%, 420px);

        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 520px) {

    .hero-tag {
        font-size: 0.65rem;
        letter-spacing: 3px;
    }

    .hero-content h1 {
        font-size: clamp(4rem, 22vw, 6rem);
    }

    .hero-content h2 {
        margin-top: 24px;

        font-size: 2rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn,
    .btn-outline {
        width: 100%;
        max-width: 320px;
    }

    .countdown {
        gap: 10px;
    }

    .time-box {
        min-height: 100px;
    }

}
/* ==================================================
   SECCIÓN VISIÓN
================================================== */

.vision-section {
    position: relative;

    padding: 140px 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(200, 168, 122, 0.08),
            transparent 32%
        ),
        #0b0b0b;

    overflow: hidden;
}


.vision-section::before {
    content: "MARANATHA";

    position: absolute;

    left: -35px;
    bottom: -70px;

    color: rgba(255, 255, 255, 0.018);

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(10rem, 26vw, 28rem);

    letter-spacing: 12px;
    line-height: 1;

    pointer-events: none;
}


.vision-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    align-items: center;

    gap: 100px;
}


/* ==================================================
   CONTENIDO
================================================== */

.vision-content {
    max-width: 590px;
}


.vision-eyebrow {
    display: inline-block;

    margin-bottom: 24px;

    color: #c8a87a;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 5px;
    text-transform: uppercase;
}


.vision-title {
    margin: 0;

    color: #f5f5f5;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(4.2rem, 7vw, 7.5rem);
    font-weight: 400;

    letter-spacing: 3px;
    line-height: 0.88;
}


.vision-title span {
    display: block;

    color: #e7d6bb;
}


.vision-subtitle {
    margin-top: 28px;

    color: #c8a87a;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(2rem, 4vw, 3.7rem);
    font-weight: 400;

    letter-spacing: 4px;
    line-height: 1;
}


.vision-description {
    max-width: 560px;

    margin-top: 26px;

    color: rgba(245, 245, 245, 0.62);

    font-size: 1rem;
    font-weight: 300;

    line-height: 1.95;
}


.vision-link {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 36px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(200, 168, 122, 0.7);

    color: #e7d6bb;

    text-decoration: none;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 2.5px;
    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.vision-link span {
    font-size: 1.3rem;
}


.vision-link:hover {
    gap: 28px;

    color: #ffffff;

    border-color: #ffffff;
}


/* ==================================================
   IMAGEN
================================================== */

.vision-image-wrapper {
    position: relative;

    min-height: 660px;
}


.vision-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 88%;
    height: 610px;

    overflow: hidden;

    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}


.vision-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(35%)
        contrast(1.08)
        brightness(0.72);

    transition:
        transform 1s ease,
        filter 1s ease;
}

.vision-collage {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 7px;
    padding: 7px;
    background: #090909;
}

.vision-collage__item {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #171717;
}

.vision-collage .vision-collage__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(42%) contrast(1.08) brightness(0.66);
    transition: transform 0.8s ease, filter 0.8s ease;
}

.vision-collage--empty {
    display: block;
    padding: 0;
}

.vision-collage .vision-collage__item:hover img {
    transform: scale(1.08);
    filter: grayscale(0%) contrast(1.03) brightness(0.9);
}


.vision-image:not(.vision-collage):hover img {
    transform: scale(1.045);

    filter:
        grayscale(10%)
        contrast(1.08)
        brightness(0.82);
}


.vision-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.7)
        ),
        linear-gradient(
            90deg,
            rgba(11, 11, 11, 0.25),
            transparent
        );

    pointer-events: none;
}


.vision-image-text {
    position: absolute;

    left: 45px;
    bottom: 40px;

    max-width: 360px;

    color: #f5f5f5;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(3.6rem, 6vw, 6.5rem);

    letter-spacing: 4px;
    line-height: 0.86;

    text-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}


.vision-image-text span {
    display: block;

    color: #e7d6bb;
}


.vision-decoration {
    position: absolute;

    left: 0;
    bottom: 0;

    display: flex;

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

    width: 190px;
    height: 190px;

    border: 1px solid rgba(231, 214, 187, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(200, 168, 122, 0.14),
            rgba(15, 15, 15, 0.96)
        );

    color: #e7d6bb;

    font-family: "Bebas Neue", sans-serif;

    font-size: 4.5rem;

    letter-spacing: 5px;

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}


/* ==================================================
   RESPONSIVE VISIÓN
================================================== */

@media (max-width: 1050px) {

    .vision-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .vision-content {
        max-width: 720px;
    }

    .vision-image-wrapper {
        width: min(100%, 820px);

        min-height: 620px;
    }

    .vision-image {
        width: 90%;
        height: 560px;
    }

}


@media (max-width: 650px) {

    .vision-section {
        padding: 95px 0;
    }

    .vision-title {
        font-size: clamp(3.8rem, 18vw, 5.5rem);
    }

    .vision-description {
        font-size: 0.95rem;
    }

    .vision-image-wrapper {
        min-height: 500px;
    }

    .vision-image {
        width: 94%;
        height: 460px;
    }

    .vision-collage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(7, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
    }

    .vision-image-text {
        left: 25px;
        bottom: 28px;

        font-size: 3.8rem;
    }

    .vision-decoration {
        width: 125px;
        height: 125px;

        font-size: 3rem;
    }

}
/* ==================================================
   COLLECTION
================================================== */

.collection-section{

    padding:140px 0;

    background:#090909;

}

.collection-header{

    text-align:center;

    max-width:700px;

    margin:auto auto 70px;

}

.collection-tag{

    color:#C8A87A;

    letter-spacing:5px;

    font-size:.75rem;

    text-transform:uppercase;

}

.collection-title{

    margin-top:20px;

    font-family:'Bebas Neue',sans-serif;

    font-size:5rem;

    letter-spacing:5px;

    color:#E7D6BB;

}

.collection-text{

    margin-top:20px;

    color:#999;

    line-height:1.8;

}

.collection-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.product-card{

    background:#111;

    overflow:hidden;

    transition:.45s;

}

.product-card:hover{

    transform:translateY(-12px);

}

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:460px;

    object-fit:cover;

    transition:.6s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.product-card:hover .product-overlay{

    opacity:1;

}

.product-view{

    color:white;

    text-decoration:none;

    border:1px solid white;

    padding:14px 28px;

    letter-spacing:2px;

}

.product-info{

    padding:28px;

}

.product-info h3{

    font-size:1.4rem;

    color:white;

}

.price{

    margin:15px 0;

    color:#C8A87A;

    font-size:1.3rem;

}

.buy-btn{

    display:block;

    text-align:center;

    padding:15px;

    background:#C8A87A;

    color:black;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.buy-btn:hover{

    background:#E7D6BB;

}

@media(max-width:1000px){

.collection-grid{

grid-template-columns:1fr;

}

}
/* ==================================================
   MARANATHA EXPERIENCE
================================================== */

.experience-section {
    position: relative;
    padding: 140px 0;
    background:
        linear-gradient(
            180deg,
            #090909 0%,
            #10100f 55%,
            #090909 100%
        );
    overflow: hidden;
}

.experience-section::before {
    content: "EXPERIENCE";
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(231, 214, 187, 0.025);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(9rem, 23vw, 24rem);
    letter-spacing: 15px;
    white-space: nowrap;
    pointer-events: none;
}

.experience-header {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 70px;
    text-align: center;
}

.experience-eyebrow {
    color: #c8a87a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 5px;
}

.experience-title {
    margin-top: 18px;
    color: #e7d6bb;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(3.4rem, 5vw, 5rem);
    font-weight: 400;
    letter-spacing: 6px;
    line-height: 0.95;
}

.experience-description {
    max-width: 610px;
    margin: 24px auto 0;
    color: rgba(245, 245, 245, 0.6);
    line-height: 1.9;
}

.experience-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 410px;
    gap: 22px;
}

.experience-card {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    background: #151515;
}

.experience-card--large {
    grid-row: span 2;
}

.experience-card--wide {
    grid-column: span 1;
}

.experience-card img,
.experience-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter:
        grayscale(20%)
        contrast(1.05)
        brightness(0.88);
    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.experience-card:hover img,
.experience-card:hover video {
    transform: scale(1.07);
    filter:
        grayscale(0%)
        contrast(1.05)
        brightness(1);
}

.experience-card__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 20%,
            rgba(0, 0, 0, 0.68) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.18),
            transparent 60%
        );
    transition: background 0.5s ease;
}

.experience-card:hover .experience-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 10%,
            rgba(0, 0, 0, 0.8) 100%
        );
}

.experience-card__number {
    position: absolute;
    top: 25px;
    right: 28px;
    color: rgba(231, 214, 187, 0.55);
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem;
    letter-spacing: 3px;
}

.experience-card__content {
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 35px;
    transform: translateY(12px);
    transition: transform 0.45s ease;
}

.experience-card:hover .experience-card__content {
    transform: translateY(0);
}

.experience-card__content span {
    color: #c8a87a;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 4px;
}

.experience-card__content h3 {
    margin-top: 8px;
    color: #f5f5f5;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2.4rem, 3.2vw, 3.5rem);
    font-weight: 400;
    letter-spacing: 4px;
    line-height: 0.95;
}

.experience-card__content p {
    max-width: 480px;
    margin-top: 15px;
    color: rgba(245, 245, 245, 0.7);
    font-size: 0.92rem;
    line-height: 1.7;
}

@media (max-width: 900px) {

    .experience-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .experience-card,
    .experience-card--large,
    .experience-card--wide {
        grid-column: auto;
        grid-row: auto;
        min-height: 500px;
    }

}

@media (max-width: 550px) {

    .experience-section {
        padding: 100px 0;
    }

    .experience-header {
        margin-bottom: 50px;
    }

    .experience-title {
        font-size: 4.5rem;
        letter-spacing: 3px;
    }

    .experience-card,
    .experience-card--large,
    .experience-card--wide {
        min-height: 430px;
    }

    .experience-card__content {
        left: 24px;
        right: 24px;
        bottom: 28px;
    }

    .experience-card__content h3 {
        font-size: 4rem;
    }

}
/*=========================================
GALERÍA CINEMATOGRÁFICA
=========================================*/

.gallery-section{

    padding:140px 0;

    background:#050505;

}

.gallery-header{

    text-align:center;

    max-width:750px;

    margin:auto auto 70px;

}

.gallery-tag{

    color:#C8A87A;

    letter-spacing:5px;

    font-size:.8rem;

}

.gallery-title{

    margin-top:20px;

    font-family:'Bebas Neue',sans-serif;

    font-size:5rem;

    color:#E7D6BB;

    letter-spacing:5px;

}

.gallery-description{

    margin-top:25px;

    color:#999;

    line-height:1.9;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:260px;

    gap:18px;

}

.gallery-big{

    grid-column:span 2;

    grid-row:span 2;

}

.gallery-wide{

    grid-column:span 2;

}

.gallery-item{

    overflow:hidden;

    position:relative;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

    filter:brightness(.75);

}

.gallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(1);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.2);

    transition:.4s;

}

.gallery-item:hover::after{

    background:rgba(0,0,0,.05);

}

@media(max-width:900px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:300px;

}

.gallery-big,
.gallery-wide{

grid-column:auto;

grid-row:auto;

}

}
/* =========================================================
   HOME MARANATHA 2026 — NUEVO HERO
========================================================= */
:root {
    --maranatha-black: #07070a;
    --maranatha-purple: #7c3aed;
    --maranatha-purple-light: #a855f7;
    --maranatha-blue: #2563eb;
    --maranatha-gold: #f4c76b;
    --maranatha-white: #f8fafc;
    --maranatha-muted: #b6b7c3;
}

.maranatha-hero {
    position: relative;
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 0 150px;
    color: var(--maranatha-white);
    background: var(--maranatha-black);
}

.maranatha-hero__background {
    position: absolute;
    inset: 0;
    background: url("../img/maranatha26.e846efaa3356.jpg") center / cover no-repeat;
    transform: scale(1.06);
    animation: maranathaHeroZoom 18s ease-in-out infinite alternate;
}

.maranatha-hero__video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.maranatha-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,4,8,.66), rgba(4,4,8,.52) 35%, rgba(4,4,8,.82) 78%, #07070a 100%),
        linear-gradient(90deg, rgba(7,7,10,.64), rgba(7,7,10,.12), rgba(7,7,10,.64));
}

.maranatha-hero__glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .23;
    pointer-events: none;
}

.maranatha-hero__glow--purple { top: -280px; left: -180px; background: var(--maranatha-purple); }
.maranatha-hero__glow--blue { right: -220px; bottom: -300px; background: var(--maranatha-blue); }

.maranatha-hero__content {
    position: relative;
    z-index: 5;
    max-width: 980px;
    text-align: center;
}

.maranatha-hero__badge {
    display: inline-flex;
    padding: 8px 18px;
    margin-bottom: 26px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(15px);
    color: rgba(255,255,255,.9);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.maranatha-hero__eyebrow {
    margin-bottom: 12px;
    color: var(--maranatha-gold);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.maranatha-hero__title {
    max-width: 900px;
    margin: 0 auto;
    color: #fff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(4.3rem, 10vw, 8.5rem);
    font-weight: 400;
    line-height: .87;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.hero-font--moderna .maranatha-hero__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    letter-spacing: -.045em;
}

.hero-font--editorial .maranatha-hero__title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.055em;
    text-transform: none;
}

.hero-font--clasica .maranatha-hero__title {
    font-family: "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: -.035em;
    text-transform: none;
}

.maranatha-hero__description {
    max-width: 730px;
    margin: 30px auto 0;
    color: rgba(248,250,252,.82);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.8;
}

.maranatha-hero__information {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 36px;
    padding: 15px 24px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(10,10,18,.48);
    backdrop-filter: blur(18px);
}

.maranatha-info-item { display: flex; align-items: center; gap: 12px; text-align: left; }
.maranatha-info-item i { color: var(--maranatha-purple-light); font-size: 1.4rem; }
.maranatha-info-item div { display: flex; flex-direction: column; }
.maranatha-info-item span { color: rgba(255,255,255,.55); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.maranatha-info-item strong { color: #fff; font-size: .91rem; font-weight: 600; }
.maranatha-info-divider { width: 1px; height: 38px; background: rgba(255,255,255,.18); }

.maranatha-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.btn-maranatha {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn-maranatha:hover { transform: translateY(-3px); }
.btn-maranatha--primary { color: #fff; background: linear-gradient(135deg, var(--maranatha-purple), var(--maranatha-blue)); box-shadow: 0 16px 40px rgba(124,58,237,.35); }
.btn-maranatha--primary:hover { color: #fff; box-shadow: 0 20px 52px rgba(124,58,237,.48); }
.btn-maranatha--outline { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); backdrop-filter: blur(14px); }
.btn-maranatha--outline:hover { color: #fff; background: rgba(255,255,255,.14); }
.btn-maranatha:disabled { cursor: not-allowed; opacity: .72; }

.maranatha-countdown-wrapper { margin-top: 55px; }
.maranatha-countdown-label { margin-bottom: 14px; color: rgba(255,255,255,.55); font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.maranatha-countdown { display: flex; align-items: center; justify-content: center; gap: 13px; }
.countdown-card { min-width: 86px; padding: 16px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(8,8,14,.42); backdrop-filter: blur(18px); }
.countdown-card span { display: block; font-family: "Bebas Neue", sans-serif; color: #fff; font-size: 2.3rem; line-height: 1; letter-spacing: .06em; }
.countdown-card small { display: block; margin-top: 7px; color: rgba(255,255,255,.55); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.countdown-separator { color: rgba(255,255,255,.45); font-size: 1.5rem; }
.maranatha-countdown-finished { padding: 20px 35px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(255,255,255,.08); font-size: 1.2rem; font-weight: 700; }

.maranatha-scroll-indicator {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.62);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}
.maranatha-scroll-indicator:hover { color: #fff; }
.maranatha-scroll-indicator i { font-size: 1.2rem; animation: maranathaScrollDown 1.8s ease-in-out infinite; }

.maranatha-intro {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: #07070a;
}
.maranatha-intro__image { position: absolute; inset: 0; background: url("../img/maranatha26.e846efaa3356.jpg") center / cover no-repeat; }
.maranatha-intro__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,10,.94), rgba(7,7,10,.7) 52%, rgba(7,7,10,.26)), linear-gradient(0deg, #07070a, transparent 26%, transparent 75%, #07070a); }
.maranatha-intro__content { position: relative; z-index: 3; }
.maranatha-intro__content > * { max-width: 720px; }
.maranatha-section-label { margin-bottom: 16px; color: var(--maranatha-purple-light); font-size: .72rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; }
.maranatha-intro h2 { margin-bottom: 26px; font-family: "Bebas Neue", sans-serif; font-size: clamp(4rem, 8vw, 7.4rem); font-weight: 400; line-height: .92; text-transform: uppercase; }
.maranatha-intro h2 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.65); }
.maranatha-intro__content > p:not(.maranatha-section-label) { color: rgba(255,255,255,.72); font-size: 1.08rem; line-height: 1.85; }
.maranatha-text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: #fff; font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.maranatha-text-link i { color: var(--maranatha-purple-light); font-size: 1.25rem; }

.maranatha-registration-preview { padding: 90px 0 130px; color: #fff; background: #07070a; }
.maranatha-registration-preview__card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 55px; border: 1px solid rgba(255,255,255,.14); border-radius: 30px; background: linear-gradient(135deg, rgba(124,58,237,.19), rgba(37,99,235,.09)); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.maranatha-registration-preview__card h2 { margin-bottom: 15px; font-family: "Bebas Neue", sans-serif; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 400; line-height: .95; text-transform: uppercase; }
.maranatha-registration-preview__card p:last-child { max-width: 650px; margin-bottom: 0; color: rgba(255,255,255,.68); line-height: 1.8; }
.collection-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #aaa; }

@keyframes maranathaHeroZoom { from { transform: scale(1.06); } to { transform: scale(1.14); } }
@keyframes maranathaScrollDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (max-width: 991px) {
    .maranatha-registration-preview__card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
    .maranatha-hero { min-height: 100svh; padding: 105px 0 130px; }
    .maranatha-hero__title { font-size: clamp(3.8rem, 18vw, 6rem); }
    .maranatha-hero__description { font-size: .96rem; line-height: 1.7; }
    .maranatha-hero__information { width: 100%; max-width: 380px; flex-direction: column; gap: 15px; padding: 18px; }
    .maranatha-info-item { width: 100%; }
    .maranatha-info-divider { width: 100%; height: 1px; }
    .maranatha-hero__buttons { flex-direction: column; }
    .btn-maranatha { width: 100%; max-width: 380px; }
    .maranatha-countdown { gap: 5px; }
    .countdown-card { min-width: 62px; padding: 13px 7px; border-radius: 12px; }
    .countdown-card span { font-size: 1.7rem; }
    .countdown-card small { font-size: .5rem; }
    .countdown-separator { font-size: 1rem; }
    .maranatha-scroll-indicator span { display: none; }
    .maranatha-intro { min-height: 670px; }
    .maranatha-intro__overlay { background: linear-gradient(0deg, rgba(7,7,10,.96), rgba(7,7,10,.67) 75%, rgba(7,7,10,.54)); }
    .maranatha-intro__content { align-self: flex-end; padding-bottom: 85px; }
    .maranatha-intro h2 { font-size: clamp(3.6rem, 16vw, 5.5rem); }
    .maranatha-registration-preview { padding: 30px 0 90px; }
    .maranatha-registration-preview__card { padding: 32px 24px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .maranatha-hero__background,
    .maranatha-scroll-indicator i { animation: none; }
}

/* Portada limpia con anuncios administrables */
.maranatha-hero {
    min-height: auto;
    align-items: flex-start;
    padding: 128px 0 110px;
    background:
        radial-gradient(circle at 12% 8%, rgba(124,58,237,.22), transparent 28%),
        radial-gradient(circle at 88% 45%, rgba(37,99,235,.14), transparent 30%),
        #07070a;
}

.maranatha-hero__overlay {
    background: linear-gradient(180deg, rgba(7,7,10,.1), rgba(7,7,10,.72) 82%, #07070a 100%);
}

.maranatha-hero__content { max-width: 1240px; }
.maranatha-hero__title {
    max-width: 1220px;
    font-size: clamp(4rem, 7vw, 7.2rem);
    line-height: .88;
    letter-spacing: .025em;
}
.hero-font--moderna .maranatha-hero__title { letter-spacing: -.035em; }

.maranatha-hero__gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(900px, 82vw);
    gap: 18px;
    max-width: 1180px;
    margin: 34px auto 0;
    padding: 4px 2px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--maranatha-gold) rgba(255,255,255,.08);
}

.maranatha-hero__gallery-item {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(244,199,107,.28);
    border-radius: 26px;
    background: rgba(10,10,14,.88);
    box-shadow: 0 34px 100px rgba(0,0,0,.5);
    scroll-snap-align: center;
}

.maranatha-hero__gallery-item img {
    display: block;
    width: 100%;
    max-height: 680px;
    object-fit: contain;
}

.maranatha-hero__gallery--single {
    width: 100%;
    max-width: 1240px;
    grid-auto-columns: 100%;
    overflow: visible;
}

.maranatha-hero__gallery--single .maranatha-hero__gallery-item,
.maranatha-hero__gallery--single .maranatha-hero__gallery-item img {
    width: 100%;
}

.maranatha-hero__gallery-item figcaption {
    padding: 13px 18px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    text-align: left;
}

@media (max-width: 700px) {
    .maranatha-hero { padding: 110px 0 82px; }
    .maranatha-hero__title { font-size: clamp(3.35rem, 15vw, 5.6rem); }
    .maranatha-hero__gallery { grid-auto-columns: 90vw; margin-top: 26px; }
    .maranatha-hero__gallery--single { grid-auto-columns: 100%; }
    .maranatha-hero__gallery-item { border-radius: 18px; }
}