@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Oswald:wght@400;500&family=Montserrat:wght@400;600;700&display=swap');

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

/* Barra de navegación*/

.navbar {
	background: #e53434;
	color: #fbfbfb;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
	font-family: 'Open Sans', sans-serif;
	height: 90px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: top 0.3s ease;
}

.telefono i {
	margin-right: 6px;
}

.logo img {
	height: 83px;
	object-fit: contain;
	margin-top: 6px;
	margin-left:50px;
}

.navbar nav {
	flex: 1;
	display: flex;
	justify-content: center;
	gap: 30px;
	max-width: 600px;
}

.navbar nav a {
	color: #fbfbfb;
	margin: 0 15px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	opacity: 0.85;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.navbar nav a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.telefono {
	background: #fbfbfb;
	color: #e53434;
	padding: 8px 20px;
	border-radius: 25px;
	font-weight: bold;
}

/* Pie de página */

.footer {
	background: #e53434;
	color: #ffffff;
	padding: 30px 30px 15px;
	font-family: 'Open Sans', sans-serif;
}

.footer-contenido {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-logo img {
	width: 400px;
	margin-bottom: 15px;
}

.copyright {
	font-size: 13px;
	opacity: 0.8;
}

.footer h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	margin-bottom: 15px;
	letter-spacing: 1px;
}

.footer-contacto p {
	margin-bottom: 8px;
	font-size: 14px;
}

.footer-contacto a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: 0.3s;
}

.footer-contacto a:hover {
	border-bottom: 1px solid #ffffff;
}

.footer-contacto i {
	margin-right: 8px;
	color: #ffffff;
	width: 18px;
	text-align: center;
}

.footer-servicios ul {
	list-style: none;
	padding: 0;
}

.footer-servicios li {
	margin-bottom: 10px;
}

.footer-servicios a {
	text-decoration: none;
	color: #ffffff;
	font-size: 14px;
	transition: 0.3s;
	position: relative;
}

.footer-servicios a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 1px;
	background: #ffffff;
	transition: 0.3s;
}

.footer-servicios a:hover::after {
	width: 100%;
}

/* Dropdown Blog */

.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-arrow {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #e53434;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    overflow: hidden;
    min-width: 150px;
    z-index: 999;
}

.dropdown-menu a {
    display: block;
    padding: 12px 18px;
    color: #e53434;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    margin: 0;
    opacity: 1;
}

.dropdown-menu a:hover {
    background: transparent;
    transform: none;
}

/* Responsive */

@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.1);
        border-radius: 0;
    }

    .dropdown-menu a {
        color: #ffffff;
        padding: 8px 18px;
    }

    .dropdown-menu a:hover {
        background: rgba(255,255,255,0.15);
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        height: auto;
        padding: 10px 20px;
        gap: 8px;
    }

    .navbar nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .navbar nav a {
        font-size: 13px;
        margin: 0;
    }

    .logo img {
        margin-left: 0;
        height: 60px;
    }

    .teléfono {
        font-size: 13px;
        padding: 6px 14px;
    }

    /* Footer */

    .footer-contenido {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-logo img {
        width: 100%;
        max-width: 260px;
    }

    .footer-servicios ul {
        padding: 0;
    }

    .footer-contacto i {
        display: none;
    }
}