/* Fotografías integradas con degradados rectos, sin recorte ovalado. */
.service .service-photo img,
.service:nth-child(even) .service-photo img,
.service .service-photo video,
.service:nth-child(even) .service-photo video.training-native {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(0deg, transparent, #000 19%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(0deg, transparent, #000 19%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  border-radius: 0;
}
.clients { padding: 100px 8% 80px; background: #000; color: #fff; }
.clients-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.clients-heading h2 { font-size: clamp(32px, 3.5vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -1.3px; margin: 0; }
.clients-heading h2 span { color: #ff5a5f; }
.clients-heading p { max-width: 420px; margin: 0; font-size: 15px; line-height: 1.7; color: #c9c9d3; }
.clients-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 24px 22px; }
.clients-grid li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.clients-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; opacity: .85; transition: opacity .25s; }
.clients-grid li:hover img { opacity: 1; }
@media (max-width: 1100px) { .clients-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 30px; } }
@media (max-width: 800px) {
  .service .service-photo img,
  .service:nth-child(even) .service-photo img,
  .service .service-photo video,
  .service:nth-child(even) .service-photo video.training-native {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(0deg, transparent, #000 20%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(0deg, transparent, #000 20%, #000 84%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .clients { padding: 65px 7% 50px; }
  .clients-heading { display: block; margin-bottom: 28px; }
  .clients-heading p { margin-top: 20px; font-size: 14px; }
  .clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .clients-grid img { transition: none; } }
/* Ajustes puntuales móviles, conservando la fotografía de fondo y el diseño. */
@media(max-width:800px){
 .hero{min-height:100svh}
 .hero .scene{inset:0;width:100%;height:100%;transform:none!important}
 .hero .copy{padding-top:24vh;padding-bottom:65px}
 .hero header nav{align-self:flex-start;align-items:flex-start;margin-left:0;margin-right:auto;gap:10px;text-align:left}
 .hero header nav a{justify-content:flex-start;text-align:left;font-size:14px;text-shadow:0 2px 7px #000,0 0 14px #000}
 .hero header nav a span{text-align:left}
 .services{padding-top:25px;padding-bottom:25px}
 .service,.service:nth-child(even){padding-top:25px;padding-bottom:40px}
 .service+.service{margin-top:25px}
}

/* Experiencias: protagonismo del grupo a la derecha únicamente en móvil. */
@media(max-width:800px){.hero .scene[src="/assets/opt-v1/eventos.webp"]{object-position:85% center}}

/* Foto nueva de Experiencias: encuadre móvil de la participante. */
@media(max-width:800px){.hero .scene[src="/assets/experiencias-pool-party.jpg"]{object-position:40% center}}

.hero-art{display:contents}
@media(max-width:800px){.hero .scene[src="/assets/opt-v1/experiencias-pool-violeta-v1.webp"]{object-position:center center}}

@media(max-width:800px){.hero:has(.hero-art) .shade{background:linear-gradient(0deg,#030c19 0%,#030c1980 28%,transparent 60%)}}

/* Pool Party integrada al negro por los bordes, con las caras despejadas. */
.hero:has(.hero-art) .shade{background:linear-gradient(0deg,#000 0%,#0009 18%,transparent 55%),linear-gradient(180deg,#0008,transparent 20%),linear-gradient(90deg,#0008,transparent 25%,transparent 80%,#0006)}
@media(max-width:800px){.hero:has(.hero-art) .shade{background:linear-gradient(0deg,#000 0%,#000b 22%,transparent 58%),linear-gradient(180deg,#0008,transparent 20%),linear-gradient(90deg,#0006,transparent 22%,transparent 80%,#0006)}}

/* Referencia aprobada: fotos verticales protagonistas y título sobre el borde inferior. */
@media(max-width:800px){
 .service:has(.service-photo img),.service:has(.service-photo img):nth-child(even){overflow:hidden}
 .service:has(.service-photo img) .service-photo{margin-bottom:-100px}
 .service:has(.service-photo img) .service-photo img{height:clamp(400px,125vw,680px);max-height:none;object-fit:cover;object-position:50% center;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(0deg,transparent,#000 22%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(0deg,transparent,#000 22%,#000 91%,transparent)}
 .service:has(.service-photo img)>div:last-child{position:relative;z-index:1}
 .service:has(.service-photo img) h2{text-shadow:0 2px 15px #0009}
 .services:has(#eventos-conectan){padding-top:10px}
 #eventos-conectan{padding-top:10px}
}

@media(max-width:800px){#eventos-conectan .service-photo img{object-position:43% center}}

/* Icono de experiencia participativa con firma event. */
nav a svg.event-icon{width:29px;height:35px}
@media(max-width:800px){nav a svg.event-icon{width:26px;height:32px}}

.contenidos-art{display:contents}
@media(max-width:800px){
 .hero .scene[src="/assets/opt-v1/contenidos-hero-cinematico.webp"]{object-position:center center}
 .hero:has(.contenidos-art) .shade{background:linear-gradient(0deg,#000 0%,#000b 22%,transparent 58%),linear-gradient(180deg,#0008,transparent 20%),linear-gradient(90deg,#0006,transparent 22%,transparent 80%,#0006)}
 .service .service-photo img[src="/assets/opt-v1/contenidos-hero-cinematico.webp"]{object-position:72% center}
}

/* Reserva proporciones antes de descargar recursos, sin recomponer el diseño. */
.hero .logo{aspect-ratio:164.25/54.29}
.service-photo video{aspect-ratio:16/9}

/* ES / EN: misma sección al cambiar de idioma, accesible sin JavaScript. */
.language-switch{position:absolute;right:5%;top:30px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.08em;z-index:6}
.language-switch a{padding:8px 3px;color:#c8c9d2;border-bottom:2px solid transparent}
.language-switch a[aria-current="page"]{color:#fff;border-color:#ff5a5f}
.language-switch a:hover{color:#ff5a5f}
.language-switch span{color:#b8b4ff}
@media(min-width:801px){header{padding-right:12%}}
/* Mismos archivos aprobados: encuadres independientes sólo en móvil. */
@media(max-width:800px){
 .language-switch{top:22px;right:6%;font-size:11px}
 .hero .scene{object-position:70% center}
 .hero .scene[src="/assets/opt-v1/contenidos-hero-cinematico.webp"]{object-position:80% center}
 .hero .scene[src="/assets/opt-v1/tecnologia.webp"]{object-position:55% center}
 .hero .scene[src="/assets/opt-v1/experiencias-pool-violeta-v1.webp"]{object-position:52% center}
 .service:has(.service-photo img) .service-photo img{height:clamp(340px,105vw,560px)}
 .service .service-photo img[src="/assets/opt-v1/contenidos-hero-cinematico.webp"]{object-position:83% center}
 .service .service-photo img[src="/assets/opt-v1/tecnologia.webp"]{object-position:51% center}
 .service .service-photo img[src="/assets/opt-v1/experiencias-pool-violeta-v1.webp"]{object-position:52% center}
 .service:has(.service-photo img) h2{font-size:clamp(32px,8.5vw,42px)}
 .service:has(.service-photo img) .service-photo{margin-bottom:-65px}
 .hero h1{font-size:clamp(35px,9.5vw,46px)}
 .badge{left:auto;right:14px;bottom:14px;width:48px;height:48px}
}

/* Tecnología: reducir el recorte móvil para incluir participante y pantalla. */
@media(max-width:800px){
 .hero .scene[src="/assets/opt-v1/tecnologia.webp"]{top:180px;height:clamp(380px,110vw,560px);object-position:50% center;mask-image:linear-gradient(0deg,transparent,#000 17%,#000 80%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 17%,#000 80%,transparent)}
}

/* Escritorio: selector debajo del logo. Móvil conserva esquina superior derecha. */
@media(min-width:801px){
 header{display:grid;grid-template-columns:max-content minmax(0,1fr);row-gap:6px;column-gap:40px;padding-right:4%}
 header>a{grid-column:1;grid-row:1}
 header nav{grid-column:2;grid-row:1}
 header .language-switch{position:static;grid-column:1;grid-row:2;justify-self:start;align-self:start;margin-top:0}
}

/* Corrección solicitada: Contenidos más arriba y Tecnología más luminosa, sólo móvil. */
@media(max-width:800px){
 .hero .scene[src="/assets/opt-v1/contenidos-hero-cinematico.webp"]{top:clamp(-105px,-24vw,-76px);height:100%;bottom:auto}
 .hero .scene[src="/assets/opt-v1/tecnologia.webp"]{filter:brightness(1.35) contrast(1.04) saturate(1.06)}
 .hero:has(.scene[src="/assets/opt-v1/tecnologia.webp"]) .shade{background:linear-gradient(0deg,#000 0%,#0008 15%,transparent 55%),linear-gradient(90deg,#0003,transparent 65%)}
}