/* RESET */
html {
scroll-behavior: smooth; /* Mejora 1: Desplazamiento suave para anclas */
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family: 'Poppins', sans-serif;
padding-top: 100px; /* Esto empuja el contenido hacia abajo para que no lo tape el header */
}
/* PALETA WIRA */
:root{
--azul-corporativo:#010F34;
--azul-tech:#0F66C5;
--turquesa:#30D8BF;
}
/* CONTENEDOR GLOBAL */
.contenedor{
max-width:1200px;
margin:auto;
width:100%;
}
/* HEADER FIJO */
.header {
background: var(--azul-corporativo) !important;
padding: 15px 8%;
border-bottom: 1px solid rgba(48, 216, 191, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
/* --- CAMBIOS PARA CABECERA FIJA --- */
position: fixed !important; /* Lo mantiene estático al scrollear */
top: 0 !important; /* Lo pega arriba */
left: 0 !important;
width: 100% !important; /* Ocupa todo el ancho */
z-index: 1000 !important; /* Asegura que flote sobre el contenido */
}
/* LOGO */
.logo img{
height:70px;
}
/* MENU */
.menu a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:500;
}
.menu a:hover{
color:var(--turquesa);
}
/* BOTON COTIZAR */
.btn-cotizar{
background:var(--azul-tech);
padding:10px 20px;
border-radius:6px;
}
.btn-cotizar:hover{
background:var(--turquesa);
color:#010F34;
}
/* HERO */
.hero{
position:relative;
height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
overflow:hidden;
}
/* VIDEO */
.video-fondo{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}
/* OSCURECER VIDEO */
.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(1,15,52,0.7);
z-index:-1;
}
/* CONTENIDO HERO */
.hero-contenido{
max-width:800px;
padding:20px;
}
.hero h1{
font-size:42px;
margin-bottom:15px;
}
.hero h2{
font-size:28px;
color:var(--turquesa);
margin-bottom:20px;
}
.hero p{
font-size:18px;
margin-bottom:30px;
}
/* BOTONES HERO */
.hero-botones a{
margin:10px;
text-decoration:none;
padding:12px 28px;
border-radius:6px;
font-weight:500;
}
/* BOTON PRINCIPAL */
.btn-principal{
background:var(--azul-tech);
color:white;
transition:0.3s;
}
.btn-principal:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
/* BOTON SECUNDARIO */
.btn-secundario{
border:2px solid var(--turquesa);
color:white;
}
.btn-secundario:hover{
background:var(--turquesa);
color:#010F34;
}
/* ANIMACIONES HERO */
.animacion{
opacity:0;
transform:translateY(40px);
animation:aparecer 1s forwards;
}
.titulo{animation-delay:0.3s;}
.slogan{animation-delay:0.7s;}
.descripcion{animation-delay:1.1s;}
.botones{animation-delay:1.5s;}
@keyframes aparecer{
to{
opacity:1;
transform:translateY(0);
}
}
/* SECCION SERVICIOS */
.servicios{
padding:100px 10%;
background:#f5f7fb;
text-align:center;
}
.titulo-seccion{
font-size:36px;
margin-bottom:10px;
color:var(--azul-corporativo);
text-align:center;
}
.descripcion-seccion{
max-width:700px;
margin:auto;
margin-bottom:60px;
color:#555;
text-align:center;
}
.contenedor-servicios{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}
.servicio-card{
background:white;
padding:40px 30px;
border-radius:12px;
text-align:center;
transition:0.4s;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.servicio-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.icono{
font-size:40px;
color:var(--azul-tech);
margin-bottom:20px;
}
.servicio-card h3{
margin-bottom:15px;
color:var(--azul-corporativo);
}
.servicio-card p{
font-size:14px;
color:#555;
line-height:1.6;
}
/* SECTORES */
.sectores{
padding:100px 10%;
background:white;
text-align:center;
}
.contenedor-sectores{
margin-top:60px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}
.sector{
background:#f5f7fb;
padding:40px;
border-radius:12px;
transition:0.4s;
}
.sector:hover{
background:var(--azul-tech);
color:white;
transform:translateY(-8px);
}
.sector i{
font-size:40px;
margin-bottom:15px;
color:var(--turquesa);
}
.sector:hover i{
color:white;
}
.sector h3{
font-size:18px;
}
/* PROYECTOS */
.proyectos{
padding:100px 10%;
background:#f5f7fb;
text-align:center;
}
.contenedor-proyectos{
margin-top:60px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
align-items: stretch; /* Mejora 2: Asegura que todas las tarjetas de la fila midan lo mismo */
}
.proyecto-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;
display: flex; /* Mejora 3: Flex para control de altura interna */
flex-direction: column;
height: 100%;
}
.proyecto-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.proyecto-card img{
width:100%;
height:200px;
object-fit:cover;
}
.proyecto-info{
padding:25px;
display: flex; /* Mejora 4: Permite que el contenido interno empuje el estado al fondo */
flex-direction: column;
flex-grow: 1;
}
.proyecto-info h3{
color:var(--azul-corporativo);
margin-bottom:10px;
}
.proyecto-info p{
font-size:14px;
color:#555;
line-height:1.6;
}
/* --- SECCIÓN MEJORADA DE ESTADOS (Corregido para Servidor) --- */
.proyecto-status {
margin-top: auto !important; /* Mejora 5: Empuja el estado siempre a la base de la tarjeta */
padding-top: 15px !important;
border-top: 1px solid #eee !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
text-align: left;
}
.proyecto-status.culminado {
color: #27ae60 !important; /* Verde profesional */
}
.proyecto-status.ejecucion {
color: #e67e22 !important; /* Naranja profesional */
}
/* ------------------------------------------------------------- */
/* VENTAJAS */
.ventajas{
padding:100px 10%;
background:white;
text-align:center;
}
.contenedor-ventajas{
margin-top:60px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
}
.ventaja{
text-align:center;
padding:30px;
transition:0.3s;
}
.ventaja:hover{
transform:translateY(-8px);
}
.ventaja i{
font-size:45px;
color:var(--turquesa);
margin-bottom:20px;
}
.ventaja h3{
color:var(--azul-corporativo);
margin-bottom:10px;
}
.ventaja p{
font-size:14px;
color:#555;
line-height:1.6;
}
/* FOOTER */
.footer{
background:var(--azul-corporativo);
color:white;
padding:60px 10% 20px;
}
.footer-contenedor{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
margin-bottom:40px;
}
.footer-logo{
width:120px;
margin-bottom:20px;
}
.footer-col h3{
margin-bottom:20px;
color:var(--turquesa);
}
.footer-col p{
font-size:14px;
line-height:1.6;
color:#ddd;
}
.footer-col ul{
list-style:none;
}
.footer-col ul li{
margin-bottom:10px;
font-size:14px;
}
.footer-col ul li a{
color:#ddd;
text-decoration:none;
transition:0.3s;
}
.footer-col ul li a:hover{
color:var(--turquesa);
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.2);
padding-top:20px;
text-align:center;
font-size:14px;
color:#bbb;
}
/* BOTONES FLOTANTES */
.botones-flotantes{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:row;
gap:10px;
z-index:9999;
}
.boton-flotante{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:18px;
text-decoration:none;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition:0.3s;
}
.boton-flotante:hover{
transform:scale(1.1);
}
.whatsapp{
background:#25D366;
}
.contacto{
background:var(--azul-tech);
}
/* FORMULARIO CONTACTO */
.formulario-contacto{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}
.formulario-contacto input,
.formulario-contacto textarea{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:6px;
font-family:'Poppins',sans-serif;
font-size:14px;
}
.formulario-contacto textarea{
height:140px;
resize:none;
}
.formulario-contacto button{
align-self:center;
width:auto;
padding:12px 30px;
border:none;
cursor:pointer;
font-size:16px;
}
/* ====================================================== */
/* AJUSTES RESPONSIVE UNIFICADOS (Solo Menú Hamburguesa) */
/* ====================================================== */
.menu-toggle {
display: none;
font-size: 1.8rem;
cursor: pointer;
color: var(--turquesa);
}
@media (max-width: 768px) {
/* 1. HEADER */
.header {
padding: 15px 5%;
justify-content: space-between;
}
/* 2. MENU HAMBURGUESA */
.menu-toggle {
display: block;
z-index: 1001;
}
.menu {
position: fixed;
top: 0;
right: -100%; /* Escondido */
background: var(--azul-corporativo);
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 25px;
transition: 0.4s ease-in-out;
z-index: 1000;
}
.menu.active {
right: 0; /* Se muestra al hacer click */
}
.menu a {
margin: 0;
font-size: 1.5rem;
width: 100%;
text-align: center;
}
/* 3. DISEÑO DE TARJETAS EN UNA COLUMNA */
.contenedor-servicios,
.contenedor-sectores,
.contenedor-proyectos,
.contenedor-ventajas,
.footer-contenedor {
display: flex;
flex-direction: column;
align-items: center;
}
.servicio-card, .proyecto-card, .sector, .ventaja, .footer-col {
width: 100%;
margin-bottom: 20px;
}
.titulo { font-size: 1.8rem; }
.slogan { font-size: 1.2rem; }
.footer-contenedor { text-align: center; }
}
/* Ajuste general imágenes */
img, video {
max-width: 100%;
height: auto;
}
/* ====================================================== */
/* AJUSTE FINAL PARA PANTALLAS MÓVILES (WIRA PERÚ) */
/* ====================================================== */
@media (max-width: 768px) {
.menu {
/* ... tus otras reglas ... */
position: fixed;
top: 0; /* Asegura que el menú negro empiece desde arriba incluso con scroll */
height: 100vh;
}
/* Evita que el texto se salga de la pantalla */
.hero {
padding: 0 20px !important;
}
/* Reduce el título para que quepa la palabra "Telecomunicaciones" */
.hero h1 {
font-size: 26px !important;
line-height: 1.2;
word-wrap: break-word;
}
/* Reduce el slogan */
.hero h2 {
font-size: 18px !important;
margin-top: 10px;
}
/* Arregla los botones encimados (Imagen 1) */
.hero-botones {
display: flex !important;
flex-direction: column !important; /* Los pone en lista, no uno al lado del otro */
align-items: center !important;
gap: 15px !important; /* Separa los botones para que no choquen */
margin-top: 20px;
}
/* Ajuste de los botones para que no se deformen */
.hero-botones a {
width: 100% !important;
max-width: 250px; /* Tamaño ideal para celular */
text-align: center;
margin: 0 !important;
}
}
/* SECCIÓN DESCARGA BROCHURE */
.descarga-brochure {
background-color: #f4f7f9; /* Un gris muy suave para diferenciar la sección */
padding: 60px 20px;
text-align: center;
border-top: 1px solid #e1e8ed;
}
.contenedor-descarga {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.texto-descarga {
flex: 1;
min-width: 300px;
text-align: left;
}
.texto-descarga h3 {
color: var(--azul-corporativo);
font-size: 24px;
margin-bottom: 10px;
}
.texto-descarga p {
color: #555;
font-size: 16px;
}
/* BOTÓN ESPECIAL DE DESCARGA */
.btn-descargar {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #e74c3c; /* Rojo elegante para asociar con PDF */
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.btn-descargar:hover {
background-color: #c0392b;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}
.btn-descargar i {
font-size: 20px;
}
/* Ajuste para móviles */
@media (max-width: 768px) {
.contenedor-descarga {
flex-direction: column;
text-align: center;
}
.texto-descarga {
text-align: center;
}
.btn-descargar {
width: 100%;
justify-content: center;
}
}
/* DISEÑO DEL FORMULARIO TRABAJA CON NOSOTROS */
.contenedor-formulario-cv {
max-width: 800px;
margin: 40px auto;
background: #f8f9fa;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
text-align: left;
}
.formulario-cv .campo {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.formulario-cv label {
font-weight: 600;
color: var(--azul-corporativo);
font-size: 14px;
}
.fila-input {
display: flex;
gap: 20px;
}
.fila-input .campo {
flex: 1;
}
.formulario-cv input, .formulario-cv select {
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
outline: none;
}
/* Área de archivo personalizada */
.input-file-custom {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: white;
border: 2px dashed var(--turquesa);
border-radius: 8px;
}
.btn-archivo {
background: var(--azul-tech);
color: white;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.btn-archivo:hover {
background: var(--turquesa);
color: var(--azul-corporativo);
}
#cv-file { display: none; }
@media (max-width: 768px) {
.fila-input { flex-direction: column; gap: 0; }
}
/* AJUSTE PARA EL BOTÓN DE ENVIAR CV */
.formulario-cv .btn-principal {
display: block;
width: 250px; /* Ancho fijo para PC */
max-width: 100%; /* Evita que se salga de la pantalla en móviles */
margin: 30px auto 0; /* Centrado horizontal */
padding: 14px 40px;
background: var(--azul-tech);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(1, 15, 52, 0.2);
box-sizing: border-box; /* IMPORTANTE: Para que el padding no lo ensanche más de la cuenta */
}
.formulario-cv .btn-principal:hover {
background: var(--turquesa);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(48, 216, 191, 0.3);
}
/* AJUSTE ESPECÍFICO PARA CELULARES */
@media (max-width: 480px) {
.formulario-cv .btn-principal {
width: 100% !important; /* En móvil ocupa todo el ancho, igual que el textarea */
min-width: unset; /* Quitamos el mínimo para que no desborde */
padding: 14px 20px; /* Reducimos un poco el padding lateral */
}
}
/* Ajuste para el nombre del archivo en celulares */
@media (max-width: 480px) {
.input-file-custom {
display: flex;
flex-direction: column; /* Pone el texto debajo del botón */
align-items: center; /* Centra ambos elementos */
gap: 10px; /* Da espacio entre el botón y el texto */
text-align: center;
}
#file-name {
margin-left: 0 !important; /* Quita márgenes laterales */
font-size: 14px;
display: block;
width: 100%;
}
.btn-archivo {
width: 100%; /* El botón ocupa todo el ancho en celular para que sea más fácil de tocar */
justify-content: center;
}
}
/* ====================================================== */
/* CORRECCIÓN FINAL INTRANET (PARA NO DESCUADRAR EL HEADER) */
/* ====================================================== */
/* Contenedor del Dropdown */
.dropdown {
position: relative; /* CLAVE: Para que el submenú se alinee con este botón */
display: inline-block;
}
.dropdown-toggle {
font-weight: 600;
color: var(--turquesa) !important;
cursor: pointer;
}
/* El menú que se despliega (Asistencia) */
.dropdown-content {
display: none;
position: absolute; /* CLAVE: Flota encima del contenido sin empujar el header */
top: 100%; /* Justo debajo de Intranet */
left: 0;
background-color: #010f34;
min-width: 180px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
z-index: 9999;
border-radius: 4px;
margin-top: 5px;
padding: 5px 0;
}
/* Enlaces dentro del submenú */
.dropdown-content a {
color: white !important; /* Asegura que el texto sea blanco */
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 14px;
margin-left: 0 !important; /* Quita el margen lateral heredado del menú principal */
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dropdown-content a:hover {
background-color: var(--turquesa);
color: #010f34 !important;
}
/* Mostrar al pasar el mouse (PC) */
.dropdown:hover .dropdown-content {
display: block;
}
/* Ajuste para Celulares (Dentro del menú hamburguesa) */
@media (max-width: 768px) {
.dropdown {
width: 100%;
text-align: center;
}
.dropdown-content {
position: static; /* Aquí sí empuja el resto del menú negro hacia abajo */
display: none;
width: 100%;
box-shadow: none;
background: rgba(255,255,255,0.05);
}
.dropdown.active .dropdown-content {
display: block;
}
}
/* DISEÑO MODERNO PARA EL PANEL DE INTRANET */
#login-section, #marcado-section {
background: #ffffff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
max-width: 450px !important;
margin: 40px auto;
border: 1px solid #f0f0f0;
}
#login-section p, #marcado-section label {
font-family: 'Poppins', sans-serif;
color: #010f34;
font-weight: 600;
margin-bottom: 15px;
display: block;
}
/* Estilo para los inputs y selects */
#login-section input,
#marcado-section select {
width: 100%;
padding: 12px 15px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
box-sizing: border-box;
transition: border-color 0.3s;
}
#login-section input:focus,
#marcado-section select:focus {
outline: none;
border-color: var(--turquesa);
}
/* Botones con estilo Wira Perú */
.btn-principal {
width: 100%;
padding: 14px;
border: none;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
#login-section .btn-principal {
background: var(--azul-tech);
color: white;
}
#login-section .btn-principal:hover {
background: var(--turquesa);
transform: translateY(-2px);
}
/* Colores específicos para Entrada y Salida */
.btn-entrada {
background: #28a745;
color: white;
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}
.btn-salida {
background: #dc3545;
color: white;
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}
.btn-entrada:hover, .btn-salida:hover {
opacity: 0.9;
transform: scale(1.02);
}
/* CORRECCIÓN DEFINITIVA DE ALINEACIÓN HEADER */
.menu {
display: flex !important;
align-items: center !important; /* Alinea verticalmente al centro todos los botones */
justify-content: flex-end;
gap: 15px; /* Espacio uniforme entre botones */
}
/* Quita el margen izquierdo que heredan los enlaces dentro del dropdown */
.menu .dropdown-content a {
margin-left: 0 !important;
width: 100%;
}
/* Asegura que el botón "Intranet" no tenga márgenes extras que lo muevan */
.dropdown {
display: flex;
align-items: center;
margin-left: 25px; /* Mismo margen que tienen tus otros botones .menu a */
}
.dropdown-toggle {
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
}
/* ====================================================== */
/* CORRECCIÓN: EVITAR QUE EL MENÚ DESAPAREZCA AL BAJAR */
/* ====================================================== */
.dropdown {
position: relative;
display: flex;
align-items: center;
/* Esto asegura que el área sensible al mouse sea continua */
padding-bottom: 15px;
margin-bottom: -15px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #010f34;
min-width: 200px;
/* Ajustamos la posición para que pegue justo al borde del texto */
top: 80%;
left: 0;
box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
z-index: 9999;
border-radius: 4px;
padding: 5px 0;
/* Evita saltos bruscos */
transition: opacity 0.2s ease;
}
/* Creamos un "puente" invisible para que el mouse nunca deje de tocar el menú */
.dropdown::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 20px;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Alineación horizontal para que no se vea descuadrado en el Index */
.menu {
display: flex !important;
align-items: center !important;
gap: 10px;
}
.menu a, .dropdown-toggle {
margin-left: 20px !important;
display: flex;
align-items: center;
height: 100%;
}
.dropdown-content a {
margin-left: 0 !important; /* Quitamos el margen del index para los hijos */
color: white !important;
width: 100%;
gap: 10px;
}
/* ====================================================== */
/* AJUSTE FINAL: MENÚ HAMBURGUESA Y SUBMENÚ */
/* ====================================================== */
@media (max-width: 768px) {
/* Asegura que el contenedor del menú permita scroll si hay muchos items */
.menu {
justify-content: flex-start !important; /* Alinea items arriba */
padding-top: 80px !important;
overflow-y: auto;
}
.menu a, .dropdown-toggle {
font-size: 1.2rem !important; /* Tamaño más cómodo para celular */
width: 100%;
padding: 15px 0;
margin: 0 !important;
justify-content: center;
}
/* Estilo del submenú desplegado en móvil */
.dropdown-content {
position: static !important; /* Empuja el contenido hacia abajo */
background-color: rgba(255, 255, 255, 0.05) !important;
box-shadow: none !important;
width: 100%;
}
.dropdown-content a {
padding: 15px 0 !important;
justify-content: center !important;
gap: 15px !important; /* Espacio entre reloj y texto */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 1.1rem !important;
}
/* Icono del reloj en el submenú */
.dropdown-content a i {
margin-right: 5px; /* Refuerzo del espacio */
color: var(--turquesa);
}
}
/* ====================================================== */
/* CORRECCIÓN: ALINEACIÓN SUPERIOR EN MÓVIL */
/* ====================================================== */
@media (max-width: 768px) {
.menu {
/* Cambiamos el centrado por alineación superior */
justify-content: flex-start !important;
padding-top: 100px !important; /* Espacio para que no choque con el logo/X */
gap: 15px !important; /* Espacio más compacto entre links */
overflow-y: auto !important; /* Por si el menú es largo */
}
.menu a, .dropdown-toggle {
font-size: 1.2rem !important; /* Texto un poco más pequeño para que quepa todo */
padding: 10px 20px !important;
text-align: left !important; /* Alineación a la izquierda se ve más limpia */
width: 100%;
display: flex;
align-items: center;
}
/* Submenú de Intranet en móvil */
.dropdown-content {
position: static !important; /* Para que empuje el contenido hacia abajo */
background-color: rgba(255, 255, 255, 0.05) !important;
width: 100% !important;
padding-left: 20px !important; /* Indentación para que se note que es submenú */
}
.dropdown-content a {
font-size: 1.1rem !important;
gap: 12px !important; /* Espacio entre el reloj y el texto */
}
}
/* ====================================================== */
/* CORRECCIÓN FINAL: ESPACIADO Y DESPLIEGUE INTRANET */
/* ====================================================== */
@media (max-width: 768px) {
/* 1. Ajuste de separación entre menús */
.menu {
justify-content: flex-start !important;
padding-top: 80px !important; /* Espacio para la 'X' de cerrar */
gap: 5px !important; /* Reduce la separación drásticamente */
}
.menu a, .dropdown-toggle {
padding: 10px 25px !important; /* Menos relleno vertical */
margin: 0 !important;
width: 100%;
text-align: left !important;
display: flex;
align-items: center;
}
/* 2. El submenú ahora se despliega hacia abajo */
.dropdown {
width: 100%;
display: block; /* Ocupa toda la línea */
}
.dropdown-content {
position: static !important; /* CLAVE: Empuja el contenido hacia abajo */
display: none; /* Se controla con la clase .active desde JS */
width: 100% !important;
background-color: rgba(255, 255, 255, 0.05) !important;
box-shadow: none !important;
padding-left: 40px !important; /* Indenta el submenú para jerarquía */
}
/* Clase que activaremos con un toque en el celular */
.dropdown.active .dropdown-content {
display: block !important;
}
.dropdown-content a {
padding: 8px 0 !important;
font-size: 1rem !important;
}
}
/* Espaciado para el formulario */
.seccion-formulario {
padding: 80px 20px; /* Mucho más espacio arriba y abajo */
background-color: #ffffff;
}
/* Fondo ligeramente diferente para el mapa para crear contraste */
.seccion-mapa-fondo {
padding: 80px 20px;
background-color: #f9fbff; /* Un azul casi blanco muy sutil */
border-top: 1px solid #e1e8f5; /* Línea divisoria muy fina */
}
.titulo-seccion {
margin-bottom: 10px;
font-size: 2rem;
color: #010f34; /* Usando el azul oscuro de Wira Perú */
}
.subtitulo-mapa {
margin-bottom: 40px;
color: #666;
font-size: 1.1rem;
}
/* Efecto de sombra y bordes para el mapa */
.contenedor-mapa {
max-width: 1100px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(1, 15, 52, 0.1); /* Sombra suave con el azul de la marca */
border: 4px solid #ffffff;
}
.seccion-mapa-fondo {
padding: 60px 20px;
text-align: center; /* Esto centra el título y el subtítulo */
background-color: #f9fbff;
}
.titulo-seccion {
font-size: 2.2rem;
color: #010f34; /* Azul oscuro corporativo */
margin-bottom: 10px;
font-weight: 600;
}
.subtitulo-mapa {
font-size: 1.1rem;
color: #555;
max-width: 600px;
margin: 0 auto 40px; /* 'margin: 0 auto' centra bloques de texto con max-width */
line-height: 1.6;
}
.divisor-sutil {
width: 50px;
height: 4px;
background-color: #0146b1; /* Azul de acento */
margin: 0 auto 20px;
border-radius: 10px;
}