/* Marco único para todas las imágenes de las páginas de producto. */
.product-feature-layout>.product-feature-image,
.hero-image,
.section-visual,
.device img{
  border:10px solid #fff;
  border-radius:30px;
  background:#fff;
  box-shadow:0 30px 80px rgba(25,18,28,.18);
}
.product-feature-layout>.product-feature-image img,
.hero-image img,
.section-visual img,
.device img{
  object-fit:contain;
  object-position:center;
  background:#fff;
  border-radius:14px;
}
.section-visual{padding:10px;}
.section-visual img{width:100%;height:280px;min-height:0;}
.device img{padding:10px;}
@media(max-width:850px){
  .section-visual{padding:8px;border-radius:24px;}
  .section-visual img{height:210px;min-height:0;}
  .device img{border-radius:24px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-image,.device img{transition:none;}
}

/* NeoControl y NeoTemp usan un marco más ligero, manteniendo la misma proporción visual. */
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image,
:is(.product-neocontrol,.product-neotemp) .hero-image,
:is(.product-neocontrol,.product-neotemp) .section-visual,
:is(.product-neocontrol,.product-neotemp) .device img{
  border-width:4px;
  border-radius:24px;
}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image{padding:4px;}
:is(.product-neocontrol,.product-neotemp) .section-visual{padding:4px;}
:is(.product-neocontrol,.product-neotemp) .device img{padding:4px;}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout{align-items:stretch;}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image{align-self:stretch;height:auto;min-height:0;padding:3px;border-width:3px;}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image img{flex:1;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;}
:is(.product-neocontrol,.product-neotemp) .hero-image,:is(.product-neocontrol,.product-neotemp) .section-visual,:is(.product-neocontrol,.product-neotemp) .device img{border-width:3px;}
:is(.product-neocontrol,.product-neotemp) .section-visual,:is(.product-neocontrol,.product-neotemp) .device img{padding:3px;}

/* NeoControl y NeoTemp: imagen limpia, completa y sin marco. */
:is(.product-neocontrol,.product-neotemp) .product-feature-layout{align-items:start;}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image,
:is(.product-neocontrol,.product-neotemp) .hero-image,
:is(.product-neocontrol,.product-neotemp) .section-visual,
:is(.product-neocontrol,.product-neotemp) .device img{
  align-self:start;
  height:auto;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image img,
:is(.product-neocontrol,.product-neotemp) .hero-image img,
:is(.product-neocontrol,.product-neotemp) .section-visual img,
:is(.product-neocontrol,.product-neotemp) .device img{
  flex:none;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  padding:0;
  border:0;
  border-radius:0;
  object-fit:contain;
  background:transparent;
}

/* La imagen principal sigue el formato limpio de la referencia: rectángulo
   completo, alineado arriba y sin una caja blanca alrededor. */
:is(.product-neocontrol,.product-neotemp) .hero-image{
  align-self:start;
  overflow:visible;
  height:auto;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
:is(.product-neocontrol,.product-neotemp) .hero-image img{
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  object-fit:initial;
  border-radius:0;
  background:transparent;
}

/* En los bloques de funcionalidades, la imagen acompaña la altura real de
   las tarjetas de esa sección, sin dejar huecos arriba o abajo. */
@media(min-width:851px){
  :is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image{
    align-self:stretch;
    height:auto;
    min-height:0;
    display:flex;
  }
  :is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image img{
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center;
  }
}

/* Las imágenes también entran con una animación suave al aparecer en
   pantalla, igual que el resto de bloques de la página. */
:is(.product-neocontrol,.product-neotemp) .hero-image img,
:is(.product-neocontrol,.product-neotemp) .product-feature-image img,
:is(.product-neocontrol,.product-neotemp) .section-visual img,
:is(.product-neocontrol,.product-neotemp) .device img{
  opacity:0;
  transform:scale(.96) translateY(12px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .6s ease;
}
:is(.product-neocontrol,.product-neotemp) .hero-image.visible img,
:is(.product-neocontrol,.product-neotemp) .product-feature-image.visible img,
:is(.product-neocontrol,.product-neotemp) .section-visual.visible img,
:is(.product-neocontrol,.product-neotemp) .device.visible img{
  opacity:1;
  transform:none;
}
:is(.product-neocontrol,.product-neotemp) .hero-image:hover img,
:is(.product-neocontrol,.product-neotemp) .product-feature-image:hover img,
:is(.product-neocontrol,.product-neotemp) .section-visual:hover img,
:is(.product-neocontrol,.product-neotemp) .device:hover img{
  filter:saturate(1.05);
}
@media(prefers-reduced-motion:reduce){
  :is(.product-neocontrol,.product-neotemp) .hero-image img,
  :is(.product-neocontrol,.product-neotemp) .product-feature-image img,
  :is(.product-neocontrol,.product-neotemp) .section-visual img,
  :is(.product-neocontrol,.product-neotemp) .device img{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Las fotos principales de NeoControl y NeoTemp usan el mismo tratamiento visual que
   la imagen principal de FarmaTemp: encuadre a toda la altura, marco fino y esquinas suaves. */
:is(.product-neocontrol,.product-neotemp) .hero-image{
  overflow:hidden;
  height:auto;
  min-height:0;
  padding:4px;
  border:3px solid #fff;
  border-radius:28px;
  background:#fff;
  box-shadow:0 30px 80px rgba(25,18,28,.18);
}
:is(.product-neocontrol,.product-neotemp) .hero-image img{
  width:100%;
  height:570px;
  min-height:0;
  max-height:none;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  background:#fff;
}
@media(max-width:850px){
  :is(.product-neocontrol,.product-neotemp) .hero-image img{height:460px;}
}
@media(max-width:600px){
  :is(.product-neocontrol,.product-neotemp) .hero-image img{height:380px;}
}

/* El resto de imágenes mantiene el estilo limpio, pero con bordes redondeados. */
:is(.product-neocontrol,.product-neotemp) .product-feature-image,
:is(.product-neocontrol,.product-neotemp) .section-visual,
:is(.product-neocontrol,.product-neotemp) .device{
  overflow:hidden;
}
:is(.product-neocontrol,.product-neotemp) .product-feature-image img,
:is(.product-neocontrol,.product-neotemp) .section-visual img,
:is(.product-neocontrol,.product-neotemp) .device img{
  border-radius:14px;
  cursor:pointer;
}
:is(.product-neocontrol,.product-neotemp) .hero-image:hover img,
:is(.product-neocontrol,.product-neotemp) .product-feature-image:hover img,
:is(.product-neocontrol,.product-neotemp) .section-visual:hover img,
:is(.product-neocontrol,.product-neotemp) .device:hover img{
  transform:scale(1.045) translateY(-2px);
  filter:saturate(1.08) contrast(1.02);
}
:is(.product-neocontrol,.product-neotemp) .hero-image:active img,
:is(.product-neocontrol,.product-neotemp) .product-feature-image:active img,
:is(.product-neocontrol,.product-neotemp) .section-visual:active img,
:is(.product-neocontrol,.product-neotemp) .device:active img{
  transform:scale(1.075) translateY(-3px);
}
@media(prefers-reduced-motion:reduce){
  :is(.product-neocontrol,.product-neotemp) .hero-image:hover img,
  :is(.product-neocontrol,.product-neotemp) .product-feature-image:hover img,
  :is(.product-neocontrol,.product-neotemp) .section-visual:hover img,
  :is(.product-neocontrol,.product-neotemp) .device:hover img,
  :is(.product-neocontrol,.product-neotemp) .hero-image:active img,
  :is(.product-neocontrol,.product-neotemp) .product-feature-image:active img,
  :is(.product-neocontrol,.product-neotemp) .section-visual:active img,
  :is(.product-neocontrol,.product-neotemp) .device:active img{
    transform:none;
    filter:none;
  }
}

/* Marco fino y uniforme para todas las imágenes. */
:is(.product-neocontrol,.product-neotemp) .hero-image{
  border-width:6px;
}
:is(.product-neocontrol,.product-neotemp) .product-feature-image img,
:is(.product-neocontrol,.product-neotemp) .section-visual img,
:is(.product-neocontrol,.product-neotemp) .device img{
  border:3px solid #fff;
  box-shadow:0 8px 24px rgba(25,18,28,.10);
}

/* El marco también vive en el contenedor de las imágenes de funcionalidades,
   para que se vea aunque el bloque cambie de tamaño o de imagen. */
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image,
:is(.product-neocontrol,.product-neotemp) .section-visual{
  border:4px solid #fff;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 30px rgba(25,18,28,.12);
}
:is(.product-neocontrol,.product-neotemp) .product-feature-layout>.product-feature-image img,
:is(.product-neocontrol,.product-neotemp) .section-visual img{
  border:0;
  border-radius:14px;
  box-shadow:none;
}

/* Las imágenes de las funcionalidades se reparten dentro de sus tarjetas. */
.feature-media{
  width:100%;
  height:260px;
  margin:-4px 0 24px;
  padding:0;
  border:6px solid #fff;
  border-radius:24px;
  object-fit:cover;
  background:#fff;
  box-shadow:0 30px 80px rgba(25,18,28,.18);
}
@media(max-width:600px){
  .feature-media{height:210px;}
}