/* =========================================================================
   Plantilla de página de servicio (las 7 comparten este archivo).
   Requiere base.css. Las medidas vienen del diseño de Figma, que trabaja
   sobre un lienzo de 1440 con 80 px de margen: el contenido mide 1280.
   ========================================================================= */

/* El resto del sitio es oscuro; estas páginas son claras. */
body.page-service{background:#fff;color:#000}

.page-service main{display:block}

:root{
  --svc-purple:#5800eb;
  --svc-mint:#e8fff9;
  --svc-num:#c7c7c7;
}

/* Rejilla de dos columnas del diseño: el titular ocupa 556 desde x=80 y el
   texto empieza en x=724 y mide 636, o sea 556 + 88 + 636 = 1280 justos. */
.svc-cols{
  display:grid;gap:clamp(28px,6.11vw,88px);
  grid-template-columns:minmax(0,556fr) minmax(0,636fr);
  align-items:start;
}
@media (max-width:900px){ .svc-cols{grid-template-columns:1fr} }

.svc-band{padding:clamp(36px,3.9vw,56px) var(--gutter)}
.svc-title{
  font-family:var(--display);font-weight:500;color:#000;
  font-size:clamp(22px,2.22vw,32px);line-height:1.2;
}
/* Las Line del diseno son de 1 px y #dedede, a todo el ancho del lienzo. */
.svc-rule{border:0;border-top:1px solid #dedede;margin:0}

/* Botón relleno morado del diseño */
.btn-fill{
  display:inline-flex;align-items:center;gap:16px;
  padding:16px clamp(20px,2.2vw,32px);border-radius:16px;
  background:var(--svc-purple);color:#fff;
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.39vw,20px);
  line-height:1.2;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.btn-fill:hover{transform:translateY(-2px);filter:brightness(1.12)}
.btn-fill img{width:16px;height:16px}
.svc-cta{display:flex;justify-content:center}

/* ------------------------------ cabecera -------------------------------- */
.svc-hero__media{
  position:relative;aspect-ratio:1440/479;background:#000;overflow:hidden;
}
.svc-hero__media .media-video,
.svc-hero__media .media-fallback{position:absolute;inset:0;width:100%;height:100%}
.svc-hero__media::after{
  content:"";position:absolute;inset:0;
  /* El diseno solo lleva un fundido al negro por abajo, del 57% al 100%, que
     enlaza la foto con la banda negra del titular. El oscurecido de arriba
     era invencion mia. */
  background:linear-gradient(180deg,rgba(0,0,0,0) 57%,#000 100%);
}
@media (max-width:700px){ .svc-hero__media{aspect-ratio:16/11} }

.svc-hero__intro{
  background:#000;color:#fff;
  padding:clamp(36px,3.9vw,56px) var(--gutter);
}
.svc-hero__intro h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,3.89vw,56px);line-height:1.22;
}
.svc-hero__intro p{font-size:clamp(16px,1.39vw,20px);line-height:1.4}
/* En el diseno el bloque es un solo texto con paragraphSpacing 16, no 28. */
.svc-hero__intro p + p{margin-top:16px}

/* -------------------------------- el reto ------------------------------- */
.reto__lede{font-weight:600;margin-bottom:1.4em}
.reto__body{font-size:clamp(16px,1.39vw,20px);line-height:1.4}
.reto__text{display:grid;gap:clamp(20px,2.2vw,32px)}
.reto__list{display:grid;gap:8px}
.reto__list li{
  display:flex;align-items:center;gap:16px;
  /* Bullet del diseno: blanco, borde 1 px #dedede, radio 16, padding 16.
     No lleva sombra. */
  background:#fff;border:1px solid #dedede;border-radius:16px;padding:16px;
  font-size:clamp(14px,1.11vw,16px);line-height:1.37;
}
.reto__list img{width:24px;height:24px;flex:none}

/* --------------------------- módulos de copy ---------------------------- */
.copy-module{padding:clamp(28px,2.8vw,40px) var(--gutter)}
.copy-module p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3.33vw,48px);line-height:1.2;color:#000;
}
.copy-module p + p{margin-top:10px}
.copy-module mark{
  background:var(--teal);color:#000;font-weight:500;
  padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ------------------------------ acordeón -------------------------------- */
/* La altura sale del aspecto del diseño (1280x626); si el texto de la tarjeta
   abierta necesita más sitio, service.js sube --acc-h y todo se reajusta. */
.pasos__acc{
  display:flex;gap:2.5%;align-items:center;
  /* el ancho tiene que ser definido: con aspect-ratio y width:auto el
     navegador deduce el ancho de la altura y la fila se sale del margen */
  width:100%;
  /* Cada pagina tiene su propia altura de acordeon en el diseno (de 626 a
     703); la pone el generador en --acc-dis. */
  aspect-ratio:1280/var(--acc-dis,626);height:var(--acc-h,auto);
  margin-top:clamp(20px,2.2vw,32px);
  transition:height .5s var(--ease);
}
.paso{
  /* La tarjeta cerrada mide 234x400 en todas las paginas, aunque la fila
     cambie de alto (de 626 a 703): por eso va por proporcion y no por
     porcentaje de la fila. */
  position:relative;flex:0 0 18.28%;aspect-ratio:234/400;height:auto;
  /* Card del diseno: blanca, radio 24, sin borde, DROP_SHADOW #000 al 10 %
     con radio 12 y sin desplazamiento. */
  background:#fff;border-radius:24px;
  box-shadow:0 0 12px rgba(0,0,0,.1);
  padding:clamp(10px,1.25vw,16px);overflow:hidden;text-align:left;
  display:flex;flex-direction:column;justify-content:space-between;
  /* El ancho cambia de golpe a propósito: service.js tiene que medir la
     tarjeta ya en su sitio para calcular la altura de la fila, y durante una
     transición lo que se lee es el valor a medias. La altura sí se anima,
     desde la fila, así que el cambio no queda seco. */
}
/* La tarjeta abierta tiene su propio alto en cada pagina (de 613 a 684) y va
   centrada en la fila; el generador publica el porcentaje en --acc-ab. */
.paso.is-open{
  flex:0 0 37.66%;aspect-ratio:auto;height:var(--acc-ab,100%);
  justify-content:flex-start;gap:0;
}
.paso__num{
  font-family:var(--display);font-weight:400;color:var(--svc-num);
  font-size:clamp(44px,7.8vw,100px);line-height:1.21;
}
.paso__name{
  font-family:var(--display);font-weight:400;color:#000;
  font-size:clamp(14px,1.88vw,24px);line-height:1.2;
}
.paso.is-open .paso__num,
.paso.is-open .paso__name{display:none}

.paso__panel{display:none;flex-direction:column;gap:clamp(10px,1.25vw,16px);min-height:0}
/* La fila mantiene la proporcion del diseno (626 de 1280). Cuando el texto de
   un paso es mas corto que eso, el sobrante se repartia entero detras de las
   pills y quedaba un hueco grande al final de la tarjeta; asi se reparte entre
   los bloques y las pills se apoyan en el borde inferior, como en Figma. */
/* Huecos del diseno dentro de la tarjeta abierta: 32 bajo el video, 16 bajo
   el titulo, 8 entre la entradilla y el cuerpo y 24 antes de las pills. */
.paso.is-open .paso__panel{flex:1 1 auto;gap:0}
.paso.is-open .paso__title{margin-top:clamp(20px,2.5vw,32px)}
.paso.is-open .paso__lede{margin-top:clamp(10px,1.25vw,16px)}
.paso.is-open .paso__body{margin-top:8px}
.paso.is-open .paso__tags{margin-top:clamp(16px,1.88vw,24px)}
/* Que nada se comprima: si el contenido se encoge, la medida que hace
   service.js para calcular la altura de la fila sale corta. */
.paso__panel > *{flex:none}
.paso.is-open .paso__panel{display:flex}
.paso__media{
  position:relative;flex:none;aspect-ratio:450/200;
  border-radius:12px;overflow:hidden;background:#000;
}
.paso__media .media-video,
.paso__media .media-fallback{position:absolute;inset:0;width:100%;height:100%}
.paso__title{
  font-family:var(--display);font-weight:400;color:#000;
  font-size:clamp(18px,2.5vw,32px);line-height:1.25;
}
.paso__lede{font-style:italic;font-size:clamp(13px,1.56vw,20px);line-height:1.4;color:#000}
.paso__body{font-size:clamp(13px,1.56vw,20px);line-height:1.4;color:#6c6c6c}
.paso__tags{display:flex;flex-wrap:wrap;gap:8px}
.paso__tags span{
  background:var(--svc-mint);border-radius:16px;padding:8px 12px;
  font-size:clamp(11px,1.09vw,14px);line-height:1.36;color:#000;white-space:nowrap;
}

/* En móvil el acordeón se convierte en una lista vertical. */
@media (max-width:900px){
  .pasos__acc{flex-direction:column;aspect-ratio:auto;gap:12px;align-items:stretch}
  .paso{
    flex:0 0 auto;height:auto;aspect-ratio:auto;padding:16px;gap:16px;
    flex-direction:row;align-items:center;justify-content:flex-start;
  }
  .paso.is-open{flex:0 0 auto;height:auto;flex-direction:column;align-items:stretch;gap:16px}
  .paso.is-open .paso__title,.paso.is-open .paso__lede,
  .paso.is-open .paso__body,.paso.is-open .paso__tags{margin-top:0}
  .paso__num{font-size:40px;line-height:1}
  .paso.is-open .paso__panel{gap:16px}
  .paso__title{font-size:24px}
  .paso__lede,.paso__body{font-size:16px}
  .paso__tags span{font-size:13px}
}

/* --------------------- banner de soluciones destacadas ------------------- */
/* El banner llega hasta el final de la banda: abajo no hay relleno. */
.destacadas{padding-bottom:0}
.destacadas__banner{
  position:relative;overflow:hidden;background:#000;color:#fff;
  /* En el diseno el Banner_Offerings mide 1440 de ancho, o sea que va a
     sangre: se sale del margen de la banda y su contenido se vuelve a meter
     con el padding, que es el mismo margen (80 px a 1440). */
  margin-left:calc(-1 * var(--gutter));
  margin-right:calc(-1 * var(--gutter));
  /* El margen lateral es el mismo de la banda, para que el texto del banner
     siga alineado con el resto cuando la pantalla pasa de 1440. */
  padding:clamp(32px,5.5vw,80px) var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(20px,2.8vw,41px);
  margin-top:clamp(20px,2.2vw,32px);
}
/* El videoTransform del diseno es [[1.28992,0,-0.28992],[0,1,0]]: el video
   se apoya en el borde derecho y ocupa 1/1,28992 = 77,5 % del ancho; el 22,5 %
   de la izquierda es el solido negro del banner, que es justo donde va el
   texto. */
.destacadas__banner .media-video,
.destacadas__banner .media-fallback{
  position:absolute;top:0;bottom:0;right:0;left:auto;
  width:77.52%;height:100%;z-index:0;object-fit:cover;
  background-size:cover;background-position:center;
}
@media (max-width:900px){
  /* En vertical no hay sitio para dejar un cuarto en negro. */
  .destacadas__banner .media-video,
  .destacadas__banner .media-fallback{width:100%}
}
/* El diseno no pone ningun velo sobre el video: el banner es un solido negro
   con el video encima, y la mitad izquierda ya es oscura en el propio video.
   Queda un velo minimo por si en una pantalla estrecha el encuadre se
   desplaza y el texto cae sobre la figura. */
.destacadas__banner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.12) 46%,rgba(0,0,0,0) 72%);
}
.destacadas__banner > *{position:relative;z-index:2;max-width:782px}
/* Va con el nombre del bloque delante porque .destacadas__banner p es mas
   especifica y le quitaba el tamano: en el diseno son 36 px de Play. */
.destacadas__banner .destacadas__kicker{
  font-family:var(--play);font-size:clamp(22px,2.5vw,36px);letter-spacing:.02em;
  line-height:1.167;color:#fff;
  /* .destacadas__banner p le metia 24 de margen superior y el banner crecia. */
  margin-top:0;
}
/* En el diseno solo las dos ultimas letras van en turquesa; antes era un
   degradado sobre toda la palabra, que no es lo que pone Figma. */
.destacadas__kicker span{color:var(--teal)}
.destacadas__banner h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.89vw,56px);line-height:1.22;
}
.destacadas__banner p{font-size:clamp(16px,1.39vw,20px);line-height:1.4;margin-top:24px}

/* ------------------------------ proyectos ------------------------------- */
/* Module 7 del diseno: 80 de relleno arriba, 40 abajo y 32 entre piezas. */
.proyectos{padding-top:clamp(28px,3.89vw,56px);padding-bottom:clamp(24px,2.78vw,40px)}
/* Creative y Digital transformation llevan 80 arriba; el resto, 56. */
.proyectos--aire{padding-top:clamp(40px,5.56vw,80px)}
.proyectos__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:clamp(20px,2.22vw,32px) 0;
}
.proyectos .motion-copy{margin-top:clamp(20px,2.22vw,32px)}
.proy{
  position:relative;aspect-ratio:635/623;border-radius:24px;overflow:hidden;
  background:#000;display:flex;align-items:flex-end;isolation:isolate;
  /* Cada proyecto lleva su propio degradado en el diseño: el color va en
     --proy-rgb y el punto donde arranca en --proy-ini. Casi todos empiezan a
     media tarjeta; el del mar empieza arriba del todo. */
  --proy-rgb:0 0 0;
  --proy-ini:50%;
}
.proy .media-video,.proy .media-fallback{position:absolute;inset:0;width:100%;height:100%}
.proy::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgb(var(--proy-rgb) / 0) var(--proy-ini),
    rgb(var(--proy-rgb) / 1) 100%);
}
/* Solo la tarjeta de "Nuestra fuerza está en la red" lleva, además del
   degradado, un negro plano al 20 % sobre la foto. */
.proy--velo::before{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);
}
.proy__mark{
  position:absolute;left:50%;top:18.5%;width:35.6%;height:auto;
  transform:translateX(-50%);z-index:1;
}
.proy__text{
  position:relative;z-index:2;width:100%;color:#fff;
  padding:clamp(18px,2.2vw,32px);display:flex;flex-direction:column;
  align-items:flex-start;gap:16px;
}
.proy__tag{
  background:rgba(0,0,0,.2);border:1px solid #f1f1f1;border-radius:1000px;
  /* 29 de alto en el diseno, filete incluido */
  padding:3px 12px;line-height:1.3125;
  font-family:var(--display);font-weight:600;font-size:clamp(13px,1.11vw,16px);
}
.proy__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.22vw,32px);line-height:1.22;
}
.proy__meta{font-size:clamp(14px,1.39vw,20px);line-height:1.4;padding-left:4px}
/* La tarjeta de G.E.S. lleva el titular a 36 en las paginas de servicio. */
.proy--tit36 .proy__title{font-size:clamp(22px,2.5vw,36px)}
@media (max-width:700px){
  .proyectos__grid{grid-template-columns:1fr}
}

/* Los dos rotulos que van rotando bajo los proyectos: el componente
   Motion_copy del prototipo (33:341), copiado a medida.

   El bloque mide 1279x78 dentro del lienzo de 1280: dos ventanas de 560
   recortadas, el simbolo x de 47 en medio y 56 de aire a cada lado. Dentro de
   cada ventana rueda una columna de cinco palabras de 78 px (64 px de
   Zalando Sans Expanded Medium, interlineado automatico = 1,21875).

   El prototipo encadena las cinco variantes con AFTER_TIMEOUT de 1 s y
   SMART_ANIMATE de 0,3 s con EASE_IN_AND_OUT; el ultimo salto, el que vuelve
   al principio, dura 0,6 s. Total de la vuelta: 5x1 + 4x0,3 + 0,6 = 6,8 s.
   Los porcentajes de @keyframes son esos tiempos sobre 6,8 s. */
.motion-copy{
  display:grid;grid-template-columns:43.78% 3.67% 43.78%;
  justify-content:space-between;column-gap:4.38%;align-items:start;
  padding:clamp(20px,2.8vw,40px) 0 24px;
  font-family:var(--display-x);font-weight:500;color:#000;
  font-size:clamp(18px,4.44vw,64px);line-height:1.21875;
}
.motion-copy > span{text-align:center}
.motion-copy__slot{position:relative;overflow:hidden;height:1.21875em}
.motion-copy__slot ul{
  margin:0;padding:0;list-style:none;
  animation:slot 6.8s infinite;
}
.motion-copy__slot--b ul{animation-name:slot-b}
.motion-copy__slot li{height:1.21875em;text-align:center;white-space:nowrap}

/* Las dos columnas se mueven a la vez, asi que comparten los tiempos; van en
   dos @keyframes solo porque el navegador no deja compartir uno con animation
   -name distinto por columna. */
@keyframes slot{
  0%,14.71%      {transform:translateY(0)}
  19.12%,33.82%  {transform:translateY(-20%)}
  38.24%,52.94%  {transform:translateY(-40%)}
  57.35%,72.06%  {transform:translateY(-60%)}
  76.47%,91.18%  {transform:translateY(-80%)}
  /* El prototipo vuelve a la variante Default, asi que la columna sube de
     nuevo al principio; por eso este ultimo salto dura 0,6 s y no 0,3. */
  100%           {transform:translateY(0)}
}
@keyframes slot-b{
  0%,14.71%      {transform:translateY(0)}
  19.12%,33.82%  {transform:translateY(-20%)}
  38.24%,52.94%  {transform:translateY(-40%)}
  57.35%,72.06%  {transform:translateY(-60%)}
  76.47%,91.18%  {transform:translateY(-80%)}
  /* El prototipo vuelve a la variante Default, asi que la columna sube de
     nuevo al principio; por eso este ultimo salto dura 0,6 s y no 0,3. */
  100%           {transform:translateY(0)}
}
/* Cada tramo que se mueve lleva el EASE_IN_AND_OUT del prototipo; en los
   tramos de espera da igual porque no cambia nada. */
.motion-copy__slot ul{animation-timing-function:ease-in-out}

/* Con el texto a 18 px las ventanas de 43,78 % se quedan cortas y recortarian
   palabras como TECHNOLOGY, asi que debajo de 760 px las ventanas se miden
   por el texto. */
@media (max-width:760px){
  .motion-copy{
    display:flex;justify-content:center;align-items:center;
    gap:.35em;column-gap:.35em;
  }
  .motion-copy__slot{flex:0 0 auto;width:8.4em}
}
@media (prefers-reduced-motion:reduce){
  .motion-copy__slot ul{animation:none}
}

/* --------------------------- otros servicios ---------------------------- */
/* Module 6 del diseno: 56 arriba y 88 abajo. */
.otros{padding-bottom:clamp(40px,6.11vw,88px)}
.otros__intro{
  font-size:clamp(16px,1.39vw,20px);line-height:1.4;color:#000;
  margin-top:clamp(20px,2.2vw,32px);
}
.otros__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:clamp(20px,2.22vw,32px) 0;
}
.otros__card{
  position:relative;aspect-ratio:421/325;border-radius:24px;overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
}
.otros__card img,
.otros__card .media-video,
.otros__card .media-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;
  transition:transform .6s var(--ease);
}
.otros__card .media-fallback{display:none}
.otros__card.no-video .media-video{display:none}
.otros__card.no-video .media-fallback{display:block}
.otros__card::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);
  transition:background .4s var(--ease);
}
.otros__card span{
  position:relative;z-index:1;text-align:center;color:#fff;
  padding:0 clamp(10px,1.4vw,20px);
  font-family:"Open Sans Hebrew",var(--sans);
  font-size:clamp(15px,1.67vw,24px);line-height:1.37;
}
.otros__card:hover img,.otros__card:focus-visible img,
.otros__card:hover .media-video,.otros__card:focus-visible .media-video,
.otros__card:hover .media-fallback,.otros__card:focus-visible .media-fallback{transform:scale(1.06)}
.otros__card:hover::after,.otros__card:focus-visible::after{background:rgba(0,0,0,.24)}
@media (max-width:700px){
  .otros__grid{grid-template-columns:1fr}
}