.servicios .wrap{display:grid;gap:clamp(18px,3vw,34px)}
.servicios h2{max-width:none}
.serv{display:grid;gap:clamp(16px,3vw,32px);grid-template-columns:1fr;margin-top:clamp(8px,2vw,24px)}
.serv__globo{display:block;width:min(86%,340px);margin:0 auto -6px}
.serv__globo video{width:112%;max-width:none;margin:-6%;aspect-ratio:1;object-fit:cover;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 56%,transparent 70%);mask-image:radial-gradient(circle,#000 56%,transparent 70%)}
.serv__lista{list-style:none;display:grid;gap:14px}
.serv__it{display:grid;grid-template-columns:clamp(96px,26vw,150px) 1fr;align-items:center;gap:clamp(8px,2vw,18px);padding:10px clamp(14px,2.4vw,24px) 10px 6px;transition:transform .3s,border-color .3s;
  border-radius:var(--r);background:linear-gradient(135deg,rgba(181,242,61,.07),rgba(255,255,255,.02));border:1px solid rgba(181,242,61,.14)}
.js .serv__it.on:hover,.serv__it:hover{transform:translateY(-3px);border-color:rgba(181,242,61,.4)}
.serv__it video{width:118%;max-width:none;margin:-10% 0 -10% -10%;aspect-ratio:1;object-fit:cover;background:transparent;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
.serv__it:nth-child(2) video{object-fit:contain;aspect-ratio:16/9;width:128%;margin:0 0 0 -14%;-webkit-mask-image:radial-gradient(ellipse,#000 66%,transparent 80%);mask-image:radial-gradient(ellipse,#000 66%,transparent 80%)}
.serv__it h3{font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:4px}
.serv__it p{color:var(--dim);font-size:.98rem}
.serv__it a{color:var(--lima);font-weight:600;white-space:nowrap}
.serv__it small{display:inline-block;margin-left:8px;font:500 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);padding:3px 8px;border-radius:999px;vertical-align:middle}
.serv__cierre{margin-top:6px}
@media (min-width:900px){
  .serv{grid-template-columns:1fr minmax(300px,500px) 1fr;align-items:center}
  .serv__globo{width:100%;margin:0;grid-column:2;grid-row:1 / span 3}
  .serv__lista{display:contents}
  .serv__it:nth-child(1){grid-column:1;grid-row:1}
  .serv__it:nth-child(2){grid-column:1;grid-row:2}
  .serv__it:nth-child(3){grid-column:1;grid-row:3}
  .serv__it:nth-child(4){grid-column:3;grid-row:1}
  .serv__it:nth-child(5){grid-column:3;grid-row:2}
  .serv__it:nth-child(6){grid-column:3;grid-row:3}
  .serv__it{grid-template-columns:128px 1fr}
}

/* regalo: mini app personalizada */
.extra{display:grid;grid-template-columns:clamp(110px,26vw,190px) 1fr;align-items:center;gap:clamp(8px,2vw,24px);padding:clamp(14px,2.6vw,28px) clamp(16px,3vw,36px) clamp(14px,2.6vw,28px) clamp(6px,1vw,14px);
  border-radius:calc(var(--r) + 6px);border:1px solid rgba(181,242,61,.38);background:radial-gradient(120% 140% at 0% 50%,rgba(181,242,61,.16),rgba(181,242,61,.03) 55%,transparent),linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.extra video{width:128%;max-width:none;margin:-14% 0 -14% -14%;aspect-ratio:1;object-fit:cover;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 56%,transparent 70%);mask-image:radial-gradient(circle,#000 56%,transparent 70%)}
.extra__sello{display:inline-block;background:var(--lima);color:var(--tinta);font:800 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.extra h3{font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.05;margin-bottom:8px}
.extra p{color:var(--dim);max-width:46ch}
.extra__chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.extra__chips li{font:500 .8rem var(--mono);padding:6px 12px;border-radius:999px;border:1px solid rgba(181,242,61,.35);color:var(--texto);background:rgba(181,242,61,.06)}
@media (max-width:560px){.extra{grid-template-columns:1fr;padding:18px 18px 22px}.extra video{width:60%;margin:-6% auto -4%}}

/* pantallas de 900 a 1199 px: la grilla de 3 columnas se salía de la pantalla (las columnas 1fr no podían achicarse) */
@media (min-width:900px) and (max-width:1199px){
  .serv{grid-template-columns:minmax(0,1fr) minmax(240px,400px) minmax(0,1fr)}
  .serv__it{grid-template-columns:84px minmax(0,1fr)}
  .serv__it a{white-space:normal}
}
