body{background:#f8fafc}.card-img-top{object-fit:cover;height:200px}
/* Topbar */
.topbar { background:#1f2937; }

/* Franja logo */
.bg-header { background:#f1f1f0; }

.bg-header { background:#1d1f24; }


.logo-main { height:98px; max-width:100%; }


.logo-main {
    height: 100px;                 /* no cambias el alto real */
    transform: scale(1.18);       /* lo amplía un 35 % visualmente */
    transform-origin: left center; /* mantiene la alineación a la izquierda */

}

@media (max-width: 768px){ .logo-main { height:72px; } }
/* Opcional: asegura altura visual estable y centrado vertical */
.header-logo { border-bottom:1px solid #e9ecef; }
.header-logo .container {
  min-height: 96px;                 /* ajusta si quieres afinar */
  display: flex;
  align-items: center;
}



/* MOVIL!!! */
/* === MÓVIL (≤576px) — spacing afinado === */
@media (max-width: 576px){

    /* Fila: más margen a la izquierda y separación interna */
    .header-logo .container{
        min-height: 56px !important;
        padding-left: 16px !important;   /* ↑ más aire para el logo */
        padding-right: 12px !important;
    }

    /* Logo: tamaño y corrección de alineado de línea */
    .header-logo .logo-main{
        height: 50px !important;         /* ajustable 40–46 */
        max-height: 50px !important;
        width: auto !important;
        display: block !important;        /* evita hueco de línea */
        transform: none !important;
        padding-left: 5px;
    }

    /* Contenedor de iconos: empuja a la derecha y deja aire con el logo */
    .header-actions-mobile{
        margin-left: 10px !important;     /* << clave: se separa del logo/texto */
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;             /* separación entre botones */
        flex-shrink: 0 !important;        /* no se encogen */
    }

    /* Botones: cuadrados y centrados, sin padding interno */
    .header-actions-mobile .btn-icon{
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        background: rgba(255,255,255,.06) !important;
        color: #fff !important;
    }

    .header-actions-mobile .btn-icon i{ line-height: 1 !important; }

    /* Si tienes un texto/slogan junto al logo y molesta en móvil, ocúltalo */
    .branding, .brand-slogan, .header-subtitle { display: none !important; }

    /* RRSS ocultas en esta franja móvil */
    .social-icons-header{ display: none !important; }
}


























/* Menú */


.navbar-main { background:#fff; border-bottom:1px solid #e9ecef; }
.navbar-main .nav-link { 
  border-radius:9999px; padding:.5rem .85rem; font-weight:500; 
}
/*.navbar-main .nav-link:hover { background:rgba(0,0,0,.04); }
.navbar-main .nav-link.active { background:rgba(13,110,253,.12); color:#0d6efd; }*/

.navbar-main { background:#fff; }
.navbar-main .nav-link { color:#374151; font-weight:600; }
.navbar-main .nav-link.pill { padding:.55rem .9rem; border-radius:.6rem; }
.navbar-main .nav-link.pill:hover { background:#eef2f7; color:#111827; }
.navbar-main .nav-link.pill.active { background:#dbeafe; color:#111827; }




/* Hero carrusel 
.hero-slide{height:56vh;min-height:420px}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45))}*/
.hero-caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-caption h1{font-weight:800}


:root{ --ga-red:#e10600; }

/* Tamaño y posicionamiento del hero sin afectar a otros */
.hero-slide{ position:relative; height:56vh; min-height:360px; }
.hero-slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  z-index:1;
}
/* El caption ocupa el alto del slide y centra verticalmente */
.hero-caption{
  position:absolute; inset:0; display:flex; align-items:center; z-index:2;
}
/* Limita el ancho del texto y evita “mover” el layout */
.hero-caption .container{ max-width: 980px; }
.hero-eyebrow{ font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.9); }
.hero-title{ font-weight:800; font-size:clamp(2rem,3.8vw,3.25rem); text-shadow:0 2px 10px rgba(0,0,0,.35); }
.text-ga-red{ color:var(--ga-red); }
.hero-lead{ font-size:clamp(1rem,1.2vw,1.125rem); color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(0,0,0,.25); }
.btn-outline-light{ border-width:2px; font-weight:600; }
.btn-outline-light:hover{ background:#fff; color:#000; }



/* Iconos sociales en la franja del logo (derecha e “inferiores”) */
.social-icons-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-left: auto;
    margin-right: 28px;     /* separación del borde derecho */
    margin-top: 60px;       /* BAJA los iconos unos píxeles */
    transform: translateY(3px); /* ajuste fino adicional */
}

.social-icons-header a{
    color:#fff;               /* contraste con tu bg-header #1d1f24 */
    font-size:1.28rem;        /* tamaño equilibrado vs logo escalado */
    line-height:1;            /* caja ajustada, ayuda a “bajar” el icono */
    display:inline-flex;
    transition:color .2s ease, transform .2s ease;
}

.social-icons-header a:hover{
    color:#facc15;            /* dorado suave en hover */
    transform:translateY(-1px);
}

/* Responsive: reducir un poco o esconder si hace falta */
@media (max-width: 768px){
    .social-icons-header{
        margin-bottom:4px;
        gap:12px;
    }
    .social-icons-header a{ font-size:1.1rem; }
}


/* MENU PARA MOVIL!!!! */
@media (max-width: 576px){
    .ga-navbar{ background:#fff !important; border-bottom:1px solid #e9ecef !important; padding:.35rem 0 !important; }
    .ga-navbar .container{ position:relative; display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; }
    .ga-logo{ height:44px; width:auto; display:block; }
    .ga-spacer{ width:48px; height:44px; }               /* centra el logo */



    /* ===== Header persistente con logo visible ===== */
    .ga-header{
        position: sticky;
        top: 0;
        z-index: 1060;                   /* por encima del resto */
        background:#fff;
        transition: all .25s ease;
    }

    /* Compacta el header al hacer scroll */
    .ga-header.scrolled{
        box-shadow: 0 2px 12px rgba(0,0,0,.08);
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .ga-header.scrolled .logo-main,
    .ga-header.scrolled .ga-logo{
        height: 32px !important;         /* logo más pequeño en scroll */
        transition: height .25s ease;
    }


    /* Topbar compacta y legible */
    .topbar{
        padding:.25rem 0 !important;
        background:#0f172a !important;
        color:#e5e7eb !important;
        border-bottom:1px solid #111827 !important;
    }
    .topbar a{
        color:#e5e7eb !important;
        text-decoration:none;
        font-size:14px !important;
        line-height:1.2;
    }
    /* icono/enlace WhatsApp visible */
    .topbar .wa-link{
        display:inline-flex !important;
        align-items:center;
        gap:.35rem;
    }

    /* Franja logo: altura contenida */
    .header-logo .container{ min-height:96px !important; }


    /* Logo más grande y nítido en móvil */
    .logo-main, .navbar-brand img, .branding img{
        height:100% !important;
        max-height:100% !important;
        width:auto !important;
        transform:none !important;
    }

    /* Oculta redes en el header móvil si hubiera restos */
    .header-social, .social-icons-header, .rrss-header{ display:none !important; }

    /* WhatsApp FAB */
    .whatsapp-fab{
        position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%;
        background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.15);
        z-index:1080;
    }
    .whatsapp-fab i{ font-size:1.6rem; }

    /* Reduce el bloque total del menú */
    #nav{
        padding-top: 0.25rem !important;       /* antes mayor */
        padding-bottom: 0.25rem !important;
    }

    /***********************************************/
    #nav{
        /* altura máxima: alto de la pantalla – alto del header – margen */
        max-height: calc(100dvh - var(--ga-header-height, 120px) - 12px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;   /* scroll suave iOS */
        overscroll-behavior: contain;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,.14);
    }

    /* Opcional: que el contenido detrás NO se mueva mientras está abierto */
    body.menu-open{
        overflow: hidden;
        touch-action: none;
    }
    /***********************************************/


    /* Cada enlace del menú */
    #nav .navbar-nav .nav-item{
        margin: 0 !important;
    }
    #nav .navbar-nav .nav-link{
        padding: .25rem .55rem !important;        /* --> HAZ EL MENU MENOS ALTO --> más compacto (por defecto .75–1rem) */
        font-size: 1rem !important;
        line-height: 1.2;
    }

    /* Elimina espacio extra entre el menú y los contactos */
    #nav hr{
        margin: .5rem 0 !important;
    }

    /* Contactos al final más pegados */
    .contact-links{
        gap: 2px !important;              /* menos espacio vertical entre enlaces */
        margin-top: 4px !important;       /* ajusta si quieres más o menos separación del menú */
    }

    .contact-links a{
        display: flex;
        align-items: center;
        gap: 0px;                         /* espacio entre icono y texto */
        padding: 1px 0 !important;        /* reduce el alto de línea */
        font-size: .95rem;
        line-height: 1.2 !important;
    }

    /* Opcional: afinar iconos */
    .contact-links i{
        font-size: 1rem;
        line-height: 1;
    }

    .nav-contact a{
        padding:0rem 0;
        font-weight:500;
        color:#212529;
        margin-left: 10px;
    }
    .nav-contact a:hover{ color:#0d6efd; }
    .nav-contact i{ font-size:1.1rem; }

}

/* === Menú móvil: scroll interno del desplegable (#nav) === */
@media (max-width:576px){
    /* Alto máx. = alto pantalla – alto del header fijo – margen de respiro */
    #nav,
    .navbar-collapse.show,
    .navbar-collapse.collapsing{
        max-height: calc(100dvh - var(--ga-header-height, 120px) - 12px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;   /* iOS */
        overscroll-behavior: contain;        /* no arrastra el fondo */
        background: #fff;                    /* por si llega a tocar fondo */
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,.14);
    }

    /* Evita que el backdrop intercepte el scroll del menú */
    .nav-backdrop{ z-index:1040; }
    #nav{ position: relative; z-index:1052; }
}


@media (max-width: 576px){
    /* Fondo clicable a pantalla completa cuando el menú está abierto */
    .nav-backdrop{
        position: fixed; inset: 0; z-index: 1040;
        /*background: rgba(0,0,0,.35);*/
        background: transparent !important;   /* sin oscuridad */
        /*backdrop-filter: saturate(140%) blur(2px);*/
        backdrop-filter: none !important; /* quita el blur */
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .nav-backdrop.show{ opacity: 1; pointer-events: auto; }

    /* Botón hamburguesa con tap-target cómodo */
    /* 2) Botón hamburguesa más pequeño y discreto */
    .navbar-main .navbar-toggler{
        padding: .28rem .5rem !important; /* área táctil suficiente (>=44px alto total con la barra) */
        border-radius: .5rem;              /* esquinas un poco menos redondas */
        transform: scale(.92);             /* reduce el icono ligeramente */
    }
    .navbar-main .navbar-toggler .navbar-toggler-icon{
        width: 1.15rem;                    /* tamaño del “menú” */
        height: 1.15rem;
    }

    /* 3) Equilibrar márgenes alrededor del botón */
    .navbar-main .container > .navbar-toggler{
        margin-right: .25rem;              /* acércalo al borde si lo ves separado */
    }

    /* 4) Si el logo se ve demasiado grande frente a la barra, bájalo un pelín */
    .navbar-main .navbar-brand img,
    .navbar-main .logo-main{
        height: 36px !important;           /* estaba en ~40–44; ajusta a gusto */
    }

}

/* ===== Header fijo (logo + menú) ===== */
.site-header{
    position: fixed;               /* Fijamos el conjunto */
    top: 0; left: 0; right: 0;
    z-index: 1065;
    background: #fff;              /* fondo sólido para tapar blur/backdrop */
    box-shadow: none;
}

/* Columna del logo (tu franja actual) */
.header-logo .container{
    min-height: 96px;              /* ya lo usas en tu CSS */
    display: flex; align-items: center;
}

/* Menú: SIN position fixed/sticky aquí (lo hereda del wrapper) */
.navbar-main{
    position: static !important;   /* evitamos doble fijación */
    border-bottom: 1px solid #e9ecef;
}

@media (max-width:576px){
    .site-header.scrolled{
        box-shadow: 0 2px 12px rgba(0,0,0,.08);
    }
    .site-header.scrolled .header-logo .container{
        min-height: 84px;             /* ajusta si quieres */
    }
    .site-header.scrolled .logo-main{
        height: 90px;                  /* ajusta si quieres */
    }
}

/* ESCRITORIO: NO cambiar altura ni logo en scroll */
@media (min-width:577px){
    .site-header.scrolled{
        box-shadow: none;              /* o deja una sombra leve si te gusta */
    }
    .site-header .header-logo .container{
        min-height: 96px;              /* tu altura normal de la franja de logo */
    }
    .site-header .logo-main{
        height: 98px;                  /* tamaño del logo en desktop */
        transform: none;               /* por si hubiera restos */
    }
}


/* FOOTER ! */
/* ===== Barra de contacto inferior (solo móvil) ===== */
@media (max-width:576px){
    .contact-bar{
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050;                     /* justo debajo del WhatsApp (que suele ser 1080) */
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 8px rgba(0,0,0,.05);
        padding: .5rem .75rem;
        font-size: .95rem;
    }

    .contact-bar a{
        display: flex;
        align-items: center;
        gap: .4rem;
        color: #111;
        text-decoration: none;
        font-weight: 500;
    }

    .contact-bar i{
        font-size: 1rem;
        color: #0d6efd; /* azul corporativo; cámbialo si prefieres gris (#6b7280) */
    }

    /* Deja espacio para que no tape el final del contenido */
    body{ padding-bottom: 58px; }  /* aprox. altura de la barra */
}