/* ajustes.css - correcciones de maquetacion GridRock */
/* 1. Servicios: iguala la altura del bloque de texto del hero en las 4 paginas,
   para que el titulo (Residencial / Industrial / Peak Shaving / PPA) quede siempre
   a la misma altura y no salte al cambiar de servicio. */
@media (min-width: 1024px){
  [data-view="servicio"] section#top > div:last-child{ min-height: 380px; }
}

/* 2. El Grupo: los dos parrafos bajo el titulo pasan a una sola columna centrada. */
[data-view="greenrock"] section#top div[style*="grid-template-columns:1fr 1fr"]{
  display: block !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-view="greenrock"] section#top div[style*="grid-template-columns:1fr 1fr"] > p{
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
[data-view="greenrock"] section#top div[style*="grid-template-columns:1fr 1fr"] > p + p{
  margin-top: 16px;
}

/* 3. Servicios - bloque "Paso a paso" de cada servicio.
   Las tarjetas se insertan dentro de un contenedor intermedio
   (#svc-steps-rail) que rompia el carrusel y las apilaba en vertical,
   dejando vacia toda la mitad derecha. Se restaura la lectura
   horizontal sin tocar el HTML ni el motor del sitio. */
#svc-steps-rail{
  display: flex !important;
  flex: 0 0 auto !important;
  gap: var(--space-8);
  align-items: stretch;
  scroll-snap-align: none !important;
}
#svc-steps-rail > *{
  flex: 0 0 clamp(268px, 25vw, 340px);
  scroll-snap-align: start;
}
@media (max-width: 860px){
  #svc-steps-rail > *{ flex: 0 0 78vw; }
}

/* 4. Movil - el documento era mas ancho que la pantalla, por lo que el
   navegador encogia toda la pagina y dejaba una franja blanca a la
   derecha. El origen es la tarjeta del formulario de contacto, que no
   podia reducirse por debajo del ancho natural de sus campos. */
@media (max-width: 980px){
  .two > *, .two-r > *, .three > *, .four > *, .six > *, .blueprint{ min-width: 0; }
  form, form > *{ min-width: 0; }
  input, select, textarea{ width: 100%; min-width: 0; max-width: 100%; }
  img, video, canvas{ max-width: 100%; }
}

/* 5. Movil - menu desplegable: se abria pero quedaba invisible por la
   animacion de entrada y no permitia desplazamiento cuando su
   contenido superaba el alto de la pantalla. */
@media (max-width: 980px){
  #mobile-menu{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 16px !important;
    padding-bottom: 32px !important;
  }
  #mobile-menu > *{ flex: 0 0 auto; }
}

/* 6. Movil - las 4 pestanas de servicio se muestran completas en dos
   filas en lugar de quedar cortadas contra el borde derecho. */
@media (max-width: 620px){
  .svctabs > div{
    flex-wrap: wrap !important;
    justify-content: center;
    overflow-x: visible !important;
  }
  .svctabs > div > .tab{ flex: 0 0 auto; }
}

/* 7. Movil - contencion del ancho. Cualquier elemento decorativo o
   animacion de entrada que se salga unos pixeles hacia la derecha hacia
   que el navegador del celular encogiera toda la pagina (franja clara al
   costado). Se recorta el sobrante en cada vista sin crear un contenedor
   de scroll, para no afectar la barra sticky de pestanas. */
@media (max-width: 980px){
  body > [data-view], body > footer{ overflow-x: clip; }
}

/* 8. Movil - menu desplegable: "Servicios" y "Documentos" se comportan
   como secciones acordeon (ver ajustes.js) para que el menu entre
   completo en una sola pantalla. */
@media (max-width: 980px){
  #mobile-menu [data-acc-title]{
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
    -webkit-user-select: none;
  }
  #mobile-menu [data-acc-title]::after{
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s var(--ease);
    opacity: .75;
  }
  #mobile-menu [data-acc][data-open] [data-acc-title]::after{
    transform: rotate(-135deg);
  }
  #mobile-menu [data-acc-list]{ display: none !important; }
  #mobile-menu [data-acc][data-open] [data-acc-list]{ display: flex !important; }
}