/* =========================================================
   BYGRACE v1.8 — ESTABILIDAD VISUAL / FOTOS SIN CORTE
   Capa final que corrige la composición acumulada de v1.4-v1.7.
   Principio: el contenedor tiene tamaño estable y la foto se adapta
   con object-fit: contain; nunca se recorta para llenar el espacio.
   ========================================================= */

html{scroll-padding-top:92px}
body{overflow-x:hidden}
.container{max-width:1220px}
section[id]{scroll-margin-top:88px}
img{max-width:100%;display:block}

/* Header siempre blanco y por encima de cualquier sección */
.site-header{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid rgba(16,24,32,.09)!important;
  box-shadow:0 8px 24px rgba(16,24,32,.06);
  backdrop-filter:blur(14px);
}
.main-nav{color:var(--ink)!important}
.main-nav>a:not(.nav-cta){color:#26323d!important}
.menu-toggle span{background:var(--ink)!important}

/* Evita que cualquier grid fuerce el ancho del viewport */
.product-cards,.application-grid,.tech-grid,.truck-gallery,.custom-gallery,
.detail-grid,.process-grid,.manual-grid,.app-showcase,.contact-grid,.footer-grid{min-width:0}
.product-card,.application-card,.tech-card,.truck-gallery figure,.custom-gallery>div,
.detail-grid>*,.process-grid>*,.manual-grid>*,.app-showcase>*{min-width:0}

/* Regla general para fotografías: siempre completas */
.hero-photo img,.product-card img,.image-frame img,.app-float img,
.application-card img,.process-photo img,.tech-card img,.mini-pair img,
.truck-gallery img,.manual-photo img,.phones img,.custom-gallery img{
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.product-card:hover img{transform:none!important}

/* Hero: marco estable sin crop */
.hero-photo{background:#111a22!important}
.hero-photo img{width:100%;height:100%!important;padding:0!important}

/* Tarjetas de producto: la imagen completa dentro de un fondo oscuro */
.product-card{background:#15202a!important}
.product-card img{width:100%;height:100%!important;padding:8px!important}
.product-overlay{background:linear-gradient(180deg,rgba(4,10,16,.02) 30%,rgba(4,10,16,.94) 100%)!important}

/* AquaGrace: foto y captura del aplicativo */
.image-frame{background:#f3f5f2!important}
.image-frame img{width:100%;height:100%!important;padding:8px!important}
.app-float{background:#111820!important}
.app-float img{width:100%;height:100%!important;padding:0!important}

/* Aplicaciones: mismo alto visual, sin cortar fotos */
.application-grid{align-items:stretch}
.application-card{display:grid;grid-template-rows:320px auto;overflow:hidden;border:1px solid rgba(16,24,32,.08)}
.application-card img{width:100%;height:320px!important;padding:10px!important;background:#f7f8f5!important}
.application-card>div{height:100%}

/* Cómo funciona */
.process-photo{background:#f4f5f2!important;overflow:hidden}
.process-photo img{width:100%;height:100%!important;padding:10px!important}

/* Tecnología: cuatro tarjetas perfectamente alineadas */
.tech-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.tech-card{
  display:grid!important;
  grid-template-rows:300px auto!important;
  min-height:500px;
  overflow:hidden;
  background:#1a252f!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
.tech-card>img,.app-tech-card>img{
  width:100%!important;
  height:300px!important;
  min-height:300px!important;
  max-height:300px!important;
  padding:12px!important;
  background:#111a22!important;
}
.tech-card>div{padding:22px!important}
.tech-card h3{margin:10px 0 8px}
.tech-card p{margin:0}

/* Smart Truck: fotos completas con cajas de igual tamaño */
.mini-pair{align-items:stretch}
.mini-pair img{width:100%;height:260px!important;padding:8px!important;background:#fff!important}
.truck-gallery{align-items:stretch!important}
.truck-gallery figure{display:flex!important;align-items:center;justify-content:center;min-height:460px;background:#fff!important;overflow:hidden}
.truck-gallery img{width:100%;height:460px!important;padding:10px!important;background:#fff!important}
.truck-gallery figcaption{z-index:2}

/* Sonda manual */
.manual-photo{background:#111820!important;overflow:hidden}
.manual-photo img{width:100%;height:100%!important;padding:10px!important}

/* Aplicativo da Sonda Manual: três telas originais, completas e independentes do AquaGrace */
.phones{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:start!important;
  overflow:visible!important;
  background:transparent!important;
}
.phones img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  border:5px solid #242e37!important;
  border-radius:14px!important;
  padding:0!important;
  background:#111820!important;
}

/* Proyectos: tarjetas homogéneas con foto completa */
.custom-gallery{align-items:stretch}
.custom-gallery>div{min-height:390px;background:#f7f8f5!important}
.custom-gallery img{width:100%;height:390px!important;padding:8px!important;background:#f7f8f5!important}

/* Si una ruta antigua guardada en el Builder falla, no muestra el icono roto mientras JS recupera el default */
img.bg-image-recovering{opacity:.35!important}
img.bg-image-missing{opacity:0!important}

/* -----------------------------------------
   TABLET
   ----------------------------------------- */
@media(max-width:1080px){
  .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tech-card{grid-template-rows:330px auto!important}
  .tech-card>img,.app-tech-card>img{height:330px!important;min-height:330px!important;max-height:330px!important}
  .truck-gallery figure{min-height:410px}
  .truck-gallery img{height:410px!important}
}

/* -----------------------------------------
   CELULAR / TABLET VERTICAL
   ----------------------------------------- */
@media(max-width:860px){
  html{scroll-padding-top:78px}
  .container{width:calc(100% - 30px)!important}
  .section{padding:70px 0}

  .site-header{padding-top:env(safe-area-inset-top)}
  .header-inner{height:72px!important;gap:12px}
  .brand{max-width:calc(100% - 60px)}
  .brand img{height:40px!important;max-width:205px!important}
  .menu-toggle{display:flex!important;background:#f4f6f4!important;border-radius:4px}
  .main-nav{
    top:calc(72px + env(safe-area-inset-top))!important;
    inset-inline:0!important;
    bottom:auto!important;
    max-height:calc(100dvh - 72px - env(safe-area-inset-top));
    overflow-y:auto;
    background:#fff!important;
    color:var(--ink)!important;
  }

  .hero{padding-top:108px!important;min-height:auto!important}
  .hero-grid{grid-template-columns:1fr!important;gap:32px!important;min-height:0!important}
  .hero-media{min-height:0!important;display:flex!important;flex-direction:column!important;gap:14px!important}
  .hero-photo{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:4/5;overflow:hidden}
  .hero-photo img{height:100%!important}
  .live-card{position:relative!important;left:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;margin:0!important}

  .split,.detail-grid,.detail-grid.reverse,.process-grid,.manual-grid,.custom-grid,.contact-grid,.app-showcase{
    grid-template-columns:1fr!important;
    gap:32px!important;
  }

  .product-cards,.application-grid{grid-template-columns:1fr!important}
  .product-card{height:470px!important}

  /* El aplicativo ya no se superpone a la foto en celular */
  .detail-visual{min-height:0!important;display:flex!important;flex-direction:column!important;gap:16px!important}
  .image-frame,.image-frame.tall,.image-frame.wide{height:auto!important;min-height:0!important;margin:0!important}
  .image-frame img{height:auto!important;max-height:none!important}
  .app-float{
    position:relative!important;
    inset:auto!important;
    align-self:center!important;
    width:min(72%,280px)!important;
    height:auto!important;
    aspect-ratio:610/1356!important;
    margin:0 auto!important;
    border-width:5px!important;
  }
  .app-float img{height:100%!important}

  .application-card{grid-template-rows:300px auto!important}
  .application-card img{height:300px!important}

  .process-photo{height:520px!important}
  .process-copy{padding:0!important}

  .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .tech-card{grid-template-rows:300px auto!important;min-height:480px}
  .tech-card>img,.app-tech-card>img{height:300px!important;min-height:300px!important;max-height:300px!important}

  .truck-gallery{grid-template-columns:1fr 1fr!important;gap:14px!important}
  .truck-gallery figure{min-height:390px!important}
  .truck-gallery img{height:390px!important}
  .truck-copy{grid-column:1/-1!important;order:-1!important}

  .manual-photo{height:520px!important}
  .phones{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  .custom-gallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important}
  .custom-gallery>div{min-height:330px!important}
  .custom-gallery img{height:330px!important}
}

/* -----------------------------------------
   CELULARES
   ----------------------------------------- */
@media(max-width:900px) and (min-width:581px){
  .phones{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .phones img:last-child{grid-column:1/-1;width:min(50%,460px)!important;justify-self:center}
}

@media(max-width:580px){
  html{scroll-padding-top:72px}
  .container{width:calc(100% - 24px)!important}
  .section{padding:58px 0!important}
  .header-inner{height:68px!important}
  .brand img{height:36px!important;max-width:178px!important}
  .main-nav{top:calc(68px + env(safe-area-inset-top))!important}

  .hero{padding-top:94px!important}
  .hero h1{font-size:clamp(42px,12vw,54px)!important}
  .hero-photo{aspect-ratio:auto!important}
  .hero-photo img{height:auto!important;max-height:none!important}
  .live-grid strong{font-size:18px}

  .product-card{height:430px!important;min-height:0!important}
  .application-card{grid-template-rows:260px auto!important}
  .application-card img{height:260px!important}

  .process-photo{height:auto!important}
  .process-photo img{height:auto!important;max-height:none!important}
  .process-badge{position:relative!important;right:auto!important;bottom:auto!important;margin:0 0 0 auto}

  .tech-grid{grid-template-columns:1fr!important;gap:14px!important}
  .tech-card{grid-template-rows:330px auto!important;min-height:0!important}
  .tech-card>img,.app-tech-card>img{height:330px!important;min-height:330px!important;max-height:330px!important}

  .mini-pair{grid-template-columns:1fr 1fr!important}
  .mini-pair img{height:200px!important}
  .truck-gallery{grid-template-columns:1fr!important}
  .truck-gallery figure{min-height:0!important}
  .truck-gallery img{height:auto!important;max-height:520px!important}

  .manual-photo{height:auto!important}
  .manual-photo img{height:auto!important;max-height:none!important}
  .phones{grid-template-columns:1fr!important;gap:16px!important}
  .phones img{width:min(100%,460px)!important;margin:auto!important}

  .custom-gallery{grid-template-columns:1fr!important;gap:12px!important}
  .custom-gallery>div{min-height:0!important}
  .custom-gallery img{height:auto!important;max-height:520px!important}

  .footer-grid{grid-template-columns:1fr!important}
  .contact-data{grid-template-columns:1fr!important}

  .wa-connect{left:max(12px,env(safe-area-inset-left))!important;bottom:max(12px,env(safe-area-inset-bottom))!important}
  .wa-panel{width:min(320px,calc(100vw - 24px))!important}
  .back-top{right:max(12px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important}
}

@media(max-width:390px){
  .container{width:calc(100% - 20px)!important}
  .brand img{height:34px!important;max-width:164px!important}
  .tech-card{grid-template-rows:300px auto!important}
  .tech-card>img,.app-tech-card>img{height:300px!important;min-height:300px!important;max-height:300px!important}
  .mini-pair{grid-template-columns:1fr!important}
  .mini-pair img{height:auto!important;max-height:360px!important}
}


/* =========================================================
   BYGRACE v2.1 — TARJETA 02 / APLICATIVO CON DOS CAPTURAS
   Ambas pantallas se muestran completas dentro de la misma tarjeta.
   ========================================================= */
.tech-card.app-tech-card{
  grid-template-rows:300px auto!important;
}
.tech-app-media{
  width:100%;
  height:300px;
  min-height:300px;
  max-height:300px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  justify-items:center;
  gap:8px;
  padding:12px 10px!important;
  background:#111a22;
  overflow:hidden;
}
.tech-app-media>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:276px!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:7px;
  background:transparent!important;
  box-shadow:none!important;
}

@media(max-width:1080px){
  .tech-card.app-tech-card{grid-template-rows:330px auto!important}
  .tech-app-media{height:330px;min-height:330px;max-height:330px}
  .tech-app-media>img{max-height:306px!important}
}
@media(max-width:860px){
  .tech-card.app-tech-card{grid-template-rows:300px auto!important}
  .tech-app-media{height:300px;min-height:300px;max-height:300px;padding:10px 8px!important;gap:7px}
  .tech-app-media>img{max-height:280px!important}
}
@media(max-width:900px) and (min-width:581px){
  .phones{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .phones img:last-child{grid-column:1/-1;width:min(50%,460px)!important;justify-self:center}
}

@media(max-width:580px){
  .tech-card.app-tech-card{grid-template-rows:360px auto!important}
  .tech-app-media{height:360px;min-height:360px;max-height:360px;padding:12px 14px!important;gap:12px}
  .tech-app-media>img{max-height:336px!important}
}
@media(max-width:390px){
  .tech-card.app-tech-card{grid-template-rows:330px auto!important}
  .tech-app-media{height:330px;min-height:330px;max-height:330px;padding:10px 9px!important;gap:8px}
  .tech-app-media>img{max-height:310px!important}
}