/* ============================================================
   AZIST — HOME
   ============================================================ */

/* HERO ------------------------------------------------------ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  background-color: var(--color-white);
  /* Continuously-drifting gradient behind the aurora layers */
  background-image:
    radial-gradient(60% 50% at 15% 22%, rgba(125,196,255,0.20), transparent 60%),
    radial-gradient(55% 50% at 85% 78%, rgba(206,166,252,0.16), transparent 60%),
    radial-gradient(50% 45% at 60% 50%, rgba(65,100,254,0.15), transparent 62%),
    /* white base — keeps the hero predominantly white, blobs read as tints */
    linear-gradient(0deg, #ffffff, #ffffff);
  background-size: 320% 320%;
  animation: hero-bg-drift 8s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
  /* Custom properties para parallax (seteadas por animations.js) */
  --mouse-x: 0;
  --mouse-y: 0;
}
/* Shorter (laptop) viewports: vertical centering pulls the headline up against the
   nav. Top-align with a floored gap below the nav instead. Tall desktops unchanged. */
@media (max-height: 900px) {
  .hero {
    align-items: center;                                            /* vertically center on laptops (was flex-start) */
    padding-top: calc(var(--nav-height) + clamp(16px, 3vh, 40px));  /* min top gap — never crowds the nav */
    padding-bottom: clamp(16px, 3vh, 40px);                         /* symmetric floor → balanced air top & bottom */
  }
}
@keyframes hero-bg-drift {
  0%   { background-position: 0% 0%,   100% 100%, 50% 50%; }
  50%  { background-position: 100% 30%, 0% 70%,   40% 60%; }
  100% { background-position: 60% 100%, 30% 0%,   70% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}
.hero__ghost {
  bottom: -10%;
  left: -5%;
  font-size: clamp(120px, 18vw, 240px);
  letter-spacing: -0.04em;
  color: rgba(0,0,0,0.035);
  -webkit-text-stroke: none;
  /* Parallax — capa más lenta (fondo) */
  transform: translate(calc(var(--mouse-x) * 6px), calc(var(--mouse-y) * 4px));
  transition: transform 120ms linear;
}
/* Aurora gradients — 3 capas drifting que crean profundidad atmosférica */
.hero__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Layer 1 — sky-blue, derecha, drift amplio */
.hero__aurora--1 {
  width: clamp(500px, 60vw, 900px);
  height: clamp(500px, 60vw, 900px);
  top: 15%;
  right: 0%;
  background: radial-gradient(circle at 40% 40%,
    rgba(125, 196, 255, 0.75) 0%,
    rgba(125, 196, 255, 0.35) 30%,
    rgba(125, 196, 255, 0)   65%);
  animation: aurora-drift-1 22s ease-in-out infinite alternate;
}
/* Layer 2 — blue profundo, centro, drift opuesto */
.hero__aurora--2 {
  width: clamp(400px, 50vw, 750px);
  height: clamp(400px, 50vw, 750px);
  top: 50%;
  right: 25%;
  background: radial-gradient(circle at 50% 50%,
    rgba(65, 100, 254, 0.55) 0%,
    rgba(65, 100, 254, 0.22) 35%,
    rgba(65, 100, 254, 0)   70%);
  animation: aurora-drift-2 18s ease-in-out infinite alternate;
}
/* Layer 3 — light-purple, abajo derecha, drift más lento */
.hero__aurora--3 {
  width: clamp(380px, 45vw, 680px);
  height: clamp(380px, 45vw, 680px);
  top: 55%;
  right: -5%;
  background: radial-gradient(circle at 50% 50%,
    rgba(206, 166, 252, 0.60) 0%,
    rgba(206, 166, 252, 0.25) 35%,
    rgba(206, 166, 252, 0)   70%);
  animation: aurora-drift-3 28s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
  0%   { transform: translate(0,    0)   scale(1);   opacity: 0.85; }
  100% { transform: translate(-6%,  4%)  scale(1.15); opacity: 1;    }
}
@keyframes aurora-drift-2 {
  0%   { transform: translate(0,    0)   scale(1);   opacity: 0.7; }
  100% { transform: translate(7%,  -5%)  scale(1.10); opacity: 1;   }
}
@keyframes aurora-drift-3 {
  0%   { transform: translate(0,    0)   scale(1);   opacity: 0.75; }
  100% { transform: translate(-4%, -3%)  scale(1.12); opacity: 0.9;  }
}
/* Grano fino — textura sutil de "tela" / profundidad fotográfica */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
@media (max-width: 700px) {
  .hero__aurora {
    opacity: 0.6;
    filter: blur(40px);
  }
  .hero__aurora--2 { right: 5%; }
  .hero__aurora--3 { right: -15%; }
  .hero__grain { opacity: 0.2; }
}

/* HERO GRID — grilla que se construye al cargar ------------------- */
.hero__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Líneas verticales: dibujo desde arriba hacia abajo */
.hg--v {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: hg-draw-v 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Líneas horizontales: dibujo desde izquierda hacia derecha */
.hg--h {
  stroke-dasharray: 1440;
  stroke-dashoffset: 1440;
  animation: hg-draw-h 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Puntos de intersección: fade in */
.hg--dot {
  opacity: 0;
  animation: hg-dot-in 0.4s ease forwards;
}
/* Delays escalonados */
.hg--d0 { animation-delay: 0.1s; }
.hg--d1 { animation-delay: 0.25s; }
.hg--d2 { animation-delay: 0.4s; }
.hg--d3 { animation-delay: 0.55s; }
.hg--d4 { animation-delay: 0.7s; }
.hg--d5 { animation-delay: 0.85s; }
.hg--d6 { animation-delay: 1.0s; }
@keyframes hg-draw-v {
  to { stroke-dashoffset: 0; }
}
@keyframes hg-draw-h {
  to { stroke-dashoffset: 0; }
}
@keyframes hg-dot-in {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hg--v, .hg--h { stroke-dashoffset: 0; animation: none; }
  .hg--dot { opacity: 1; animation: none; }
}
/* "One way of working" — semibold */
.services-overview__title strong {
  font-weight: 600;
}
/* Tarjetas de servicio / proyectos — estrella */
.svc-card__star {
  width: clamp(24px, 2.5vw, 36px);
  height: auto;
  opacity: 0.50;
  flex-shrink: 0;
}
.lp-card__star {
  width: clamp(20px, 2vw, 28px);
  height: auto;
  opacity: 0.40;
  flex-shrink: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-inline: auto;     /* center the hero block in the container */
  text-align: center;      /* center headline, subline, body */
  /* Parallax — capa más cercana (inverso, muy sutil) */
  transform: translate(calc(var(--mouse-x) * -3px), calc(var(--mouse-y) * -2px));
  transition: transform 200ms linear;
}
.hero__label {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.hero__label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-blue);
}
.hero__headline {
  font-family: var(--font-frama);
  font-weight: 400;
  font-size: clamp(48px, 8.5vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--color-near-black);
  margin-bottom: var(--space-5);
}
/* tight leading without clipping: give the clip-reveal boxes descender room
   (negative margin keeps the leading tight). .hw--em already has its own. */
.hero__headline .hw:not(.hw--em) { padding-bottom: 0.24em; margin-bottom: -0.24em; padding-inline: 0.1em; margin-inline: -0.1em; }
/* headline reads on two lines; line 2 is nudged slightly right */
.hero__line { display: block; }
.hero__line--indent { padding-left: 0; }   /* indent removed so both lines center on the same axis */
.hero__subline {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--color-blue);
  margin-bottom: var(--space-5);
  min-height: 1.4em;
}
/* The rotating discipline fades as a unit: the wrapper fades while the text
   swaps underneath, then fades back in at its new (re-centered) width, so the
   line never jumps width when the discipline length changes. */
.hero__subline-rotator {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero__subline-rotator.fade-out {
  opacity: 0;
  transform: translateY(-8px);
}
.hero__subline-rotator.fade-in {
  opacity: 0;
  transform: translateY(8px);
}
.hero__subline-word {
  color: var(--color-blue);
  font-style: italic;
}
.hero__body {
  font-family: var(--font-frama);
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.15;
  color: var(--color-near-black);
  max-width: 380px;
  margin-inline: auto;     /* center the narrower body within the centered hero */
  margin-bottom: var(--space-8);
}
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;   /* center the CTA button horizontally */
  gap: var(--space-5);
  flex-wrap: wrap;
}
/* Home-hero-only CTA sizing — keeps the button proportional to the shrunk hero text.
   Scoped here so the shared global .btn--lg (used on other pages) stays untouched. */
.hero__actions .btn {
  padding: 16px 38px;
  font-size: var(--text-base);
}
.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 1;
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.hero__scroll.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.hero__scroll-line {
  width: 32px;
  height: 1px;
  background: linear-gradient(to right,
    var(--color-near-black) 0%,
    var(--color-near-black) 40%,
    var(--color-light-grey) 40%,
    var(--color-light-grey) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: scroll-line-slide 2s ease-in-out infinite;
}
.hero__scroll-text {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid-grey);
}
@keyframes scroll-line-slide {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0;   }
  100% { background-position: -100% 0; }
}

/* SERVICES OVERVIEW ----------------------------------------- */
.services-overview {
  padding-block: clamp(120px, 14vw, 200px);
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.services-overview__header {
  text-align: center;
  margin-bottom: clamp(72px, 9vw, 120px);
  position: relative;
  z-index: 1;
}
.services-overview__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--color-near-black);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.services-overview__subtitle {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-md);
  color: var(--color-grey);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.7;
}
.services-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}
.services-overview__card {
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out);
  /* Custom properties seteadas por JS data-spotlight */
  --spot-x: 50%;
  --spot-y: 50%;
}
.services-overview__card:hover { transform: translateY(-4px); }
/* Spotlight — radial gradient siguiendo el cursor.
   Sólo aparece on hover. Pseudo-element para no afectar el contenido. */
.services-overview__card[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: 0;
}
.services-overview__card--light[data-spotlight]::before {
  background: radial-gradient(circle 320px at var(--spot-x) var(--spot-y),
    rgba(65,100,254,0.10) 0%,
    rgba(65,100,254,0) 60%);
}
.services-overview__card--dark[data-spotlight]::before {
  background: radial-gradient(circle 360px at var(--spot-x) var(--spot-y),
    rgba(125,196,255,0.14) 0%,
    rgba(206,166,252,0.06) 35%,
    rgba(255,255,255,0) 65%);
}
.services-overview__card[data-spotlight]:hover::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .services-overview__card[data-spotlight]::before { display: none; }
}
.services-overview__card--light {
  background-color: var(--color-light-grey);
}
.services-overview__card--dark {
  background-color: var(--color-black);
}
.services-overview__card-ghost {
  position: absolute;
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 1;
  letter-spacing: -0.04em;
  top: -10px;
  left: 24px;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.services-overview__card--light .services-overview__card-ghost {
  color: rgba(0,0,0,0.06);
}
.services-overview__card--dark .services-overview__card-ghost {
  color: rgba(255,255,255,0.05);
}
.services-overview__card-content {
  position: relative;
  z-index: 1;
}
.services-overview__card-tag {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.services-overview__card--light .services-overview__card-tag { color: var(--color-blue); }
.services-overview__card--dark .services-overview__card-tag { color: var(--color-sky-blue); }
.services-overview__card-tag::before {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background-color: currentColor;
}
.services-overview__card-title {
  font-family: var(--font-frama);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.services-overview__card--light .services-overview__card-title { color: var(--color-near-black); }
.services-overview__card--dark .services-overview__card-title { color: var(--color-white); }
.services-overview__card-subtitle {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-base);
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-5);
  letter-spacing: 0.01em;
}
.services-overview__card--light .services-overview__card-subtitle { color: var(--color-blue); }
.services-overview__card--dark .services-overview__card-subtitle { color: var(--color-sky-blue); }
.services-overview__card-body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: var(--space-6);
}
.services-overview__card--light .services-overview__card-body { color: var(--color-grey); }
.services-overview__card--dark .services-overview__card-body { color: rgba(255,255,255,0.50); }
.services-overview__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: gap var(--duration-fast) var(--ease-out);
}
.services-overview__card:hover .services-overview__card-link { gap: var(--space-4); }
.services-overview__card--light .services-overview__card-link { color: var(--color-near-black); }
.services-overview__card--dark .services-overview__card-link { color: var(--color-white); }

/* Icon concéntrico en esquina superior derecha — brand pattern */
.services-overview__card-icon {
  position: absolute;
  top: clamp(24px, 3vw, 36px);
  right: clamp(24px, 3vw, 36px);
  width: clamp(56px, 6vw, 80px);
  height: clamp(56px, 6vw, 80px);
  z-index: 2;
  opacity: 0.55;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.services-overview__card:hover .services-overview__card-icon {
  opacity: 1;
  transform: rotate(-15deg) scale(1.08);
}
.card-icon-ring {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.card-icon-dot {
  opacity: 0;
  transform: scale(0);
  transform-origin: 40px 40px;
  transform-box: fill-box;
  transition: opacity var(--duration-base) var(--ease-out) 0.9s,
              transform var(--duration-base) var(--ease-out) 0.9s;
}
/* Al revelar la card, se dibujan los rings y aparece el dot */
.services-overview__card.revealed .card-icon-ring {
  stroke-dashoffset: 0;
}
.services-overview__card.revealed .card-icon-ring:nth-of-type(2) {
  transition-delay: 0.15s;
}
.services-overview__card.revealed .card-icon-ring:nth-of-type(3) {
  transition-delay: 0.3s;
}
.services-overview__card.revealed .card-icon-dot {
  opacity: 1;
  transform: scale(1);
}

/* SVC CARDS — bigger cards con imagen generativa ------------ */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  position: relative;
  z-index: 1;
}
.svc-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  min-height: 720px;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.svc-card--light {
  background-color: var(--color-off-white);
  border: 1px solid var(--color-light-grey);
}
.svc-card--dark {
  background-color: var(--color-near-black);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--color-white);
}
/* Spotlight overlay sobre card (data-spotlight) */
.svc-card[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: 1;
}
.svc-card--light[data-spotlight]::before {
  background: radial-gradient(circle 360px at var(--spot-x) var(--spot-y),
    rgba(65,100,254,0.10) 0%, transparent 60%);
}
.svc-card--dark[data-spotlight]::before {
  background: radial-gradient(circle 380px at var(--spot-x) var(--spot-y),
    rgba(125,196,255,0.14) 0%, rgba(206,166,252,0.06) 35%, transparent 65%);
}
.svc-card[data-spotlight]:hover::before { opacity: 1; }

/* Thumb area — top de la card con visual generativo */
.svc-card__thumb {
  position: relative;
  height: clamp(220px, 26vw, 340px);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
.svc-card__thumb--01 {
  /* Slide Center — azul/sky-blue */
  background:
    radial-gradient(circle at 25% 30%, rgba(125,196,255,0.55), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(65,100,254,0.55), transparent 60%),
    linear-gradient(135deg, #E6E6E6 0%, #FFFFFF 100%);
  color: var(--color-blue);
}
.svc-card__thumb--02 {
  /* Creative Hub — purple/orange sobre dark */
  background:
    radial-gradient(circle at 30% 25%, rgba(206,166,252,0.55), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(233,75,36,0.45), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(125,196,255,0.30), transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1d1d1b 100%);
  color: var(--color-sky-blue);
}
/* Real placeholder photo filling the thumb */
.svc-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}
.svc-card:hover .svc-card__photo { transform: scale(1.04); }

.svc-card__thumb-name {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: currentColor;
  opacity: 0.20;
  user-select: none;
  pointer-events: none;
  text-transform: lowercase;
  padding: 0 0 clamp(20px, 3vw, 40px) clamp(24px, 3vw, 40px);
}
.svc-card__rings {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  width: clamp(80px, 10vw, 130px);
  height: clamp(80px, 10vw, 130px);
  color: currentColor;
  opacity: 0.55;
  transition: transform 700ms var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.svc-card:hover .svc-card__rings {
  transform: rotate(45deg) scale(1.1);
  opacity: 0.85;
}

/* Body — texto/contenido debajo del thumb */
.svc-card__body {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}
.svc-card__tag {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.svc-card--light .svc-card__tag { color: var(--color-blue); }
.svc-card--dark .svc-card__tag { color: var(--color-sky-blue); }
.svc-card__title {
  font-family: var(--font-frama);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Preserva el espacio que ocupaba el .svc-card__tag (ya removido) para que
     el título no se pegue al borde superior del body */
  margin: var(--space-8) 0 var(--space-3);
}
.svc-card--light .svc-card__title { color: var(--color-near-black); }
.svc-card--dark .svc-card__title { color: var(--color-white); }
.svc-card__sub {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 16px);
  margin: 0 0 var(--space-6);
  letter-spacing: 0.01em;
  white-space: nowrap;   /* keep the subtitle on a single line */
  text-align: left;      /* align with the card title's left edge */
}
.svc-card--light .svc-card__sub { color: var(--color-blue); }
.svc-card--dark .svc-card__sub { color: var(--color-orange); }
.svc-card__copy {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  /* Reserve ~5 lines (the longer Slide Center copy) so both cards' copy areas match height,
     top-anchoring the chips so the two buttons rows line up; any slack falls below the chips. */
  min-height: 8.75em;   /* 5 lines × line-height 1.75 */
  margin: 0 0 var(--space-6);
  max-width: 480px;
  /* Avoid a single word stranded on the last line */
  text-wrap: pretty;
}
.svc-card--light .svc-card__copy { color: var(--color-grey); }
.svc-card--dark .svc-card__copy { color: rgba(255,255,255,0.65); }
.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: gap var(--duration-fast) var(--ease-out);
}
.svc-card--light .svc-card__more { color: var(--color-near-black); }
.svc-card--dark .svc-card__more { color: var(--color-white); }
.svc-card:hover .svc-card__more { gap: var(--space-4); }
.svc-card__more svg {
  width: 14px; height: 14px;
}

/* Outdent the pill group by (chip padding-left 14px + border 1px) so the
   chip TEXT lines up with the body-copy left edge inside the card. */
.svc-card__body .chips { margin-left: -15px; }
/* Service tags as interactive pills — colour change + slight scale on hover */
.svc-card .chip {
  cursor: pointer;
  transition: transform 200ms var(--ease-out),
              background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out);
}
.svc-card .chip:hover { transform: scale(1.05); }
.svc-card--light .chip:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}
.svc-card--dark .chip:hover {
  background-color: var(--color-sky-blue);
  border-color: var(--color-sky-blue);
  color: var(--color-near-black);
}

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); }
  .svc-card { min-height: 0; }
}
@media (max-width: 560px) {
  /* very narrow phones: let the subtitle wrap rather than overflow */
  .svc-card__sub { white-space: normal; }
}

/* SERVICES LIST — numerada con hover-expand ----------------- */
.services-list {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--color-light-grey);
  position: relative;
  z-index: 1;
}
.services-list__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vw, 44px) clamp(8px, 1vw, 16px);
  align-items: start;
  border-bottom: 1px solid var(--color-light-grey);
  position: relative;
  cursor: pointer;
  transition: padding var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.services-list__row::after {
  /* Línea de progreso que se dibuja debajo del row on hover */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--color-near-black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
  z-index: 2;
}
.services-list__row:hover {
  padding-block: clamp(40px, 5vw, 60px);
  background-color: rgba(0, 0, 0, 0.015);
}
.services-list__row:hover::after {
  transform: scaleX(1);
}
.services-list__num {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: 0.10em;
  color: var(--color-mid-grey);
  padding-top: 8px;
  transition: color var(--duration-base) var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.services-list__row--01:hover .services-list__num { color: var(--color-blue); }
.services-list__row--02:hover .services-list__num { color: var(--color-orange); }
.services-list__main {
  /* Container del título + sub + expand */
}
.services-list__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-near-black);
  margin: 0 0 var(--space-3);
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.services-list__row:hover .services-list__title {
  transform: translateX(8px);
}
.services-list__sub {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 18px);
  margin: 0;
  letter-spacing: 0.01em;
  transition: color var(--duration-base) var(--ease-out);
}
.services-list__row--01 .services-list__sub { color: var(--color-blue); }
.services-list__row--02 .services-list__sub { color: var(--color-orange); }
.services-list__expand {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out),
              opacity var(--duration-base) var(--ease-out),
              margin-top var(--duration-base) var(--ease-out);
}
.services-list__row:hover .services-list__expand {
  max-height: 360px;
  opacity: 1;
  margin-top: var(--space-5);
}
.services-list__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-grey);
  max-width: 620px;
  margin: 0 0 var(--space-4);
}
.services-list__expand .chips {
  margin: 0;
}
.services-list__arrow {
  align-self: center;
  color: var(--color-mid-grey);
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}
.services-list__arrow svg {
  display: block;
}
.services-list__row:hover .services-list__arrow {
  transform: translateX(10px);
}
.services-list__row--01:hover .services-list__arrow { color: var(--color-blue); }
.services-list__row--02:hover .services-list__arrow { color: var(--color-orange); }

/* Row 02 (Creative Hub) — bloque dark: contrasta con Slide Center para
   leerlo como un team distinto */
.services-list__row--02 {
  background-color: var(--color-near-black);
  border-bottom: 0;
  border-radius: var(--radius-lg);
  margin-top: var(--space-3);
  padding-inline: clamp(28px, 3vw, 48px);
  overflow: hidden;
}
.services-list__row--02 .services-list__num {
  color: rgba(255, 255, 255, 0.35);
}
.services-list__row--02 .services-list__title {
  color: var(--color-white);
}
.services-list__row--02 .services-list__body {
  color: rgba(255, 255, 255, 0.6);
}
.services-list__row--02 .services-list__arrow {
  color: rgba(255, 255, 255, 0.45);
}
.services-list__row--02:hover {
  background-color: #0f0f0f;
}
.services-list__row--02::after {
  background-color: var(--color-orange);
  /* Sólo desde el padding interno hasta el otro borde, para que no salga
     del bloque redondeado */
  left: clamp(28px, 3vw, 48px);
  right: clamp(28px, 3vw, 48px);
}

/* Mobile: arrow abajo a la derecha, no en su propia columna */
@media (max-width: 700px) {
  .services-list__row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .services-list__num {
    grid-row: 1;
    grid-column: 1;
  }
  .services-list__main {
    grid-row: 1;
    grid-column: 2;
  }
  .services-list__arrow {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: var(--space-3);
  }
  /* En touch no hay hover — siempre expandido para legibilidad */
  .services-list__expand {
    max-height: 360px;
    opacity: 1;
    margin-top: var(--space-4);
  }
}

/* CLIENTS STRIP --------------------------------------------- */
.clients-strip {
  padding-block: clamp(80px, 10vw, 120px);
  background-color: var(--color-off-white);
  overflow: hidden;
  position: relative;
}
.clients-strip__label {
  text-align: center;
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin-bottom: var(--space-8);
}
.clients-strip__track-wrap {
  overflow: hidden;
  position: relative;
}
.clients-strip__track-wrap::before,
.clients-strip__track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
}
.clients-strip__track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-off-white), transparent);
}
.clients-strip__track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-off-white), transparent);
}
.clients-strip__track {
  display: flex;
  gap: clamp(40px, 5vw, 72px);
  animation: marquee 160s linear infinite;
  width: max-content;
  /* The track's transform (marquee) makes it an isolated group, so child
     logos' mix-blend-mode:multiply blends against THIS element, not the
     section background. Give it the same off-white so white logo boxes
     multiply away. */
  background-color: var(--color-off-white);
}
.clients-strip__track:hover { animation-play-state: paused; }
.clients-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 128px;
  opacity: 0.40;
  transition: opacity var(--duration-fast) var(--ease-out);
  filter: grayscale(1);
  mix-blend-mode: multiply;   /* knocks out white logo backgrounds against the off-white strip */
  flex-shrink: 0;
}
.clients-logo:hover { opacity: 0.85; }
.clients-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Small screens: scale the (now larger) logos down so the marquee still
   shows more than one at a time and doesn't overflow the row height. */
@media (max-width: 600px) {
  .clients-logo { width: 200px; height: 84px; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* OUTRO LOGO ------------------------------------------------- */
.home-outro {
  padding-block: clamp(24px, 3vw, 40px);
  background-color: #EEEEEE;   /* exact match to the .mp4 background (sampled from the video) */
  display: flex;
  justify-content: center;
}
.home-outro__logo { width: min(560px, 80%); height: auto; display: block; }

/* AGENCY DETAIL ---------------------------------------------- */
.agency-detail {
  padding-block: clamp(120px, 14vw, 200px);
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.agency-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.agency-detail__copy {}
.agency-detail__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.15;
  color: var(--color-near-black);
  margin-bottom: var(--space-6);
}
.agency-detail__title strong {
  font-weight: 400;
}
.agency-detail__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-grey);
  margin-bottom: var(--space-8);
}
.agency-detail__body em {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  color: var(--color-near-black);
}
.agency-detail__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-light-grey);
}
.agency-detail__stat-num {
  font-family: var(--font-frama);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--color-near-black);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
  /* Variant numérico tabular para que no salte el ancho mientras anima */
  font-variant-numeric: tabular-nums;
}
.agency-detail__stat-num--infinity {
  animation: infinity-pulse 4s ease-in-out infinite;
}
@keyframes infinity-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.97); }
}
.agency-detail__stat-label {
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-mid-grey);
  display: block;
}
.agency-detail__visual {
  position: relative;
}
.agency-detail__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.agency-detail__mini-card {
  background-color: var(--color-off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-light-grey);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.agency-detail__mini-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.agency-detail__mini-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background-color: var(--color-blue);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agency-detail__mini-card-icon svg {
  width: 18px;
  height: 18px;
  stroke: white;
  fill: none;
  stroke-width: 1.5;
}
.agency-detail__mini-card-title {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-near-black);
  margin-bottom: var(--space-2);
}
.agency-detail__mini-card-body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: 13px;
  color: var(--color-grey);
  line-height: 1.5;
}

/* LATEST PROJECTS ------------------------------------------- */
.latest-projects {
  padding-block: clamp(120px, 14vw, 200px);
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.latest-projects__header {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: clamp(64px, 8vw, 100px);
  position: relative;
  z-index: 1;
}
.latest-projects__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-near-black);
  margin: 0;
  text-align: center;
}
.latest-projects__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-near-black);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-near-black);
  transition: gap var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.latest-projects__view-all:hover {
  gap: var(--space-4);
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.latest-projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}
/* Card */
.lp-card {
  background-color: var(--color-off-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  position: relative;
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
}
.lp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
/* Thumb (visual generativo hasta que lleguen imágenes reales) */
.lp-card__thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-card--01 .lp-card__thumb {
  background:
    radial-gradient(circle at 30% 30%, rgba(125,196,255,0.5), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(65,100,254,0.5), transparent 60%),
    linear-gradient(135deg, #1d1d1b, #3A3A3A);
  color: var(--color-sky-blue);
}
.lp-card--02 .lp-card__thumb {
  background:
    radial-gradient(circle at 80% 20%, rgba(206,166,252,0.45), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(233,75,36,0.30), transparent 55%),
    linear-gradient(135deg, #F5F5F3, #E6E6E6);
  color: var(--color-orange);
}
.lp-card--03 .lp-card__thumb {
  background:
    radial-gradient(circle at 50% 30%, rgba(65,100,254,0.55), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,0.3), transparent 55%),
    linear-gradient(135deg, #4164FE, #1d1d1b);
  color: var(--color-white);
}
.lp-card--04 .lp-card__thumb {
  background:
    radial-gradient(circle at 25% 75%, rgba(233,75,36,0.5), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(125,196,255,0.35), transparent 55%),
    linear-gradient(135deg, #FFFFFF, #F5F5F3);
  color: var(--color-near-black);
}
/* Real project image filling the thumb */
.lp-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}
.lp-card:hover .lp-card__photo { transform: scale(1.05); }

/* Nombre del proyecto como ghost text gigante en el thumb */
.lp-card__thumb-name {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: currentColor;
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  position: absolute;
  bottom: 8%;
  left: 6%;
  text-transform: lowercase;
}
/* Rings SVG decorativos en esquina superior derecha del thumb */
.lp-card__rings {
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  position: absolute;
  top: 8%;
  right: 6%;
  color: currentColor;
  opacity: 0.5;
  transition: transform 700ms var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.lp-card:hover .lp-card__rings {
  transform: rotate(45deg) scale(1.1);
  opacity: 0.8;
}
/* Spotlight overlay aprovecha data-spotlight existente */
.lp-card[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: 1;
  background: radial-gradient(circle 260px at var(--spot-x) var(--spot-y),
    rgba(255,255,255,0.18) 0%,
    transparent 60%);
}
.lp-card[data-spotlight]:hover::before {
  opacity: 1;
}
/* Meta strip — tag, title, year */
.lp-card__meta {
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 2;
}
.lp-card__tag {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  grid-row: 1;
  grid-column: 1;
}
.lp-card__title {
  font-family: var(--font-frama);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-near-black);
  margin: 0;
  grid-row: 2;
  grid-column: 1;
}
.lp-card__year {
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-mid-grey);
  grid-row: 2;
  grid-column: 2;
}

/* HOW WE WORK — minimal closing block antes del footer ------ */
.how-we-work {
  padding-block: clamp(120px, 14vw, 200px);
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.how-we-work__ghost {
  bottom: -10%;
  right: -3%;
  font-size: clamp(80px, 14vw, 200px);
  color: rgba(0, 0, 0, 0.04);
  -webkit-text-stroke: none;
}
.how-we-work__inner {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.how-we-work__inner .eyebrow {
  justify-content: center;
  margin-bottom: var(--space-8);
}
.how-we-work__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-near-black);
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.how-we-work__title strong {
  font-weight: 400;
}
.how-we-work__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-grey);
  margin: 0 auto;
  /* max-width afinado + balance para repartir el texto en 3 líneas parejas
     y evitar la viuda ("the way") al final */
  max-width: 680px;
  text-wrap: balance;
}
.how-we-work__body em {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  color: var(--color-blue);
}

/* HOME RESPONSIVE ------------------------------------------- */
@media (max-width: 900px) {
  .services-overview__grid {
    grid-template-columns: 1fr;
  }
  .agency-detail__grid {
    grid-template-columns: 1fr;
  }
  .agency-detail__visual { display: none; }
  .latest-projects__grid {
    grid-template-columns: 1fr;
  }
  .latest-projects__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .hero__scroll { display: none; }
  .hero__headline { letter-spacing: -0.01em; }
}

/* ACCESIBILIDAD — REDUCIR MOVIMIENTO ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .agency-detail__stat-num--infinity,
  .hero__scroll-line,
  .hero__aurora,
  .hero__aurora--1,
  .hero__aurora--2,
  .hero__aurora--3 {
    animation: none !important;
  }
  .hero__deco,
  .hero__content {
    transition: none !important;
  }
  /* Mostrar icons completos sin animar el trazo */
  .card-icon-ring {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .card-icon-dot {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }
}

.hero__subline-services {
  font-family: var(--font-manrope);
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--color-grey);
  opacity: 0.6;
  margin-top: var(--space-2);
  letter-spacing: 0.01em;
}