:root {
--bg:#0d0f14;
--card:#121520;
--text:#e6e8ef;
--muted:#a3a7b3;
--primary:hsl(240, 33%, 99%);
--accent:#ffffff;
--ring: rgba(255, 255, 255, 0.35);
--color-resaltado: rgba(255, 255, 255, 0.2);
}
*{box-sizing:border-box}
html, body {
margin: 0;
padding: 0;
color: var(--text);
font-family: Montserrat, system-ui, -apple-system, sans-serif;
background: url("img/imagen_fondo.png") repeat center center fixed;
background-size: cover;
background-color: #0d0f14;
overflow-x: hidden;
}
img{max-width:100%;display:block;border-radius:12px}
a{color:var(--text);text-decoration:none}
.container {
max-width: 1100px;
margin: auto;
padding: 0 25px; /* Margen lateral en PC */
}
.section{padding:80px 0}
.section-title{font-family:"Bebas Neue", sans-serif;letter-spacing:.5px;font-size:42px;margin:0 0 32px}
/* CABECERA FIJA (PC Y MÓVIL) */
.site-header {
position: fixed; /* Esto lo deja anclado a la pantalla, no a la web */
top: 0;
left: 0;
width: 100%;
/* Ponemos un fondo oscuro sólido para que se vea siempre sobre el contenido */
background: #0d0f14 !important;
z-index: 99999; /* Valor altísimo para que nada pase por encima del menú */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
height: 70px; /* Altura fija para controlarlo mejor */
display: flex;
align-items: center;
}
/* Como ahora el menú flota (fixed), el resto de la web se subirá debajo.
Añadimos un margen al cuerpo para que el inicio de la web no quede tapado por el menú */
body {
padding-top: 70px;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between; /* Esto empuja cada cosa a un extremo */
padding: 0 24px; /* Un poco de aire a los lados */
width: 100%;
max-width: 1200px; /* Para que en pantallas gigantes no se separe kilómetros */
margin: 0 auto;
}.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.logo{width:36px;height:36px;object-fit:contain}
.nav nav{display:flex;align-items:center;gap:18px}
.nav a{opacity:.9; transition: opacity 0.2s;}
.nav a:hover{opacity:1}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid transparent;transition:.2s;font-weight:600}
.btn-primary{background:linear-gradient(90deg, var(--primary), var(--accent));color:#0b0b0f;box-shadow:0 0 0 6px var(--ring)}
.btn-primary:hover{transform:translateY(-1px)}
/* HERO */
.hero { padding: 24px 24px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-image { order: -1; margin-bottom: 20px; }
.hero-image img { max-width: 950px; width: 100%; height: auto; border-radius: 16px; margin: 0 auto; }
.hero h1 { font-family: "Bebas Neue", sans-serif; font-size: 55px; margin: 0 auto 12px; line-height: 1.0; }
.hero p { display: block; color: var(--muted); margin: 0 auto 28px; font-size: 18px; font-weight: 500; max-width: 90%; }
.accent { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
/* TARJETAS */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:linear-gradient(180deg, var(--card), #0e111a);border:1px solid #1a1f2b;padding:18px;border-radius:16px}
.card h3{margin:0 0 8px;font-size:20px}
.servicio-lista{margin:12px 0 0 18px;color:var(--muted);font-size:14px}
.servicio-lista li{margin-bottom:6px}
/* ==========================================================================
NUEVA SECCIÓN DE PRODUCTOS (MATRIZ Y CLICABLE)
========================================================================== */
/* --- PRODUCTOS MATRIZ OPTIMIZADOS (MÁS PEQUEÑOS) --- */
/* Forzamos 2 columnas exactas */
.grid.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px;
width: 100%;
padding: 0 10px; /* Un poco de aire a los lados */
box-sizing: border-box;
}
/* Aseguramos que el producto no se desborde */
.product {
width: 100%;
min-height: 160px;
overflow: visible !important; /* Vital para que el popup se vea */
}
.product {
background: #2a2d37 !important;
border: 1px solid #3f4451;
border-radius: 12px; /* Bordes más finos */
padding: 12px; /* Reducido de 20px a 12px para que quepa todo */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
min-height: 180px; /* Altura mínima controlada */
}
/* El "INFO +" más pequeño */
.product::after {
content: "INFO +";
position: absolute;
top: 8px;
right: 8px;
font-size: 8px;
color: #a3a7b3;
opacity: 0.6;
}
.product:hover, .product.active {
background: #3a3f4d !important;
border-color: #ffffff !important;
transform: translateY(-3px);
}
/* Textos más pequeños para que no empujen la caja */
.product h3 {
font-size: 14px; /* Reducido */
margin: 5px 0 2px;
line-height: 1.2;
}
.product p {
font-size: 11px; /* Reducido */
color: #a3a7b3;
margin-bottom: 8px;
}
/* Imágenes más pequeñas */
.product-img {
width: 120px;
height: 120px;
object-fit: contain;
margin-top: auto;
}
/* Ajuste Popup para que no tape todo el móvil */
.product-popup {
position: absolute;
bottom: 105%;
left: 50%;
transform: translateX(-50%) translateY(0px) scale(0.9);
width: 260px;
padding: 15px;
background: #121520;
border: 1px solid #ffffff;
border-radius: 12px;
font-size: 12px; /* Texto del popup más legible */
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
z-index: 100;
color: #e6e8ef;
text-align: left;
}
.product:hover .product-popup,
.product.active .product-popup {
opacity: 1;
pointer-events: auto;
/* Mantenemos el centrado pero a escala real */
transform: translate(-50%, 50%) scale(1);
}
/* --- AJUSTE MÓVIL (2 COLUMNAS) --- */
@media (max-width: 768px) {
/* Forzamos que el contenedor del producto no corte nada */
.product {
overflow: visible !important;
position: relative;
}
.product-popup {
/* 1. Lo pegamos al borde izquierdo del producto */
left: 0 !important;
right: auto !important;
/* 2. IMPORTANTE: En lugar de un ancho fijo, le damos un ancho basado en la pantalla */
/* Esto hará que el popup se estire hacia la derecha pero no pueda ser más ancho que el móvil */
width: 85vw !important;
max-width: 280px !important;
/* 3. Quitamos el transform de centrado que nos está rompiendo el invento */
transform: translateY(10px) scale(0.9) !important;
/* 4. Lo subimos de capa al máximo */
z-index: 999999 !important;
/* Posición vertical */
bottom: 105% !important;
top: auto !important;
position: absolute !important;
}
/* Si el producto es el de la DERECHA de la fila, movemos el popup a la izquierda */
/* Este selector detecta automáticamente la segunda columna en tu grid de 2 */
.product:nth-child(2n) .product-popup {
left: auto !important;
right: 0 !important;
}
/* Estado cuando se activa */
.product:hover .product-popup,
.product.active .product-popup {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
visibility: visible !important;
}
}
/* EQUIPO Y CONTACTO */
.team{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))}
.person{background:linear-gradient(180deg, var(--card), #0e111a);border:1px solid #1a1f2b;border-radius:16px;padding:16px}
.contact-grid{display: grid;
/* Cambia el repeat(auto-fit...) por esto para que sea más estable */
grid-template-columns: 1fr 1fr;
gap: 25px;}
.contact-grid iframe{width:100%;min-height:300px;border:0;border-radius:12px}
.contact-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.contact-card{display:flex;flex-direction:column;align-items:center;min-width:160px;padding:20px;border-radius:18px;background:linear-gradient(90deg, var(--primary), var(--accent));color:#0b0b0f;font-weight:700}
/* ICONOS */
.contact-icon{
width:32px; height:32px; background:#0b0b0f;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
margin-bottom: 8px;
}
.icon-wa{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); }
.icon-ig{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); }
.icon-gm { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: -30px; /* Sube las fotos un poco para acercarlas a 'Ubicación' */
margin-bottom: 30px; /* Espacio limpio antes de la siguiente sección */
}
.photo-grid img {
width: 100%;
height: 400px; /* En PC las ponemos bien grandes */
object-fit: cover;
border-radius: 16px;
}
/* RESPONSIVE FINAL */
@media (max-width: 768px) {
/* 1. Cabecera flexible */
.site-header {
height: auto !important;
position: fixed !important;
padding: 8px 0;
}
/* 2. Contenedor principal del menú */
.nav {
flex-direction: column !important;
gap: 6px;
align-items: center;
justify-content: center;
padding: 0 10px !important; /* Menos padding para ganar espacio */
}
/* 3. Logo y Nombre (Fila Superior) */
.brand {
display: flex;
align-items: center;
gap: 6px;
}
.brand span {
font-size: 13px !important; /* Un pelín más pequeño para iPhone SE */
white-space: nowrap;
}
.logo {
width: 20px !important;
height: 20px !important;
}
/* 4. Enlaces y Botón (Fila Inferior) */
.nav nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap; /* CLAVE: Si no cabe, baja a la siguiente línea en vez de cortarse */
gap: 8px; /* Espacio reducido entre palabras */
justify-content: center;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 8px;
}
.nav nav a {
font-size: 10px; /* Tamaño optimizado para pantallas de 320px */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
}
/* 5. El botón de contacto (Más compacto) */
.nav nav .btn-primary {
padding: 4px 8px !important;
font-size: 9px !important;
box-shadow: none;
margin-left: 2px;
}
/* 6. Ajuste del cuerpo para que no tape el contenido */
body {
padding-top: 90px !important;
}
/* Ajuste de fotos de ubicación en móvil */
.photo-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.photo-grid img {
height: 180px !important;
object-fit: cover;
}
}
/* Ajuste extra específico para pantallas EXTREMADAMENTE pequeñas (como el iPhone SE) */
@media (max-width: 340px) {
.nav nav {
gap: 5px; /* Pegamos un poco más los enlaces si el móvil es diminuto */
}
.nav nav a {
font-size: 9px;
}
}
.nav nav a {
font-size: 12px;
}
/* Popup relativo al producto para que deslice con él */
.product-popup {
/* 1. Lo fijamos a la pantalla, no al producto */
position: fixed;
/* 2. Lo centramos perfectamente en el medio de la pantalla */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9); /* Centrado absoluto */
/* 3. Le damos un ancho que quepa siempre */
width: 90vw;
max-width: 320px;
/* 4. Lo ponemos por encima de TODO */
z-index: 10000;
/* 5. Estética */
bottom: auto;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.site-footer{padding:28px 0;border-top:1px solid #1a1f2b;color:var(--muted);font-size:14px;text-align:center}
.contact-grid .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (max-width: 768px) {
body {
padding-left: 12px;
padding-right: 12px;
}
.container {
padding: 0;
}
}
.product {
position: relative;
z-index: 1;
}
.product:hover,
.product.active {
z-index: 9999;
}
.product-popup {
position: absolute;
z-index: 10000;
}
@media (max-width: 768px) {
.contact-grid {
/* Forzamos que pasen a ser una sola columna vertical */
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.contact-grid iframe {
/* Le damos una altura fija para que no "flote" */
height: 300px !important;
width: 100% !important;
/* Esto evita que se superponga con lo de abajo */
position: relative !important;
margin-bottom: 10px;
}
.photo-grid {
/* Añadimos un margen superior extra para alejar las fotos del mapa */
margin-top: 40px !important;
}
}
@media (max-width: 768px) {
.section {
padding-top: 60px; /* Un espacio más equilibrado para móviles */
}
}
@media (max-width: 340px) {
.section {
padding-top: 60px; /* Un espacio más equilibrado para móviles */
padding-bottom: 0px;
}
}