/* Velaccio — baraja de servicios (sección "Servicios" de Creative Engine).
   Provenance ref: VEL-PROV-9K4XQ7M2

   Una carta ancha en el centro y hasta dos tiras verticales a cada lado, que
   es lo que se ve en la referencia. La carta no aparece ni desaparece: es la
   misma pieza blanca, que se abre y se cierra. La imagen crece con ella —
   object-fit:cover, así que al abrirse va enseñando más foto en lugar de
   estirarla.

   CÓMO SE ANIMA, Y POR QUÉ ASÍ. La primera versión también cambiaba de tamaño,
   pero el texto iba dentro del flujo: al estrecharse la carta se volvían a
   partir las líneas en cada frame, cinco veces por frame, y se notaba. Aquí
   dentro de la carta no hay flujo: el bloque de texto y el de imagen están
   posicionados en absoluto, el de texto con un tamaño FIJO que no cambia nunca
   (sólo se funde y lo recorta la carta al cerrarse), así que lo único que se
   remaqueta es la caja blanca y la caja de la imagen — dos rectángulos vacíos,
   sin tipografía que rehacer. La carta lleva contain:layout paint para que eso
   no salga de ahí, y el viaje lateral de cada carta es un transform en el
   slot, que va por compositor.

   Las cartas NO son enlaces ni botones: sólo informan del servicio. Lo único
   pulsable son los puntos de abajo y las tiras laterales, y eso es navegación
   del propio carrusel, no una llamada a la acción.

   Sizing, igual que en ig-post.css / ce-about.css: la página hereda
   html{font-size:.625vw} de main-style.css, así que rem sigue al viewport.
   Todo lo que tiene que ser legible va en clamp de px/vw. */

/* main-style.css no pone border-box de forma global (sólo dentro de .glide). */
.svcd,
.svcd *,
.svcd *::before,
.svcd *::after {
  box-sizing: border-box;
}

.svcd {
  --svcd-card-w: clamp(280px, 52vw, 820px);
  --svcd-card-h: clamp(340px, 34vw, 540px);
  --svcd-pad: clamp(16px, 1.6vw, 26px);
  --svcd-inner: clamp(10px, 1.2vw, 22px);

  --svcd-peek-w: clamp(52px, 5.2vw, 84px);
  --svcd-peek-h: calc(var(--svcd-card-h) * .72);
  --svcd-peek-pad: clamp(4px, .45vw, 7px);

  /* geometría interna de la carta abierta: dos cajas colocadas a mano sobre el
     centro de la carta, nunca en flujo */
  --svcd-media-w: calc(var(--svcd-card-w) * .44);
  --svcd-media-h: calc(var(--svcd-card-h) - var(--svcd-pad) * 2);
  --svcd-media-x: calc(var(--svcd-card-w) / 2 - var(--svcd-pad) - var(--svcd-media-w) / 2);
  --svcd-media-y: 0px;
  --svcd-body-w: calc(var(--svcd-card-w) - var(--svcd-pad) * 2 - var(--svcd-media-w) - var(--svcd-inner));
  --svcd-body-h: calc(var(--svcd-card-h) - var(--svcd-pad) * 2);
  --svcd-body-x: calc(var(--svcd-pad) + var(--svcd-body-w) / 2 - var(--svcd-card-w) / 2);
  --svcd-body-y: 0px;

  --svcd-gap: clamp(10px, 1.1vw, 20px);
  /* centro de la tira contigua y de la siguiente: medio ancho de carta, medio
     de tira y el hueco; la segunda repite el paso con la tira ya reducida */
  --svcd-x1: calc((var(--svcd-card-w) + var(--svcd-peek-w)) / 2 + var(--svcd-gap));
  --svcd-x2: calc(var(--svcd-x1) + var(--svcd-peek-w) * .92 + var(--svcd-gap));
  --svcd-ease: cubic-bezier(.22, .61, .36, 1);
  --svcd-dur: .58s;

  position: relative;
  margin-top: clamp(24px, 3vw, 56px);
  /* el hueco vertical es para que overflow:hidden no coma la sombra */
  padding-block: clamp(14px, 1.8vw, 34px) clamp(18px, 2.2vw, 40px);
  /* en pantallas estrechas las tiras exteriores se salen del contenedor */
  overflow: hidden;
}

/* ---- escenario -------------------------------------------------------- */

.svcd__stage {
  position: relative;
  height: var(--svcd-card-h);
  touch-action: pan-y;
}

/* el slot no pinta nada: es el punto que viaja, y lo único que cambia en él
   es el transform */
.svcd__slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--svcd-dur) var(--svcd-ease),
    opacity var(--svcd-dur) var(--svcd-ease);
  will-change: transform;
}

/* posiciones. El índice relativo lo escribe js/svc-deck.js en data-pos */

.svcd__slot[data-pos="0"] { z-index: 3; }
.svcd__slot[data-pos="1"] { z-index: 2; transform: translate3d(var(--svcd-x1), 0, 0); }
.svcd__slot[data-pos="-1"] { z-index: 2; transform: translate3d(calc(var(--svcd-x1) * -1), 0, 0); }
.svcd__slot[data-pos="2"] { z-index: 1; transform: translate3d(var(--svcd-x2), 0, 0) scale(.8); }
.svcd__slot[data-pos="-2"] { z-index: 1; transform: translate3d(calc(var(--svcd-x2) * -1), 0, 0) scale(.8); }

/* fuera de la baraja: aparcados más allá de la tira exterior. Es el único
   sitio donde algo se desvanece, y es fuera del sitio donde se mira. */
.svcd__slot[data-pos="far-r"],
.svcd__slot[data-pos="far-l"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.svcd__slot[data-pos="far-r"] { transform: translate3d(calc(var(--svcd-x2) * 1.45), 0, 0) scale(.62); }
.svcd__slot[data-pos="far-l"] { transform: translate3d(calc(var(--svcd-x2) * -1.45), 0, 0) scale(.62); }

/* pulsar una tira la trae al centro; la del centro no hace nada */
.svcd__slot:not([data-pos="0"]) {
  cursor: pointer;
}

/* ---- la carta: cerrada es la tira, abierta es la carta ---------------- */

.svcd__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--svcd-peek-w);
  height: var(--svcd-peek-h);
  border-radius: clamp(14px, 1.4vw, 24px);
  background: #fff;
  color: #0b0b0f;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
  /* lo que se remaqueta al abrir y cerrar se queda dentro de la carta */
  contain: layout paint;
  transition:
    width var(--svcd-dur) var(--svcd-ease),
    height var(--svcd-dur) var(--svcd-ease);
}

.svcd__slot[data-pos="0"] .svcd__card {
  width: var(--svcd-card-w);
  height: var(--svcd-card-h);
}

/* ---- texto: tamaño fijo, sólo se funde y lo recorta la carta ----------- */

.svcd__body {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--svcd-body-w);
  height: var(--svcd-body-h);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate(calc(-50% + var(--svcd-body-x)), calc(-50% + var(--svcd-body-y)));
  transition: opacity .18s linear;
}

.svcd__slot[data-pos="0"] .svcd__body {
  opacity: 1;
  /* entra cuando la carta ya está casi abierta; si entra antes se lee el
     texto a medio recortar */
  transition: opacity .24s linear calc(var(--svcd-dur) * .45);
}

.svcd__title {
  margin: 0;
  font-family: "Acid Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(22px, 2.5vw, 42px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #14141a;
}

.svcd__text {
  margin: clamp(18px, 2.4vw, 44px) 0 0;
  font-family: "Acid Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(14px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.42;
  color: #3a3a44;
}

.svcd__meta {
  margin-top: auto;
  padding-left: clamp(10px, 1vw, 16px);
  border-left: 2px solid #14141a;
  font-family: "Acid Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.35;
}

.svcd__meta b {
  display: block;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 600;
  color: #14141a;
}

.svcd__meta span {
  display: block;
  font-size: clamp(11px, .95vw, 15px);
  color: #6b6b78;
}

/* ---- imagen: la caja crece, la foto no se estira ---------------------- */

.svcd__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--svcd-peek-w) - var(--svcd-peek-pad) * 2);
  height: calc(var(--svcd-peek-h) - var(--svcd-peek-pad) * 2);
  border-radius: clamp(8px, .9vw, 14px);
  overflow: hidden;
  background: #0b0b0f;
  transform: translate(-50%, -50%);
  transition:
    width var(--svcd-dur) var(--svcd-ease),
    height var(--svcd-dur) var(--svcd-ease),
    transform var(--svcd-dur) var(--svcd-ease),
    border-radius var(--svcd-dur) var(--svcd-ease);
}

.svcd__slot[data-pos="0"] .svcd__media {
  width: var(--svcd-media-w);
  height: var(--svcd-media-h);
  border-radius: clamp(10px, 1vw, 18px);
  transform: translate(calc(-50% + var(--svcd-media-x)), calc(-50% + var(--svcd-media-y)));
}

.svcd__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- puntos ----------------------------------------------------------- */

.svcd__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: clamp(18px, 2vw, 34px);
}

/* estos sí animan el ancho: son cinco cajas de 7 px en una fila suelta */
.svcd__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: width .4s var(--svcd-ease), background .4s var(--svcd-ease);
}

.svcd__dot.is-sel {
  width: 30px;
  background: #fff;
}

/* ---- móvil ------------------------------------------------------------
   Por debajo de 900 px la carta se abre en columna: título y texto arriba,
   imagen abajo. Sólo cambian las cuatro medidas de cada caja; el mecanismo es
   el mismo. Las tiras exteriores desaparecen; quedan las dos contiguas, que
   son las que dan a entender que hay más servicios detrás. */

@media (max-width: 900px) {
  .svcd {
    --svcd-card-w: min(78vw, 520px);
    --svcd-card-h: clamp(430px, 104vw, 620px);
    --svcd-peek-w: clamp(38px, 7vw, 62px);

    --svcd-body-w: calc(var(--svcd-card-w) - var(--svcd-pad) * 2);
    --svcd-body-h: calc(var(--svcd-card-h) * .38);
    --svcd-body-x: 0px;
    --svcd-body-y: calc(var(--svcd-pad) + var(--svcd-body-h) / 2 - var(--svcd-card-h) / 2);
    --svcd-media-w: calc(var(--svcd-card-w) - var(--svcd-pad) * 2);
    --svcd-media-h: calc(var(--svcd-card-h) - var(--svcd-pad) * 2 - var(--svcd-body-h) - var(--svcd-inner));
    --svcd-media-x: 0px;
    --svcd-media-y: calc(var(--svcd-card-h) / 2 - var(--svcd-pad) - var(--svcd-media-h) / 2);
  }

  .svcd__title {
    font-size: clamp(21px, 5vw, 30px);
  }

  .svcd__text {
    margin-top: clamp(12px, 2.4vw, 20px);
    font-size: clamp(14px, 3.5vw, 17px);
  }

  .svcd__slot[data-pos="2"],
  .svcd__slot[data-pos="-2"] {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  .svcd {
    --svcd-card-w: min(84vw, 420px);
    --svcd-peek-w: 26px;
  }
}

/* ---- movimiento reducido ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .svcd__slot,
  .svcd__card,
  .svcd__body,
  .svcd__media,
  .svcd__dot {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}