/* Definir variables globales de colores */
:root {
    --color-naranja: #f4a261;  /* Naranja pastel */
    --color-azul-oscuro: #1d3842; /* Azul profundo */
    --color-rojo-coral: #e76f51; /* Rojo coral */
    --color-rojo:  #ff0000;
    --color-crema: #fefae0; /* Crema */
    --color-gris-oscuro: #444444; /* Gris oscuro */
    --color-blanco: #ffffff; /* Blanco puro */
    --color-azul-claro: #61bef4; /* Azul cielo */
    --color-verde-claro: #90ee90; /* Verde claro */
    --color-verde-oscuro: #228b22; /* Verde bosque */
    --color-amarillo-dorado: #ffd700; /* Dorado */
    --color-marron: #8b4513; /* Marrón oscuro */
    --color-morado: #800080; /* Púrpura */
    --color-celeste: #add8e6; /* Celeste suave */
    --color-rosa: #ff69b4; /* Rosa fuerte */
    --color-lila: #ba55d3; /* Lila */
    --color-turquesa: #40e0d0; /* Turquesa */
    --color-gris-claro: #c8c8c8; /* Gris claro */
    --color-negro: #000000; /* Negro */
}


/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estructura global */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-crema);
    color: var(--color-texto);
}

body {
    font-family: Arial, sans-serif;
}

/* Hacer que el <main> crezca y empuje el footer hacia abajo */
main {
    flex-grow: 1;
}

/* Header */
header {
    background-color: var(--color-naranja);
    padding: 10px 0;
}

/* Contenedor principal del header */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Nav-bar principal */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.nav-logo img {
    height: 80px;
}

/* Título en el centro */
.nav-title {
    flex-grow: 1;
    text-align: center;
}

.nav-title img {
    height: 80px;
}

/* Menú de navegación */
.nav-menu ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-menu a {
    text-decoration: none;
    color: var(--color-crema);
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.5);
}

/* Botón hamburguesa (oculto en desktop) */
.nav-hamburg {
    display: none;
}

.menu-toggle {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-blanco);
    cursor: pointer;
}

/* Responsive: Modo móvil */
@media (max-width: 768px) {
    .nav-bar {
        position: relative;
    }

    /* Ocultar el menú principal en móviles */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 50vw; /* Ocupa solo la mitad izquierda de la pantalla */
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        text-align: center;
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        transform: translateX(-100%); /* Inicialmente fuera de la pantalla */
        transition: transform 0.4s ease-in-out; /* Animación de deslizamiento */
    }

    .nav-menu ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
    }

    .nav-menu li {
        list-style: none;
        padding: 10px;
        text-align: center;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3); /* Línea separadora */
    }

    /* Mostrar el menú cuando se active */
    .nav-menu.active {
        transform: translateX(0); /* Lo desliza hacia la pantalla */
    }

    /* Mostrar el botón hamburguesa */
    .nav-hamburg {
        display: block;
    }

}

/* Sección de bienvenida */
.welcome {
    text-align: center;
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.welcome h2 {
    font-size: 28px;
    color: var(--color-negro);
}

.welcome p {
    font-size: 18px;
    color: var(--color-texto);
}

/* Imagen a pantalla completa */
.full-width-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Sección de descripción de la pastelería */
.about {
    text-align: center;
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.about h2 {
    font-size: 26px;
    color: var(--color-negro);
}

.about p {
    font-size: 18px;
    color: var(--color-negro);
    line-height: 1.6;
}

/* FOOTER */

/* Mantiene el diseño original del footer */
footer {
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
    padding: 20px;
    text-align: center;
    width: 100%;
}

/* Contenedor general del footer */
.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Secciones del footer */
.footer-contact,
.footer-social,
.footer-links,
.footer-copyright {
    width: 100%;
    padding: 10px;
}

/* Alineación específica */
.footer-contact {
    text-align: center;
}

.footer-contact a {
    color: var(--color-celeste);
}

.footer-social a img {
    width: 35px;
    margin: 10px 8px;
}

.footer-links a img {
    width: 55px;
    margin: 0 12px;
}

/* Estilos específicos para el footer-dev */
.footer-dev {
    width: 100%;
    padding: 15px 0;
    text-align: center;
    margin: 0;
    position: relative; /* Se coloca justo debajo del footer */
    bottom: 0;
    left: 0;
}

.footer-dev p {
    margin: 0;
    font-size: 14px;
    color: var(--color-celeste);
}

/* Estilos para pantallas grandes */
@media (min-width: 768px) {
    .footer-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 20px;
        text-align: left;
        max-width: 950px;
    }

    .footer-contact {
        grid-column: 1 / 2;
        text-align: left;
    }

    .footer-social {
        grid-column: 2 / 3;
        text-align: center;
    }

    .footer-links {
        grid-column: 3 / 4;
        text-align: right;
    }

    .footer-copyright {
        grid-column: 1 / 4;
        text-align: center;
        padding-top: 10px;
    }
}

.mensaje-error {
    color: var(--color-rojo);
    font-size: 14px;
    margin-top: 5px;
}