/* =========================================================
   responsive.css — overrides para mejorar el responsive
   (colócalo después de styles.css)
   Breakpoints usados: 1280 / 1100 / 992 / 880 / 768 / 600 / 560 / 420
   ========================================================= */

/* Utilidades fluidas */
:root{ --pad-section: clamp(28px, 6vw, 72px); }
section{ padding-block: var(--pad-section); }
img{ max-width:100%; height:auto; }

/* ==================== >=1280 ==================== */

/* ==================== <=1100 ==================== */

/* ==================== <=992 (tablet) ==================== */
@media (max-width:992px){


  /* HERO: tarjeta más compacta y un poco más centrada */
  .slog{
    width:min(94vw, 480px);
    left:6%;
    padding:18px;
  }
  .slog h1{ font-size: clamp(26px, 5vw, 46px); }

  /* ABOUT: 1 columna */
  #about .about-wrap{
    grid-template-columns: 1fr;
    height:auto;
    padding-inline: clamp(14px,4vw,32px);
  }
  #about .about-left{ grid-column:auto; grid-row:auto; min-height: 360px; }
  #about .about-card{ grid-column:auto; grid-row:auto; margin-top:0; height:auto; }
  #about .about-stats{ grid-column:auto; grid-row:auto; margin-top:8px; }

  /* SERVICES: menos altura mínima y textos más cómodos */
  .services-steps .svc{ min-height:auto; padding:18px 12px 28px; }
  .services-steps h3{ font-size: clamp(22px, 3.2vw, 28px); }
  .services-steps .svc-icon--xl{ width:140px; height:140px; font-size:40px; }
  .services-steps .svc-copy p{ font-size: clamp(15px, 1.9vw, 17px); }

  /* CAROUSEL servicios: relación 4:3 y flechas más chicas */
  .svc-slide{ aspect-ratio: 4 / 3; }
  .svc-nav{ width:40px; height:40px; }
}

/* ==================== <=880 (tablet vertical) ==================== */
@media (max-width:880px){
  /* Contacto 2→1 columnas (tu CSS ya lo hace, reforzamos paddings) */
  .contact-wrap{ gap:22px; }
  .contact-card{ gap:12px 14px; }
}

/* ==================== <=768 ==================== */
@media (max-width:768px){
  /* Títulos: subrayado más corto */
  .section-title{ --underline-w: clamp(120px, 28vw, 220px); }

  /* HERO */
  .slog{ left:4%; }
  .slog p{ font-size:17px; }

  /* Termómetro en testimonials: más pequeño/alto */
  #testimonials .decor-thermo{
    width: clamp(320px, 56vw, 560px);
    transform: translate(-50%, -90px);
    margin-bottom: -180px;
  }

  /* Tarjetas del carrusel de testimonios más anchas */
  .ts-wrap{ padding-inline:24px; }
  .ts-card{ flex-basis:88% !important; max-width:88% !important; }
  .ts-nav{ width:38px; height:38px; }
}



/* ==================== <=560 (móvil común) ==================== */
@media (max-width:560px){
  /* Menú: botones compactos */
 

  /* HERO 100% centrado */
  .slog{
    left:50%;
    transform: translate(-50%, -50%);
    width:min(92vw, 420px);
    text-align:center;
  }
  .slog h1{ text-align:center; }
  .slog h1::after{ margin-inline:auto; }
  .slog .call-to-action a{ font-size:18px; padding:10px 18px; }

  /* About */
  #about .about-left{ min-height:260px; }

  /* Testimonials (todavía más compacto) */
  #testimonials .decor-thermo{
    width: clamp(240px, 62vw, 440px);
    transform: translate(-50%, -60px);
    margin-bottom: -120px;
  }
  .ts-wrap{ padding-inline:14px; }
  .ts-card{ flex-basis:92% !important; max-width:92% !important; }

  /* Contacto */
  .contact{
  background-image: url("../images/fondo_2.png");
  background-image: cover;
  

}
  .contact-card{ grid-template-columns: 1fr !important; }
  .btn{ width:100%; justify-content:center; }

  /* Footer: 2→1 columnas */
  .footer-wrap{ grid-template-columns: 1fr; gap:18px; }
  .footer-brand img{ width:120px; }
  
}

/* ==================== <=420 (muy pequeño) ==================== */
@media (max-width:420px){
  .slog{ width:92vw; padding:14px; }
  .slog h1{ font-size:26px; }
  .services-steps h3{ font-size:20px; }
  .about-stats{ gap:10px; }
  .about-stats .stat{ padding:16px 10px; }
}

/* ===== GoTop más pequeño en móvil ===== */
.go-top{ width:46px; height:46px; }
@media (max-width:560px){
  .go-top{ width:38px; height:38px; right:16px; bottom:16px; }
}

/* ===== Suaviza scroll en iOS para carruseles ===== */
.ts-list{ -webkit-overflow-scrolling: touch; }


/* Footer centrado en versión móvil */
@media (max-width: 640px){
  .footer-wrap{
    grid-template-columns: 1fr;   /* 1 columna */
    gap: 22px;
    justify-items: center;        /* centra los bloques */
    text-align: center;           /* centra textos */
  }

  .footer-brand img{ margin: 0 auto 10px; }

  .footer-nav h4,
  .footer-contact h4,
  .footer-social h4{
    margin-top: 6px;
    text-align: center;
  }

  /* Listas centradas */
  .footer-nav ul,
  .footer-contact ul{
    display: grid;
    gap: 10px;
    justify-items: center;        /* centra cada elemento de la lista */
  }

  /* Items de contacto: icono + texto centrados en línea */
  .footer-contact li{
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .footer-contact li i{ margin-right: 0; }

  /* Redes: en fila y centradas */
  .footer-social .socials{
    flex-direction: row;          /* antes era columna */
    justify-content: center;
    gap: 14px;
  }

  .footer-bottom{ text-align: center; }
}


/* ===== Navbar móvil: sin hamburguesa y 5 ítems en una fila ===== */
@media (max-width: 640px){

  /* quita hamburguesa y muestra el menú siempre */
  header .btn.btn-navbar.btn-navbar_{ display:none !important; }
  #menu.nav-collapse_{ display:block !important; }

  /* limpia márgenes que empujan/ensanchan */
  .navbar{ margin-top: 0 !important; }
  .menu_pp{
    position: relative;
    width: 100% !important;
    left: 0; right: 0;
  }

  /* barra en una fila, compacta */
  .navbar .nav{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;   /* reparte para que entren */
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
  }

  /* enlaces más pequeños y con menos padding */
  .navbar .nav > li > a{
    font-size: clamp(12px, 3.4vw, 15px);
    padding: 8px 10px;
    border-radius: 10px 16px;
    box-shadow: 0 10px 10px rgba(255,255,255,.15) inset, 0 1px 4px rgba(4,2,2,.15);
  }

  /* oculta los puntitos separadores para ganar espacio */
  .navbar .nav > li > span{ display:none; }

  /* logo del centro más pequeño y alineado */
  .navbar .nav > li:nth-child(5){ line-height: 1; }
  .navbar .nav > li:nth-child(5) img{
    width: 48px;       /* ajusta si lo quieres un poco mayor/menor */
    padding-top: 0;
    transform: none;
  }

  /* por si algún elemento provoca scroll horizontal */
  html, body{ overflow-x: hidden; }
  img{ max-width:100%; height:auto; }



    .hero{

  background-image: url(../images/home2.jpg);
  background-size: cover;
}
}


/* 2-col y 3-col sólo cuando hay espacio real */
@media (min-width: 720px){
  #testimonials .ts-card{ flex-basis: 48%; max-width: 48%; }
}
@media (min-width: 1080px){
  #testimonials .ts-card{ flex-basis: 31%; max-width: 31%; }
}



/* Mobile stack: 1 columna, alturas automáticas */
@media (max-width: 980px){
  #about .about-wrap{ display: grid; grid-template-columns: 1fr; }
  #about .about-left{ min-height: 220px; }
  #about .about-card{ margin-top: 0; height: auto; }
  #about .about-stats{
    flex-direction: column;
    height: auto;
    gap: 14px;
  }
}


@media (min-width: 1200px){
  #about .about-decor-ac{ transform: translateY(-100px); }
}

/* ===== Footer centrado en móvil (y sin overflow) ===== */
@media (max-width: 600px){
  .footer-wrap{
    inline-size: min(100% - 32px, 1200px);
    margin-inline: auto;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
  }
  .footer-brand img{ margin-inline: auto; }
  .footer-social .socials{ flex-direction: row; justify-content: center; gap: 14px; }
}






@media (max-width:600px){
  .services-steps{ --ac-lift: calc(-60px + var(--lift-offset)); }
}


/* === TESTIMONIALS: más espacio en móvil === */

/* 560–768 px */
@media (max-width: 768px){
  /* baja el termómetro y reduce el solape con las cards */
  #testimonials .decor-thermo{
    transform: translate(-50%, -70px);   /* antes -90px → más abajo */
    margin-bottom: -150px;               /* antes -180px → menos solape */
  }

  /* empuja el carrusel un poco hacia abajo */
  #testimonials .ts-wrap{
    margin-top: 10px;                    /* añade aire bajo el termómetro */
  }
}

/* <560 px (móviles comunes) */
@media (max-width: 560px){
  #testimonials .decor-thermo{
    transform: translate(-50%, -45px);   /* antes -60px → más abajo */
    margin-bottom: -95px;                /* antes -120px → menos solape */
  }

  #testimonials .ts-wrap{
    margin-top: 12px;                    /* separa la primera card */
    padding-inline: 14px;                /* mantén el padding que ya usas */
  }

  /* opcional: separa cada tarjeta un poco más entre sí */
  #testimonials .ts-list { gap: 24px; }
}

/* === NAVBAR MÓVIL === */
@media (max-width: 768px){

  /* Oculta el navbar de escritorio */
  .navbar { display: none !important; }

  /* Topbar móvil: hamburguesa + logo */
  .m-topbar{
    position: relative;
    display: flex;
    justify-content: center; /* centra el logo */
    align-items: center;
    padding: 12px 16px;
    background: #003874;
    z-index: 1001;
  }

  .m-logo img{
    height: 48px;
    display: block;
  }

  /* Botón hamburguesa */
  .m-burger{
    
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: #0b3a74;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .m-burger span{
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  /* Overlay */
  .m-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  .m-overlay.is-open{ display: flex; }

  /* Menú interior */
  .m-menu{
    background: #003874;
    color: #fff;
    border-radius: 16px;
    padding: 30px 20px;
    width: 80%;
    max-width: 360px;
    text-align: center;
    position: relative;
    animation: fadeIn .3s ease;
  }
  .m-menu .m-nav a{
    display: block;
    padding: 12px 0;
    margin: 6px 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .m-menu .m-nav a:last-child{ border-bottom: none; }

  /* Botón cerrar */
  .m-close{
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 28px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }

  @keyframes fadeIn{
    from{ transform: scale(.95); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
}

/* === Base (escritorio por defecto) === */
.m-topbar,
.m-overlay { 
  display: none;        /* oculta barra y overlay en desktop */
}

/* Tu navbar de escritorio se ve normal */
.navbar { display: block; }

/* === Solo móvil (<=768px): barra con logo centrado + hamburguesa === */
@media (max-width: 768px){
  /* Oculta el navbar de escritorio */
  .navbar { display: none !important; }

  /* Muestra la topbar móvil */
  .m-topbar{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    background: #003874;
    z-index: 1001;
  }

  .m-logo img{ height: 38px; display:block; }

  .m-burger{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border: 0; border-radius: 10px;
    background: #0b3a74;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:6px; cursor:pointer;
  }
  .m-burger span{ width:20px; height:2px; background:#fff; border-radius:2px; }

  /* El overlay del menú sólo vive en móvil */
  .m-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index:1000; }
  .m-overlay.is-open{ display: flex; justify-content:center; align-items:center; }

  .m-menu{
    background:#003874; color:#fff; border-radius:16px; padding:30px 20px;
    width:80%; max-width:360px; text-align:center; position:relative;
  }
  .m-menu .m-nav a{
    display:block; padding:12px 0; margin:6px 0; font-size:18px; font-weight:600;
    color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2);
  }
  .m-menu .m-nav a:last-child{ border-bottom:none; }
  .m-close{ position:absolute; right:14px; top:10px; font-size:28px; border:0; background:transparent; color:#fff; cursor:pointer; }
}

@media (max-width: 768px){

  /* Asegura que el overlay y el menú estén encima de todo */
  .m-overlay{
    z-index: 2000 !important;  /* más alto que .slog */
  }
  .m-menu{
    margin-top: 60px;          /* lo baja para no chocar con la topbar */
    z-index: 2001;
  }
}

/* === Services: split CENTRADO en móvil === */
@media (max-width: 600px){
  .services-steps .ac-decor-services{
    display: block;
    width: clamp(220px, 70vw, 360px);   /* un poco más compacto */
    height: auto;

    /* centrado en X */
    margin: 8px auto !important;       /* menos aire arriba y abajo */

    /* lift reducido */
    transform: translateY(-20px) !important; /* ajusta: -10px, -20px, etc. */
    
    left: auto !important;
  }
}


/* === MOBILE NAV: fijo arriba y sobre todo === */
@media (max-width: 768px){

  /* Barra superior fija */
  .m-topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;                /* alto consistente */
    padding: 8px 16px;
    z-index: 4000;               /* por encima de todo */
  }

  /* Compensa el contenido al quedar fija la barra */
  body{ padding-top: 56px; }

  /* Overlay SIEMPRE por delante del slog y de cualquier cosa */
  .m-overlay{
    z-index: 3999 !important;    /* > .slog (5) y resto */
  }

  /* Caja del menú: más arriba, justo debajo de la barra */
  .m-menu{
    margin-top: 12px !important; /* antes 60px */
    z-index: 4001;               /* encima del overlay */
    box-shadow: 0 18px 36px rgba(0,0,0,.28);
  }
}
@media (max-width: 600px){
  .slog{
    transform: translate(-50%, -100%); /* antes -50% → ahora más abajo */
  }
}
/* ===== MENÚ MÓVIL: arriba y SIEMPRE por encima del slog ===== */
@media (max-width: 768px){
  :root{ --topbar-h: 56px; }           /* alto aprox. de la barra superior */

  /* Asegura layering por encima de todo (slog, hero, etc.) */
  .m-overlay{ 
    position: fixed;
    inset: 0;
    z-index: 3000 !important;          /* > cualquier z-index del sitio */
    display: none;
  }
  .m-overlay.is-open{
    display: flex;
    justify-content: center;
    align-items: flex-start;           /* el menú arranca desde arriba */
     padding-top: calc(var(--topbar-h) + 2px); /* ↑ sube el menú */
  }

  /* La tarjeta del menú en la capa superior */
  .m-menu{
    position: relative;
    z-index: 3001;                     /* por encima del overlay */
    margin-top: 0 !important;          /* eliminamos desplazamientos viejos */
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
  }

  /* Por si el slog tenía z-index alto, lo mantenemos por debajo del menú */
  .slog{ z-index: 5; }
}
@media (max-width: 600px){
  .services-steps{
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .services-steps .ac-decor-services{
    margin: -10px auto 4px !important;
  }
}
/* Botones de idioma */
.lang-switch{
  margin-left: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 0;
  font-weight: 700;
  background: #0b3a74;
  color:#fff;
  cursor:pointer;
}
.lang-switch[aria-current="true"]{ filter: brightness(1.25); }

/* Escritorio: arriba a la derecha */
@media (min-width: 769px){
  .lang-switch--desk{
    position: fixed; top: 10px; right: 10px;
    z-index: 4000;
  }
  .lang-switch--desk + .lang-switch--desk{ right: 66px; } /* coloca el segundo botón a la izquierda */
}

/* Móvil: botones dentro de la topbar */
@media (max-width: 768px){
  .m-topbar{ padding-right: 72px; } /* aire para los botones */
  .m-topbar .lang-switch{
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  }
  .m-topbar .lang-switch + .lang-switch{ right: 58px; } /* los dos botoncitos lado a lado */
}

/* ===== Botones de cambio de idioma flotantes ===== */
.lang-switch--desk {
  position: fixed;
  bottom: 80px;          /* justo encima del go-top */
  right: 16px;
  width: 60px;           /* más grande */
  height: 60px;          /* más grande */
  border-radius: 50%;
  border: none;
  background: transparent;   /* SIN fondo azul, solo bandera */
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 0;
  overflow: hidden;          /* la imagen no se sale del círculo */
  transition: transform .2s ease, filter .2s ease;
}

/* Hover */
.lang-switch--desk:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Imagen de bandera dentro del botón */
.lang-switch--desk img {
  width: 100%;   /* ocupa todo */
  height: 100%;  /* ocupa todo */
  object-fit: cover;  /* ajusta la bandera sin deformar */
  border-radius: 50%; /* mantiene el círculo */
}

/* Botón activo */
.lang-switch--desk[aria-current="true"] {
  outline: 3px solid blue;   /* borde naranja para activo */
  outline-offset: 2px;
}

/* Ajuste para móviles: botones en fila */
@media (max-width: 600px) {
  .lang-switch--desk {
    bottom: 16px;
    right: 16px;
  }
  .lang-switch--desk + .lang-switch--desk {
    right: 84px;  /* separa el segundo botón */
  }
}
@media (max-width:768px){
  .m-topbar{
    display: flex;
    align-items: center;
    justify-content: center; /* el logo va al centro real */
    gap: 8px;
    height: 56px;
    padding: 8px 16px;
    background: #003874;
    position: fixed; top:0; left:0; right:0; z-index:4000;
  }

  /* El burger forma parte del flujo (ya NO absolute) */
  .m-burger{
    flex: 0 0 40px;       /* mismo ancho a ambos lados */
    width: 40px; height: 40px;
    border: 0; border-radius: 10px;
    background: #0b3a74;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
    transform: none;      /* quita el translateY */
    position: static;     /* ← importante: ya no absolute */
  }
  .m-burger span{ width:20px; height:2px; background:#fff; border-radius:2px; }

  /* El logo queda realmente centrado */
  .m-logo{ display:block; }
  .m-logo img{ height: 38px; display:block; }

  /* “Separador” a la derecha del mismo ancho que el burger
     para que el centro sea perfecto aunque no haya nada ahí */
  .m-topbar::after{
    content:"";
    flex: 0 0 40px;      /* igual que el burger */
  }

  /* Si además pones los botones de idioma en la derecha dentro de .m-topbar,
     puedes quitar el ::after y usar su ancho real como tercera “columna”. */
}
/* === Móvil: banderas arriba a la derecha, no tapan el go-top === */
/* === Móvil: banderas en columna (USA arriba, ESP debajo) === */
@media (max-width: 768px){
  /* bandera USA arriba */
  .lang-switch--desk[data-lang="en"]{
    position: fixed;
    top: 70px;      /* un poco más abajo desde el borde superior */
    right: 12px;
    bottom: auto;
    width: 50px;
    height: 50px;
    margin: 0;
    z-index: 4000;
  }

  /* bandera ESP debajo de la de USA */
  .lang-switch--desk[data-lang="es"]{
    position: fixed;
    top: 130px;     /* justo debajo de la USA */
    right: 12px;
    bottom: auto;
    width: 50px;
    height: 50px;
    margin: 0;
    z-index: 4000;
  }

  /* asegura que el go-top quede por encima */
  #goTop.go-top{ z-index: 4500; }
}


.contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* === NAV MÓVIL SIEMPRE ARRIBA DE TODO === */
@media (max-width: 768px){
  /* Barra superior fija y en el nivel más alto */
  .m-topbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 9999 !important; /* ↑ más que cualquier otro elemento */
  }

  /* Evita que el contenido quede tapado por la barra fija */
  body{ padding-top: 56px !important; }

  /* Overlay y menú, justo por debajo/encima de lo necesario */
  .m-overlay{
    position: fixed !important;
    inset: 0;
    z-index: 9998 !important; /* debajo de la barra */
    display: none;
  }
  .m-overlay.is-open{
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    padding-top: 58px; /* deja visible la topbar */
  }
  .m-menu{
    z-index: 9999 !important; /* menú por encima del overlay */
    margin-top: 0 !important;
  }

  /* Banderas flotantes y go-top por debajo de la barra */
  .lang-switch--desk{ z-index: 9997 !important; }
  #goTop.go-top{ z-index: 9996 !important; }
}

/* Por si algún bloque tenía z-index alto, bájalo bajo la barra */
.hero, .slog, #about, .services-steps, #testimonials, .contact, .footer,
.hero *, .slog *{
  position: relative;
  z-index: auto !important;
}


/* ===== Ajustes navbar móvil: burger arriba/izq y X en esquina ===== */
@media (max-width:768px){
  /* Barra fija (ya la tienes), dejamos hueco para la X dentro del panel */
  .m-menu{
    padding-top: 46px !important;  /* espacio para el botón cerrar */
  }

  /* Burger: pegada a la izquierda y un poquito más arriba */
  .m-burger{
    position: absolute !important;
    left: 10px !important;         /* más a la izquierda */
    top: 6px !important;           /* un poco más arriba */
    transform: none !important;
    z-index: 10000 !important;     /* sobre el logo y decoraciones */
  }

  /* Logo centrado real aunque la burger esté a la izquierda */
  .m-topbar{
    justify-content: center !important;
  }
  /* Mantén el “contrapeso” a la derecha para centrar el logo */
  .m-topbar::after{
    content: "" !important;
    flex: 0 0 40px !important;     /* mismo ancho que la burger */
  }

  /* Botón de cerrar (X) fijo en la esquina del panel */
  .m-close{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
    z-index: 10001 !important;
  }
}
/* === MOBILE NAV: logo centrado perfecto + siempre visible === */
@media (max-width:768px){
  /* Barra fija, por encima de todo, con safe-area en iPhone */
  .m-topbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px 12px !important;
    z-index: 99999 !important;
    /* Grid: 3 columnas (burger | logo | “espacio” para equilibrio visual) */
    display: grid !important;
    grid-template-columns: 48px 1fr 48px;  /* ajusta 48px si tu burger es otro ancho */
    align-items: center;
    justify-items: center;
  }

  /* Asegura que el contenido no se esconda bajo la barra */
  body{ padding-top: calc(56px + env(safe-area-inset-top)) !important; }

  /* Burger a la izquierda (columna 1) */
  .m-burger{
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    position: relative !important;   /* saca absolute para no descentrar */
    top: auto !important; left: auto !important; transform: none !important;
    z-index: 100000 !important;
    width: 40px; height: 40px;       /* por si algún estilo lo cambia */
  }

  /* Logo centrado (columna 2) */
  .m-logo{
    grid-column: 2 / 3 !important;
    justify-self: center !important;
  }
  .m-logo img{ height: 38px; display:block; }

  /* Espacio “fantasma” a la derecha (columna 3) para balancear */
  .m-topbar::after{ content:""; }

  /* Panel del menú y overlay siempre por debajo de la barra, encima del resto */
  .m-overlay{ z-index: 99998 !important; }
  .m-menu{    z-index: 99999 !important; padding-top: 46px !important; }

  /* Botón cerrar en esquina superior derecha del panel */
  .m-close{
    position: absolute !important;
    top: 10px !important; right: 12px !important; left: auto !important;
    transform: none !important; z-index: 100000 !important;
  }
}

/* Por si alguna sección tenía z-index alto, la bajamos bajo la barra fija */
.hero, .slog, #about, .services-steps, #testimonials, .contact, .footer,
.hero *, .slog *{ position: relative; z-index: auto !important; }



/* === Aumentar altura de la navbar móvil y tamaño del logo === */
@media (max-width: 768px){
  :root{ --topbar-h: 72px; } /* antes ~56px */

  /* Barra superior más alta */
  .m-topbar{
    height: var(--topbar-h) !important;
    padding: 12px 16px !important;  /* un poco más de aire */
  }

  /* Compensar el contenido por la barra fija más alta */
  body{ padding-top: var(--topbar-h) !important; }

  /* Logo más grande */
  .m-logo img{
    height: 54px !important; /* antes 38–48px */
    display: block;
  }

  /* Burger ligeramente más grande para equilibrar */
  .m-burger{
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    gap: 7px !important;
  }
  .m-burger span{
    width: 22px !important;
    height: 2px !important;
  }

  /* Menú desplegable: cae justo bajo la barra más alta */
  .m-overlay.is-open{
    padding-top: calc(var(--topbar-h) + 2px) !important;
  }

  /* Si usas banderas flotantes en móvil, bájalas para no chocar */
  .lang-switch--desk[data-lang="en"]{
    top: calc(var(--topbar-h) + 14px) !important;  /* antes ~70px */
    width: 56px !important;
    height: 56px !important;
  }
  .lang-switch--desk[data-lang="es"]{
    top: calc(var(--topbar-h) + 74px) !important;  /* debajo de la USA */
    width: 56px !important;
    height: 56px !important;
  }
}

/* Para móviles muy pequeños, aún un poco más de altura si quieres */
@media (max-width: 420px){
  :root{ --topbar-h: 76px; }
  .m-logo img{ height: 58px !important; }


  .slog h1{
  font-size: 200px;

 
}
}


/* === H1 del slog más grande en móvil (forzado) === */
@media (max-width: 560px){
  .slog h1{
    font-size: clamp(30px, 7vw, 58px) !important;
    line-height: 1.12;
  }
}

@media (max-width: 420px){
  .slog h1{
    font-size: clamp(26px, 5.5vw, 45px) !important;
  }
}