@charset "utf-8";
/*------------------------------------------------------------------
[Custom Stylesheet]

Project: Persuade
Version: 1.8
Last change: 15 November 2025
Primary use: Persuade Bilbao  
-------------------------------------------------------------------*/


/*------------------------------------------------------------------


/* ==============================
   Logo
   ============================== */

.nav-logo-wrap .logo img {
    width: 175px !important;      /* tamaño exacto del logo */
    height: auto !important;
    max-height: none !important;  /* elimina límite heredado */
}

/* Aumenta la altura del nav para no recortar el logo */
:root {
    --menu-bar-height: 130.1px !important;
    --menu-bar-height-scrolled: 120.1px !important;
}

@media only screen and (max-width: 767px) {
    
    /* 1. Reducción del tamaño del logo (175px -> 129.5px) */
    .nav-logo-wrap .logo img {
        width: 129.5px !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 2. Reducción de las variables de altura del NAV (26% menos) */
    :root {
        /* Altura Normal: 130.1px -> 96.3px */
        --menu-bar-height: 96.3px !important;
        /* Altura en Scroll: 120.1px -> 88.9px */
        --menu-bar-height-scrolled: 88.9px !important;
    }
}

/* ==============================
   Portada
   ============================== */

.elegante {
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

/* Más específico: aplica los estilos al logo dentro del h1 */
.hs-title-7 .logo-header {
    max-width: 750px; /* Prueba con un tamaño menor */
    height: auto;
}

/* --- Ajustes para móviles --- */
@media (max-width: 768px) {
    .elegante {
        font-size: 60%;
    }

    /* Aseguramos que esta regla se imponga */
.hs-title-7 .logo-header {
        max-width: 250px; /* Aquí se aplica el ancho deseado para móviles */
    }
}

/* Escritorio: Aplicamos el desplazamiento de 300px que pidió el cliente */
.home-section h2 {
    display: inline-block;
    /* La línea base de 300px (desktop) */
    transform: translateX(300px); 
}

/* Móvil: Anulamos y ponemos un desplazamiento sutil para evitar que se salga de pantalla */
@media (max-width: 768px) {
    .home-section h2 {
        /* Desplazamiento adecuado para móviles */
        transform: translateX(0px); 
    }
}

/* ==============================
   NAV custom siempre transparente
   ============================== */

/* NAV custom siempre transparente */
.main-nav.custom {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* Texto blanco por defecto (hero oscuro) → aplica a todos */
.main-nav.custom a {
  color: #fff !important;
  transition: color .3s ease;
}

/* ----- Desktop: cambiar a negro solo en escritorio ----- */
@media (min-width: 992px) {
  .main-nav.custom.is-on-light a {
    color: #000 !important;
  }
}

/* ==============================
   NAV White
   ============================== */

/* Altura por defecto (Escritorio > 767px) */
.main-nav-spacer {
    /* El valor de --menu-bar-height es 130.1px en escritorio */
    height: var(--menu-bar-height); 
    visibility: hidden; 
    pointer-events: none;
    transition: height 0.3s ease-in-out; 
}

/* 1. Ocultar el spacer cuando la navegación NO es fija.
   Esto es crucial para que el contenido suba cuando la nav está en position:relative */
.main-nav:not(.stick-fixed) + .main-nav-spacer {
    height: 0 !important;
}

/* 2. Estilos para la navegación Fija (al subir el scroll) */
.main-nav.stick-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Usa la variable de altura "scrolled" */
    height: var(--menu-bar-height-scrolled); 
    /* El color de fondo y la sombra son esenciales para una barra fija */
    background-color: #ffffff; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

/* Estilos para ocultar la barra cuando vas bajando y el script QUITA 'stick-fixed' */
.main-nav:not(.stick-fixed) {
    transform: translateY(-100%); 
}


@media only screen and (max-width: 767px) {
    .main-nav-spacer {
        /* El valor de --menu-bar-height es 96.3px en móvil */
        height: var(--menu-bar-height) !important; 
    }
}

/* ==============================
   Mobile + Tablet nav (hasta 1024px):
   - Fondo gris menú desplegado
   - Hamburguesa blanca en .custom
   - Hamburguesa negra cuando .custom.is-on-light (sobre .section-light)
   ============================== */

@media only screen and (max-width: 1024px) {

  /* 1. inner-nav: fondo gris claro y texto negro en móvil/tablet */
  .main-nav .inner-nav {
    background: #f3f3f3 !important;
  }

  .main-nav .inner-nav > ul {
    background: #f3f3f3 !important;
  }

  .main-nav .inner-nav a {
    color: #111 !important;
  }

  /* 2. Hamburguesa en main-nav "normal" (no custom): siempre negra */
  .main-nav:not(.custom) .mobile-nav .mobile-nav-icon,
  .main-nav:not(.custom) .mobile-nav .mobile-nav-icon::before,
  .main-nav:not(.custom) .mobile-nav .mobile-nav-icon::after {
    background: #111 !important;
  }

  /* 3. Hamburguesa en .main-nav.custom:
        - Por defecto: blanca
        - Con .is-on-light (cuando pasa sobre .section-light): negra
  */

  /* Por defecto: blanca */
  .main-nav.custom .mobile-nav .mobile-nav-icon,
  .main-nav.custom .mobile-nav .mobile-nav-icon::before,
  .main-nav.custom .mobile-nav .mobile-nav-icon::after {
    background: #fff !important;
  }

  /* Cuando está sobre sección clara: negra */
  .main-nav.custom.is-on-light .mobile-nav .mobile-nav-icon,
  .main-nav.custom.is-on-light .mobile-nav .mobile-nav-icon::before,
  .main-nav.custom.is-on-light .mobile-nav .mobile-nav-icon::after {
    background: #111 !important;
  }

  /* 4. Estado abierto (.active): solo una línea visible */
  .main-nav .mobile-nav.active .mobile-nav-icon::before,
  .main-nav .mobile-nav.active .mobile-nav-icon::after {
    opacity: 0 !important;
  }
}

/* ==============================
   Fuentes
   ============================== */

:root{
    --font-global: 'Inter', sans-serif; /* Fuente principal: Limpia y legible */
    --font-alt: 'Plus Jakarta Sans', sans-serif; /* Fuente alternativa/titulares: Moderna y audaz */
}

/* Custom CSS: Reducir tamaño del H1 de la cabecera (solo #home) */
#home .hs-title-2 {
    /* Opción 1: Usar un tamaño de fuente absoluto o viewport (vw/vh) más pequeño */
    font-size: 4.5vw; 
    /* (Ajusta '8.5vw' al tamaño que mejor se adapte a tu diseño) */
    
    /* O Opción 2: Reducir el tamaño predefinido por la clase .hs-title-2 en un 15% */
    /* font-size: 85%; */
    
    /* Es posible que necesites usar !important si la regla predeterminada es muy específica: */
    /* font-size: 8.5vw !important; */
}

/* Recomendación: Asegurar el tamaño en móviles si es necesario */
@media (max-width: 767.98px) {
    #home .hs-title-2 {
        font-size: 14vw; /* Un tamaño más compacto para pantallas pequeñas */
    }
}

/* ==============================
   Contacto
   ============================== */

/* Asegura que ambas columnas tengan igual altura */
.row > [class*="col-"].d-flex {
  display: flex;
}

/* Hace que la imagen ocupe todo el alto sin deformarse */
.object-fit-cover {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
}

/* Opcional: en pantallas pequeñas, que no recorte raro */
@media (max-width: 991.98px) {
  .object-fit-cover {
    height: auto;
  }
}