:root { 
  --primary:#0ea5e9; 
}


/* ============================================
   FIX TEMPORAL - MENÚ MÓVIL
   ============================================ */

/* Mostrar header móvil solo en pantallas pequeñas */
@media (max-width: 768px) {
  .mobile-header {
    display: block !important;
  }
  
  /* Ocultar header desktop en móvil */
  #siteHeader {
    display: none !important;
  }
}

/* Estilos del header móvil */
.mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.mobile-logo img {
  height: 2.5rem;
}

/* Botón hamburguesa */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transition: all 0.3s;
}

/* Menú móvil */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  z-index: 1001;
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
  transition: right 0.3s ease;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu a {
  display: block;
  color: white;
  padding: 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s;
}

.mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu .btn-cta,
.mobile-menu .btn-mobile {
  background: white;
  color: var(--primary);
  font-weight: 600;
  text-align: center;
  margin-top: 1rem;
}

/* Backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.mobile-backdrop.active {
  opacity: 1;
  visibility: visible;
}
/* ============================================
   ESTILOS PARA MENÚ MÓVIL
   ============================================ */

/* Asegurar que bar-actions se vea en mobile */
.mobile-menu .bar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estilos para los botones CTA en móvil */
.mobile-menu .btn-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.875rem 1.5rem;
  background: var(--primary);
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

.mobile-menu .btn-cta:hover,
.mobile-menu .btn-cta:active {
  background: #0284c7;
  transform: translateY(-2px);
}









/* ===== HERO ACTIONS: móvil perfecto (1 + 2), desktop normal ===== */

.hero-actions{
  margin-top: 1.25rem;
  display: grid;
  gap: 12px;
  max-width: 520px;   /* para que no se estire raro */
}

/* Base button */
.hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
  width: 100%;        /* CLAVE: nunca se corta */
}

/* Estilos */
.hero-btn--primary{
  background: #0ea5e9;
  color: #fff;
}
.hero-btn--primary:hover{ background: #0284c7; transform: translateY(-1px); }

.hero-btn--light{
  background: rgba(255,255,255,.92);
  color: #0b1220;
  border-color: rgba(255,255,255,.55);
}
.hero-btn--light:hover{ background:#fff; transform: translateY(-1px); }

.hero-btn--ghost{
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.hero-btn--ghost:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* SOLO MÓVIL: mostrar Acceder */
.hero-only-mobile{ display: inline-flex; }
@media (min-width: 768px){
  .hero-only-mobile{ display: none; }
}

/* ✅ MÓVIL (1 botón full + 2 botones en fila) */
@media (max-width: 767px){
  .hero-actions{
    grid-template-columns: 1fr 1fr;
  }
  .hero-actions .hero-btn--primary{
    grid-column: 1 / -1; /* el primero ocupa todo arriba */
  }
}

/* ✅ DESKTOP: que se vean en fila como antes */
@media (min-width: 768px){
  .hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: none;
  }
  .hero-btn{
    width: auto;
    padding: 0 18px;
  }
}












/* Si usas btn-mobile en lugar de bar-actions */
.btn-mobile {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.875rem 1.5rem;
  background: var(--primary);
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-top: 0.5rem;
}

.btn-mobile:first-of-type {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.375rem;
}

.btn-mobile:hover,
.btn-mobile:active {
  background: #0284c7;
  transform: translateY(-2px);
}
/* HERO */
/* Hero carousel */
/* Sección: texto arriba, carrusel debajo */
.hero{
  position: relative;
  z-index: 20;
  min-height: clamp(420px, 60vh, 620px);
}

/* Tarjeta oscura semitransparente para el texto */
.hero-card{
  border-radius: 16px;
  padding: 24px 24px 28px;
}

/* Carrusel como fondo pegado abajo */
.hero-carousel{
  position: absolute;
  inset: auto 0 0 0;      /* left:0; right:0; bottom:0; */
  height: 100%;
  overflow: hidden;
  background:#0b1220;     /* fallback */
  z-index: 0;
}
.hero-track{
  position:absolute; 
  inset:0;
  display:flex;
  transition: transform .7s ease;
  will-change: transform;
}
.hero-slide{ min-width:100%; height:100%; position:relative; }
.hero-slide img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}



/*Seccion Ingeniería & Mantenimiento */
/* halo sutil al hover sin recargar clases */
.item-hover {
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease;
}
.item-hover:hover {
  transform: scale(1.08);
}

/* Estilos seccion de Equipos y Máquinas */
/* Contenedor y overlay con giro 360° */
.brand-card { position: relative; perspective: 1000px; }
.brand-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  transform: rotateY(180deg) scale(.9);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .5s ease;
  pointer-events: none; /* evita capturar hover al entrar/salir */
}
.brand-card:hover .brand-overlay,
.brand-card:focus-within .brand-overlay{
  transform: rotateY(0deg) scale(1);
  opacity: 1;
}

/* Suaviza salida de la imagen al aparecer el overlay */
.brand-card > .aspect-\[4\/3\]{
  transition: filter .35s ease, transform .35s ease;
}
.brand-card:hover > .aspect-\[4\/3\]{
  filter: blur(2px) brightness(.8);
  transform: scale(1.03);
}

/* Click en las cars mobile */
/* Estado activo por toque */
.brand-card.active .brand-overlay {
  transform: rotateY(0deg) scale(1);
  opacity: 1;
}

.brand-card.active > .aspect-\[4\/3\] {
  filter: blur(2px) brightness(.8);
  transform: scale(1.03);
}

/* ============================================
   MOSTRAR MENÚ MÓVIL EN PANTALLAS PEQUEÑAS
   ============================================ */

/* Mostrar el header móvil SOLO en pantallas menores a 768px */
@media (max-width: 767px) {
  .mobile-header {
    display: block !important;
  }
  
  /* Ocultar el header desktop en móvil */
  #siteHeader,
  .nav-zone {
    display: none !important;
  }
  
  /* Asegurar que el hamburger se vea */
  .hamburger {
    display: flex !important;
  }
}

/* Ajustes adicionales para el menú móvil */
.mobile-menu {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  padding: 5rem 2rem 2rem !important;
}

.mobile-menu a {
  color: white !important;
}

.mobile-menu .bar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-menu .btn-cta,
.mobile-menu .btn-mobile {
  background: white !important;
  color: #0ea5e9 !important;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-align: center;
}

/* Proveedores de BPG Global */
/* FIX: en móvil el hero estaba cortando la 2da fila de botones */
@media (max-width: 767px){
  .hero{
    min-height: 590px;   /* sube/baja este número si quieres */
    height: auto !important;
    overflow: visible !important;
  }

  /* La capa oscura (overlay) también debe permitir crecer */
  .hero > div{
    min-height: 590px;
  }

  /* Deja aire abajo para que entren los 2 botones de abajo */
  .hero .container{
    padding-bottom: 28px !important;
  }
}

/* Fondo de agua animado (liviano) */
.waves-wrap{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.wave{
  position:absolute; left:0; width:200%; height:120px;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.06));
  animation:waveMove 18s linear infinite;
}
.wave--1{bottom:0;   opacity:.20; animation-duration:22s;}
.wave--2{bottom:55px;opacity:.14; animation-duration:28s;}
.wave--3{bottom:90px;opacity:.10; animation-duration:36s;}
@keyframes waveMove{from{transform:translateX(0)} to{transform:translateX(-50%)}}