@charset "utf-8";
/* CSS Document */
/* Logo del hero: fondo semitransparente y más grande */
.hero-logo {
  background-color: rgba(255, 255, 255, 0.30); /* 30% de blanco */
  backdrop-filter: blur(6px);                   /* efecto vidrio, opcional */
  -webkit-backdrop-filter: blur(6px);
  height: 12rem;
}

/* Imagen del logo más grande en el hero */
.hero-logo img {
  height: 100%;
  width: auto;
  transform: scale(1.35);      /* agranda sin romper el layout */
  transform-origin: center;
}

/* En móvil, que no se salga */
@media (max-width: 640px) {
  .hero-logo img {
    transform: scale(1.2);
  }
}

header.site-header.is-scrolled #mobile-menu-open i {
  color: #1f2937 !important;
}

/* ===== MENÚ MÓVIL ===== */

/* Contenedor: cerrado por defecto, no captura clics */
.mobile-menu {
  pointer-events: none;
}

/* Overlay oculto */
.mobile-menu .mobile-menu-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Panel fuera de pantalla */
.mobile-menu .mobile-menu-panel {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  background-color: #ffffff !important;
}

/* Estado abierto */
.mobile-menu.is-open {
  pointer-events: auto;
}

.mobile-menu.is-open .mobile-menu-overlay {
  opacity: 1;
}

.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
  background-color: #ffffff !important;
}

.mobile-menu-panel,
.mobile-menu-panel * {
  background-color: #ffffff !important;
}

/* Evitar scroll del body cuando el menú está abierto */
body.menu-open {
  overflow: hidden;
}

/* Asegurar que el header NO herede el fondo al panel */
header.site-header.is-scrolled .mobile-menu-panel {
  background-color: #ffffff !important;
}

/* Asegurar que los textos del panel siempre sean oscuros, incluso con is-scrolled */
header.site-header.is-scrolled .mobile-menu-panel a,
header.site-header.is-scrolled .mobile-menu-panel i,
header.site-header.is-scrolled .mobile-menu-panel span,
header.site-header.is-scrolled .mobile-menu-panel div {
  color: inherit;
}

header.site-header.is-scrolled .mobile-menu-panel .mobile-link {
  color: #1f2937 !important;
}

header.site-header.is-scrolled .mobile-menu-panel .mobile-link:hover {
  background-color: #f3f4f6;
}
/* Evitar scroll del body cuando el menú está abierto */
body.menu-open {
  overflow: hidden;
}

/* Header: estado base (transparente, texto claro) */
header.site-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

/* Header con scroll: fondo blanco sólido, texto oscuro */
header.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

/* Enlaces del menú: color oscuro cuando está scrolled */
header.site-header.is-scrolled a,
header.site-header.is-scrolled i,
header.site-header.is-scrolled .menu-link,
header.site-header.is-scrolled .phone-link {
  color: #1f2937 !important; /* gris muy oscuro */
}

/* Hover sigue funcionando */
header.site-header.is-scrolled a:hover {
  color: #d97706 !important; /* tu color primary-500 aprox */
}

/* Botón "Cotiza ahora" cuando está scrolled: mantener fondo primario */
header.site-header.is-scrolled .btn-cta {
  color: #ffffff !important;
}

/* Logo con fondo blanco en el header cuando NO hay scroll: mantenerlo */
header.site-header .logo-box {
  transition: background-color 0.35s ease, border-color 0.35s ease;
}


/* Estado inicial: oculto y desplazado hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* Cuando entra en pantalla, se muestra */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación para el hero (fade-up) */
@keyframes fadeUp { 
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.9s ease-out forwards;
}

/* Respetar preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .animate-fade-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

header.site-header.is-scrolled a[aria-current="page"] {
  color: #d97706 !important;
}