/* ===== ESTILOS GENERALES ===== */
:root {
  --negro: #0A0A0A;
  --rojo: #C00000;
  --rojo-oscuro: #900000;
  --blanco: #FFFFFF;
  --gris-claro: #F5F5F5;
  --gris-medio: #333333;
}

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.6; color: var(--gris-medio);}
a {text-decoration: none; color: inherit;}
ul {list-style: none;}
.contenedor {width: 92%; max-width: 1200px; margin: 0 auto;}
.titulo-seccion {font-size: 2rem; text-align: center; margin-bottom: 2.5rem; color: var(--negro); position: relative;}
.titulo-seccion::after {content: ''; width: 80px; height: 4px; background: var(--rojo); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);}
.texto-centrado {text-align: center; max-width: 750px; margin: 0 auto 2rem;}

/* ===== BARRA DE CARGA CON LOGO ===== */
.barra-carga {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--negro); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.6s ease, visibility 0.6s ease;}
.barra-carga.ocultar {opacity: 0; visibility: hidden;}
.logo-carga img {max-width: 260px; margin-bottom: 2.5rem; animation: palpitar 1.2s ease-in-out infinite alternate;}
@keyframes palpitar {from {transform: scale(1);} to {transform: scale(1.08);}}
.barra-progreso {width: 300px; height: 6px; background: #222; border-radius: 3px; overflow: hidden;}
.barra-progreso .relleno {height: 100%; width: 0; background: var(--rojo); border-radius: 3px; animation: cargar 2.2s ease forwards;}
@keyframes cargar {0% {width: 0;} 100% {width: 100%;}}

/* ===== CABECERA Y MENÚ ===== */
.cabecera {background: var(--negro); padding: 1rem 0; position: sticky; top: 0; z-index: 99; box-shadow: 0 2px 10px rgba(0,0,0,.4);}
.cabecera .contenedor {display: flex; justify-content: space-between; align-items: center;}
.logo img {height: 60px;}
.menu ul {display: flex; gap: 1.6rem; color: var(--blanco); font-weight: 600; font-size: 0.95rem;}
.menu a:hover {color: var(--rojo); transition: .3s;}
.menu-movil {display: none; font-size: 2rem; color: var(--blanco); cursor: pointer;}

/* ===== BANNER PRINCIPAL ===== */
.banner {background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.85)), url('imagenes/fondo-banner.png') center/cover no-repeat; color: var(--blanco); padding: 6rem 0; text-align: center;}
.banner h1 {font-size: 3.2rem; margin-bottom: 0.5rem; color: var(--rojo);}
.subtitulo-banner {font-size: 1.4rem; margin-bottom: 1rem; color: #EEE;}
.descripcion-banner {max-width: 850px; margin: 0 auto 2rem; font-size: 1.05rem; line-height: 1.7;}
.botones {display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem;}
.btn {padding: 0.9rem 2.2rem; border-radius: 4px; font-weight: 700; transition: .3s; border: none; cursor: pointer; font-size: 1rem;}
.btn.rojo {background: var(--rojo); color: var(--blanco);}
.btn.rojo:hover {background: var(--rojo-oscuro); transform: translateY(-2px);}
.btn.transparente {background: transparent; color: var(--blanco); border: 2px solid var(--blanco);}
.btn.transparente:hover {background: var(--blanco); color: var(--negro);}

/* ===== SECCIONES ===== */
.seccion {padding: 4rem 0;}
.oscura {background: var(--gris-claro);}
.clara {background: var(--blanco);}
.dos-columnas {display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;}
.caja-datos {background: var(--negro); color: var(--blanco); padding: 2rem; border-radius: 8px;}
.caja-datos p {margin-bottom: 0.8rem;}

/* ===== SERVICIOS ===== */
.grid-servicios {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;}
.tarjeta {background: var(--blanco); border-left: 5px solid var(--rojo); padding: 1.5rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: .3s;}
.tarjeta:hover {transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.12);}
.tarjeta h3 {color: var(--negro); margin-bottom: 0.7rem;}

/* ===== SEGURIDAD BASC ===== */
.encabezado-con-logo {display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-bottom: 2rem; flex-wrap: wrap;}
.encabezado-con-logo .titulo-seccion {margin-bottom: 0;}
.encabezado-con-logo .titulo-seccion::after {left: 0; transform: none; bottom: -6px;}
.logo-basc {height: 60px;}
.caja-politica {background: var(--blanco); border-left: 5px solid var(--negro); padding: 1.8rem; border-radius: 6px; margin-bottom: 2rem;}
.lista-objetivos {display: grid; gap: 0.8rem;}
.lista-objetivos li {padding: 0.8rem 1rem; background: var(--blanco); border-radius: 4px; border-left: 4px solid var(--rojo);}
.estado-proceso {margin-top: 2rem; padding: 1.2rem; background: #FFF2F2; border: 2px solid var(--rojo); border-radius: 6px; text-align: center; font-size: 1.1rem; color: var(--rojo); font-weight: 700;}

/* ===== FLOTA ===== */
.galeria-flota {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0;}
.camion img {width: 100%; height: 220px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.15);}
.lista-fortalezas {max-width: 600px; margin: 0 auto; background: var(--blanco); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08);}
.lista-fortalezas h3 {text-align: center; margin-bottom: 1.2rem; color: var(--negro);}
.lista-fortalezas li {padding: 0.5rem 0; border-bottom: 1px dashed #DDD;}

/* ===== CONTACTO ===== */
.info-contacto {max-width: 650px; margin: 0 auto; background: var(--negro); color: var(--blanco); padding: 2.5rem; border-radius: 8px;}
.info-contacto p {margin-bottom: 1.2rem; font-size: 1.05rem;}

/* ===== PIE ===== */
footer {background: var(--negro); color: var(--blanco); text-align: center; padding: 2.5rem 1rem; margin-top: 1rem;}
.logo-pie {height: 50px; margin-bottom: 1rem;}

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  .menu ul {position: absolute; top: 100%; left: 0; right: 0; background: var(--negro); flex-direction: column; padding: 1rem 2rem; gap: 1rem; display: none; box-shadow: 0 10px 15px rgba(0,0,0,.3);}
  .menu ul.activo {display: flex;}
  .menu-movil {display: block;}
  .dos-columnas {grid-template-columns: 1fr;}
  .banner h1 {font-size: 2.2rem;}
  .barra-progreso {width: 240px;}
  .logo-carga img {max-width: 200px;}
}
/* ===== CONTACTO REDISEÑADO ===== */
.tarjeta-contacto {
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%);
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 
              0 2px 10px rgba(192, 0, 0, 0.08);
  border-top: 4px solid var(--rojo);
  position: relative;
  overflow: hidden;
}

.tarjeta-contacto::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(192, 0, 0, 0.06), transparent 70%);
  border-radius: 0 0 0 100%;
}

.item-contacto {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem;
  margin-bottom: 0.8rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, 0.7);
}

.item-contacto:hover {
  background: rgba(192, 0, 0, 0.04);
  border-left: 3px solid var(--rojo);
  transform: translateX(6px);
  box-shadow: 0 4px 15px rgba(192, 0, 0, 0.1);
}

.item-contacto .icono {
  font-size: 1.8rem;
  padding: 0.6rem;
  background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
  color: var(--blanco);
  border-radius: 8px;
  line-height: 1;
  transition: all 0.4s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(192, 0, 0, 0.25);
}

.item-contacto:hover .icono {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 6px 20px rgba(192, 0, 0, 0.35);
}

.item-contacto h4 {
  color: var(--negro);
  margin-bottom: 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}

.item-contacto p {
  color: var(--gris-medio);
  font-size: 1rem;
  line-height: 1.5;
}

/* Responsivo */
@media (max-width: 600px) {
  .tarjeta-contacto {
    padding: 1.5rem;
    margin: 0 1rem;
  }
  .item-contacto {
    flex-direction: column;
    text-align: center;
    gap: 0.6rem;
  }
  .item-contacto:hover {
    transform: translateY(-3px);
  }
}
/* ===== ESTILOS DE ENLACES Y BOTONES ===== */
.enlace-item {
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.item-contacto.boton-correo {
  cursor: pointer;
}

/* Mensaje de confirmación copiado */
.mensaje-confirmacion {
  max-width: 700px;
  margin: 1rem auto 0;
  padding: 0.9rem 1.5rem;
  background: #ECF9EC;
  border-left: 4px solid #2E7D32;
  color: #2E7D32;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
  pointer-events: none;
}

.mensaje-confirmacion.visible {
  opacity: 1;
  transform: translateY(0);
}