/* PromoPrint · bloque «Adaptarnos está en nuestra naturaleza»: cierre conceptual de la sección de
   fabricación y antes del banner naranja. Fondo negro de la página (el mismo de la sección
   anterior), texto a la izquierda y el camaleón del logo a la derecha. Tokens de hero.css. */

.adapt {
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --adapt-tint: cubic-bezier(0.3, 0, 0.2, 1);  /* desaceleración suave para el cambio de color */
  --adapt-neutral: #e4e1db;                    /* tono neutro: contraste alto sobre el negro */
  --adapt-mid: #b8734b;                        /* acento sobrio, solo para esta animación */
  --adapt-teal: #4f9a94;                       /* tonos del ciclo infinito: sobrios, nunca */
  --adapt-ochre: #c9a24a;                      /* saturados, para no volverse arcoíris */

  background: var(--ink);
  padding: clamp(64px, 8vw, 96px) 0;
}

.adapt__inner {
  width: var(--wrap);
  margin-inline: auto;
  display: grid;
  /* Camaleón a la izquierda (40 %) y texto a la derecha (60 %). En el HTML el texto va primero
     para que en móvil y en lectores de pantalla se lea antes que el símbolo. */
  /* El par (camaleón + texto) va centrado en la sección; el ancho lo marca el contenido. */
  grid-template-columns: auto auto;
  justify-content: center;
  grid-template-areas: "mark text";
  column-gap: clamp(48px, 5.5vw, 80px);
  align-items: center;
}
.adapt__text { grid-area: text; width: min(640px, 44vw); }

/* ── Texto ─────────────────────────────────────────────── */

.adapt__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 600 12.5px/1.2 var(--font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.78);
}
.adapt__eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.adapt__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.1rem + 2.8vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--paper);
}
.adapt__line { display: block; }

.adapt__lead {
  margin: 22px 0 0;
  max-width: 42ch;
  font: 400 clamp(1rem, 0.9rem + 0.35vw, 1.2rem)/1.5 var(--font);
  color: rgb(var(--paper-rgb) / 0.72);
}

/* ── Camaleón ──────────────────────────────────────────── */

.adapt__figure {
  grid-area: mark;
  justify-self: center;
  width: clamp(220px, 22vw, 300px);
  margin: 0;
}

/* Objeto 3D: el color vive aquí para que el frente y las capas de profundidad lo hereden.
   Color final: naranja de la marca. adapt.js lo gira con el scroll y el puntero (--rx, --ry)
   y le agrega detrás las capas que dan el relieve. Sin JS es el SVG plano. */
/* Recorte: las capas de profundidad no pueden asomarse fuera del área del camaleón. */
.adapt__figure { perspective: 1100px; overflow: hidden; }
.adapt__obj {
  position: relative;
  color: var(--brand);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.adapt.is-3d .adapt__obj { will-change: transform; }

/* Cuerpo y ojo usan currentColor y cambian juntos. El ojo se dibuja como anillo (contorno del
   trazado exterior) con la pupila sólida dentro, para que el fondo se vea entre ambos. */
.adapt__mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Capas de profundidad: copias del mismo SVG, cada vez más atrás y más oscuras (adapt.js
   fija --i y el tono de cada una). Forman el canto del relieve cuando el camaleón gira. */
.adapt__figure { --adapt-step: 1.8px; }
.adapt__depth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(calc(var(--i) * var(--adapt-step) * -1));
  pointer-events: none;
}
.adapt__body { fill: currentColor; }
.adapt__eye-ring { fill: none; stroke: currentColor; stroke-width: 4.5; }
.adapt__eye-pupil { fill: currentColor; }

/* Sin JS o con movimiento reducido el camaleón queda en naranja desde el inicio. */

@keyframes adapt-tint {
  0%   { color: var(--adapt-neutral); }
  50%  { color: var(--adapt-mid); }
  100% { color: var(--brand); }
}

/* Después de la entrada, el camaleón sigue adaptándose sin fin, con el color latiendo como un
   pulso: cada 1,2 s el nuevo tono entra de golpe con un destello (más claro), se asienta en su
   color y se queda quieto hasta el siguiente latido. El símbolo no se mueve ni cambia de tamaño.
   Recorre tonos sobrios (como las marcas de distintos clientes) y vuelve al naranja. */
@keyframes adapt-cycle {
  0%        { color: var(--brand); }
  3%        { color: color-mix(in srgb, var(--adapt-teal) 65%, #fff); }
  10%, 25%  { color: var(--adapt-teal); }
  28%       { color: color-mix(in srgb, var(--adapt-neutral) 70%, #fff); }
  35%, 50%  { color: var(--adapt-neutral); }
  53%       { color: color-mix(in srgb, var(--adapt-ochre) 65%, #fff); }
  60%, 75%  { color: var(--adapt-ochre); }
  78%       { color: color-mix(in srgb, var(--brand) 65%, #fff); }
  85%, 100% { color: var(--brand); }
}

/* ── Entrada (la activa adapt.js una sola vez; sin JS todo queda visible) ── */

.adapt.js-reveal [data-adapt-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--rise, 10px), 0);
  transition:
    opacity var(--dur, 600ms) var(--reveal-ease) var(--delay, 0ms),
    transform var(--dur, 600ms) var(--reveal-ease) var(--delay, 0ms);
}
.adapt.js-reveal .adapt__eyebrow { --rise: 10px; --dur: 600ms; --delay: 0ms; }
.adapt.js-reveal .adapt__title   { --rise: 16px; --dur: 750ms; --delay: 100ms; }
.adapt.js-reveal .adapt__lead    { --rise: 10px; --dur: 680ms; --delay: 220ms; }
.adapt.js-reveal .adapt__figure  { --dur: 850ms; --delay: 150ms; transform: scale(0.97); }
.adapt.js-reveal .adapt__obj     { color: var(--adapt-neutral); }

.adapt.js-reveal.is-in [data-adapt-reveal] { opacity: 1; transform: none; }
.adapt.js-reveal.is-in .adapt__obj {
  animation:
    adapt-tint 1600ms var(--adapt-tint) 300ms both,
    adapt-cycle 4800ms ease-out 1900ms infinite;
}
/* Fuera de pantalla el ciclo se pausa (adapt.js) y retoma donde quedó. */
.adapt.js-reveal.is-in.is-away .adapt__obj { animation-play-state: paused; }

/* ── Tablet ─────────────────────────────────────────────── */

@media (max-width: 1099px) {
  .adapt__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); justify-content: stretch; }
  .adapt__text { width: auto; }
  .adapt__figure { width: clamp(200px, 26vw, 260px); }
}

/* ── Móvil: una columna, texto primero y camaleón debajo ── */

@media (max-width: 767px) {
  /* Mobile: la sección ocupa toda la pantalla en negro y su contenido queda centrado. */
  .adapt {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 0;
  }
  .adapt__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "mark";
    row-gap: 32px;
  }
  .adapt__figure { width: 176px; --adapt-step: 1.2px; }
  .adapt__text { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .adapt.js-reveal [data-adapt-reveal] { transform: none; opacity: 1; transition: none; }
  .adapt.js-reveal .adapt__figure { transform: none; }
  .adapt.js-reveal .adapt__obj,
  .adapt.js-reveal.is-in .adapt__obj { animation: none; color: var(--brand); transform: none; }
}