@charset "utf-8";
/* responsive.css - Diseño adaptativo para Insorock.es */

/* ============================================================
   TABLET Y MÓVIL: pantallas menores de 960px
   ============================================================ */
@media screen and (max-width: 959px) {

  *, *::before, *::after { box-sizing: border-box; }

  img { max-width: 100%; height: auto; }

  /* Ocultar bandas decorativas superiores que sólo funcionan con layout absoluto */
  div#bandaBlanca,
  div#bandaAzul { display: none; }

  /* La banda "Aislamiento Acústico" ahora va en el flujo, entre las dos
     filas del slider; visible también en móvil, a ancho de contenido */
  div#todo div#contenido div#destacados div#bandaAncha {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
    padding: 8px 0;
    clear: both;
  }
  div#todo div#contenido div#destacados div#bandaAncha p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 6vw !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Contenedor principal: eliminar posicionamiento absoluto */
  div#todo {
    width: 100% !important;
    max-width: 960px;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    padding: 0 5mm; /* ~5mm de margen blanco a izquierda y derecha en móvil */
  }

  /* Cabecera: añadir colores de fondo que daban las bandas decorativas */
  div#todo header {
    width: 100% !important;
    height: auto !important;
    background-color: #fff;
    padding-bottom: 0;
  }

  div#todo header div.logotipo {
    /* Logo un poco más grande que en escritorio (94x49); se escala la
       imagen de fondo con background-size para que no se recorte */
    width: 120px;
    height: 63px;
    background-size: 120px 63px;
    float: left;
  }

  div#todo header div.logotipo a {
    width: 120px;
    height: 63px;
  }

  div#todo header div#cabeceraDerecha {
    width: calc(100% - 104px) !important;
    height: auto !important;
    background-image: none !important;
    float: right;
  }

  div#todo header div#cabeceraDerecha div#menuUno {
    width: 100% !important;
    height: auto !important;
    float: none;
    text-align: right;
  }

  div#todo header div#cabeceraDerecha div#menuUno a {
    font-size: 16px !important;
    margin-left: 6px !important;
  }

  div#todo header div#cabeceraDerecha div#redes {
    width: auto !important;
    height: auto !important;
    float: none;
    clear: right;
    text-align: right;
  }

  /* Barra de navegación principal */
  div#todo header nav {
    clear: both;
    background-color: #004b6d;
    width: 100% !important;
  }

  div#todo header nav ul#menuNavegacion {
    width: 100% !important;
    height: auto !important;
    padding: 4px 0;
    line-height: normal;
  }

  div#todo header nav ul#menuNavegacion li {
    display: inline-block !important;
  }

  div#todo header nav ul#menuNavegacion li a {
    font-size: 14px !important;
    margin-left: 8px !important;
    line-height: 30px !important;
  }

  /* Contenido */
  div#todo div#contenido {
    width: 100% !important;
  }

  /* Portada: grid de imágenes destacadas */
  div#todo div#contenido div#destacados {
    width: 100% !important;
    height: auto !important;
    background-size: cover !important;
  }

  div#todo div#contenido div#destacados div#primeraFila,
  div#todo div#contenido div#destacados div#segundaFila {
    width: 100% !important;
    height: auto !important;
  }

  div#todo div#contenido div#destacados div#segundaFila {
    margin-top: 0 !important;
  }

  /* Cada celda del slider conserva la proporción de escritorio y se reparte
     en cuadrícula 2x2, igual que en la versión de escritorio */
  div#todo div#contenido div#destacados div#uno,
  div#todo div#contenido div#destacados div#dos,
  div#todo div#contenido div#destacados div#tres,
  div#todo div#contenido div#destacados div#cuatro {
    width: 50% !important;
    height: auto !important;
    float: left;
  }

  /* Fila superior: proporción 461x234 ; fila inferior: 461x222 */
  div#todo div#contenido div#destacados div#uno,
  div#todo div#contenido div#destacados div#dos {
    aspect-ratio: 461 / 234;
  }

  div#todo div#contenido div#destacados div#tres,
  div#todo div#contenido div#destacados div#cuatro {
    aspect-ratio: 461 / 222;
  }

  /* Flux pinta la foto como background a 461px fijos sobre estas capas
     internas (incluido el wrapper .fluxslider que inserta por JS); las
     forzamos a escalar para que la imagen se vea completa (igual que en
     escritorio) en lugar de recortada */
  div#todo div#contenido div#destacados div#uno .fluxslider,
  div#todo div#contenido div#destacados div#dos .fluxslider,
  div#todo div#contenido div#destacados div#tres .fluxslider,
  div#todo div#contenido div#destacados div#cuatro .fluxslider,
  div#todo div#contenido div#destacados div#uno .surface,
  div#todo div#contenido div#destacados div#dos .surface,
  div#todo div#contenido div#destacados div#tres .surface,
  div#todo div#contenido div#destacados div#cuatro .surface,
  div#todo div#contenido div#destacados div#uno .images,
  div#todo div#contenido div#destacados div#dos .images,
  div#todo div#contenido div#destacados div#tres .images,
  div#todo div#contenido div#destacados div#cuatro .images,
  div#todo div#contenido div#destacados div#uno .image1,
  div#todo div#contenido div#destacados div#dos .image1,
  div#todo div#contenido div#destacados div#tres .image1,
  div#todo div#contenido div#destacados div#cuatro .image1,
  div#todo div#contenido div#destacados div#uno .image2,
  div#todo div#contenido div#destacados div#dos .image2,
  div#todo div#contenido div#destacados div#tres .image2,
  div#todo div#contenido div#destacados div#cuatro .image2 {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Reserva: si flux no se cargara, las imágenes normales también escalan */
  div#todo div#contenido div#destacados div#uno img,
  div#todo div#contenido div#destacados div#dos img,
  div#todo div#contenido div#destacados div#tres img,
  div#todo div#contenido div#destacados div#cuatro img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Imagen base bajo el grid de portada */
  div#todo div#contenido > img {
    width: 100% !important;
    height: auto !important;
  }

  /* Barra de accesos rápidos con imágenes (#menuAccesosInicio) en las
     páginas de sectores: definida a 960px con ítems de 140px flotados
     en general.css. La convertimos en una rejilla fluida de 3 por fila */
  div#todo div#contenido div#menuAccesosInicio {
    width: 100% !important;
    height: auto !important;
    text-align: center;
    overflow: hidden;
  }
  div#todo div#contenido div#menuAccesosInicio ul {
    text-align: center;
  }
  /* La <li> es la celda de la rejilla (3 por fila) */
  div#todo div#contenido div#menuAccesosInicio ul li {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
    width: 30% !important;
    max-width: 140px !important;
    height: auto !important;
    margin: 5px !important;
  }
  /* La <a> rellena la celda por completo */
  div#todo div#contenido div#menuAccesosInicio ul li a,
  div#todo div#contenido div#menuAccesosInicio a {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  div#todo div#contenido div#menuAccesosInicio ul li img,
  div#todo div#contenido div#menuAccesosInicio a img {
    width: 100% !important;
    height: auto !important;
  }

  /* Sección de texto principal */
  div#todo div#contenido div#accesosRapidos {
    width: 100% !important;
  }

  div#todo div#contenido div#accesosRapidos div#textoPrincipal {
    width: 100% !important;
  }

  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#intro,
  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#bienvenida {
    width: 100% !important;
    height: auto !important;
    float: none !important;
  }

  /* Bloque de ruido local */
  div#todo div#contenido div#accesosRapidos div#textoPrincipal p#ruidoLocal,
  div#todo div#contenido div#accesosRapidos div#textoPrincipal p#ruidoLocal a {
    font-size: 30px !important;
  }

  /* El párrafo "Paneles absorbentes..." tenía height:60px fija de escritorio;
     en móvil el texto ocupa más y el h3 "Sectores de actuación" se solapaba */
  div#todo div#contenido div#accesosRapidos div#textoPrincipal p#accesoNosotros {
    height: auto !important;
  }

  /* Items de servicios/sectores.
     overflow:hidden crea un BFC para que cada .servicio contenga sus floats
     (imagen izq. + texto der.) y no colapse a altura 0 solapándose */
  div#todo div#contenido div#accesosRapidos div.servicio {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }

  div#todo div#contenido div#accesosRapidos div.servicio div.descripcion {
    width: calc(100% - 150px) !important;
  }

  /* En columnas estrechas, justify produce huecos/ríos: alinear a la izquierda */
  div#todo div#contenido div#accesosRapidos div.servicio div.descripcion p,
  div#todo div#contenido div#accesosRapidos div.servicio div.descripcion p.titulo,
  div#todo div#contenido div#accesosRapidos div.servicio div.descripcion p.titulo a {
    text-align: left !important;
  }

  /* Galerías de imágenes: mantienen el tamaño de escritorio (180px),
     centradas y ajustándose en varias filas según el ancho disponible */
  div#todo div#contenido div#accesosRapidos div.imagenesSeccion {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    text-align: center;
  }

  div#todo div#contenido div#accesosRapidos div.imagenesSeccion p {
    width: 180px !important;
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
    vertical-align: top;
    float: none !important;
    margin: 10px !important;
  }

  div#todo div#contenido div#accesosRapidos div.imagenesSeccion p img {
    width: 180px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Lista de accesos / texto interior */
  div#todo div#contenido div#accesosRapidos div#listaAccesos {
    width: 100% !important;
  }

  div#todo div#contenido div#accesosRapidos div#listaAccesos img {
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  div#todo div#contenido div#accesosRapidos div#listaAccesos div#imgYtxt {
    overflow: hidden;
  }

  div#todo div#contenido div#accesosRapidos div#listaAccesos div#imgYtxt p {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
  }

  div#todo div#contenido div#accesosRapidos div#listaAccesos div#ordenanza {
    width: 100% !important;
  }

  div#todo div#contenido div#accesosRapidos div#listaAccesos div#ordenanza img {
    display: block !important;
    float: none !important;
    margin: 0 auto 10px auto !important;
  }

  div#todo div#contenido div#accesosRapidos div#listaAccesos div#ordenanza p {
    width: 100% !important;
    float: none !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* Noticias */
  div#todo div#contenido div#noticiasTrabajos {
    width: 100% !important;
    height: auto !important;
    overflow: hidden; /* contiene las .noticia flotadas */
  }

  div#todo div#contenido div#noticiasTrabajos div.noticia {
    width: 100% !important;
    overflow: hidden; /* contiene la imagen flotada */
  }

  /* La imagen a la izquierda; el texto fluye a su lado y a ancho completo
     debajo (antes .noticia p tenía width:350px fijo y se salía/cortaba) */
  div#todo div#contenido div#noticiasTrabajos div.noticia img {
    float: left !important;
    margin: 0 15px 10px 0 !important;
  }

  div#todo div#contenido div#noticiasTrabajos div.noticia p {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* Formulario de contacto */
  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#intro p input,
  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#intro p textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Google Maps y otros iframes */
  iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 350px !important;
  }

  /* ==========================================================
     Neutralizar los bloques <style> propios de cada página
     (anchos 960/835/455px, alturas y floats fijos de escritorio)
     que provocaban desbordes y solapamientos. Todo acotado a
     #accesosRapidos para no afectar al slider de portada.
     ========================================================== */

  /* Red de seguridad: ningún elemento del contenido supera el ancho */
  div#todo div#contenido div#accesosRapidos * {
    max-width: 100% !important;
  }

  /* Contenedores de maquetación: a ancho completo y sin flotar */
  div#todo div#contenido div#accesosRapidos div#imagenesSeccion,
  div#todo div#contenido div#accesosRapidos div#imgYtxt,
  div#todo div#contenido div#accesosRapidos div#ordenanza2,
  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#bajoPedido,
  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#izquierda,
  div#todo div#contenido div#accesosRapidos div#textoPrincipal div#derecha {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* Galería con ID (#imagenesSeccion) igual que la de clase */
  div#todo div#contenido div#accesosRapidos div#imagenesSeccion {
    text-align: center;
    overflow: hidden;
  }
  div#todo div#contenido div#accesosRapidos div#imagenesSeccion p {
    width: 180px !important;
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
    vertical-align: top;
    float: none !important;
    margin: 10px !important;
  }

  /* Imágenes con float / margin-top negativo que se solapaban
     (p. ej. img.derecha en ingeniería): apiladas y centradas */
  div#todo div#contenido div#accesosRapidos div#imgYtxt img,
  div#todo div#contenido div#accesosRapidos div#imgYtxt img.derecha {
    float: none !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
  }

  /* Párrafos de maquetación con ancho fijo (600/620/700px): que
     fluyan a ancho completo y no floten */
  div#todo div#contenido div#accesosRapidos div#imgYtxt p,
  div#todo div#contenido div#accesosRapidos div#ordenanza2 p,
  div#todo div#contenido div#accesosRapidos div#listaAccesos p {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* Pie de página */
  div#pie { background-image: none !important; }

  footer {
    width: 100% !important;
    height: auto !important;
  }

  footer div#resumenEnlaces {
    width: 100% !important;
    overflow: hidden;
  }

  footer div#resumenEnlaces div.menuPie {
    width: 44% !important;
    float: left;
    margin-left: 2% !important;
    margin-right: 2% !important;
    margin-top: 10px !important;
    box-sizing: border-box;
  }

  footer div#segundaFilaPie,
  footer div#ultimaLinea {
    width: 100% !important;
  }
}

/* ============================================================
   MÓVIL: pantallas menores de 520px
   ============================================================ */
@media screen and (max-width: 519px) {

  div#todo {
    padding: 0 5mm; /* mantiene el margen de ~5mm también en móvil estrecho */
  }

  /* Logo centrado */
  div#todo header div.logotipo {
    float: none;
    display: block;
    margin: 8px auto;
  }

  /* Cabecera derecha: ocupa todo el ancho */
  div#todo header div#cabeceraDerecha {
    width: 100% !important;
    float: none;
    text-align: center;
  }

  div#todo header div#cabeceraDerecha div#menuUno {
    text-align: center;
    width: 100% !important;
  }

  div#todo header div#cabeceraDerecha div#menuUno a {
    font-size: 15px !important;
    margin-left: 4px !important;
  }

  div#todo header div#cabeceraDerecha div#redes {
    text-align: center;
    float: none;
    width: 100% !important;
  }

  /* El slider de portada mantiene la cuadrícula 2x2 (igual que escritorio)
     también en móvil; no se apila en una sola columna */

  /* Sectores: miniatura a tamaño de escritorio (140px) a la izquierda,
     texto a la derecha */
  div#todo div#contenido div#accesosRapidos div.servicio img.imgServicio {
    width: 140px !important;
    height: auto !important;
    float: left !important;
    display: block;
    margin-bottom: 10px;
  }

  div#todo div#contenido div#accesosRapidos div.servicio div.descripcion {
    width: calc(100% - 155px) !important;
    float: right !important;
  }

  /* Galerías: miniaturas a tamaño de escritorio (180px), centradas */
  div#todo div#contenido div#accesosRapidos div.imagenesSeccion p {
    width: 180px !important;
    max-width: 100% !important;
    margin: 10px !important;
    float: none !important;
    display: inline-block;
  }

  /* Imágenes de texto con imagen lateral: apiladas */
  div#todo div#contenido div#accesosRapidos div#listaAccesos div#imgYtxt img {
    float: none !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
  }

  /* Pie: columnas a ancho completo */
  footer div#resumenEnlaces div.menuPie {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 5px;
    border-bottom: 1px solid #eee;
  }

  footer div#resumenEnlaces div.menuPie[style*="width:75px"] {
    width: 100% !important;
  }
}

/* ============================================================
   MENÚ HAMBURGUESA: pantallas de 640px o menos
   ============================================================ */

/* Ocultar el botón en pantallas anchas */
#menuToggle { display: none; }

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

  /* Nav como contenedor relativo para el dropdown */
  div#todo header nav {
    position: relative;
    min-height: 40px;
  }

  /* Ocultar la lista del menú por defecto */
  div#todo header nav ul#menuNavegacion {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    padding: 0 !important;
    background-color: #004b6d;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }

  /* Mostrar cuando está abierto */
  div#todo header nav ul#menuNavegacion.nav-open {
    display: block !important;
  }

  /* Items del menú desplegado */
  div#todo header nav ul#menuNavegacion li {
    display: block !important;
  }

  div#todo header nav ul#menuNavegacion li a {
    display: block !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-left: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  div#todo header nav ul#menuNavegacion li:last-child a {
    border-bottom: none;
  }

  /* Botón hamburguesa */
  #menuToggle {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    float: right;
    margin: 3px 0;
    line-height: 1;
  }

  #menuToggle span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Animación a X cuando está abierto */
  #menuToggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  #menuToggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  #menuToggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* Títulos de apartado y datos de contacto: sin justificar en pantallas
   estrechas, para que no queden huecos grandes entre palabras. */
@media screen and (max-width: 959px) {
  div#todo div#contenido div#accesosRapidos div#listaAccesos p.titulotxt,
  div#todo div#contenido div#accesosRapidos div#listaAccesos div#datos p {
    text-align: left !important;
  }
}

/* Aislamiento acústico, "Propagación de los ruidos": las dos fotos sueltas
   se centran en pantallas estrechas, como el resto de imágenes. */
@media screen and (max-width: 959px) {
  div#todo div#contenido div#accesosRapidos div#listaAccesos div.fotosCentradas {
    text-align: center;
  }
  div#todo div#contenido div#accesosRapidos div#listaAccesos div.fotosCentradas img {
    display: inline-block !important;
    float: none !important;
    vertical-align: top;
    margin: 0 10px 12px !important;
  }
}

/* "Referencias" destacado en el menú superior como botón azul claro, con
   las mismas proporciones respecto al texto en todos los tamaños (em). En
   escritorio la línea azul del fondo de la cabecera está a 25px del borde
   superior: el botón (unos 21px de alto) termina un poco antes. */
@media screen and (min-width: 960px) {
  div#todo header div#cabeceraDerecha div#menuUno {
    width: 440px;
    text-align: right;
  }
}
div#todo header div#cabeceraDerecha div#menuUno a[href="referencias.html"] {
  display: inline-block;
  vertical-align: top;
  margin-top: 1px;
  padding: 0.12em 0.7em;
  line-height: 1.1;
  background: #48a9cc;
  color: #fff;
  border-radius: 0.2em;
}
div#todo header div#cabeceraDerecha div#menuUno a[href="referencias.html"]:hover {
  background: #004b6d;
  color: #fff;
}
@media screen and (max-width: 640px) {
  div#todo header div#cabeceraDerecha div#menuUno a[href="referencias.html"] {
    vertical-align: baseline;
    margin-top: 6px;
    margin-bottom: 6px;
  }
}