/* Responsive Design - Argenprop */

/* Mobile First Approach */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
  
  /* Eliminar scroll horizontal */
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: auto !important;
    height: auto !important;
    overflow-y: visible !important;
  }
  
  html {
    overflow-x: hidden !important;
    min-height: auto !important;
    height: auto !important;
    overflow-y: visible !important;
  }
  
  /* Header y navegación */
  header {
    height: auto;
    min-height: 80px;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  #barranav {
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  li.logo {
    float: none;
    padding: 10px 0;
    text-align: center;
  }
  
  li.logo img {
    max-width: 200px;
    height: auto;
  }
  
  li.botones {
    float: none;
    padding: 8px 0;
    text-align: center;
    width: 100%;
  }
  
  /* Contenido principal */
  #contenedor {
    width: 95%;
    margin: 20px auto;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  .contenedor-contacto {
    width: 95% !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }
  
  .contactoizq, .google-maps {
    flex: none !important;
    max-width: 100% !important;
    min-width: auto !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Asegurar que el contenedor principal de contacto ocupe todo el ancho */
  #contenedor.contenedor-contacto {
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    flex-direction: column !important;
  }
  
  /* Elementos específicos del contacto en móvil */
  .contactoizq {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    display: block !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .google-maps {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Asegurar que el iframe de Google Maps ocupe todo el ancho */
  .google-maps iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* SOBRESCRIBIR ALTURA LIMITADA DEL CONTENEDOR DE CONTACTO EN MÓVIL */
  #contenedor.contenedor-contacto {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Asegurar que el contenedor de contacto no tenga límites de altura */
  .contenedor-contacto {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Asegurar que el iframe tenga altura suficiente */
  .google-maps iframe {
    min-height: 300px !important;
    height: 300px !important;
    max-height: none !important;
  }
  
  /* Footer responsive - REGLAS UNIFICADAS */
  footer {
    height: auto !important;
    min-height: 200px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  #barrafooter {
    padding: 20px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    min-height: 200px !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  #barrafooter > div {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 10px !important;
    width: 95% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    min-height: 180px !important;
    height: auto !important;
  }
  
  #barrafooter > div > div {
    min-width: auto !important;
    max-width: 100% !important;
    flex: none !important;
    text-align: center !important;
    padding: 10px !important;
  }
  
  /* Google Maps en footer */
  #barrafooter iframe {
    height: 150px !important;
  }
  
  /* Ajustes específicos para el footer en móviles */
  #barrafooter a[href*="wa.me"] {
    margin: 5px auto !important;
    display: inline-flex !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
  }
  
  #barrafooter a[href^="mailto:"] {
    font-size: 14px !important;
    word-break: break-all !important;
    display: block !important;
    margin: 2px 0 !important;
  }
  
  /* Ajustar el SVG de WhatsApp en el footer */
  #barrafooter svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Footer general */
  footer {
    height: auto !important;
    min-height: 200px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Botón flotante de WhatsApp */
  #whatsapp-float {
    right: 20px !important;
    bottom: 20px !important;
  }
  
  #whatsapp-float img {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Textos */
  .texto, .texto1, .texto2 {
    font-size: 14px;
    line-height: 1.4;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  /* Botones */
  button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 14px;
  }
  
  /* Imágenes */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* ESPECÍFICO PARA SERVICIOS.HTML */
  
  /* Contenedor principal de servicios - ancho consistente */
  .contenedor-servicios {
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  /* ENCABEZADO AZUL - CORREGIR TEXTO QUE SE CORTA */
  #barraencabezado {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 10px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: 120px !important;
    justify-content: flex-start !important;
    max-width: 100vw !important;
  }
  
  /* Contenedor del icono y título - ALINEACIÓN HORIZONTAL */
  .paddingleft:first-child {
    float: left !important;
    margin-bottom: 10px !important;
    width: auto !important;
    margin-top: 10px !important;
    margin-right: 15px !important;
  }
  
  /* Segundo paddingleft (el texto) */
  .paddingleft:nth-child(2) {
    float: left !important;
    margin-top: 10px !important;
    width: calc(100% - 75px) !important;
    box-sizing: border-box !important;
  }
  
  /* Icono de hélice */
  .imagenchica {
    flex-shrink: 0 !important;
    max-width: 60px !important;
    height: auto !important;
    margin: 0 !important;
    vertical-align: top !important;
  }
  
  /* Recuadros azules en servicios - TEXTO SIN CORTAR */
  .barraalpie, .barraalpie-a, .barraalpie-b, .barraalpie-c, .barraalpie-g {
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 20px 15px !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw !important;
  }
  
  /* Texto específico que se corta - FORZAR SALTO DE LÍNEA */
  .resaltado2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  
  /* Texto "desde 2007..." - SIN CORTAR EN RECUADRO GRIS */
  .fondogris .texto {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    font-size: 18px !important;
    text-align: center !important;
  }
  
  /* Contenedor gris específico */
  .fondogris {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 80px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  .contenedor2 {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    text-align: center !important;
  }
  
  /* Imágenes en servicios - centradas */
  .flotaizq {
    float: none !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    width: 100% !important;
  }
  
  .flotaizq img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Centrar específicamente la imagen helice-a.jpg */
  .helice-servicio-especial-a {
    text-align: center !important;
    width: 100% !important;
  }
  
  .helice-servicio-especial-a img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Centrar específicamente la imagen helice-b.jpg */
  .helice-servicio-especial-b {
    text-align: center !important;
    width: 100% !important;
  }
  
  .helice-servicio-especial-b img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Centrar específicamente la imagen helice-c.jpg */
  .helice-servicio-especial-c {
    text-align: center !important;
    width: 100% !important;
  }
  
  .helice-servicio-especial-c img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Centrar específicamente la imagen helice-d.jpg */
  .helice-servicio-especial-g {
    text-align: center !important;
    width: 100% !important;
  }
  
  .helice-servicio-especial-g img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Texto en servicios - ancho completo y sin cortar */
  .flotader1 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Contenedor de servicios */
  #azul {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  /* Sección de logos - CENTRAR TODOS LOS LOGOS */
  #marcas {
    text-align: center !important;
    width: 100% !important;
    margin: 20px auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    padding: 20px 10px !important;
  }
  
  #marcas img {
    margin: 10px !important;
    max-width: 120px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  
  /* Logos específicos - ALINEAR COMO EL SEGUNDO */
  #marcas .marcas {
    margin: 10px !important;
    max-width: 120px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
    padding: 0 !important;
  }
  
  #marcas .central {
    margin: 10px !important;
    max-width: 120px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
    padding: 0 !important;
  }
  
  /* Texto centrado en servicios */
  .texto {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .seccion {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .descripcion {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    clear: both !important;
  }
  
  /* Ajustar altura del footer para servicios - eliminar espacio blanco */
  /* footer {
    height: auto !important;
    min-height: 200px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  #barrafooter {
    min-height: 200px !important;
    height: auto !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  #barrafooter > div {
    min-height: 180px !important;
    height: auto !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  } */
  
  /* Asegurar que el footer ocupe todo el espacio */
  body {
    min-height: auto !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  /* Contenedor principal para que ocupe todo el alto */
  #contenedor {
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* ESPECÍFICO PARA INDEX.HTML - MÓVIL */
  
  /* Contenedor principal de inicio - ancho consistente */
  .contenedor-inicio {
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Sobrescribir la altura limitada del article */
  article {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  
  /* Sección "PONEMOS LO MEJOR..." - centrar mejor */
  #encabezado {
    margin-top: -6px !important;
  }
  
  #barraencabezado {
    padding-top: 106px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #barraencabezado .paddingleft {
    text-align: center !important;
    width: 100% !important;
    float: none !important;
    margin: 5px 0 !important;
  }
  
  #barraencabezado .imagenchica {
    margin: 0 auto !important;
    display: block !important;
  }
  
  #barraencabezado .seccion {
    text-align: center !important;
    margin: 10px 0 !important;
  }
  
  #barraencabezado .descripcion {
    text-align: center !important;
    margin: 10px 0 !important;
    padding: 0 10px !important;
  }
  
  /* Bloques de servicios en index */
  .bloqueresaltado {
    width: 100% !important;
    margin: 2px 0 2px 0 !important;
    padding: 8px 15px !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw !important;
    text-align: center !important;
  }
  
  .bloqueresaltado img {
    max-width: 80px !important;
    height: auto !important;
    margin: 0 auto 8px auto !important;
    display: block !important;
  }
  
  .bloqueresaltado .resaltado {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    font-size: 18px !important;
    margin: 5px 0 !important;
    padding: 0 !important;
  }
  
  .bloqueresaltado p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    font-size: 14px !important;
    margin: 5px 0 !important;
    padding: 0 !important;
  }
  
  /* Sección gris en index */
  .fondogris .texto {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    font-size: 18px !important;
    text-align: center !important;
  }
  
  .fondogris {
    min-height: auto !important;
    height: auto !important;
    padding: 20px 10px !important;
  }
  
  .contenedorx {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    text-align: center !important;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Imágenes en la sección gris de index */
  .contenedorx img {
    max-width: 100% !important;
    height: auto !important;
    margin: 10px auto !important;
    display: block !important;
  }
  
  /* Centrar específicamente las imágenes foto-01, foto-02, foto-03 */
  .contenedorx .pad10der {
    float: none !important;
    text-align: center !important;
    margin: 10px auto !important;
    display: none !important;
  }
  
  .contenedorx .pad20top {
    margin-top: 20px !important;
    display: none !important;
  }
  
  /* Texto en index */
  .texto, .texto2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    font-size: 16px !important;
    text-align: center !important;
    margin: 15px 0 !important;
  }
  
  /* Ocultar la sección "Desde 2007..." en index */
  .contenedor-inicio .texto2 {
    display: none !important;
  }
  
  /* Sección de agencias en index - mover fuera del contenedor */
  #agencias {
    text-align: center !important;
    width: 100% !important;
    margin: 30px auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    padding: 40px 10px !important;
    min-height: 200px !important;
    position: relative !important;
    z-index: 100 !important;
  }
  
  #agencias img {
    margin: 15px !important;
    max-width: 140px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  
  #agencias .marcas {
    margin: 15px !important;
    max-width: 140px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
    padding: 0 !important;
  }
  
  /* Footer con z-index menor para que esté por debajo de las agencias */
  /* footer {
    position: relative !important;
    z-index: 1 !important;
  }
  
  #barrafooter {
    position: relative !important;
    z-index: 1 !important;
  } */
  
  /* ESPECÍFICO PARA NOSOTROS.HTML - MÓVIL */
  
  /* Contenedor principal de nosotros - ancho consistente */
  .contenedor-nosotros {
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Sobrescribir la altura limitada del article en nosotros */
  .contenedor-nosotros article {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Asegurar que el contenido de nosotros no se corte */
  #contenedor.contenedor-nosotros {
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Asegurar que el footer esté completo y no se corte */
  footer {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 200px !important;
  }
  
  #barrafooter {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 200px !important;
  }
  
  /* Sección "QUIENES SOMOS..." - centrar mejor */
  #encabezado {
    margin-top: -6px !important;
  }
  
  #barraencabezado {
    padding-top: 106px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #barraencabezado .paddingleft {
    text-align: center !important;
    width: 100% !important;
    float: none !important;
    margin: 5px 0 !important;
  }
  
  #barraencabezado .imagenchica {
    margin: 0 auto !important;
    display: block !important;
  }
  
  #barraencabezado .seccion {
    text-align: center !important;
    margin: 10px 0 !important;
  }
  
  #barraencabezado .descripcion {
    text-align: center !important;
    margin: 10px 0 !important;
    padding: 0 10px !important;
  }
  
  /* Sección gris en nosotros */
  .fondogris .texto2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    word-break: normal !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    text-align: left !important;
    margin: 10px 0 !important;
  }
  
  .fondogris {
    min-height: auto !important;
    height: auto !important;
    padding: 20px 10px !important;
  }
  
  .contenedor2 {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    text-align: left !important;
    max-width: 100vw !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Sección con aside en nosotros */
  .seccionconaside {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin: 20px 0 !important;
    display: block !important;
  }
  
  .descripciontestimonio {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    display: block !important;
  }
  
  /* Reglas específicas para la sección con múltiples clases */
  .seccionconaside.izquierda.descripciontestimonio {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    margin: 20px 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
  }
  
  .descripciontestimoniotitulo {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    font-size: 18px !important;
    margin: 15px 0 !important;
    padding: 0 10px !important;
    text-align: left !important;
  }
  
  /* Aside en nosotros */
  .derecha {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin: 20px 0 !important;
    display: none !important;
  }
  
  .derecha img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: none !important;
  }
  
  /* Forzar centrado de la sección izquierda */
  .izquierda {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin: 20px 0 !important;
    display: block !important;
  }
  
  /* Bloques de agencias en nosotros */
  .barraalpie {
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 30px 15px !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw !important;
    text-align: center !important;
    min-height: 200px !important;
    height: auto !important;
  }
  
  .barraalpie.anac,
  .barraalpie.dinacia,
  .barraalpie.dgac,
  .barraalpie.digamc,
  .barraalpie.hartzell {
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 30px 15px !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw !important;
    text-align: center !important;
    min-height: 200px !important;
    height: auto !important;
  }
  
  /* Imágenes de agencias en nosotros - LOGO ARRIBA */
  .flotaizq {
    float: none !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
  }
  
  .flotaizq img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  .marcasennosotros {
    text-align: center !important;
    margin: 10px 0 !important;
    display: block !important;
  }
  
  .marcasennosotros img {
    max-width: 120px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Texto de validaciones en nosotros - TEXTO ABAJO */
  .validaciones {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    margin-top: 0 !important;
    display: block !important;
  }
  
  .validaciones .texto1 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    font-size: 16px !important;
    margin: 10px 0 !important;
    padding: 0 10px !important;
    text-align: left !important;
  }
  
  .validaciones p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    word-break: normal !important;
    font-size: 14px !important;
    margin: 8px 0 !important;
    padding: 0 10px !important;
    text-align: left !important;
  }
  
  .validaciones small {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    font-size: 12px !important;
    margin: 5px 0 !important;
    padding: 0 10px !important;
    text-align: left !important;
  }
  
  /* Tabla en Hartzell */
  .validaciones table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    font-size: 12px !important;
    border-collapse: collapse !important;
  }
  
  .validaciones table td {
    padding: 5px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }
  
  /* Mejorar específicamente la tabla de Hartzell */
  .barraalpie.hartzell .validaciones table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px auto !important;
    font-size: 14px !important;
    border-collapse: collapse !important;
  }
  
  .barraalpie.hartzell .validaciones table td {
    padding: 8px 4px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    text-align: center !important;
    vertical-align: top !important;
  }
  
  /* Asegurar que el contenido de Hartzell no se corte */
  .barraalpie.hartzell {
    min-height: 300px !important;
    height: auto !important;
    padding: 35px 15px !important;
    margin: 25px 0 !important;
  }
  
  .barraalpie.hartzell .validaciones {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    margin-top: 0 !important;
    padding: 0 10px !important;
    display: block !important;
  }
  
  /* Asegurar que todo el contenido de agencias sea visible */
  #encabezado2 {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  #encabezado2 .contenedor2 {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Asegurar que el body permita todo el contenido */
  body {
    min-height: auto !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Texto general en nosotros */
  .texto2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    word-break: normal !important;
    font-size: 16px !important;
    text-align: left !important;
    margin: 10px 0 !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  
  #barranav {
    width: 95%;
    padding: 15px;
  }
  
  li.logo {
    padding-right: 100px;
  }
  
  .contenedor-contacto {
    width: 95% !important;
    gap: 30px !important;
  }
  
  #barrafooter > div {
    gap: 30px !important;
    padding: 15px !important;
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  #whatsapp-float {
    right: 30px !important;
    bottom: 30px !important;
  }
  
  /* ESPECÍFICO PARA SERVICIOS.HTML - TABLETS */
  .contenedor-servicios {
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  .barraalpie, .barraalpie-a, .barraalpie-b, .barraalpie-c, .barraalpie-g {
    width: 100% !important;
    margin: 15px 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
  
  .flotaizq {
    float: left !important;
    width: 30% !important;
  }
  
  .flotader1 {
    float: right !important;
    width: 65% !important;
    box-sizing: border-box !important;
  }
  
  footer {
    height: auto !important;
    min-height: 350px !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  
  #barranav {
    width: 95%;
  }
  
  li.logo {
    padding-right: 150px;
  }
  
  .contenedor-contacto {
    width: 95% !important;
  }
  
  #barrafooter > div {
    gap: 40px !important;
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  /* ESPECÍFICO PARA SERVICIOS.HTML - TABLETS GRANDES */
  .contenedor-servicios {
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  .barraalpie, .barraalpie-a, .barraalpie-b, .barraalpie-c, .barraalpie-g {
    width: 100% !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
  }
  
  .flotaizq {
    float: left !important;
    width: 25% !important;
  }
  
  .flotader1 {
    float: right !important;
    width: 70% !important;
    box-sizing: border-box !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  
  #barranav {
    width: 980px;
  }
  
  .contenedor-contacto {
    width: 980px !important;
  }
  
  .contenedor-servicios {
    width: 980px !important;
    margin: 0 auto !important;
  }
  
  #barrafooter > div {
    width: 980px !important;
    margin: 0 auto !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  
  #barranav {
    width: 1200px;
  }
  
  .contenedor-contacto {
    width: 1200px !important;
  }
  
  .contenedor-servicios {
    width: 1200px !important;
    margin: 0 auto !important;
  }
  
  #barrafooter > div {
    width: 1200px !important;
    margin: 0 auto !important;
  }
}

/* Ajustes específicos para el footer en móviles */
@media (max-width: 767.98px) {
  
  /* Ocultar elementos innecesarios en móviles */
  .mobile320 {
    display: block !important;
  }
  
  /* Ajustar espaciado en footer */
  #barrafooter > div > div {
    text-align: center;
  }
  
  /* WhatsApp button en footer */
  #barrafooter a[href*="wa.me"] {
    margin: 5px auto;
    display: inline-flex !important;
  }
  
  /* Emails en footer */
  #barrafooter a[href^="mailto:"] {
    font-size: 14px;
    word-break: break-all;
  }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 375px) {
  
  #barranav {
    padding: 5px;
  }
  
  li.botones {
    font-size: 13px;
    padding: 5px 0;
  }
  
  .texto, .texto1, .texto2 {
    font-size: 13px;
  }
  
  h1 {
    font-size: 20px;
  }
  
  h2 {
    font-size: 18px;
  }
  
  #whatsapp-float {
    right: 15px !important;
    bottom: 15px !important;
  }
  
  #whatsapp-float img {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Footer en pantallas muy pequeñas */
  #barrafooter > div > div {
    padding: 8px;
  }
  
  #barrafooter a[href*="wa.me"] {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  
  #barrafooter a[href^="mailto:"] {
    font-size: 12px;
  }
  
  #barrafooter svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* ESPECÍFICO PARA SERVICIOS.HTML - PANTALLAS MUY PEQUEÑAS */
  .barraalpie, .barraalpie-a, .barraalpie-b, .barraalpie-c, .barraalpie-g {
    padding: 15px !important;
    margin: 15px 0 !important;
  }
  
  .flotaizq img {
    max-width: 80% !important;
  }
  
  .flotader1 {
    font-size: 13px !important;
  }
  
  .resaltado2 {
    font-size: 16px !important;
  }
  
  /* Footer más alto en pantallas muy pequeñas */
  footer {
    min-height: 450px !important;
  }
  
  #barrafooter {
    min-height: 450px !important;
  }
}