/* =========================================================================
   Home SYNEST — estilos propios de la página.
   Requiere base.css (tokens, cabecera, bloques de vídeo, footer).
   ========================================================================= */

/* -------------------------------- hero --------------------------------- */
.home-hero{
  position:relative;aspect-ratio:1440/766.67;background:#000;overflow:hidden;
}
.home-hero .media-video,
.home-hero .media-fallback{position:absolute;inset:0;width:100%;height:100%}
.home-hero .scroll-cue{bottom:28px}

@media (max-width:900px){
  /* A 1,88:1 el vídeo quedaría en una franja de 200 px en móvil. */
  .home-hero{aspect-ratio:4/5}
}

/* ----------------------------- manifiesto ------------------------------ */
.manifesto{background:#041e42;overflow:hidden}

/* El bloque reproduce el frame de 1440x769: el logotipo son tres grupos de
   vectores superpuestos colocados por porcentaje, no texto. */
/* El manifiesto es un lienzo de 1440: por encima de ese ancho se queda
   quieto y centrado en vez de estirarse. */
.manifesto__stage{position:relative;aspect-ratio:1440/769;max-width:1440px;margin-inline:auto}
.manifesto__mark{
  position:absolute;height:auto;max-width:none;
  /* se escalan con el contenedor conservando su proporción */
}
.manifesto__mark--1{left:7.014%;top:15.846%;width:43.461%}
.manifesto__mark--2{left:6.806%;top:29.801%;width:86.389%}
.manifesto__mark--3{left:-1.458%;top:59.991%;width:38.750%}

.manifesto__copy{
  position:absolute;left:44.028%;top:58.690%;width:49.167%;
  color:#fff;font-size:clamp(15px,1.39vw,20px);line-height:1.4;
}
.manifesto__copy p{margin-bottom:1.4em}
.manifesto__copy p:last-child{margin-bottom:0}
.manifesto__copy b{font-weight:700}

@media (max-width:900px){
  .manifesto__stage{
    aspect-ratio:auto;display:flex;flex-direction:column;
    gap:clamp(20px,5vw,36px);padding:clamp(48px,9vw,80px) var(--gutter);
  }
  .manifesto__mark{position:static;width:100%}
  .manifesto__mark--2{width:100%}
  .manifesto__mark--3{display:none}   /* las rayas se salen del lienzo */
  .manifesto__copy{position:static;width:100%;margin-top:clamp(8px,3vw,24px)}
}

/* ------------------------------ servicios ------------------------------ */
.services{
  background:#fff;color:#000;
  /* Esta banda tiene 98 de margen en el diseno, no 80: el mosaico mide 1245.
     Por encima de 1440 el margen crece para que no se estire. */
  padding:clamp(40px,5.4vw,78px) max(clamp(20px,6.8vw,98px),(100vw - 1245px) / 2)
          clamp(44px,5.7vw,83px);
}
.services__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(24px,2.2vw,32px);line-height:1.2;color:#000;
  margin-bottom:clamp(18px,2.26vw,32px);
}

/* Mosaico: cada tarjeta lleva los porcentajes exactos del diseño dentro de
   una caja de 1245x610. */
.services__mosaic{position:relative;aspect-ratio:1245/610}
.svc{
  position:absolute;overflow:hidden;border-radius:24px;
  display:grid;place-items:center;isolation:isolate;
}
/* Cada tarjeta lleva el video del servicio en bucle, con la foto del diseno
   de poster y de reserva por si el video no carga. */
.svc img,
.svc .media-video,
.svc .media-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;
  transition:transform .6s var(--ease);
}
.svc .media-fallback{display:none}
.svc.no-video .media-video{display:none}
.svc.no-video .media-fallback{display:block}
.svc::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.56);
  transition:background .4s var(--ease);
}
/* El ancho de cada rotulo sale del diseno: la caja de texto de cada tarjeta
   tiene su propio ancho y es lo que decide por donde parte el titulo. Con un
   padding igual para todas, "Creative & Content" cabria en una linea y el
   mosaico dejaria de coincidir. */
.svc span{
  position:relative;z-index:1;
  width:72%;
  font-family:"Open Sans Hebrew",var(--sans);
  font-size:clamp(14px,1.67vw,24px);line-height:1.375;color:#fff;text-align:center;
}
.svc--transformation span{width:72%}
.svc--product       span{width:73%;transform:translateY(-.667em)} /* en el diseno va 16px por encima del centro */
.svc--creative      span{width:78.5%}
.svc--lab           span{width:66.7%}
.svc--ai-design     span{width:80%}
.svc--ai-growth     span{width:55%}
.svc--delivery      span{width:84.2%}
.svc:hover img,.svc:focus-visible img,
.svc:hover .media-video,.svc:focus-visible .media-video,
.svc:hover .media-fallback,.svc:focus-visible .media-fallback{transform:scale(1.06)}
.svc:hover::after,.svc:focus-visible::after{background:rgba(0,0,0,.34)}

.svc--transformation{inset:0 71.89% 54.59% 0}
.svc--product       {inset:0 43.13% 54.59% 28.76%}
.svc--creative      {inset:0 21.61% 46.72% 57.51%}
.svc--lab           {inset:0 0 0 79.04%}
.svc--ai-design     {inset:46.72% 79.12% 0 0}
.svc--ai-growth     {inset:46.72% 43.13% 0 21.53%}
.svc--delivery      {inset:54.59% 21.61% 0 57.51%}

@media (max-width:900px){
  .services__mosaic{
    aspect-ratio:auto;display:grid;gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .svc{position:relative;inset:auto;aspect-ratio:4/3}
  .svc--lab{grid-column:span 2;aspect-ratio:16/9}
  /* En movil las tarjetas cambian de proporcion: los anchos del diseno ya no
     valen y el rotulo necesita todo el ancho menos un margen. */
  .svc span,
  .svc--transformation span,.svc--product span,.svc--creative span,
  .svc--lab span,.svc--ai-design span,.svc--ai-growth span,
  .svc--delivery span{width:auto;max-width:calc(100% - 20px);transform:none}
}
@media (max-width:560px){
  .services__mosaic{grid-template-columns:1fr}
  .svc--lab{grid-column:auto}
}