/* Diseño aportado: tres PNG por encima de tarjetas con una silueta ovalada.
   Todo queda limitado a #servicios, sin estilos globales del documento de referencia. */
.needs-showcase,.needs-showcase *{box-sizing:border-box}
/* Unir el último panel naranja con esta sección, sin la banda de espacio blanco. */
#desarrollo.feature-section--connected{padding-bottom:0}
.needs-showcase{
  --needs-ink:#171b24;
  --needs-muted:#343b47;
  --needs-accent:#FB923C;
  position:relative;
  isolation:isolate;
  padding:80px 3.2vw 90px;
  color:var(--needs-ink);
  background:
    linear-gradient(to bottom,#FB923C 0px,#FB923C 64px,rgba(251,146,60,0) 320px),
    radial-gradient(circle at 10% 10%,rgba(255,255,255,.16),transparent 24%),
    radial-gradient(circle at 88% 86%,rgba(255,255,255,.09),transparent 24%),
    linear-gradient(135deg,#FB923C 0%,#FB923C 50%,#FB923C 100%);
}
.needs-showcase__inner{width:min(1550px,100%);margin-inline:auto}
.needs-showcase__dots{display:none}
.needs-showcase__heading{text-align:center;max-width:1000px;margin:0 auto 58px}
.needs-showcase__heading h2{
  margin:0 0 22px;
  font-size:clamp(36px,4vw,64px);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:650;
  color:var(--needs-ink);
}
.needs-showcase__heading p{
  margin:0;
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.5;
  color:var(--needs-muted);
}
.needs-showcase__grid{
  display:grid;
  grid-template-columns:1fr .92fr 1.13fr;
  gap:22px;
  align-items:stretch;
}
.needs-showcase__panel{
  position:relative;
  padding-top:220px;
  display:flex;
  min-width:0;
}
.needs-showcase__art{
  position:absolute;
  inset:0 0 auto;
  height:330px;
  z-index:2;
  pointer-events:none;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.needs-showcase__art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  animation:none;
  transform:none;
}
/* El recorte inferior se disuelve sobre la tarjeta; rostro y teléfono quedan nítidos. */
.needs-showcase__panel--security .needs-showcase__art img{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.92) 77%,rgba(0,0,0,.5) 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.92) 77%,rgba(0,0,0,.5) 89%,transparent 100%);
}
.needs-showcase__card{
  position:relative;
  width:100%;
  min-height:480px;
  padding:130px 40px 48px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50% 50% 44% 44% / 104px 104px 64px 64px;
  background:#fffdf9;
  box-shadow:0 25px 60px rgba(112,52,7,.16);
  transition:box-shadow .35s ease;
}
.needs-showcase__icon{
  width:49px;
  height:49px;
  margin-bottom:19px;
  border:1.5px solid var(--needs-accent);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--needs-accent);
  background:#fff;
}
.needs-showcase__icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.needs-showcase__card h3{
  margin:0 0 20px;
  font-size:clamp(27px,2.1vw,37px);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:650;
  color:var(--needs-accent);
}
.needs-showcase__card p{margin:0;font-size:18px;line-height:1.65;color:var(--needs-muted)}
@media(hover:hover) and (pointer:fine){
  .needs-showcase__panel:hover .needs-showcase__card{box-shadow:0 32px 68px rgba(103,46,5,.22)}
}
@media(max-width:1100px){
  .needs-showcase{padding:60px 24px 70px}
  .needs-showcase__grid{grid-template-columns:1fr 1fr;gap:36px 22px}
  .needs-showcase__panel--monitoring{grid-column:1/-1;width:calc((100% - 22px)/2);justify-self:center}
  .needs-showcase__card{padding-inline:32px}
}
@media(max-width:720px){
  .needs-showcase{padding:42px 16px 50px}
  .needs-showcase__heading{margin-bottom:30px}
  .needs-showcase__heading h2{font-size:clamp(32px,7vw,42px)}
  .needs-showcase__heading h2 br{display:none}
  /* CARRUSEL SOLO MOVIL: la grilla pasa a ser una pista horizontal con
     scroll-snap. Se puede deslizar con el dedo y needs-showcase.js la
     avanza sola. En escritorio la grilla queda exactamente igual. */
  .needs-showcase__grid{
    display:flex;
    grid-template-columns:none;
    gap:16px;
    max-width:480px;
    margin-inline:auto;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:34px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .needs-showcase__grid::-webkit-scrollbar{display:none}
  .needs-showcase__panel{
    flex:0 0 100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .needs-showcase__dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:-14px auto 0;
  }
  .needs-showcase__dot{
    /* El punto sigue midiendo 9x9: lo que crece es el area sensible, con un
       ::after de 19x44 (19 = 9 del punto + 10 del gap) centrado encima. Asi
       las zonas tactiles se tocan entre si, no hay banda muerta entre puntos
       y no se solapan. Visualmente no cambia nada. */
    position:relative;
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(23,27,36,.26);
    cursor:pointer;
    transition:background .3s ease,width .3s ease;
    -webkit-appearance:none;
    appearance:none;
  }

  .needs-showcase__dot::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:19px;
    height:44px;
    transform:translate(-50%,-50%);
  }
  .needs-showcase__dot[aria-current="true"]{
    width:26px;
    border-radius:999px;
    background:var(--needs-accent);
  }
  .needs-showcase__panel{padding-top:168px}
  .needs-showcase__panel--monitoring{grid-column:auto;width:100%}
  .needs-showcase__art{height:258px}
  .needs-showcase__card{min-height:360px;padding:94px 26px 36px;border-radius:50% 50% 44% 44% / 78px 78px 48px 48px}
  .needs-showcase__card h3{font-size:28px;min-height:0;margin-bottom:14px}
  .needs-showcase__card p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .needs-showcase__grid{scroll-behavior:auto}
  .needs-showcase__art img{animation:none}
  .needs-showcase__card{transition:none}
  .needs-showcase__panel:hover .needs-showcase__card{transform:none}
}