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

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


        body {

            background: #f7f7f5;

            color: #111;

            font-family:
                "Inter",
                Arial,
                sans-serif;

            min-height: 100vh;
        }


		/* =====================================================
		   LOGO DE LA CABECERA
		===================================================== */

		.logo {
			display: inline-flex;

			align-items: center;

			gap: 14px;

			color: #111;

			text-decoration: none;
		}


		/* Texto */

		.logo-text {
			font-family:
				Arial,
				Helvetica,
				sans-serif;

			font-size: 1rem;

			font-weight: 600;

			letter-spacing: 2px;

			white-space: nowrap;
		}


		/* Retrato de Pasolini */

		.logo-icon {
			width: 34px;

			height: 34px;

			object-fit: cover;

			display: block;

			border-radius: 50%;
		}


        /* =========================================
           CABECERA
        ========================================= */

        header {

            width: 100%;

            padding: 35px 5vw;

            display: flex;

            justify-content: space-between;

            align-items: center;
			
			
			position: relative;
        }


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

        .logo {

            text-decoration: none;

            color: #111;

            font-size: 1rem;

            font-weight: 600;

            letter-spacing: 2px;

            text-transform: uppercase;
        }


        .logo span {

            font-weight: 300;

            color: #777;
        }


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

        .menu {

            display: flex;

            align-items: center;

            gap: 38px;
        }


        .menu a {

            position: relative;

            color: #555;

            text-decoration: none;

            font-size: 0.9rem;

            font-weight: 400;

            transition:
                color 0.3s ease;
        }


        .menu a:hover {

            color: #111;
        }


        .menu a.activo {

            color: #111;
        }


        .menu a.activo::after {

            content: "";

            position: absolute;

            left: 0;

            bottom: -8px;

            width: 18px;

            height: 1px;

            background: #111;
        }
		
		
		
		/* =========================================================
		   BOTÓN MENÚ MÓVIL
		   ========================================================= */

		.menu-toggle {
			display: none;

			width: 38px;
			height: 38px;

			padding: 7px 4px;

			border: none;
			background: transparent;

			cursor: pointer;

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

			gap: 5px;
		}

		.menu-toggle span {
			display: block;

			width: 25px;
			height: 2px;

			background: #111;

			transition:
				transform 0.3s ease,
				opacity 0.25s ease;
		}


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

        main {

            min-height: calc(100vh - 100px);
        }


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

		footer {
			padding: 35px 5vw;
			color: #888;
			font-size: 0.75rem;
			letter-spacing: 1px;
		}

		.footer-titulo {
			margin-bottom: 10px;
		}

		.footer-credito {
			color: #aaa;
			font-size: 0.68rem;
			letter-spacing: 0.5px;
		}

		.footer-credito strong {
			font-weight: 500;
			color: #777;
		}

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

       /* @media (max-width: 900px) {

            header {

                flex-direction: column;

                align-items: flex-start;

                gap: 25px;
            }


            .menu {

                flex-wrap: wrap;

                gap: 20px;
            }

        }


        @media (max-width: 600px) {

            header {

                padding: 25px;
            }


            .menu {

                gap: 16px;
            }


            .menu a {

                font-size: 0.82rem;
            }

        }*/
		
		
    
	/* =========================================================
	   MÓVIL — MENÚ HAMBURGUESA
	   ========================================================= */

	@media (max-width: 700px) {

		header {
			position: relative;
			z-index: 1000;

			padding: 25px;

			background: #f7f7f5;
		}


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

		.logo-text {
			font-size: 0.85rem;
			letter-spacing: 1.5px;
		}

		.logo-icon {
			width: 27px;
			height: 27px;
		}


		/* -----------------------------------------------------
		   BOTÓN HAMBURGUESA
		   ----------------------------------------------------- */

		.menu-toggle {
			display: flex;

			position: relative;
			z-index: 1100;

			width: 40px;
			height: 40px;

			padding: 7px 5px;

			border: none;
			background: transparent;

			cursor: pointer;

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

			gap: 5px;
		}

		.menu-toggle span {
			display: block;

			width: 25px;
			height: 2px;

			background: #111;

			transition:
				transform 0.3s ease,
				opacity 0.25s ease;
		}


		/* -----------------------------------------------------
		   MENÚ DESPLEGABLE
		   ----------------------------------------------------- */

		.menu {
			position: absolute;

			top: 100%;
			left: 0;
			right: 0;

			z-index: 10001;

			display: flex;
			flex-direction: column;
			align-items: stretch;

			gap: 0;

			/* Fondo totalmente opaco */
			background: #ffffff;

			/* Separación visual */
			border-top: 1px solid #ddd;
			border-bottom: 1px solid #ddd;

			/* Sombra */
			box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);

			/* Cerrado */
			max-height: 0;
			overflow: hidden;

			opacity: 0;

			transition:
				max-height 0.45s ease,
				opacity 0.25s ease;
		}


		/* -----------------------------------------------------
		   MENÚ ABIERTO
		   ----------------------------------------------------- */

		.menu.menu-abierto {
			max-height: 600px;

			opacity: 1;
		}


		/* -----------------------------------------------------
		   ENLACES
		   ----------------------------------------------------- */

		.menu a {
			display: block;

			width: 100%;

			padding: 16px 25px;

			color: #444;
			background: #ffffff;

			font-size: 0.95rem;
			text-decoration: none;

			border-bottom: 1px solid #e5e5e5;

			transition:
				color 0.2s ease,
				background 0.2s ease;
		}


		.menu a:hover {
			color: #111;
			background: #f7f7f5;
		}


		/* -----------------------------------------------------
		   ENLACE ACTIVO
		   ----------------------------------------------------- */

		.menu a.activo {
			color: #111;
		}

		.menu a.activo::after {
			left: 25px;
			bottom: 8px;

			width: 18px;
			height: 1px;

			background: #111;
		}


		/* -----------------------------------------------------
		   LOGOUT
		   ----------------------------------------------------- */

		.logout-form {
			width: 100%;

			margin: 0;
			padding: 0;

			background: #ffffff;

			border-bottom: 1px solid #e5e5e5;
		}

		.logout-link {
			display: block;

			width: 100%;

			padding: 16px 25px;

			text-align: left;

			color: #444;
			background: #ffffff;

			border: none;

			font-family: inherit;
			font-size: 0.95rem;

			cursor: pointer;
		}

		.logout-link:hover {
			background: #f7f7f5;
			color: #111;
		}


		/* -----------------------------------------------------
		   ANIMACIÓN DE LAS TRES BARRAS → X
		   ----------------------------------------------------- */

		.menu-toggle.menu-abierto span:nth-child(1) {
			transform: translateY(7px) rotate(45deg);
		}

		.menu-toggle.menu-abierto span:nth-child(2) {
			opacity: 0;
		}

		.menu-toggle.menu-abierto span:nth-child(3) {
			transform: translateY(-7px) rotate(-45deg);
		}
	}