/* =========================================
   DREAMSPACE
   EVENTS & DECOR
   ========================================= */


/* =========================================
   VARIABLES
   ========================================= */

:root {

    --dark: #171513;
    --dark-soft: #24201d;
    --cream: #f7f2ea;
    --cream-dark: #e9dfd1;
    --gold: #b69765;
    --gold-light: #d2bc96;
    --white: #ffffff;
    --gray: #77716a;
    --font: 'Montserrat', sans-serif;

}


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

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--font);
    background: var(--cream);
    color: var(--dark);
    line-height: 1.7;

}


a {

    text-decoration: none;
    color: inherit;

}


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

.header {

    width: 100%;
    min-height: 90px;
    padding: 10px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(247, 242, 234, 0.98);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

}


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

.logo {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 155px;
    height: 75px;
    overflow: hidden;

}


.logo img {

    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: transparent;
    transition: 0.4s;

}


.logo:hover img {

    transform: scale(1.05);

}


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

.navbar {

    display: flex;
    gap: 35px;

}


.navbar a {

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;

}


.navbar a:hover {

    color: var(--gold);

}


/* =========================================
   BOTÓN HEADER
   ========================================= */

.btn-header {

    background: var(--dark);
    color: white;
    padding: 13px 23px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;

}


.btn-header:hover {

    background: var(--gold);

}


/* =========================================
   BOTONES
   ========================================= */

.btn-primary {

    display: inline-block;
    background: var(--dark);
    color: white;
    padding: 16px 28px;
    border: none;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;

}


.btn-primary:hover {

    background: var(--gold);
    transform: translateY(-2px);

}


.btn-secondary {

    display: inline-block;
    padding: 15px 27px;
    border: 1px solid var(--dark);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;

}


.btn-secondary:hover {

    background: var(--dark);
    color: white;

}


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

.hero {

    min-height: calc(100vh - 90px);
    padding: 80px 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(
            110deg,
            #f7f2ea 0%,
            #f7f2ea 55%,
            #e8ded0 55%,
            #e8ded0 100%
        );

    overflow: hidden;

}


.hero-content {

    max-width: 650px;

}


.small-title,
.section-label {

    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;

}


.hero h1 {

    font-family: Georgia, serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.05;
    font-weight: normal;
    margin-bottom: 28px;

}


.hero h1 span,
h2 span {

    color: var(--gold);
    font-style: italic;

}


.hero-text {

    max-width: 550px;
    color: var(--gray);
    font-size: 15px;
    margin-bottom: 35px;

}


.hero-buttons {

    display: flex;
    gap: 15px;
    flex-wrap: wrap;

}


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

.hero-decoration {

    width: 430px;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}


.circle {

    width: 370px;
    height: 370px;
    border-radius: 50%;
    border: 1px solid rgba(182, 151, 101, 0.6);
    position: absolute;

}


.circle::before {

    content: "";
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    position: absolute;
    top: 45px;
    left: 45px;

}


/* =========================================
   TARJETA CON EL LOGO
   ========================================= */

.hero-card {

    width: 280px;
    height: 350px;
    background: var(--dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 20px 25px 60px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 2;
    padding: 25px;

}


.hero-card::before {

    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(210, 188, 150, 0.4);
    pointer-events: none;

}


.hero-card img {

    width: 190px;
    height: 190px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    margin-bottom: 15px;
    display: block;

}


.hero-card-line {

    width: 50px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 10px;

}


.hero-card p {

    color: var(--gold-light);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;

}


/* =========================================
   NOSOTROS
   ========================================= */

.about {

    padding: 120px 9%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;

}


.section-image {

    display: flex;
    justify-content: center;

}


.image-box {

    width: 430px;
    height: 520px;
    background: #e4d5c3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}


.image-box::after {

    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    z-index: 3;
    pointer-events: none;

}


.image-box img {

    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 2;
    mix-blend-mode: normal;
    background: transparent;
    display: block;

}


.image-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(215, 200, 182, 0.2),
            rgba(168, 151, 131, 0.4)
        );

}


/* =========================================
   ABOUT CONTENT
   ========================================= */

.about-content h2,
.section-heading h2,
.difference h2,
.contact h2 {

    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.1;
    font-weight: normal;
    margin-bottom: 25px;

}


.about-content > p {

    color: var(--gray);
    font-size: 14px;
    margin-bottom: 17px;

}


/* =========================================
   FEATURES
   ========================================= */

.features {

    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 22px;

}


.feature {

    display: flex;
    align-items: flex-start;
    gap: 18px;

}


.feature-icon {

    min-width: 42px;
    height: 42px;
    border: 1px solid var(--gold);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;

}


.feature h3 {

    font-size: 13px;
    margin-bottom: 2px;

}


.feature p {

    font-size: 12px;
    color: var(--gray);

}


/* =========================================
   SERVICIOS
   ========================================= */

.services {

    padding: 110px 9%;
    background: var(--dark);
    color: white;

}


.section-heading {

    max-width: 650px;
    margin: 0 auto 65px;
    text-align: center;

}


.services .section-heading p:last-child {

    color: #aaa39a;
    font-size: 14px;

}


.service-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #4a4540;

}


.service-card {

    padding: 42px 30px;
    background: var(--dark);
    min-height: 330px;
    transition: 0.3s;

}


.service-card:hover {

    background: #28231f;
    transform: translateY(-5px);

}


.service-card.featured {

    background: #302a25;

}


.service-number {

    color: #756d63;
    font-size: 11px;
    margin-bottom: 25px;

}


.service-icon {

    color: var(--gold);
    font-size: 34px;
    margin-bottom: 25px;

}


.service-card h3 {

    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: normal;
    margin-bottom: 15px;

}


.service-card p {

    color: #aaa39a;
    font-size: 12px;
    margin-bottom: 25px;

}


.service-card a {

    color: var(--gold-light);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;

}


/* =========================================
   DIFERENCIAL
   ========================================= */

.difference {

    padding: 120px 9%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 100px;
    align-items: center;

}


.difference-content > p:not(.section-label) {

    max-width: 620px;
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 18px;

}


.quote {

    margin-top: 35px;
    padding: 25px;
    border-left: 2px solid var(--gold);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 20px;

}


.stats {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #d7cec2;

}


.stat {

    min-height: 170px;
    padding: 30px;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: center;

}


.stat strong {

    font-family: Georgia, serif;
    font-size: 45px;
    color: var(--gold);
    font-weight: normal;

}


.stat span {

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;

}


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

.gallery {

    padding: 110px 9%;
    background: #e9dfd1;

}


.gallery-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

}


.gallery-item {

    height: 400px;
    padding: 30px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    transition: 0.4s;

}


.gallery-item:hover {

    transform: scale(1.02);

}


.gallery-item::before {

    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0, 0, 0, 0.65)
        );

}


.gallery-item > div {

    position: relative;
    z-index: 2;
    color: white;

}


.gallery-item span {

    font-size: 11px;
    color: var(--gold-light);

}


.gallery-item h3 {

    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: normal;

}


.gallery-item p {

    font-size: 11px;
    color: #ddd;

}


/* =========================================
   FONDOS GALERÍA
   ========================================= */

.item-one {

    background:
        linear-gradient(
            145deg,
            #998a79,
            #d4c5b3
        );

}


.item-two {

    background:
        linear-gradient(
            145deg,
            #443d36,
            #9c8a73
        );

}


.item-three {

    background:
        linear-gradient(
            145deg,
            #c6b39b,
            #706458
        );

}


.item-four {

    background:
        linear-gradient(
            145deg,
            #73665a,
            #b8a58e
        );

}


/* =========================================
   CONTACTO
   ========================================= */

.contact {

    padding: 120px 9%;
    background: var(--dark);
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;

}


.contact-content > p:not(.section-label) {

    color: #aaa39a;
    max-width: 520px;
    font-size: 14px;
    margin-bottom: 35px;

}


.contact-info {

    display: flex;
    flex-direction: column;
    gap: 20px;

}


.contact-info div {

    display: flex;
    align-items: center;
    gap: 18px;

}


.contact-info span {

    color: var(--gold);
    font-size: 20px;

}


.contact-info p {

    color: #ddd;
    font-size: 13px;

}


/* =========================================
   FORMULARIO
   ========================================= */

.contact-form {

    background: #24201d;
    padding: 45px;

}


.contact-form h3 {

    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 30px;

}


.contact-form label {

    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa39a;
    margin-bottom: 7px;

}


.contact-form input,
.contact-form select,
.contact-form textarea {

    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #514b45;
    padding: 12px 0;
    margin-bottom: 25px;
    color: white;
    font-family: var(--font);
    outline: none;

}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color: var(--gold);

}


.contact-form select {

    color: #aaa39a;

}


.contact-form textarea {

    height: 80px;
    resize: vertical;

}


.contact-form button {

    margin-top: 5px;

}


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

footer {

    padding: 50px 9%;
    background: #0f0e0d;
    color: white;
    text-align: center;

}


.footer-logo {

    width: 180px;
    height: 110px;
    margin: 0 auto 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}


.footer-logo img {

    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent;
    display: block;

}


footer > p {

    color: #77716a;
    font-size: 12px;

}


.social {

    margin: 25px 0;
    display: flex;
    justify-content: center;
    gap: 25px;

}


.social a {

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa39a;
    transition: 0.3s;

}


.social a:hover {

    color: var(--gold-light);

}


.copyright {

    padding-top: 25px;
    border-top: 1px solid #292623;
    color: #55504b;
    font-size: 10px;

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

    .navbar {

        gap: 15px;

    }


    .hero {

        padding: 70px 6%;

    }


    .hero-decoration {

        width: 330px;

    }


    .service-grid {

        grid-template-columns: 1fr 1fr;

    }


    .gallery-grid {

        grid-template-columns: 1fr 1fr;

    }

}


/* =========================================
   CELULAR
   ========================================= */

@media (max-width: 768px) {

    .header {

        min-height: auto;
        padding: 15px 6%;
        flex-wrap: wrap;
        gap: 15px;

    }


    .logo {

        width: 140px;
        height: 65px;

    }


    .navbar {

        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;

    }


    .btn-header {

        display: none;

    }


    .hero {

        min-height: auto;
        padding: 80px 6%;
        display: block;
        background: var(--cream);

    }


    .hero h1 {

        font-size: 52px;

    }


    .hero-decoration {

        width: 100%;
        height: 400px;
        margin-top: 50px;

    }


    .about {

        grid-template-columns: 1fr;
        gap: 60px;
        padding: 80px 6%;

    }


    .image-box {

        width: 100%;
        max-width: 400px;

    }


    .service-grid {

        grid-template-columns: 1fr;

    }


    .services {

        padding: 80px 6%;

    }


    .difference {

        grid-template-columns: 1fr;
        gap: 60px;
        padding: 80px 6%;

    }


    .gallery {

        padding: 80px 6%;

    }


    .gallery-grid {

        grid-template-columns: 1fr;

    }


    .contact {

        grid-template-columns: 1fr;
        gap: 60px;
        padding: 80px 6%;

    }


    .contact-form {

        padding: 30px;

    }

}


/* =========================================
   CELULAR PEQUEÑO
   ========================================= */

@media (max-width: 480px) {

    .logo {

        width: 125px;
        height: 60px;

    }


    .navbar a {

        font-size: 9px;

    }


    .hero h1 {

        font-size: 43px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .btn-primary,
    .btn-secondary {

        text-align: center;
        width: 100%;

    }


    .hero-decoration {

        height: 330px;

    }


    .circle {

        width: 270px;
        height: 270px;

    }


    .circle::before {

        width: 200px;
        height: 200px;

    }


    .hero-card {

        width: 220px;
        height: 290px;

    }


    .hero-card img {

        width: 150px;
        height: 150px;

    }


    .stats {

        grid-template-columns: 1fr;

    }

}