/* Adaptación a tableta y celular. El diseño de Claude Design es de escritorio (estilos en línea);
   aquí se sobreescriben solo en pantallas angostas, sin tocar los componentes. */
html,body{overflow-x:hidden}
#root img,#root iframe{max-width:100%}

@media (max-width: 900px){
  /* Márgenes laterales de 56px → 20px */
  #root [style*="padding: 80px 56px;"]{padding:48px 20px !important}
  #root [style*="padding: 80px 56px 72px"]{padding:48px 20px 40px !important}
  #root [style*="padding: 0px 56px 80px"]{padding:0 20px 48px !important}
  #root [style*="padding: 0px 56px 96px"]{padding:0 20px 56px !important}
  #root [style*="padding: 56px 56px 88px"]{padding:36px 20px 56px !important}
  #root [style*="padding: 40px 56px 88px"]{padding:24px 20px 56px !important}
  #root [style*="padding: 48px 56px 56px"]{padding:36px 20px 40px !important}
  #root [style*="padding: 32px 36px"],#root [style*="padding: 34px 36px"]{padding:24px 20px !important}

  /* Rejillas a una sola columna */
  #root [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
  /* Íconos de servicios: dos columnas */
  #root [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* Miniaturas de la galería: siguen en una fila */
  #root [style*="grid-template-columns: repeat("][style*="gap: 12px"]{grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px !important}
  /* Campos del formulario de contacto lado a lado */
  #root form [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important;gap:14px !important}

  /* Portada */
  #root [style*="min-height: 580px"]{min-height:0 !important}
  #root [style*="min-height: 580px"] > div:last-child{min-height:480px}
  #root [style*="height: 420px"]{height:240px !important}
  #root h1[style*="font-size: 56px"]{font-size:38px !important}
  #root [style*="font-size: 44px"]{font-size:32px !important}

}

/* Pantallas medianas (laptops pequeñas, tabletas horizontales): compactar el encabezado */
@media (min-width: 1101px) and (max-width: 1240px){
  #root [style*="padding: 18px 56px"]{padding:16px 24px !important;gap:20px !important}
  #root > div > div:first-child [style*="gap: 28px"]{gap:12px !important}
  #root [style*="padding: 13px 18px"]{padding:12px 12px !important}
  #root [style*="padding: 80px 56px"],#root [style*="56px 56px 88px"]{padding-left:32px !important;padding-right:32px !important}
}

/* Hasta 1100px: logo arriba y menú en una fila desplazable */
@media (max-width: 1100px){
  #root [style*="padding: 18px 56px"]{padding:12px 20px !important;flex-wrap:wrap;gap:10px !important}
  #root > div > div:first-child [style*="gap: 28px"]{
    gap:18px !important;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none}
  #root > div > div:first-child [style*="gap: 28px"]::-webkit-scrollbar{display:none}
  #root > div > div:first-child [style*="gap: 28px"] > *{flex-shrink:0}
}