/* Velaccio — "Qué es Creative Engine".
   Provenance ref: VEL-PROV-9K4XQ7M2

   Va entre el showreel y los casos: el showreel fija la postura, esta sección
   define el servicio y sólo después los casos lo argumentan. El contenido sale
   de guidelinesVelaccio.md §4.1, §5 y §11 — sin cifras, precios ni resultados
   prometidos, según §16.

   POR QUÉ ESTA FORMA. La versión anterior eran tres bandas de texto apiladas
   con el mismo peso: definición, problema y seis pasos en fila. Se leía como
   una hoja de cálculo y dejaba media página vacía a la derecha. El copy dice
   una cosa muy concreta — que esto no es una entrega sino un ciclo que no
   termina — así que el "cómo funciona" se dibuja como lo que es: un anillo
   cerrado de seis fases. El problema que resuelve se pone a su izquierda, en
   columna estrecha, para que la comparación caiga sola: a la izquierda el
   desgaste, a la derecha la máquina que lo sostiene.

   Y no es otro carrusel a propósito: la página ya lleva el showreel, el post
   de Instagram y la baraja de servicios. Aquí no hay nada que arrastrar.

   El degradado de marca aparece una sola vez en toda la sección — el arco que
   recorre el anillo. Es el único acontecimiento de color, según la proporción
   85/10/5 de VELACCIO-MOTION-STYLE.md.

   Sizing: la página hereda html{font-size:.625vw} de main-style.css, así que
   rem sigue al viewport. rem se usa sólo para el titular de display; todo lo
   que tiene que ser legible va en clamp de px/vw. */

.ceabout {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 7vw, 128px) 0 clamp(48px, 6vw, 104px);
  background: #000;
  color: #fff;
  overflow: hidden;
}

.ceabout__inner {
  /* mismo ancho de columna y gutter que .vsr-section__inner */
  max-width: 132.8rem;
  margin: 0 auto;
  padding-inline: 1.6rem;
}

/* ---- 1. la tesis ------------------------------------------------------ */

.ceabout__top {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 96px);
}

.ceabout__head {
  /* el titular fija la columna: la prosa se queda con el resto */
  flex: 0 1 auto;
  min-width: min-content;
}

.ceabout__label {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 26px);
  color: rgba(255, 255, 255, .5);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 500;
  letter-spacing: .02em;
}

.ceabout__title {
  margin: 0;
  font-family: "ABC Gravity Compressed", sans-serif;
  font-size: clamp(3rem, 6.4vw, 7.6rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}

.ceabout__body {
  flex: 1 1 0;
  min-width: 0;
  /* asienta ópticamente la prosa contra la altura de mayúscula del titular */
  padding-top: clamp(4px, 1vw, 16px);
}

.ceabout__lead {
  margin: 0;
  max-width: 54ch;
  color: rgba(255, 255, 255, .74);
  font-family: "P22 Mackinac", Georgia, serif;
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 400;
  line-height: 1.5;
}

.ceabout__lead strong {
  color: #fff;
  font-weight: 500;
}

.ceabout__lead + .ceabout__lead {
  margin-top: 1em;
}

/* ---- 2. problema | motor ---------------------------------------------- */

.ceabout__main {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  gap: clamp(28px, 3.5vw, 72px);
  align-items: start;
  grid-template-rows: auto 1fr;
  margin-top: clamp(48px, 6vw, 104px);
  padding-top: clamp(24px, 2.8vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* el problema: una lista de desgaste, numerada, en columna estrecha */

.ceabout__problem { grid-column: 1; grid-row: 1; }
.ceabout__cycle { grid-column: 2; grid-row: 1 / span 2; }
.ceabout__outcome { grid-column: 1; grid-row: 2; align-self: end; }

.ceabout__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ceabout;
}

.ceabout__list li {
  counter-increment: ceabout;
  position: relative;
  padding: clamp(12px, 1.3vw, 20px) 0 clamp(12px, 1.3vw, 20px) clamp(34px, 3vw, 52px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .72);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.4;
}

.ceabout__list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ceabout__list li::before {
  content: "0" counter(ceabout);
  position: absolute;
  left: 0;
  top: clamp(13px, 1.4vw, 22px);
  color: rgba(255, 255, 255, .32);
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ---- el motor --------------------------------------------------------- */

.ceabout__cycle {
  padding-left: clamp(28px, 3.5vw, 72px);
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.ceng {
  --ceng-size: clamp(290px, 30vw, 440px);
  --ceng-r: calc(var(--ceng-size) * .43);
  --ceng-ease: cubic-bezier(.16, 1, .3, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(8px, 1.5vw, 24px);
}

.ceng__ring {
  position: relative;
  width: var(--ceng-size);
  height: var(--ceng-size);
}

.ceng__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ceng__ticks {
  fill: none;
  stroke: rgba(255, 255, 255, .17);
  stroke-width: 2.4;
  /* marcas por dentro del aro: el anillo se lee como un dial y no como un
     gráfico de tarta, y por fuera queda el aire limpio para las etiquetas.
     Giran una vuelta cada minuto y medio: no se ve moverse, se ve encendido */
  stroke-dasharray: .3 8.87;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  animation: cengSpin 90s linear infinite;
}

@keyframes cengSpin {
  to { transform: rotate(360deg); }
}

.ceng__track {
  fill: none;
  stroke: rgba(255, 255, 255, .13);
  stroke-width: .8;
}

/* el arco es el único color de la sección. Arranca arriba y avanza en sentido
   horario; al llegar a la sexta fase cierra el círculo — que es justo lo que
   dice el texto */
.ceng__arc {
  fill: none;
  stroke: url(#cengGrad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 540.354;
  stroke-dashoffset: 540.354;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transition: stroke-dashoffset .9s var(--ceng-ease);
}

/* ---- nodos ------------------------------------------------------------ */

.ceng__nodes {
  position: absolute;
  inset: 0;
}

/* cada nodo es un punto sobre la circunferencia: se rota hasta su ángulo, se
   empuja el radio y se desgira, para que la etiqueta salga siempre derecha */
.ceng__node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transform: rotate(var(--a)) translate(var(--ceng-r)) rotate(calc(var(--a) * -1));
}

.ceng__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: #000;
  transition:
    transform .45s var(--ceng-ease),
    border-color .45s var(--ceng-ease),
    box-shadow .45s var(--ceng-ease);
}

.ceng__node[aria-selected="true"] .ceng__dot {
  border-color: transparent;
  transform: scale(1.45);
  background:
    linear-gradient(135deg, #5eead4, #67e8f9 30%, #818cf8 62%, #f472b6);
  box-shadow: 0 0 0 6px rgba(129, 140, 248, .16), 0 6px 18px -6px rgba(129, 140, 248, .9);
}

.ceng__node:hover .ceng__dot {
  border-color: rgba(255, 255, 255, .7);
}

.ceng__label {
  position: absolute;
  white-space: nowrap;
  color: rgba(255, 255, 255, .46);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 500;
  letter-spacing: -.005em;
  transition: color .35s var(--ceng-ease);
}

.ceng__label i {
  margin-right: .55em;
  font-style: normal;
  font-size: .78em;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .3);
  font-variant-numeric: tabular-nums;
  transition: color .35s var(--ceng-ease);
}

.ceng__node[aria-selected="true"] .ceng__label { color: #fff; }
.ceng__node[aria-selected="true"] .ceng__label i { color: rgba(255, 255, 255, .55); }
.ceng__node:hover .ceng__label { color: rgba(255, 255, 255, .82); }

.ceng__node:focus-visible .ceng__label {
  color: #fff;
  outline: 1px solid rgba(255, 255, 255, .5);
  outline-offset: 6px;
}

/* la etiqueta se coloca hacia fuera del anillo, según el lado */
.ceng__node[data-side="r"] .ceng__label { left: 20px; top: 50%; transform: translateY(-50%); }
.ceng__node[data-side="l"] .ceng__label { right: 20px; top: 50%; transform: translateY(-50%); }
.ceng__node[data-side="t"] .ceng__label { bottom: 18px; left: 50%; transform: translateX(-50%); }
.ceng__node[data-side="b"] .ceng__label { top: 18px; left: 50%; transform: translateX(-50%); }

/* ---- centro ----------------------------------------------------------- */

.ceng__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ceng__panel {
  animation: cengIn .42s var(--ceng-ease) both;
}

@keyframes cengIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ceng__idx {
  display: block;
  color: rgba(255, 255, 255, .4);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 500;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.ceng__name {
  margin: clamp(8px, .9vw, 14px) 0 0;
  color: #fff;
  font-family: "ABC Gravity Compressed", sans-serif;
  font-size: clamp(30px, 3.4vw, 58px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.ceng__note {
  margin: clamp(8px, 1vw, 16px) auto 0;
  max-width: 24ch;
  color: rgba(255, 255, 255, .6);
  font-family: "P22 Mackinac", Georgia, serif;
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.45;
}

.ceng__loop {
  margin: clamp(20px, 2.2vw, 34px) 0 0;
  color: rgba(255, 255, 255, .34);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- 3. el resultado -------------------------------------------------- */

.ceabout__outcome {
  margin: clamp(32px, 3.6vw, 56px) 0 0;
  padding-top: clamp(20px, 2.2vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  max-width: 34ch;
  color: rgba(255, 255, 255, .82);
  font-family: "P22 Mackinac", Georgia, serif;
  font-size: clamp(17px, 1.55vw, 27px);
  line-height: 1.4;
}

/* ---- estrecho --------------------------------------------------------- */

@media (max-width: 1099px) {
  .ceabout__top {
    flex-direction: column;
    gap: clamp(22px, 3vw, 36px);
  }

  .ceabout__head { min-width: 0; }
  .ceabout__body { padding-top: 0; }

  /* el anillo necesita su propio ancho: debajo del problema, no al lado */
  .ceabout__main {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: clamp(36px, 5vw, 56px);
  }

  .ceabout__problem,
  .ceabout__cycle,
  .ceabout__outcome {
    grid-column: 1;
    grid-row: auto;
  }

  .ceabout__outcome {
    max-width: 54ch;
  }

  .ceabout__cycle {
    padding-left: 0;
    padding-top: clamp(28px, 4vw, 44px);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
}

@media (max-width: 720px) {
  .ceng {
    --ceng-size: min(72vw, 330px);
  }

  /* a este tamaño las etiquetas de fuera se pisan entre ellas: quedan los
     puntos numerados y el nombre grande en el centro, que es donde se lee */
  .ceng__label {
    display: none;
  }

  .ceng__dot {
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
  }

  .ceng__core { width: 74%; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ceng__arc,
  .ceng__dot,
  .ceng__label {
    transition-duration: .01ms !important;
  }

  .ceng__panel,
  .ceng__ticks {
    animation: none;
  }
}