@charset "UTF-8";

/* ==========================================
   NAVBAR COMPLETO - TUPROXIMOHOGAR
========================================== */

/* VARIABLES NECESARIAS */
:root {
    --bg-main: #0B0B0B;
    --color-gold: #C8A96B;
    --color-gold-hover: #e0c286;
    --color-text: #ffffff;
    --color-text-muted: #b3b3b3;
    --color-border: #2a2a2a;

    --font-heading: 'DM Serif Display', serif;
    --font-body: 'DM Sans', sans-serif;

    --radius-md: 14px;

    --transition-fast: 0.3s ease;

    --container-padding: 8%;
}

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

.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px var(--container-padding);

    background-color: rgba(11, 11, 11, 0.85);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: fixed;
    top: 0;
    left: 0;

    z-index: 1000;

    border-bottom: 1px solid rgba(200, 169, 107, 0.1);

    transition: var(--transition-fast);
}

/* LOGO */

.navbar__logo {
    color: var(--color-gold);

    font-family: var(--font-heading);

    font-size: 28px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    transition: var(--transition-fast);
}

.navbar__logo img{
    height: 50px;
    width: auto;
    display: block;
}

.navbar__logo:hover {
    color: var(--color-gold-hover);
}

/* MENÚ */

.navbar__nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.navbar__list {
    display: flex;
    gap: 30px;
    list-style: none;
}

.navbar__link {
    color: var(--color-text-muted);

    font-weight: 500;

    position: relative;

    text-decoration: none;

    transition: var(--transition-fast);
}

.navbar__link:hover,
.navbar__link--active {
    color: var(--color-gold);
}

/* Línea inferior al pasar mouse */

.navbar__link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;

    height: 2px;

    background: var(--color-gold);

    transition: 0.3s;
}

.navbar__link:hover::after,
.navbar__link--active::after {
    width: 100%;
}

/* BOTÓN WHATSAPP */

.navbar__cta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    background: transparent;

    border: 1px solid var(--color-gold);

    color: var(--color-gold);

    padding: 10px 20px;

    border-radius: var(--radius-md);

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition-fast);
}

.navbar__cta svg {
    width: 18px;
    height: 18px;
}

.navbar__cta:hover {
    background: var(--color-gold);
    color: #000;

    transform: translateY(-2px);
}

/* BOTÓN HAMBURGUESA */

.navbar__toggle {
    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    flex-direction: column;

    gap: 6px;
}

.navbar__toggle-bar {
    width: 30px;
    height: 2px;

    background-color: white;

    transition: 0.3s;
}

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

@media (max-width: 768px) {

    :root {
        --container-padding: 6%;
    }

    .navbar__toggle {
        display: flex;
    }

    .navbar__nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

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

        flex-direction: column;

        gap: 25px;

        padding: 40px var(--container-padding);

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

        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

        transition: clip-path 0.4s ease-in-out;
    }

    .navbar__nav.is-open {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .navbar__list {
        width: 100%;

        flex-direction: column;

        align-items: center;
    }

    .navbar__cta {
        width: 100%;
        max-width: 260px;
    }
}

/* ==========================================
   ESPACIO PARA EL NAVBAR FIJO
========================================== */
/* ==========================================
   NAVBAR TOGGLE ANIMACIÓN — agregar al final de navbar.css
========================================== */
 
/* Animación X al abrir el menú */
 
.navbar__toggle.is-active .navbar__toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
 
.navbar__toggle.is-active .navbar__toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
 
.navbar__toggle.is-active .navbar__toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}