/* Solo móviles */
@media (max-width: 768px) {
  :root{
    --bar-h: 70px;
  }

  /* Topbar */
  .topbar__container{
    padding: 0 16px;
    height: var(--bar-h);
  }
  .topbar__logo{ height: 44px; }
  .topbar__hamburger{
    display: inline-flex !important;
    width: 42px; height: 42px;
    border-radius: 10px;
  }
  /* Oculta las 3 barritas por si siguen en el HTML */
  .topbar__hamburger span{ display:none !important; }

  /* Drawer del menú */
  .topbar__nav{
    position: fixed !important;
    top: var(--bar-h); left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
    padding: 10px 12px;
    max-height: calc(100dvh - var(--bar-h));
    overflow-y: auto;
  }
  .topbar__nav.is-open{ display:flex; }

  .topbar__menu{
    flex-direction: column;
    gap: 0;
  }
  .topbar__menu > li > a{
    display:block;
    padding: 14px 10px;
    border-radius: 10px;
  }
  .topbar__menu > li > a::after{ display:none; }

  /* Submenú en bloque (sin hover) */
  .has-submenu .submenu{
    position: static;
    margin-top: 6px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display:none;
  }
  .has-submenu.is-open .submenu{ display:block; }
  .submenu a{ padding:10px; }

  .topbar__actions{
    padding-top: 10px;
    border-top: 1px solid var(--line);
    gap: 10px;
  }
  .btn{ height: 42px; border-radius: 10px; }

  /* Hero alineado a la izquierda */
  .hero{
    min-height: 68vh;
    padding: 28px 16px;
    justify-content: flex-start;
    text-align: left;
  }
  .contenido-hero{
    width: 100%;
    max-width: 640px;
    margin: 0;
  }
  .contenido-hero h1{
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .contenido-hero p{
    font-size: 1rem;
    margin-bottom: 18px;
  }
  .btn-cta{
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 800;
  }

  /* Cards “About” y Cobertura ya tienen responsive, afinamos paddings */
  .about, .coverage{ padding: 36px 16px; }
  .about__header{ margin-bottom: 16px; }
  .about__cta{ flex-direction: column; }

  /* Carrusel */
  .carousel{
    width: 100%;
    height: 260px;
    border-radius: 14px;
  }
  .carousel-btn{
    padding: 12px; font-size: 18px;
  }

  /* Contacto */
  .contacto-container{
    margin: 16px auto;
    border-radius: 10px;
  }

  /* Flotantes más pequeños */
  .wapp-float{
    right: 14px; bottom: 14px;
    width: 50px; height: 50px;
    font-size: 24px;
    border-radius: 50%;
  }
  .wapp-label{ display:none !important; }

  .insta-float{
    right: 14px; bottom: 76px;
    padding: 0;
    width: 50px; height: 50px;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
  }
  .insta-float i{ font-size: 24px; }
  .insta-label{ display:none !important; }
}
@media screen and (max-width: 768px) {
  .saludo-usuario {
    display: none !important;
  }
}

/* ===== Acerca de nosotros (móvil) ===== */
@media (max-width: 768px){

  /* contenedor general */
  .about{
    padding: 28px 16px;
    background: #fff;                 /* más limpio en móvil */
  }
  .about .container{
    max-width: 100%;
    padding: 0;
  }

  /* cabecera */
  .about__header{
    text-align: left;                 /* que no quede centrado */
    margin-bottom: 18px;
  }

  .about .pill{
    gap: 6px;
    padding: 4px 10px;
    font-size: .8rem;
    border-radius: 999px;
  }

  .about__header h2{
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 10px 0 6px;
  }

  .about__lead{
    font-size: .95rem;
    line-height: 1.6;
    color: #374151;
    margin: 0;
  }

  /* tarjetas en columna */
  .about__grid{
    display: grid;
    grid-template-columns: 1fr;       /* 1 columna */
    gap: 12px;                        /* menos separación */
    margin-top: 18px;
  }

  /* tarjeta */
  .about__card{
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
  }

  /* icono de tarjeta */
  .about__icon{
    width: 40px; height: 40px;
    border-radius: 10px;
  }
  .about__icon i{
    font-size: 18px;
  }

  .about__card h3{
    margin: 8px 0 6px;
    font-size: 1.05rem;
  }

  .about__card p{
    font-size: .95rem;
    line-height: 1.6;
    color: #374151;
  }

  /* valores en una sola columna, más legibles */
  .about__values .values{
    grid-template-columns: 1fr;       /* 1 columna */
    gap: 8px;
  }
  .about__values .values li{
    font-size: .95rem;
    font-weight: 600;
  }

  /* botones (CTA) apilados y de ancho completo */
  .about__cta{
    margin-top: 18px;
    gap: 8px;
    justify-content: stretch;         /* que ocupen todo el ancho */
  }
  .about__cta .btn{
    width: 100%;
    height: 44px;
    font-size: .95rem;
    border-radius: 10px;
  }
}
/* Botones + tarjeta lado a lado en móvil */
@media (max-width: 768px) {
  .cta-servicio-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* dos columnas iguales */
    gap: 12px;
    align-items: start;
  }

  /* Ajustes a botones */
  .cta-servicio-wrapper .btn {
    width: 100%;
    height: 44px;
    font-size: .9rem;
    border-radius: 10px;
  }

  /* Ajuste tarjeta */
  .cta-servicio-wrapper .card-servicio {
    padding: 12px;
    border-radius: 10px;
    font-size: .9rem;
  }

  .cta-servicio-wrapper .card-servicio i {
    font-size: 22px;
  }
}
/* ===== Fix overflow y layout móvil ===== */
@media (max-width: 768px){

  /* Nunca permitir desbordes horizontales en móvil */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Paddings más compactos y consistentes */
  .topbar__container,
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Imágenes y medios no deben romper el ancho */
  img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Botones que antes tenían min-width grande */
  .coverage__actions .btn,
  .btn,
  .btn-cta {
    min-width: 0;     /* <- elimina anchos mínimos agresivos */
    width: 100%;      /* en móvil, mejor full width dentro de su columna */
  }

  /* Wrapper de CTA + tarjeta (lado a lado) sin desbordar */
  .cta-servicio-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }
  .coverage__cta-col,
  .coverage__card-col {
    flex: 1 1 0;
    min-width: 0;      /* <- clave para que el flex-item pueda encogerse */
  }
  .coverage__card {
    height: 100%;
  }

  /* Por si algo más insiste en salirse, que se recorte */
  .coverage,
  .about,
  .proyectos,
  .contacto,
  header,
  footer {
    overflow-x: hidden;
  }

  /* Carrusel más compacto (a veces causaba overflow) */
  .carousel-container { gap: 12px; }
  .carousel { width: 100%; height: 260px; }
  .carousel-btn { padding: 10px; font-size: 18px; }

  /* Flotantes más “adentro” */
  .wapp-float, .insta-float {
    right: 12px !important;
  }
}
/* ===== Proyectos: modo móvil touch ===== */
@media (max-width: 768px){

  /* contenedor más ancho y compacto */
  .proyectos .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* el carrusel ocupa todo el ancho y menos alto */
  .carousel{
    width: 100% !important;
    max-width: none !important;
    height: 52vw !important;        /* alto responsivo */
    min-height: 220px;
    max-height: 420px;
    border-radius: 0;                /* sin bordes para “llenar” mejor */
    box-shadow: none;
  }

  /* usamos scroll nativo con snap */
  .slides{
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 0 16px;                 /* separa de los bordes del móvil */
    overflow-x: auto;                /* 👈 deslizar con el dedo */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;   /* snap por imagen */
    -webkit-overflow-scrolling: touch;
    transform: none !important;      /* anulamos el translateX del modo desktop */
  }

  /* cada imagen es más ancha (tipo “card” de 85% del viewport) */
  .slides img{
    flex: 0 0 85vw;                  /* 👈 más ancho que antes */
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    scroll-snap-align: center;
  }

  /* ocultar flechas SOLO en móvil */
  .carousel-btn{
    display: none !important;
  }
}

/* ===== Servicios: móvil bonito ===== */
@media (max-width: 768px){

  /* contenedor más respirado y sin márgenes raros */
  .servicios .container{
    padding: 22px 16px;
  }

  .titulo-servicios{
    font-size: 1.3rem;
    letter-spacing: .5px;
    margin-bottom: 14px;
    text-align: left;
    color: #0f172a;
  }

  /* grilla fluida: 2 columnas, cae a 1 en pantallas chicas */
  .grid-servicios{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  @media (max-width: 420px){
    .grid-servicios{
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  /* tarjetas táctiles, compactas y con feedback suave */
  .servicio-item{
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 14px;
    text-align: left;                /* texto a la izquierda = legible */
    display: grid;
    grid-template-columns: 48px 1fr; /* icono + texto */
    align-items: center;
    gap: 12px;
    min-height: 72px;                /* área de toque cómoda */
    box-shadow: 0 6px 18px rgba(2,8,23,.06);
    transition: transform .12s ease, box-shadow .2s ease, background .2s;
  }
  .servicio-item:active{
    transform: translateY(1px) scale(.99);
    box-shadow: 0 2px 10px rgba(2,8,23,.08);
  }

  /* iconos más contenidos y consistentes */
  .servicio-item .icono-grande{
    font-size: 32px !important;
    color: #009624;
    line-height: 1;
  }

  /* títulos cortos, fuertes y sin mayúsculas exageradas en mobile */
  .servicio-item p{
    margin: 0;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: .2px;
  }

  /* doble icono (BOMBEO SOLAR): apílalos bonito */
  .servicio-item[data-servicio="BOMBEO SOLAR"]{
    grid-template-columns: 60px 1fr;
  }
  .servicio-item[data-servicio="BOMBEO SOLAR"] i{
    font-size: 26px !important;
    margin-right: 4px;
    color: #00b24a;
  }

  /* hover (para los que usan mouse) y foco accesible */
  @media (hover: hover){
    .servicio-item:hover{
      background: #f6fdf8;
      box-shadow: 0 10px 26px rgba(0,150,36,.12);
      border-color: rgba(0,200,83,.35);
    }
  }
  .servicio-item:focus{
    outline: 3px solid rgba(0,200,83,.35);
    outline-offset: 2px;
  }

  /* ===== Modal en móvil: pantalla completa cómoda ===== */
  #servicioModal .modal-header{
    gap: 12px;
    margin-bottom: 12px;
  }
  #servicioModal .icono-modal{
    font-size: 34px;
    color: #00c853;
  }
  #modalTitulo{
    font-size: 1.2rem;
    margin: 0;
  }
  #modalDescripcion{
    font-size: .98rem;
    line-height: 1.55;
    color: #1f2937;
  }
  #servicioModal .close{
    top: 10px;
    right: 14px;
    font-size: 26px;
  }

  /* ===== Flotantes más pequeños en móvil ===== */
  .wapp-float{
    right: 14px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .insta-float{
    right: 14px;
    bottom: 78px;     /* deja espacio con WhatsApp */
    padding: 8px 12px;
    font-size: 18px;
  }
  .insta-float i{ font-size: 22px; }
  .insta-label{ display: none; }  /* en móvil, solo el ícono */
}
/* ===== Servicios: cuadrícula adaptable ===== */
@media (max-width: 1024px) {
  .grid-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .grid-servicios {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  }
}

@media (max-width: 480px) {
  .grid-servicios {
    grid-template-columns: 1fr; /* 1 columna */
  }
}

.grid-servicios .servicio-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

.grid-servicios .servicio-item i {
  font-size: 36px;
  color: #00b24a;
  margin-bottom: 8px;
}

.grid-servicios .servicio-item p {
  font-size: 0.95rem;
  font-weight: bold;
  margin: 0;
}

.grid-servicios .servicio-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.icon-duo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                     /* separación entre los dos íconos */
  margin-bottom: 8px;
}

.icon-duo .icono-grande{
  margin: 0;                     /* el gap ya lo da .icon-duo */
  font-size: 36px;
  color: #00b24a;
}

/* ===== Modal: versión móvil ===== */
@media (max-width: 768px){
  /* el overlay puede quedarse igual, pero aseguremos centrado */
  .modal{
    display: none;              /* por defecto oculto */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);/* oscurece sin “apagar” todo */
    padding: 16px;              /* para que la tarjeta no pegue a los bordes */
    z-index: 9999;
  }

  .modal-content{
    width: 92%;
    max-width: 520px;           /* tarjeta angosta también en móvil apaisado */
    max-height: 78vh;           /* limita altura para que no tape todo */
    overflow: auto;             /* scroll interno si el texto es largo */
    margin: 10vh auto 0;        /* se “despega” del borde superior */
    border-radius: 14px;
    padding: 20px;
    background: #333;           /* conserva tu estilo */
  }

  .modal-header{
    gap: 14px;
  }

  .icono-modal{
    font-size: 46px;            /* ícono más chico en móvil */
    flex: 0 0 auto;
  }

  #modalTitulo{
    font-size: 1.25rem;
    line-height: 1.2;
  }

  #modalDescripcion{
    font-size: 1rem;
    line-height: 1.55;
  }

  .modal .close{
    right: 16px;
    top: 10px;
    font-size: 28px;            /* diana más grande para el dedo */
  }

  /* Evita que el body haga scroll cuando el modal está abierto */
  body.modal-open{
    overflow: hidden;
    height: 100vh;
    touch-action: none;
  }
}

/* Un toquecito nice en todas las pantallas */
.modal-content{
  animation: modalPop .18s ease-out;
}
@keyframes modalPop{
  from{ transform: translateY(4px) scale(.98); opacity: .85; }
  to  { transform: translateY(0)   scale(1);    opacity: 1;    }
}

/* ===== Modal: versión móvil mejorada ===== */
@media (max-width: 768px){
  .modal-content{
    background: #ffffff;                 /* ahora claro */
    color: #0f172a;                      /* texto legible */
    width: 92%;
    max-width: 520px;
    max-height: 80vh;                    /* no tapa todo */
    overflow: auto;                      /* scroll interno */
    margin-top: 10vh;                    /* separada del borde */
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }

  .modal-header{ gap: 14px; align-items: center; }
  .icono-modal{ font-size: 42px; color: var(--primary-600); }
  #modalTitulo{ font-size: 1.25rem; line-height: 1.2; color:#0f172a; }
  #modalDescripcion{ font-size: 1rem; line-height: 1.55; color:#334155; }

  .modal .close{
    position: absolute;
    right: 16px; top: 10px;
    font-size: 28px; color:#475569; cursor:pointer;
  }
  
  /* Evita que la página se mueva bajo el modal */
  body.modal-open{
    overflow: hidden;
    height: 100vh;
    touch-action: none;
  }

  /* Esconde flotantes cuando el modal está abierto */
  body.modal-open .wapp-float,
  body.modal-open .insta-float{
    display: none !important;
  }
}

/* Animación sutil al abrir (opcional) */
.modal-content{
  animation: modalPop .18s ease-out;
}
@keyframes modalPop{
  from{ transform: translateY(4px) scale(.98); opacity:.85; }
  to  { transform: translateY(0)   scale(1);   opacity:1; }
}

/* ===== Modal Servicios: móvil compacto (override final) ===== */
@media (max-width: 768px){
  #servicioModal.modal{
    /* el JS lo abre con display:flex; aquí solo definimos layout */
    align-items: flex-start !important;  /* que baje un poco */
    justify-content: center !important;
    padding: 16px !important;
    background: rgba(15,23,42,.55) !important;
    z-index: 200000 !important;
  }
  #servicioModal .modal-content{
    width: 92vw !important;
    max-width: 440px !important;
    height: auto !important;        /* anula 100vh viejo */
    max-height: 74vh !important;    /* evita pantalla completa */
    margin: 10vh auto 0 !important; /* despega del borde superior */
    border-radius: 16px !important; /* tarjeta, no fullscreen */
    padding: 16px !important;
    overflow: auto !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
  }
  #servicioModal .icono-modal{ font-size: 26px !important; color:#00b24a !important; }
  #servicioModal #modalTitulo{ font-size: 1.05rem !important; margin: 0 !important; }
  #servicioModal #modalDescripcion{ font-size: .95rem !important; line-height: 1.55 !important; color:#334155 !important; }
  body.modal-open{ overflow: hidden !important; height: 100vh !important; touch-action: none !important; }
}

/* Cobertura: CTA textual en móvil */
@media (max-width: 768px){
  .coverage__ctaText{
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
  }
  .coverage__ctaText h3{
    font-size: 1rem;
  }
  .coverage__ctaLead{
    font-size: .95rem;
  }
}
/* ¿POR QUÉ ELEGIRNOS? — móvil */
@media (max-width: 768px){
  .why{ padding:36px 0; }
  .why__title{ font-size:1.5rem; margin-bottom:18px; }
  .why__grid{ grid-template-columns: 1fr 1fr; gap:14px; }
  .why__item{ padding:16px; border-radius:14px; }
  .why__icon{ width:42px; height:42px; font-size:20px; border-radius:10px; }
  .why__h3{ font-size:1rem; }
  .why__p{ font-size:.95rem; }
}
@media (max-width: 480px){
  .why__grid{ grid-template-columns: 1fr; }
}

/* --- Botón flotante Facebook (móvil) --- */
@media (max-width: 768px) {
  .fb-float{
    position: fixed;
    right: 14px;          /* mismo alineado que los otros */
    bottom: 140px;        /* arriba de Instagram (78) y WhatsApp (16) */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1877f2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;      /* igual que .wapp-float en móvil */
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    z-index: 9999;
    text-decoration: none;
  }
  .fb-float .fb-label{
    display: none !important;  /* solo ícono en móvil */
  }
}