/* -------------------- VARIABLES --------------------- */

:root{
    --color-principal:#901f2c;
    --color-acento:#C79A42;
    --color-texto:#333;

    --header-height:clamp(4rem,6vw,6rem);
    --space-lg:clamp(1rem,3vw,2rem);
    --space-md:clamp(.5rem,2vw,1rem);
}



/* ---------------------- CABECERA -------------------- */


.cabecera{
    position:sticky;
    top:0;
    z-index:1000;

    background:var(--color-principal);

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

    padding-inline:var(--space-lg);
    height:var(--header-height);

    box-shadow:0 .15rem .6rem rgba(0,0,0,.15);

    font-family:system-ui;
}


.separador{
    width:100%;
    height:.4rem;
    background:var(--color-acento);

    box-shadow:0 .15rem .6rem rgba(0,0,0,.15);
}



/* ------------------------ LOGO ---------------------- */


.logo-img{
    height:clamp(2.5rem,5vw,3.5rem);
    width:auto;
}



/* ---------------------- NAVBAR ---------------------- */


.nav-links{
    display:flex;
    gap:var(--space-lg);
    align-items:center;
}

.nav-links a{
    color:white;
    text-decoration:none;

    font-weight:500;
    font-size:clamp(.9rem,1vw,1rem);

    position:relative;

    padding:.4rem .2rem;

    transition:opacity .2s ease;
}


.nav-links a::after{
    content:"";
    position:absolute;

    left:0;
    bottom:-.3rem;

    width:0%;
    height:.12rem;

    background:var(--color-acento);

    transition:.3s ease;
}

.nav-links a:hover::after{
    width:100%;
}



/* ------------------- DROPDOWN MENU ------------------ */


.dropdown{
    position:relative;
}


/* Panel */

.dropdown-content{

    position:absolute;
    top:100%;
    left:0;

    background:white;

    min-width:14rem;

    border-radius:.5rem;
    box-shadow:0 .6rem 1.4rem rgba(0,0,0,.15);

    padding:.5rem 0;

    opacity:0;
    visibility:hidden;

    transform:translateY(.5rem);

    transition:.25s ease;

    z-index:2000;
}


/* enlaces */

.dropdown-content a{
    display:block;

    padding:.6rem 1.2rem;

    color:var(--color-texto);

    font-size:.95rem;
}


.dropdown-content a:hover{
    background:#f5f5f5;
    color:var(--color-principal);
}


/* activar menú */

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}



/* ---------------------- MOBILE ---------------------- */


@media (max-width:768px){

    .nav-links{
        gap:var(--space-md);
    }

}



/* ---------------------- FOOTER ---------------------- */

.footer {
    background: var(--color-principal);
    color: white;
    text-align: center;
    padding: var(--space-lg);
    font-family: system-ui;
    font-size: clamp(.8rem, 1vw, .9rem);
}

.footer p {
    margin: 0.5rem 0;
}

/* -------------------- GLOBAL LAYOUT -------------------- */

/* make pages stretch and push footer to bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0; /* reset default */
}

#footer {
    margin-top: auto;
}